物語のNGコンテンツでの作業

5309 ワード
template storybook ngcontent angular テキストリンク
Storybookの角成分の新しいストーリーを作成するときには、その中にng-contentの領域を持つコンポーネントにコンテンツを挿入する必要があります.
それを行うには、あなたの話のtemplateを作成する必要があります.
これはdivとその中のng-contentエリアを持つ簡単なコンポーネントです.コンポーネントは、widthおよびheightの2つの入力を有する.
// paper.component.ts
import { Component, Input } from '@angular/core';

@Component({
  selector: 'cx-paper',
  template: `
    <div class="paper" [ngStyle]="{ width: width, height: height }">
      <ng-content></ng-content>
    </div>
  `,
  styles: [
    `
      .paper {
        border: navy solid 2px;
        padding: 10px;
      }
    `,
  ],
})
export class PaperComponent {
  @Input()
  width: string;

  @Input()
  height: string;
}

このコンポーネントの話
// paper.stories.ts
import { Story, Meta } from '@storybook/angular';
import { PaperComponent } from './paper.component';

export default {
  title: 'Example/Paper',
  component: PaperComponent,
} as Meta;

const Template: Story<PaperComponent> = (args: PaperComponent) => ({
  props: args,
  template: `
  <cx-paper [height]="height" [width]="width">
  This is a template test.
  </cx-paper>`,
});

export const SimpleExample = Template.bind({});

SimpleExample.args = {
  height: '50px',
  width: '300px',
} as Partial<PaperComponent>;
これは以下のようになります.
GAPIを使用したstrapiワークフローの開始
La mejor fuenteパラシュートで降下する人Nuestro