Spacing

Spacing

Fournit un espacement à tout composant enveloppé. L'espacement est fourni sous la forme d'un uplet pouvant contenir zéro, une, deux, trois ou quatre valeurs. Chacune de ces valeurs provient de la propriété statique TYPE.

La structure de l'uplet est très similaire au fonctionnement des propriétés margin ou padding : spécifier une valeur les réplique sur les quatre côtés, deux sur top/bottom et left/right, etc. Si vous souhaitez omettre une valeur spécifique tout en transmettant d'autres valeurs, vous pouvez utiliser OMIT comme espace réservé. L'espace sur le côté (ou les côtés) où il est utilisé sera laissé intact.

D’autres composants du SDK ont des capacités d’espacement intégrées. Si vous souhaitez reproduire la même capacité sur votre propre composant, vous pouvez utiliser Spacing.add et transmettre le composant ; le composant renvoyé par la méthode contiendra l'accessoire type ainsi que les statiques.

Usage

import { Spacing } from 'nr1'

Accessoires

children

nœud

Élément dans l'espace. L'espacement ne peut être appliqué qu'à un seul élément à la fois ; pour espacer plusieurs éléments, chacun d'eux doit être enveloppé individuellement.

className

chaîne

Ajoute les noms de classe au composant.

style

objet

Style en ligne pour un style personnalisé.

type

é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 TYPE.OMIT.

<Array of<One ofSpacing.TYPE.EXTRA_LARGE, Spacing.TYPE.LARGE, Spacing.TYPE.MEDIUM, Spacing.TYPE.NONE, Spacing.TYPE.OMIT, Spacing.TYPE.SMALL,
>
>

Basique

<Spacing type={[Spacing.TYPE.MEDIUM]}>
  <Button>Spaced button</Button>
</Spacing>;

Omettre les marges

<Spacing type={[Spacing.TYPE.OMIT, Spacing.TYPE.LARGE]}>
  <Button>Spaced button (only left and right)</Button>
</Spacing>;

Méthodes

`Spacing.add`

function (Base: React.ComponentType Class or function component
) => React.ComponentType

Cette traduction automatique est fournie pour votre commodité.

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