# Element Plus Tasarım Sistemi ## Element Plus Tasarım Sistemi Arayüz Önizlemesi İki yerel Aktarım listesi arasında modülleri filtreleyip taşıyın, seçili anahtarları inceleyin ve yerel seçimi uygulayın. ## 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. ### Birincil ve durum renkleri | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | --el-color-primary | #409eff | Varsayılan birincil vurgu rengi. | | --el-color-primary-light-3 | #79bbff | Daha açık etkileşimlerde kullanılan birincil ton. | | --el-color-primary-light-5 | #a0cfff | Orta ton. | | --el-color-primary-light-7 | #c6e2ff | Açık ton. | | --el-color-primary-light-9 | #ecf5ff | Seçim/anahtar paneli için sakin yüzey. | | --el-color-primary-dark-2 | #337ecc | Daha koyu birincil durum. | | --el-color-success | #67c23a | Başarı rolü. | | --el-color-warning | #e6a23c | Uyarı rolü. | | --el-color-danger | #f56c6c | Hata/tehlike rolü. | | --el-color-info | #909399 | Bilgilendirici nötr rol. | ### Anlamsal metinler ve yüzeyler | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | --el-text-color-primary | #303133 | Ana okuma metni. | | --el-text-color-regular | #606266 | Bileşenlerde kullanılan sıradan metin. | | --el-text-color-secondary | #909399 | Yardım ve meta veriler. | | --el-text-color-placeholder | #a8abb2 | Yer tutucu rolü. | | --el-bg-color | #fff | Varsayılan yüzey. | | --el-bg-color-page | #f2f3f5 | Sayfa arka planı. | | --el-bg-color-overlay | #fff | Kaplama yüzeyi. | | --el-border-color | #dcdfe6 | Varsayılan sınır. | | --el-border-color-light | #e4e7ed | Kart/özet için ince sınır. | ### Tipografi, kontroller ve biçim | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | --el-font-family | "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif | Varsayılan yazı tipi tercihi. | | --el-font-size-extra-large | 20px | 20 piksel başlık boyutu. | | --el-font-size-large | 18px | 18 piksel boyutu. | | --el-font-size-medium | 16px | 16 piksel boyutu. | | --el-font-size-base | 14px | 14 piksel temel boyut. | | --el-font-size-small | 13px | 13 piksel boyutu. | | --el-font-size-extra-small | 12px | 12 piksel boyutu. | | --el-border-radius-base | 4px | Standart bileşen köşe yarıçapı. | | --el-border-radius-small | 2px | Küçük köşe yarıçapı. | | --el-component-size-large | 40px | Büyük kontrol yüksekliği. | | --el-component-size | 32px | Varsayılan kontrol yüksekliği. | | --el-component-size-small | 24px | Küçük kontrol yüksekliği. | ### Özgün modül çalışma alanı düzeni | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | Desktop panel arrangement | two panels with 180px reserved between | Yerel Aktarım bileşeni etrafındaki özgün uyarlama. | | Narrow layout | ≤700px: stacked panels | Element Plus belirteci olmayan özgün kesme noktası. | | Page spacing | 32px desktop; 20px 16px mobile | Özgün dış dolgu. | | Summary spacing | 24px padding / 24px gap | Özgün seçili anahtar ve modül özeti düzeni. | ## Element Plus Tasarım Sistemi Eksiksiz Kılavuz Bu sistemi gerçek bir arayüz için seçmeye, uygulamaya ve gözden geçirmeye yönelik pratik bir kılavuz. Eksiksiz yönlendirme, uygulama için başlangıç noktası ve kaynak bağlantıları. ## 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. Destekleyici belirtimi okuyun ## 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. Destekleyici belirtimi okuyun ## 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. Destekleyici belirtimi okuyun ## 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. 1. Kullanılabilir panelinde Review queue için arama yapın. 2. Eşleşen seçeneği işaretleyip Ekle'ye basın. 3. Aramayı temizleyin ve review değerinin model göstergesinde ve hedef listesinde yer aldığını doğrulayın. Destekleyici belirtimi okuyun ## 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. Destekleyici belirtimi okuyun ## 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. Destekleyici belirtimi okuyun ## 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. Destekleyici belirtimi okuyun ## Element Plus Tasarım Sistemi: Vue Bileşenini Derleyip CSS Yükleme ### Vue Bileşenini Derleyin ve CSS Yükleyin Vue 3 Vite projesinde element-plus@2.14.7 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. Destekleyici belirtimi okuyun ## 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. Destekleyici belirtimi okuyun ## Element Plus Tasarım Sistemi Bileşen Örnekleri ### Tam Vue modül seçimi bileşeni Yerel Transfer, Card, Alert, Button ve Tag bileşenlerini kullanan tek dosyalı bir bileşen. ``` ``` Kod referansı - v-model, seçenek nesnelerinin tamamını değil, seçili anahtarları saklar. - Devre dışı bir seçenek görünür kalır ancak aktarılamaz. - Aktarım seçimini değiştirmek, artık geçerli olmayan uygulanan durumu temizler. ### Duyarlı Transfer düzeni Stiller, dar ekranlarda üst üste dizilirken yerel panelleri ve kontrolleri korur. ``` 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}} ``` Kod referansı - Kesme noktası ve çevresindeki düzen özgün tercihlerdir. ## 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. ``` // 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 ``` ### Projeniz İçin Bir İstem ``` 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. ``` ## 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. - Transfer Model anahtarları, filtreleme, devre dışı veriler ve boş yuvalar. - Tema oluşturma CSS değişkenleri ve Sass özelleştirmesi. - Hızlı başlangıç Vue bileşeni ve stil sayfası kurulumu. - Config Provider Yerel ayar yapılandırması. - Renk Varsayılan renk rolleri. - Kenarlık Kenarlık ve şekil temelleri. ## Element Plus Tasarım Sistemi İlgili Kaynaklar ### Flowbite Doğrulanmış anlamsal tema takma adları, kalıcı bir paketleme kontrol listesi ve erişilebilir, yerel bir malzeme notu iş akışı içeren yerel bir Flowbite 4 akordeon ve çekmece düzeni. ### Fomantic UI Doğrulanmış derlenmiş tema değerleri, jQuery açılır menü ve puanlama modülleri, açık klavye desteği ve kalıcı yerel kısa liste içeren yerel bir Fomantic UI okuma rafı. ### Foundation XY Grid, Abide özel doğrulayıcıları, Reveal onayı, gerçek Sass ayarları ve eksiksiz yerel entegrasyon koduyla çalışan bir Foundation kanıt masası. - [Uygulama başvurusu](https://element-plus.org/en-US/component/transfer.html) - [Kaynak](https://element-plus.org/en-US/guide/theming.html) - [Kaynak](https://element-plus.org/en-US/component/transfer.html) - [Destekleyici belirtimi okuyun](https://element-plus.org/en-US/component/transfer.html) - [Destekleyici belirtimi okuyun](https://element-plus.org/en-US/guide/theming.html) - [Destekleyici belirtimi okuyun](https://element-plus.org/en-US/guide/quickstart.html) - [Kod referansı](https://element-plus.org/en-US/component/transfer.html) - [Kod referansı](https://element-plus.org/en-US/guide/theming.html) - [Transfer Model anahtarları, filtreleme, devre dışı veriler ve boş yuvalar.](https://element-plus.org/en-US/component/transfer.html) - [Tema oluşturma CSS değişkenleri ve Sass özelleştirmesi.](https://element-plus.org/en-US/guide/theming.html) - [Hızlı başlangıç Vue bileşeni ve stil sayfası kurulumu.](https://element-plus.org/en-US/guide/quickstart.html) - [Config Provider Yerel ayar yapılandırması.](https://element-plus.org/en-US/component/config-provider.html) - [Renk Varsayılan renk rolleri.](https://element-plus.org/en-US/component/color.html) - [Kenarlık Kenarlık ve şekil temelleri.](https://element-plus.org/en-US/component/border.html)