[英]React Storybook addon Knobs for editing Angular props
我無法使用Angular 2+在Storybook中使用旋鈕來編輯道具的值。 旋鈕Github的readme.md有以下行
使用Storybook附加旋鈕可以使用Storybook UI動態編輯React道具。 您還可以將旋鈕用作Storybook中故事內部的動態變量。
這是否意味着至少在目前至少不能使用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`
}) );
故事書回購中有一個完整的示例: https : //github.com/storybooks/storybook/blob/master/examples/angular-cli/src/stories/addon-knobs.stories.ts
另外,您單獨發布的代碼並不能提供太多上下文。 如果您可以創建一個git倉庫,那就太好了。
這是我們存儲庫中的示例,請對其進行測試,如果它不起作用,請不要猶豫並創建問題
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,
},
};
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.