storybook for angular 初试

文档

安装

依赖 @storybook/cli

zengwe$ npm i -g @storybook/cli

在angular项目下运行

zengwe$ getstorybook

初始化成功后会在项目下增加连个文件夹
./.storybook
./src/stories
在stories下会有storybook的demo示例

import { action } from '@storybook/addon-actions';
import { linkTo } from '@storybook/addon-links';
import { ShowComponent } from '../app/viewer/show/show.component';
import { Button } from '@storybook/angular/demo';
import { ViewerModule } from '../app/viewer/viewer.module';
export default {
  title: 'Button',
  component: Button,
};

export const Text = () => ({
  component: Button,
  props: {
    text: 'Hello Button',
  },
});

export const Emoji = () => ({
  component: Button,
  props: {
    text: '😀 😎 👍 💯',
  },
});

Emoji.story = {
  parameters: { notes: 'My notes on a button with emojis' },
};

export const WithSomeEmojiAndAction = () => ({
  component: Button,
  props: {
    text: '😀 😎 👍 💯',
    onClick: action('This was clicked OMG'),
  },
});

WithSomeEmojiAndAction.story = {
  name: 'with some emoji and action',
  parameters: { notes: 'My notes on a button with emojis' },
};

export const ButtonWithLinkToAnotherStory = () => ({
  component: Button,
  props: {
    text: 'Go to Welcome Story',
    onClick: linkTo('Welcome'),
  },
});

ButtonWithLinkToAnotherStory.story = {
  name: 'button with link to another story',
};
export const ShowComponentStory = () => ({
  component: ShowComponent,
  name:'ShowComponent',
  moduleMetadata: {
    imports: [ViewerModule]
  },
  props: {
    txt: 'show text',
    evt: action('evt resturn')
  }
})
ShowComponentStory.story   = {
  name: '123',
  parameters: {
    notes: '123'
  }
}

运行

初始化完成时会在package.json中添加对应的脚本

{
    "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
  }
}

storybook 的另一种写法

    text,
    number,
    boolean,
    array,
    select,
    radios,
    color,
    date,
    button,
  } from '@storybook/addon-knobs';
  const name = text('name', 'John Doe');
storiesOf('Addon|Actions', module)
.addParameters({
    knobs: {
      disableDebounce: true,
    },
  })
  .addDecorator(withKnobs)
.add('angular', () => ({
    component: ShowComponent,
    name:'ShowComponent',
    moduleMetadata: {
      imports: [ViewerModule]
    },
    props: {
      txt: name,
      evt: action('evt resturn')
    }
}));

来源：CSDN

作者：米斯特尔曾

链接：https://blog.csdn.net/qq_30101131/article/details/104576478

标签

angular

按钮