SheetXL - v1.0.2
    Preparing search index...

    Interface TabStripProps

    interface TabStripProps {
        activeColor?: string;
        background?: string;
        borderColor?: string;
        borderWidth?: number;
        disabled?: boolean;
        disableDrag?: boolean;
        onSelectedTabIndexChange?: (index: number) => void;
        onTabMove?: (indexFrom: number, indexTo: number) => void;
        onTabNameChange?: (index: number, tabName: string) => void;
        propsEditLabel?: EditableLabelProps;
        renderScrollButtonEdge?: RenderSlotFn<ScrollButtonProps> | null;
        renderScrollButtonEnd?: RenderSlotFn<ScrollButtonProps> | null;
        renderScrollButtonStart?: RenderSlotFn<ScrollButtonProps> | null;
        renderTabButton?: RenderSlotFn<TabProps>;
        renderTabDivider?: RenderSlotFn<HTMLAttributes<HTMLElement>>;
        seam?: boolean;
        selectedTabIndex: number;
        tabNames: string[];
    }

    Hierarchy

    • Omit<React.HTMLAttributes<HTMLDivElement>, "onSubmit" | "onChange">
      • TabStripProps
    Index
    activeColor? background? borderColor? borderWidth? disabled? disableDrag? onSelectedTabIndexChange? onTabMove? onTabNameChange? propsEditLabel? renderScrollButtonEdge? renderScrollButtonEnd? renderScrollButtonStart? renderTabButton? renderTabDivider? seam? selectedTabIndex tabNames
    activeColor?: string

    CSS color for the selected-tab accent.

    background?: string

    Default background color of tabs

    borderColor?: string
    borderWidth?: number

    Currently '2022' css does not allow for scrollPanes to be hidden in one axis and overflow in another. To support tab scrolling and create a visual notch for the selected tab We create a border/divider for all elements except the selected.

    disabled?: boolean
    disableDrag?: boolean
    onSelectedTabIndexChange?: (index: number) => void
    onTabMove?: (indexFrom: number, indexTo: number) => void
    onTabNameChange?: (index: number, tabName: string) => void
    propsEditLabel?: EditableLabelProps
    renderScrollButtonEdge?: RenderSlotFn<ScrollButtonProps> | null
    renderScrollButtonEnd?: RenderSlotFn<ScrollButtonProps> | null
    renderScrollButtonStart?: RenderSlotFn<ScrollButtonProps> | null
    renderTabButton?: RenderSlotFn<TabProps>
    renderTabDivider?: RenderSlotFn<HTMLAttributes<HTMLElement>>
    seam?: boolean

    Draw the line along the strip's top edge (the one the selected tab notches). Off where the row above already separates the tabs from the grid.

    true
    selectedTabIndex: number
    tabNames: string[]

    Settings
    Member Visibility

    On This Page
    Properties