# Component/LineTabs

> Props: component-linetabs.props.txt

## Examples


### Base

```tsx
{
  render: args => {
    const [activeTab, setActiveTab] = useState<string>('tab-1');
    const handleChange = (activeTab: string) => {
      setActiveTab(activeTab);
    };
    return <LineTabs {...args} activeTabId={activeTab} onChange={handleChange}>
        <LineTab id='tab-1'>Label</LineTab>
        <LineTab id='tab-2'>Label</LineTab>
        <LineTab id='tab-3'>Label</LineTab>
        <LineTab id='tab-4'>Label</LineTab>
      </LineTabs>;
  }
}
```

### Dense

```tsx
{
  render: args => {
    const [activeTab, setActiveTab] = useState<string>('tab-1');
    const handleChange = (activeTab: string) => {
      setActiveTab(activeTab);
    };
    return <LineTabs {...args} activeTabId={activeTab} onChange={handleChange}>
        <LineTab id='tab-1'>Label</LineTab>
        <LineTab id='tab-2'>Label</LineTab>
        <LineTab id='tab-3'>Label</LineTab>
        <LineTab id='tab-4'>Label</LineTab>
      </LineTabs>;
  },
  args: {
    dense: true
  }
}
```

### Fill

```tsx
{
  render: args => {
    const [activeTab, setActiveTab] = useState<string>('tab-1');
    const handleChange = (activeTab: string) => {
      setActiveTab(activeTab);
    };
    return <LineTabs {...args} activeTabId={activeTab} onChange={handleChange}>
        <LineTab id='tab-1'>Label</LineTab>
        <LineTab id='tab-2'>Label</LineTab>
        <LineTab id='tab-3'>Label</LineTab>
        <LineTab id='tab-4'>Label</LineTab>
      </LineTabs>;
  },
  args: {
    width: 'fill'
  }
}
```

### Large Size

```tsx
{
  render: args => {
    const [activeTab, setActiveTab] = useState('tab-1');
    const handleChange = (activeTab: string) => {
      setActiveTab(activeTab);
    };
    return <LineTabs {...args} activeTabId={activeTab} onChange={handleChange}>
        <LineTab id='tab-1' size='large'>
          Label
        </LineTab>
        <LineTab id='tab-2' size='large'>
          Label
        </LineTab>
        <LineTab id='tab-3' size='large'>
          Label
        </LineTab>
        <LineTab id='tab-4' size='large'>
          Label
        </LineTab>
      </LineTabs>;
  }
}
```

### Max Width

컨테이너 폭이 1080px을 넘으면 탭 영역이 1024px로 고정되고 가운데 정렬됩니다.

```tsx
{
  render: args => {
    const [activeTab, setActiveTab] = useState<string>('tab-1');
    const handleChange = (activeTab: string) => {
      setActiveTab(activeTab);
    };
    return <LineTabs {...args} activeTabId={activeTab} onChange={handleChange}>
        <LineTab id='tab-1'>Label</LineTab>
        <LineTab id='tab-2'>Label</LineTab>
        <LineTab id='tab-3'>Label</LineTab>
        <LineTab id='tab-4'>Label</LineTab>
      </LineTabs>;
  },
  args: {
    hasMaxWidth: true
  },
  parameters: {
    docs: {
      description: {
        story: '컨테이너 폭이 1080px을 넘으면 탭 영역이 1024px로 고정되고 가운데 정렬됩니다.'
      }
    }
  }
}
```

### No Side Padding

```tsx
{
  render: args => {
    const [activeTab, setActiveTab] = useState<string>('tab-1');
    const handleChange = (activeTab: string) => {
      setActiveTab(activeTab);
    };
    return <LineTabs {...args} activeTabId={activeTab} onChange={handleChange}>
        <LineTab id='tab-1'>Label</LineTab>
        <LineTab id='tab-2'>Label</LineTab>
        <LineTab id='tab-3'>Label</LineTab>
        <LineTab id='tab-4'>Label</LineTab>
      </LineTabs>;
  },
  args: {
    width: 'fill',
    paddingHorizontal: false
  }
}
```

### No Top Padding

```tsx
{
  render: args => {
    const [activeTab, setActiveTab] = useState<string>('tab-1');
    const handleChange = (activeTab: string) => {
      setActiveTab(activeTab);
    };
    return <LineTabs {...args} activeTabId={activeTab} onChange={handleChange}>
        <LineTab id='tab-1'>Label</LineTab>
        <LineTab id='tab-2'>Label</LineTab>
        <LineTab id='tab-3'>Label</LineTab>
        <LineTab id='tab-4'>Label</LineTab>
      </LineTabs>;
  },
  args: {
    paddingTop: false
  }
}
```

### Scroll

```tsx
{
  render: (args) => {
    const [activeTab, setActiveTab] = useState('tab-1');

    const handleChange = (activeTab: string) => {
      setActiveTab(activeTab);
    };

    return (
      <div style={{ padding: '20px', backgroundColor: colors.gray50, width: 600 }}>
        <LineTabs {...args} activeTabId={activeTab} onChange={handleChange}>
          {Array.from({ length: 50 }, (_, i) => {
            return (
              <LineTab id={`tab-${i + 1}`} key={i}>
                {`Label-${i}`}
              </LineTab>
            );
          })}
        </LineTabs>
      </div>
    );
  },
  args: {}
}
```

### With Badge

```tsx
{
  render: args => {
    const [activeTab, setActiveTab] = useState('tab-1');
    const handleChange = (activeTab: string) => {
      setActiveTab(activeTab);
    };
    const tabItems = [{
      id: 'tab-1',
      label: 'Label',
      hasNewBadge: true,
      hasNotification: true,
      popover: {
        title: 'Title',
        description: 'Description'
      },
      hasBetaBadge: true,
      count: 0
    }, {
      id: 'tab-2',
      label: 'Label',
      hasNewBadge: true
    }, {
      id: 'tab-3',
      label: 'Label',
      hasNotification: true
    }, {
      id: 'tab-4',
      label: 'Label',
      popover: {
        title: 'Title',
        description: 'Description'
      }
    }, {
      id: 'tab-4',
      label: 'Label',
      popover: {
        title: 'Title',
        description: 'Description'
      },
      count: 1000000
    }];
    return <LineTabs {...args} activeTabId={activeTab} onChange={handleChange}>
        {tabItems.map(({
        id,
        label,
        ...props
      }) => {
        return <LineTab id={id} key={id} {...props}>
              {label}
            </LineTab>;
      })}
      </LineTabs>;
  },
  args: {
    dense: true,
    width: 'fill'
  }
}
```