Callout Component デモ
Obsidian風の美しいCalloutコンポーネントを実装しました。以下のタイプが利用可能です。
##基本的な使い方
###Note（デフォルト）
Note
デフォルトのCalloutタイプは「note」です。重要な情報を強調表示するのに適しています。
<Callout>
デフォルトのCalloutタイプは「note」です。
</Callout>###Info
Info
補足情報や追加の説明を提供する際に使用します。技術的な詳細や背景情報に最適です。
<Callout type="info">
補足情報や追加の説明を提供する際に使用します。
</Callout>###Tip（ヒント）
Tip
💡 ベストプラクティスや便利なヒントを共有する際に使用します。読者に役立つアドバイスを目立たせることができます。
<Callout type="tip">
💡 ベストプラクティスや便利なヒントを共有する際に使用します。
</Callout>###Success
Success
✅ 成功事例や正しい実装方法を示す際に使用します。完了したタスクや達成事項の強調にも便利です。
<Callout type="success">
✅ 成功事例や正しい実装方法を示す際に使用します。
</Callout>###Warning（警告）
Warning
⚠️ 注意が必要な事項や潜在的な問題について警告します。設定変更や重要な決定の前に読者の注意を引くのに最適です。
<Callout type="warning">
⚠️ 注意が必要な事項や潜在的な問題について警告します。
</Callout>###Danger
Danger
🔥 破壊的な操作や重大なリスクを伴う内容を強調します。本番環境での操作や回復不可能な変更について警告する際に使用してください。
<Callout type="danger">
🔥 破壊的な操作や重大なリスクを伴う内容を強調します。
</Callout>###Error
Error
❌ エラーメッセージや失敗したケースを示す際に使用します。避けるべき実装やよくある間違いを強調するのに適しています。
<Callout type="error">
❌ エラーメッセージや失敗したケースを示す際に使用します。
</Callout>###Question
Question
❓ FAQ項目や読者への質問、考えるべきポイントを提示する際に使用します。インタラクティブな学習体験を提供できます。
<Callout type="question">
❓ FAQ項目や読者への質問、考えるべきポイントを提示する際に使用します。
</Callout>###Abstract
Abstract
✨ 概要やサマリー、抽象的な概念を説明する際に使用します。セクションの導入や全体像の提示に最適です。
<Callout type="abstract">
✨ 概要やサマリー、抽象的な概念を説明する際に使用します。
</Callout>###Example
Example
📝 具体的な使用例やサンプルコードを示す際に使用します。実践的なデモンストレーションに適しています。
<Callout type="example">
📝 具体的な使用例やサンプルコードを示す際に使用します。
</Callout>##カスタムタイトル
カスタムヘッダー
タイトルをカスタマイズすることができます。デフォルトではタイプ名が使用されますが、title プロパティで上書き可能です。
<Callout type="info" title="カスタムヘッダー">
タイトルをカスタマイズすることができます。
</Callout>##折り畳み可能なCallout
クリックして展開
<Callout type="tip" title="クリックして展開" collapsible collapsed>
長い補足説明や詳細情報を隠しておくのに便利です。
</Callout>##複雑なコンテンツ
Callout内では、リスト、コードブロック、その他のMarkdown要素も使用できます：
複雑なコンテンツの例
以下のような要素を含めることができます：
- リスト項目1: 通常のリスト
- リスト項目2:
インラインコードも使用可能 - リスト項目3: リンクも含められます
さらに、コードブロックも埋め込めます：
function greet(name: string): string {
return `Hello, ${name}!`;
}表も使用できます：
| 機能 | サポート |
|---|---|
| リスト | ✅ |
| コード | ✅ |
| 画像 | ✅ |
##実用例
###技術ドキュメント
非推奨の警告
この API は v2.0 で非推奨となりました。代わりに新しい useNewAPI() を使用してください。
パフォーマンスのヒント
大量のデータを処理する際は、useMemo や useCallback を使用してレンダリングを最適化しましょう。
###チュートリアル
前提知識
このチュートリアルを進めるには、以下の知識が必要です：
- JavaScript の基本
- React の基礎
- TypeScript の型システム
完了！
おめでとうございます！これでCalloutコンポーネントの使い方をマスターしました。
##まとめ
Calloutコンポーネントは以下の特徴を持っています：
- 🎨 10種類のタイプ: note, info, tip, success, warning, danger, error, question, abstract, example
- 🌙 ダークモード対応: 自動的にテーマに適応
- 📱 レスポンシブ: すべての画面サイズで美しく表示
- 🔽 折り畳み可能: 長いコンテンツを隠すことが可能
- 🎯 カスタマイズ可能: タイトルや初期状態を自由に設定
- 📝 Markdown対応: リスト、コード、画像などすべてサポート
技術ブログやドキュメントの品質を向上させるのに最適なコンポーネントです！