SegmentedControl

Un composant qui affiche un ensemble de boutons, dont un seul peut être actif à la fois. Peut être utilisé en « mode contrôlé » (en définissant l'accessoire value ) ou non contrôlé.

Usage

import { SegmentedControl } from 'nr1'

Exemples

Basique

<SegmentedControl onChange={(evt, value) => console.log(evt, value)}>
  <SegmentedControlItem value="one" label="One" />
  <SegmentedControlItem value="two" label="Two" />
  <SegmentedControlItem disabled value="three" label="Three" />
  <SegmentedControlItem value="four" label="Four" />
</SegmentedControl>

Avec quelques indices

<SegmentedControl onChange={(evt, value) => console.log(evt, value)}>
  <SegmentedControlItem value="one" label="One" />
  <SegmentedControlItem value="two" label="Two" />
  <SegmentedControlItem
    hint="The third item"
    disabled
    value="three"
    label="Three"
  />
  <SegmentedControlItem hint="The fourth item" value="four" label="Four" />
</SegmentedControl>

Contrôlé

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


    this.state = {
      value: 'one',
    };
  }


  render() {
    return (
      <SegmentedControl
        value={this.state.value}
        onChange={(evt, value) => this.setState({ value })}
      >
        <SegmentedControlItem value="one" label="One" />
        <SegmentedControlItem value="two" label="Two" />
        <SegmentedControlItem disabled value="three" label="Three" />
        <SegmentedControlItem value="four" label="Four" />
      </SegmentedControl>
    );
  }
}

Avec des icônes

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


    this.state = {
      value: 'one',
    };
  }


  render() {
    return (
      <SegmentedControl
        value={this.state.value}
        onChange={(evt, value) => this.setState({ value })}
      >
        <SegmentedControlItem
          label="One"
          value="one"
          iconType={
            SegmentedControlItem.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__CODE
          }
        />
        <SegmentedControlItem
          label="Two"
          value="two"
          iconType={
            SegmentedControlItem.ICON_TYPE.INTERFACE__OPERATIONS__FILTER
          }
        />
        <SegmentedControlItem
          label="Three"
          value="three"
          iconType={SegmentedControlItem.ICON_TYPE.INTERFACE__SIGN__NUMBER}
        />
      </SegmentedControl>
    );
  }
}

Icônes uniquement avec quelques indices

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


    this.state = {
      value: 'one',
    };
  }


  render() {
    return (
      <SegmentedControl
        type={SegmentedControl.TYPE.ICONS_ONLY}
        value={this.state.value}
        onChange={(evt, value) => this.setState({ value })}
      >
        <SegmentedControlItem
          label="One"
          value="one"
          iconType={
            SegmentedControlItem.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__CODE
          }
        />
        <SegmentedControlItem
          label="Two"
          value="two"
          iconType={
            SegmentedControlItem.ICON_TYPE.INTERFACE__OPERATIONS__FILTER
          }
          hint="The second item."
        />
        <SegmentedControlItem
          label="Three"
          value="three"
          iconType={SegmentedControlItem.ICON_TYPE.INTERFACE__SIGN__NUMBER}
          hint="The third item."
        />
      </SegmentedControl>
    );
  }
}

Accessoires

`ariaLabel` chaîne	Fournissez une étiquette descriptive pour ce contrôle, par exemple "Sélecteur de thème".
`children` OBLIGATOIRE nœud	Un éventail de 5 `<SegmentedControlItem />`maximum décrivant les segments cliquables dans le contrôle. Les éléments peuvent avoir soit simplement un `label`, soit un `label` et un `icon`, mais doivent être uniformes entre les enfants. Tous les éléments peuvent avoir un accessoire `disabled` facultatif pour désactiver ce bouton.
`className` chaîne	Ajoute les noms de classe au composant. Doit être utilisé uniquement à des fins de positionnement et d'espacement.
`onChange` fonction	Appelé chaque fois qu'un `<SegmentedControlItem />` est cliqué, avec la propriété `value` de cet élément. Se déclenchera également si l'élément actuellement sélectionné est à nouveau cliqué. Vous pouvez utiliser ce rappel pour mettre à jour l'accessoire `value` si vous souhaitez contrôler son état. `function (event: React.ChangeEvent, value: any )`
`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 ofSegmentedControl.SPACING_TYPE.EXTRA_LARGE, SegmentedControl.SPACING_TYPE.LARGE, SegmentedControl.SPACING_TYPE.MEDIUM, SegmentedControl.SPACING_TYPE.NONE, SegmentedControl.SPACING_TYPE.OMIT, SegmentedControl.SPACING_TYPE.SMALL, > >`
`style` objet	Style en ligne pour un style personnalisé. 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.
`type` énum.	Définissez ceci sur `SegmentedControl.TYPE.ICONS_ONLY` pour afficher uniquement les icônes. Sera ignoré si les icônes ne sont pas trouvées dans les enfants. `<One ofSegmentedControl.TYPE.ICONS_ONLY, SegmentedControl.TYPE.NORMAL >`
`value` n'importe lequel	Définissez l'option actuellement sélectionnée dans le contrôle en mettant à jour cet accessoire.

Cette traduction automatique est fournie pour votre commodité.

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

Exemples

Basique

Avec quelques indices

Contrôlé

Avec des icônes

Icônes uniquement avec quelques indices

Accessoires

chaîne

OBLIGATOIRE

nœud

chaîne

fonction

énumération[]

objet

chaîne

énum.

n'importe lequel

Usage