mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 02:11:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

docs(accordion): also demo batch disable

Browse source
This commit is contained in:
Eric Liu 2024-04-21 14:34:05 -07:00
commit a498ffc7e2
2 changed files with 17 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

6
docs/src/pages/components/Accordion.svx
View file

@ -140,9 +140,11 @@ By default, the chevron is right-aligned. Set `align="start"` to left-align the
## Programmatic example ## Programmatic example
This example demonstrates how a list of items can be programmatically expanded and collapsed. This example demonstrates how all items can be programmatically expanded, collapsed, or disabled.
<FileSource src="/framed/Accordion/ExpandableAccordion" /> Disabled accordion items cannot be expanded.
<FileSource src="/framed/Accordion/ProgrammaticAccordion" />
## Disabled ## Disabled

19
docs/src/pages/framed/Accordion/ExpandableAccordion.svelte → docs/src/pages/framed/Accordion/ProgrammaticAccordion.svelte
View file

@ -1,5 +1,7 @@
<script> <script>
import { Accordion, AccordionItem, Button } from "carbon-components-svelte"; import { Accordion, AccordionItem, Button, ButtonSet } from "carbon-components-svelte";
let disabled = false;
const items = [ const items = [
{ {
@ -22,12 +24,17 @@
let open = false; let open = false;
</script> </script>
<Button kind="ghost" size="field" on:click="{() => (open = !open)}"> <ButtonSet>
{open ? "Collapse" : "Expand"} <Button size="field" disabled="{disabled}" on:click="{() => (open = !open)}">
all {open ? "Collapse" : "Expand"}
</Button> all
</Button>
<Button kind="ghost" size="field" on:click="{() => (disabled = !disabled)}">
{disabled ? "Enable" : "Disable"} all
</Button>
</ButtonSet>
<Accordion> <Accordion disabled="{disabled}">
{#each items as item} {#each items as item}
<AccordionItem title="{item.title}" open="{open}"> <AccordionItem title="{item.title}" open="{open}">
<p>{item.description}</p> <p>{item.description}</p>