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

defaultSelectedId string

isFitted boolean

loop boolean | "horizontal" | "vertical"

manual boolean

mountWhenInactive 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