Alius コンポーネントシステムは、デザインシステムのビジュアル言語、インタラクションパターン、アクセシビリティ基準を実装する再利用可能な UI コンポーネントの統一ライブラリを提供します。コンポーネントはカテゴリー別に整理され、ウェブサイト、ドキュメントセンター、ソフトウェアクライアント、コミュニティプラットフォーム全体で使用されるよう設計されています。

コンポーネントカテゴリー

基本コンポーネント

インターフェース全体で使用される基礎的なビルディングブロック：

  • ボタン： プライマリ、セカンダリ、ターシャリ、デンジャー、ゴースト、リンク — 全状態付き（デフォルト、ホバー、アクティブ、フォーカス、無効、ローディング）
  • 入力： テキストフィールド、数値フィールド、パスワードフィールド、検索フィールド — ラベル、プレースホルダー、バリデーション、ヘルパーテキスト付き
  • セレクト： 単一選択ドロップダウン、複数選択ドロップダウン — 検索、グループ、無効オプション付き
  • ラジオ： 少数セットからの単一選択用ラジオグループ
  • チェックボックス： 単一チェックボックスと複数選択用チェックボックスグループ
  • スイッチ： バイナリオン/オフ設定用トグル
  • スライダー： min/max/step 付きの連続値選択
  • タグ / バッジ： ステータスインジケーター、カテゴリーラベル、バージョンタグ
  • ツールチップ： ホバーまたはフォーカス時のコンテキスト情報
  • ディバイダー： 水平および垂直セパレーター
  • アバター： ユーザーとデバイスのアイデンティティ表示
  • アイコン： すべてのアイコンカテゴリーをサポートする統一アイコンコンポーネント

ドックコンポーネント

ドキュメントとコンテンツ表示に特化したコンポーネント：

  • コールアウト： アイコンとカラーボーダー付きのノート、警告、ヒント、デンジャーブロック
  • コードブロック： コピーボタン、行番号、言語ラベル付きのシンタックスハイライトコード
  • インラインコード： 変数名、コマンド、ファイルパス用のモノスペースインラインコードスタイリング
  • テーブル： ソート、ゼブラストライプ、レスポンシブ動作付きのスタイリング済みデータテーブル
  • タブ： 代替例、言語、設定を表示するためのタブ付きコンテンツパネル
  • アコーディオン / コラプス： オプションまたは詳細コンテンツ用の展開可能セクション
  • ステップリスト： 番号付きステップバイステップの手順表示
  • カードグリッド： 関連ページやリソースへのリンク用の一貫したグリッドレイアウト
  • パンくず： ナビゲーションパンくずトレイル
  • TOC： ページ内ナビゲーション用の目次コンポーネント
  • 前 / 次： ドキュメントページ下部の順次ページナビゲーション
  • バージョンバッジ： ドキュメントのバージョンと最新状況を示すインジケーター

製品コンポーネント

製品の紹介と管理のためのコンポーネント：

  • 製品カード： 画像、タイトル、説明、主要仕様付きの製品概要カード
  • スペックテーブル： ハードウェアまたはソフトウェア製品の構造化仕様テーブル
  • 比較テーブル： 機能チェックマーク付きの製品並列比較
  • ギャラリー： サムネイル、ライトボックス、ズーム付きの画像ギャラリー
  • 料金カード： 機能リストと CTA 付きの料金ティア表示
  • ダウンロードボタン： フォーマット、サイズ、バージョン情報付きのファイルダウンロードコンポーネント
  • 互換性マトリクス： 製品、バージョン、プラットフォーム間の互換性を示すテーブル
  • ステータスインジケーター： 接続ステータス、可用性、ライフサイクル状態の表示

コミュニティコンポーネント

コミュニティのインタラクションとコラボレーションのためのコンポーネント：

  • コントリビューターカード： アバター、名前、役割、貢献統計付きのユーザープロフィールカード
  • ディスカッションスレッド： ネストされたスレッド付きのコメントと返信表示
  • リアクションバー： 投稿とコメント用の絵文字またはアイコンベースのリアクション表示
  • タグリスト： コミュニティコンテンツのフィルタリング用カテゴリゼーションタグ
  • アクティビティフィード： 最近のコミュニティアクティビティの時系列表示
  • リポジトリカード： スター、フォーク、説明付きの GitHub リポジトリ概要
  • イシュー / PR リンク： GitHub イシューとプルリクエストへのリンク参照
  • リーダーボード： コミュニティ貢献のランキング表示

コンポーネント設計原則

  • 構成可能： コンポーネントは連携して動作し、クリーンにネストできるよう設計する
  • アクセシブル： すべてのコンポーネントは WCAG 2.1 AA 基準を満たす
  • ドキュメント化： すべてのコンポーネントに使用ガイドライン、Props/API ドキュメント、例がある
  • 一貫性： スペーシング、カラー、タイポグラフィ、インタラクションパターンはデザインシステムに従う
  • レスポンシブ： コンポーネントは異なる画面サイズに適応する
  • テーマ対応： コンポーネントはライトモードとダークモードの両方をサポート