Skip to main content

Grid

Reference​

  • Grid: Standard component that provides a wrapper over an HTML div with display: grid & default width: 100%
  • Recommended way is to use Grid rather than using raw div
  • To know more about display: grid property check: grid layout

Props​

  • rows :
    • Specifies the number (and the heights) of the rows in a grid layout.
    • The values are a space-separated list, where each value specifies the height of the respective row.
    • Refer for values & examples : Internally 'rows' prop uses grid-template-rows
  • columns :
    • Specifies the number (and the widths) of columns in a grid layout.
    • The values are a space separated list, where each value specifies the size of the respective column
    • Refer for values & examples : Internally 'columns' prop uses grid-template-columns
  • areas:
    • Specifies areas within the grid layout.
    • Each area is defined by apostrophes. Use a period sign to refer to a grid item with no name.
    • Refer for values & examples : Internally 'areas' prop uses grid-template-areas
  • backgroundColor: Background color. Value should be specified from the color palette. See Color palette
  • color: Color. See Color palette
  • All other CSS properties of div can be set like border, height, width etc.

Usage​

const { protrakComponents } = React.useContext(customWidgetContext);
const { Grid } = protrakComponents;

return (
  <Grid
    height="auto"
    rows={["auto"]}
    columns={["auto"]}
    areas={[["top"]]}
    alignItems="center"
    padding={"1.5em 1.5em"}
    margin={"4px"}
    border={"1px solid black"}
  >
    <H2>Tenant Info</H2>
    <Text>
      <H3> Tenant Name: </H3>
      {tenantName}
    </Text>
    <H3> DateTime Format: </H3>
    <ul>
      <li>
        <b>Date Format: </b>
        {tenantDateTimeFormat.dateFormat}
      </li>
      <li>
        <b>Time Format: </b>
        {tenantDateTimeFormat.timeFormat}
      </li>
      <li>
        <b>TimeZone: </b>
        {tenantDateTimeFormat.timeZone}
      </li>
    </ul>
    <Text>
      <H3> Current date time: </H3>
      {formattedDate}
    </Text>
  </Grid>
);