CapDrive
Guide d’utilisation

RepeatedLayout

Duplique périodiquement un motif dans la fenêtre de recadrage, adapté aux balances et boussoles en mouvement continu. period définit l'intervalle de répétition, value et anchor déterminent où la valeur actuelle est alignée.

Exemple

function main() {
  return (
    <RepeatedLayout axis="horizontal" period={120} value={76} anchor={0.5}>
      <Text width={120}>N</Text>
    </RepeatedLayout>
  );
}

Utilisation

  • children décrit un motif, period sa répétition. value s’aligne sur anchor ; l’augmenter déplace le motif en sens inverse. offset ajoute des points. both répète sur deux axes, réglables par {x,y}. Le cadre découpe toujours le contenu.
  • x/y et transform s’appliquent après la disposition. Déplacer un enfant ne repousse pas ses voisins ; utilisez spacing ou Spacer. Rotation et échelle affectent le dessin complet.

Propriétés

children?ViewContent

Contenu de dessin enfant.

axis?"horizontal" | "vertical" | "both"

Répétition horizontal, vertical ou both ; both produit une grille.

Exemple"horizontal"
period?RepeatAxisValue

Distance entre copies en points ; x/y règle séparément les axes.

Exemple360
value?RepeatAxisValue

Coordonnée du contenu placée sur anchor. Une hausse déplace les copies en sens inverse ; ce n’est pas une vitesse.

Exemple$data.current.heading?.direction ?? 0
anchor?RepeatAxisValue

Position dans la zone visible : 0 début, 0.5 milieu, 1 fin.

Exemple0.5
offset?RepeatAxisValue

Décalage supplémentaire en points après alignement de value sur anchor.

Exemple0
alignment?"topLeading" | "top" | "topTrailing" | "leading" | "center" | "trailing" | "bottomLeading" | "bottom" | "bottomTrailing"

Alignement des enfants superposés parmi neuf positions de bord et de centre.

Exemple"topLeading"
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
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 (
    <RepeatedLayout
      width={240}
      height={140}
      axis="both"
      period={{ x: 80, y: 50 }}
      value={{ x: 40, y: 25 }}
      anchor={{ x: 0.5, y: 0.5 }}
      alignment="center"
    >
      <Symbol name="plus" fontSize={20} color={$env.accent} />
    </RepeatedLayout>
  );
}

Animation

Animation

widthheightpaddingxyopacitybackgroundcornerRadiusblurshadowColorshadowOpacityshadowRadiusshadowXshadowYperiodvalueanchoroffsettransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorYperiod.xperiod.yvalue.xvalue.yanchor.xanchor.yoffset.xoffset.y

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
axis"horizontal"
period360
value0
anchor0.5
offset0
alignment"topLeading"

HStack

Animation

Symbol

Précédent

RadialLayout

Étape suivante

Sur cette page

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