TypeScript angular.storiesOf函数代码示例

OGeek|极客世界-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

本文整理汇总了TypeScript中@storybook/angular.storiesOf函数的典型用法代码示例。如果您正苦于以下问题：TypeScript storiesOf函数的具体用法？TypeScript storiesOf怎么用？TypeScript storiesOf使用的例子？那么恭喜您, 这里精选的函数代码示例或许可以为您提供帮助。

在下文中一共展示了storiesOf函数的10个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于我们的系统推荐出更棒的TypeScript代码示例。

示例1: storiesOf

import { centered } from '@storybook/addon-centered/angular';
import { moduleMetadata, storiesOf } from '@storybook/angular';
import { Button } from '@storybook/angular/demo';
import { AppComponent } from '../app/app.component';

storiesOf('Addon|Centered', module)
  .addDecorator(centered)
  .add('centered component', () => ({
    component: AppComponent,
    props: {},
  }));

storiesOf('Addon|Centered', module)
  .addDecorator(
    moduleMetadata({
      declarations: [Button],
    })
  )
  .addDecorator(centered)
  .add('centered template', () => ({
    template: `<storybook-button-component [text]="text" (onClick)="onClick($event)"></storybook-button-component>`,
    props: {
      text: 'Hello Button',
      onClick: (event: Event) => {
        console.log('some bindings work');
        console.log(event);
      },
    },
  }));

开发者ID:chinmaymoharir，项目名称:storybook，代码行数:29，代码来源:addon-centered.stories.ts

示例2: storiesOf

import { storiesOf, moduleMetadata } from '@storybook/angular';
import { withKnobs, text } from '@storybook/addon-knobs';

import { NameComponent } from './moduleMetadata/name.component';
import { CustomPipePipe } from './moduleMetadata/custom.pipe';

storiesOf('Custom|Pipes', module)
  .addDecorator(
    moduleMetadata({
      imports: [],
      schemas: [],
      declarations: [CustomPipePipe],
      providers: [],
    })
  )
  .add('Simple', () => ({
    component: NameComponent,
    props: {
      field: 'foobar',
    },
  }))
  .add(
    'With Knobs',
    () => ({
      component: NameComponent,
      props: {
        field: text('field', 'foobar'),
      },
    }),
    {
      decorators: [withKnobs],

开发者ID:chinmaymoharir，项目名称:storybook，代码行数:31，代码来源:custom-pipes.stories.ts

示例3: storiesOf

        providers: [
            {
                provide: DirectoryExplorerToken, useValue: {
                    explore: () => void 0
                }
            },
            {
                provide: FileOpenerToken, useValue: {
                    open: () => void 0
                }
            }
        ]
    }
};

storiesOf("Execution Status Panel", module)

    .add("with pristine description", () => ({
        ...statusPanelDefualts,
        props: {
            appID: "test-app-id",
        } as Partial<ExecutionStatusComponent>
    }))
    .add("step state overview", () => ({
        ...statusPanelDefualts,
        props: {
            execution: new AppExecution("Workflow", "out", [
                new StepExecution("step_a", "Mike", "pending"),
                new StepExecution("step_b", "Bob", "started", Date.now() - 33125),
                new StepExecution("step_c", "Joe", "completed", Date.now() - 43211, Date.now()),
                new StepExecution("step_d", "Danny", "failed"),

开发者ID:hmenager，项目名称:composer，代码行数:31，代码来源:execution-status.story.ts

示例4: storiesOf

import { storiesOf, moduleMetadata } from '@storybook/angular';
import { action } from '@storybook/addon-actions';
import { withKnobs, text } from '@storybook/addon-knobs/angular';
import { Button } from '@storybook/angular/demo';

storiesOf('Custom|Style', module)
  .addDecorator(
    moduleMetadata({
      declarations: [Button],
    })
  )
  .add('Default', () => ({
    template: `<storybook-button-component [text]="text" (onClick)="onClick($event)"></storybook-button-component>`,
    props: {
      text: 'Button with custom styles',
      onClick: action('log'),
    },
    styles: [
      `
      storybook-button-component {
        background-color: yellow;
        padding: 25px;
      }
    `,
    ],
  }))
  .addDecorator(withKnobs)
  .add('With Knobs', () => ({
    template: `<storybook-button-component [text]="text" (onClick)="onClick($event)"></storybook-button-component>`,
    props: {
      text: text('text', 'Button with custom styles'),

开发者ID:lyndontavares，项目名称:storybook，代码行数:31，代码来源:custom-styles.stories.ts

示例5: storiesOf

import { storiesOf } from '@storybook/angular';
import { action } from '@storybook/addon-actions';
import { withNotes } from '@storybook/addon-notes';
import { CustomCvaComponent } from './custom-cva.component';

const description = `
  This is an example of component that implements ControlValueAccessor interface
`;

storiesOf('Custom|ngModel', module).add(
  'custom ControlValueAccessor',
  withNotes(description)(() => ({
    component: CustomCvaComponent,
    props: {
      ngModel: 'Type anything',
      ngModelChange: action('ngModelChnange'),
    },
  }))
);

开发者ID:lyndontavares，项目名称:storybook，代码行数:19，代码来源:custom-cva-component.stories.ts

示例6: storiesOf

import { storiesOf } from '@storybook/angular';
import { action } from '@storybook/addon-actions';

import { withKnobs, text, number, boolean, array, select, radios, color, date, button } from '@storybook/addon-knobs';

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,

开发者ID:chinmaymoharir，项目名称:storybook，代码行数:31，代码来源:addon-knobs.stories.ts

示例7: addParameters

import { storiesOf, addParameters } from '@storybook/angular';
import { Button } from '@storybook/angular/demo';

const globalParameter = 'globalParameter';
const chapterParameter = 'chapterParameter';
const storyParameter = 'storyParameter';

addParameters({ globalParameter });

storiesOf('Core|Parameters', module)
  .addParameters({ chapterParameter })
  .add(
    'passed to story',
    ({ parameters: { fileName, ...parameters } }) => ({
      component: Button,
      props: {
        text: `Parameters are ${JSON.stringify(parameters)}`,
        onClick: () => 0,
      },
    }),
    { storyParameter }
  );

开发者ID:chinmaymoharir，项目名称:storybook，代码行数:22，代码来源:core.stories.ts

示例8: storiesOf

import { storiesOf } from '@storybook/angular';
import { AppComponent } from '../app/app.component';
import { wTests } from '../../.storybook/withTests';

storiesOf('Addon|Jest', module)
  .addDecorator(wTests('app.component'))
  .add('app.component with jest tests', () => ({
    component: AppComponent,
    props: {},
  }));

开发者ID:rinatsafin，项目名称:storybook，代码行数:10，代码来源:addon-jest.stories.ts

示例9: storiesOf

import { storiesOf, moduleMetadata } from '@storybook/angular';
import { TokenComponent, ITEMS, DEFAULT_NAME } from './moduleMetadata/token.component';
import { CustomPipePipe } from './moduleMetadata/custom.pipe';

storiesOf('Metadata|Combined', module)
  .addDecorator(
    moduleMetadata({
      imports: [],
      declarations: [TokenComponent],
      providers: [
        {
          provide: ITEMS,
          useValue: ['Joe', 'Jane'],
        },
        {
          provide: DEFAULT_NAME,
          useValue: 'Provider Name',
        },
      ],
    })
  )
  .add('Combined 1', () => ({
    template: `<storybook-simple-token-component [name]="name"></storybook-simple-token-component>`,
    props: {
      name: 'Prop Name',
    },
  }))
  .add('Combined 2', () => ({
    template: `<storybook-simple-token-component [name]="name | customPipe"></storybook-simple-token-component>`,
    props: {
      name: 'Prop Name',

开发者ID:chinmaymoharir，项目名称:storybook，代码行数:31，代码来源:metadata-combined.stories.ts

示例10: storiesOf

import { Component } from '@angular/core';
import { storiesOf } from '@storybook/angular';

@Component({
  selector: 'storybook-with-ng-content',
  template: `<div style="color: #1e88e5;"><ng-content></ng-content></div>`,
})
class WithNgContentComponent {}

storiesOf('Custom|ng-content', module).add('Default', () => ({
  template: `<storybook-with-ng-content><h1>This is rendered in ng-content</h1></storybook-with-ng-content>`,
  moduleMetadata: {
    declarations: [WithNgContentComponent],
  },
}));

开发者ID:lyndontavares，项目名称:storybook，代码行数:15，代码来源:custom-ng-content.stories.ts

注：本文中的@storybook/angular.storiesOf函数示例由纯净天空整理自Github/MSDocs等源码及文档管理平台，相关代码片段筛选自各路编程大神贡献的开源项目，源码版权归原作者所有，传播和使用请参考对应项目的License；未经允许，请勿转载。