Card

Dessine un conteneur de contenu flexible et extensible.

Usage

import { Card } from 'nr1'

Exemples

Basique

<Card>
  <CardHeader title="Card title" subtitle="This is a subtitle" />
  <CardBody>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
    non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </CardBody>
</Card>

Pliable - Non contrôlé

<Card collapsible>
  <CardHeader
    title="Card title"
    subtitle="This is a subtitle"
    additionalInfoLink={{
      label: 'See more',
      onClick: console.log,
      to: '#',
    }}
  />
  <CardBody>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
    non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </CardBody>
</Card>

Pliable - Contrôlé

class MyComponent extends React.PureComponent {
  constructor(...args) {
    super(...args);
    this.state = {
      collapsed: false,
    };
  }
  render() {
    const { collapsed } = this.state;
    return (
      <Card
        collapsible
        collapsed={collapsed}
        onChange={(evt, collapsed) => this.setState({ collapsed })}
      >
        <CardHeader
          title="Card title"
          subtitle="This is a subtitle"
          additionalInfoLink={{
            label: 'See more',
            onClick: console.log,
            to: '#',
          }}
        />
        <CardBody>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat. Duis aute irure dolor in
          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
          culpa qui officia deserunt mollit anim id est laborum.
        </CardBody>
      </Card>
    );
  }
}

Plusieurs cartes pliables

<Grid>
  {[
    {
      title: 'Services - APM',
      count: 11746,
    },
    {
      title: 'Services - Open Telemetry',
      count: 2845,
    },
    {
      title: 'Hosts',
      count: 1845,
    },
    {
      title: 'Containers',
      count: 394,
    },
  ].map((section) => (
    <GridItem columnSpan={12}>
      <Card collapsible>
        <CardHeader
          title={section.title}
          additionalInfoLink={{
            label: `View all (${section.count})`,
            onClick: console.log,
            to: '#',
          }}
        />
        <CardBody>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </CardBody>
      </Card>
    </GridItem>
  ))}
</Grid>

En-tête personnalisé

class MyComponent extends React.PureComponent {
  constructor(...args) {
    super(...args);
    this.state = {
      collapsed: false,
    };
  }
  render() {
    const { collapsed } = this.state;
    return (
      <Card
        collapsible
        collapsed={collapsed}
        onChange={(evt, collapsed) => this.setState({ collapsed })}
      >
        <CardHeader>
          <HeadingText>Custom header</HeadingText>
        </CardHeader>
        <CardBody>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat. Duis aute irure dolor in
          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
          culpa qui officia deserunt mollit anim id est laborum.
        </CardBody>
      </Card>
    );
  }
}

Carte sectionnée

class SectionedCard extends React.Component {
  renderForm() {
    return (
      <Form
        layoutType={Form.LAYOUT_TYPE.SPLIT}
        splitSizeType={Form.SPLIT_SIZE_TYPE.SMALL}
      >
        <Switch label="Fit to data" />
        <TextField label="Custom min" placeholder="0" />
        <TextField label="Custom max" placeholder="Auto" />
        <MultilineTextField
          label="Config"
          type={MultilineTextField.TYPE.PREFORMATTED}
          placeholder={`{ showLabels: "true" }`}
        />
      </Form>
    );
  }


  render() {
    return (
      <Card>
        <CardBody>
          <CardSection collapsible>
            <CardSectionHeader title="Y axis"></CardSectionHeader>
            <CardSectionBody>{this.renderForm()}</CardSectionBody>
          </CardSection>
          <CardSection collapsible>
            <CardSectionHeader title="X axis"></CardSectionHeader>
            <CardSectionBody>{this.renderForm()}</CardSectionBody>
          </CardSection>
        </CardBody>
      </Card>
    );
  }
}

Accessoires

children

OBLIGATOIRE

nœud

Contenu à rendre à l'intérieur de la carte.

className

chaîne

Ajoute les noms de classe au composant. Doit être utilisé uniquement à des fins de positionnement et d'espacement.

collapsed

booléen

Définissez cet accessoire pour contrôler l'état réduit du composant. S'il est défini, il transforme le composant en composant contrôlé.

collapsible

booléen

Définissez cet accessoire pour rendre le composant pliable.

defaultCollapsed

booléen

Si true, l'état initial réduit de la carte est collapsed. Utile lorsque vous ne souhaitez pas utiliser un composant contrôlé.

fullHeight

booléen

Agrandit la carte pour occuper toute la hauteur disponible.

fullWidth

booléen

Étend la carte pour occuper toute la largeur disponible.

onChange

fonction

Cette fonction sera appelée chaque fois que l'utilisateur cliquera sur l'en-tête pour réduire ou développer le composant. Si vous contrôlez l'état du composant, utilisez ceci pour définir la valeur de l'accessoire collapsed .

function (event: React.MouseEvent, 
collapsed: boolean 
)

spacingType

énumération[]

Propriété d'espacement. L'espacement est défini comme un uplet de zéro à quatre valeurs, qui suivent les mêmes conventions que les propriétés CSS comme margin ou padding. Pour omettre une valeur, utilisez SPACING_TYPE.OMIT.

<Array of<One ofCard.SPACING_TYPE.EXTRA_LARGE, Card.SPACING_TYPE.LARGE, Card.SPACING_TYPE.MEDIUM, Card.SPACING_TYPE.NONE, Card.SPACING_TYPE.OMIT, Card.SPACING_TYPE.SMALL,
>
>

style

objet

Doit être utilisé uniquement à des fins de positionnement et d'espacement.

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

Pliable - Non contrôlé

Pliable - Contrôlé

Plusieurs cartes pliables

En-tête personnalisé

Carte sectionnée

Accessoires

OBLIGATOIRE

nœud

chaîne

booléen

booléen

booléen

booléen

booléen

fonction

énumération[]

objet

chaîne

Usage