在故事书组件模板上使用属性

Posted 2023-02-19

【中文标题】在故事书组件模板上使用属性

【英文标题】：Use properties on storybook component template

【发布时间】：2021-03-14 13:15:49

【问题描述】：

在故事中使用类组件使您能够将属性作为参数传递：

const Template: Story<MyComponent> = (args) => (
  props: args,
  component: MyComponent,
)

export const Default = Template.bind();

export const Small = Template.bind();
Small.args = 
  size: 'xs'

神奇地，参数被映射为组件的道具。但是，当使用模板时它不起作用：

const Template: Story<FlexDialogModalComponent> = (args) => (
  props: args,
  template: `
    <app-my-component>test</app-my-component>
  `,
)

现在看起来很明显，因为它不知道在哪里添加它们。所以我认为以下应该是可能的：

const Template: Story<FlexDialogModalComponent> = (args:  dialogModalSize ) => (
  props: args,
  template: `
    <app-my-component [size]="size">test</app-my-component>
  `,
)

但这不起作用。它没有给出错误，但它什么也不做。有人知道如何解决这个问题吗？

【参考方案1】：

以下是一些我认为可以帮助您解决问题的示例。

// my-component.ts
import 
  Component,
  Input
 from '@angular/core';

@Component(
  selector: 'app-my-component',
  templateUrl: './my-component.html'
)
export class MyComponent 
  @Input() size: string;

<!--my-component.html-->
size

// my-component.stories.ts
import  CommonModule  from '@angular/common';
import  moduleMetadata  from '@storybook/angular';
import  MyComponent  from './my-component';

export default 
  title: 'MyComponent',
  decorators: [
    moduleMetadata(
      imports: [
        CommonModule,
      ], declarations: [
        MyComponent
      ]
    )
  ]
;

export const Component = () => (
  component: MyComponent,
  props: 
    size: 'xs'
  
)

// "@storybook/addon-controls" is needed (.storybook/main.js) so that you can play with the 'size' property in Storybook in the 'Controls' tab
export const Template = (args) => (
  template: `<app-my-component [size]="size"></app-my-component>`,
  props: args
)
Template.args = 
  size: 'xs'


// "@storybook/addon-controls" is needed (.storybook/main.js) so that you can play with the 'size' property in Storybook in the 'Controls' tab
export const ComponentWithControls = (args) => (
  component: MyComponent,
  props: args
)
ComponentWithControls.args = 
  size: 'm'