ブログなどで見るステップデザイン。
見やすくて便利で使いやすいので本サイトでも頻繁に使用しています。
今回はそれをChakra UIで実現してみたTips記事となります。
完成形
以下のようなステップコンポーネントを作成します。
実装
以下のように割と簡単な実装となりました。
Accordionという既存コンポーネントを使用することで良い感じに実装できたと思います。
参考リンク
Chakra UI
Simple, Modular & Accessible UI Components for your React Applications
最後に
最初の段階ではどうやって実装するか迷いましたが、ベースとするコンポーネント(Accordion)が決まった後はさくっと実装することができました。
アイディア次第でいろいろなコンポーネントを簡単に実装できるのはChakra UIのよいところだなぁと改めて感じました。