StructuredList
A component used to display collections of data in a consistent manner.
Theming
The StructuredList
component is a multipart component. The styling needs to be
applied to each part specifically.
To learn more about styling multipart components, visit the Chakra UI Component Style page.
Anatomy
list
item
button
header
cell
icon
Default theme
import { createMultiStyleConfigHelpers } from '@chakra-ui/styled-system'import { structuredListAnatomy } from '@saas-ui/theme/anatomy'const { definePartsStyle, defineMultiStyleConfig } =createMultiStyleConfigHelpers(structuredListAnatomy.keys)const baseStyle = definePartsStyle((props) => {return {item: {py: 2,px: 4,},button: {transitionProperty: 'common',transitionDuration: 'normal',borderRadius: 'inherit',outline: 'none',_hover: {bg: 'blackAlpha.50',_dark: {bg: 'whiteAlpha.50',},},_focusVisible: {boxShadow: 'outline',},_focus: {bg: 'blackAlpha.50',_dark: {bg: 'whiteAlpha.50',},},_active: {bg: 'blackAlpha.100',_dark: {bg: 'whiteAlpha.100',},},},}})export const structuredListTheme = defineMultiStyleConfig({defaultProps: {size: 'md',},baseStyle,sizes: {sm: {item: {py: 1,px: 1,},button: {py: 1,px: 1,},cell: {px: 1,},icon: {px: 1,},},md: {item: {py: 2,px: 2,},button: { py: 2, px: 2 },cell: {px: 2,},icon: {px: 2,},},},})
Customize the theme
The StructuredList
component uses the SuiStructuredList
key within the theme
object.
import { extendTheme } from '@chakra-ui/react'const theme = extendTheme({components: {SuiStructuredList: {baseStyle: {item: {py: 4,px: 8,},button: {borderRadius: 'full',_hover: {bg: 'teal.500',color: 'white',},_focus: {bg: 'teal.500',color: 'white',},_active: {bg: 'teal.600',color: 'white',},},},sizes: {sm: {item: {py: 2,px: 4,},button: {py: 2,px: 4,},},md: {item: {py: 4,px: 8,},button: {py: 4,px: 8,},},},},},})
Was this helpful?