js/shoelace
1
0
Fork 0
mirror of https://github.com/shoelace-style/shoelace.git synced 2026-01-12 11:09:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

Select component: add a suffix to .form-control-input

Browse Source
This commit is contained in:
Nic Newdigate
2024-06-11 16:55:32 +01:00
parent 6092796850
commit dbd4ba835b
3 changed files with 40 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
docs/pages/components/select.md
View File

@@ -422,6 +422,33 @@ Use the `prefix` slot to prepend an icon to the control.
</sl-select>
```
### Suffix Icons
Use the `suffix` slot to append an icon to the control.
```html:preview
<sl-select placeholder="Small" size="small" clearable>
<sl-icon name="house" slot="suffix"></sl-icon>
<sl-option value="option-1">Option 1</sl-option>
<sl-option value="option-2">Option 2</sl-option>
<sl-option value="option-3">Option 3</sl-option>
</sl-select>
<br />
<sl-select placeholder="Medium" size="medium" clearable>
<sl-icon name="house" slot="suffix"></sl-icon>
<sl-option value="option-1">Option 1</sl-option>
<sl-option value="option-2">Option 2</sl-option>
<sl-option value="option-3">Option 3</sl-option>
</sl-select>
<br />
<sl-select placeholder="Large" size="large" clearable>
<sl-icon name="house" slot="suffix"></sl-icon>
<sl-option value="option-1">Option 1</sl-option>
<sl-option value="option-2">Option 2</sl-option>
<sl-option value="option-3">Option 3</sl-option>
</sl-select>
```
```jsx:react
import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
import SlOption from '@shoelace-style/shoelace/dist/react/option';