Chakra UI 简介 #

import { Box, Button, Text, Flex } from '@chakra-ui/react'

function App() {
  return (
    <Flex direction="column" align="center" p={4}>
      <Text fontSize="2xl" fontWeight="bold">
        Welcome to Chakra UI
      </Text>
      <Button colorScheme="blue" mt={4}>
        Get Started
      </Button>
    </Flex>
  )
}

<Button 
  aria-label="Add item to cart"
  leftIcon={<AddIcon />}
>
  Add to Cart
</Button>

import { extendTheme, ChakraProvider } from '@chakra-ui/react'

const theme = extendTheme({
  colors: {
    brand: {
      100: '#f7fafc',
      900: '#1a365d',
    },
  },
})

function App() {
  return (
    <ChakraProvider theme={theme}>
      <App />
    </ChakraProvider>
  )
}

<Box 
  width={['100%', '50%', '25%']}
  fontSize={{ base: 'md', md: 'lg', lg: 'xl' }}
>
  Responsive Box
</Box>

2019年 ─── Chakra UI 诞生
    │
    │      Segun Adebayo 创建
    │      专注于无障碍和开发者体验
    │
2020年 ─── Chakra UI 1.0 发布
    │
    │      稳定版本发布
    │      社区快速增长
    │
2021年 ─── Chakra UI 2.0 发布
    │
    │      性能优化
    │      新增组件
    │      更好的 TypeScript 支持
    │
至今   ─── 持续更新迭代
    │
    │      活跃的社区
    │      丰富的生态系统

┌─────────────────────────────────────┐
│           Chakra UI 组件             │
├─────────────────────────────────────┤
│  ✓ 键盘导航支持                       │
│  ✓ 屏幕阅读器友好                     │
│  ✓ 正确的 ARIA 属性                   │
│  ✓ 焦点管理                          │
│  ✓ 颜色对比度合规                     │
└─────────────────────────────────────┘

<Box 
  p={4} 
  bg="blue.500" 
  color="white" 
  borderRadius="md"
>
  <Text fontSize="xl">组合式设计</Text>
</Box>

<Button colorScheme="blue">Primary</Button>
<Button colorScheme="red">Danger</Button>
<Button colorScheme="green">Success</Button>
<Button colorScheme="gray">Neutral</Button>

<Grid 
  templateColumns={{
    base: '1fr',
    md: 'repeat(2, 1fr)',
    lg: 'repeat(3, 1fr)'
  }}
  gap={6}
>
  <GridItem>Item 1</GridItem>
  <GridItem>Item 2</GridItem>
  <GridItem>Item 3</GridItem>
</Grid>

Chakra UI 架构
├── @chakra-ui/react       核心组件库
├── @chakra-ui/theme       默认主题
├── @chakra-ui/icons       图标库
├── @emotion/react         CSS-in-JS 引擎
├── @emotion/styled        样式化组件
└── framer-motion          动画库

import { Box, Button, Input, VStack } from '@chakra-ui/react'

function LoginForm() {
  return (
    <VStack spacing={4} p={8} bg="white" borderRadius="lg" shadow="md">
      <Input placeholder="Email" />
      <Input placeholder="Password" type="password" />
      <Button colorScheme="blue" width="full">Login</Button>
    </VStack>
  )
}

import { 
  Box, Flex, Text, IconButton, 
  Menu, MenuButton, MenuList, MenuItem 
} from '@chakra-ui/react'

function Dashboard() {
  return (
    <Flex>
      <Box as="nav" bg="gray.800" color="white" p={4}>
        <Text fontSize="xl" fontWeight="bold">Dashboard</Text>
      </Box>
    </Flex>
  )
}

const theme = extendTheme({
  components: {
    Button: {
      variants: {
        custom: {
          bg: 'brand.500',
          color: 'white',
          _hover: { bg: 'brand.600' }
        }
      }
    }
  }
})