# All files / tabs tabListStyles.ts

100% Statements 52/52
100% Branches 1/1
100% Functions 1/1
100% Lines 52/52

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    531x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    62x
    62x
    62x
    62x
    62x
    62x
    62x
    62x
    62x
    62x
    62x
    62x
    62x
    62x
    62x
    62x
    62x
    62x
    62x
    62x
    62x
    62x
    62x
     import { cnb } from "cnbuilder";
    import { bem } from "../utils/bem.js";
    import { tabIndicator } from "./tabIndicatorStyles.js";

    const styles = bem("rmd-tablist");

    /**
     * The supported types of alignments for the tabs.
     */
    export type TabsAlignment = "left" | "center" | "right";

    /**
     * @remarks \@since 6.0.0
     */
    export interface TabListClassNameOptions {
      className?: string;
      align?: TabsAlignment;
      animate?: boolean;
      inline?: boolean;
      padded?: boolean;
      vertical?: boolean;
      scrollbar?: boolean;
      indicator?: boolean;
    }

    /**
     * @remarks \@since 6.0.0
     */
    export function tabList(options: TabListClassNameOptions = {}): string {
      const {
        className,
        align = "left",
        padded,
        inline,
        vertical,
        scrollbar,
        animate = false,
        indicator = false,
      } = options;

      return cnb(
        styles({
          [align]: true,
          padded,
          vertical,
          "full-width": !inline,
          "no-scrollbar": !scrollbar,
        }),
        indicator && tabIndicator({ tablist: true, animate, vertical }),
        className
      );
    }