mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-20 20:33:02 +00:00
7cd3723960* chore(deps-dev): remove @carbon/themes * chore(deps-dev): bump devDependencies * fix(tabs): forward click event to Tab * feat(toggle): dispatch toggle event * feat(tag): dispatch close event * feat(tooltip-icon): make tooltipText slottable * feat(dropdown): add hideLabel prop * docs(select): add "Hidden label" example * refactor(modal): use class directive * feat(modal): dispatch transitionend event * chore(deps-dev): upgrade carbon-components to 10.28.0-rc.0 * feat(date-picker): add warn state * feat(tag): support small size variant * fix(search): add semantic role * feat(toolbar-search): add disabled state * fix(composed-modal): add aria-label prop, update header semantic tags * chore(deps-dev): upgrade carbon-components to v10.28 * docs(overflow-menu): add light variant example * docs(link): document OutboundLink in Component API * chore(tooltip-icon): rename slot to "tooltipText" * docs(component-api): wrap code blocks to minimize width * docs(aspect-ratio): remove inline outline style * fix(tab): do not trigger focus when mounting * docs(tabs): add reactive example Closes #438
89 lines
No EOL
2.5 KiB
Text
89 lines
No EOL
2.5 KiB
Text
---
|
|
components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
|
|
---
|
|
|
|
<script>
|
|
import { Select, SelectItem, SelectItemGroup, SelectSkeleton } from "carbon-components-svelte";
|
|
import Preview from "../../components/Preview.svelte";
|
|
</script>
|
|
|
|
### Default
|
|
|
|
<Select labelText="Carbon theme" selected="g10" >
|
|
<SelectItem value="white" text="White" />
|
|
<SelectItem value="g10" text="Gray 10" />
|
|
<SelectItem value="g90" text="Gray 90" />
|
|
<SelectItem value="g100" text="Gray 100" />
|
|
</Select>
|
|
|
|
### Hidden label
|
|
|
|
<Select hideLabel labelText="Carbon theme" selected="g10" >
|
|
<SelectItem value="white" text="White" />
|
|
<SelectItem value="g10" text="Gray 10" />
|
|
<SelectItem value="g90" text="Gray 90" />
|
|
<SelectItem value="g100" text="Gray 100" />
|
|
</Select>
|
|
|
|
### Item groups
|
|
|
|
<Select labelText="Carbon theme" selected="g10" >
|
|
<SelectItem value="0" text="Select a theme" disabled hidden />
|
|
<SelectItemGroup label="Light theme">
|
|
<SelectItem value="white" text="White" />
|
|
<SelectItem value="g10" text="Gray 10" />
|
|
</SelectItemGroup>
|
|
<SelectItemGroup label="Dark theme">
|
|
<SelectItem value="g90" text="Gray 90" />
|
|
<SelectItem value="g100" text="Gray 100" />
|
|
</SelectItemGroup>
|
|
</Select>
|
|
|
|
### Light variant
|
|
|
|
<Select light labelText="Carbon theme" selected="g10" >
|
|
<SelectItem value="white" text="White" />
|
|
<SelectItem value="g10" text="Gray 10" />
|
|
<SelectItem value="g90" text="Gray 90" />
|
|
<SelectItem value="g100" text="Gray 100" />
|
|
</Select>
|
|
|
|
### Inline type
|
|
|
|
<Select inline labelText="Carbon theme" selected="g10" >
|
|
<SelectItem value="white" text="White" />
|
|
<SelectItem value="g10" text="Gray 10" />
|
|
<SelectItem value="g90" text="Gray 90" />
|
|
<SelectItem value="g100" text="Gray 100" />
|
|
</Select>
|
|
|
|
### Extra-large size
|
|
|
|
<Select size="xl" labelText="Carbon theme" selected="g10" >
|
|
<SelectItem value="white" text="White" />
|
|
<SelectItem value="g10" text="Gray 10" />
|
|
<SelectItem value="g90" text="Gray 90" />
|
|
<SelectItem value="g100" text="Gray 100" />
|
|
</Select>
|
|
|
|
### Small size
|
|
|
|
<Select size="sm" labelText="Carbon theme" selected="g10" >
|
|
<SelectItem value="white" text="White" />
|
|
<SelectItem value="g10" text="Gray 10" />
|
|
<SelectItem value="g90" text="Gray 90" />
|
|
<SelectItem value="g100" text="Gray 100" />
|
|
</Select>
|
|
|
|
### Disabled
|
|
|
|
<Select disabled labelText="Carbon theme" selected="g10" >
|
|
<SelectItem value="white" text="White" />
|
|
<SelectItem value="g10" text="Gray 10" />
|
|
<SelectItem value="g90" text="Gray 90" />
|
|
<SelectItem value="g100" text="Gray 100" />
|
|
</Select>
|
|
|
|
### Skeleton
|
|
|
|
<SelectSkeleton /> |