Ionic/AngularでStorybookを導入する手順
前置き
Ionicのコンポーネントを、そのまま使って
Storybookのページに表示させる、その方法を紹介している記事です。
Ionic環境を整える
お手元にIonicプロジェクトがなかったら
Ionic CLIを利用し、ターミナルにionic startを打つ
Ionicプロジェクトを用意しましょう。
Storybookをインストール
公式ページの紹介通り、npx sb initを打ってインストールしましょう。
インストール完了した後、npm run storybookを執り行い
終わったら、ブラウザがstorybookのページを自動にジャンプします。
デフォルトのStorybook画面が見れます
Storybookの仕組み
Angularの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のみです
Storiesを書く
src/stories/ion-button.stories.tsというファイルを作り
まずは、必要なやつを一通りインポート
import { IonButton, IonicModule } from '@ionic/angular';
import { Meta, moduleMetadata, Story } from '@storybook/angular';
次に、exportを定義
ファイルの下に以下のコードを追加しましょう
export default {
title: 'Ionic/Button',
component: IonButton,
decorators: [
moduleMetadata({
imports: [IonicModule.forRoot()],
}),
],
} as Meta;
こちら注目すべきどころは2点
-
component: IonButton,直接に@ionic/angularライブラリのコンポーネントを使う、IonButtonという名前は自己編集不可。そのままに使いましょう。 -
decoratorsは、IonicModuleを導入させます。IonButtonはIonicModuleの下に作動されるので、decoratorsがなかったらページは動きません。
最後に、storiesを定義
ファイルのさらに下に、以下のコードを書く
const Template: Story<IonButton> = (args: IonButton) => ({
props: args,
template: `<ion-button>テキスト</ion-button>`,
});
export const Basic = Template.bind({});
template:は、そのままに<ion-button>を使ってください
以上が終わったら、ページに戻り
Ionicのボタンが表しているのを確認
Controlsを追加
StorybookのControlsパネルで
操作したり、画面を自由に変えたりようにしましょう
Controlsの詳しい書き方は、このページを参考してください
ボタンのラベル文字
<ion-button>の中の「テキスト」を{{label}}というlabel変数を入れ
- template: `<ion-button>テキスト</ion-button>`,
+ template: `<ion-button>{{label}}</ion-button>`,
そして、ファイルの一番下に以下のコードを追加
Basic.args = {
label: 'テキスト'
};
これで入力欄でラベルを編集できるようになりました
ボタンの色塗り
IonButtonは、fill属性を通して
色塗りが指定できます
まずは、fillには何の値を入れていいのかを定義
Ionicのコンポーネントページをよく見て書きましょう
component: IonButton,の下にコードを追加
component: IonButton,
+ argTypes: {
+ fill: {
+ options: [ 'solid', 'outline', 'clear' ],
+ control: { type: 'inline-radio' }
+ },
+ },
次に、デフォルトのfill属性を定義
label: 'テキスト'の下に追加
label: 'テキスト',
+ fill: 'solid',
ラジオボタンが作動しているのを確認
終わりに
Controlsが面白すぎて
ほぼ全てのIonButtonの属性をControlsにしてしまいました
Githubはこちらです
Chromaticプレビューはこちらです
Discussion