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

add grouping example

Browse Source
This commit is contained in:
Cory LaViska
2022-12-20 18:44:33 -05:00
parent 24744ef8c5
commit b8d02537a6
2 changed files with 38 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
docs/components/select.md
View File

@@ -286,7 +286,36 @@ TODO
### Grouping Options
TODO
Use `<sl-divider>` to group listbox items visually. You can also use `<small>` to provide labels, but they won't be announced by most assistive devices.
```html preview
<sl-select>
<small>Section 1</small>
<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-divider></sl-divider>
<small>Section 2</small>
<sl-option value="option-4">Option 4</sl-option>
<sl-option value="option-5">Option 5</sl-option>
<sl-option value="option-6">Option 6</sl-option>
</sl-select>
```
```jsx react
import { SlOption, SlSelect } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlSelect>
<SlOption value="option-1">Option 1</SlOption>
<SlOption value="option-2">Option 2</SlOption>
<SlOption value="option-3">Option 3</SlOption>
<SlOption value="option-4">Option 4</SlOption>
<SlOption value="option-5">Option 5</SlOption>
<SlOption value="option-6">Option 6</SlOption>
</SlSelect>
);
```
### Sizes

8
src/components/select/select.styles.ts
View File

@@ -244,7 +244,15 @@ export default css`
max-height: var(--auto-size-available-height);
}
/* Slotted content */
.select__listbox::slotted(sl-divider) {
--spacing: var(--sl-spacing-x-small);
}
.select__listbox::slotted(small) {
font-size: var(--sl-font-size-small);
font-weight: var(--sl-font-weight-semibold);
color: var(--sl-color-neutral-500);
padding: var(--sl-spacing-x-small) var(--sl-spacing-x-large);
}
`;