頻譜與波形

透過快速傅立葉轉換而視覺化波形的組件

bindtypedescription
audioContextObjectnaive audioContext class
inputObjectaudio node input

振盪器

含波封配置的音波產生器

bindtypedescription
audioContextObjectnaive audioContext class
outputObjectaudio node output
detuneNumberfrequency fine tune
adsrObjectthe mode volume changed over time
ref methodreturndescription
oscStartundefinedplay the oscillator
oscStopundefinedstop the oscillator
modulateundefinedcontrol the acitating oscillator

合成器琴鍵

專門偵測使用者操作事件的組件

bindtypedescription
pianoKeysArrayfollows the format below
{char:'Z', pitch: -9, black: false, press:false}
emittypedemo
oscStartNumber0.00
oscStopNumber0.00
Z
S
X
D
C
V
G
B
H
N
J
M
Q
2
W
3
E
R
5
T
6
Y
7
U
I
9
O
0
P
[
=
]

旋鈕

直覺的範圍數字選擇器

bindtypedescription
maxNumberupper bound
minNumberlower bound
stepNumbervalue ticks
valueNumberinput value
labelStringtitle under the knob
containerHTMLElementcomponent wrapper
emittypedemo
valueNumber0.05
ATTACK
DECAY
SUSTAIN
RELEASE
DETUNE
VOLUME
FILTER

日期挑選器

配有年月日且可自由更換語系格式的月曆,點選中上方的按鈕切換輸入模式

bindtypedemo
monthsArrayJan~Dec
weekdaysArray日~六
emittypedemo
valueString
2019年7月1日 星期一
Jul 2019

2829

日期範圍挑選器

旅程、旅館、機票預訂的通用組件

bindtypedemo
bannedString[ "2019/9/29" ]
lb(lower bound)Date2019-9-19 08:34:26
ub(upper bound)Date2019-9-19 08:34:26
emittypedemo
value.startDate
value.endDate
value.selectArray
    SunMonTueWedThuFriSat
    SunMonTueWedThuFriSat
    STEP 1.
    Shopping cart
    STEP 2.
    Payment
    STEP 3.
    Finished

    步驟提示

    付款或教學的通用組件

    bindtypedemo
    stepsArray
    • Shopping cart
    • Payment
    • Finished
    -
    +
    indexNumber
    -
    +
    backgroundString

    信用卡輸入

    配有自動換行與驗證的輸入框

    emittypedemo
    value.cardNumberString
    value.MMString
    value.YYString
    value.securityCodeString
    ref methodsreturndemo
    validateBoolean
    卡號
    -
    -
    -
    有效年限
    /
    安全碼

    JSON轉表格包裝器

    提供子元件控制選項的高階組件,點擊陣列或是物件格式的的資料框來生產新的表格

    bindtypedescription
    rowsArrayJSON
    titleStringkey value of JSON
    emittypedescription
    create-tableObjectemit child event again
    close-tableStringclear the table

    JSON轉表格

    將大量JSON資料轉換成二維可視化的格式,點選欄位還可以標記

    bindtypedescription
    rowsArrayJSON
    toggleBooleanswitch table direction
    emittypedescription
    create-tableObjectthe event of clicking on "td"
    url of TEXTAREA