@yamada-ui/tabs/dist/tabs.d.mts

Yamada UI tabs component

import * as _yamada_ui_core from '@yamada-ui/core';
import { HTMLUIProps, ThemeProps } from '@yamada-ui/core';
import { LazyMode } from '@yamada-ui/use-disclosure';
import { TabListProps } from './tab-list.mjs';
import { TabPanelsProps } from './tab-panels.mjs';

interface TabsOptions {
    /**
     * The alignment of the tabs.
     */
    align?: "center" | "end" | "start";
    /**
     * The index of the selected tab.
     */
    defaultIndex?: number;
    /**
     * If `true`, disable ripple effects when pressing the tab.
     *
     * @default false
     */
    disableRipple?: boolean;
    /**
     * If `true`, tabs will stretch to width of the tablist.
     *
     * @default false
     */
    fitted?: boolean;
    /**
     * The index of the selected tab.
     */
    index?: number;
    /**
     * If `true`, tabs will stretch to width of the tablist.
     *
     * @default false
     *
     * @deprecated Use `fitted` instead.
     */
    isFitted?: boolean;
    /**
     * If `true`, rendering of the tab panel's will be deferred until it is selected.
     *
     * @default true
     *
     * @deprecated Use `lazy` instead.
     */
    isLazy?: boolean;
    /**
     * If `true`, the tabs will be manually activated and display its panel by pressing Space or Enter.
     *
     * If `false`, the tabs will be automatically activated and their panel is displayed when they receive focus.
     *
     * @default false
     *
     * @deprecated Use `manual` instead.
     */
    isManual?: boolean;
    /**
     * If `true`, rendering of the tab panel's will be deferred until it is selected.
     *
     * @default true
     */
    lazy?: boolean;
    /**
     * The lazy behavior of tab panels' content when not active. Only works when `isLazy={true}`.
     *
     * - `unmount`: The content of inactive tab panels are always unmounted.
     * - `keepMounted`: The content of inactive tab panels is initially unmounted, but stays mounted when selected.
     *
     * @default 'unmount'
     */
    lazyBehavior?: LazyMode;
    /**
     * If `true`, the tabs will be manually activated and display its panel by pressing Space or Enter.
     *
     * If `false`, the tabs will be automatically activated and their panel is displayed when they receive focus.
     *
     * @default false
     */
    manual?: boolean;
    /**
     * The orientation of the tab list.
     *
     * @default 'horizontal'
     */
    orientation?: "horizontal" | "vertical";
    /**
     * Props for tab list component.
     */
    tabListProps?: TabListProps;
    /**
     * Props for tab panels components.
     */
    tabPanelsProps?: TabPanelsProps;
    /**
     * The callback invoked when the index changes.
     */
    onChange?: (index: number) => void;
}
interface TabsProps extends Omit<HTMLUIProps, "onChange">, ThemeProps<"Tabs">, TabsOptions {
}
/**
 * `Tabs` is a component for switching between different display areas.
 *
 * @see Docs https://yamada-ui.com/components/disclosure/tabs
 */
declare const Tabs: _yamada_ui_core.Component<"div", TabsProps>;

export { Tabs, type TabsOptions, type TabsProps };