SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

CodeZineニュース

Tailwind CSS上で動作するUIライブラリ「Daisy UI」のバージョン3.0が公開

  • このエントリーをはてなブックマークに追加

  • このエントリーをはてなブックマークに追加

 「Tailwind CSS」上で動作するUIライブラリ「Daisy UI」の開発チームは最新バージョンとなる「バージョン3.0」を6月3日(現地時間)に公開した。Daisy UIは、MITライセンスで公開しているオープンソース・ソフトウェア。

 Daisy UIは、CSSフレームワーク「Tailwind CSS」上で動作するUIライブラリ。ボタンやチェックボックス、ドロップダウンリストなど、Webページ向けの多様なユーザーインターフェイス部品を提供する。開発者はHTMLやJSX(JavaScript XML)のファイルを記述することで、Daisy UIが提供するユーザーインターフェイス部品を利用できる。

 バージョン3.0では、新しいユーザーインターフェイス部品として、「Spinner」「Accordion」「Join」の3種類を追加した。Spinnerは、データの読み出しなど時間がかかる処理を実行している間に表示することで、処理が確実に続いていることをユーザーに知らせる部品。処理中はアニメーションを再生し、アニメーションが動いている間は処理が問題なく続いているとユーザーに印象づけることができる。Spinnerにはそれぞれ見た目が異なる7種類の部品があり、7種類それぞれが大きさを4段階で調節できる。

 Accordionは、ユーザーがクリックすると下方向に広がり、広がった部分にテキストを表示できる部品。何段にも重ねると、アコーディオンのように見える。畳んだ状態の時は、大まかなテーマを表現する短いテキストを表示し、クリックすると広がる部分にはその詳細を説明するテキストを表示するような使い方が適している。

 Joinは、ボタンやテキストボックスなどのUI部品を複数つなげて表示する役目を果たす。部品をつなげるときは横方向につなげるだけでなく、縦方向につなげることもできる。つなげた複数の部品の外枠と、個々の部品の境界を表す線を表示し、外枠の四隅は丸めて表示する。

 そのほかにも「ダーク」テーマの配色をより暗く変更し、いくつかのUI部品の標準設定を変更するなどの更新が加わっている。

関連リンク

この記事は参考になりましたか?

  • このエントリーをはてなブックマークに追加
この記事の著者

CodeZine編集部(コードジンヘンシュウブ)

CodeZineは、株式会社翔泳社が運営するソフトウェア開発者向けのWebメディアです。「デベロッパーの成長と課題解決に貢献するメディア」をコンセプトに、現場で役立つ最新情報を日々お届けします。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/17896 2023/06/30 12:33

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング