@nospamproxy/core
    Preparing search index...

    Class GridControl

    A custom element that creates a CSS-grid layout in the following format.

    +------+---------+---------+-----+---------+
    |      | Header1 | Header2 | ... | HeaderN |
    +------+---------+---------+-----+---------+
    | Row1 | Cell11  | Cell12  | ... | Cell1N  |
    +------+---------+---------+-----+---------+
    | Row2 | Cell21  | Cell22  | ... | Cell2N  |
    +------+---------+---------+-----+---------+
    | ...  | ...     | ...     | ... | ...     |
    +------+---------+---------+-----+---------+
    | RowM | CellM1  | CellM2  | ... | CellMN  |
    +------+---------+---------+-----+---------+
    • Basic usage; by default, the grid is compact (inline-grid) and the columns are centered (other than the grid-row-labels).
    <grid-control>
      <grid-column-header value="Inbound emails"></grid-column-header>
      <grid-column-header value="Outbound emails"></grid-column-header>

        <grid-row-label value="After received"></grid-row-label>
        <checkbox-control></checkbox-control>
        <checkbox-control></checkbox-control>

        <grid-row-label value="Before disclaimer"></grid-row-label>
        <checkbox-control></checkbox-control>
        <checkbox-control></checkbox-control>

         <grid-row-label value="Before delivery"></grid-row-label>
         <checkbox-control></checkbox-control>
         <checkbox-control></checkbox-control>
       </grid-control>
    • Wide mode; the grid is wide (grid) and takes teh whole available width.
    <grid-control mode="wide">
      ...
    </grid-control>
    • Left aligned columns.
    <grid-control column-alignment="left">
      ...
    </grid-control>
    • Project to the first empty cell.
    <grid-control>
      	<grid-column-header value="Trigger name" au-slot="first-cell"></grid-column-header>
       	<grid-column-header value="Inbound emails"></grid-column-header>
       	<grid-column-header value="Outbound emails"></grid-column-header>

       	<grid-row-label value="After received"></grid-row-label>
       	<checkbox-control></checkbox-control>
       	<checkbox-control></checkbox-control>
        ...
    </grid-control>

    For live examples, refer to the test-app.

    Implements

    • ICustomElementViewModel
    Index

    Constructors

    constructor

    Properties

    columnAlignment firstCell firstCellProjected mode

    Methods

    attached

    Constructors

    Properties

    columnAlignment: "center" | "start" = 'center'
    firstCell: unknown
    firstCellProjected: boolean = false
    mode: "compact" | "wide" = 'compact'

    Methods

    • Parameters

      • _initiator: IHydratedController

      Returns void | Promise<void>

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Methods