面粉控件
将可互换的控制器(倒放、按钮或滑动器)和控制容器添加到页面中.
如何安装
npm install -s @flourish/controls
将一个或多个控制对象添加到您的模板状态以及控制容器的对象
export var state = {
controls_container: {},
buttons_control: {
control_type: "buttons"
},
dropdown_control: {
control_type: "dropdown"
},
...
}
添加控制容器的设置 template.yml。 。 。 .
- property: controls_container
import: "@flourish/controls/container"
这将在设置中增加控制容器对齐和间隔选项.
然后导入 @flourish/controls 每个控件实例.
- property: buttons_control
import: "@flourish/controls"
- property: dropdown_control
import: "@flourish/controls"
基本情况
初始化任何函数以外的控制容器和个人控制:
import { createControlsContainer, createControls } from "@flourish/controls";
var buttons_control = createControls(state.buttons_control);
var dropdown_control = createControls(state.dropdown_control)
var controls_container = createControlsContainer(state.controls_container)
.appendTo(layout.getSection("controls"))
.add([buttons_control, dropdown_control]);
您可以使用第二个参数在控件中添加 id 字符串 :
var buttons_control = createControls(state.buttons_control, "fl-buttons-control");
在每个控件实例中添加一个更改处理器 : buttons_control.on("change", update);。通常在 draw 函数.
单位 update 组合 options 然后打电话 update 容器和控制器上的方法:
controls_container.update();
buttons_control
.options(button_options)
.update();
dropdown_control
.options(dropdown_options)
.update();
如果你同时使用这个模块 @flourish/ui-styles 您应该首先从 ui 样式对象中调用更新方法(这将确保下拉图标正确匹配 ui 样式面板中设置的大小和颜色样式)。 例如:
function updateControlStyles() {
controls_style.update();
button_style.update();
dropdown_style.update();
slider_style.update();
}
updateControlStyles();
集装箱方法
appendTo(parent_container)
将控制容器附加到 parent_container DOM 节点( 这通常应该是 layout.getSection("controls")) (中文(简体) ). 返回控制容器对象.
add([controls_instances])
取出一系列控制实例并将其附加到控制容器中。 返回控制容器对象.
update()
这更新了控制容器和所有附加的控制实例(调用其个人) update() 方法问题。 返回控制容器对象.
控制方法
appendTo(parent_container)
将控件附加到 parent_container DOM 节点并注入 CSS head 必要时.
返回控制对象.
format(formatterFunction, exclude)
指定用于格式化控件内容的输出格式。 这个功能来自 @flourish/formatters 模块或一个 output_format_id 从 @flourish/interpreter 模块。 可选通过一系列的数值来排除格式化.
getNode()
返回已创建的控件容器。 它会有一个阶级 "fl-controls-container"
getSortedIndex()
在选项数组的排序版本中返回当前所选值的索引.
index([i])
没有参数返回当前所选选项的(未分类)索引。 若为 i 指定并对应到 options 数组,设置当前选中的选项到 i返回控制对象.
n_options()
返回当前选项数.
on(event, callback)
添加 callback 名单 event 管理者。 目前唯一得到支持的 event 是"改变"。 返回控制对象.
options([arr])
没有参数返回当前控件显示的当前选项列表的副本 。 用数组,将当前选项替换为副本 arr 并返回控制对象.
parse(parserFunction)
指定用于解析控件内容的函数。 这个功能来自 @flourish/localization 或者说 @flourish/interpreter 模块.
remove()
从 DOM 中删除控件(及其大小调整事件处理器) 。 返回控制对象.
trigger(event)
呼叫指派给的所有处理者 event 并返回控制对象。 目前唯一获得支持的 event 类型是“改变”.
update()
以最新设置重建控件。 返回控制对象.
value([val])
没有参数返回当前选中选项的字符串值 。 与 val 当前修改当前索引以匹配 val 在选项数组中返回控制对象。 若为 val 不在选项数组中,则没有更改,但仍然返回控制对象.
visible([boolean])
设置控件的能见度
设置控件
控制有非常基本的外观。 你可以用自己的cs和造型来覆盖这些风格. 我们建议使用 @flourish/ui风格 用于样式控件.