mirror
/
shoelace
kopia lustrzana https://github.com/shoelace-style/shoelace
1
0
Forkuj 0
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

Add color example

pull/224/head
Cory LaViska 2020-09-15 08:16:16 -04:00
rodzic 12885bc718
commit 1546b53d40
1 zmienionych plików z 27 dodań i 0 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

27
docs/components/icon-button.md
Wyświetl plik

@ -24,6 +24,33 @@ Icon buttons inherit their parent element's `font-size`.
<sl-icon-button name="pencil" style="font-size: 2.5rem;"></sl-icon-button>
```
### Colors
Icon buttons are designed to have a uniform appearance, so their color is not inherited. However, you can still customize them by styling the `base` part.
```html preview
<div class="icon-button-color">
<sl-icon-button name="type-bold"></sl-icon-button>
<sl-icon-button name="type-italic"></sl-icon-button>
<sl-icon-button name="type-underline"></sl-icon-button>
</div>
<style>
.icon-button-color sl-icon-button::part(base) {
color: #b00091;
}
.icon-button-color sl-icon-button::part(base):hover,
.icon-button-color sl-icon-button::part(base):focus {
color: #c913aa;
}
.icon-button-color sl-icon-button::part(base):active {
color: #960077;
}
</style>
```
### Icon Button with Tooltip
Wrap a tooltip around an icon button to provide contextual information to the user.