diff --git a/docs/src/pages/components/StructuredList.svx b/docs/src/pages/components/StructuredList.svx index ad6ec3da..e0824c7a 100644 --- a/docs/src/pages/components/StructuredList.svx +++ b/docs/src/pages/components/StructuredList.svx @@ -3,13 +3,17 @@ components: ["StructuredList", "StructuredListSkeleton", "StructuredListBody", " --- +`StructuredList` provides a semantic way to display tabular data with support for selection, keyboard navigation, and various layout options. + ## Default (read-only) +Create a basic structured list with headers and rows. + @@ -20,40 +24,27 @@ components: ["StructuredList", "StructuredListSkeleton", "StructuredListBody", " - Row 1 Row 1 - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui - magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere - sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque - vulputate nisl a porttitor interdum. - + Row 1 + Row 1 - Row 2 Row 2 - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui - magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere - sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque - vulputate nisl a porttitor interdum. - + Row 2 + Row 2 - Row 3 Row 3 - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui - magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere - sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque - vulputate nisl a porttitor interdum. - + Row 3 + Row 3 ## Condensed variant +Use the condensed variant for more compact rows. + @@ -64,39 +55,26 @@ components: ["StructuredList", "StructuredListSkeleton", "StructuredListBody", " - Row 1 Row 1 - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui - magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere - sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque - vulputate nisl a porttitor interdum. - + Row 1 + Row 1 - Row 2 Row 2 - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui - magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere - sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque - vulputate nisl a porttitor interdum. - + Row 2 + Row 2 - Row 3 Row 3 - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui - magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere - sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque - vulputate nisl a porttitor interdum. - + Row 3 + Row 3 -## Flush +## Flush variant + +Use the flush variant to remove padding from the list. @@ -142,6 +120,8 @@ components: ["StructuredList", "StructuredListSkeleton", "StructuredListBody", " ## Selectable rows +Enable row selection with the `selection` prop and `StructuredListInput` components. + @@ -182,4 +162,6 @@ components: ["StructuredList", "StructuredListSkeleton", "StructuredListBody", " ## Skeleton +Show a loading state with the skeleton variant. + \ No newline at end of file