Сборник рассказов 7 / angular — использование argTypes в истории

У меня есть компонент...

      import { Component, Input, OnInit } from '@angular/core';
import { DisplayClassType, DisplayType, SizeType } from '../types/base.types';

@Component({
  selector: 'govc-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss'],
})
export class HeaderComponent implements OnInit {

  @Input() headerId = 'headerId-1';
  @Input() header = 'Title';
  @Input() displayClass: DisplayClassType = 'primary';
  @Input() displayType: DisplayType = 'flat';
  @Input() headerSize: SizeType = 'med';


  ngOnInit(): void {

    console.trace('**** Heaader Component');
  }
}

с историей..

      import { Meta } from '@storybook/angular';
import { HeaderComponent } from './header.component';

export default {
  title: 'HeaderComponent',
  component: HeaderComponent,
  argTypes: {
    displayClass: {
      description: 'Button display class',
      defaultValue: 'primary',
      control: {
        type: 'select',
        options: ['primary', 'secondary'],
      },
    },
    displayType: {
      description: 'Button display type',
      defaultValue: 'outline',
      control: {
        type: 'select',
        options: ['outline', 'flat', 'basic'],
      },
    },
  },
} as Meta<HeaderComponent>;

export const Primary = {
  render: (args: HeaderComponent) => ({
    props: args,
  }),
  args: {
    headerId: 'headerId-1',
    header: 'Title',
    displayClass: 'primary',
    displayType: 'flat',
    headerSize: 'med',
  },
};

Я пытаюсь использовать argTypes для предоставления списка выбора displayClass (типов).

В настоящее время в приведенной выше истории нет элементов управления для displayClass или displayTypes. В идеале было бы хорошо использовать типы ts напрямую.

Есть предположения?

Если я запущу приведенную выше историю, вместо элемента управления будет просто -. Мне бы хотелось, чтобы раскрывающийся список выбора позволил разработчикам видеть доступные типы, такие как первичный, вторичный и т. д.

0 ответов

Другие вопросы по тегам