@zendeskgarden/container-tabs
    TypeScript icon, indicating that this package has built-in type declarations

    0.5.12 • Public • Published

    @zendeskgarden/container-tabs npm version

    This package includes containers relating to tabs in the Garden Design System.

    Installation

    npm install @zendeskgarden/container-tabs

    Usage

    For live examples check out our storybook.

    useTabs

    import { useTabs } from '@zendeskgarden/container-tabs';
    
    const tabs = ['Tab 1', 'Tab 2', 'Tab 3'];
    const tabRefs = tabs.map(() => createRef(null));
    
    const Tabs = () => {
      const { selectedItem, getTabProps, getTabListProps, getTabPanelProps } = useTabs();
      const tabComponents = [];
      const tabPanels = [];
    
      tabs.forEach((tab, index) => {
        tabComponents.push(
          <li
            {...getTabProps({
              item: tab,
              index,
              ref: tabRefs[index],
              key: tab,
              style: {
                borderBottom: `3px solid ${tab === selectedItem ? '#1f73b7' : 'transparent'}`
              }
            })}
          >
            {tab}
          </li>
        );
    
        tabPanels.push(
          <div
            {...getTabPanelProps({
              index,
              item: tab,
              key: tab,
              style: {
                padding: '10px 0',
                borderTop: '1px solid'
              }
            })}
          >
            {tab} Content
          </div>
        );
      });
    
      return (
        <>
          <ul
            {...getTabListProps({
              style: {
                display: 'flex'
              }
            })}
          >
            {tabComponents}
          </ul>
          {tabPanels}
        </>
      );
    };

    TabsContainer

    import { TabsContainer } from '@zendeskgarden/container-tabs';
    
    const Tabs = () => {
      const tabComponents = [];
      const tabPanels = [];
    
      return (
        <TabsContainer>
          {({ selectedItem, getTabProps, getTabListProps, getTabPanelProps }) => {
            tabs.forEach((tab, index) => {
              tabComponents.push(
                <li
                  {...getTabProps({
                    item: tab,
                    index,
                    ref: tabRefs[index],
                    key: tab,
                    style: {
                      borderBottom: `3px solid ${tab === selectedItem ? '#1f73b7' : 'transparent'}`
                    }
                  })}
                >
                  {tab}
                </li>
              );
    
              tabPanels.push(
                <div
                  {...getTabPanelProps({
                    index,
                    item: tab,
                    key: tab,
                    style: {
                      padding: '10px 0',
                      borderTop: '1px solid'
                    }
                  })}
                >
                  {tab} Content
                </div>
              );
            });
    
            return (
              <>
                <ul
                  {...getTabListProps({
                    style: {
                      display: 'flex'
                    }
                  })}
                >
                  {tabComponents}
                </ul>
                {tabPanels}
              </>
            );
          }}
          }
        </TabsContainer>
      );
    };

    Install

    npm i @zendeskgarden/container-tabs

    DownloadsWeekly Downloads

    5,038

    Version

    0.5.12

    License

    Apache-2.0

    Unpacked Size

    35.8 kB

    Total Files

    9

    Last publish

    Collaborators

    • zendesk-garden