Bagaimana untuk Mengikat Kelas CSS dalam Paparan XML UI5 Menggunakan Atribut \'kelas\'?

Mengikat dalam Kawalan dengan Atribut "kelas"

Mengikat kepada kelas CSS dalam paparan XML melalui atribut "kelas" tidak disokong secara langsung oleh UI5. Walau bagaimanapun, penyelesaian menggunakan data tersuai boleh dilaksanakan:

Menggunakan Data Tersuai untuk Mengikat

1. Tambah data tersuai pada kawalan anda, menetapkan sifat writeToDom dan mengikatnya pada ungkapan yang diingini:

   <code class="xml"><Text class="myControl">
     <customData>
       <core:CustomData writeToDom="{= myExpression }" key="green" value="" />
     </customData>
   </Text></code>

   Salin selepas log masuk

2. Tentukan pemilih CSS yang menyasarkan kawalan berdasarkan nilai data tersuai. Contohnya:

   <code class="css">.myApp .sapText.myControl[data-green] { /* ... */ }</code>

   Salin selepas log masuk

Contoh

Dalam contoh berikut, kelas "hijau" ditambahkan pada mengawal apabila sifat "didayakannya" adalah benar:

<code class="xml"><Text class="myControl">
  <customData>
    <core:CustomData writeToDom="{= ${myTable>enabled} ? 'green' : 'red' }" key="green" value="" />
  </customData>
</Text></code>

<code class="css">.myApp .sapText.myControl[data-green] { color: green; }
.myApp .sapText.myControl[data-red] { color: red; }</code>

Pertimbangan

• Walaupun mengikat pada data tersuai membenarkan memanipulasi gaya CSS, perkara berikut adalah penting untuk mempertimbangkan :
• Gaya CSS tersuai harus digunakan dengan berhati-hati, kerana ia boleh memberi kesan kepada konsistensi dan penyelenggaraan UI.
• Terokai penyelesaian alternatif, seperti menggunakan kelas semantik atau pemformat tersuai, sebelum menggunakan CSS tersuai.

Atas ialah kandungan terperinci Bagaimana untuk Mengikat Kelas CSS dalam Paparan XML UI5 Menggunakan Atribut \'kelas\'?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!