Norman's Note 諾曼筆記

Norman's Note 諾曼筆記

Storybook Knobs

使用方法

  • 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.

Other Official addons

https://storybook.js.org/addons/