渐变

在本章中，您将了解如何：

• 为区域或标题添加渐变。

• 将自定义渐变添加到网站构建器的调色板中。

标准

在标准情况下，可以直接从网站构建器中选择多种渐变。但是，对于自定义主题，必须使用 style 属性将渐变直接添加到 section 标签中。

用法

<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>

要将渐变应用于文本，请使用带有 text-gradient 类的 font 标签。

<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>

自定义

将自定义渐变添加到网站构建器。这样，用户无需手动重新创建它们，就能轻松使用。

/website_airproof/static/src/website_builder/gradients.js

import { ColorPickerGradientTab } from "@html_editor/main/font/color_picker_gradient_tab";
import { registry } from "@web/core/registry";
import { _t } from "@web/core/l10n/translation";

export class AirproofColorPickerGradientTab extends ColorPickerGradientTab {
   setup() {
      super.setup();
      this.DEFAULT_GRADIENT_COLORS = [
         ...this.DEFAULT_GRADIENT_COLORS,
         "linear-gradient(0deg, rgb(41, 128, 187) 0%, rgb(11, 142, 230) 100%)",
      ];
   }
}

const colorPickerTabs = registry.category("color_picker_tabs");

colorPickerTabs.remove("html_editor.gradient");
colorPickerTabs.add(
   "html_editor.gradient",
   {
      id: "gradient",
      name: _t("Gradient"),
      component: AirproofColorPickerGradientTab,
   },
   { sequence: 60 }
);

注解

将 JavaScript 文件添加到 website.website_builder_assets 资源包中，以便编辑器加载它。