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