Ionic/Anglar에서 Storybook을 가져오려면

개막사

Ionic 구성 요소 직접 사용
Storybook 페이지에 표시되는 메서드를 소개하는 기사입니다.

Ionic 환경 개선

Ionic 프로젝트가 없는 경우
Ionic CLI를 사용하여 터미널에 연결ionic startIonic 프로젝트 하나 준비해.

Storybook 설치

공식 페이지의 설명에 따라 npx sb init에 설치하세요.
설치 완료 후 실행npm run storybook종료되면 브라우저는 자동으로 storybook의 페이지를 이동합니다.

기본 Storybook 화면을 볼 수 있습니다.

Storybook의 패브릭

Anglar의 Storybook은 다음 두 파일에서 시작합니다.

구성 요소 정의용xxx.component.ts

Storybook을 통한 구성 요소 표시xxx.stories.ts

Ionic을 사용하는 경우 거의 모든 구성 요소가 @ionic/angular에 의해 정의된 경우src/stories에서 제작할 필요가 없음xxx.component.ts@ionic/angular 중 xxx.component.ts 가져오면 OK.
그래서 필요한 것은
전용 xxx.stories.ts

이야기를 쓰다

파일 생성src/stories/ion-button.stories.ts우선, 필요한 물건을 한 세트 도입하다
ion-button.stories.ts

import { IonButton, IonicModule } from '@ionic/angular';
import { Meta, moduleMetadata, Story } from '@storybook/angular';

다음에 export 정의
파일 아래에 다음 코드를 추가합니다
ion-button.stories.ts

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

여기서 주의해야 할 점은 2시입니다.

component: IonButton, 라이브러리의 구성 요소를 직접 사용해서 IonButon이라는 이름을 편집할 수 없습니다.그냥 사용하세요.

@ionic/angular IonicModule 가져오기IonButon은 Ionic Module 아래에서 실행되기 때문에 decorators 페이지가 없으면 이동하지 않습니다.

마지막으로stories 정의
파일 아래에 아래 코드를 쓰시오
ion-button.stories.ts

const Template: Story<IonButton> = (args: IonButton) => ({
  props: args,
  template: `<ion-button>テキスト</ion-button>`,
});

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

decorators 직접 사용하십시오template:이상 종료 후 페이지로 돌아가기
Ionic 버튼이 표시되는지 확인

Controls 추가

Storybook의 Controls 패널
조작할 수도 있고 자유롭게 화면을 바꿀 수도 있다
Controls에 대한 자세한 쓰기 방법은 를 참조하십시오이 페이지.

버튼 레이블

<ion-button>의 텍스트 입력 <ion-button>의 label 변수
ion-button.stories.ts

- template: `<ion-button>テキスト</ion-button>`,
+ template: `<ion-button>{{label}}</ion-button>`,

그리고 파일의 맨 밑에 다음 코드를 추가합니다
ion-button.stories.ts

Basic.args = {
  label: 'テキスト'
};

이렇게 하면 입력란에서 탭을 편집할 수 있습니다

버튼 색상

통과{{label}} 속성
색상 채우기를 지정할 수 있습니다.
먼저 fill에 입력할 수 있는 값을 정의합니다.
아이닉어셈블리 페이지 자세히 보고 쓰세요.fill 아래에 코드 추가
ion-button.stories.ts

component: IonButton,
+ argTypes: {
+    fill: {
+      options: [ 'solid', 'outline', 'clear' ],
+      control: { type: 'inline-radio' }
+    },
+ },

이어서 기본 component: IonButton, 속성을 정의합니다.
에 추가
ion-button.stories.ts

label: 'テキスト',
+ fill: 'solid',

라디오 버튼이 작동하는지 확인

끝맺다

Controls 너무 재밌어요.
거의 모든 IonButon 속성이 Controls로 변경됨
지혁이 여기 있어요.
https://github.com/ianchen0419/ionic-course/blob/main/src/stories/Button.stories.ts
Chromatic 미리 보기 여기 있습니다.
https://615982bec67f67003acaaea2-lpctzybfmz.chromatic.com/?path=/story/ionic-button--basic