Сборник рассказов 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 напрямую.
Есть предположения?
Если я запущу приведенную выше историю, вместо элемента управления будет просто -. Мне бы хотелось, чтобы раскрывающийся список выбора позволил разработчикам видеть доступные типы, такие как первичный, вторичный и т. д.