Modül seçimi için bir çalışma alanı oluştururken Element Plus’ın gerçek Transfer modelini, filtrelerini ve devre dışı seçeneklerini kullanın; doğrulanmış renkler, yazı boyutları ve kontrol ölçüleriyle destekleyin.
Vue 3 ve İngilizce ConfigProvider ile yerel Element Plus 2.14.7. · Uygulama başvurusu
02
Element Plus Tasarım Sistemi Tasarım Başvurusu
Element Plus 2.14.7 varsayılan derlenmiş CSS. Anlamsal takma adlar dâhil değişkenler, paketteki değerlerle doğrulanmıştır. Aktarım düzeni, sistem temelinden ayrı olarak özgün duyarlı yerleşim kurallarını kullanır.
Element Plus Tasarım Sistemi: Aktarım Listesinde İki Tür Seçim Bulunur
Aktarım Listesinde İki Tür Seçim Bulunur
Element Plus Aktarım bileşeni, seçili öğeleri taşımaya yönelik kontrollerle kullanılabilir ve hedef listelerini sunar. Modül çalışma alanında gerçek 2.14.7 Vue bileşeni kullanılır. v-model, başlangıçta catalog ve tokens olan hedef anahtarlarını içerir. Bir listedeki onay kutusu, sonraki aktarım işlemi için bir öğeyi işaretler; öğenin zaten hedefe ait olduğu anlamına gelmez.
Bu ayrım, canlı model göstergesinde görünür hâle gelir. Kaynak listedeki bir öğeyi işaretlemek, onu Ekle işlemi için hazırlar. Ekle'ye basıldığında hedef anahtar dizisi değişir, seçili modül özeti güncellenir ve önceden uygulanmış tüm sonuçlar temizlenir. Böylece kullanıcı, iki statik listeye bakarak tahmin yürütmek yerine kitaplığın model sözleşmesini görebilir.
Element Plus Tasarım Sistemi: Varsayılan Roller ve Bileşenlerin Gerçek Boyutları
Varsayılan Roller ve Bileşenlerin Gerçek Boyutları
Element Plus; --el-color-primary ile bunun açık/koyu türevlerini, durum rollerini, metin renklerini ve yüzey değişkenlerini sunar. Tabloda yüklü pakette derlenmiş gerçek değerler gösterilir. Çevresindeki anahtar panelinde primary-light-9 ve sıradan metin, işlem düğmesinde ise yerel birincil görünüm kullanılır.
Varsayılan tipografi, on dört piksellik temel boyutun yanı sıra on iki, on üç, on altı, on sekiz ve yirmi piksellik yardımcı boyutları içerir. Bileşen boyutu değişkenleri küçük/varsayılan/büyük kontrol boyutlarını tanımlar. Bunlar, sayfa düzeninin boşluk ölçeğiyle karıştırılmamalıdır. Çalışma alanındaki yirmi dört piksellik aralıklar ve otuz iki piksellik dış dolgu, özgün yerleşim için açıkça belirlenmiş tercihlerdir.
Element Plus Tasarım Sistemi: Kararlı Anahtarlar, Etiketler ve Devre Dışı Seçenekler
Kararlı Anahtarlar, Etiketler ve Devre Dışı Seçenekler
Her seçeneğin bir anahtarı, etiketi ve devre dışı bırakılma durumu vardır. Seçili dizi bu anahtarlardan oluşur; böylece kimlik değişmeden etiketler değiştirilebilir. Örnek modüller Asset catalog, Token inspector, Review queue, Version history ve Cross-project search seçeneklerini içerir. Audit export, görünür ancak kullanılamaz bir seçeneği göstermek için devre dışı bırakılmıştır.
Bu örnekte kullanılabilirlik, sabit bir gösterim verisidir. Bu, bir yetkilendirme denetimi ya da bu modüllerin yüklenebilir ürünler olarak bulunduğuna dair bir vaat değildir. Gerçek bir uygulamada seçenek kaynağı ve izin kuralları ürünün modelinden gelmelidir. Bir Aktarım onay kutusuna tıklanabiliyor olmasından yetki çıkarımı yapmayın.
Element Plus Tasarım Sistemi: Arama, Üyeliği Değil Görünürlüğü Değiştirir
Arama, Üyeliği Değil Görünürlüğü Değiştirir
filterable, panellere birbirinden bağımsız arama alanları ekler. Arama yer tutucusu, Modül bul gibi somut bir işlem sunar. Varsayılan filtreleme, seçenek etiketleriyle eşleşir. Arama sırasında seçili bir öğe hedef listesinin görünümünden kaybolabilir; ancak seçili anahtar dizisinden kaldırılmaz. Özet ve gösterge, hedef kümesinin tamamını göstermeye devam eder.
Özelleştirilmiş sol-boş ve sağ-boş yuvalar, eşleşen seçeneği olmayan bir paneli hiçbir şeyin seçili olmadığı genel durumdan ayırır. Sayfa ayrıca hedef dizisi boş olduğunda Uygula düğmesini yerel olarak devre dışı bırakır. Bunlar birbirinden ayrı durumlardır: arama eşleşmesi bulunmaması, seçili modül olmadığı anlamına gelmez.
Kullanılabilir panelinde Review queue için arama yapın.
Eşleşen seçeneği işaretleyip Ekle'ye basın.
Aramayı temizleyin ve review değerinin model göstergesinde ve hedef listesinde yer aldığını doğrulayın.
Element Plus Tasarım Sistemi: Mobilde İki Liste Arasındaki İlişkiyi Koruyun
Mobilde İki Liste Arasındaki İlişkiyi Koruyun
Yerel Aktarım panelleri masaüstünde yan yana yerleştirilir; Ekle ve Kaldır işlemleri için ayrılmış bir alan bulunur. Ekran genişliği yedi yüz pikseli aşmadığında paneller üst üste dizilir ve işlem düğmeleri aralarında yatay bir sıra oluşturur. Kullanılabilir modüller ve Çalışma alanı modülleri başlıkları, taşıma yönünün anlaşılır kalmasını sağlar.
Çalışma alanı, telefona sığdırmak için tüm kontrolü küçültmez. Etiketleri, onay kutularını, arama alanlarını ve liste içeriğini okunabilir doğal boyutlarında tutarken yerleşimi uyarlar. Seçili anahtar göstergesi ve metinsel özet aşağıda tek sütuna taşınır; böylece daha küçük bir kesme noktasında gizlenmek yerine aynı bilgiler korunur.
Element Plus Tasarım Sistemi: Taslak Üyelik ve Uygulanan Anlık Görüntü
Taslak Üyelik ve Uygulanan Anlık Görüntü
Yerel olarak uygula, seçili anahtar dizisini kopyalar. Sonraki bir aktarım değişikliği, uygulanan durumu temizler; böylece kullanıcı taslak üyeliğini değiştirdikten sonra başarı bildirimi görünmeye devam etmez. Başlangıç kümesini geri yükle, yeni bir katalog/token dizisi atar ve uygulanan sonucu da temizler. Durum geçişleri Vue kaynağında birkaç açık satırla belirtilmiştir.
Bildirim yalnızca yerel önizleme seçiminin uygulandığını belirtir. Yükleme, yetki değişikliği veya harici güncelleme yapıldığını iddia etmez. Gerçek bir ayarlar ekranında uygulanan anlık görüntünün, onaylanmış bir kalıcılık sonucuyla eşleşmesi gerekir; tek başına bir bileşen olayı sunucu onayı değildir.
Element Plus Tasarım Sistemi: Yerel Kontroller ve Anlaşılır Yönergeler
Yerel Kontroller ve Anlaşılır Yönergeler
Örnek, yerel Transfer onay kutularını ve aktarım düğmelerini kullanır. Yalnızca yön simgeleri bırakmak yerine düğme metinleri Kaldır ve Ekle olarak ayarlanmıştır. Bu, listeler dikey olarak üst üste geldiğinde özellikle kullanışlıdır. Panel başlıkları kaynak/hedef rollerini, yardım cümlesi ise önce seçip sonra taşıma sırasını açıklar.
Devre dışı seçenek bağlam içinde kalır ve boş panel yuvaları eşleşen seçenek olmadığını belirtir. Klavye kullananlar, özel ve yalnızca fareyle kullanılabilen işleyicilere ihtiyaç duymadan arama alanlarına, onay kutularına ve düğmelere ulaşabilmelidir. Bileşen kendi iç işleyişini yönetir; uygulama, bu yapıyı yalnızca seçim kontrollerine benzeyen görsel satırlarla değiştirmez.
Panel başlıkları hangi listenin hedef olduğunu belirtir.
Metin etiketleri, üst üste dizilmiş düzende aktarım yönünü açık tutar.
Canlı model çıktısı, görünmeyen seçili öğelerin bulunabilmesini sağlar.
Element Plus Tasarım Sistemi: Vue Bileşenini Derleyip CSS Yükleme
Vue Bileşenini Derleyin ve CSS Yükleyin
Vue 3 Vite projesinde [email protected] paketini yükleyin ve özgün düzen CSS dosyasından önce element-plus/dist/index.css dosyasını içe aktarın. Tam App.vue dosyası script setup kullanır ve bileşenlerini doğrudan içe aktarır. ElConfigProvider'a İngilizce yerel ayarı verilir; böylece yerleşik panel ve boş durum metinleri İngilizce referans sayfayla tutarlı kalır.
Üretim tarzı olarak sunulan kurulum, Vue Vite eklentisi üzerinden App.vue dosyasını içe aktarır. Çevrimdışı örnek, aynı tek dosyalı bileşen derlenip yerel olarak paketlenerek oluşturulmuştur. Harici CDN, otomatik içe aktarma hizmeti veya çalışma zamanında şablon derleyicisi gerekmez. Mevcut bir projede otomatik içe aktarma eklentisi kullanılıyorsa, oluşturulan stilleri seçilen tüm bileşenleri veya bileşen başına içe aktarma stratejisiyle tutarlı tutun.
Element Plus Tasarım Sistemi: Tema Geçersiz Kılmaları Bileşen İlişkilerini Korumalıdır
Tema Geçersiz Kılmaları Bileşen İlişkilerini Korumalıdır
CSS özel özellikleri, her bileşen seçicisini yeniden yazmadan paylaşılan rolleri değiştirmek için kullanışlıdır. Çalışma alanı arka plan, metin, kenarlık ve köşe değerleri için gerçek --el değişkenlerini kullanır. Bu özel yerleşimde yerel Transfer bileşenini sığdırmak için yalnızca gerekli düzen seçicilerini değiştirir.
Daha kapsamlı bir marka teması için belgelenmiş Sass veya CSS değişken yaklaşımını kullanın; üzerine gelme, devre dışı ve odak durumlarını birlikte inceleyin. Tek bir ekran görüntüsünde yalnızca ana hex değerini değiştirmek, daha açık yüzeyleri ve daha koyu etkileşim durumlarını gözden kaçırır. Kaynaklara dayalı tablo başlangıç değerlerini sunar; yerel önizlemenin tamamı ise okurun sonuçları çalışan bir bileşende incelemesini sağlar.
Yerel Transfer, Card, Alert, Button ve Tag bileşenlerini kullanan tek dosyalı bir bileşen.
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>
Kesme noktası ve çevresindeki düzen özgün tercihlerdir.
04
Element Plus Tasarım Sistemi Aracı Kurulumu
Uygulamaya Başlangıç Noktası
Vue 3 ve Element Plus 2.14.7 ile doğrulanmıştır. App.vue, İngilizce ConfigProvider'ı ve açık bileşen içe aktarımlarını sağlar. Tüm durum yereldir.
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
Projeniz İçin Bir İstem
Ajan İstemi
Sağlanan Element Plus 2.14.7 çalışma alanı modül seçicisini, yerel ElTransfer kullanarak genişletin. Altı anahtarlı modülü, devre dışı Audit öğesini, filtreleme davranışını ve denetlenen seçili anahtar dizisini koruyun. Uygulama işlemi geçerli modül seçimini kaydetmeli; sonraki düzenlemeler bu anlık görüntünün güncelliğini yitirdiğini görünür kılmalı, geri yükleme ise ilk seçime dönmelidir. Transfer'ı ilgisiz listeler olarak yeniden oluşturmaktansa duyarlı iki panelli düzeni ve devre dışı öğe davranışlarını koruyun. Yerel stil sayfasını özgün düzen CSS dosyasından önce yükleyin.
05
Element Plus Tasarım Sistemi Kaynakları ve Kapsamı
Element Plus 2.14.7 yerel referansı. Modül adları ve izinler özgün örneklerdir; yerel seçim herhangi bir yükleme veya yetki değişikliği yapmaz.
