CapDrive
Guide d’utilisation

RadialLayout

Répartissez des échelles, des chiffres ou des symboles autour d'un cercle. radius contrôle la distance entre le centre et le centre de mise en page de View, et startAngle et sweepAngle contrôlent la plage de distribution.

Exemple

function main() {
  return (
    <RadialLayout
      radius={70}
      startAngle={-90}
      sweepAngle={270}
      includeEnd={true}
    >
      {[0, 60, 120, 180].map((value) => (
        <Text key={value}>{value}</Text>
      ))}
    </RadialLayout>
  );
}

Utilisation

  • Les rayons placent les centres des enfants, pas les bords du conteneur. includeEnd=false divise en n parts, true en n−1. Sur un cercle complet, les extrémités se superposent. childRotation règle leur orientation.
  • Angles en degrés : 0 à droite, 90 en bas, sweep positif horaire. startAngle modulo 360 ; sweepAngle limité à −360…360. 0 ne dessine rien, ±360 ferme un tour. wrap:360 appartient à startAngle, pas à sweepAngle.
  • Utilisez des identifiants stables pour key afin de conserver l’identité pendant les mises à jour et animations. Un index ne convient pas si les éléments changent d’ordre.

Propriétés

children?ViewContent

Contenu de dessin enfant.

radius?number

Rayon en points : radius pour les deux axes, radiusX/radiusY pour chacun. Les valeurs négatives deviennent 0.

Exemple80
radiusX?number

Rayon en points : radius pour les deux axes, radiusX/radiusY pour chacun. Les valeurs négatives deviennent 0.

Exemple80
radiusY?number

Rayon en points : radius pour les deux axes, radiusX/radiusY pour chacun. Les valeurs négatives deviennent 0.

Exemple80
startAngle?number

Angle de départ en degrés, ramené modulo 360 à chaque échantillonnage.

Exemple-90
sweepAngle?number

Balayage en degrés, limité à -360…360 à chaque échantillonnage. Les valeurs positives vont dans le sens horaire ; wrap est indisponible.

Exemple360
includeEnd?boolean

Inclure l’angle final dans la répartition. Pour un cercle complet, false évite le chevauchement des extrémités.

Exemplefalse
childRotation?"none" | "radial" | "tangent"

none conserve l’orientation ; radial suit le rayon ; tangent ajoute 90 degrés.

Exemple"none"
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?RadialLayoutAnimation[]

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 (
    <RadialLayout
      width={200}
      height={200}
      radius={76}
      startAngle={-135}
      sweepAngle={270}
      includeEnd={true}
    >
      {[0, 50, 100, 150, 200].map((value) => (
        <Text key={value} fontSize={14}>
          {value}
        </Text>
      ))}
    </RadialLayout>
  );
}

Animation

Animation

widthheightpaddingxyopacitybackgroundcornerRadiusblurshadowColorshadowOpacityshadowRadiusshadowXshadowYradiusradiusXradiusYstartAnglesweepAngletransform.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
radius80
startAngle-90
sweepAngle360
includeEndfalse
childRotation"none"

Circle

Arc

RepeatedLayout

Précédent

Circle

Étape suivante

Sur cette page

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