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(unordered-list): improve docs

Browse source
This commit is contained in:
Eric Liu 2025-05-03 11:12:07 -07:00
commit b2f7a2274b
1 changed files with 9 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

10
docs/src/pages/components/UnorderedList.svx
View file

@ -7,6 +7,8 @@ components: ["UnorderedList", "ListItem"]
import Preview from "../../components/Preview.svelte"; import Preview from "../../components/Preview.svelte";
</script> </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> <InlineNotification svx-ignore lowContrast title="Tip:" kind="info" hideCloseButton>
<div class="body-short-01"> <div class="body-short-01">
Consider using the <Link href="/components/RecursiveList#unordered">RecursiveList</Link> component for rendering tree structured data. Consider using the <Link href="/components/RecursiveList#unordered">RecursiveList</Link> component for rendering tree structured data.
@ -15,6 +17,8 @@ components: ["UnorderedList", "ListItem"]
## Default ## Default
Create a basic unordered list with `ListItem` components.
<UnorderedList> <UnorderedList>
<ListItem>Unordered list item</ListItem> <ListItem>Unordered list item</ListItem>
<ListItem>Unordered list item</ListItem> <ListItem>Unordered list item</ListItem>
@ -23,6 +27,8 @@ components: ["UnorderedList", "ListItem"]
## With links ## With links
Add links to list items by wrapping them in `Link` components.
<UnorderedList> <UnorderedList>
<ListItem> <ListItem>
<Link href="#">Unordered list item</Link> <Link href="#">Unordered list item</Link>
@ -37,6 +43,8 @@ components: ["UnorderedList", "ListItem"]
## Nested ## Nested
Create nested lists by setting `nested` to `true` on child `UnorderedList` components.
<UnorderedList> <UnorderedList>
<ListItem> <ListItem>
Unordered list level 1 Unordered list level 1
@ -57,7 +65,7 @@ components: ["UnorderedList", "ListItem"]
## Expressive styles ## Expressive styles
Set `expressive` to `true` to use Carbon's expressive typesetting. Use Carbon's expressive typesetting by setting `expressive` to `true`.
<UnorderedList expressive> <UnorderedList expressive>
<ListItem><Link size="lg" href="#">Unordered list item</Link></ListItem> <ListItem><Link size="lg" href="#">Unordered list item</Link></ListItem>