Skip to content

9am/ctrl-panel

Repository files navigation

ctrl-panel

<ctrl-panel>

A simple control panel.

GitHub npm npm npm bundle size


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 slider-1 slider-2 A numblic slider. demo
ctrl-clamp clamp-1 clamp-2 Select a tuple low-high value. demo
ctrl-switch switch-1 switch-2 A ON/OFF switch. demo
ctrl-radio radio-1 radio-2 Multiple/Single switch. demo
ctrl-vector vector Select a tuple vector on a 2D surface. demo
ctrl-text text Text input. demo
ctrl-color 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