tabs

import { Tabs } from "woly";

Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.

A Tabs appears at the top (rarely bottom) of an app screen and lets people quickly switch among different sections of an app. A tab bar may contain any number of tabs, but the number of visible tabs varies based on the device size and orientation. If some tabs can’t be displayed due to limited horizontal space, the final visible tab becomes a More tab, which reveals the additional tabs in a list on a separate screen.

In general, use a tab bar to organize information at the app level. A tab bar is a good way to flatten your information hierarchy and provide access to several peer information categories or modes at the same time. Aim for the right number of tabs. Too many tabs reduce the tappable area of each tab and increase the complexity of your app, which can make it harder for people to locate information. Too few tabs can be a problem too, as it can make your interface appear disconnected. Although a More tab can display extra tabs, it requires an additional tap to reveal them and can be a poor use of space. Include essential tabs only, and use the minimum number of tabs necessary for your information hierarchy. Don’t remove or disable a tab when its function is unavailable. If tabs are available in some cases but not in others, your app’s interface becomes unstable and unpredictable. Ensure that all tabs are always enabled, and explain why a tab’s content is unavailable.

Example

John Doeh
Alex Miller
Ann Adams
<Playground>
  <block.L style={{ width: '1200px' }}>
    <Tabs priority="default">
      {links.map(({ active, id, content, iconLeft }) => (
        <Tab
          active={active}
          key={id}
          path={`#${id}`}
          iconAction={
            <ButtonIcon
              icon={<IconClose />}
              onClick={() => {
                console.log('click icon');
              }}
              priority="default"
              weight="transparent"
            />
          }
          text={content}
          onClick={() => console.log(`click ${id}`)}
          priority="default"
        />
      ))}
    </Tabs>
  </block.L>
</Playground>

Priorities

Primary priority can be used to style tabs in brand color.

John Doeh
Alex Miller
Ann Adams
<Playground>
  <block.L style={{ width: '1200px' }}>
    <Tabs priority="primary">
      {links.map(({ active, id, content, iconLeft }) => (
        <Tab
          weight="fill"
          active={active}
          key={id}
          path={`#${id}`}
          iconAction={
            <ButtonIcon
              icon={<IconClose />}
              onClick={() => {
                console.log('click icon');
              }}
              priority="primary"
            />
          }
          text={content}
          onClick={() => console.log(`click ${id}`)}
          priority="primary"
        />
      ))}
    </Tabs>
  </block.L>
</Playground>

Secondary priority should be used as default variant.

John Doeh
Alex Miller
Ann Adams
<Playground>
  <block.L style={{ width: '1200px' }}>
    <div style={{ display: 'flex' }}>
      {links.map(({ active, id, content }) => (
        <Tab
          weight="transparent"
          active={active}
          key={id}
          path={`#${id}`}
          text={content}
          onClick={() => console.log(`click ${id}`)}
          priority="default"
        />
      ))}
    </div>
  </block.L>
</Playground>

Icons

Tab can have an optional icon on the left side ex. icon, logo or avatar.

John Doeh
Alex Miller
Ann Adams
<Playground>
  <block.L style={{ width: '1200px' }}>
    <Tabs priority="default">
      {links.map(({ active, id, content, iconLeft }) => (
        <Tab
          active={active}
          key={id}
          path={`#${id}`}
          iconLeft={<IconPlus />}
          iconAction={
            <ButtonIcon
              icon={<IconClose />}
              onClick={() => {
                console.log('click icon');
              }}
              priority="default"
              weight="outline"
            />
          }
          text={content}
          onClick={() => console.log(`click ${id}`)}
          priority="default"
        />
      ))}
    </Tabs>
  </block.L>
</Playground>
John Doeh
Alex Miller
Ann Adams
Ann Adams
Ann Adams
Ann Adams
Ann Adams
Ann Adams
Ann Adams
Ann Adams
<Playground>
  <block.L style={{ width: '1200px' }}>
    <Tabs priority="default">
      {linksMap.map(({ active, id, content, iconLeft }) => (
        <Tab
          active={active}
          key={id}
          path={`#${id}`}
          iconLeft={<IconPlus />}
          iconAction={
            <ButtonIcon
              icon={<IconClose />}
              onClick={console.log('click')}
              priority="default"
              weight="transparent"
            />
          }
          text={content}
          onClick={() => console.log(`click ${id}`)}
          priority="default"
        />
      ))}
    </Tabs>
  </block.L>
</Playground>

Tab Props

NameTypeDefaultDescription
pathstringHref - attribute that adds url adress to tab component
iconActionReact.ReactNodenullElement appears on right side near tab component`s text (ex.: action block, that consists a button)
iconLeftReact.ReactNodenullElement appears on left side near tab component`s text (ex.: icon or avatar)
onClickReact.MouseEvent<HTMLDivElement>nullCallback when tab component is clicked
prioritystring'secondary'Priority prop to style Tab component
tabIndexnumberSet tabIndex to Tab component
textstringTab component`s text (ex.: url adress as ussual, in such cases text)
weightstringoutlineAdd weight to style Tab component

Tabs Props

NameTypeDefaultDescription
prioritystring'secondary'Priority prop to style Tabs component