Tabs
Allows user to make it easy explore and switch between different views.
version
5.6.3
install
yarn add @welcome-ui/tabs
usage
import { Tabs, useTab } from '@welcome-ui/tabs'
About #
See Ariakit for documentation.
Usage #
Set the tab activated by default using selectedId
on useTab
.
Sizes #
Size is set on Tab.List. Available sizes are sm
and md
. By default size is set to md
.
With no border #
The border on Tab.List
is an inset shadow that you can customize or disable via the boxShadow
style prop
With a badge #
Add badges, icons and images in tab.
Use another component #
Use another component in tab.
One tab #
Active bar doesn't display with only one tab.
Vertical #
Set the tab orientation by providing the orientation
prop to the tab state
useTab #
We use useTab
from Ariakit Tab for the state of the Tab.
Pass options to useTab
:
defaultSelectedId
: e.g.const store = useTab({ defaultSelectedId: 'tab2' })
Properties #
Tab #
No props specified
Tab.List #
Name | Type(s) | Default | Required |
---|---|---|---|
size | "sm" "md" | md |
Tab.Panel #
Name | Type(s) | Default | Required |
---|---|---|---|
alwaysVisible | Boolean Determines whether the content element should remain visible even when the `open` state is `false`. If this prop is set to `true`, the `hidden` prop and the `display: none` style will not be applied, unless explicitly set otherwise. This prop is particularly useful when using third-party animation libraries such as Framer Motion or React Spring, where the element needs to be visible for exit animations to work. Live examples: - [Dialog with Framer Motion](https://ariakit.org/examples/dialog-framer-motion) - [Menu with Framer Motion](https://ariakit.org/examples/menu-framer-motion) - [Tooltip with Framer Motion](https://ariakit.org/examples/tooltip-framer-motion) - [Dialog with details & summary](https://ariakit.org/examples/dialog-details) | false | |
tabId | string The id of the tab that controls this panel. By default, this value will be inferred based on the order of the tabs and the panels. Live examples: - [Tab with React Router](https://ariakit.org/examples/tab-react-router) | ||
disabled | Boolean Determines if the element is disabled. This sets the `aria-disabled` attribute accordingly, enabling support for all elements, including those that don't support the native `disabled` attribute. This feature can be combined with the [`accessibleWhenDisabled`](https://ariakit.org/reference/focusable#accessiblewhendisabled) prop to make disabled elements still accessible via keyboard. Live examples: - [Submenu](https://ariakit.org/examples/menu-nested) | false | |
autoFocus | Boolean Automatically focuses the element upon mounting, similar to the native `autoFocus` prop. This addresses an issue where the element with the native `autoFocus` attribute might receive focus before React effects are executed. The `autoFocus` prop can also be used with [Focusable](https://ariakit.org/components/focusable) elements within a [Dialog](https://ariakit.org/components/dialog) component, establishing the initial focus as the dialog opens. Live examples: - [Warning on Dialog hide](https://ariakit.org/examples/dialog-hide-warning) - [Dialog with React Router](https://ariakit.org/examples/dialog-react-router) - [Nested Dialog](https://ariakit.org/examples/dialog-nested) | false | |
focusable | Boolean Determines if [Focusable](https://ariakit.org/components/focusable) features should be active on non-native focusable elements. **Note**: This prop only turns off the additional features provided by the [Focusable](https://ariakit.org/components/focusable) component. Non-native focusable elements will lose their focusability entirely. However, native focusable elements will retain their inherent focusability, but without added features such as improved [`autoFocus`](https://ariakit.org/reference/focusable#autofocus), [`accessibleWhenDisabled`](https://ariakit.org/reference/focusable#accessiblewhendisabled), [`onFocusVisible`](https://ariakit.org/reference/focusable#onfocusvisible), etc. | true | |
accessibleWhenDisabled | Boolean Indicates whether the element should be focusable even when it is [`disabled`](https://ariakit.org/reference/focusable#disabled). This is important when discoverability is a concern. For example: > A toolbar in an editor contains a set of special smart paste functions that are disabled when the clipboard is empty or when the function is not applicable to the current content of the clipboard. It could be helpful to keep the disabled buttons focusable if the ability to discover their functionality is primarily via their presence on the toolbar. Learn more on [Focusability of disabled controls](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#focusabilityofdisabledcontrols). | ||
onFocusVisible | BivariantCallback<(event: SyntheticEvent<Element, Event>) => void> Custom event handler invoked when the element gains focus through keyboard interaction or a key press occurs while the element is in focus. This is a programmatic equivalent of the `data-focus-visible` attribute. Live examples: - [Custom Checkbox](https://ariakit.org/examples/checkbox-custom) | ||
shouldRegisterItem | Boolean Whether the item should be registered to the store. | true | |
getItem | (props: Item) => Item A memoized function that returns props that will be passed along with the item when it gets registered to the store. @example ```jsx const store = useCollectionStore(); const getItem = useCallback((item) => ({ ...item, custom: true }), []); <CollectionItem store={store} getItem={getItem} /> ``` |
Packages #
Dependencies #
Peer dependencies #
Previous
PaginationNext
Emoji