# Sistema de design Element Plus ## Prévia da interface do sistema de design Element Plus Filtre e mova módulos entre duas listas Transfer nativas, inspecione as chaves selecionadas e aplique uma seleção local. ## Referência de design do sistema sistema de design Element Plus Element Plus 2.14.7 CSS compilado padrão. As variáveis são valores verificados do pacote, incluindo aliases semânticos. O layout da transferência usa regras de composição responsiva originais, separadas da base do sistema. ### Cores primárias e de status | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --el-color-primary | #409eff | Cor de destaque primária padrão. | | --el-color-primary-light-3 | #79bbff | Matiz primária usada em interações mais claras. | | --el-color-primary-light-5 | #a0cfff | Matiz intermediária. | | --el-color-primary-light-7 | #c6e2ff | Matiz clara. | | --el-color-primary-light-9 | #ecf5ff | Superfície discreta para seleção e painel de chaves. | | --el-color-primary-dark-2 | #337ecc | Estado primário mais escuro. | | --el-color-success | #67c23a | Função de sucesso. | | --el-color-warning | #e6a23c | Função de aviso. | | --el-color-danger | #f56c6c | Função de erro/perigo. | | --el-color-info | #909399 | Função neutra informativa. | ### Texto semântico e superfícies | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --el-text-color-primary | #303133 | Texto principal para leitura. | | --el-text-color-regular | #606266 | Texto comum dos componentes. | | --el-text-color-secondary | #909399 | Ajuda e metadados. | | --el-text-color-placeholder | #a8abb2 | Função de espaço reservado. | | --el-bg-color | #fff | Superfície padrão. | | --el-bg-color-page | #f2f3f5 | Plano de fundo da página. | | --el-bg-color-overlay | #fff | Superfície de sobreposição. | | --el-border-color | #dcdfe6 | Borda padrão. | | --el-border-color-light | #e4e7ed | Limite sutil de cartão/resumo. | ### Tipografia, controles e formas | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --el-font-family | "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif | Preferência de família padrão. | | --el-font-size-extra-large | 20px | Escala de título de 20px. | | --el-font-size-large | 18px | Escala de 18px. | | --el-font-size-medium | 16px | Escala de 16px. | | --el-font-size-base | 14px | Base de 14px. | | --el-font-size-small | 13px | Escala de 13px. | | --el-font-size-extra-small | 12px | Escala de 12px. | | --el-border-radius-base | 4px | Canto padrão dos componentes. | | --el-border-radius-small | 2px | Canto pequeno. | | --el-component-size-large | 40px | Altura grande de controle. | | --el-component-size | 32px | Altura padrão de controle. | | --el-component-size-small | 24px | Altura pequena de controle. | ### Layout original da bancada de módulos | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | Desktop panel arrangement | two panels with 180px reserved between | Adaptação original em torno do Transfer nativo. | | Narrow layout | ≤700px: stacked panels | Ponto de interrupção original, não é um token Element Plus. | | Page spacing | 32px desktop; 20px 16px mobile | Preenchimento externo original. | | Summary spacing | 24px padding / 24px gap | Composição original do resumo de módulos e chaves selecionados. | ## Guia completo do sistema de design Element Plus Um guia prático para escolher, aplicar e avaliar este sistema em uma interface real. Orientações completas, um ponto de partida para a implementação e links para o código-fonte. ## Sistema de design Element Plus — Uma lista de transferência tem dois tipos de seleção ### Uma lista de transferência tem dois tipos de seleção > Element Plus Transfer apresenta listas de itens disponíveis e de destino, com controles para mover os itens marcados. A bancada de módulos usa o componente Vue real da versão 2.14.7. Seu v-model contém as chaves de destino, inicialmente catalog e tokens. Marcar uma caixa de seleção em uma lista prepara um item para a próxima ação de transferência; isso não significa, por si só, que o item já pertença ao destino. Essa distinção fica visível na leitura dinâmica do modelo. Marcar um item de origem o prepara para ser adicionado. Ao pressionar Add, o array de chaves de destino é alterado, o resumo dos módulos selecionados é atualizado e qualquer resultado aplicado anteriormente é limpo. Assim, é possível observar o contrato do modelo da biblioteca, em vez de deduzi-lo a partir de duas listas estáticas. Consulte a especificação de apoio ## Sistema de design Element Plus — Funções padrão e dimensões concretas dos componentes ### Funções padrão e dimensões concretas dos componentes Element Plus expõe --el-color-primary e suas derivações claras e escuras, funções de status, cores de texto e variáveis de superfície. A tabela mostra os valores reais compilados do pacote instalado. O painel de chaves ao redor usa primary-light-9 e texto comum, enquanto o botão de ação usa o estilo primário nativo. A tipografia padrão inclui uma base de quatorze pixels e tamanhos complementares de doze, treze, dezesseis, dezoito e vinte pixels. As variáveis de tamanho dos componentes descrevem as dimensões de controles pequenos, padrão e grandes. Não devem ser confundidas com uma escala de espaçamento para o layout da página. Os intervalos de vinte e quatro pixels e o preenchimento externo de trinta e dois pixels da bancada são escolhas explícitas da composição original. Consulte a especificação de apoio ## Sistema de design Element Plus — Chaves estáveis, rótulos e opções desativadas ### Chaves estáveis, rótulos e opções desativadas Cada opção tem uma chave, um rótulo e uma indicação de desativação. O array de itens selecionados é composto por essas chaves, permitindo alterar os rótulos sem mudar a identidade dos itens. Os módulos de exemplo incluem Catálogo de ativos, Inspetor de tokens, Fila de revisão, Histórico de versões e Busca entre projetos. A exportação de auditoria permanece desativada para demonstrar uma opção visível, mas indisponível. A disponibilidade neste exemplo é um dado estático de demonstração. Ela não representa uma verificação de permissões nem garante que esses módulos existam como produtos instaláveis. Em uma aplicação real, a fonte das opções e as regras de permissão devem vir do modelo do produto. Não presuma que há autorização só porque é possível marcar uma caixa de seleção em Transfer. Consulte a especificação de apoio ## Sistema de design Element Plus: a busca altera a visibilidade, não a seleção ### A busca altera a visibilidade, não a composição A propriedade filterable adiciona buscas independentes aos painéis. O texto de orientação do campo indica uma ação concreta: Encontrar um módulo. Por padrão, a busca corresponde ao rótulo da opção. Um item selecionado pode desaparecer da lista de destino visível durante uma busca sem ser removido do array de chaves selecionadas; o resumo e a visualização continuam mostrando o conjunto completo de itens de destino. Os espaços personalizados para os estados vazios à esquerda e à direita diferenciam um painel sem opções correspondentes do caso geral em que nada está selecionado. A página também desativa localmente Aplicar quando o array de destino está vazio. São estados distintos: não encontrar resultados na busca não significa que não há módulos selecionados. 1. Busque Fila de revisão no painel de itens disponíveis. 2. Marque a opção correspondente e pressione Adicionar. 3. Limpe a busca e confira se revisão aparece na visualização do modelo e na lista de destino. Consulte a especificação de apoio ## Sistema de design Element Plus: preserve a relação entre as duas listas em dispositivos móveis ### Preserve a relação entre as duas listas em dispositivos móveis Em telas de computador, os painéis nativos de Transfer ficam lado a lado, com uma área exclusiva para Adicionar e Remover. Em telas com até setecentos pixels de largura, os painéis ficam empilhados e os botões de ação formam uma linha horizontal entre eles. Os títulos continuam identificando Módulos disponíveis e Módulos do espaço de trabalho, deixando clara a direção da transferência. O ambiente de trabalho não reduz todo o controle para fazê-lo caber na tela do celular. Ele adapta a composição e mantém rótulos, caixas de seleção, campos de busca e conteúdo das listas em tamanhos nativos e legíveis. A visualização das chaves selecionadas e o resumo em texto passam para uma única coluna abaixo, preservando as mesmas informações em vez de ocultá-las em um ponto de quebra menor. Consulte a especificação de apoio ## Sistema de design Element Plus: mantenha um rascunho da seleção e um instantâneo aplicado ### Composição em edição e instantâneo aplicado Aplicar localmente copia o array de chaves selecionadas. Uma alteração posterior na seleção de Transfer limpa esse estado aplicado, para que um alerta de sucesso não permaneça depois que o usuário altera o rascunho da seleção. Restaurar seleção inicial atribui um novo array catalog/tokens e também limpa o resultado aplicado. As transições de estado são descritas em poucas linhas explícitas no código-fonte Vue. O alerta informa apenas que a seleção da prévia local foi aplicada. Ele não afirma que houve instalação, alteração de permissões ou atualização externa. Em uma tela de configurações real, o instantâneo aplicado precisaria corresponder a um resultado de persistência confirmado; um evento do componente, por si só, não confirma uma resposta do servidor. Consulte a especificação de apoio ## Sistema de design Element Plus: controles nativos e instruções claras ### Controles nativos e instruções claras O exemplo mantém as caixas de seleção e os botões de transferência nativos de Transfer. Os textos dos botões são Remover e Adicionar, em vez de usar apenas ícones direcionais, o que é especialmente útil quando as listas ficam empilhadas na vertical. Os títulos dos painéis explicam os papéis de origem e destino, e a frase de ajuda explica a sequência de marcar e transferir. A opção desativada permanece no contexto, e os espaços vazios dos painéis comunicam que não há opções correspondentes. Usuários de teclado devem conseguir acessar campos de busca, caixas de seleção e botões sem manipuladores personalizados que funcionem apenas com ponteiro. O componente gerencia seu próprio comportamento interno; a aplicação evita substituir essa estrutura por linhas desenhadas que apenas se parecem com controles de seleção. - Os títulos dos painéis identificam a lista de destino. - Os rótulos em texto mantêm clara a direção da transferência no layout empilhado. - A visualização ativa do modelo permite identificar itens selecionados que não estão visíveis. Consulte a especificação de apoio ## Sistema de design Element Plus: compile o componente Vue e carregue o CSS ### Compile o componente Vue e carregue CSS Em um projeto Vue 3 com Vite, instale element-plus@2.14.7 e importe element-plus/dist/index.css antes do layout original CSS. O App.vue completo usa script setup e importa seus componentes diretamente. ElConfigProvider recebe a localidade em inglês para manter os textos integrados dos painéis e dos estados vazios consistentes com a página de referência em inglês. A configuração de produção fornecida importa App.vue por meio do plugin Vue para Vite. O exemplo offline foi criado compilando o mesmo componente de arquivo único e empacotando-o localmente. Ele não precisa de CDN externo, serviço de autoimportação nem compilador de templates em tempo de execução. Se um projeto existente usa um plugin de autoimportação, mantenha os estilos gerados consistentes com a estratégia escolhida de importação completa ou por componente. Consulte a especificação de apoio ## Sistema de design Element Plus: as substituições do tema devem preservar as relações entre componentes ### As substituições de tema devem preservar as relações entre os componentes CSS propriedades personalizadas são úteis para alterar papéis compartilhados sem reescrever os seletores de cada componente. O ambiente de trabalho usa as variáveis --el reais para planos de fundo, texto, bordas e cantos. Ele altera apenas os seletores de layout necessários para encaixar o Transfer nativo nesta composição específica. Para um tema de marca mais abrangente, use a abordagem documentada com Sass ou CSS variáveis e examine em conjunto os estados de foco, desativado e ao passar o cursor. Substituir apenas o valor hexadecimal principal em uma captura de tela ignora os tons mais claros das superfícies e as interações mais escuras. A tabela baseada no código-fonte fornece os valores iniciais; a prévia nativa completa permite conferir os efeitos em um componente funcional. Consulte a especificação de apoio ## Element Plus Exemplos de componentes do sistema de design ### Componente completo de seleção de módulos em Vue Um componente de arquivo único que usa Transfer, Card, Alert, Button e Tag nativos. ``` ``` Referência de código - v-model armazena as chaves selecionadas, não os objetos completos das opções. - Uma opção desativada permanece visível, mas não pode ser transferida. - Uma alteração na seleção de Transfer limpa o estado aplicado desatualizado. ### Composição responsiva de Transfer Os estilos preservam os painéis e controles nativos, empilhando-os em telas estreitas. ``` 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}} ``` Referência de código - O ponto de quebra e o layout ao redor são escolhas originais. ## Configuração do agente do sistema de design Element Plus ### Ponto de partida para implementação Verificado com Vue 3 e Element Plus 2.14.7. App.vue fornece o ConfigProvider em inglês e as importações explícitas dos componentes. Todo o estado é 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 ``` ### Um prompt para seu projeto ``` Amplie o seletor de módulos do workspace Element Plus 2.14.7 fornecido usando o ElTransfer nativo. Mantenha os seis módulos com chaves, a entrada Audit desativada, o comportamento de filtragem e o array controlado de chaves selecionadas. Ao aplicar, capture a seleção atual de módulos; edições posteriores devem deixar esse retrato visivelmente desatualizado, enquanto restaurar retorna à seleção inicial. Preserve o layout responsivo de dois painéis e a semântica dos itens desativados, em vez de recriar o Transfer como listas sem relação entre si. Carregue a folha de estilos nativa antes da composição original CSS. ``` ## Fontes e escopo do sistema de design Element Plus Referência nativa de Element Plus 2.14.7. Os nomes dos módulos e as permissões são exemplos originais; a seleção local não instala nada nem altera direitos de acesso. - Transferência Modele chaves, filtragem, dados desativados e slots vazios. - Tematização Variáveis de CSS e personalização com Sass. - Início rápido Configuração de componentes Vue e folhas de estilo. - Config Provider Configuração de localidade. - Cor Funções de cor padrão. - Borda Fundamentos de bordas e formas. ## Recursos relacionados ao sistema de design Element Plus ### Flowbite Uma composição nativa de acordeão e gaveta do Flowbite 4, com aliases de tema semântico verificados, uma lista de conferência de bagagem persistente e um fluxo acessível de anotações locais sobre materiais. ### Fomantic UI Uma estante de leitura nativa do Fomantic UI com valores de tema compilados e verificados, módulos jQuery de menu suspenso e avaliação, suporte explícito a teclado e uma lista local persistente de itens selecionados. ### Foundation Uma bancada funcional de comprovação do Foundation que usa XY Grid, validadores personalizados do Abide, confirmação com Reveal, configurações Sass reais e código completo de integração local. - [Referência de implementação](https://element-plus.org/en-US/component/transfer.html) - [Fonte](https://element-plus.org/en-US/guide/theming.html) - [Fonte](https://element-plus.org/en-US/component/transfer.html) - [Consulte a especificação de apoio](https://element-plus.org/en-US/component/transfer.html) - [Consulte a especificação de apoio](https://element-plus.org/en-US/guide/theming.html) - [Consulte a especificação de apoio](https://element-plus.org/en-US/guide/quickstart.html) - [Referência de código](https://element-plus.org/en-US/component/transfer.html) - [Referência de código](https://element-plus.org/en-US/guide/theming.html) - [Transferência Modele chaves, filtragem, dados desativados e slots vazios.](https://element-plus.org/en-US/component/transfer.html) - [Tematização Variáveis de CSS e personalização com Sass.](https://element-plus.org/en-US/guide/theming.html) - [Início rápido Configuração de componentes Vue e folhas de estilo.](https://element-plus.org/en-US/guide/quickstart.html) - [Config Provider Configuração de localidade.](https://element-plus.org/en-US/component/config-provider.html) - [Cor Funções de cor padrão.](https://element-plus.org/en-US/component/color.html) - [Borda Fundamentos de bordas e formas.](https://element-plus.org/en-US/component/border.html)