storybook - StoryBook 中带有 Angular 的自定义控件

Question

我开始在 Angular 组件库中使用 Storybook。

它适用于具有布尔值或字符串等输入的组件，它使用控件显示这些输入。

但是有些组件的输入是一个对象。

对于那些组件，我可以提供一个对象，但用户可以使用对象的 JSON 表示来编辑字符串，而不是几个输入。

如何以用户友好的方式执行此操作，以便用户可以在控件中编辑这些属性，而无需使用对象的 JSON 表示？

Answer 1

如果你使用旋钮，你可以这样写：

这个样本在这里：

class sample{
  title: string;
  text: string;
  settings: {
    language: string;
    disabled: boolean;
  }
}

会变成这样：

    template: `
      <div style="max-width:80vw;margin:auto;">
        <app-custom-component
        [title]="this.titleKnob"
        [text]="this.textKnob"
        [settings]="this.settingsKnob"
        ></app-custom-component>
      </div>
   `,
    props: {
      titleKnob: text('Title',''),
      textKnob: text('Text area', ''),
      settingsKnob: {
        language: text('Default Language', 'en'),
        disabled: boolean('Disabled', false),
      }
    }