mirror of
https://github.com/material-components/material-web.git
synced 2026-03-09 00:09:23 +08:00
9647f5e514
BREAKING CHANGE: change `slot="selectedIcon"` to `slot="selected"` for toggle icon buttons. PiperOrigin-RevId: 561740365
43 lines
1.5 KiB
HTML
43 lines
1.5 KiB
HTML
<div class="figure-wrapper">
|
|
<figure
|
|
style="gap:8px;flex-direction:column;padding-block:8px;"
|
|
aria-label="Two rows of toggling icon buttons, the top row is unselected and the bottom row is selected">
|
|
<div style="display:flex;gap:8px;">
|
|
<md-icon-button toggle>
|
|
<md-icon>close</md-icon>
|
|
<md-icon slot="selected">check</md-icon>
|
|
</md-icon-button>
|
|
<md-filled-icon-button toggle>
|
|
<md-icon>close</md-icon>
|
|
<md-icon slot="selected">check</md-icon>
|
|
</md-filled-icon-button>
|
|
<md-filled-tonal-icon-button toggle>
|
|
<md-icon>close</md-icon>
|
|
<md-icon slot="selected">check</md-icon>
|
|
</md-filled-tonal-icon-button>
|
|
<md-outlined-icon-button toggle>
|
|
<md-icon>close</md-icon>
|
|
<md-icon slot="selected">check</md-icon>
|
|
</md-outlined-icon-button>
|
|
</div>
|
|
<div style="display:flex;gap:8px;">
|
|
<md-icon-button toggle selected>
|
|
<md-icon>close</md-icon>
|
|
<md-icon slot="selected">check</md-icon>
|
|
</md-icon-button>
|
|
<md-filled-icon-button toggle selected>
|
|
<md-icon>close</md-icon>
|
|
<md-icon slot="selected">check</md-icon>
|
|
</md-filled-icon-button>
|
|
<md-filled-tonal-icon-button toggle selected>
|
|
<md-icon>close</md-icon>
|
|
<md-icon slot="selected">check</md-icon>
|
|
</md-filled-tonal-icon-button>
|
|
<md-outlined-icon-button toggle selected>
|
|
<md-icon>close</md-icon>
|
|
<md-icon slot="selected">check</md-icon>
|
|
</md-outlined-icon-button>
|
|
</div>
|
|
</figure>
|
|
</div>
|