CapDrive
Guide d’utilisation

Text

Afficher la lecture, les unités ou le texte descriptif. La police, la taille de la police, l'alignement, le retour à la ligne et la troncature peuvent être définis ; le contenu est uniformément converti en chaîne et les valeurs vides sont affichées comme vides.

Exemple

function main() {
  return (
    <Text fontSize={32} font="rounded" lineLimit={2} truncationMode="tail">
      Hello, CapDrive
    </Text>
  );
}

Utilisation

  • Le contenu passe par toString() ; null/undefined restent vides. Combinez Symbol et Text avec HStack, sans imbrication dans Text. Limitez width avant lineLimit/truncationMode. minimumScaleFactor=1 interdit la réduction.
  • Les dimensions numériques sont en points. auto mesure le contenu, fill utilise l’espace alloué par le parent. Dimensionnez d’abord le conteneur ; fill et un long texte n’agrandissent pas un parent fixe.

Propriétés

children?TextContent | TextContent[]

Contenu de dessin enfant.

fontSize?number

Taille de police en points.

Exemple14
fontWeight?"ultraLight" | "thin" | "light" | "regular" | "medium" | "semibold" | "bold" | "heavy" | "black"

Graisse de ultraLight à black ; regular est normale.

Exemple"regular"
font?"default" | "rounded" | "monospaced" | "serif"

Police : default, rounded, monospaced ou serif.

Exemple"default"
color?Paint

Couleur de dessin, y compris les couleurs HDR.

ExempleHDR($env.foreground)
alignment?"leading" | "center" | "trailing"

Alignement du texte dans la largeur disponible : leading, center ou trailing.

Exemple"leading"
lineLimit?number | null

Nombre maximal de lignes ; null ou omission permet un retour à la ligne sans limite de nombre.

Exemple1
truncationMode?"head" | "middle" | "tail"

Emplacement du texte supprimé : head, middle ou tail.

Exemple"tail"
minimumScaleFactor?number

Échelle minimale du texte faute de place : 0.01–1 ; 1 interdit la réduction.

Exemple0.5
monospacedDigits?boolean

Chiffres de largeur égale pour éviter les déplacements lors des changements de valeur.

Exempletrue
letterSpacing?number

Espacement supplémentaire des caractères, en points.

Exemple0
contentAnimation?ContentAnimation

Transition de contenu. Choisir un type pris en charge ; duration/delay en secondes.

Exemple{type: "numericText"}
Propriétés communes
width?number | "auto" | "fill"

Largeur en points, taille automatique ou remplissage du parent.

Exemple100
height?number | "auto" | "fill"

Hauteur en points, taille automatique ou remplissage du parent.

Exemple80
padding?number

Marge intérieure du contenu en points.

Exemple0
x?number

Décalage visuel en points : x vers la droite, y vers le bas, sans modifier l’espace de mise en page.

Exemple0
y?number

Décalage visuel en points : x vers la droite, y vers le bas, sans modifier l’espace de mise en page.

Exemple0
transform?ViewTransform

Transformation globale sans changer la mise en page. Translation en points, rotation/inclinaison en degrés, échelle 1 inchangée, ancrages 0–1.

Exemple{rotation: 0}
background?Paint

Fond de couleur ou dégradé ; clear le rend transparent.

Exemple"clear"
opacity?number

Opacité globale du View : 0 transparent, 1 opaque.

Exemple1
cornerRadius?number

Rayon des coins en points.

Exemple0
clipped?boolean

Découpe les dessins dépassant les limites du View.

Exemplefalse
clip?"rectangle" | "ellipse"

Forme de découpe rectangle ou ellipse ; Material accepte aussi false pour la désactiver.

Exemple"rectangle"
mask?View | null

View de masque alpha. Centrée sans modifier la disposition ; null désactive le masque.

Exemple<Circle width="fill" height="fill" background="white"/>
zIndex?number

Ordre entre éléments frères ; les valeurs élevées sont devant.

Exemple0
blur?number

Rayon du flou en points ; 0 le désactive.

Exemple4
innerShadow?DrawingEffect

Couleur, opacité, rayon du flou et décalage x/y de l’effet ; distances en points.

Exemple{color: HDR("black"), opacity: 0.5, radius: 4, x: 0, y: 2}
glow?DrawingEffect

Couleur, opacité, rayon du flou et décalage x/y de l’effet ; distances en points.

Exemple{color: HDR("cyan"), radius: 8, opacity: 0.8}
shadowColor?Color

Couleur de l’ombre extérieure.

ExempleHDR("black")
shadowOpacity?number

Opacité de l’ombre de 0 à 1 ; 0 la masque.

Exemple0
shadowRadius?number

Rayon du flou de l’ombre extérieure, en points.

Exemple4
shadowX?number

Décalage de l’ombre en points : x à droite, y en bas.

Exemple0
shadowY?number

Décalage de l’ombre en points : x à droite, y en bas.

Exemple2
animations?Animation[]

Anime les changements de propriété. duration/delay en secondes ; from/to définissent les extrémités ; repeat/autoreverse la répétition, wrap la période.

Exemple[{property: "opacity", duration: 0.25, curve: "easeInOut"}]
key?string | number

Identifiant stable parmi les éléments frères.

Exemple pratique

function main() {
  return (
    <VStack width={180} spacing={12}>
      <Text width="fill" fontSize={20} lineLimit={2} truncationMode="tail">
        CapDrive — a longer instrument title
      </Text>
      <HStack alignment="firstTextBaseline" spacing={4}>
        <Text fontSize={48} monospacedDigits={true}>
          78
        </Text>
        <Text fontSize={14}>km/h</Text>
      </HStack>
    </VStack>
  );
}

Animation

Animation

widthheightpaddingxyopacitybackgroundcornerRadiusblurshadowColorshadowOpacityshadowRadiusshadowXshadowYfontSizeletterSpacingminimumScaleFactorcolortransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorY

En cas d’omission

Le tableau décrit les omissions vérifiées dans l’implémentation. Les exemples de propriétés ne sont pas des valeurs par défaut. Pour un résultat fixe, passez une valeur explicite ; tailles et couleurs contextuelles ne sont pas constantes.

PropriétésEn cas d’omission
fontSize14
fontWeight"regular"
font"default"
monospacedDigitstrue
minimumScaleFactor1
lineLimitnull
alignment"center"
truncationMode"tail"
colorHDR($env.foreground)

HStack

Symbol

Color / Gradient

Color / Gradient

Précédent

Image

Étape suivante

Sur cette page

ExempleUtilisationPropriétésExemple pratiqueAnimationEn cas d’omissionAPI associées