如何为 Ionic 和 Angular 的 ui 库配置故事书

Question

我正在为 Ionic 5 和 Angular 11 开发一个包含一些 ui 组件的库，我想配置我的第一本故事书来开发和记录该库。 我的 lib 没有 AppController，但只有一个带有按钮组件的模块。

这是我的故事文件：

export default {
  title: 'AlertButtonComponent',
};

export const primary = () => ({
  moduleMetadata: {
    declarations: [AlertButtonComponent],
    imports: [IonicModule.forRoot()],
  },
  component: AlertButtonComponent,
  props: {
    label: text('label', 'Button Label'),
    message: text('message', 'Alert message!'),
  },
});

在故事书中，按钮可以工作，但样式不像放置在 Ionic 应用程序中时那样 100%：

我看到在一个普通的应用程序上，Ionic 将一些基本的 css 规则应用于 body 标签，但是如何实现呢？ 可能我的按钮组件需要一个父 App 容器之类的东西，但是如果我只开发一个库，我该怎么做呢？

提前谢谢你！

Answer 1

这样的方法可能有用吗？

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

export default {
  title: 'Example/Button2',
  component: Button,
  decorators: [
    moduleMetadata({
      declarations: [],
      imports: [IonicModule.forRoot()],
    }),
  ],
} as Meta;

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

export const Primary = Template.bind({});
Primary.args = {
  label: 'Next',
  message: 'Alert Message',
};