Karınca Tasarımını Kullanarak Bir Tepki Temasını Özelleştirme

İyi bir Kullanıcı Arayüzü (UI) tasarımının, web sitesi kitlenizin ilgisini çekmede ve onları bir dönüşüme yönlendirmede büyük bir rol oynadığını söylemek biraz abartı olur. Herhangi bir iyi UI, etkileşimli, sezgisel, zengin ve erişilebilir tasarım gerektirse de - görünüşte göz korkutucu bir zorluk - bunu oluşturmak için yüksek kaliteli bileşenler ve kitaplıklar kullandığınızda elde edilebilir.

Bunlardan en popüler olanı Karınca tasarımıdır. Zarif ve hızlı kullanıcı arayüzleri oluşturmak için kullanımı kolay, kaliteli bileşenlere erişimi olan bir React UI kitaplığıdır.

Neden Karınca Tasarım?

Alibaba tarafından oluşturulan Ant tasarım sistemi, Alibaba (elbette), Tencent, Baidu ve daha pek çok büyük isim tarafından kullanılıyor.

Hızla en çok kullanılan React UI kütüphanesi haline geldi. Önceden Material-UI, Github'da 75 binin üzerinde yıldızla en popüler olanıydı, ancak Ant Design şimdi 77.5k ile onları geride bıraktı!

Karınca tasarımının bu kadar iyi yaptığı şey, tasarımlarını insancıllaştırmaktır. Tasarımın kalitesini, insan bilinci ve mutluluk merkezli dört değere göre ölçerek değerlendirirler - doğallık, kesinlik, anlamlılık ve büyüme. Bunlar tasarımcılar için bir standart görevi görür ve karar vermede ve daha iyi muhakemede onlara rehberlik eder.

Karınca Tasarım Bileşenleri

Karınca tasarımı (veya antd), web sitenizi veya uygulama deneyiminizi geliştirebilecek birçok zengin UI bileşeni sunar. Aşağıda bazılarına göz atın, ancak daha fazla seçenek için burayı ziyaret edin.

Evrensel Bileşenler: Düğmeler, simgeler, tipografi vb.

Düzenler: Izgaralar, düzenler, boşluklar vb.

Gezinme: Ekmek kırıntıları, menüler, açılır menüler vb.

Veri Girişi: Otomatik tamamlama, onay kutusu, tarih seçici vb.

Veri Görüntüleme: Avatar, yorumlar, katlanabilir paneller vb.

React ve Ant Design Kurulumu

Artık Ant tasarımında hangi bileşenlerin mevcut olduğunu bildiğimize göre, React'in temel kurulum sürecini öğrenelim ve ardından Ant tasarımını ona yükleyelim.

React projesini kurmak için iplik veya npm kullanabilirsiniz. Aşağıda, React'i kurmak ve kurmak için temel komutlar verilmiştir:

 $ yarn create react-app antd-demo # or $ npx create-react-app antd-demo $ cd antd-demo $ yarn start

React yüklendikten sonra, çalışan uygulamayı tarayıcıda görebilirsiniz.

Bu, yeni oluşturulan projede varsayılan olarak oluşturulan dizindir. İleride, nihai çıktıyı elde etmek için buradaki bazı dosyaları değiştireceğiz.

 ├── README.md ├── package.json ├── public │ ├── favicon.ico │ └── index.html ├── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── index.css │ ├── index.js │ └── logo.svg └── yarn.lock

Şimdi React'i kurduktan sonra şu komutla Ant tasarımını kuralım:

 $ yarn add antd

Antd'yi kurduktan sonra, projenizdeki src klasörünün içindeki App.js'deki işaretlemeyi değiştirerek Ant bileşenlerini kullanabilirsiniz. Burada Ant'tan bir düğme öğesi ekliyorum.

 import React from 'react'; import { Button } from 'antd'; import './App.css'; const App = () => ( <div className="App"> <Button type="primary">Button</Button> </div> ); export default App;

Karınca düğmesi bileşeni:

Uygulamayı kaydedip çalıştırdıktan sonra, tarayıcıda Ant birincil düğme öğesini mavi renkte görebileceksiniz (yukarıda gösterildiği gibi). Bu, Ant'ın React'e başarıyla entegre olduğu anlamına gelir.

Bir Temayı Özelleştirme

Ant Design'ı React ile entegre etmenin en iyi yanı, birincil renk, kenarlık yarıçapı, kenarlık rengi vb. dahil olmak üzere iş veya marka gereksinimlerinden UI çeşitliliğini karşılamak için tasarım belirteçlerinizi özelleştirmenize olanak sağlamasıdır.

Resim kredisi: Intoli

Bu özelleştirmeye izin vermek için bazı gelişmiş yapılandırmalar yapmanız gerekecektir.

Gelişmiş Yapılandırma:

Bu noktada, create-react-app'in varsayılan yapılandırmalarını özelleştirmeniz gerekir. Create-react-app'in özel konfigürasyonu için bir topluluk çözümü olan CRACO'yu (Create React App Configuration Override) kullanalım.

Adım 1: İlk önce CRACO'yu kurmanız ve package.json'da varsayılan React-script'i CRACO ile değiştirmeniz gerekecektir.

 $ yarn add @craco/craco /* package.json */ "scripts": { - "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test", + "start": "craco start", + "build": "craco build", + "test": "craco test", }

Temayı yapılandırma gereksinimlerine göre, özel temanın, less yükleyici tarafından sağlanana benzer Daha az değişken geçersiz kılma işlevini kullanması gerekir. Daha az stil yüklemeye ve değişkenleri değiştirmeye yardımcı olmak için Craco-less'ı tanıtabiliriz.

 $ yarn add craco-less

Adım 2: src/App.css dosyasını src/ App.less olarak değiştirin ve antd.less dosyasını app.less içindeki antd.css üzerinden içe aktarın

 /* src/App.js */ - import './App.css'; + import './App.less'; /* src/App.less */ - @import '~antd/dist/antd.css'; + @import '~antd/dist/antd.less';

Adım 3: Varsayılan yapılandırmayı değiştirmek için kök dizinde craco.config.js oluşturun.

 const CracoLessPlugin = require('craco-less'); module.exports = { plugins: [ { plugin: CracoLessPlugin, options: { lessLoaderOptions: { lessOptions: { modifyVars: { '@primary-color': '#1DA57A' }, javascriptEnabled: true, }, }, }, }, ], };

Burada, daha az yükleyici, tema yapılandırması için kullanılan changeVars'tır .

Yeşil bir düğme görürseniz, yapılandırmanın başarılı olduğunu biliyorsunuzdur. Artık, sağlanan belirteçleri/değişkenleri kullanarak temayı kendi renk kümenizle özelleştirebilirsiniz.

Karınca Tasarım Stil Değişkenleri

Aşağıda en sık kullanılan genel değişkenlerden bazıları verilmiştir. Mevcut tüm stil değişkenleri hakkında ayrıntılı bilgi almak için burayı ziyaret edebilirsiniz.

 @primary-color: #1890ff; // primary color for all components @link-color: #1890ff; // link color @success-color: #52c41a; // success state color @warning-color: #faad14; // warning state color @error-color: #f5222d; // error state color @font-size-base: 14px; // major text font size @heading-color: rgba(0, 0, 0, 0.85); // heading text color @text-color: rgba(0, 0, 0, 0.65); // major text color @text-color-secondary: rgba(0, 0, 0, 0.45); // secondary text color @disabled-color: rgba(0, 0, 0, 0.25); // disable state color @border-radius-base: 2px; // major border radius @border-color-base: #d9d9d9; // major border color @box-shadow-base: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05); // major shadow for layers