mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 18:31:06 +00:00
feat(accordion)!: integrate Accordion with v11 (#1947)
This commit is contained in:
Eric Liu
GitHub
parent
e8b9472acd
commit
0e8909ae59
10 changed files with 261 additions and 456 deletions
|
|
@ -8,7 +8,7 @@
|
|||
{
|
||||
"name": "align",
|
||||
"kind": "let",
|
||||
"description": "Specify alignment of accordion item chevron icon",
|
||||
"description": "Specify the alignment of the accordion item chevron icon.",
|
||||
"type": "\"start\" | \"end\"",
|
||||
"value": "\"end\"",
|
||||
"isFunction": false,
|
||||
|
|
@ -18,20 +18,9 @@
|
|||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "size",
|
||||
"name": "flush",
|
||||
"kind": "let",
|
||||
"description": "Specify the size of the accordion",
|
||||
"type": "\"sm\" | \"lg\"",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"isRequired": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "disabled",
|
||||
"kind": "let",
|
||||
"description": "Set to `true` to disable the accordion",
|
||||
"description": "Set to `true` to flush the accordion content text.\n\n**Note**: does not work with `align=\"start\"`.",
|
||||
"type": "boolean",
|
||||
"value": "false",
|
||||
"isFunction": false,
|
||||
|
|
@ -41,9 +30,21 @@
|
|||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "skeleton",
|
||||
"name": "size",
|
||||
"kind": "let",
|
||||
"description": "Set to `true` to display the skeleton state",
|
||||
"description": "Specify the size of the accordion.",
|
||||
"type": "\"sm\" | \"md\" | \"lg\"",
|
||||
"value": "\"md\"",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"isRequired": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "disabled",
|
||||
"kind": "let",
|
||||
"description": "Set to `true` to disable all accordion items.",
|
||||
"type": "boolean",
|
||||
"value": "false",
|
||||
"isFunction": false,
|
||||
|
|
@ -55,34 +56,8 @@
|
|||
],
|
||||
"moduleExports": [],
|
||||
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
|
||||
"events": [
|
||||
{
|
||||
"type": "forwarded",
|
||||
"name": "click",
|
||||
"element": "AccordionSkeleton"
|
||||
},
|
||||
{
|
||||
"type": "forwarded",
|
||||
"name": "mouseover",
|
||||
"element": "AccordionSkeleton"
|
||||
},
|
||||
{
|
||||
"type": "forwarded",
|
||||
"name": "mouseenter",
|
||||
"element": "AccordionSkeleton"
|
||||
},
|
||||
{
|
||||
"type": "forwarded",
|
||||
"name": "mouseleave",
|
||||
"element": "AccordionSkeleton"
|
||||
}
|
||||
],
|
||||
"typedefs": [],
|
||||
"rest_props": { "type": "InlineComponent", "name": "AccordionSkeleton" },
|
||||
"extends": {
|
||||
"interface": "AccordionSkeletonProps",
|
||||
"import": "\"./AccordionSkeleton.svelte\""
|
||||
}
|
||||
"events": [],
|
||||
"typedefs": []
|
||||
},
|
||||
{
|
||||
"moduleName": "AccordionItem",
|
||||
|
|
@ -91,7 +66,7 @@
|
|||
{
|
||||
"name": "title",
|
||||
"kind": "let",
|
||||
"description": "Specify the title of the accordion item heading.\nAlternatively, use the \"title\" slot (e.g., `<div slot=\"title\">...</div>`)",
|
||||
"description": "Specify the title of the accordion item heading.\nUse the \"title\" slot for custom elements.\n@example <svelte:fragment slot=\"title\">...</svelte:fragment>",
|
||||
"type": "string",
|
||||
"value": "\"title\"",
|
||||
"isFunction": false,
|
||||
|
|
@ -103,7 +78,7 @@
|
|||
{
|
||||
"name": "open",
|
||||
"kind": "let",
|
||||
"description": "Set to `true` to open the first accordion item",
|
||||
"description": "Set to `true` to open the first accordion item.",
|
||||
"type": "boolean",
|
||||
"value": "false",
|
||||
"isFunction": false,
|
||||
|
|
@ -115,7 +90,7 @@
|
|||
{
|
||||
"name": "disabled",
|
||||
"kind": "let",
|
||||
"description": "Set to `true` to disable the accordion item",
|
||||
"description": "Set to `true` to disable the accordion item.",
|
||||
"type": "boolean",
|
||||
"value": "false",
|
||||
"isFunction": false,
|
||||
|
|
@ -127,7 +102,7 @@
|
|||
{
|
||||
"name": "iconDescription",
|
||||
"kind": "let",
|
||||
"description": "Specify the ARIA label for the accordion item chevron icon",
|
||||
"description": "Specify the ARIA label for the accordion item chevron icon.",
|
||||
"type": "string",
|
||||
"value": "\"Expand/Collapse\"",
|
||||
"isFunction": false,
|
||||
|
|
@ -155,8 +130,7 @@
|
|||
{ "type": "forwarded", "name": "mouseleave", "element": "button" },
|
||||
{ "type": "forwarded", "name": "keydown", "element": "button" }
|
||||
],
|
||||
"typedefs": [],
|
||||
"rest_props": { "type": "Element", "name": "li" }
|
||||
"typedefs": []
|
||||
},
|
||||
{
|
||||
"moduleName": "AccordionSkeleton",
|
||||
|
|
@ -165,7 +139,7 @@
|
|||
{
|
||||
"name": "count",
|
||||
"kind": "let",
|
||||
"description": "Specify the number of accordion items to render",
|
||||
"description": "Specify the number of accordion items.",
|
||||
"type": "number",
|
||||
"value": "4",
|
||||
"isFunction": false,
|
||||
|
|
@ -177,7 +151,7 @@
|
|||
{
|
||||
"name": "align",
|
||||
"kind": "let",
|
||||
"description": "Specify alignment of accordion item chevron icon",
|
||||
"description": "Specify the alignment of the accordion item chevron icon.",
|
||||
"type": "\"start\" | \"end\"",
|
||||
"value": "\"end\"",
|
||||
"isFunction": false,
|
||||
|
|
@ -186,11 +160,24 @@
|
|||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "flush",
|
||||
"kind": "let",
|
||||
"description": "Set to `true` to flush the accordion content text.\n\n**Note**: does not work with `align=\"start\"`.",
|
||||
"type": "boolean",
|
||||
"value": "false",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"isRequired": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "size",
|
||||
"kind": "let",
|
||||
"description": "Specify the size of the accordion",
|
||||
"type": "\"sm\" | \"xl\"",
|
||||
"description": "Specify the size of the accordion.",
|
||||
"type": "\"sm\" | \"md\" | \"lg\"",
|
||||
"value": "\"md\"",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"isRequired": false,
|
||||
|
|
@ -200,9 +187,9 @@
|
|||
{
|
||||
"name": "open",
|
||||
"kind": "let",
|
||||
"description": "Set to `false` to close the first accordion item",
|
||||
"description": "Set to `true` to expand the first accordion item",
|
||||
"type": "boolean",
|
||||
"value": "true",
|
||||
"value": "false",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"isRequired": false,
|
||||
|
|
@ -212,14 +199,8 @@
|
|||
],
|
||||
"moduleExports": [],
|
||||
"slots": [],
|
||||
"events": [
|
||||
{ "type": "forwarded", "name": "click", "element": "ul" },
|
||||
{ "type": "forwarded", "name": "mouseover", "element": "ul" },
|
||||
{ "type": "forwarded", "name": "mouseenter", "element": "ul" },
|
||||
{ "type": "forwarded", "name": "mouseleave", "element": "ul" }
|
||||
],
|
||||
"typedefs": [],
|
||||
"rest_props": { "type": "Element", "name": "ul" }
|
||||
"events": [],
|
||||
"typedefs": []
|
||||
},
|
||||
{
|
||||
"moduleName": "AspectRatio",
|
||||
|
|
|
|||
|
|
@ -6,12 +6,15 @@ components: ["Accordion", "AccordionItem", "AccordionSkeleton"]
|
|||
import {
|
||||
Accordion,
|
||||
AccordionItem,
|
||||
AccordionSkeleton
|
||||
} from "carbon-components-svelte";
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
## Default
|
||||
|
||||
By default, the accordion is medium-sized with the chevron right-aligned.
|
||||
|
||||
<Accordion>
|
||||
<AccordionItem title="Natural Language Classifier">
|
||||
<p>Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text.
|
||||
|
|
@ -25,8 +28,61 @@ components: ["Accordion", "AccordionItem", "AccordionSkeleton"]
|
|||
</AccordionItem>
|
||||
</Accordion>
|
||||
|
||||
## Large size
|
||||
|
||||
Set the `size` prop to `lg` to increase the size of the accordion.
|
||||
|
||||
<Accordion size="lg">
|
||||
<AccordionItem title="Natural Language Classifier">
|
||||
<p>Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text.
|
||||
</p>
|
||||
</AccordionItem>
|
||||
<AccordionItem title="Natural Language Understanding">
|
||||
<p>Analyze text to extract meta-data from content such as concepts, entities, emotion, relations, sentiment and more.</p>
|
||||
</AccordionItem>
|
||||
<AccordionItem title="Language Translator">
|
||||
<p>Translate text, documents, and websites from one language to another. Create industry or region-specific translations via the service's customization capability.</p>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
|
||||
## Small size
|
||||
|
||||
Set the `size` prop to `sm` to decrease the size of the accordion.
|
||||
|
||||
<Accordion size="sm">
|
||||
<AccordionItem title="Natural Language Classifier">
|
||||
<p>Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text.
|
||||
</p>
|
||||
</AccordionItem>
|
||||
<AccordionItem title="Natural Language Understanding">
|
||||
<p>Analyze text to extract meta-data from content such as concepts, entities, emotion, relations, sentiment and more.</p>
|
||||
</AccordionItem>
|
||||
<AccordionItem title="Language Translator">
|
||||
<p>Translate text, documents, and websites from one language to another. Create industry or region-specific translations via the service's customization capability.</p>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
|
||||
## Flush text
|
||||
|
||||
Set the `flush` prop to `true` to flush align accordion content text. Note that this prop cannot be used with `align="start"`.
|
||||
|
||||
<Accordion flush>
|
||||
<AccordionItem title="Natural Language Classifier">
|
||||
<p>Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text.
|
||||
</p>
|
||||
</AccordionItem>
|
||||
<AccordionItem title="Natural Language Understanding">
|
||||
<p>Analyze text to extract meta-data from content such as concepts, entities, emotion, relations, sentiment and more.</p>
|
||||
</AccordionItem>
|
||||
<AccordionItem title="Language Translator">
|
||||
<p>Translate text, documents, and websites from one language to another. Create industry or region-specific translations via the service's customization capability.</p>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
|
||||
## Left-aligned chevron
|
||||
|
||||
By default, the chevron is right-aligned. Set `align="start"` to left-align the chevron.
|
||||
|
||||
<Accordion align="start">
|
||||
<AccordionItem title="Natural Language Classifier">
|
||||
<p>Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text.
|
||||
|
|
@ -42,10 +98,10 @@ components: ["Accordion", "AccordionItem", "AccordionSkeleton"]
|
|||
|
||||
## Custom title slot
|
||||
|
||||
<Accordion>
|
||||
<Accordion size="lg">
|
||||
<AccordionItem>
|
||||
<svelte:fragment slot="title">
|
||||
<h5>Natural Language Classifier</h5>
|
||||
<h6>Natural Language Classifier</h6>
|
||||
<div>AI / Machine Learning</div>
|
||||
</svelte:fragment>
|
||||
<p>Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text.
|
||||
|
|
@ -53,14 +109,14 @@ components: ["Accordion", "AccordionItem", "AccordionSkeleton"]
|
|||
</AccordionItem>
|
||||
<AccordionItem>
|
||||
<svelte:fragment slot="title">
|
||||
<h5>Natural Language Understanding</h5>
|
||||
<h6>Natural Language Understanding</h6>
|
||||
<div>AI / Machine Learning</div>
|
||||
</svelte:fragment>
|
||||
<p>Analyze text to extract meta-data from content such as concepts, entities, emotion, relations, sentiment and more.</p>
|
||||
</AccordionItem>
|
||||
<AccordionItem>
|
||||
<svelte:fragment slot="title">
|
||||
<h5>Language Translator</h5>
|
||||
<h6>Language Translator</h6>
|
||||
<div>AI / Machine Learning</div>
|
||||
</svelte:fragment>
|
||||
<p>Translate text, documents, and websites from one language to another. Create industry or region-specific translations via the service's customization capability.</p>
|
||||
|
|
@ -88,38 +144,12 @@ This example demonstrates how a list of items can be programmatically expanded a
|
|||
|
||||
<FileSource src="/framed/Accordion/ExpandableAccordion" />
|
||||
|
||||
## Large size
|
||||
|
||||
<Accordion size="lg">
|
||||
<AccordionItem title="Natural Language Classifier">
|
||||
<p>Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text.
|
||||
</p>
|
||||
</AccordionItem>
|
||||
<AccordionItem title="Natural Language Understanding">
|
||||
<p>Analyze text to extract meta-data from content such as concepts, entities, emotion, relations, sentiment and more.</p>
|
||||
</AccordionItem>
|
||||
<AccordionItem title="Language Translator">
|
||||
<p>Translate text, documents, and websites from one language to another. Create industry or region-specific translations via the service's customization capability.</p>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
|
||||
## Small size
|
||||
|
||||
<Accordion size="sm">
|
||||
<AccordionItem title="Natural Language Classifier">
|
||||
<p>Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text.
|
||||
</p>
|
||||
</AccordionItem>
|
||||
<AccordionItem title="Natural Language Understanding">
|
||||
<p>Analyze text to extract meta-data from content such as concepts, entities, emotion, relations, sentiment and more.</p>
|
||||
</AccordionItem>
|
||||
<AccordionItem title="Language Translator">
|
||||
<p>Translate text, documents, and websites from one language to another. Create industry or region-specific translations via the service's customization capability.</p>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
|
||||
## Disabled
|
||||
|
||||
Set the `disabled` prop to `true` to disable all accordion items.
|
||||
|
||||
Dynamically disabling the accordion will collapse any expanded items.
|
||||
|
||||
<Accordion disabled>
|
||||
<AccordionItem title="Natural Language Classifier">
|
||||
<p>Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text.
|
||||
|
|
@ -135,6 +165,8 @@ This example demonstrates how a list of items can be programmatically expanded a
|
|||
|
||||
## Disabled (item)
|
||||
|
||||
To disable individual accordion items, set the `disabled` prop to `true` on the `AccordionItem`.
|
||||
|
||||
<Accordion>
|
||||
<AccordionItem disabled title="Natural Language Classifier">
|
||||
<p>Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text.
|
||||
|
|
@ -150,25 +182,34 @@ This example demonstrates how a list of items can be programmatically expanded a
|
|||
|
||||
## Skeleton
|
||||
|
||||
<Accordion skeleton />
|
||||
<AccordionSkeleton />
|
||||
|
||||
## Skeleton (left-aligned chevron)
|
||||
|
||||
<Accordion skeleton align="start" />
|
||||
<AccordionSkeleton align="start" />
|
||||
|
||||
## Skeleton (custom count)
|
||||
|
||||
<Accordion skeleton count={3} />
|
||||
By default, the skeleton accordion has 4 items. Specify a custom count using the `count` prop.
|
||||
|
||||
## Skeleton (closed)
|
||||
<AccordionSkeleton count={3} />
|
||||
|
||||
<Accordion skeleton open={false} />
|
||||
## Skeleton (open)
|
||||
|
||||
## Skeleton (extra-large)
|
||||
Set `open` to `true` to expand the first accordion item.
|
||||
|
||||
<Accordion skeleton size="xl" />
|
||||
<AccordionSkeleton open />
|
||||
|
||||
## Skeleton (flush text)
|
||||
|
||||
Set the `flush` prop to `true` to flush align accordion content text. Note that this prop cannot be used with `align="start"`.
|
||||
|
||||
<AccordionSkeleton open flush />
|
||||
|
||||
## Skeleton (large)
|
||||
|
||||
<AccordionSkeleton size="lg" />
|
||||
|
||||
## Skeleton (small)
|
||||
|
||||
<Accordion skeleton size="sm" />
|
||||
|
||||
<AccordionSkeleton size="sm" />
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue