目次
BuefyのUIキット作りました！
BuefyのUIキットです。無料ですので使ってください！
以前制作したBulmaのUIキットを元に、BuefyのUIキットを制作しました！
無料ですので、使いたい方はぜひダウンロードしてください！
Buefyって何ぞ？って方は「BulmaとVue.jsでできたUIコンポーネント「Buefy」【紹介とチュートリアル】」の記事を読むことをオススメします。
▲Buefy-UIキットの外観
下記のボタンからファイルをダウンロードできます。
※ダウンロード前に下記の注意事項をお読みください。
注意事項
- みなさまが当Adobe XDファイルをダウンロードし、使用することによって、コンピュータやソフト、または業務に支障・障害が生じた場合、いかなる理由によるものでも一切責任を負いません。あらかじめご了承ください。
- 当データは、Adobe XDのバージョン(11.0.22.10)で作られています。バージョンによってデザインが崩れたり、意図しない動作が発生する可能性があります。
- 利用制限は特にございません。商用でも無料でご利用いただけます。
ファイルの中身の解説
解説するほどでもありませんが、ファイルの中身をさらっと紹介します。
BuefyとBulmaのUIが一緒に入っています
今回制作したBuefyのUIキットは、前回制作したBulmaのUIキットを元に制作しています。
したがって形式はxd（Adobe XDファイル）です。比較的新しいバージョンのXDであれば、問題なく開けると思います。
また、実際にファイルを開いていただくと分かるのですが、元のBulmaのUIキットにBuefyのUIを付け足しています。
画面左側にはBuefyのUI、画面右側にはBulmaのUIを配置しています。
画面左側がBuefyのUI。画面右側がBulmaのUI。
適宜、必要なUIコンポーネントをコピペしてお使いください。
Buefyの各コンポーネントをそろえています！
Buefyの公式サイトのドキュメンテーションに記載されているUIコンポーネントを一通りそろえました。
これで大概のレイアウトは作れると思います。
▲BuefyのDialogです。
▲BuefyのSnackbarです。
▲BuefyのDatepickerです。
まとめ
以上、BuefyのUIキットでした。
使いたい方はぜひお試しを！
BuefyのUIキットについて「ここが間違っているよ。こうした方がいいよ。」といったご意見がありましたら、お問い合わせにご連絡くださいませ。
なるべく早く返信するよう心がけますので、よろしくお願いします。
