README

一个友好的触摸小部件，用于处理数字字段。

jQuery Knob 是 © 2012 Anthony Terrien，MIT 许可证下。OctoberCMS 小部件由 Keios Solutions 创建。

安装

要安装 Knob 小部件，将以下内容添加到您的插件 composer.json 文件中。

"require": {
    "owl/knob": "~1.0@dev"
}

接下来，在您的插件 Plugin.php 文件中注册小部件。

public function registerFormWidgets()
{
    return [
        'Owl\FormWidgets\Knob\Widget' => [
            'label' => 'Knob',
            'code'  => 'owl-knob'
        ],
    ];
}

使用方法

要使用 Knob 小部件，只需声明一个字段类型为 owl-knob

knob:
    label: Knob
    type: owl-knob

以下选项受支持

行为

min : min value | default=0.
max : max value | default=100.
step : step size | default=1.
angleOffset : starting angle in degrees | default=0.
angleArc : arc size in degrees | default=360.
stopper : stop at min & max on keydown/mousewheel | default=true.
readOnly : disable input and events | default=false.
rotation : direction of progression | default=clockwise.

用户界面

cursor : display mode "cursor", cursor size could be changed passing a numeric value to the option, default width is used when passing boolean value "true" | default=gauge.
thickness : gauge thickness.
lineCap : gauge stroke endings. | default=butt, round=rounded line endings
width : dial width.
displayInput : default=true | false=hide input.
displayPrevious : default=false | true=displays the previous value with transparency.
fgColor : foreground color.
inputColor : input value (number) color.
font : font family.
fontWeight : font weight.
bgColor : background color.

与 October UI 相关

knobLabel: label to display on right side of the knob, can be translation string
knobComment: comment to display on right side of the knob, can be translation string

表单配置示例

fields:
    age:
      knobLabel: Your current age
      knobComment: We need to know, really.
      type: owl-knob
      span: right
      min: 1
      default: 23
      max: 100
      angleOffset: -125
      angleArc: 250