# Component/PanelTabs/PanelTabs

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

## Examples


### Base

```tsx
{
  render: args => {
    const [activeTab, setActiveTab] = useState('paneltab1-1');
    const handleChange = (activeTab?: string) => {
      setActiveTab(activeTab ?? '');
    };
    return <PanelTabs {...args} activeTabId={activeTab} onChange={handleChange}>
        {tabs[0].items.map(props => <PanelTab key={props.id} {...props} />)}
      </PanelTabs>;
  }
}
```

### Divider

```tsx
{
  render: args => {
    const [activeTab, setActiveTab] = useState('paneltab2-0-1');
    const handleChange = (activeTab?: string) => {
      setActiveTab(activeTab ?? '');
    };
    const tabs = [{
      title: '상품/배송준비 현황',
      important: false
    }, {
      title: '꼭 확인해주세요',
      important: true
    }];
    return <>
        <BaseText>Base</BaseText>
        <div style={{
        padding: '20px',
        border: '1px solid black',
        width: 600,
        marginBottom: 12
      }}>
          <PanelTabs {...args} activeTabId={activeTab} onChange={handleChange}>
            {Array.from({
            length: 50
          }, (_, i) => {
            const number = i + 1;
            return <PanelTab id={`paneltab2-0-${number}`} key={`paneltab2-0-${number}`} title='주문확인' number={number} suffix='건' caption='최근 3달 999건' />;
          })}
          </PanelTabs>
        </div>
        <BaseText>with PanelTabGroup</BaseText>
        <div style={{
        padding: '20px',
        border: '1px solid black',
        width: 600,
        marginBottom: 12
      }}>
          <PanelTabs {...args} activeTabId={activeTab} onChange={handleChange} divider>
            {tabs.map(({
            title,
            important
          }, j) => <PanelTabGroup key={title} title={title} important={important}>
                {Array.from({
              length: 3
            }, (_, i) => {
              const number = i + 1;
              return <PanelTab id={`paneltab2-${j}-${number}`} key={`paneltab2-${j}-${number}`} title='주문확인' number={number} suffix='건' caption='최근 3달 999건' />;
            })}
              </PanelTabGroup>)}
          </PanelTabs>
        </div>
      </>;
  },
  args: {
    divider: true
  }
}
```

### Scroll

```tsx
{
  render: args => {
    const [activeTab, setActiveTab] = useState('paneltab2-0-1');
    const handleChange = (activeTab?: string) => {
      setActiveTab(activeTab ?? '');
    };
    const tabs = [{
      title: '상품/배송준비 현황',
      important: false
    }, {
      title: '꼭 확인해주세요',
      important: true
    }];
    return <>
        <BaseText>Base</BaseText>
        <div style={{
        padding: '20px',
        border: '1px solid black',
        width: 600,
        marginBottom: 12
      }}>
          <PanelTabs {...args} activeTabId={activeTab} onChange={handleChange}>
            {Array.from({
            length: 50
          }, (_, i) => {
            const number = i + 1;
            return <PanelTab id={`paneltab2-0-${number}`} key={`paneltab2-0-${number}`} title='주문확인' number={number} suffix='건' caption='최근 3달 999건' />;
          })}
          </PanelTabs>
        </div>
        <BaseText>with PanelTabGroup</BaseText>
        <div style={{
        padding: '20px',
        border: '1px solid black',
        width: 600,
        marginBottom: 12
      }}>
          <PanelTabs {...args} activeTabId={activeTab} onChange={handleChange} divider>
            {tabs.map(({
            title,
            important
          }, j) => <PanelTabGroup key={title} title={title} important={important}>
                {Array.from({
              length: 3
            }, (_, i) => {
              const number = i + 1;
              return <PanelTab id={`paneltab2-${j}-${number}`} key={`paneltab2-${j}-${number}`} title='주문확인' number={number} suffix='건' caption='최근 3달 999건' />;
            })}
              </PanelTabGroup>)}
          </PanelTabs>
        </div>
      </>;
  }
}
```

### With Tab Group

```tsx
{
  args: {
    divider: true
  },
  render: args => {
    const [activeTab, setActiveTab] = useState('paneltab1-1');
    const handleChange = (activeTab?: string) => {
      setActiveTab(activeTab ?? '');
    };
    return <PanelTabs {...args} activeTabId={activeTab} onChange={handleChange}>
        {tabs.map(({
        title,
        important,
        items
      }) => <PanelTabGroup key={title} title={title} important={important}>
            {items.map(props => <PanelTab key={props.id} {...props} />)}
          </PanelTabGroup>)}
      </PanelTabs>;
  }
}
```