mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-14 09:51:36 +00:00
docs(unordered-list): improve docs
This commit is contained in:
parent
6a3306a91f
commit
b2f7a2274b
1 changed files with 9 additions and 1 deletions
|
@ -7,6 +7,8 @@ components: ["UnorderedList", "ListItem"]
|
|||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
`UnorderedList` provides a styled unordered list component that supports nested lists, links, and expressive typography. It's ideal for displaying bulleted content in your interface.
|
||||
|
||||
<InlineNotification svx-ignore lowContrast title="Tip:" kind="info" hideCloseButton>
|
||||
<div class="body-short-01">
|
||||
Consider using the <Link href="/components/RecursiveList#unordered">RecursiveList</Link> component for rendering tree structured data.
|
||||
|
@ -15,6 +17,8 @@ components: ["UnorderedList", "ListItem"]
|
|||
|
||||
## Default
|
||||
|
||||
Create a basic unordered list with `ListItem` components.
|
||||
|
||||
<UnorderedList>
|
||||
<ListItem>Unordered list item</ListItem>
|
||||
<ListItem>Unordered list item</ListItem>
|
||||
|
@ -23,6 +27,8 @@ components: ["UnorderedList", "ListItem"]
|
|||
|
||||
## With links
|
||||
|
||||
Add links to list items by wrapping them in `Link` components.
|
||||
|
||||
<UnorderedList>
|
||||
<ListItem>
|
||||
<Link href="#">Unordered list item</Link>
|
||||
|
@ -37,6 +43,8 @@ components: ["UnorderedList", "ListItem"]
|
|||
|
||||
## Nested
|
||||
|
||||
Create nested lists by setting `nested` to `true` on child `UnorderedList` components.
|
||||
|
||||
<UnorderedList>
|
||||
<ListItem>
|
||||
Unordered list level 1
|
||||
|
@ -57,7 +65,7 @@ components: ["UnorderedList", "ListItem"]
|
|||
|
||||
## Expressive styles
|
||||
|
||||
Set `expressive` to `true` to use Carbon's expressive typesetting.
|
||||
Use Carbon's expressive typesetting by setting `expressive` to `true`.
|
||||
|
||||
<UnorderedList expressive>
|
||||
<ListItem><Link size="lg" href="#">Unordered list item</Link></ListItem>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue