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>
);