angular - 使用 Storybook 和 Angular 定义 buttonGroup

Question

我正在学习使用带有角度的故事书。我从这里得到了 buttonGroup 示例的故事，并创建了一个垂直和水平的故事

    // ButtonGroup.stories.ts

    import { Story, Meta } from '@storybook/angular/types-6-0';

    import { moduleMetadata } from '@storybook/angular';

    import ButtonGroup from './buttonGroup.component';
    import Button from './button.component';

    // Imports the Button stories
    import * as ButtonStories from './Button.stories';
    import { CommonModule } from '@angular/common';

    export default {
      title: 'ButtonGroup',
      component: ButtonGroup,
      decorators: [
        moduleMetadata({
          declarations: [Button],
          imports: [CommonModule],
        }),
      ],
    } as Meta;

    const Template: Story<ButtonGroup> = (args) => ({
      props: args,
    });

    export const HorizontalPair = Template.bind({});
    HorizontalPair.args = {
      buttons: [
        { ...ButtonStories.Primary.args },
        { ...ButtonStories.Secondary.args },
      ],
      orientation: 'horizontal',
    };

    export const VerticalPair = Template.bind({});
    VerticalPair.args = {
      buttons: [
        { ...ButtonStories.Primary.args },
        { ...ButtonStories.Secondary.args },
      ],
      orientation: 'vertical',
};

我正在尝试通过重用故事书的默认按钮故事来为其创建组件，但难以配置。

按钮组件：

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'storybook-button',
  template: ` <button
    type="button"
    (click)="onClick.emit($event)"
    [ngClass]="classes"
    [ngStyle]="{ 'background-color': backgroundColor }"
  >
    {{ label }}
  </button>`,
  styleUrls: ['./button.css'],
})
export default class ButtonComponent {
  /**
   * Is this the principal call to action on the page?
   */
  @Input()
  primary = false;

  /**
   * What background color to use
   */
  @Input()
  backgroundColor?: string;

  /**
   * How large should the button be?
   */
  @Input()
  size: 'small' | 'medium' | 'large' = 'medium';

  /**
   * Button contents
   *
   * @required
   */
  @Input()
  label = 'Button';

  /**
   * Optional click handler
   */
  @Output()
  onClick = new EventEmitter<Event>();

  public get classes(): string[] {
    const mode = this.primary ? 'storybook-button--primary' : 'storybook-button--secondary';

    return ['storybook-button', `storybook-button--${this.size}`, mode];
  }
}

按钮故事：

import { Story, Meta } from '@storybook/angular/types-6-0';
import Button from './button.component';

export default {
  title: 'Example/Button',
  component: Button,
  argTypes: {
    backgroundColor: { control: 'color' },
  },
} as Meta;

const Template: Story<Button> = (args: Button) => ({
  props: args,
});

export const Primary = Template.bind({});
Primary.args = {
  primary: true,
  label: 'Button',
};

export const Secondary = Template.bind({});
Secondary.args = {
  label: 'Button',
};

export const Tertiary = Template.bind({});
Tertiary.args = {
  label: 'Button',
  backgroundColor: 'green'
};

export const Large = Template.bind({});
Large.args = {
  size: 'large',
  label: 'Button',
};

export const Small = Template.bind({});
Small.args = {
  size: 'small',
  label: 'Button',
};

这是我尝试并创建的： ButtonGroupComponent ：

import { Component, Input} from '@angular/core';

@Component({
  selector: 'storybook-buttonGroup',
  template: ` <div [ngClass]="classes">
      <div *ngFor="let button of buttons">
        <storybook-button [primary]="button.primary || false" [size]="button.size" [label]="button.label" (click)="button.onClick.emit($event)">
        </storybook-button>
      </div>
  </div>`,
  styleUrls: ['./buttonGroup.css'],
})
export default class ButtonGroupComponent {

  /**
   * Array of buttons
   */
  @Input()
  buttons: any; 

  @Input()
  orientation?: 'horizontal' | 'vertical' = 'horizontal';

  public get classes(): string[] {
    const orientation = this.orientation === 'horizontal' ? 'storybook-button-group-horizontal' : 'storybook-button-group-vertical'

    return ['storybook-button-group', orientation]
  }
}

这是结果：

但是，缺少单个按钮故事的填充、字体样式。主要和次要按钮：

帮助我理解正确的实现方式，我试图理解故事书中的事情是如何工作的。谢谢。