Gradient¶

Trong chương này, bạn sẽ khám phá cách:

Thêm gradient vào một section hoặc một tiêu đề.
Thêm gradient tùy chỉnh vào bảng màu của Website Builder.

Tiêu chuẩn¶

Theo tiêu chuẩn, một số gradient có thể được chọn trực tiếp từ Website Builder. Tuy nhiên, đối với các theme tùy chỉnh, gradient phải được thêm trực tiếp vào thẻ section bằng thuộc tính style.

Sử dụng

<section class="s_text_image" data-snippet="s_text_image" data-name="Text - Image" style="background-image: linear-gradient(135deg, rgb(255, 204, 51) 0%, rgb(226, 51, 255) 100%) !important;">
    <!-- Content -->
</section>

Để áp dụng gradient cho văn bản, hãy sử dụng thẻ font với class text-gradient.

<h2>
    <font class="text-gradient" style="background-image: linear-gradient(135deg, rgb(203, 94, 238) 0%, rgb(75, 225, 236) 100%);">A Section Subtitle</font>
</h2>

Tùy chỉnh¶

Thêm một gradient tùy chỉnh vào Website Builder. Bằng cách này, người dùng có thể dễ dàng sử dụng chúng mà không cần tạo lại thủ công.

/website_airproof/data/gradients.xml¶

<record id="colorpicker" model="ir.ui.view">
   <field name="key">website_airproof.colorpicker</field>
   <field name="name">Custom Gradients</field>
   <field name="type">qweb</field>
   <field name="inherit_id" ref="web_editor.colorpicker"/>
   <field name="arch" type="xml">
      <xpath expr="//div[@data-name='predefined_gradients']/t[@t-set='gradients']" position="after">
         <t t-set="gradients" t-value="gradients + ['linear-gradient(135deg, rgb(203, 94, 238) 0%, rgb(75, 225, 236) 100%)']" />
      </xpath>
   </field>
</record>