#Tabs

The <Tabs> component is used alongside the <Tabs.List>, <Tabs.Tab> and <Tabs.Panel> components to create layered sections of content.

#Import

import { Tabs } from 'bumbag';

#Usage

Each <Tabs.Tab> component should have a tabId prop with a corresponding <Tabs.Panel> component with the same tabId value.

Dogs are awesome
Editable example

#Fitted tabs

You can make your tabs span the whole width with the isFitted prop.

Dogs are awesome
Editable example

#Alignment

Align your tabs with the align prop.

Dogs are awesome
Editable example
Dogs are awesome
Editable example

#Variants

The <Tabs> component comes with three default variants: boxed, button and unstyled.

You can also create your own Tabs variant.

#Boxed

Dogs are awesome
Editable example

#Buttons

Dogs are awesome
Editable example

#Unstyled

Dogs are awesome
Editable example

#Colors

Dogs are awesome
Editable example

#Disabled

Dogs are awesome
Editable example

#Orientation

Dogs are awesome
Editable example

#Lazy mounting

By setting a mountWhenInactive prop, the tab panels will not mount until they are active.

Dogs are awesome
Editable example

#Controlled

Dogs are awesome
Editable example

#Props

#Tabs Props

baseId string

isFitted boolean

loop boolean | "horizontal" | "vertical"

manual boolean

orientation "horizontal" | "vertical"

selectedId string

Inherits Box props

use

string
  | (ComponentClass<any, any> & { useProps: any; })
  | (FunctionComponent<any> & { useProps: any; })

className string

children

string
  | number
  | boolean
  | {}
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<...>)>
  | ReactNodeArray
  | ReactPortal
  | ((props: BoxProps) => ReactNode)

alignX "right" | "left" | "center"

alignY "top" | "bottom" | "center"

variant string

colorMode string

disabled boolean

overrides

{
  useCSSVariables?: boolean;
  altitudes?: AltitudesThemeConfig;
  borders?: BordersThemeConfig;
  borderRadii?: BorderRadiiThemeConfig;
  ... 95 more ...;
  Template?: TemplateThemeConfig;
}

elementRef ((instance: any) => void) | RefObject<any>

themeKey string

#Tabs.List Props

align "right" | "left" | "center"

palette

"default"
  | "primary"
  | "secondary"
  | "success"
  | "danger"
  | "warning"
  | (string & {})
Inherits Box props

use

string
  | (ComponentClass<any, any> & { useProps: any; })
  | (FunctionComponent<any> & { useProps: any; })

className string

children

string
  | number
  | boolean
  | {}
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<...>)>
  | ReactNodeArray
  | ReactPortal
  | ((props: BoxProps) => ReactNode)

alignX "right" | "left" | "center"

alignY "top" | "bottom" | "center"

variant string

colorMode string

disabled boolean

overrides

{
  useCSSVariables?: boolean;
  altitudes?: AltitudesThemeConfig;
  borders?: BordersThemeConfig;
  borderRadii?: BorderRadiiThemeConfig;
  ... 95 more ...;
  Template?: TemplateThemeConfig;
}

elementRef ((instance: any) => void) | RefObject<any>

themeKey string

#Tabs.Tab Props

tabId string

Inherits Box props

use

string
  | (ComponentClass<any, any> & { useProps: any; })
  | (FunctionComponent<any> & { useProps: any; })

className string

children

string
  | number
  | boolean
  | {}
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<...>)>
  | ReactNodeArray
  | ReactPortal
  | ((props: BoxProps) => ReactNode)

alignX "right" | "left" | "center"

alignY "top" | "bottom" | "center"

variant string

colorMode string

disabled boolean

overrides

{
  useCSSVariables?: boolean;
  altitudes?: AltitudesThemeConfig;
  borders?: BordersThemeConfig;
  borderRadii?: BorderRadiiThemeConfig;
  ... 95 more ...;
  Template?: TemplateThemeConfig;
}

elementRef ((instance: any) => void) | RefObject<any>

themeKey string

#Tabs.Panel Props

tabId string

Inherits Box props

use

string
  | (ComponentClass<any, any> & { useProps: any; })
  | (FunctionComponent<any> & { useProps: any; })

className string

children

string
  | number
  | boolean
  | {}
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<...>)>
  | ReactNodeArray
  | ReactPortal
  | ((props: BoxProps) => ReactNode)

alignX "right" | "left" | "center"

alignY "top" | "bottom" | "center"

variant string

colorMode string

disabled boolean

overrides

{
  useCSSVariables?: boolean;
  altitudes?: AltitudesThemeConfig;
  borders?: BordersThemeConfig;
  borderRadii?: BorderRadiiThemeConfig;
  ... 95 more ...;
  Template?: TemplateThemeConfig;
}

elementRef ((instance: any) => void) | RefObject<any>

themeKey string

#Theming

Tabs.styles.base
Dogs are awesome
Tabs.List.styles.base
Dogs are awesome
Tabs.Tab.styles.base
Dogs are awesome
Tabs.Tab.styles.selected
Dogs are awesome
Tabs.Tab.styles.focus
Dogs are awesome
Tabs.Tab.styles.hover
Dogs are awesome
Tabs.Panel.styles.base
Dogs are awesome
On this page
Copyright © 2021 Jake Moxey