<ctrl-panel>
A simple control panel.
Why Build This
See my blog post on 9am.github.io
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-panelHTML
<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-*>
}
}