mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-18 03:26:36 +00:00
217 lines
9.3 KiB
Text
217 lines
9.3 KiB
Text
---
|
|
components: ["Accordion", "AccordionItem", "AccordionSkeleton"]
|
|
---
|
|
|
|
<script>
|
|
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.
|
|
</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>
|
|
|
|
## 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.
|
|
</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>
|
|
|
|
## Custom title slot
|
|
|
|
<Accordion size="lg">
|
|
<AccordionItem>
|
|
<svelte:fragment slot="title">
|
|
<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.
|
|
</p>
|
|
</AccordionItem>
|
|
<AccordionItem>
|
|
<svelte:fragment slot="title">
|
|
<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">
|
|
<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>
|
|
</AccordionItem>
|
|
</Accordion>
|
|
|
|
## First item open
|
|
|
|
<Accordion>
|
|
<AccordionItem open 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>
|
|
|
|
## Programmatic example
|
|
|
|
This example demonstrates how all items can be programmatically expanded, collapsed, or disabled.
|
|
|
|
Disabled accordion items cannot be expanded.
|
|
|
|
<FileSource src="/framed/Accordion/ProgrammaticAccordion" />
|
|
|
|
## 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.
|
|
</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 (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.
|
|
</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>
|
|
|
|
## Skeleton
|
|
|
|
<AccordionSkeleton />
|
|
|
|
## Skeleton (left-aligned chevron)
|
|
|
|
<AccordionSkeleton align="start" />
|
|
|
|
## Skeleton (custom count)
|
|
|
|
By default, the skeleton accordion has 4 items. Specify a custom count using the `count` prop.
|
|
|
|
<AccordionSkeleton count={3} />
|
|
|
|
## Skeleton (open)
|
|
|
|
Set `open` to `true` to expand the first accordion item.
|
|
|
|
<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)
|
|
|
|
<AccordionSkeleton size="sm" />
|