mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-16 02:41:05 +00:00
5fad0cb3c7* chore(deps-dev): upgrade carbon-components to v10.31.0 * fix(slider): use CSS to hide input if hideTextInput is true * docs(slider): add hidden text input, invalid, disabled examples * feat(tabs): support "container" type for TabsSkeleton * chore(list-box): remove hotfix inline style to center dropdown chevron * fix(number-input): use add, subtract icons and update markup * feat(select): add warning state * docs(select): add invalid state example * docs(select): add helper text example * fix(structured-list): add "rowgroup" role to StructuredListBody * docs: release code snippet max-width * docs(select): add skeleton hidden label example * feat(popover): add Popover component * feat(pagination): dispatch button click events to be consistent with PaginationNav * fix(multi-select): type clear as a custom event * docs(radio-button): add disabled buttons example * chore(tabs): use absolute icon import * fix(link): remove line breaks within anchor link * docs(radio-button): adjust section copy verbiage * chore(deps-dev): upgrade carbon-icons-svelte to v10.27 v10.27 uses the SvelteComponentTyped interface * docs(accordion): adjust section title verbiage * test(types): fix warnings from svelte-check * fix(search): only set autofocus attribute if equals true * feat(popover): add closeOnOutsideClick prop * docs: style [data-outline] as relative positioned * feat(context-menu): add initial ContextMenu * feat(context-menu): annotate props, generate types * feat(context-menu): add initial focus logic * fix(context-menu): correctly tab in/out of nested menus * chore(context-menu): update types * fix(context-menu): obtain radio id from node directly * docs(context-menu): add examples and test * fix(context-menu): prevent default keydown behavior
170 lines
7.3 KiB
Text
170 lines
7.3 KiB
Text
---
|
|
components: ["Accordion", "AccordionItem", "AccordionSkeleton"]
|
|
---
|
|
|
|
<script>
|
|
import {
|
|
Accordion,
|
|
AccordionItem,
|
|
} from "carbon-components-svelte";
|
|
import Preview from "../../components/Preview.svelte";
|
|
</script>
|
|
|
|
See the [ExpandableAccordion recipe](/recipes/ExpandableAccordion) for a toggleable accordion component.
|
|
|
|
### Default
|
|
|
|
<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
|
|
|
|
<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>
|
|
<AccordionItem>
|
|
<div slot="title">
|
|
<h5>Natural Language Classifier</h5>
|
|
<div>AI / Machine Learning</div>
|
|
</div>
|
|
<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>
|
|
<div slot="title">
|
|
<h5>Natural Language Understanding</h5>
|
|
<div>AI / Machine Learning</div>
|
|
</div>
|
|
<p>Analyze text to extract meta-data from content such as concepts, entities, emotion, relations, sentiment and more.</p>
|
|
</AccordionItem>
|
|
<AccordionItem>
|
|
<div slot="title">
|
|
<h5>Language Translator</h5>
|
|
<div>AI / Machine Learning</div>
|
|
</div>
|
|
<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>
|
|
|
|
### Extra-large size
|
|
|
|
<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
|
|
|
|
<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
|
|
|
|
<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)
|
|
|
|
<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
|
|
|
|
<Accordion skeleton />
|
|
|
|
### Skeleton (left-aligned chevron)
|
|
|
|
<Accordion skeleton align="start" />
|
|
|
|
### Skeleton (custom count)
|
|
|
|
<Accordion skeleton count={3} />
|
|
|
|
### Skeleton (closed)
|
|
|
|
<Accordion skeleton open={false} />
|
|
|
|
### Skeleton (extra-large)
|
|
|
|
<Accordion skeleton size="xl" />
|
|
|
|
### Skeleton (small)
|
|
|
|
<Accordion skeleton size="sm" />
|
|
|