Usage
import { TileGroup } from 'nr1'Exemples
Groupe de tuiles de base
<TileGroup> <Tile onClick={console.log}>Tile 1</Tile> <Tile onClick={console.log}>Tile 2</Tile> <Tile onClick={console.log}>Tile 3</Tile></TileGroup>Groupe de tuiles avec type de petit espace
<TileGroup gapType={TileGroup.GAP_TYPE.SMALL}> <Tile onClick={console.log}>Tile 1</Tile> <Tile onClick={console.log}>Tile 2</Tile> <Tile onClick={console.log}>Tile 3</Tile></TileGroup>Groupe de tuiles avec 3 colonnes
<TileGroup tileWidth="4fr"> {Array.from({ length: 12 }).map((_, index) => ( <Tile onClick={console.log}>Tile {index + 1}</Tile> ))}</TileGroup>Groupe de tuiles avec largeur de tuile personnalisée
<TileGroup tileWidth={120}> {Array.from({ length: 12 }).map((_, index) => ( <Tile onClick={console.log}>Tile {index + 1}</Tile> ))}</TileGroup>Tuiles sélectionnables
<TileGroup selectionType={TileGroup.SELECTION_TYPE.SINGLE} tileWidth={120}> {Array.from({ length: 12 }).map((_, index) => ( <Tile onClick={console.log}>Tile {index + 1}</Tile> ))}</TileGroup>Tuiles sélectionnables avec tuile par défaut cochée
<TileGroup defaultValue="tile-0" selectionType={TileGroup.SELECTION_TYPE.SINGLE} tileWidth={120}> {Array.from({ length: 12 }).map((_, index) => ( <Tile value={`tile-${index}`} onClick={console.log}> Tile {index + 1} </Tile> ))}</TileGroup>Tuiles sélectionnables contrôlées
class MyComponent extends React.PureComponent { constructor() { super(...arguments); this.state = { checkedTile: 'tile-0', }; this._onChange = this._onChange.bind(this); } _onChange(evt, tileValue) { this.setState({ checkedTile: tileValue }); } render() { const { checkedTile } = this.state; return ( <TileGroup value={checkedTile} onChange={this._onChange} tileWidth={120} selectionType={TileGroup.SELECTION_TYPE.SINGLE} > {Array.from({ length: 12 }).map((_, index) => ( <Tile sizeType={Tile.SIZE_TYPE.SMALL} value={`tile-${index}`} key={index} onClick={console.log} > Tile {index + 1} </Tile> ))} </TileGroup> ); }}Tuiles à sélection multiple
<TileGroup selectionType={TileGroup.SELECTION_TYPE.MULTIPLE} tileWidth={120}> {Array.from({ length: 12 }).map((_, index) => ( <Tile onClick={console.log}>Tile {index + 1}</Tile> ))}</TileGroup>Tuiles à sélection multiple contrôlées
class MyComponent extends React.PureComponent { constructor() { super(...arguments); this.state = { checkedTiles: [], }; this._onChange = this._onChange.bind(this); } _onChange(evt, tileValue, checked) { this.setState((state) => { return { checkedTiles: checked ? [...state.checkedTiles, tileValue] : state.checkedTiles.filter((value) => value !== tileValue), }; }); } render() { const { checkedTiles } = this.state; return ( <TileGroup value={checkedTiles} onChange={this._onChange} tileWidth={120} selectionType={TileGroup.SELECTION_TYPE.MULTIPLE} > {Array.from({ length: 12 }).map((_, index) => ( <Tile sizeType={Tile.SIZE_TYPE.SMALL} value={`tile-${index}`} key={index} onClick={console.log} > Tile {index + 1} </Tile> ))} </TileGroup> ); }}Accessoires
OBLIGATOIREnœud | Tuiles à afficher. |
chaîne | Ajoute les noms de classe au composant. Doit être utilisé uniquement à des fins de positionnement et d'espacement. |
chaîne|nombre|chaîne[]|nombre[] | La tuile initiale qui doit être vérifiée. |
énum. | Taille de l'espace entre les tuiles. |
fonction | Fonction appelée lorsqu'une tuile est cochée ou décochée. function ( |
énum. | <One of |
é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 <Array of |
objet | Style en ligne pour un style personnalisé. Doit être utilisé uniquement à des fins de positionnement et d'espacement. |
chaîne | Ajoute un attribut Remarque : vous ne verrez peut-être pas l'attribut |
chaîne|nombre | Représente la largeur des colonnes. Les colonnes ont toujours la même largeur. Il peut s'agir de l'un des types suivants :
|
chaîne|nombre|chaîne[]|nombre[] | La ou les tuiles avec la valeur correspondante seront vérifiées. Peut être une valeur unique ou un éventail de valeurs lorsque le type de sélection est |