Libx サンプルドキュメント

コンポーネント概要

このドキュメントシステムには、インタラクティブ要素、視覚的補助、改善されたユーザーエクスペリエンスでドキュメントを強化するために設計された包括的なUIコンポーネントセットが含まれています。

利用可能なコンポーネント

コンテンツコンポーネント

コンポーネント目的使用例
Iconスケーラブルなベクターアイコンを表示ステータスインジケーター、ナビゲーション、強調
Buttonインタラクティブなボタンとリンクコールトゥアクション、ナビゲーション、ダウンロード
Cardコンテンツコンテナ機能ハイライト、要約、リンク
Alert重要な通知警告、ヒント、情報コールアウト

ナビゲーションコンポーネント

コンポーネント目的使用例
Tabsタブでコンテンツを整理コード例、マルチオプション指示
TableOfContentsページナビゲーション長いドキュメント、リファレンスページ
Breadcrumbsパスナビゲーション深いコンテンツ階層
Pagination連続ナビゲーション複数ページガイド、チュートリアル

レイアウトコンポーネント

コンポーネント目的使用例
Gridレスポンシブレイアウト画像ギャラリー、機能グリッド
TwoColumn並列コンテンツ比較、変更前後の例
Sidebar文脈的情報関連リンク、クイックリファレンス
Hero目立つヘッダーランディングページ、主要セクション開始

クイック例

テキスト付きアイコン

アイコン付き情報メッセージ
アイコン付き警告メッセージ
アイコン付き成功メッセージ

インタラクティブ要素

コンテンツカード

コンポーネントの使用

インポート文

すべてのコンポーネントは@docs/uiパッケージから利用できます：

import { Icon, Button, Card, Tabs, TabItem } from '@docs/ui';

MDX統合

コンポーネントはMDXファイルでシームレスに動作します：

---
title: "私のドキュメント"
---

import { Icon, Alert } from '@docs/ui';

# 私のドキュメント

<Alert type="info">
  <Icon name="info" />
  これはコンポーネントを使用した情報コールアウトです。
</Alert>

通常のMarkdownコンテンツがここから続きます...

コンポーネントのProps

ほとんどのコンポーネントは標準的なpropsを受け取ります：

  • className: スタイリング用のCSSクラス
  • style: インラインスタイルオブジェクト
  • children: コンポーネント内にレンダリングするコンテンツ
  • コンポーネント固有のprops: 個別のコンポーネントページで文書化

デザイン原則

一貫性

すべてのコンポーネントは一貫したデザインパターンに従います：

  • カラースキーム: テーマ用のCSSカスタムプロパティを使用
  • タイポグラフィ: ドキュメントのタイポグラフィスケールに適合
  • スペーシング: 一貫したスペーシング単位に従う
  • アクセシビリティ: WCAG 2.1 AA準拠

柔軟性

コンポーネントは柔軟になるよう設計されています：

  • カスタマイズ可能: styleとclassNameのpropsを受け取る
  • レスポンシブ: すべての画面サイズで適切に動作
  • コンポーザブル: 組み合わせて複雑なレイアウトを作成可能
  • テーマ対応: ライトとダークの両テーマをサポート

パフォーマンス

コンポーネントはパフォーマンスのために最適化されています：

  • ツリーシェイキング: 使用するもののみインポート
  • 軽量: 最小限のバンドル影響
  • サーバーサイドレンダリング: 完全なSSRサポート
  • 高速読み込み: 迅速なページ読み込みのために最適化

コンポーネントカテゴリ

コンテンツ強化

コンテンツをより魅力的にします：

  • アイコン: 視覚的インジケーターと強調を追加
  • ボタン: インタラクティブなコールトゥアクション要素を作成
  • アラート: 重要な情報をハイライト

整理

コンテンツを効果的に構造化します：

  • タブ: 関連コンテンツをタブで整理
  • カード: 関連情報をグループ化
  • グリッド: レスポンシブレイアウトを作成

ナビゲーション

ユーザーがコンテンツをナビゲートするのを支援：

アクセシビリティ機能

すべてのコンポーネントにアクセシビリティ機能が含まれています：

  • キーボードナビゲーション: 完全なキーボードサポート
  • スクリーンリーダーサポート: 適切なARIAラベルとロール
  • フォーカス管理: 論理的なフォーカス順序
  • カラーコントラスト: WCAGコントラスト要件を満たす
  • モーション軽減: ユーザーのモーション設定を尊重

カスタマイズ

CSSカスタムプロパティ

コンポーネントはテーマ用にCSSカスタムプロパティを使用：

:root {
  --color-primary: #007bff;
  --color-secondary: #6c757d;
  --color-success: #28a745;
  --color-warning: #ffc107;
  --color-danger: #dc3545;
}

スタイルオーバーライド

CSSクラスでコンポーネントスタイルをオーバーライド：

.custom-button {
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  border: none;
  border-radius: 25px;
}
<Button className="custom-button">カスタムスタイルボタン</Button>

コンポーネントの開始

  1. アイコンを探索: 最も一般的に使用されるコンポーネントから開始
  2. タブを試す: コンテンツを効果的に整理する方法を学ぶ
  3. レイアウトを作成: レスポンシブページレイアウトを構築
  4. ナビゲーションを追加: コンテンツの発見可能性を向上

次のステップ

コンポーネントでドキュメントを強化する準備はできていますか？