See my blog post on 9am.github.io
Every Animation Lover Needs A Control Panel
- 9 custom elements to choose.
- 3 themes out of the box.
- Control the value shape with the template.
- Customize or make your own theme with CSS properties.
| Element | Screenshot | Varient | Description | Live Demo |
|---|
| ctrl-panel | ------- | ------- | The root element. | demo |
| ctrl-group | ------- | ------- | Group ctrl-* together to shape the value. | demo |
| ctrl-slider |  |  | A numblic slider. | demo |
| ctrl-clamp |  |  | Select a tuple low-high value. | demo |
| ctrl-switch |  |  | A ON/OFF switch. | demo |
| ctrl-radio |  |  | Multiple/Single switch. | demo |
| ctrl-vector |  | | Select a tuple vector on a 2D surface. | demo |
| ctrl-text |  | | Text input. | demo |
| ctrl-color |  | | Color picker. | demo |
npm install @9am/ctrl-panel
<ctrl-paneltheme="neumorphism"><ctrl-slidername="slider">slider</ctrl-slider><ctrl-clampname="clamp">clamp</ctrl-clamp><ctrl-vectorname="vector">vector</ctrl-vector><ctrl-switchname="switch">switch</ctrl-switch><ctrl-radioname="radio"><ctrl-switchname="a">A</ctrl-switch><ctrl-switchname="b">B</ctrl-switch><ctrl-switchname="c" default="true">C</ctrl-switch></ctrl-radio><ctrl-groupname="group"><ctrl-textname="text">text</ctrl-text><ctrl-colorname="color">color</ctrl-color></ctrl-group></ctrl-panel>
import'@9am/ctrl-panel';// import '@9am/ctrl-panel/theme.css'; // css to enable default themes.document.querySelector('ctrl-panel').addEventListener('CHANGE',(evt)=>{console.log('[panel value]:',evt.currentTarget.value);/* output: * { * slider: 5, * clamp: [0, 10], * vector: [0, 0], * switch: false, * radio: 'c', * group: { * text: '', * color: '#000000' * } * } */});| Doc | Name | Type | Default | Description |
|---|
| attribute | name* | string | required | value key |
| attribute | orientation | h | v | h | layout direction |
| attribute | type | object | array | object | value shape |
| ---- | | | | |
| property | get value | Value | {} | value |
| ---- | | | | |
| slot | label | html tag | | label |
| slot | default | ctrl-* | '' | value |
| Doc | Name | Type | Default | Description |
|---|
| attribute | extends <ctrl-group> | ---- | ---- | ---- |
| attribute | theme | string | flat | theme (flat | oldschool | neumorphism) |
| attribute | width | css length | auto | panel width |
| attribute | height | css length | auto | panel height |
| attribute | placement | top-left | top-right | bottom-left | bottom-right | '' | if placement is set, panel will be positioned as fixed, and with a button to toggle the visibility. |
| ---- | | | | |
| property | extends <ctrl-group> | ---- | ---- | ---- |
| ---- | | | | |
| slot | extends <ctrl-group> | ---- | ---- | ---- |
| Doc | Name | Type | Default | Description |
|---|
| attribute | extends <ctrl-group> | ---- | ---- | ---- |
| attribute | multiple | boolean | false | enable select multiple items |
| ---- | | | | |
| property | extends <ctrl-group> | ---- | ---- | ---- |
| ---- | | | | |
| slot | extends <ctrl-group> | ---- | ---- | ---- |
| slot | default | ctrl-switch | '' | value |
| Doc | Name | Type | Default | Description |
|---|
| attribute | name* | string | required | value key |
| attribute | orientation | h | v | h | layout direction |
| attribute | type | range | knob | range | slider type |
| attribute | min | number | 0 | min value |
| attribute | max | number | 10 | max value |
| attribute | step | number | 'any' | 1 | step interval |
| attribute | default | number | 5 | default value |
| ---- | | | | |
| property | get value | number | 5 | value |
| Doc | Name | Type | Default | Description |
|---|
| attribute | extends <ctrl-slider> | ---- | ---- | ---- |
| attribute | default | string(JSON) | '[0,10]' | default value |
| ---- | | | | |
| property | extends <ctrl-slider> | ---- | ---- | ---- |
| property | get value | number | [0,10] | value |
| ---- | | | | |
| slot | extends <ctrl-slider> | ---- | ---- | ---- |
| Doc | Name | Type | Default | Description |
|---|
| attribute | name* | string | required | value key |
| attribute | orientation | h | v | h | layout direction |
| attribute | type | range | toggle | toggle | slider type |
| attribute | default | boolean | | default value |
| ---- | | | | |
| property | get value | number | false | value |
| Doc | Name | Type | Default | Description |
|---|
| attribute | name* | string | required | value key |
| attribute | default | string | '' | default value |
| ---- | | | | |
| property | get value | number | '' | value |
| Doc | Name | Type | Default | Description |
|---|
| attribute | name* | string | required | value key |
| attribute | orientation | h | v | h | layout direction |
| attribute | default | string | #000000 | default value |
| ---- | | | | |
| property | get value | number | #000000 | value |
{type: 'CHANGE',detail: {name: string,// attribute 'name' of <ctrl-*>value: Value,// property 'value' of <ctrl-*>}}MIT
