Layout

1.3.5

O componente Layout é destinado à construção de layouts de uma ou múltiplas colunas utilizando tipologias predefinidas.

1 coluna

2 colunas simétricas

2 colunas assimétricas

3 colunas

import React from "react";
import { Layout } from "@nimbus-ds/patterns";
import { Box, Text } from "@nimbus-ds/components";

const Example: React.FC = () => {
  const exampleBox = (
    <Box
      display="flex"
      alignItems="center"
      justifyContent="center"
      backgroundColor="primary-surface"
      borderColor="primary-interactive"
      borderStyle="dashed"
      borderWidth="1"
      borderRadius="2"
      width="100%"
      padding="4"
      boxSizing="border-box"
    >
      <Text fontSize="caption" textAlign="center" color="primary-interactive">
        Content
      </Text>
    </Box>
  );

  return (
    <Layout columns="1">
      <Layout.Section>{exampleBox}</Layout.Section>
      <Layout.Section>{exampleBox}</Layout.Section>
      <Layout.Section>{exampleBox}</Layout.Section>
    </Layout>
  );
};

export default Example;

Implementação

Instale o componente via terminal.

npm install @nimbus-ds/layout

Props

Propriedades adicionais são repassadas ao elemento <Layout>. Consulte a documentação do elemento div para ver a lista de atributos aceitos pelo elemento <Layout>.

Layout

Name	Type	Default	Description
children*	React.ReactNode		Content to be rendered inside the layout.
columns	'1' '2 - asymmetric' '2 - symmetric' '3'		Number of columns to be rendered for the children.

Layout.Section

Name	Type	Default	Description
children*	React.ReactNode		Content of the section body.