SheetXL - v0.8.0-beta.9+sites.210.e2d420901
    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?:
            | ((props: ScrollButtonProps) => ReactElement)
            | null;
        renderScrollButtonEnd?: ((props: ScrollButtonProps) => ReactElement) | null;
        renderScrollButtonStart?:
            | ((props: ScrollButtonProps) => ReactElement)
            | null;
        renderTabButton?: (props: TabProps) => ReactElement<any>;
        renderTabDivider?: (
            props: HTMLAttributes<HTMLElement> & Attributes,
        ) => ReactElement;
        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?: ((props: ScrollButtonProps) => ReactElement) | null
    renderScrollButtonEnd?: ((props: ScrollButtonProps) => ReactElement) | null
    renderScrollButtonStart?: ((props: ScrollButtonProps) => ReactElement) | null
    renderTabButton?: (props: TabProps) => ReactElement<any>
    renderTabDivider?: (
        props: HTMLAttributes<HTMLElement> & Attributes,
    ) => ReactElement
    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