@hig/tabs

    1.3.0 • Public • Published

    Tabs

    Tabs keep related content in a single container that is shown and hidden through navigation.

    Read more about when and how to use the Tabs component on the website.

    Getting started

    Install the package

    yarn add @hig/tabs @hig/theme-context @hig/theme-data

    Import the component

    import Tabs, { Tab } from "@hig/tabs";

    Basic usage

    <Tabs>
      <Tab key="details" label="Details">Details content</Tab>
      <Tab key="activities" label="Activities">Activities content</Tab>
      <Tab key="inspector" label="Inspector">Inspector content</Tab>
    </Tabs>

    Customization

    The visual styles of Tabs can be customized by its props, available values can be found via:

    import {
      AVAILABLE_ALIGNMENTS,
      AVAILABLE_VARIANTS,
      AVAILABLE_ORIENTATIONS,
      alignments,
      variants,
      orientations
    } from "@hig/tabs";

    Complex Tabs

    Complex tabs are composed of an interactive container, text label, divider and optional close icon. Complex tabs only works when varient is set to box or canvas.

    Custom CSS

    Use the className prop to pass in a css class name to the outermost container of the component. The class name will also pass down to most of the other styled elements within the component.

    Keywords

    none

    Install

    npm i @hig/tabs

    DownloadsWeekly Downloads

    14

    Version

    1.3.0

    License

    Apache-2.0

    Unpacked Size

    115 kB

    Total Files

    5

    Last publish

    Collaborators

    • devfoncy
    • hig-bot
    • nfiniteset
    • wmui51
    • staceyshk
    • sherm.newsom
    • grantkellyadsk