# Component/PanelTabs/PanelTab

> Props: component-paneltabs-paneltab.props.txt

## Examples


### Abbreviation

```tsx
{
  args: {
    title: '제목',
    number: 123456789,
    suffix: '건',
    highlight: false,
    caption: '',
    locale: 'ko-KR'
  },
  render: props => {
    const [activeTab, setActiveTab] = useState<string>('paneltab2-1');
    const handleChange = (activeTab: string) => {
      setActiveTab(activeTab);
    };
    return <Stack direction='column' gap={20}>
        <PanelTabs activeTabId='paneltab-eg' onChange={handleChange}>
          <PanelTab {...props} id='paneltab-eg' />
        </PanelTabs>
        <PanelTabs activeTabId={activeTab} onChange={handleChange}>
          {tabs.map(({
          title,
          number
        }, index) => <PanelTab key={`paneltab-${index + 1}`} id={`${index + 1}`} title={title} number={number} suffix={props.suffix || '건'} locale={props.locale} caption={`입력 ${number.toLocaleString()}`} />)}
        </PanelTabs>
        <PanelTabs activeTabId={activeTab} onChange={handleChange}>
          {tabs2.map(({
          title,
          number
        }, index) => <PanelTab key={`paneltab2-${index + 1}`} id={`${index + 1}`} title={title} number={number} suffix={props.suffix || '건'} locale={props.locale} caption={`입력 ${number.toLocaleString()}`} />)}
        </PanelTabs>
      </Stack>;
  }
}
```

### Base

```tsx
{
  args: {
    title: '주문확인',
    number: 10,
    suffix: '건',
    highlight: true,
    caption: '최근 3달 999건'
  },
  render: props => {
    const [activeTab, setActiveTab] = useState<string>('paneltab3-1');
    const handleChange = (activeTab: string) => {
      setActiveTab(activeTab);
    };
    return <PanelTabs activeTabId={activeTab} onChange={handleChange}>
        <PanelTab {...props} id='paneltab3-1' />
        <PanelTab {...props} id='paneltab3-1' disabled />
        <PanelTab {...props} id='paneltab3-2' />
        <PanelTab {...props} id='paneltab3-2' disabled />
      </PanelTabs>;
  }
}
```