我无法使用Angular 2+在Storybook中使用旋钮编辑道具的值。旋钮Github的readme.md有以下行
Storybook Addon Knobs允许您使用Storybook UI动态编辑React道具。您还可以使用旋钮作为故事书中故事的动态变量。
这是否意味着Angular不可能,至少目前如此?我的代码在index.stories.ts中:
import { storiesOf } from '@storybook/angular';
import { boolean, number, text, button, array, select, selectV2, color,
object, withKnobs, withKnobsOptions} from '@storybook/addon-knobs/angular';
const stories = storiesOf('Storybook Knobs',module);
stories.addDecorator(withKnobs);
stories.add('with knobs', () => ({
props:{
Name:text('Name', 'John'),
age:number('Age',47)
},
template:`My name is ${Name}, I'm ${age} years old`
}) );
答案 0 :(得分:1)
故事书回购中有一个完整的例子:https://github.com/storybooks/storybook/blob/master/examples/angular-cli/src/stories/addon-knobs.stories.ts
此外,您单独发布的代码不会提供太多上下文。如果你能创建一个非常好的git repo。
这是我们在我们的存储库中的示例,请测试它,如果它不起作用,请不要犹豫并创建问题
import { storiesOf } from '@storybook/angular';
import { action } from '@storybook/addon-actions';
import {
withKnobs,
text,
number,
boolean,
array,
select,
color,
date,
button,
} from '@storybook/addon-knobs/angular';
import { SimpleKnobsComponent } from './knobs.component';
import { AllKnobsComponent } from './all-knobs.component';
storiesOf('Addon|Knobs', module)
.addDecorator(withKnobs)
.add('Simple', () => {
const name = text('name', 'John Doe');
const age = number('age', 0);
const phoneNumber = text('phoneNumber', '555-55-55');
return {
moduleMetadata: {
entryComponents: [SimpleKnobsComponent],
declarations: [SimpleKnobsComponent],
},
template: `
<h1> This is a template </h1>
<storybook-simple-knobs-component
[age]="age"
[phoneNumber]="phoneNumber"
[name]="name"
>
</storybook-simple-knobs-component>
`,
props: {
name,
age,
phoneNumber,
},
};
})
.add('All knobs', () => {
const name = text('name', 'Jane');
const stock = number('stock', 20, {
range: true,
min: 0,
max: 30,
step: 5,
});
const fruits = {
apples: 'Apple',
bananas: 'Banana',
cherries: 'Cherry',
};
const fruit = select('fruit', fruits, 'apple');
const price = number('price', 2.25);
const border = color('border', 'deeppink');
const today = date('today', new Date('Jan 20 2017'));
const items = array('items', ['Laptop', 'Book', 'Whiskey']);
const nice = boolean('nice', true);
button('Arbitrary action', action('You clicked it!'));
return {
component: AllKnobsComponent,
props: {
name,
stock,
fruit,
price,
border,
today,
items,
nice,
},
};
});