Switch 开关组件 #

import { Switch } from '@chakra-ui/react'

function Example() {
  return <Switch />
}

<FormControl display="flex" alignItems="center">
  <FormLabel mb="0">启用通知</FormLabel>
  <Switch />
</FormControl>

<Switch defaultIsChecked />

<Switch isDisabled />
<Switch isDisabled defaultIsChecked />

<Switch isInvalid />

<Switch isReadOnly />

<Switch size="sm" /> 小
<Switch size="md" /> 中等（默认）
<Switch size="lg" /> 大

<Switch colorScheme="red" />
<Switch colorScheme="green" />
<Switch colorScheme="blue" />
<Switch colorScheme="orange" />
<Switch colorScheme="purple" />

function ControlledSwitch() {
  const [isChecked, setIsChecked] = useState(false)

  return (
    <Switch
      isChecked={isChecked}
      onChange={(e) => setIsChecked(e.target.checked)}
    />
  )
}

import { FormControl, FormLabel, FormHelperText } from '@chakra-ui/react'

function FormSwitch() {
  return (
    <FormControl>
      <FormLabel>深色模式</FormLabel>
      <Switch />
      <FormHelperText>启用深色模式以保护眼睛</FormHelperText>
    </FormControl>
  )
}

function SettingsList() {
  const [settings, setSettings] = useState({
    notifications: true,
    sounds: false,
    vibrations: true,
  })

  const toggleSetting = (key) => {
    setSettings({
      ...settings,
      [key]: !settings[key],
    })
  }

  return (
    <VStack align="stretch" spacing={4}>
      <FormControl display="flex" alignItems="center" justifyContent="space-between">
        <Box>
          <Text fontWeight="medium">通知</Text>
          <Text fontSize="sm" color="gray.500">接收推送通知</Text>
        </Box>
        <Switch
          isChecked={settings.notifications}
          onChange={() => toggleSetting('notifications')}
        />
      </FormControl>
      
      <FormControl display="flex" alignItems="center" justifyContent="space-between">
        <Box>
          <Text fontWeight="medium">声音</Text>
          <Text fontSize="sm" color="gray.500">播放提示音</Text>
        </Box>
        <Switch
          isChecked={settings.sounds}
          onChange={() => toggleSetting('sounds')}
        />
      </FormControl>
      
      <FormControl display="flex" alignItems="center" justifyContent="space-between">
        <Box>
          <Text fontWeight="medium">振动</Text>
          <Text fontSize="sm" color="gray.500">振动反馈</Text>
        </Box>
        <Switch
          isChecked={settings.vibrations}
          onChange={() => toggleSetting('vibrations')}
        />
      </FormControl>
    </VStack>
  )
}

import { useColorMode } from '@chakra-ui/react'

function ColorModeSwitch() {
  const { colorMode, toggleColorMode } = useColorMode()

  return (
    <FormControl display="flex" alignItems="center">
      <FormLabel mb="0">
        {colorMode === 'light' ? '浅色模式' : '深色模式'}
      </FormLabel>
      <Switch
        isChecked={colorMode === 'dark'}
        onChange={toggleColorMode}
        colorScheme="blue"
      />
    </FormControl>
  )
}

function ConfirmSwitch({ onConfirm }) {
  const [isChecked, setIsChecked] = useState(false)

  const handleChange = (e) => {
    if (e.target.checked) {
      setIsChecked(true)
      onConfirm?.(true)
    }
  }

  return (
    <FormControl>
      <HStack>
        <Switch
          isChecked={isChecked}
          onChange={handleChange}
          colorScheme="green"
        />
        <Text>我确认以上信息准确无误</Text>
      </HStack>
    </FormControl>
  )
}

function FeatureToggle({ title, description, isEnabled, onToggle }) {
  return (
    <Box p={4} borderWidth="1px" borderRadius="md">
      <HStack justify="space-between">
        <Box>
          <Text fontWeight="medium">{title}</Text>
          <Text fontSize="sm" color="gray.500">{description}</Text>
        </Box>
        <Switch
          isChecked={isEnabled}
          onChange={onToggle}
          colorScheme="blue"
        />
      </HStack>
    </Box>
  )
}

function BatchSwitch() {
  const [features, setFeatures] = useState({
    analytics: true,
    tracking: false,
    marketing: true,
  })

  const allEnabled = Object.values(features).every(Boolean)
  const someEnabled = Object.values(features).some(Boolean) && !allEnabled

  const toggleAll = () => {
    const newState = !allEnabled
    setFeatures({
      analytics: newState,
      tracking: newState,
      marketing: newState,
    })
  }

  return (
    <VStack align="stretch" spacing={4}>
      <FormControl display="flex" alignItems="center" justifyContent="space-between">
        <Text fontWeight="bold">全部功能</Text>
        <Switch
          isChecked={allEnabled}
          isIndeterminate={someEnabled}
          onChange={toggleAll}
        />
      </FormControl>
      
      <Divider />
      
      {Object.entries(features).map(([key, value]) => (
        <FormControl key={key} display="flex" alignItems="center" justifyContent="space-between">
          <Text textTransform="capitalize">{key}</Text>
          <Switch
            isChecked={value}
            onChange={() => setFeatures({ ...features, [key]: !value })}
          />
        </FormControl>
      ))}
    </VStack>
  )
}