Mise en page

HUD viewfinder frame

HUD viewfinder frame: Un cadre de type viseur pour tout contenu, avec des repères d’angle qui se mettent en place, un code temporel qui défile, de petites étiquettes et une barre indiquant la progression.

Every frame on purpose.

Brackets snap in when the frame enters view. Move the pointer to lean them.

Utiliser HUD viewfinder frame

HUD viewfinder frame utilise le format d’aperçu « large » avec le thème « clair/sombre ».

Personnaliser l’aperçu

Ces réglages sont transmis à la démo. Les valeurs et limites décrivent l’aperçu ; consultez l’implémentation pour connaître l’ensemble des props.

Réglage	Type	Valeur initiale	Limites de l’aperçu
`label`	`text`	`fb / motion reel`	Jusqu’à 32 caractères
`code`	`text`		Jusqu’à 24 caractères
`footer`	`text`	`easing study, take 3`	Jusqu’à 32 caractères
`fps`	`select`	`24`	Options : 24, 25, 30
`loopSeconds`	`number`	`12`	De 4 à 60 ; pas de 1
`accent`	`color`	`#FF3A22`	Aucune autre limite dans les métadonnées.
`recording`	`boolean`	`true`	Aucune autre limite dans les métadonnées.
`crosshair`	`boolean`	`false`	Aucune autre limite dans les métadonnées.

Quels frameworks sont disponibles pour HUD viewfinder frame ?

HUD viewfinder frame est disponible pour React, Vue, Svelte, Astro, HTML. L’aperçu utilise React ; les observations sur le code concernent index.tsx. Vérifiez les interactions dans le portage choisi avant de vous y fier.

Quelles sont les dépendances de HUD viewfinder frame ?

Les métadonnées React n’indiquent aucune dépendance npm supplémentaire à React.

Quels détails d’accessibilité sont visibles dans HUD viewfinder frame ?

Le code React de HUD viewfinder frame contient : attributs et gestionnaires (aria-hidden). Il s’agit d’observations du code. Vérifiez les noms accessibles, l’ordre du focus et le comportement au clavier dans la page assemblée.

Comment HUD viewfinder frame gère-t-il la réduction des animations ?

HUD viewfinder frame lit la préférence de mouvement dans son code React via matchMedia(prefers-reduced-motion). Expressions de index.tsx dépendant de cette préférence: armed || moving || advancing ? -1 : runtime.focusWait; u: armed && !reduced ? clamp((entrance - i * 0.05) / 0.44) : 1. Vérifiez l’implémentation complète, les styles partagés et le portage choisi avec la réduction des animations activée ; ces observations ne garantissent pas l’arrêt de toutes les animations.

Connectez votre agent

Composants ouverts similaires

Image fixe du composant Curved Scroll Wall de Fieldbook, dans la catégorie Mise en page.

2330Curved Scroll WallMise en pageUn mur de photos à défilement horizontal rendu sur un plan légèrement incurvé et courbé qui continue de défiler à l'infini dans les deux sens.

Image fixe du composant Drag split panels de Fieldbook, dans la catégorie Mise en page.

2342Drag split panelsMise en pagePanneaux divisés par de fines poignées déplaçables qui redimensionnent les volets adjacents en temps réel, disposés en rangée ou empilés.

Image fixe du composant Focus scroll list de Fieldbook, dans la catégorie Mise en page.

2357Focus scroll listMise en pageUne file d'attente déroulante dont les lignes apparaissent en taille réelle et en opacité lorsqu'elles atteignent le centre de la vue, avec survol et sélection au clavier.

Image fixe du composant Masked reveal disclosure de Fieldbook, dans la catégorie Mise en page.

2384Masked reveal disclosureMise en pageUne divulgation dont le panneau s'agrandit jusqu'à sa propre hauteur naturelle tandis qu'un bord légèrement dégradé efface le contenu depuis le haut, puis recule à la fermeture.

Image fixe du composant Masonry flow de Fieldbook, dans la catégorie Mise en page.

1532Masonry flowMise en pageUn mur de maçonnerie qui regroupe des carreaux de différentes hauteurs dans des colonnes, soulève chacun d'entre eux lorsqu'il défile et réinstalle la grille entière lorsque le nombre de colonnes change.

Image fixe du composant Overlay scroll panel de Fieldbook, dans la catégorie Mise en page.

2396Overlay scroll panelMise en pageUn panneau délimité qui masque la barre de défilement de la plate-forme et dessine sa propre piste de superposition fine, de la taille d'un pouce par rapport au contenu.