Storybook Knobs
此篇已停止更新
由於我覺得 Storybook Control 更好用,於是跳槽了
使用方法
import { text, withKnobs } from '@storybook/addon-knobs';
Available-Knobs 可用的手把
text
Allows you to get some text from the user.
boolean
Allows you to get a boolean value from the user.
boolean(label, true, groupId);
// str, defaultValue(boolean), str
number
Allows you to get a number from the user.
number bound by range
Allows you to get a number from the user using a range slider.
const options = {
range: true,
min: 1,
max: 10,
step: 1,
};
number(label, defaultValue, options, groupId);
// str, obj, str, str
color
Allows you to get a colour from the user.
object
Allows you to get a JSON object or array from the user.
Make sure to enter valid JSON syntax while editing values inside the knob.
object(label, defaultObject, groupId);
// str, obj, str
array
Allows you to get an array of strings from the user.
select
It allows you to get a value from a select box from the user.
select(label, options, defaultValue, groupId);
// str, arr/obj, str, str
radio buttons
It allows you to get a value from a list of radio buttons from the user.
options
Configurable UI for selecting a value from a set of options.
files
It allows you to get a value from a file input from the user.
date
Allows you to get date (and time) from the user.
button
It allows you to include a button and associated handler.
withKnobs options
withKnobs also accepts two optional options as story parameters.