mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-14 18:01:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

docs(ordered-list): improve docs

Browse source
This commit is contained in:
Eric Liu 2025-05-03 10:24:19 -07:00
commit 297cb64182
1 changed files with 11 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

14
docs/src/pages/components/OrderedList.svx
View file

@ -7,14 +7,18 @@ components: ["OrderedList", "ListItem"]
import Preview from "../../components/Preview.svelte";
</script>
`OrderedList` provides a structured way to display numbered lists of items. It supports nested lists, native browser styles, and expressive typography for enhanced visual hierarchy.
<InlineNotification svx-ignore lowContrast title="Tip:" kind="info" hideCloseButton>
<div class="body-short-01">
Consider using the <Link href="/components/RecursiveList#ordered">RecursiveList</Link> component for rendering tree structured data.
</div>
</div>
</InlineNotification>
## Default
Create a basic ordered list by wrapping `ListItem` components within `OrderedList`.
<OrderedList>
<ListItem>Ordered list item</ListItem>
<ListItem>Ordered list item</ListItem>
@ -23,6 +27,8 @@ components: ["OrderedList", "ListItem"]
## With links
Add interactive elements like `Link` components within list items.
<OrderedList>
<ListItem>
<Link href="#">Ordered list item</Link>
@ -37,6 +43,8 @@ components: ["OrderedList", "ListItem"]
## Nested
Set the `nested` prop to `true` to create hierarchical lists with proper indentation and numbering.
<OrderedList>
<ListItem>
Ordered list level 1
@ -57,7 +65,7 @@ components: ["OrderedList", "ListItem"]
## Native list styles
Use the `native` attribute to enable default browser list styles. This is useful for large lists (i.e., 1000 or more items) where the list number may overlap with the list item text.
Enable native browser list styles by setting the `native` prop to `true`. This is useful for large lists where the list number may overlap with the list item text.
<OrderedList native>
<ListItem>
@ -79,7 +87,7 @@ Use the `native` attribute to enable default browser list styles. This is useful
## Expressive styles
Set `expressive` to `true` to use Carbon's expressive typesetting.
Use Carbon's expressive typesetting by setting the `expressive` prop to `true`.
<OrderedList expressive>
<ListItem><Link size="lg" href="#">Ordered list item</Link></ListItem>