@9am/ctrl-panel

<ctrl-panel>

A simple control panel.

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