Ionic/AngularでStorybookを導入する手順Zennイーアン🐈Ionic/AngularでStorybookを導入する手順2021/10/29に公開・約3,300字ツイートAngularStorybookIonictech前置きIonicのコンポーネントを、そのまま使ってStorybookのページに表示させる、その方法を紹介している記事です。startを打つIonicプロジェクトを用意しましょう。initを打ってインストールしましょう。storybookを執り行い終わったら、ブラウザがstorybookのページを自動にジャンプします。デフォルトのStorybook画面が見れますStorybookの仕組みAngularのStorybookは、以下二つのファイルによって作動されています。直接に@ionic/angularライブラリのコンポーネントを使う、IonButtonという名前は自己編集不可。そのままに使いましょう。decoratorsは、IonicModuleを導入させます。IonButtonはIonicModuleの下に作動されるので、decoratorsがなかったらページは動きません。終わりにControlsが面白すぎてほぼ全てのIonButtonの属性をControlsにしてしまいましたGithubはこちらですhttps://github.com/ianchen0419/ionic-course/blob/main/src/stories/Button.stories.tsChromaticプレビューはこちらですhttps://615982bec67f67003acaaea2-lpctzybfmz.chromatic.com/?path=/story/ionic-button--basicツイートイーアン台湾人のフロントエンドエンジニアですバッジを贈って著者を応援しようバッジを受け取った著者にはZennから現金やAmazonギフト券が還元されます。前置きIonic環境を整えるStorybookをインストールStorybookの仕組みStoriesを書くControlsを追加ボタンのラベル文字ボタンの色塗り終わりにZennエンジニアのための情報共有コミュニティAboutZennについて運営会社お知らせ・リリースGuides使い方Publicationよくある質問LinksTwitterGitHubメディアキットLegal利用規約プライバシーポリシ。