kopia lustrzana https://github.com/shoelace-style/shoelace
update examples and changelog
Cory LaViska
rodzic
a89eab43c4
commit
b35d5e9914
|
|
@ -84,18 +84,18 @@ Use the `prefix` and `suffix` slots to add icons.
|
|||
|
||||
```html preview
|
||||
<sl-input placeholder="Small" size="small">
|
||||
<sl-icon name="tag" slot="prefix"></sl-icon>
|
||||
<sl-icon name="gear" slot="suffix"></sl-icon>
|
||||
<sl-icon name="house" slot="prefix"></sl-icon>
|
||||
<sl-icon name="chat" slot="suffix"></sl-icon>
|
||||
</sl-input>
|
||||
<br>
|
||||
<sl-input placeholder="Medium" size="medium">
|
||||
<sl-icon name="tag" slot="prefix"></sl-icon>
|
||||
<sl-icon name="gear" slot="suffix"></sl-icon>
|
||||
<sl-icon name="house" slot="prefix"></sl-icon>
|
||||
<sl-icon name="chat" slot="suffix"></sl-icon>
|
||||
</sl-input>
|
||||
<br>
|
||||
<sl-input placeholder="Large" size="large">
|
||||
<sl-icon name="tag" slot="prefix"></sl-icon>
|
||||
<sl-icon name="gear" slot="suffix"></sl-icon>
|
||||
<sl-icon name="house" slot="prefix"></sl-icon>
|
||||
<sl-icon name="chat" slot="suffix"></sl-icon>
|
||||
</sl-input>
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -188,46 +188,34 @@ Add descriptive help text to a select with the `help-text` attribute. For help t
|
|||
</sl-select>
|
||||
```
|
||||
|
||||
### Prefix and Suffix
|
||||
### Prefix & Suffix Icons
|
||||
|
||||
Use the `prefix` or `suffix` slot to add a prefix or suffix to the selected value
|
||||
Use the `prefix` and `suffix` slots to add icons.
|
||||
|
||||
```html preview
|
||||
<sl-select label="Sort by" class="sort">
|
||||
<sl-menu-item value="name.asc">Name (Asc)</sl-menu-item>
|
||||
<sl-menu-item value="name.desc">Name (Desc)</sl-menu-item>
|
||||
<sl-menu-item value="value.asc">Value (Asc)</sl-menu-item>
|
||||
<sl-menu-item value="value.desc">Value (Desc)</sl-menu-item>
|
||||
<sl-icon name="sort-down" slot="suffix"></sl-icon>
|
||||
<sl-select placeholder="Small" size="small">
|
||||
<sl-icon name="house" slot="prefix"></sl-icon>
|
||||
<sl-menu-item value="option-1">Option 1</sl-menu-item>
|
||||
<sl-menu-item value="option-2">Option 2</sl-menu-item>
|
||||
<sl-menu-item value="option-3">Option 3</sl-menu-item>
|
||||
<sl-icon name="chat" slot="suffix"></sl-icon>
|
||||
</sl-select>
|
||||
|
||||
<br>
|
||||
|
||||
<sl-select label="Transaction Price" class="price">
|
||||
<sl-icon name="currency-bitcoin" slot="prefix"></sl-icon>
|
||||
<sl-menu-item value="option-1">0.02</sl-menu-item>
|
||||
<sl-menu-item value="option-2">0.04</sl-menu-item>
|
||||
<sl-menu-item value="option-3">0.06</sl-menu-item>
|
||||
<sl-select placeholder="Medium" size="medium">
|
||||
<sl-icon name="house" slot="prefix"></sl-icon>
|
||||
<sl-menu-item value="option-1">Option 1</sl-menu-item>
|
||||
<sl-menu-item value="option-2">Option 2</sl-menu-item>
|
||||
<sl-menu-item value="option-3">Option 3</sl-menu-item>
|
||||
<sl-icon name="chat" slot="suffix"></sl-icon>
|
||||
</sl-select>
|
||||
<br>
|
||||
<sl-select placeholder="Large" size="large">
|
||||
<sl-icon name="house" slot="prefix"></sl-icon>
|
||||
<sl-menu-item value="option-1">Option 1</sl-menu-item>
|
||||
<sl-menu-item value="option-2">Option 2</sl-menu-item>
|
||||
<sl-menu-item value="option-3">Option 3</sl-menu-item>
|
||||
<sl-icon name="chat" slot="suffix"></sl-icon>
|
||||
</sl-select>
|
||||
|
||||
<style>
|
||||
sl-select.sort sl-icon {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
sl-select.price sl-icon {
|
||||
font-size: 24px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
const select = document.querySelector('sl-select.sort');
|
||||
select.addEventListener('sl-change', event => {
|
||||
const icon = select.value.startsWith('name') ? 'sort-alpha-down' : 'sort-numeric-down';
|
||||
const variation = select.value.endsWith('asc') ? '' : '-alt';
|
||||
select.querySelector('sl-icon').name = `${icon}${variation}`;
|
||||
})
|
||||
</script>
|
||||
```
|
||||
|
||||
[component-metadata:sl-select]
|
||||
|
|
|
|||
|
|
@ -39,6 +39,7 @@ This change applies to all design tokens that implement a color. Refer to the [c
|
|||
- Added `--sl-color-*-950` swatches to all color palettes
|
||||
- Added a console error that appears when menu items have duplicate values in `sl-select`
|
||||
- Added CodePen link to code examples
|
||||
- Added `prefix` and `suffix` slots to `sl-select` [#501](https://github.com/shoelace-style/shoelace/pull/501)
|
||||
- Exposed base and dark stylesheets so they can be imported via JavaScript [#438](https://github.com/shoelace-style/shoelace/issues/438)
|
||||
- Fixed a bug in `sl-menu` where pressing <kbd>Enter</kbd> after using type to select would result in the wrong value
|
||||
- Fixed a bug in `sl-radio-group` where clicking a radio button would cause the wrong control to be focused
|
||||
|
|
|
|||
|
|
@ -32,7 +32,8 @@ let id = 0;
|
|||
* @dependency sl-tag
|
||||
*
|
||||
* @slot - The select's options in the form of menu items.
|
||||
* @slot prefix - The select's prefix.
|
||||
* @slot prefix - Used to prepend an icon or similar element to the select.
|
||||
* @slot suffix - Used to append an icon or similar element to the select.
|
||||
* @slot label - The select's label. Alternatively, you can use the label prop.
|
||||
* @slot suffix - The select's suffix.
|
||||
* @slot help-text - Help text that describes how to use the select.
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue