@metreeca/tile
    Preparing search index...

    Function Strip

    • Creates a horizontal strip.

      Places what it holds one item beside the other, in the order given, with the same gap between each pair and none before the first or after the last. The gap is a step of the spacing ladder, so it follows the text size of the strip and whatever an app retuned the ladder to.

      The strip stands as wide as whatever holds it and as tall as its tallest item, each item keeping its own width; a strip told to grow takes whatever room its container leaves along the main axis. Items that do not fit stay on one line and overflow it, unless the strip is told to wrap, in which case they flow onto as many rows as they need, set apart as wrap states.

      The strip carries no semantics: grouping its items for assistive technology takes an element inside it or around it.

      Parameters

      • options: {
            grow?: boolean;
            wrap?: boolean | Spacing;
            place?: "head" | "center" | "end" | "start" | "spread" | "tail";
            align?: "center" | "end" | "start" | "stretch" | "baseline";
            space?: Spacing;
            children?: ComponentChildren;
        }

        The widget configuration

        • Optionalgrow?: boolean

          Whether the strip takes the room its container leaves along the main axis, rather than the size of its items.

        • Optionalwrap?: boolean | Spacing

          Whether items that do not fit on one line flow onto further rows, rather than overflowing the strip: true sets the rows apart by space, a step of the spacing ladder sets them apart by that step instead.

        • Optionalplace?: "head" | "center" | "end" | "start" | "spread" | "tail"

          Where the items sit along the row, when the strip is wider than they are: at the start, in the center, at the end, spread from edge to edge, the leftover room shared out between them, or split with the first item alone at the start and the others at the end (head), or the last item alone at the end and the others at the start (tail).

        • Optionalalign?: "center" | "end" | "start" | "stretch" | "baseline"

          Where each item sits across the row: against the start edge, in the center, against the end edge, on the text baseline shared with the other items, or stretched to the full height of the row.

        • Optionalspace?: Spacing

          The step of the spacing ladder setting each item apart from the next; the items touch where left out.

        • Optionalchildren?: ComponentChildren

          What the strip holds, each child an item of the row.

      Returns VNode<
          {
              place: "head"
              | "center"
              | "end"
              | "start"
              | "spread"
              | "tail";
              style: {
                  flexGrow: number | undefined;
                  flexWrap: string | undefined;
                  justifyContent: string | undefined;
                  alignItems: "center" | "end" | "start" | "stretch" | "baseline";
                  columnGap: Optional<string>;
                  rowGap: Optional<string>;
              };
          },
      >

      The horizontal strip

    Settings
    Member Visibility