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

feat(accordion): add size variants

Browse source
This commit is contained in:
Eric Liu 2020-10-14 18:01:55 -07:00
commit 06fea29c4f
2 changed files with 37 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -63,6 +63,34 @@
</AccordionItem> </AccordionItem>
</Accordion> </Accordion>
### Large size
<Accordion size="lg">
<AccordionItem title="Title 1">
Content 1
</AccordionItem>
<AccordionItem title="Title 2">
Content 2
</AccordionItem>
<AccordionItem title="Title 3">
Content 3
</AccordionItem>
</Accordion>
### Small size
<Accordion size="sm">
<AccordionItem title="Title 1">
Content 1
</AccordionItem>
<AccordionItem title="Title 2">
Content 2
</AccordionItem>
<AccordionItem title="Title 3">
Content 3
</AccordionItem>
</Accordion>
### Skeleton ### Skeleton
<Accordion skeleton count={3} /> <Accordion skeleton count={3} />

10
src/Accordion/Accordion.svelte
View file

@ -5,6 +5,12 @@
*/ */
export let align = "end"; export let align = "end";
/**
* Specify the size of the accordion
* @type {"sm" | "lg"} [size]
*/
export let size = undefined;
/** /**
* Set to `true` to display the skeleton state * Set to `true` to display the skeleton state
* @type {boolean} [skeleton=false] * @type {boolean} [skeleton=false]
@ -26,7 +32,9 @@
<ul <ul
class:bx--accordion="{true}" class:bx--accordion="{true}"
{...$$restProps} {...$$restProps}
class="bx--accordion--{align} {$$restProps.class}" class="bx--accordion--{align}
{size && `bx--accordion--${size}`}
{$$restProps.class}"
on:click on:click
on:mouseover on:mouseover
on:mouseenter on:mouseenter