mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-14 18:01:06 +00:00
228 lines
9.9 KiB
Text
228 lines
9.9 KiB
Text
---
|
|
components: ["Accordion", "AccordionItem", "AccordionSkeleton"]
|
|
---
|
|
|
|
<script>
|
|
import {
|
|
Accordion,
|
|
AccordionItem,
|
|
} from "carbon-components-svelte";
|
|
import Preview from "../../components/Preview.svelte";
|
|
</script>
|
|
|
|
`Accordion` creates a vertically stacked list of expandable sections that show or hide content. It supports custom titles, different sizes, and various states including disabled and skeleton loading.
|
|
|
|
## Default
|
|
|
|
Use the `Accordion` and `AccordionItem` components to compose a collapsible list of
|
|
items.
|
|
|
|
By default, the chevron icon is on the right side of the accordion item.
|
|
|
|
<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>
|
|
|
|
## Left-aligned chevron
|
|
|
|
The chevron icon can be aligned to the left side of the accordion item by setting
|
|
the `align` prop to "start". This provides an alternative visual style while
|
|
maintaining the same functionality.
|
|
|
|
<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
|
|
|
|
Customize the title content by using the `title` slot instead of the `title` prop.
|
|
This allows for more complex title layouts with multiple elements.
|
|
|
|
<Accordion>
|
|
<AccordionItem>
|
|
<svelte:fragment slot="title">
|
|
<h5>Natural Language Classifier</h5>
|
|
<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">
|
|
<h5>Natural Language Understanding</h5>
|
|
<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>
|
|
<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
|
|
|
|
Set the `open` prop on an `AccordionItem` to have it expanded by default when the
|
|
accordion is first rendered.
|
|
|
|
<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 to programmatically control the accordion items using
|
|
the `bind:open` directive. Expand and collapse items based on user
|
|
interactions or application state.
|
|
|
|
<FileSource src="/framed/Accordion/ExpandableAccordion" />
|
|
|
|
## Extra-large size
|
|
|
|
The accordion can be displayed in an extra-large size by setting the `size` prop to
|
|
"xl". This provides more visual emphasis and is suitable for prominent content
|
|
sections.
|
|
|
|
<Accordion size="xl">
|
|
<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
|
|
|
|
For more compact layouts, set the `size` prop to "sm" to display the accordion in a
|
|
smaller size. This is useful when space is limited or when the accordion is used as
|
|
a secondary UI element.
|
|
|
|
<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 on the `Accordion` component to disable all items at once.
|
|
This prevents users from expanding or collapsing any items in the accordion.
|
|
|
|
<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)
|
|
|
|
Individual accordion items can be disabled by setting the `disabled` prop on
|
|
specific `AccordionItem` components. This allows for more granular control over
|
|
which items are interactive.
|
|
|
|
<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
|
|
|
|
The skeleton state provides a loading placeholder for the accordion. It displays a
|
|
simplified version of the component while content is being loaded.
|
|
|
|
<Accordion skeleton />
|
|
|
|
## Skeleton (left-aligned chevron)
|
|
|
|
The skeleton state can be combined with the left-aligned chevron style by setting
|
|
both the `skeleton` and `align="start"` props.
|
|
|
|
<Accordion skeleton align="start" />
|
|
|
|
## Skeleton (custom count)
|
|
|
|
By default, the skeleton state displays 4 items.
|
|
|
|
Specify the number of skeleton items to display using the `count` prop. This is
|
|
useful when you know the exact number of items that will be loaded.
|
|
|
|
<Accordion skeleton count={3} />
|
|
|
|
## Skeleton (closed)
|
|
|
|
By default, the first skeleton item is open. The skeleton state can be displayed
|
|
in a collapsed state by setting `open={false}`.
|
|
|
|
<Accordion skeleton open={false} />
|
|
|
|
## Skeleton (extra-large)
|
|
|
|
The skeleton state supports the extra-large size variant, maintaining visual
|
|
consistency with the active component states.
|
|
|
|
<Accordion skeleton size="xl" />
|
|
|
|
## Skeleton (small)
|
|
|
|
The skeleton state also supports the small size variant, providing a compact
|
|
loading placeholder for space-constrained layouts.
|
|
|
|
<Accordion skeleton size="sm" />
|
|
|