面粉UI 样式

面粉模板中的样式 UI 元素( 如 @ flourish/ controls) .

如何安装

npm install -s @flourish/ui-styles

向模板状态添加一个或多个控制样式对象 :

export var state = {
    controls_style: {},
    button_style: {},
    dropdown_style: {},
    slider_style: {},
    searchbox_style: {},
}

导入用于控制样式的设置 template.yml 设置.

- property: controls_style
  import: "@flourish/ui-styles/controls-style"
- property: dropdown_style
  import: "@flourish/ui-styles/dropdown-style"
- property: button_style
  import: "@flourish/ui-styles/button-style"
- property: slider_style
  import: "@flourish/ui-styles/slider-style"
- property: searchbox_style
  import: "@flourish/ui-styles/searchbox-style"

基本情况

初始化任何函数外的或特殊init函数外的样式:

import { createGeneralControlsStyle, createButtonStyle, createDropdownStyle, createSliderStyle, createSearchboxStyle } from "@flourish/ui-styles";
var controlsStyle = createGeneralControlsStyle(state.controls_style, ".fl-control"),
    buttonStyle = createButtonStyle(state.button_style, ".fl-control-buttons"),
    dropdownStyle = createDropdownStyle(state.dropdown_style, ".fl-control-dropdown"),
    sliderStyle = createSliderStyle(state.slider_style, ".fl-control-slider"),
    searchboxStyle = createSearchboxStyle(state.searchbox_style, ".fl-control-searchbox");

Init 函数将状态对象作为第一个参数. 第二个论点是用于造型的目标容器. 如果您正在使用 @ flourish/ controls, 您可以使用上面代码中的选择器 .

如果您在自定义 HTML 上使用此选项, 请确定瞄准您控件的直接母容器, 并确保给您的控件一个类名 : fl-control。如果您正在使用自定义 HTML 的按钮样式,请确保您的按钮也有一个 button 类和所选元素 a selected 课.

然后在更新函数中,确保以 update()。为了确保右到左读方向支持工程在模板的读取方向被更新(即:. layout.update() 已调用).

controlsStyle.update();
buttonStyle.update();
dropdownStyle.update();
sliderStyle.update();
searchboxStyle.update();

样式搜索框

使用 createSearchboxStyle 与 searchbox 由 @flourish/ controls 创建搜索输入、图标和建议的样式。 导入的设置允许您保持输入扩展并自定义其大小,背景颜色和不透明,文本/icon颜色,中风不透明以及边框半径.

搜索行为,如占位符文本和建议,在 searchbox 控制设置.

使用来自 @ flourish/ layout 的默认值

有一个可选的功能允许您从布局模块中继承文本和背景颜色. 只要在布局状态对象中通过,在初始化样式时作为第三个参数.

import { createButtonStyle } from "@flourish/ui-styles";
var buttonStyle = createButtonStyle(state.button_style, ".fl-control-buttons", state.layout);

搜索框样式也支持这个参数. 当没有设置搜索框文本或背景颜色时,它们使用相应的布局颜色:

var searchboxStyle = createSearchboxStyle(state.searchbox_style, ".fl-control-searchbox", state.layout);