# Système de design Element Plus ## Aperçu de l’interface du système de design Element Plus Filtrez et déplacez des modules entre deux listes Transfer natives, examinez les clés sélectionnées et appliquez une sélection locale. ## Référence de conception du système de design Element Plus Element Plus 2.14.7, compilation par défaut de CSS. Les variables correspondent aux valeurs vérifiées du package, y compris les alias sémantiques. La disposition de transfert reprend les règles de composition adaptative d’origine, distinctes des fondations du système. ### Couleurs principales et d’état | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | --el-color-primary | #409eff | Couleur d’accent principale par défaut. | | --el-color-primary-light-3 | #79bbff | Teinte principale utilisée pour les interactions plus claires. | | --el-color-primary-light-5 | #a0cfff | Teinte intermédiaire. | | --el-color-primary-light-7 | #c6e2ff | Teinte claire. | | --el-color-primary-light-9 | #ecf5ff | Surface discrète pour la sélection et les clés. | | --el-color-primary-dark-2 | #337ecc | État principal plus sombre. | | --el-color-success | #67c23a | Rôle de réussite. | | --el-color-warning | #e6a23c | Rôle d’avertissement. | | --el-color-danger | #f56c6c | Rôle d’erreur et de danger. | | --el-color-info | #909399 | Rôle neutre informatif. | ### Texte sémantique et surfaces | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | --el-text-color-primary | #303133 | Texte principal de lecture. | | --el-text-color-regular | #606266 | Texte ordinaire des composants. | | --el-text-color-secondary | #909399 | Aide et métadonnées. | | --el-text-color-placeholder | #a8abb2 | Rôle du texte indicatif. | | --el-bg-color | #fff | Surface par défaut. | | --el-bg-color-page | #f2f3f5 | Arrière-plan de la page. | | --el-bg-color-overlay | #fff | Surface de superposition. | | --el-border-color | #dcdfe6 | Bordure par défaut. | | --el-border-color-light | #e4e7ed | Bordure discrète de carte ou de résumé. | ### Typographie, contrôles et formes | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | --el-font-family | "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif | Préférence de famille par défaut. | | --el-font-size-extra-large | 20px | Échelle de titre de 20 px. | | --el-font-size-large | 18px | Échelle de 18 px. | | --el-font-size-medium | 16px | Échelle de 16 px. | | --el-font-size-base | 14px | Base de 14 px. | | --el-font-size-small | 13px | Échelle de 13 px. | | --el-font-size-extra-small | 12px | Échelle de 12 px. | | --el-border-radius-base | 4px | Arrondi standard des composants. | | --el-border-radius-small | 2px | Petit arrondi. | | --el-component-size-large | 40px | Grande hauteur de contrôle. | | --el-component-size | 32px | Hauteur de contrôle par défaut. | | --el-component-size-small | 24px | Petite hauteur de contrôle. | ### Mise en page originale de l’espace de travail des modules | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | Desktop panel arrangement | two panels with 180px reserved between | Adaptation originale autour du composant Transfer natif. | | Narrow layout | ≤700px: stacked panels | Point de rupture d’origine, et non un jeton Element Plus. | | Page spacing | 32px desktop; 20px 16px mobile | Marge extérieure d’origine. | | Summary spacing | 24px padding / 24px gap | Composition originale des clés sélectionnées et du résumé des modules. | ## Guide complet du système de design Element Plus Un guide pratique pour choisir, appliquer et évaluer ce système dans une interface réelle. Des conseils complets, un point de départ pour la mise en œuvre et des liens vers les sources. ## Système de design Element Plus : une liste de transfert propose deux types de sélection ### Une liste de transfert propose deux types de sélection > Element Plus Transfer présente les listes des éléments disponibles et cibles, avec des commandes pour déplacer les éléments cochés. L’espace de travail des modules utilise le composant Vue 2.14.7 réel. Son v-model contient les clés cibles, soit initialement catalog et tokens. Cocher un élément dans une liste le marque pour la prochaine action de transfert ; cela ne signifie pas qu’il fait déjà partie de la liste cible. La lecture en direct du modèle rend cette distinction visible. Cocher un élément source le prépare pour l’ajout. Appuyer sur Add modifie le tableau des clés cibles, met à jour le résumé des modules sélectionnés et efface tout résultat appliqué précédemment. Le lecteur peut ainsi constater le fonctionnement du modèle de la bibliothèque au lieu de le déduire de deux listes statiques. Consultez la spécification associée ## Système de design Element Plus : rôles par défaut et dimensions concrètes des composants ### Rôles par défaut et dimensions concrètes des composants Element Plus expose --el-color-primary et ses variantes claires et foncées, les rôles d’état, les couleurs de texte et les variables de surface. Le tableau indique les valeurs réellement compilées du package installé. Le panneau des clés environnant utilise primary-light-9 et le texte ordinaire, tandis que le bouton d’action reprend le style principal natif. La typographie par défaut comprend une taille de base de quatorze pixels, accompagnée de tailles de douze, treize, seize, dix-huit et vingt pixels. Les variables de taille des composants définissent les dimensions des commandes petites, standard et grandes. Il ne faut pas les confondre avec une échelle d’espacement pour la mise en page. Les espaces de vingt-quatre pixels et la marge extérieure de trente-deux pixels de l’atelier sont des choix de composition explicites et propres à cet exemple. Consultez la spécification associée ## Système de design Element Plus : clés stables, libellés et options désactivées ### Clés stables, libellés et options désactivées Chaque option possède une clé, un libellé et un indicateur de désactivation. Le tableau des éléments sélectionnés contient ces clés, ce qui permet de modifier les libellés sans changer l’identité des options. Les modules de l’exemple comprennent le catalogue d’actifs, l’inspecteur de jetons, la file de révision, l’historique des versions et la recherche entre projets. L’export de l’audit reste désactivé pour illustrer une option visible, mais indisponible. La disponibilité présentée dans cet exemple repose sur des données de démonstration statiques. Il ne s’agit ni d’une vérification des droits ni d’une garantie que ces modules existent sous forme de produits installables. Dans une véritable application, la source des options et les règles d’autorisation doivent provenir du modèle du produit. Ne déduisez pas qu’un utilisateur est autorisé à effectuer une action simplement parce qu’il peut cocher une case dans Transfer. Consultez la spécification associée ## Système de design Element Plus : la recherche modifie la visibilité, pas l’appartenance ### La recherche modifie la visibilité, pas l’appartenance L’option filterable ajoute une recherche indépendante à chaque panneau. Le texte indicatif du champ précise l’action à effectuer : « Rechercher un module ». Par défaut, la recherche filtre les options à partir de leur libellé. Une option sélectionnée peut disparaître de la liste cible visible lors d’une recherche sans être supprimée du tableau des clés sélectionnées ; le récapitulatif et l’affichage des données continuent de présenter l’ensemble des éléments cibles. Les emplacements personnalisés pour les panneaux de gauche et de droite permettent de distinguer un panneau sans choix correspondant du cas général où rien n’est sélectionné. La page désactive également le bouton Appliquer lorsque le tableau cible est vide. Il s’agit de deux états distincts : l’absence de résultats de recherche ne signifie pas qu’aucun module n’est sélectionné. 1. Recherchez « File de révision » dans le panneau des éléments disponibles. 2. Cochez l’option correspondante, puis cliquez sur Ajouter. 3. Effacez la recherche et vérifiez que « File de révision » apparaît dans l’affichage des données du modèle et dans la liste cible. Consultez la spécification associée ## Système de design Element Plus : préserver la relation entre les deux listes sur mobile ### Préserver la relation entre les deux listes sur mobile Sur ordinateur, les panneaux Transfer natifs sont disposés côte à côte, avec une zone dédiée aux boutons Ajouter et Retirer. Sur les écrans d’une largeur maximale de sept cents pixels, les panneaux s’empilent et les boutons d’action se disposent sur une rangée horizontale entre eux. Les titres continuent d’indiquer « Modules disponibles » et « Modules de l’espace de travail », afin que le sens du déplacement reste clair. L’atelier ne réduit pas l’ensemble du composant pour qu’il tienne sur un téléphone. Il adapte la composition tout en conservant les libellés, les cases à cocher, les champs de recherche et le contenu des listes à une taille lisible. L’affichage des clés sélectionnées et le récapitulatif textuel passent sous les listes, sur une seule colonne. Les mêmes informations restent ainsi visibles, sans être masquées sur un écran plus étroit. Consultez la spécification associée ## Système de design Element Plus : gérer les sélections provisoires et l’instantané appliqué ### Appartenance provisoire et instantané appliqué Le bouton Appliquer copie le tableau des clés sélectionnées. Toute modification ultérieure de la sélection efface cet état appliqué, afin qu’une alerte de réussite ne persiste pas après une modification provisoire de l’appartenance. Le bouton Restaurer la sélection initiale réattribue un nouveau tableau contenant « catalog » et « tokens », et efface également le résultat appliqué. Les transitions d’état se résument à quelques lignes explicites dans le code source Vue. L’alerte indique uniquement que la sélection de l’aperçu local a été appliquée. Elle ne prétend pas qu’il y a eu installation, modification des droits ou mise à jour externe. Dans un véritable écran de paramètres, l’instantané appliqué devrait correspondre à un résultat de persistance confirmé ; un événement du composant ne suffit pas à confirmer une réponse du serveur. Consultez la spécification associée ## Système de design Element Plus : commandes natives et consignes claires ### Commandes natives et consignes claires L’exemple conserve les cases à cocher et les boutons de transfert natifs de Transfer. Les boutons portent les libellés « Retirer » et « Ajouter » au lieu de se limiter à des icônes directionnelles, ce qui est particulièrement utile lorsque les listes s’empilent verticalement. Les titres des panneaux précisent les rôles de source et de cible, et la phrase d’aide explique qu’il faut d’abord sélectionner les éléments, puis les déplacer. L’option désactivée reste visible dans son contexte, et les emplacements vides des panneaux indiquent qu’aucune option ne correspond. Les utilisateurs au clavier doivent pouvoir accéder aux champs de recherche, aux cases à cocher et aux boutons sans gestionnaires personnalisés réservés à la souris. Le composant gère son propre fonctionnement interne ; l’application évite de remplacer cette structure par des lignes dessinées qui ne feraient qu’imiter des commandes de sélection. - Les titres des panneaux indiquent quelle liste est la cible. - Les libellés textuels clarifient le sens du transfert lorsque la disposition est empilée. - L’affichage dynamique des données du modèle permet de repérer les éléments sélectionnés qui ne sont pas visibles. Consultez la spécification associée ## Système de design Element Plus : compiler le composant Vue et charger CSS ### Compiler le composant Vue et charger le CSS Dans un projet Vue 3 avec Vite, installez element-plus@2.14.7 et importez element-plus/dist/index.css avant la mise en page d’origine CSS. Le fichier App.vue complet utilise script setup et importe directement ses composants. ElConfigProvider reçoit les paramètres régionaux anglais, afin que les textes intégrés des panneaux et des états vides restent cohérents avec la page de référence en anglais. La configuration de style production fournie importe App.vue à l’aide du plug-in Vue pour Vite. L’exemple hors ligne a été créé en compilant le même composant monofichier, puis en le regroupant localement. Il ne nécessite ni CDN externe, ni service d’importation automatique, ni compilateur de modèles à l’exécution. Si un plug-in d’importation automatique est déjà utilisé dans un projet, veillez à ce que ses styles générés soient cohérents avec la stratégie d’importation choisie, globale ou par composant. Consultez la spécification associée ## Système de design Element Plus : les substitutions de thème doivent préserver les relations entre composants ### Les remplacements de thème doivent préserver les relations entre composants CSS Les propriétés personnalisées sont utiles pour modifier des rôles partagés sans réécrire les sélecteurs de chaque composant. L’atelier utilise les variables --el réelles pour l’arrière-plan, le texte, les bordures et les angles. Il ne modifie que les sélecteurs de mise en page nécessaires pour intégrer Transfer à cette composition particulière. Pour appliquer un thème de marque plus large, utilisez l’approche documentée avec Sass ou les variables CSS, puis examinez ensemble les états au survol, désactivé et au focus. Remplacer uniquement la valeur hexadécimale principale dans une capture d’écran ne tient pas compte des surfaces plus claires ni des interactions plus sombres. Le tableau fondé sur les sources fournit les valeurs de départ ; l’aperçu natif complet permet d’en examiner les effets dans un composant fonctionnel. Consultez la spécification associée ## Exemples de composants du système de design Element Plus ### Composant complet de sélection de modules Vue Composant monofichier utilisant Transfer, Card, Alert, Button et Tag natifs. ``` ``` Référence du code - v-model stocke les clés sélectionnées, et non les objets d’option complets. - Une option désactivée reste visible, mais ne peut pas être transférée. - Toute modification de la sélection du transfert efface l’état appliqué devenu obsolète. ### Composition Transfer adaptative Les styles préservent les panneaux et contrôles natifs, tout en les empilant sur les écrans étroits. ``` body{margin:0;background:var(--el-bg-color-page);font-family:var(--el-font-family);color:var(--el-text-color-primary);font-size:var(--el-font-size-base);line-height:1.6}.module-desk{max-width:1080px;margin:auto;padding:32px}header{max-width:700px;margin-bottom:28px}h1{font-size:34px;line-height:1.2;letter-spacing:-.03em;margin:10px 0 16px}h2{font-size:20px;line-height:1.3;margin:0}.eyebrow{font-size:11px;letter-spacing:.12em;font-weight:700;color:var(--el-text-color-secondary)}.card-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.el-transfer{--el-transfer-panel-body-height:210px;display:flex;align-items:center;justify-content:center}.el-transfer-panel{width:calc((100% - 180px)/2)}.el-transfer__buttons{padding:0 20px;display:flex;flex-direction:column;gap:10px}.el-transfer__buttons .el-button{margin:0}.help,.empty{font-size:13px;color:var(--el-text-color-secondary)}.empty{padding:16px}.summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px}.summary,.key-panel{background:var(--el-bg-color);border:1px solid var(--el-border-color-light);border-radius:var(--el-border-radius-base);padding:24px}.actions{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0}.actions .el-button{margin:0}.key-panel{background:var(--el-color-primary-light-9)}pre{font:14px/1.7 monospace;white-space:pre-wrap}.key-panel p{font-size:13px}.summary li{margin:6px 0}footer{font-size:12px;color:var(--el-text-color-secondary);margin-top:20px}@media(max-width:700px){.module-desk{padding:20px 16px}h1{font-size:28px}.el-transfer{flex-direction:column;gap:16px}.el-transfer-panel{width:100%}.el-transfer__buttons{flex-direction:row;padding:0}.summary-grid{grid-template-columns:1fr}.el-card__body{padding:16px}} ``` Référence du code - Le point de rupture et la disposition environnante sont des choix originaux. ## Configuration d’agent du système de design Element Plus ### Point de départ de l’implémentation Vérifié avec Vue 3 et Element Plus 2.14.7. App.vue fournit le ConfigProvider en anglais ainsi que les imports explicites des composants. Tout l’état est local. ``` // Create the project first: // npm create vite@latest element-plus-specimen -- --template vue // cd element-plus-specimen && npm install // In a Vite Vue 3 project: // npm install element-plus@2.14.7 // Save the complete single-file component above as App.vue. // main.js import {createApp} from 'vue'; import 'element-plus/dist/index.css'; import './style.css'; import App from './App.vue'; createApp(App).mount('#app'); // index.html:
// style.css: use the complete responsive composition above. // Vite's standard Vue template includes @vitejs/plugin-vue for .vue files. // Keep the template index.html and replace its entry with the code above. // npm run dev ``` ### Un prompt pour votre projet ``` Étendez le sélecteur de modules de l’espace de travail Element Plus 2.14.7 fourni en utilisant ElTransfer natif. Conservez les six modules identifiés par une clé, l’entrée Audit désactivée, le comportement de filtrage et le tableau contrôlé des clés sélectionnées. L’application doit enregistrer la sélection actuelle des modules ; les modifications ultérieures doivent rendre cet instantané visiblement obsolète, tandis que la restauration rétablit la sélection initiale. Préservez la disposition adaptative à deux panneaux et le comportement des éléments désactivés au lieu de reconstruire Transfer sous forme de listes sans lien. Chargez la feuille de style native avant la composition originale CSS. ``` ## Sources et portée du système de design Element Plus Référence native de Element Plus 2.14.7. Les noms de modules et les autorisations sont des exemples originaux ; la sélection locale n’entraîne aucune installation ni modification des droits. - Transfer Clés du modèle, filtrage, données désactivées et slots vides. - Thématisation Variables CSS et personnalisation Sass. - Démarrage rapide Configuration des composants Vue et de la feuille de style. - Config Provider Configuration de la langue. - Couleurs Rôles de couleur par défaut. - Bordure Principes de base des bordures et des formes. ## Ressources associées au système de design Element Plus ### Flowbite Une composition native d’accordéon et de panneau coulissant Flowbite 4, avec des alias de thème sémantique vérifiés, une liste de préparation persistante et un parcours accessible de prise de notes sur les matériaux, enregistré localement. ### Fomantic UI Une étagère de lecture native Fomantic UI, avec des valeurs de thème compilées et vérifiées, les modules jQuery de menu déroulant et de notation, une prise en charge explicite du clavier et une liste de lecture locale persistante. ### Foundation Un espace de vérification fonctionnel Foundation, utilisant XY Grid, les validateurs personnalisés d’Abide, la confirmation Reveal, les paramètres Sass réels et un code d’intégration locale complet. - [Référence de mise en œuvre](https://element-plus.org/en-US/component/transfer.html) - [Source](https://element-plus.org/en-US/guide/theming.html) - [Source](https://element-plus.org/en-US/component/transfer.html) - [Consultez la spécification associée](https://element-plus.org/en-US/component/transfer.html) - [Consultez la spécification associée](https://element-plus.org/en-US/guide/theming.html) - [Consultez la spécification associée](https://element-plus.org/en-US/guide/quickstart.html) - [Référence du code](https://element-plus.org/en-US/component/transfer.html) - [Référence du code](https://element-plus.org/en-US/guide/theming.html) - [Transfer Clés du modèle, filtrage, données désactivées et slots vides.](https://element-plus.org/en-US/component/transfer.html) - [Thématisation Variables CSS et personnalisation Sass.](https://element-plus.org/en-US/guide/theming.html) - [Démarrage rapide Configuration des composants Vue et de la feuille de style.](https://element-plus.org/en-US/guide/quickstart.html) - [Config Provider Configuration de la langue.](https://element-plus.org/en-US/component/config-provider.html) - [Couleurs Rôles de couleur par défaut.](https://element-plus.org/en-US/component/color.html) - [Bordure Principes de base des bordures et des formes.](https://element-plus.org/en-US/component/border.html)