List 列表组件 #

import { List, ListItem, ListIcon } from '@chakra-ui/react'
import { CheckCircleIcon } from '@chakra-ui/icons'

function Example() {
  return (
    <List spacing={3}>
      <ListItem>
        <ListIcon as={CheckCircleIcon} color="green.500" />
        列表项 1
      </ListItem>
      <ListItem>
        <ListIcon as={CheckCircleIcon} color="green.500" />
        列表项 2
      </ListItem>
      <ListItem>
        <ListIcon as={CheckCircleIcon} color="green.500" />
        列表项 3
      </ListItem>
    </List>
  )
}

<List styleType="disc">
  <ListItem>项目 1</ListItem>
  <ListItem>项目 2</ListItem>
  <ListItem>项目 3</ListItem>
</List>

<List as="ol" styleType="decimal">
  <ListItem>第一项</ListItem>
  <ListItem>第二项</ListItem>
  <ListItem>第三项</ListItem>
</List>

<List styleType="none">
  <ListItem>项目 1</ListItem>
  <ListItem>项目 2</ListItem>
</List>

import { 
  CheckCircleIcon, 
  WarningIcon, 
  InfoIcon,
  StarIcon 
} from '@chakra-ui/icons'

<List spacing={3}>
  <ListItem>
    <ListIcon as={CheckCircleIcon} color="green.500" />
    成功项
  </ListItem>
  <ListItem>
    <ListIcon as={WarningIcon} color="orange.500" />
    警告项
  </ListItem>
  <ListItem>
    <ListIcon as={InfoIcon} color="blue.500" />
    信息项
  </ListItem>
  <ListItem>
    <ListIcon as={StarIcon} color="yellow.500" />
    收藏项
  </ListItem>
</List>

<List stylePosition="inside">
  <ListItem>内部标记</ListItem>
</List>

<List stylePosition="outside">
  <ListItem>外部标记</ListItem>
</List>

<List spacing={3}>
  <ListItem>
    <ListIcon as={CheckCircleIcon} color="green.500" />
    主项目 1
    <List mt={2} ml={8} spacing={2}>
      <ListItem>子项目 1.1</ListItem>
      <ListItem>子项目 1.2</ListItem>
    </List>
  </ListItem>
  <ListItem>
    <ListIcon as={CheckCircleIcon} color="green.500" />
    主项目 2
  </ListItem>
</List>

function FeatureList({ features }) {
  return (
    <List spacing={4}>
      {features.map((feature, index) => (
        <ListItem key={index}>
          <HStack align="start">
            <ListIcon as={CheckCircleIcon} color="green.500" mt={1} />
            <Box>
              <Text fontWeight="medium">{feature.title}</Text>
              <Text color="gray.500" fontSize="sm">{feature.description}</Text>
            </Box>
          </HStack>
        </ListItem>
      ))}
    </List>
  )
}

function SettingsList() {
  return (
    <List spacing={4}>
      <ListItem>
        <Flex justify="space-between" align="center">
          <HStack>
            <ListIcon as={BellIcon} color="blue.500" />
            <Text>通知</Text>
          </HStack>
          <Switch />
        </Flex>
      </ListItem>
      <ListItem>
        <Flex justify="space-between" align="center">
          <HStack>
            <ListIcon as={LockIcon} color="green.500" />
            <Text>隐私</Text>
          </HStack>
          <IconButton icon={<ChevronRightIcon />} variant="ghost" />
        </Flex>
      </ListItem>
    </List>
  )
}

function FileList({ files }) {
  return (
    <List spacing={2}>
      {files.map((file) => (
        <ListItem key={file.id}>
          <Flex
            p={3}
            borderWidth="1px"
            borderRadius="md"
            align="center"
            justify="space-between"
          >
            <HStack>
              <ListIcon as={file.type === 'folder' ? FolderIcon : FileIcon} />
              <Text>{file.name}</Text>
            </HStack>
            <Text color="gray.500" fontSize="sm">{file.size}</Text>
          </Flex>
        </ListItem>
      ))}
    </List>
  )
}