@hig/tabs

HIG Tabs

Stats

StarsIssuesVersionUpdatedCreatedSize
@hig/tabs
1422431.3.0a year ago3 years agoMinified + gzip package size for @hig/tabs in KB

Readme

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.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.