はじめに
ヒント
Radix Vue は、Radix UI の非公式コミュニティ主導の Vue ポートであるため、プリミティブを構築する際には同じ原則とビジョンを共有しています。
Radix Primitives は、アクセシビリティ、カスタマイズ性、開発者エクスペリエンスに重点を置いた、低レベルの UI コンポーネントライブラリです。これらのコンポーネントは、デザインシステムのベースレイヤーとして使用することも、段階的に導入することもできます。
ビジョン
私たちのほとんどは、アコーディオン、チェックボックス、コンボボックス、ダイアログ、ドロップダウン、セレクト、スライダー、ツールチップなど、一般的な UI パターンの定義を共有しています。これらの UI パターンは、WAI-ARIA によって文書化されており、一般的にコミュニティによって理解されています。
しかし、ウェブプラットフォームによって提供される実装は不十分です。それらは存在しないか、機能が不足しているか、十分にカスタマイズできません。
そのため、開発者はカスタムコンポーネントを構築せざるを得ません。これは非常に難しい作業です。その結果、ウェブ上のほとんどのコンポーネントはアクセスできず、パフォーマンスが悪く、重要な機能が不足しています。
私たちの目標は、コミュニティがアクセシブルなデザインシステムを構築するために使用できる、十分な資金のあるオープンソースのコンポーネントライブラリを作成することです。
主な機能
アクセシブル
コンポーネントは、可能な限り WAI-ARIA デザインパターン に準拠しています。 aria 属性と role 属性、フォーカス管理、キーボードナビゲーションなど、アクセシビリティに関連する多くの難しい実装の詳細を処理します。詳しくは、アクセシビリティ の概要をご覧ください。
スタイルなし
コンポーネントはスタイルなしで提供されるため、スタイリングを完全に制御できます。コンポーネントは、任意のスタイリングソリューション (Vanilla CSS、CSS プリプロセッサ、CSS-in-JS ライブラリ) でスタイルを設定できます。詳しくは、スタイリング ガイドをご覧ください。
オープン
Radix プリミティブは、ニーズに合わせてカスタマイズできるように設計されています。オープンコンポーネントアーキテクチャにより、各コンポーネントパーツにきめ細かくアクセスできるため、それらをラップして独自のイベントリスナー、プロパティ、または ref を追加できます。
制御されていない
該当する場合、コンポーネントはデフォルトでは制御されていませんが、代わりに制御することもできます。すべての動作の配線は内部的に処理されるため、ローカル状態を作成する必要なく、できるだけスムーズに起動して実行できます。
開発者エクスペリエンス
私たちの主な目標の 1 つは、可能な限り最高の開発者エクスペリエンスを提供することです。 Radix Primitives は、完全に型付けされた API を提供します。すべてのコンポーネントは同様の API を共有しており、一貫性のある予測可能なエクスペリエンスを作成します。また、`asChild` プロパティ (Vue では問題ありません) も実装しており、ユーザーはレンダリングされた要素を完全に制御できます。
ツリーシェイキングフレンドリー
すべてのプリミティブを 1 つのパッケージにコンパイルしているため、1 回インストールするだけで、すべてのプリミティブにアクセスできます。心配しないでください。ツリーシェイキングに対応しているため、未使用のプリミティブはバンドルに含まれません。
$ npm add radix-vueコミュニティ
Discord
Radix コミュニティに参加し、質問したり、ヒントを共有したりするには、Discord に参加してください。
Twitter
新しいプリミティブ、お知らせ、ブログ投稿、一般的な Radix のヒントに関する最新情報を受け取るには、Twitter でフォローしてください。
GitHub
問題を報告したり、機能をリクエストしたり、貢献したりするには、GitHub をチェックアウトしてください。