Separator
Diviseur visuel léger pour regrouper le contenu, séparer les sections et clarifier la hiérarchie de mise en page dans PyColors UI.
Séparation visuelle sans bruit visuelLien vers la section
Les Séparateur Un composant crée un séparateur fin entre des éléments d'interface connexes.
Utilisez-le pour:
- Séparation des sections de page
- Regroupement du contenu de la carte
- diviser les actions de la barre d'outils
- séparation des lignes de métadonnées
- créer des cloisons verticales dans des configurations compactes
- amélioration de la scanabilité sans ajout de conteneurs lourds
Le séparateur est intentionnellement minimal. Il utilise des tokens sémantiques PyColors tels que bg-border, il s'adapte donc au mode lumineux, au mode sombre et aux remplacements de thème de produit.
Idée de base
Le séparateur doit clarifier la structure, pas décorer la page.
ImportationLien vers la section
import { Separator } from "@pycolors/ui";Utilisation de baseLien vers la section
Utilisez un séparateur horizontal pour diviser les blocs de contenu connexes.
Compte
Gérer les paramètres et les préférences du profil.
Facturation
Examiner les factures, l'état du plan et les paramètres de paiement.
Comportement par défaut
Le séparateur est décoratif par défaut. Il rend sans sémantique de séparateur,
sauf si vous définissez explicitement decorative={false}.
Quand utiliser SéparateurLien vers la section
Utilisez Séparateur lorsque l'espacement seul n'est pas suffisant pour communiquer le regroupement.
Sections
Barres
Hiérarchie
OrientationLien vers la section
Le séparateur soutient l'orientation horizontale et verticale.
HorizontalLien vers la section
Horizontal est l'orientation par défaut.
Starter Pro
Starter SaaS prêt pour la production avec authentification, facturation et fondations d'applications protégées.
VerticalLien vers la section
Utilisez un séparateur vertical à l'intérieur d'une rangée flexible. Donner au parent une hauteur ou une utilisation self-stretch.
Gratuit
Pro
Entreprise
Règle verticale
Les séparateurs verticaux ont besoin d'une hauteur de disposition. Utilisez-les à l'intérieur des lignes, des barres d'outils, des navs ou des groupes de métadonnées compacts.
Décoratif vs sémantiqueLien vers la section
Par défaut, Separator est décoratif et utilise role="none".
Définir decorative={false} lorsque le séparateur communique une limite significative pour les technologies d'assistance.
Données personnelles
Nom, email et profil de compte.
Détails de l'espace de travail
Paramètres d'équipe, de rôle et d'organisation.
Règle sémantique
La plupart des séparateurs doivent rester décoratifs. Utilisez des séparateurs sémantiques uniquement lorsque la limite elle-même aide à décrire la structure.
Carte de paramètresLien vers la section
Notifications
Choisissez comment PyColors devrait vous contacter.
Mises à jour des produits
Recevez des notes de publication et des mises à jour de le panneau latéral de route.
Alertes de sécurité
Notifications de compte et de facturation importantes.
métadonnées compactesLien vers la section
UtilisationsLien vers la section
Commencer par l'espacement
Utilisez l'espacement en premier. Ajouter un séparateur uniquement lorsque le regroupement visuel n'est pas encore clair.
Gardez les diviseurs subtils
Utilisez des tokens de bordure sémantiques. Évitez les couleurs fortes à moins que le séparateur ne fasse partie d'une surface de marque très spécifique.
Choisissez la bonne orientation
Utilisez des séparateurs horizontaux pour le contenu empilé et des séparateurs verticaux pour les rangées compactes.
Évitez de trop fragmenter la page
Trop de séparateurs rendent l'interface utilisateur lourde et plus difficile à analyser.
Séparateur vs Border vs CardLien vers la section
| Situation | Utilisation |
|---|---|
| Diviser le contenu à l'intérieur d'une même surface | Séparateur |
| Définir le bord d'une surface | Frontière |
| Regrouper le contenu dans un objet distinct | Carte |
| Diviser les groupes d'action de la barre d'outils | Séparateur |
| Régions de page distinctes non liées | Espacement des sections ou carte |
| Mettre l’accent sur un état critique | Alerte ou couleur sémantique |
Règle de décision
Utilisez Séparateur à l'intérieur d'une surface. Utilisez Card lorsque le contenu mérite sa propre surface.
APILien vers la section
| Prop | Type | Par défaut | Désignation |
|---|---|---|---|
orientation | "horizontal" | "vertical" | "horizontal" | Diviseur direction |
decorative | boolean | true | Supprime la sémantique du séparateur lorsque true |
className | string | — | Autres classes Tailwind |
...props | React.HTMLAttributes<HTMLDivElement> | — | Attributs div standard |
TypeScript typesLien vers la section
export interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
orientation?: "horizontal" | "vertical";
decorative?: boolean;
}AccessibilitéLien vers la section
- Séparateurs décoratifs utilisés
role="none". - Séparateurs sémantiques
role="separator". - Séparateurs sémantiques comprennent
aria-orientation. - La plupart des séparateurs visuels doivent être décoratifs.
- Ne pas utiliser Separator en remplacement des rubriques.
- Ne vous fiez pas uniquement à un diviseur pour expliquer la hiérarchie.
Règle d'accessibilité
Si le séparateur n'ajoute pas de sens pour les utilisateurs de lecteurs d'écran, gardez-le décoratif.
Préférez/évitezLien vers la section
Préférez
- Séparateurs subtils à l'intérieur des cartes et des panneaux
- séparateurs horizontaux pour sections empilées
- séparateurs verticaux pour lignes compactes
- séparateurs décoratifs par défaut
- espacement avant d'ajouter des lignes supplémentaires
Éviter
- Utiliser des séparateurs comme décoration
- trop de diviseurs dans des configurations denses
- Couleurs fortes pour une séparation neutre
- Séparateurs sémantiques sans valeur structurelle
- remplacer les en-têtes par des lignes de séparation