Layout

Layout est un système de mise en page unidimensionnel avec des options permettant de contrôler la taille relative des éléments de ses enfants. La mise en page s'étend sur toute la largeur de la zone d'affichage.

Usage

import { Layout } from 'nr1'

Exemples

Basique

<Layout preview>
  <LayoutItem>
    <div className="nr1-Box">Main content</div>
  </LayoutItem>
</Layout>

Petite fente à gauche

<Layout preview>
  <LayoutItem
    type={LayoutItem.TYPE.SPLIT_LEFT}
    sizeType={LayoutItem.SIZE_TYPE.SMALL}
  >
    <div className="nr1-Box">Navigation</div>
  </LayoutItem>
  <LayoutItem>
    <div className="nr1-Box">Main content</div>
  </LayoutItem>
</Layout>

Diviser le milieu droit

<Layout preview>
  <LayoutItem>
    <div className="nr1-Box">Main content</div>
  </LayoutItem>
  <LayoutItem type={LayoutItem.TYPE.SPLIT_RIGHT}>
    <div className="nr1-Box">Activity stream</div>
  </LayoutItem>
</Layout>

Diviser la gauche en petit et la droite en moyen

<Layout preview>
  <LayoutItem
    type={LayoutItem.TYPE.SPLIT_LEFT}
    sizeType={LayoutItem.SIZE_TYPE.SMALL}
  >
    <div className="nr1-Box">Navigation</div>
  </LayoutItem>
  <LayoutItem>
    <div className="nr1-Box">Main content</div>
  </LayoutItem>
  <LayoutItem type={LayoutItem.TYPE.SPLIT_RIGHT}>
    <div className="nr1-Box">Activity stream</div>
  </LayoutItem>
</Layout>

Séparé à gauche et à droite pliable

<Layout preview fullHeight>
  <CollapsibleLayoutItem
    triggerType={CollapsibleLayoutItem.TRIGGER_TYPE.INBUILT}
    type={LayoutItem.TYPE.SPLIT_LEFT}
    sizeType={LayoutItem.SIZE_TYPE.SMALL}
  >
    <div className="nr1-Box">Navigation</div>
  </CollapsibleLayoutItem>


  <LayoutItem>
    <div className="nr1-Box">Main content</div>
  </LayoutItem>


  <CollapsibleLayoutItem
    triggerType={CollapsibleLayoutItem.TRIGGER_TYPE.INBUILT}
    type={LayoutItem.TYPE.SPLIT_RIGHT}
  >
    <div className="nr1-Box">Activity stream</div>
  </CollapsibleLayoutItem>
</Layout>

Pliable en mode contrôlé

class Example extends React.Component {
  constructor(props) {
    super(props);


    this.state = {
      collapsedLeft: false,
      collapsedRight: false,
    };
  }


  render() {
    return (
      <>
        <Stack>
          <StackItem>
            <label>
              Collapsed on the left side?
              <input
                type="checkbox"
                onChange={(e) =>
                  this.setState({ collapsedLeft: e.currentTarget.checked })
                }
              />
            </label>
          </StackItem>


          <StackItem>
            <label>
              Collapsed on the right side?
              <input
                type="checkbox"
                onChange={(e) =>
                  this.setState({ collapsedRight: e.currentTarget.checked })
                }
              />
            </label>
          </StackItem>
        </Stack>


        <Layout preview fullHeight>
          <CollapsibleLayoutItem
            collapsed={this.state.collapsedLeft}
            triggerType={CollapsibleLayoutItem.TRIGGER_TYPE.CUSTOM}
            type={LayoutItem.TYPE.SPLIT_LEFT}
            sizeType={LayoutItem.SIZE_TYPE.SMALL}
          >
            <div className="nr1-Box">Navigation</div>
          </CollapsibleLayoutItem>


          <LayoutItem>
            <div className="nr1-Box">Main content</div>
          </LayoutItem>


          <CollapsibleLayoutItem
            collapsed={this.state.collapsedRight}
            triggerType={CollapsibleLayoutItem.TRIGGER_TYPE.CUSTOM}
            type={LayoutItem.TYPE.SPLIT_RIGHT}
          >
            <div className="nr1-Box">Activity stream</div>
          </CollapsibleLayoutItem>
        </Layout>
      </>
    );
  }
}

Disposition empilée

<>
  <Layout preview>
    <LayoutItem>
      <div className="nr1-Box">Chart</div>
    </LayoutItem>
  </Layout>
  <Layout preview>
    <LayoutItem
      type={LayoutItem.TYPE.SPLIT_LEFT}
      sizeType={LayoutItem.SIZE_TYPE.SMALL}
    >
      <div className="nr1-Box">Navigation</div>
    </LayoutItem>
    <LayoutItem>
      <div className="nr1-Box">Main Content</div>
    </LayoutItem>
  </Layout>
</>

Accessoires

children

OBLIGATOIRE

nœud

Éléments de mise en page à afficher.

className

chaîne

Ajoute les noms de classe au composant.

fullHeight

booléen

Étend la disposition pour occuper toute la hauteur disponible.

preview

booléen

Dessine visuellement les cases de la mise en page et ses éléments de mise en page.

style

objet

Style en ligne pour un style personnalisé.

testId

chaîne

Ajoute un attribut data-test-id. Utilisez-le pour cibler le composant dans les tests unitaires et E2E. Pour qu'un identifiant de test soit valide, préfixez-le avec votre identifiant nerdpack, suivi d'un point. Par exemple, my-nerdpack.some-element.

Remarque : vous ne verrez peut-être pas l'attribut data-test-id car ils sont supprimés du DOM. Pour les déboguer, transmettez un paramètre de requête e2e-test à l'URL.

Cette traduction automatique est fournie pour votre commodité.

Usage.css-21sua1{background:none;border:none;width:0;padding:0;}

Exemples

Basique

Petite fente à gauche

Diviser le milieu droit

Diviser la gauche en petit et la droite en moyen

Séparé à gauche et à droite pliable

Pliable en mode contrôlé

Disposition empilée

Accessoires

OBLIGATOIRE

nœud

chaîne

booléen

booléen

objet

chaîne

Usage