CapDrive
Guide d’utilisation

Material

Dessinez la surface d'un matériau en verre dépoli, qui peut être superposée avec du texte et des graphiques pour former une zone de contenu. type prend actuellement en charge le givré, style contrôle l'épaisseur du matériau ; l'effet visible dépend du contenu qui se cache derrière.

Exemple

function main() {
  return (
    <ZStack>
      <Material type="frosted" style="thin" />
      <Text>CapDrive</Text>
    </ZStack>
  );
}

Utilisation

  • Material est une surface sans children ni padding. Superposez le texte avec ZStack ; le verre dépend du contenu derrière. type accepte actuellement frosted, style son épaisseur, pas une texture d’image.
  • mask utilise l’alpha : opaque conserve, transparent masque. Noir et blanc de même alpha sont équivalents. Le masque ne participe pas à la disposition ; donnez-lui une taille et distinguez-le de clipped.

Propriétés

type"frosted"

Type de matériau ; frosted produit actuellement un verre dépoli natif.

Exemple"frosted"
style?"ultraThin" | "thin" | "regular" | "thick" | "ultraThick" | "bar"

Aspect de ultraThin à ultraThick ; bar utilise le matériau des barres système.

Exemple"ultraThin"
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
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?boolean | "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 (
    <ZStack width={200} height={100}>
      <HStack spacing={0} width="fill" height="fill">
        <Rectangle width="fill" height="fill" background="blue" />
        <Rectangle width="fill" height="fill" background="orange" />
      </HStack>
      <Material
        width={160}
        height={64}
        type="frosted"
        style="thin"
        cornerRadius={16}
      />
      <Text fontSize={28}>78 km/h</Text>
    </ZStack>
  );
}

Animation

Animation

widthheightxyopacitybackgroundcornerRadiusblurshadowColorshadowOpacityshadowRadiusshadowXshadowYtransform.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
type"frosted"
style"ultraThin"

ZStack

Image

ZStack

Précédent

CardContent

Étape suivante

Sur cette page

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