📝

Xtend UI A11y規格、アクセシビリティにも配慮されているフロントエンドライブラリ

かこなーる2022/10/24に公開

※この記事は以前ちょっと株式会社 社員ブログで公開していたものです

こんにちわ!フロントエンドエンジニアのしまむーです!
今回は先月末(2022年1月末)にv1.0が公開されたばかりのフロントエンドライブラリXtend UIについてご紹介したいと思います。

Xtend UIとは

Xtend UIはシンプルでカスタマイズ性の高いUI設計をサポートするフロントエンドライブラリです。UIライブラリと呼ばれるものに比べてスクロール連動のアニメーションなどフロントエンドの広範囲をサポートするライブラリになっています。内部的にはTailwind.css、vanilla.js、Gsapで構成されています。
Webサイトやアプリケーション等の構築の際に必要となるUIのデザインに必要な初期工程をある程度担ってくれるようなライブラリになります。
A11y規格にも準拠しており、アクセシビリティにも配慮されているので注目しています。
Vanilla JS、Reactで利用するためのドキュメントも用意されています。

どんなコンポーネントや機能が用意されているのか

まずコンポーネントとしては下記のような基本的なものが用意されています。

Button

https://xtendui.com/components/button

Card

https://xtendui.com/components/card

Icon

https://xtendui.com/components/icon

Link

https://xtendui.com/components/link

List

https://xtendui.com/components/list

Loader

https://xtendui.com/components/loader

Media

https://xtendui.com/components/media/content

Row

https://xtendui.com/components/row

Table

https://xtendui.com/components/table

Form
ラジオボタン、チェックボックス、複数選択などフォームで頻繁に使うものは一通り用意されていますね。

https://xtendui.com/components/form

上記に合わせて、ドロップダウンメニュースクロールナビゲーションスライダートグルボタンモーダルなども用意されています、おおよそのことは用意されているコンポーネントで出来そうです。


スタイルのカスタマイズなどはtailwind.config.jsの設定の変更や、tailwindのユーティリティークラスを要素へ追加するなどで対応できます。

このライブラリを使うにあたって注意しなければいけない点があるとすれば、TailwindCSSの使い方とGsapの使い方についても多少知っておく必要があることだとは思いますがドキュメントをサラッと読む程度で問題ないと思いますのでとりあえず使ってみても良いと思います。
(ただしリリースされたばかりなのでバグ等は存在する可能性があります。)

最後に

Gsapなども組み込まれて、これについては不要な方も多いかもしれませんが使わないとしてもさまざまな機能がまとめて用意されているのは手軽で便利です。
まだ正式版が公開されて間もないので更新も非常に活発、今後も目が離せないライブラリです!

chot Inc. tech blog

ちょっと株式会社のエンジニアブログです。

Discussion

ログインするとコメントできます