TreeView
アコーディオン
このビューは、TreeView コントロールを使用してアコーディオンコントロールを作成する方法を示します。
機能
サンプル
説明
アコーディオンは、一度に 1 つのパネルのみを展開したままにするマルチペインパネルです。ナビゲーションによく使用されます。
TreeView コントロールを使用してアコーディオンを実装できます。
ヘッダーの表示をカスタマイズして、折りたたみ/展開グリフを非表示にするには、CSS を使用します。アクティブでないパネルが自動的に折りたたまれるように、「auto-collapse」属性は true に設定してください（デフォルト）。
ソース
AccordionController.cs
using MvcExplorer.Models;
using Microsoft.AspNetCore.Mvc;
namespace MvcExplorer.Controllers
{
partial class TreeViewController
{
// GET: Accordion
public ActionResult Accordion()
{
return View(MenuItemData.GetData());
}
}
}
Accordion.cshtml
@model MenuItemData[]
<c1-tree-view id="accordion" class="accordion-tree" is-content-html="true"
auto-collapse="true" display-member-path="Header"
child-items-path="Items" source="Model"></c1-tree-view>
<br/>
<div id="tvAccordionItem"></div>
<script type="text/javascript">
var treeView = wijmo.Control.getControl('#accordion');
if (treeView) {
treeView.hostElement.addEventListener('click', function (e) {
if (e.target.tagName == 'A') {
document.getElementById('tvAccordionItem').innerHTML =
'Navigating to <b>*** ' + e.target.href + ' ***</b>';
e.preventDefault();
}
});
}
</script>
@section Summary{
<p>@Html.Raw(TreeViewRes.Accordion_Text0)</p>
}
@section Description{
<p>@Html.Raw(TreeViewRes.Accordion_Text1)</p>
<p>@Html.Raw(TreeViewRes.Accordion_Text2)</p>
<p>@Html.Raw(TreeViewRes.Accordion_Text3)</p>
}
マニュアル