# All files 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
    56x
    56x
    56x
    56x
    56x
    56x
    56x
    56x
    56x
    56x
    56x
    56x
    56x
    56x
    56x
    56x
    56x
    56x
    56x
    56x
    56x
    56x
    56x
     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
      );
    }