[ English | 中文 (简体, 中国) | русский | português (Brasil) | नेपाली | 한국어 (대한민국) | Indonesia | français | español | esperanto | English (United Kingdom) | Deutsch ]
Styling di Horizon (SCSS)¶
Horizon menggunakan SCSS (jangan bingung dengan Sass) untuk men-style HTML-nya. Panduan ini ditargetkan untuk pengembang yang menambahkan kode ke Horizon hulu. Untuk informasi tentang cara membuat branding/theming Anda sendiri, lihat Kustomisasi Horizon.
Code Layout¶
SCSS dasar dapat ditemukan di openstack_dashboard/static/dashboard/scss/
. Direktori ini seharusnya only berisi styling minimal untuk kode fungsi yang tidak dapat dikonfigurasi oleh tema. horizon.scss
adalah file tingkat atas yang mengimpor dari direktori components/
, serta file styling dasar lainnya; berpotensi beberapa aturan tata letak halaman dasar yang diandalkan Horizon untuk berfungsi.
Catatan
Saat ini, banyak tema juga disimpan dalam file horizon.scss
di direktori ini, tetapi itu akan berkurang ketika kita melanjutkan dengan desain kode baru.
Stylesheet tema `` default`` Horizon dapat ditemukan di``openstack_dashboard/themes/default/``.
├── _styles.scss
├── _variables.scss
├── bootstrap/
└── ...
└── horizon/
└── ...
Level atas _styles.scss
dan _variables.scss
berisi impor dari direktori bootstrap
dan horizon
.
Direktori "bootstrap"¶
Direktori ini berisi penggantian dan penyesuaian variabel Bootstrap, dan markup yang digunakan oleh komponen Bootstrap. Ini harus only menggantikan konten Bootstrap yang ada. Untuk contoh komponen ini, lihat Theme Preview Panel.
bootstrap/
├── _styles.scss
├── _variables.scss
└── components/
├── _component_0.scss
├── _component_1.scss
└── ...
_styles.scss
mengimpor SCSS yang ditentukan untuk setiap komponen._variables.scss
berisi definisi untuk setiap variabel Bootstrap. Variabel-variabel ini dapat diubah untuk memengaruhi tampilan dan nuansa tema default Horizon.Direktori
components
berisi override untuk komponen Bootstrap, seperti tabel atau navbars.
Direktori "horizon"¶
Direktori ini berisi SCSS yang benar-benar spesifik untuk Horizon; kode di sini seharusnya not menggantikan konten Bootstrap yang ada, seperti variabel dan aturan.
horizon/
├── _styles.scss
├── _variables.scss
└── components/
├── _component_0.scss
├── _component_1.scss
└── ...
_styles.scss
mengimpor SCSS yang ditentukan untuk setiap komponen. Mungkin juga mengandung beberapa penimpaan styling minor._variables.scss
berisi definisi variabel yang spesifik untuk tema horizon. Ini seharusnya not mengesampingkan variabel bootstrap apa pun, hanya mendefinisikan yang baru. Namun Anda dapat, mewarisi variabel bootstrap untuk digunakan kembali (dan didorong untuk melakukannya jika memungkinkan).Direktori
components
berisi styling untuk setiap komponen individual yang ditentukan oleh Horizon, seperti bagan sidebar atau pie charts.
Menambahkan SCSS baru¶
Agar Horizon mudah digunakan, ada beberapa pedoman desain kode yang harus dipatuhi:
Gunakan kembali variabel Bootstrap jika memungkinkan. Ini memungkinkan tema untuk memengaruhi gaya dengan hanya mengganti beberapa variabel yang ada, daripada menulis ulang potongan besar file SCSS.
Jika Anda tidak dapat menggunakan variabel yang ada - seperti untuk fungsionalitas yang sangat spesifik - pertahankan aturan baru sespesifik mungkin untuk komponen Anda sehingga tidak menimbulkan masalah di tempat yang tidak terduga.
Periksa apakah komponen yang ada sesuai dengan use case Anda. Mungkin ada komponen yang sudah ada didefinisikan oleh Bootstrap atau Horizon yang dapat digunakan kembali, daripada menulis yang baru.
Theme Preview Panel (panel pratinjau tema)¶
Panel Bootstrap Theme Preview berisi contoh-contoh semua markup stock Bootstrap dengan tema yang sedang diterapkan, serta kode sumber untuk mereplikasi mereka; klik simbol </>
saat mengarahkan kursor ke suatu komponen.
Untuk mengaktifkan dasbor Developer dengan panel Theme Preview:
Atur setting DEBUG ke
True
.Salin
_9001_developer.py
and_9010_preview.py
dariopenstack_dashboard/contrib/developer/enabled/
keopenstack_dashboard/local/enabled/
.Mulai ulang server web.
Tema Alternatif¶
Tema kedua disediakan secara default di openstack_dashboard/themes/material/
. Saat menambahkan SCSS baru ke horizon, Anda harus memeriksa bahwa itu tidak mengganggu tema Material. Images tentang bagaimana tema Material seharusnya terlihat dapat ditemukan di https://bootswatch.com/3/paper/. Tema ini sekarang dikonfigurasi untuk dijalankan sebagai tema alternatif dalam Horizon.