mcpField
S
syncfusion-aspnetcore-splitter

syncfusion-aspnetcore-splitter

github.com/syncfusionデザイン・UI098 回インストール3 週間前に更新
リポジトリ

syncfusion-aspnetcore-splitter について

Syncfusion ASP.NET Core Splitter を実装するためのスキルです。複数ペインのレイアウトを構築する開発者向けに、ペインのサイズ変更、折りたたみ、コンテンツ、入れ子構成を解説します。

主な機能

  1. 01水平・垂直ペインレイアウト
  2. 02ピクセル・割合・自動サイズ
  3. 03サイズ制約付きペインのリサイズ
  4. 04ペインの展開と折りたたみ
  5. 05HTML・テキスト・コントロールの配置
  6. 06入れ子の Splitter と RTL 対応

活用シーン

  1. 01ナビゲーションとコンテンツのレイアウト構築
  2. 02サイズ変更可能な区画を持つダッシュボード作成
  3. 03プレビュー領域付きエディターの配置
  4. 04ツリーとプレビューを備えたファイル管理画面の構成

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/syncfusion/aspnetcore-ui-components-skills --skill syncfusion-aspnetcore-splitter

インストール後、Claude Code で/syncfusion-aspnetcore-splitterを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
api-reference.md
expand-collapse.md
getting-started.md
pane-content.md
pane-sizing-and-resizing.md
split-pane-layouts.md
styling-and-globalization.md

詳細

Syncfusion ASP.NET Core Splitter の実装

このスキルを使用する場面

次のような場合にこのスキルを使用します。

  • Splitter コンポーネントでレスポンシブな複数ペインレイアウトを作成する
  • 水平および垂直の分割ペインを設定する
  • ペインのサイズ（ピクセル、パーセンテージ、自動）を設定する
  • 最小値／最大値の制約を設けて、ペインのサイズ変更を有効または無効にする
  • ペインのコンテンツとして HTML、プレーンテキスト、または Syncfusion コントロールを追加する
  • ペインの展開／折りたたみ機能を実装する
  • 複雑なレイアウト向けにネストされたスプリッターを構築する
  • スプリッターのスタイルと外観をカスタマイズする
  • グローバル化に向けて RTL（右から左）サポートを有効にする

コンポーネントの概要

Syncfusion ASP.NET Core Splitter は、複雑な複数ペインのアプリケーションを作成できるレイアウト／コンテナーコントロールです。次の機能をサポートしています。

  • 水平および垂直の向きに対応した複数ペイン
  • ピクセル、パーセンテージ、自動サイズ設定による柔軟なサイズ設定
  • ドラッグハンドルと最小値／最大値の制約を備えたサイズ変更可能なペイン
  • 展開／折りたたみボタンを備えた折りたたみ可能なペイン
  • HTML、テキスト、その他の Syncfusion コントロールを含む豊富なコンテンツ
  • 階層的なレイアウト構成に対応するネストされたスプリッター
  • カスタマイズ可能なスタイルと RTL サポート

ドキュメントとナビゲーションガイド

はじめに

📄 参照： references/getting-started.md

  • NuGet パッケージのインストール
  • タグヘルパーの登録
  • スタイルシートとスクリプトの設定
  • 最初のスプリッターの作成
  • 基本的な 2 ペイン構成
  • 向きの設定
分割ペインのレイアウト

📄 参照： references/split-pane-layouts.md

  • 水平レイアウトと垂直レイアウト
  • 複数ペインの構成
  • 区切り線のカスタマイズ
  • ネストされたスプリッターの実装
  • 複雑なデザイン向けのレイアウトパターン
ペインのコンテンツ

📄 参照： references/pane-content.md

  • ペインのコンテンツとしての HTML マークアップ
  • ペイン内の Syncfusion コントロール
  • プレーンテキストのコンテンツ
  • コンテンツテンプレート
  • セレクターを使用したコンテンツの読み込み
  • JavaScript による初期化方法（Accordion + ListView）
ペインのサイズ設定とサイズ変更

📄 参照： references/pane-sizing-and-resizing.md

  • ピクセル単位のペインサイズ設定
  • パーセンテージによるサイズ設定
  • 自動サイズ設定のペイン
  • 最小値／最大値のサイズ制約
  • サイズ変更の有効化／無効化
  • サイズ変更イベントとグリッパーのカスタマイズ
展開と折りたたみ

📄 参照： references/expand-collapse.md

  • 折りたたみ可能なペインの設定
  • プログラムによる展開／折りたたみメソッド
  • 初期の折りたたみ状態
  • 展開／折りたたみイベント
スタイル設定とグローバル化

📄 参照： references/styling-and-globalization.md

  • 分割バーの CSS カスタマイズ
  • サイズ変更ハンドルのスタイル設定
  • カスタムテーマ
  • RTL（右から左）サポート
  • アクセシビリティ機能
API リファレンス

📄 参照： references/api-reference.md

  • Splitter プロパティの完全なドキュメント
  • 例を含むペインのプロパティ
  • メソッド（expand、collapse、addPane、removePane）
  • イベントハンドラーを含むすべてのイベント
  • イベント引数オブジェクトとプロパティ
  • 完全に動作するサンプル

クイックスタートの例


<head>
    <link rel="stylesheet" href="url" />
    <script src="url"></script>
</head>

<body>
    @RenderBody()
    <ejs-scripts></ejs-scripts>
</body>


@addTagHelper *, Syncfusion.EJ2

<ejs-splitter id="splitter" height="400px">
    <e-splitter-panes>
        <e-splitter-pane size="50%">
            <div class="content">
                <h3>Pane 1</h3>
                <p>Left pane content</p>
            </div>
        </e-splitter-pane>
        <e-splitter-pane size="50%">
            <div class="content">
                <h3>Pane 2</h3>
                <p>Right pane content</p>
            </div>
        </e-splitter-pane>
    </e-splitter-panes>
</ejs-splitter>

よく使われるパターン

2 ペインレイアウト（左側のナビゲーション + コンテンツ）
<ejs-splitter id="splitter" height="600px">
    <e-splitter-panes>
        <e-splitter-pane size="25%" min="20%"></e-splitter-pane>
        <e-splitter-pane size="75%" min="40%"></e-splitter-pane>
    </e-splitter-panes>
</ejs-splitter>
3 ペインレイアウト（マスター、詳細、プレビュー）
<ejs-splitter id="splitter" height="600px">
    <e-splitter-panes>
        <e-splitter-pane size="30%" min="20%"></e-splitter-pane>
        <e-splitter-pane size="40%" min="25%"></e-splitter-pane>
        <e-splitter-pane size="30%" min="20%"></e-splitter-pane>
    </e-splitter-panes>
</ejs-splitter>
垂直スタック（ヘッダー、メイン、フッター）
<ejs-splitter id="splitter" height="600px" orientation="Vertical">
    <e-splitter-panes>
        <e-splitter-pane size="15%" min="50px"></e-splitter-pane>
        <e-splitter-pane size="70%" min="100px"></e-splitter-pane>
        <e-splitter-pane size="15%" min="50px"></e-splitter-pane>
    </e-splitter-panes>
</ejs-splitter>

主なペイン設定プロパティ

プロパティ型用途
sizestringペインのサイズ（ピクセル（"200px"）またはパーセンテージ（"50%"））
minstringサイズの変更が大きくなりすぎないようにする最小サイズ
maxstring拡張を制限する最大サイズ
resizableboolこのペインのサイズ変更を有効／無効にする（デフォルト：true）
collapsiblebool折りたたみボタンを有効／無効にする（デフォルト：false）
collapsedbool初期の折りたたみ状態（デフォルト：false）
contentstringペインの HTML またはテキストコンテンツ

よくあるユースケース

  1. コードエディターのレイアウト - プレビュー／出力ペインを備えた分割コードエディター
  2. ダッシュボード - サイズ変更可能なパネルを備えた複数のセクション
  3. メールクライアント - フォルダー一覧、メッセージ一覧、メッセージの詳細
  4. IDE インターフェース - プロジェクトエクスプローラー、エディター、プロパティパネル
  5. ドキュメントエディター - リボン、キャンバス、プロパティ、プレビュー
  6. ファイルマネージャー - ツリービュー、ファイル一覧、プレビュー
  7. チャットアプリケーション - 会話一覧、チャット領域、ユーザー情報

次のステップ

  • インストールと基本設定については、Getting Started ガイドを確認してください
  • Split Pane Layouts からレイアウトパターンを選択してください
  • Pane Sizing and Resizing でペインのサイズを設定してください
  • Pane Content のオプションを使用して、リッチコンテンツを追加してください
  • Expand and Collapse などの高度な機能を実装してください
  • Styling and Globalization からカスタムスタイルを適用してください

コメント

Markdown 対応