Gaya CSS

2024-02-03

Penting

Proyek ini adalah rilis eksperimental. Kami harap Anda mencoba Experimental Mobile Blazor Bindings dan memberikan umpan balik di https://github.com/xamarin/MobileBlazorBindings.

Gambaran Umum

Aplikasi yang dibangun menggunakan Pengikatan Blazor Seluler memiliki berbagai gaya yang dapat diterapkan untuk mengontrol tampilan UI. Gaya ini dapat diterapkan langsung ke komponen atau dapat diterapkan menggunakan Cascading Style Sheets (CSS). Beberapa keuntungan menggunakan CSS alih-alih gaya langsung adalah memungkinkan pemisahan kekhawatiran yang lebih baik (yaitu, menjaga gaya komponen terpisah dari tata letak dan fungsionalitasnya) dan memungkinkan berbagi CSS dengan media lain (misalnya, aplikasi web).

Menyertakan CSS dalam proyek

Untuk menambahkan CSS ke proyek Pengikatan Blazor Seluler:

Dalam proyek UI bersama aplikasi Anda klik kanan pada folder apa pun dan pilih Tambahkan --> Tambahkan Item Baru dan pilih jenis item Lembar Gaya (jika Anda tidak dapat menemukannya, gunakan fitur pencarian untuk menemukan style sheet).
Pilih nama yang sesuai untuk lembar gaya Anda dan tekan Tambahkan.
Edit konten file CSS sesuai kebutuhan (lihat di bawah ini untuk gaya yang didukung). Misalnya, untuk mengatur semua label agar memiliki large ukuran font:
```
label {
    font-size: large;
}
```
.razor Buka file tempat Anda ingin menggunakan CSS.

Catatan

Banyak aplikasi akan memiliki satu file CSS yang disertakan dalam halaman utama aplikasi.
Tambahkan markup berikut ke .razor file, biasanya di tingkat atas file. Mengubah nama dan jalur file CSS agar sesuai dengan apa yang Anda buat:
```
<StyleSheet Resource="folder/MyStyles.css" Assembly="GetType().Assembly"></StyleSheet>
```

Catatan

Dukungan CSS memerlukan referensi Xamarin.Forms 4.5 atau yang lebih baru. Untuk memperbarui referensi ini, kelola paket NuGet untuk solusi dan pastikan bahwa solusinya menggunakan versi Xamarin.Forms yaitu 4.5 atau yang lebih baru. Versi Mendatang dari Pengikatan Blazor Seluler akan menyertakan versi ini secara default.

Menerapkan CSS ke komponen

Gaya CSS dideklarasikan dalam file CSS menggunakan sintaks CSS standar. Gaya ditentukan menggunakan pemilih, yang memungkinkan penerapan gaya berdasarkan jenis elemen, kelas dasar, nama, atribut kelas, dan beberapa cara lain (lihat di bawah ini untuk referensi Xamarin.Forms).

.razor Dalam file pada setiap komponen yang memungkinkan gaya CSS Anda dapat mengatur kelas atau nama melalui class properti dan StyleId , masing-masing.

Catatan

Elemen yang mendukung gaya CSS juga memiliki StyleClass properti , yang setara class dengan properti . Jika Anda perlu menggunakan class properti secara terprogram dari C#, gunakan sintaks @classescape , seperti myElement.@class, atau gunakan StyleClass properti , seperti myElement.StyleClass.

Contoh file CSS:

/* this rule applies to all labels */
label {
    font-size: large;
}

/* these rules apply only when this class is specified */
.happyText {
    color: green;
}

.sadText {
    color: red;
}

Contoh cuplikan file Razor:

<Label Text="Seattle" /> @* no class specified, so only 'label' rule applied *@
<Label class="happyText" Text="Weather: good" /> @* class is specified, so 'label' rule and '.happyText' rules applied *@
<Label class="sadText" Text="Traffic: bad" /> @* class is specified, so 'label' rule and '.sadText' rules applied *@

Gaya CSS yang didukung

Karena komponen UI bawaan didasarkan pada kontrol Xamarin.Forms, lihat Aplikasi Styling Xamarin.Forms menggunakan CSS untuk mempelajari lebih lanjut tentang fitur ini dan gaya mana yang dapat diterapkan ke komponen mana.

Pemecahan Masalah

Atur Tindakan Build ke sumber daya Tersemat

Saat menambahkan file CSS baru di Visual Studio, file CSS harus secara otomatis diatur Build Action ke Embedded resource untuk memastikan file tersebut disertakan dalam proyek bawaan. Jika tidak, klik kanan pada file CSS, pilih Properti, dan atur Build Action ke Embedded resource.

Gunakan sintaks jalur yang benar untuk CSS dalam sub-folder

Jika file CSS terletak di folder, tentukan namanya menggunakan jalurnya dengan garis miring maju sebagai pemisah jalur. Misalnya, jika file CSS adalah <PROJECT ROOT>/assets/styles/MyApp.css, maka markup untuk menyertakannya dalam .razor file adalah:

<StyleSheet Resource="assets/styles/MyApp.css" Assembly="GetType().Assembly"></StyleSheet>

Bagikan melalui