Angular Storybook - 道具旋钮和 ng-content

# Angular Storybook: 道具旋钮和 ng-content 的魔法

bash
npm install --save-dev @storybook/addon-knobs

javascript
module.exports = {
  // ...
  addons: ['@storybook/addon-knobs'],
};

typescript
// button.component.ts
import { Component, Input } from '@angular/core';
@Component({
  selector: 'app-button',
  template: '{{ label }}',
})
export class ButtonComponent {
  @Input() color = 'blue';
  @Input() label = 'Click me';
}

typescript
// button.stories.ts
import { Meta, moduleMetadata, Story } from '@storybook/angular';
import { withKnobs, text, color } from '@storybook/addon-knobs';
import { ButtonComponent } from './button.component';
export default {
  title: 'Button',
  component: ButtonComponent,
  decorators: [
    withKnobs,
    moduleMetadata({
      declarations: [ButtonComponent],
    }),
  ],
} as Meta;
export const Default: Story = () => ({
  component: ButtonComponent,
  props: {
    color: color('Color', 'blue'),
    label: text('Label', 'Click me'),
  },
});

typescript
// panel.component.ts
import { Component } from '@angular/core';
@Component({
  selector: 'app-panel',
  template: `
    
      
        
      
      
        
      
    
  `,
  styles: [
    `
      .panel {
        border: 1px solid #ccc;
        padding: 16px;
        margin: 16px;
      }
      .title {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 8px;
      }
    `,
  ],
})
export class PanelComponent {}

typescript
// panel.stories.ts
import { Meta, moduleMetadata, Story } from '@storybook/angular';
import { PanelComponent } from './panel.component';
export default {
  title: 'Panel',
  component: PanelComponent,
  decorators: [
    moduleMetadata({
      declarations: [PanelComponent],
    }),
  ],
} as Meta;
export const Default: Story = () => ({
  component: PanelComponent,
  template: `
    
      
Title of the Panel
      
Content of the Panel
    
  `,
});