API Elements Appearance
Stripe Elements prend en charge la personnalisation visuelle, ce qui vous permet de respecter le design de votre site grâce à l’option appearance
. La disposition de chaque Element reste la même, mais vous pouvez modifier les couleurs, les polices, les bordures, les marges intérieures et bien plus encore.
- Commencez par choisir un thème
Lancez-vous dès maintenant en choisissant le thème prédéfini qui s’accorde le mieux à votre site web.
- Personnalisez le thème en utilisant des variables
Définissez des variables telles que fontFamily
et colorPrimary
pour personnaliser les composants apparaissant dans chaque Element.
- Si nécessaire, personnalisez les composants individuels et les états en utilisant des règles.
Pour un contrôle total, spécifiez des propriétés CSS personnalisées pour les composants individuels apparaissant dans le composant Element.
Note
L’API Elements Appearance ne prend pas en charge les Elements de moyens de paiement individuels (par exemple, CardElement
). À la place, utilisez l’objet Style pour personnaliser votre Element.
Thèmes
Commencez à personnaliser des Elements en sélectionnant l’un des thèmes suivants :
stripe
night
flat
const appearance = { theme: 'night' }; // Pass the appearance object to the Elements instance const elements = stripe.elements({clientSecret, appearance});
Variables
Définissez des variables pour personnaliser l’apparence de nombreux composants apparaissant dans chaque élément.
L’option variables
fonctionne comme des variables CSS. Vous pouvez spécifier des valeurs CSS pour chaque variable et référencer d’autres variables avec la syntaxe var(--myVariable)
. Vous pouvez même inspecter le DOM résultant en utilisant l’explorateur DOM de votre navigateur.
const appearance = { theme: 'stripe', variables: { colorPrimary: '#0570de', colorBackground: '#ffffff', colorText: '#30313d', colorDanger: '#df1b41', fontFamily: 'Ideal Sans, system-ui, sans-serif', spacingUnit: '2px', borderRadius: '4px', // See all possible variables below } }; // Pass the appearance object to the Elements instance const elements = stripe.elements({clientSecret, appearance});
Variables fréquemment utilisées
Variable | Description |
---|---|
fontFamily | La famille de polices utilisée dans les Elements. Les Elements prennent en charge les polices personnalisées en transmettant l’option fonts au groupe Elements. |
fontSizeBase | Taille de la police définie en racine de l’Element. Par défaut, les autres variables relatives à la taille de la police, comme fontSizeXs ou fontSizeSm , sont mises à l’échelle à partir de cette valeur en utilisant les unités rem . |
spacingUnit | Unité d’espacement de base à partir de laquelle tous les autres espacements sont dérivés. Augmentez ou diminuez cette valeur pour rendre votre mise en page plus ou moins aérée. |
borderRadius | Rayon de la bordure utilisée pour les onglets, les champs de saisie et les autres éléments du composant Element. |
colorPrimary | Couleur prédominante utilisée dans l’ensemble du composant Element. Définissez-la sur la couleur phare de votre marque. |
colorBackground | Couleur utilisée pour l’arrière-plan des champs de saisie, des onglets et des autres éléments du composant Element. |
colorText | Couleur de texte par défaut utilisée dans le composant Element. |
colorDanger | Couleur utilisée pour signaler des erreurs ou des actions de suppression dans le composant Element. |
Variables rarement utilisées
Variable | Description |
---|---|
fontSmooth | Les paramètres d’anticrénelage du texte à utiliser dans l’Element : always , auto ou never . |
fontVariantLigatures | Le paramètre font-variant-ligatures du texte dans l’Element. |
fontVariationSettings | Le paramètre font-variation-settings du texte dans l’Element. |
fontWeightLight | Graisse de la police utilisée pour le texte clair. |
fontWeightNormal | Graisse de la police utilisée pour le contenu texte standard. |
fontWeightMedium | Graisse de la police utilisée pour le texte de taille moyenne. |
fontWeightBold | Graisse de la police utilisée pour le texte en gras. |
fontLineHeight | Le paramètre de hauteur de ligne du texte dans l’Element. |
fontSizeXl | La taille de la police pour le texte de très grande taille dans l’Element. Par défaut, elle est mise à l’échelle à partir de var(--fontSizeBase) en utilisant les unités rem . |
fontSizeLg | La taille de la police pour le texte de grande taille dans l’Element. Par défaut, elle est mise à l’échelle à partir de var(--fontSizeBase) en utilisant les unités rem . |
fontSizeSm | La taille de la police pour le texte de petite taille dans l’Element. Par défaut, elle est mise à l’échelle à partir de var(--fontSizeBase) en utilisant les unités rem . |
fontSizeXs | La taille de la police pour le texte de très petite taille (XS) dans l’Element. Par défaut, elle est mise à l’échelle à partir de var(--fontSizeBase) en utilisant les unités rem . |
fontSize2Xs | La taille de la police pour le texte de très petite taille (XXS) dans l’Element. Par défaut, elle est mise à l’échelle à partir de var(--fontSizeBase) en utilisant les unités rem . |
fontSize3Xs | La taille de la police pour le texte de très petite taille (XXXS) dans l’Element. Par défaut, elle est mise à l’échelle à partir de var(--fontSizeBase) en utilisant les unités rem . |
logoColor | Variante du logo à afficher par défaut : soit light , soit dark . |
tabLogoColor | Variante du logo à afficher dans les composants .Tab : soit light , soit dark . |
tabLogoSelectedColor | Variante du logo à afficher dans le composant .Tab--selected : soit light , soit dark . |
blockLogoColor | Variante du logo à afficher dans les composants .Block : soit light , soit dark . |
colorSuccess | Couleur utilisée pour signaler des actions positives ou des résultats positifs dans le composant Element. |
colorWarning | Couleur utilisée pour signaler des éventuelles actions de suppression dans le composant Element. |
accessibleColorOnColorPrimary | Couleur du texte qui apparaît sur un arrière-plan var(--colorPrimary) . |
accessibleColorOnColorBackground | Couleur du texte qui apparaît sur un arrière-plan var(--colorBackground) . |
accessibleColorOnColorSuccess | Couleur du texte qui apparaît sur un arrière-plan var(--colorSuccess) . |
accessibleColorOnColorDanger | Couleur du texte qui apparaît sur un arrière-plan var(--colorDanger) . |
accessibleColorOnColorWarning | Couleur du texte qui apparaît sur un arrière-plan var(--colorWarning) . |
colorTextSecondary | Couleur utilisée pour le texte de moindre importance. Par exemple, cette couleur peut être utilisée pour l’étiquette d’un onglet qui n’est pas actuellement sélectionné. |
colorTextPlaceholder | Couleur utilisée pour le texte de l’espace de saisie dans le composant Element. |
iconColor | Couleur par défaut utilisée pour les icônes du composant Element (par exemple, l’icône figurant dans l’onglet Carte). |
iconHoverColor | Couleur des icônes survolées. |
iconCardErrorColor | La couleur de l’icône de carte lorsqu’elle indique un état d’erreur. |
iconCardCvcColor | La couleur de la variante CVC de l’icône de carte. |
iconCardCvcErrorColor | La couleur de la variante CVC de l’icône de carte lorsque la saisie du champ CVC est invalide. |
iconCheckmarkColor | Couleur des coches affichées dans des composants comme .Checkbox . |
iconChevronDownColor | La couleur des icônes de flèches affichées dans les entrées à sélectionner. |
iconChevronDownHoverColor | Couleur des icônes de flèche lorsqu’elles sont survolées. |
iconCloseColor | Couleur des icônes de fermeture, utilisées pour indiquer le rejet ou la clôture d’une action. |
iconCloseHoverColor | Couleur des icônes de fermeture lorsqu’elles sont survolées. |
iconLoadingIndicatorColor | Couleur de l’indicateur d’attente dans les indicateurs de chargement. |
iconMenuColor | Couleur des icônes de menu utilisées pour signaler un ensemble d’actions supplémentaires. |
iconMenuHoverColor | Couleur des icônes de menu lorsqu’elles sont survolées. |
iconMenuOpenColor | Couleur des icônes de menu lorsqu’elles sont ouvertes. |
iconPasscodeDeviceColor | Couleur de l’icône du dispositif de mot de passe, utilisée pour indiquer qu’un message a été envoyé sur l’appareil mobile de l’utilisateur. |
iconPasscodeDeviceHoverColor | Couleur de l’icône du dispositif de mot de passe lorsqu’elle est survolée. |
iconPasscodeDeviceNotificationColor | Couleur de l’indicateur de notification affiché au-dessus de l’icône du dispositif de mot de passe. |
iconRedirectColor | La couleur de l’icône de redirection qui apparaît pour les moyens de paiement basés sur la redirection. |
tabIconColor | La couleur des icônes qui apparaissent dans un onglet. |
tabIconHoverColor | La couleur des icônes qui apparaissent dans un onglet lorsque cet onglet est survolé. |
tabIconSelectedColor | La couleur des icônes qui apparaissent dans un onglet lorsque celui-ci est sélectionné. |
tabIconMoreColor | La couleur de l’icône qui apparaît dans le déclencheur pour le menu des moyens de paiement supplémentaires. |
tabIconMoreHoverColor | La couleur de l’icône qui apparaît dans le déclencheur pour le menu des moyens de paiement supplémentaires lorsque ce déclencheur est survolé. |
accordionItemSpacing | Espacement vertical entre les composants .AccordionItem . S’applique uniquement lorsque la valeur de l’attribut spacedAccordionItems est true . |
gridColumnSpacing | Espacement entre les colonnes de la grille utilisée pour la mise en page du composant Element. |
gridRowSpacing | Espacement entre les lignes de la grille utilisée pour la mise en page du composant Element. |
pickerItemSpacing | Espacement entre les composants .PickerItem affichés dans le composant .Picker . |
tabSpacing | Espacement horizontal entre les composants .Tab . |
Règles
L’option rules
associe des sélecteurs de type CSS à des propriétés CSS, ce qui permet une personnalisation approfondie des composants individuels. Après avoir défini votre theme
et vos variables
, utilisez des rules
pour intégrer de manière harmonieuse des Elements à votre site.
const appearance = { rules: { '.Tab': { border: '1px solid #E0E6EB', boxShadow: '0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(18, 42, 66, 0.02)', }, '.Tab:hover': { color: 'var(--colorText)', }, '.Tab--selected': { borderColor: '#E0E6EB', boxShadow: '0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(18, 42, 66, 0.02), 0 0 0 2px var(--colorPrimary)', }, '.Input--invalid': { boxShadow: '0 1px 1px 0 rgba(0, 0, 0, 0.07), 0 0 0 2px var(--colorDanger)', }, // See all supported class names and selector syntax below } }; // Pass the appearance object to the Elements instance const elements = stripe.elements({clientSecret, appearance});
Toutes les règles
Le sélecteur d’une règle peut cibler n’importe quel nom de classe publique dans l’Element, ainsi que les états, pseudo-classes et pseudo-éléments pris en charge pour chaque classe. Voici quelques exemples de sélecteurs valides :
.Tab, .Label, .Input
.Tab:focus
.Input--invalid, .Label--invalid
.Input::placeholder
Les sélecteurs suivants ne sont pas valides :
.p-SomePrivateClass, img
, seuls les noms de classes publiques peuvent être ciblés.Tab .TabLabel
, les relations ancêtre-descendants des sélecteurs ne sont pas prises en charge.Tab--invalid
, la classe.Tab
ne prend pas en charge l’état--invalid
Chaque nom de classe utilisé dans un sélecteur prend en charge une liste des propriétés CSS autorisées, que vous spécifiez à l’aide de la notation camel case (par exemple, boxShadow
pour la propriété box-shadow).
Voici la liste complète des noms de classes pris en charge et des états, pseudo-classes et pseudo-éléments correspondants.
Onglets
Nom de classe | États | Pseudo-classes | Pseudo-éléments |
---|---|---|---|
.Tab | --selected | :hover , :focus , :active , :disabled | |
.TabIcon | --selected | :hover , :focus , :active , :disabled | |
.TabLabel | --selected | :hover , :focus , :active , :disabled |
Entrées de formulaire - Étiquettes supérieures
Nom de classe | États | Pseudo-classes | Pseudo-éléments |
---|---|---|---|
.Label | --empty , --invalid | ||
.Input | --empty , --invalid | :hover , :focus , :disabled , :autofill | ::placeholder , ::selection |
.Error |
Entrées de formulaire - Étiquettes flottantes
Note
Les étiquettes flottantes peuvent être activées en tant qu’option de configuration supplémentaire.
Nom de classe | États | Pseudo-classes | Pseudo-éléments |
---|---|---|---|
.Label | --empty , --invalid , --floating , --resting | ||
.Input | --empty , --invalid | :hover , :focus , :disabled , :autofill | ::placeholder , ::selection |
.Error |
Bloc
Nom de classe | États | Pseudo-classes | Pseudo-éléments |
---|---|---|---|
.Block | |||
.BlockDivider | |||
.BlockAction | --negative | :hover , :focus , :active |
Saisie de code
Nom de classe | États | Pseudo-classes | Pseudo-éléments |
---|---|---|---|
.CodeInput | :hover , :focus , :disabled |
Case à cocher
Nom de classe | États | Pseudo-classes | Pseudo-éléments |
---|---|---|---|
.Checkbox | --checked | ||
.CheckboxLabel | --checked | :hover , :focus , :focus-visible | |
.CheckboxInput | --checked | :hover , :focus , :focus-visible |
Liste déroulante
Nom de classe | États | Pseudo-classes | Pseudo-éléments |
---|---|---|---|
.Dropdown | |||
.DropdownItem | --highlight | :active |
Switch
Nom de classe | États | Pseudo-classes | Pseudo-éléments |
---|---|---|---|
.Switch | --active | :hover | |
.SwitchControl | :hover |
Picker
Nom de classe | États | Pseudo-classes | Pseudo-éléments |
---|---|---|---|
.PickerItem | --selected , --highlight , --new , --disabled | :hover , :focus , :active | |
.PickerAction | :hover , :focus , :active |
Conseil pour l’expérience utilisateur
Assurez-vous que votre état .PickerItem
actif se démarque des autres états.
À FAIRE Utilisez une couleur primaire, une graisse et/ou un contour visibles et très contrastés pour distinguer l’état actif que votre client a déjà sélectionné. | À NE PAS FAIRE N’utilisez pas deux options de même graisse ni des couleurs peu contrastées pour vos états .PickerItem, car il serait plus difficile de distinguer lequel est actif. |
Menu
Nom de classe | États | Pseudo-classes | Pseudo-éléments |
---|---|---|---|
.Menu | |||
.MenuIcon | --open | :hover | |
.MenuAction | --negative | :hover , :focus , :active |
Accordéon
Nom de classe | États | Pseudo-classes | Pseudo-éléments |
---|---|---|---|
.AccordionItem | --selected | :hover , :focus-visible |
Propriétés CSS prises en charge
Propriété CSS | Classes prises en charge |
---|---|
-moz-osx-font-smoothing | AccordionItem , Action , BlockAction , Button , Checkbox , CheckboxLabel , CodeInput , DropdownItem , Error , Input , Label , Link , MenuAction , PickerAction , PickerItem , RedirectText , SecondaryLink , Tab , TabLabel , TermsLink , TermsText , Text |
-webkit-font-smoothing | AccordionItem , Action , BlockAction , Button , Checkbox , CheckboxLabel , CodeInput , DropdownItem , Error , Input , Label , Link , MenuAction , PickerAction , PickerItem , RedirectText , SecondaryLink , Tab , TabLabel , TermsLink , TermsText , Text |
-webkit-text-fill-color | AccordionItem , Action , BlockAction , Button , Checkbox , CheckboxLabel , CodeInput , DropdownItem , Error , Input , Label , Link , MenuAction , PickerAction , PickerItem , RedirectText , SecondaryLink , Tab , TabLabel , TermsLink , TermsText , Text |
backgroundColor | AccordionItem , Action , Block , BlockAction , BlockDivider , Button , CheckboxInput , CodeInput , DropdownItem , Error , Input , InputDivider , MenuAction , MenuIcon , PickerAction , PickerItem , Switch , Tab |
border | AccordionItem , Action , Block , BlockAction , Button , CheckboxInput , CodeInput , Dropdown , DropdownItem , Error , Input , MenuAction , MenuIcon , PickerAction , PickerItem , RedirectText , Switch , SwitchControl , Tab , TermsText , Text |
borderBottom | AccordionItem , Action , Block , BlockAction , Button , CheckboxInput , CodeInput , Dropdown , DropdownItem , Error , Input , MenuAction , MenuIcon , PickerAction , PickerItem , RedirectText , Switch , SwitchControl , Tab , TermsText , Text |
borderBottomColor | AccordionItem , Action , Block , BlockAction , Button , CheckboxInput , CodeInput , Dropdown , DropdownItem , Error , Input , MenuAction , MenuIcon , PickerAction , PickerItem , RedirectText , Switch , SwitchControl , Tab , TermsText , Text |
borderBottomLeftRadius | AccordionItem , Action , Block , BlockAction , Button , CheckboxInput , CodeInput , Dropdown , DropdownItem , Error , Input , MenuAction , MenuIcon , PickerAction , PickerItem , RedirectText , Switch , SwitchControl , Tab , TermsText , Text |
borderBottomRightRadius | AccordionItem , Action , Block , BlockAction , Button , CheckboxInput , CodeInput , Dropdown , DropdownItem , Error , Input , MenuAction , MenuIcon , PickerAction , PickerItem , RedirectText , Switch , SwitchControl , Tab , TermsText , Text |
borderBottomStyle | AccordionItem , Action , Block , BlockAction , Button , CheckboxInput , CodeInput , Dropdown , DropdownItem , Error , Input , MenuAction , MenuIcon , PickerAction , PickerItem , RedirectText , Switch , SwitchControl , Tab , TermsText , Text |
borderBottomWidth | AccordionItem , Action , Block , BlockAction , Button , CheckboxInput , CodeInput , Dropdown , DropdownItem , Error , Input , MenuAction , MenuIcon , PickerAction , PickerItem , RedirectText , Switch , SwitchControl , Tab , TermsText , Text |
borderColor | AccordionItem , Action , Block , BlockAction , Button , CheckboxInput , CodeInput , Dropdown , DropdownItem , Error , Input , MenuAction , MenuIcon , PickerAction , PickerItem , RedirectText , Switch , SwitchControl , Tab , TermsText , Text |
borderLeft | AccordionItem , Action , Block , BlockAction , Button , CheckboxInput , CodeInput , Dropdown , DropdownItem , Error , Input , MenuAction , MenuIcon , PickerAction , PickerItem , RedirectText , Switch , SwitchControl , Tab , TermsText , Text |
borderLeftColor | AccordionItem , Action , Block , BlockAction , Button , CheckboxInput , CodeInput , Dropdown , DropdownItem , Error , Input , MenuAction , MenuIcon , PickerAction , PickerItem , RedirectText , Switch , SwitchControl , Tab , TermsText , Text |
borderLeftStyle | AccordionItem , Action , Block , BlockAction , Button , CheckboxInput , CodeInput , Dropdown , DropdownItem , Error , Input , MenuAction , MenuIcon , PickerAction , PickerItem , RedirectText , Switch , SwitchControl , Tab , TermsText , Text |
borderLeftWidth | AccordionItem , Action , Block , BlockAction , Button , CheckboxInput , CodeInput , Dropdown , DropdownItem , Error , Input , MenuAction , MenuIcon , PickerAction , PickerItem , RedirectText , Switch , SwitchControl , Tab , TermsText , Text |
borderRadius | AccordionItem , Action , Block , BlockAction , Button , CheckboxInput , CodeInput , Dropdown , DropdownItem , Error , Input , InputCloseIcon , Link , MenuAction , MenuIcon , PasscodeCloseIcon , PasscodeShowIcon , PickerAction , PickerItem , RedirectText , SecondaryLink , Switch , SwitchControl , Tab , TermsLink , TermsText , Text |
borderRight | AccordionItem , Action , Block , BlockAction , Button , CheckboxInput , CodeInput , Dropdown , DropdownItem , Error , Input , MenuAction , MenuIcon , PickerAction , PickerItem , RedirectText , Switch , SwitchControl , Tab , TermsText , Text |
borderRightColor | AccordionItem , Action , Block , BlockAction , Button , CheckboxInput , CodeInput , Dropdown , DropdownItem , Error , Input , MenuAction , MenuIcon , PickerAction , PickerItem , RedirectText , Switch , SwitchControl , Tab , TermsText , Text |
borderRightStyle | AccordionItem , Action , Block , BlockAction , Button , CheckboxInput , CodeInput , Dropdown , DropdownItem , Error , Input , MenuAction , MenuIcon , PickerAction , PickerItem , RedirectText , Switch , SwitchControl , Tab , TermsText , Text |
borderRightWidth | AccordionItem , Action , Block , BlockAction , Button , CheckboxInput , CodeInput , Dropdown , DropdownItem , Error , Input , MenuAction , MenuIcon , PickerAction , PickerItem , RedirectText , Switch , SwitchControl , Tab , TermsText , Text |
borderStyle | AccordionItem , Action , Block , BlockAction , Button , CheckboxInput , CodeInput , Dropdown , DropdownItem , Error , Input , MenuAction , MenuIcon , PickerAction , PickerItem , RedirectText , Switch , SwitchControl , Tab , TermsText , Text |
borderTop | AccordionItem , Action , Block , BlockAction , Button , CheckboxInput , CodeInput , Dropdown , DropdownItem , Error , Input , MenuAction , MenuIcon , PickerAction , PickerItem , RedirectText , Switch , SwitchControl , Tab , TermsText , Text |
borderTopColor | AccordionItem , Action , Block , BlockAction , Button , CheckboxInput , CodeInput , Dropdown , DropdownItem , Error , Input , MenuAction , MenuIcon , PickerAction , PickerItem , RedirectText , Switch , SwitchControl , Tab , TermsText , Text |
borderTopLeftRadius | AccordionItem , Action , Block , BlockAction , Button , CheckboxInput , CodeInput , Dropdown , DropdownItem , Error , Input , MenuAction , MenuIcon , PickerAction , PickerItem , RedirectText , Switch , SwitchControl , Tab , TermsText , Text |
borderTopRightRadius | AccordionItem , Action , Block , BlockAction , Button , CheckboxInput , CodeInput , Dropdown , DropdownItem , Error , Input , MenuAction , MenuIcon , PickerAction , PickerItem , RedirectText , Switch , SwitchControl , Tab , TermsText , Text |
borderTopStyle | AccordionItem , Action , Block , BlockAction , Button , CheckboxInput , CodeInput , Dropdown , DropdownItem , Error , Input , MenuAction , MenuIcon , PickerAction , PickerItem , RedirectText , Switch , SwitchControl , Tab , TermsText , Text |
borderTopWidth | AccordionItem , Action , Block , BlockAction , Button , CheckboxInput , CodeInput , Dropdown , DropdownItem , Error , Input , MenuAction , MenuIcon , PickerAction , PickerItem , RedirectText , Switch , SwitchControl , Tab , TermsText , Text |
borderWidth | AccordionItem , Action , Block , BlockAction , Button , CheckboxInput , CodeInput , Dropdown , DropdownItem , Error , Input , MenuAction , MenuIcon , PickerAction , PickerItem , RedirectText , Switch , SwitchControl , Tab , TermsText , Text |
boxShadow | AccordionItem , Action , Block , BlockAction , Button , CheckboxInput , CodeInput , Dropdown , DropdownItem , Error , Input , InputCloseIcon , Link , MenuAction , MenuIcon , PasscodeCloseIcon , PasscodeShowIcon , PickerAction , PickerItem , SecondaryLink , Switch , SwitchControl , Tab , TermsLink |
color | AccordionItem , Action , BlockAction , Button , Checkbox , CheckboxLabel , CodeInput , DropdownItem , Error , Input , Label , Link , MenuAction , PickerAction , PickerItem , RedirectText , SecondaryLink , Tab , TabIcon , TabLabel , TermsLink , TermsText , Text |
fill | Action , BlockAction , Button , CodeInput , DropdownItem , Error , Input , MenuAction , MenuIcon , PickerAction , PickerItem , SwitchControl , Tab , TabIcon |
fontFamily | AccordionItem , Action , BlockAction , Button , Checkbox , CheckboxLabel , CodeInput , DropdownItem , Error , Input , Label , Link , MenuAction , PickerAction , PickerItem , RedirectText , SecondaryLink , Tab , TabLabel , TermsLink , TermsText , Text |
fontSize | AccordionItem , Action , BlockAction , Button , Checkbox , CheckboxLabel , CodeInput , DropdownItem , Error , Input , Label , Link , MenuAction , PickerAction , PickerItem , RedirectText , SecondaryLink , Switch , Tab , TabLabel , TermsLink , TermsText , Text |
fontVariant | AccordionItem , Action , BlockAction , Button , Checkbox , CheckboxLabel , CodeInput , DropdownItem , Error , Input , Label , Link , MenuAction , PickerAction , PickerItem , RedirectText , SecondaryLink , Tab , TabLabel , TermsLink , TermsText , Text |
fontWeight | AccordionItem , Action , BlockAction , Button , Checkbox , CheckboxLabel , CodeInput , DropdownItem , Error , Input , Label , Link , MenuAction , PickerAction , PickerItem , RedirectText , SecondaryLink , Tab , TabLabel , TermsLink , TermsText , Text |
letterSpacing | AccordionItem , Action , BlockAction , Button , Checkbox , CheckboxLabel , CodeInput , DropdownItem , Error , Input , Label , Link , MenuAction , PickerAction , PickerItem , RedirectText , SecondaryLink , Tab , TabLabel , TermsLink , TermsText , Text |
lineHeight | AccordionItem , Action , BlockAction , Button , Checkbox , CheckboxLabel , CodeInput , DropdownItem , Error , Input , Label , Link , MenuAction , PickerAction , PickerItem , RedirectText , SecondaryLink , Tab , TabLabel , TermsLink , TermsText , Text |
margin | Action , BlockAction , Button , CodeInput , DropdownItem , Error , Input , Label , MenuAction , PickerAction , PickerItem , Tab |
marginBottom | Action , BlockAction , Button , CodeInput , DropdownItem , Error , Input , Label , MenuAction , PickerAction , PickerItem , Tab |
marginLeft | Action , BlockAction , Button , CodeInput , DropdownItem , Error , Input , Label , MenuAction , PickerAction , PickerItem , Tab |
marginRight | Action , BlockAction , Button , CodeInput , DropdownItem , Error , Input , Label , MenuAction , PickerAction , PickerItem , Tab |
marginTop | Action , BlockAction , Button , CodeInput , DropdownItem , Error , Input , Label , MenuAction , PickerAction , PickerItem , Tab |
opacity | Label |
outline | AccordionItem , Action , Block , BlockAction , Button , CheckboxInput , CodeInput , Dropdown , DropdownItem , Error , Input , InputCloseIcon , Link , MenuAction , MenuIcon , PasscodeCloseIcon , PasscodeShowIcon , PickerAction , PickerItem , SecondaryLink , Switch , SwitchControl , Tab , TermsLink |
outlineOffset | AccordionItem , Action , Block , BlockAction , Button , CheckboxInput , CodeInput , Dropdown , DropdownItem , Error , Input , InputCloseIcon , Link , MenuAction , MenuIcon , PasscodeCloseIcon , PasscodeShowIcon , PickerAction , PickerItem , SecondaryLink , Switch , SwitchControl , Tab , TermsLink |
padding | AccordionItem , Action , Block , BlockAction , Button , CodeInput , DropdownItem , Error , Input , Label , Menu , MenuAction , MenuIcon , PickerAction , PickerItem , RedirectText , Tab , TabIcon , TabLabel , TermsText , Text |
paddingBottom | AccordionItem , Action , Block , BlockAction , Button , CodeInput , DropdownItem , Error , Input , Label , Menu , MenuAction , MenuIcon , PickerAction , PickerItem , RedirectText , Tab , TabIcon , TabLabel , TermsText , Text |
paddingLeft | AccordionItem , Action , Block , BlockAction , Button , CodeInput , DropdownItem , Error , Input , Label , Menu , MenuAction , MenuIcon , PickerAction , PickerItem , RedirectText , Tab , TabIcon , TabLabel , TermsText , Text |
paddingRight | AccordionItem , Action , Block , BlockAction , Button , CodeInput , DropdownItem , Error , Input , Label , Menu , MenuAction , MenuIcon , PickerAction , PickerItem , RedirectText , Tab , TabIcon , TabLabel , TermsText , Text |
paddingTop | AccordionItem , Action , Block , BlockAction , Button , CodeInput , DropdownItem , Error , Input , Label , Menu , MenuAction , MenuIcon , PickerAction , PickerItem , RedirectText , Tab , TabIcon , TabLabel , TermsText , Text |
textDecoration | AccordionItem , Action , BlockAction , Button , Checkbox , CheckboxLabel , CodeInput , DropdownItem , Error , Input , Label , Link , MenuAction , PickerAction , PickerItem , RedirectText , SecondaryLink , Tab , TabLabel , TermsLink , TermsText , Text |
textShadow | AccordionItem , Action , BlockAction , Button , Checkbox , CheckboxLabel , CodeInput , DropdownItem , Error , Input , Label , Link , MenuAction , PickerAction , PickerItem , RedirectText , SecondaryLink , Tab , TabLabel , TermsLink , TermsText , Text |
textTransform | AccordionItem , Action , BlockAction , Button , Checkbox , CheckboxLabel , CodeInput , DropdownItem , Error , Input , Label , Link , MenuAction , PickerAction , PickerItem , RedirectText , SecondaryLink , Tab , TabLabel , TermsLink , TermsText , Text |
transition | Action , Block , BlockAction , Button , CheckboxInput , CheckboxLabel , CodeInput , Dropdown , DropdownItem , Error , Icon , Input , InputCloseIcon , Label , Link , MenuAction , MenuIcon , PasscodeCloseIcon , PasscodeShowIcon , PickerAction , PickerItem , RedirectText , SecondaryLink , Switch , SwitchControl , Tab , TabIcon , TabLabel , TermsLink , TermsText , Text |
Voici quelques exceptions aux propriétés ci-dessus :
-webkit-text-fill-color
n’est pas compatible avec les pseudo-classes
Autres options de configuration
Outre les themes
, les variables
et les rules
, nous proposons des options de configuration supplémentaires pour personnaliser l’apparence des Elements.
Vous pouvez les personnaliser en les ajoutant à l’objet Appearance :
const appearance = { labels: 'floating', // other configurations such as `theme`, `variables` and `rules`... }
À l’heure actuelle, nous prenons en charge les options suivantes :
Configuration | Description |
---|---|
labels | Active le basculement entre les étiquettes situées au-dessus des champs du formulaire et les étiquettes flottantes au sein des champs ; cela peut être soit above , soit floating . |