SegmentedControl

import { SegmentedControl } from '@tidbcloud/uikit'

import { SegmentedControl } from '@tidbcloud/uikit'
 
function Demo() {
  return <SegmentedControl data={['React', 'Angular', 'Vue']} />
}

import { useState } from 'react'
import { SegmentedControl } from '@tidbcloud/uikit'
 
function Demo() {
  const [value, setValue] = useState('react')
 
  return (
    <SegmentedControl
      value={value}
      onChange={setValue}
      data={[
        { label: 'React', value: 'react' },
        { label: 'Angular', value: 'ng' },
        { label: 'Vue', value: 'vue' },
        { label: 'Svelte', value: 'svelte' }
      ]}
    />
  )
}

import { SegmentedControl } from '@tidbcloud/uikit'
 
// Array of strings (value and label are the same)
function ArrayOfStrings() {
  return <SegmentedControl data={['React', 'Angular', 'Svelte', 'Vue']} />
}
 
// Array of objects (value and label are different)
function ArrayOfObjects() {
  return (
    <SegmentedControl
      data={[
        { value: 'react', label: 'React' },
        { value: 'ng', label: 'Angular' },
        { value: 'svelte', label: 'Svelte' },
        { value: 'vue', label: 'Vue' }
      ]}
    />
  )
}

import { SegmentedControl, Stack, Text } from '@tidbcloud/uikit'
 
function Demo() {
  return (
    <Stack>
      {/* Entire component disabled */}
      <div>
        <Text size="sm" fw={500} mb={3}>
          Disabled control
        </Text>
        <SegmentedControl disabled data={['Preview', 'Code', 'Export']} />
      </div>
 
      {/* Individual option disabled */}
      <div>
        <Text size="sm" fw={500} mb={3}>
          Disabled option
        </Text>
        <SegmentedControl
          data={[
            { value: 'preview', label: 'Preview', disabled: true },
            { value: 'code', label: 'Code' },
            { value: 'export', label: 'Export' }
          ]}
        />
      </div>
    </Stack>
  )
}

import { Center, SegmentedControl } from '@tidbcloud/uikit'
import { IconEye, IconCode, IconExternalLink } from '@tabler/icons-react'
 
function Demo() {
  return (
    <SegmentedControl
      data={[
        {
          value: 'preview',
          label: (
            <Center style={{ gap: 10 }}>
              <IconEye size={16} />
              <span>Preview</span>
            </Center>
          )
        },
        {
          value: 'code',
          label: (
            <Center style={{ gap: 10 }}>
              <IconCode size={16} />
              <span>Code</span>
            </Center>
          )
        },
        {
          value: 'export',
          label: (
            <Center style={{ gap: 10 }}>
              <IconExternalLink size={16} />
              <span>Export</span>
            </Center>
          )
        }
      ]}
    />
  )
}

import { SegmentedControl } from '@tidbcloud/uikit'
 
function Demo() {
  return <SegmentedControl color="blue" data={['React', 'Angular', 'Vue', 'Svelte']} />
}

import { SegmentedControl } from '@tidbcloud/uikit'
 
function Demo() {
  return <SegmentedControl readOnly defaultValue="Angular" data={['React', 'Angular', 'Vue']} />
}