update docs

g200kg · Jul 23, 2020 · 2382f62 · 2382f62
1 parent b16edbe
commit 2382f62
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 36 deletions.
diff --git a/docs/components.md b/docs/components.md
@@ -229,35 +229,4 @@ You can specify the `width`, `height` and number of `keys`. In addition, the not
 </webaudio-keyboard>
 ```
 
-There is no way to use an external image, but you can customize the colors by `colors` attribute.
-You can specify 9 colors of border, start and end of each gradation of white key and black key, for each of normal state and pressed state. 
-
-<webaudio-keyboard colors="#888;#000;#000;#888;#777;#eee;#ddd;#333;#222">
-</webaudio-keyboard>
-
-```html
-<webaudio-keyboard colors="#888;#000;#000;#888;#777;#eee;#ddd;#333;#222">
-</webaudio-keyboard>
-```
-
-<br/>
-
-<webaudio-keyboard colors="#000;#ec0;#db0;#222;#000;#0e3;#0c2;#0e3;#0c2">
-</webaudio-keyboard>
-
-```html
-<webaudio-keyboard colors="#000;#ec0;#db0;#222;#000;#0e3;#0c2;#0e3;#0c2">
-</webaudio-keyboard>
-```
-
-<br/>
-
-<webaudio-keyboard colors="#222;#9dc;#8ca;#4ca;#3a9;#f8a;#f8a;#f8a;#f8a">
-</webaudio-keyboard>
-
-```html
-<webaudio-keyboard colors="#222;#9dc;#8ca;#4ca;#3a9;#f8a;#f8a;#f8a;#f8a">
-</webaudio-keyboard>
-```
-
 ---
diff --git a/docs/example.md b/docs/example.md
@@ -45,11 +45,11 @@ Advanced Usage and Application Notes :
 
 # Examples of Various Attributes
 
-You can customize the appearance and behavior of webaudio-controls by adding attributes to the tags. Here are some examples. 
+You can customize the appearance and behavior of `webaudio-controls` by adding attributes to the tags. Here are some examples. 
 
 
 
-## WebAudio-Knobs
+## webAudio-knob
 
 By default, the webaudio-knob tag looks like this.
 
@@ -123,7 +123,7 @@ Non-square image can be used with specifying `width`/`height` instead of diamete
 
 ---
 
-## WebAudio-Sliders
+## webAudio-slider
 
 If no slider image is provided by the `src` attribute, a simple built-in image will be used. 
 
@@ -181,7 +181,7 @@ Value step is specified, resized, tooltip-text and webaudio-param are added.
 
 ---
 
-## WebAudio-Switches
+## webAudio-switch
 
 These are default `webaudio-switch`. If no switch image is specified, simple built-in image resource is used. 
 Default switch type is "toggle". 
@@ -256,7 +256,7 @@ These are 'radio' type switches. In this mode, only one switch is activated in t
 
 ---
 
-## Keyboards
+## webaudio-keyboard
 
 This is a default keyboard. 25 keys, 480px X 128px is default. 
 
@@ -276,6 +276,34 @@ Number of keys, width and height settings. Also the lowest key is set to note "A
  </webaudio-keyboard>
 ```
 
+Color customization by `colors` attribute. 
+
+<webaudio-keyboard colors="#888;#000;#000;#888;#777;#eee;#ddd;#333;#222">
+</webaudio-keyboard>
+
+```html
+<webaudio-keyboard colors="#888;#000;#000;#888;#777;#eee;#ddd;#333;#222">
+</webaudio-keyboard>
+```
+
+
+<webaudio-keyboard colors="#000;#ec0;#db0;#222;#000;#0e3;#0c2;#0e3;#0c2">
+</webaudio-keyboard>
+
+```html
+<webaudio-keyboard colors="#000;#ec0;#db0;#222;#000;#0e3;#0c2;#0e3;#0c2">
+</webaudio-keyboard>
+```
+
+
+<webaudio-keyboard colors="#222;#9dc;#8ca;#4ca;#3a9;#f8a;#f8a;#f8a;#f8a">
+</webaudio-keyboard>
+
+```html
+<webaudio-keyboard colors="#222;#9dc;#8ca;#4ca;#3a9;#f8a;#f8a;#f8a;#f8a">
+</webaudio-keyboard>
+```
+
 ---
 
 <script type="text/javascript">