Système de composants d’entreprise · Nouvelle ressource
Système de design Element Plus.
Utilisez le véritable modèle Transfer de Element Plus, ses filtres et ses options désactivées pour créer un espace de travail de sélection de modules, fondé sur des couleurs, des tailles de caractères et des dimensions de commandes vérifiées.
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.
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.
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.
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.
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é.
Recherchez « File de révision » dans le panneau des éléments disponibles.
Cochez l’option correspondante, puis cliquez sur Ajouter.
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.
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.
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.
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.
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 [email protected] 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.
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.
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.
vue
<script setup>
import {ref,computed} from 'vue';
import {ElConfigProvider,ElTransfer,ElCard,ElButton,ElTag,ElAlert} from 'element-plus';
import en from 'element-plus/es/locale/lang/en';
const modules=[{key:'catalog',label:'Asset catalog',disabled:false},{key:'tokens',label:'Token inspector',disabled:false},{key:'review',label:'Review queue',disabled:false},{key:'history',label:'Version history',disabled:false},{key:'audit',label:'Audit export · unavailable',disabled:true},{key:'search',label:'Cross-project search',disabled:false}];
const selected=ref(['catalog','tokens']),applied=ref(null);const names=computed(()=>modules.filter(x=>selected.value.includes(x.key)).map(x=>x.label));
const changed=()=>{applied.value=null};
</script>
<template><ElConfigProvider :locale="en"><main class="module-desk"><header><p class="eyebrow">ELEMENT PLUS / WORKSPACE COMPOSITION</p><h1>Choose the tools this team needs.</h1><p>Move modules between lists, then inspect the exact selected keys.</p></header><ElCard shadow="never"><template #header><div class="card-heading"><h2>Module selection</h2><ElTag type="info">{{selected.length}} selected</ElTag></div></template><ElTransfer v-model="selected" :data="modules" filterable filter-placeholder="Find a module" :titles="['Available modules','Workspace modules']" :button-texts="['Remove','Add']" @change="changed"><template #left-empty><p class="empty">No available module matches.</p></template><template #right-empty><p class="empty">No selected module matches.</p></template></ElTransfer><p class="help">Check a module before using Add or Remove. Audit export stays disabled in this sample.</p></ElCard><div class="summary-grid"><section class="summary"><h2>Workspace modules</h2><ul v-if="names.length"><li v-for="name in names" :key="name">{{name}}</li></ul><p v-else>No modules selected. Add at least one before applying.</p><div class="actions"><ElButton type="primary" :disabled="!selected.length" @click="applied=[...selected]">Apply locally</ElButton><ElButton @click="selected=['catalog','tokens'];changed()">Restore starting set</ElButton></div><ElAlert v-if="applied" title="Selection applied to the local preview" type="success" :closable="false" show-icon description="No installation, entitlement change or external update was performed." /></section><section class="key-panel"><p class="eyebrow">V-MODEL VALUE</p><pre>{{JSON.stringify(selected,null,2)}}</pre><p>The model contains keys, not option objects. Search filters visibility without changing this array.</p></section></div><footer>Native Element Plus Transfer, Card, Tag, Button and Alert. Local module names and availability are original examples.</footer></main></ElConfigProvider></template>
Le point de rupture et la disposition environnante sont des choix originaux.
04
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.
javascript
// 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 [email protected]
// 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: <div id="app"></div>
// 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
Prompt pour l’agent IA
É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.
05
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.
