1.3.1 • Published 1 year ago
Why Build This
See my blog post on 9am.github.io
Every Animation Lover Needs A Control Panel
Features
- 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.
Elements
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 |
Usage
Install
npm install @9am/ctrl-panel
HTML
<ctrl-panel theme="neumorphism">
<ctrl-slider name="slider">slider</ctrl-slider>
<ctrl-clamp name="clamp">clamp</ctrl-clamp>
<ctrl-vector name="vector">vector</ctrl-vector>
<ctrl-switch name="switch">switch</ctrl-switch>
<ctrl-radio name="radio">
<ctrl-switch name="a">A</ctrl-switch>
<ctrl-switch name="b">B</ctrl-switch>
<ctrl-switch name="c" default="true">C</ctrl-switch>
</ctrl-radio>
<ctrl-group name="group">
<ctrl-text name="text">text</ctrl-text>
<ctrl-color name="color">color</ctrl-color>
</ctrl-group>
</ctrl-panel>
Javascript
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'
* }
* }
*/
});
Documentation
\<ctrl-group>
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 |
\<ctrl-panel>
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> | ---- | ---- | ---- |
\<ctrl-radio>
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 |
\<ctrl-slider>
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 |
\<ctrl-clamp>
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> | ---- | ---- | ---- |
\<ctrl-switch>
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 |
\<ctrl-text>
Doc | Name | Type | Default | Description |
---|
attribute | name* | string | required | value key |
attribute | default | string | '' | default value |
---- | | | | |
property | get value | number | '' | value |
\<ctrl-color>
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 |
Event
{
type: 'CHANGE',
detail: {
name: string, // attribute 'name' of <ctrl-*>
value: Value, // property 'value' of <ctrl-*>
}
}
License
MIT