AngularDart Material Design 选项树 顶

MaterialTreeComponent

Selector: <material-tree>

支持选项树的材质选择组件。

要使用，只需传递最少的选项即可查看项目。

如果SelectionOptions实现Parent接口，则为Parent.hasChildren设置的每个选项显示一个handle，并且切换handle将从Parent.childrenOf的结果创建另一个树。

如果SelectionOptions实现Filterable接口。

要从组件接收反馈，需要selection模型。

要自定义，请指定itemRenderer和/或factoryRenderer。

Inputs:

• allowParentSingleSelection bool  小部件是否支持选择非叶节点 如果为false，并且小部件使用单个选择模型，则单击小部件时应在单击非叶节点时切换扩展。 如果为true，则小部件应在单击时选择非叶节点，并且仅在单击扩展图标时切换扩展。
• componentRenderer (dynamic) → Type 已禁用！请改用[factoryRenderer]
• expandAll bool  是否始终扩展选项组。
• factoryRenderer (dynamic) → ComponentFactory<dynamic>  指定用于确定用于呈现项目的工厂的factoryRenderer。
• itemRenderer (dynamic) → String  一个简单的函数，用于将项呈现为字符串。
• optimizeForDropdown bool  是否在单个选择下拉列表中隐藏复选标记
• options SelectionOptions<dynamic>  这个contianer的可用选项。
• selection SelectionModel<dynamic>  此容器表示的选择模型。

MaterialTreeDropdownComponent

Selector: <material-tree-dropdown>

包含MaterialTreeComponent的按钮触发下拉列表。

Inputs:

• componentRenderer (dynamic) → Type  已禁用！请改用[factoryRenderer]
• expandAll bool  是否始终扩展选项组。
• factoryRenderer (dynamic) → ComponentFactory<dynamic>  指定用于确定用于呈现项目的工厂的factoryRenderer。
• itemRenderer (dynamic) → String  一个简单的函数，用于将项呈现为字符串。
• options SelectionOptions<dynamic>  这个contianer的可用选项。
• placeholder String  当没有选择任何内容时，占位符将用于下拉文本。
• selection SelectionModel<dynamic> 此容器表示的选择模型。
• shouldExpandAllWhenFiltered bool  如果为true，则在过滤树时展开所有项目。
• showFilterInsidePopup bool  将过滤器输入放在弹出窗口内。
• visible bool  是否显示下拉列表。

Outputs:

• visibleChange Stream<bool> 当下拉列表的可见性发生变化时触发。

MaterialTreeFlatReadonlyDemoComponent

MaterialTreeFlatSelectableDemoComponent

MaterialTreeFlatMultiDemoComponent

MaterialTreeNestedSingleDemoComponent

MaterialTreeNestedSingleParentSelectableDemoComponent

MaterialTreeNestedMultiDemoComponent

MaterialTreeNestedItemRenderingComponent

MaterialTreeNestedComponentRenderingComponent

MaterialTreeNestedExpandDemoComponent

MaterialTreeDropdownSingleDemoComponent

MaterialTreeDropdownMultiDemoComponent

MaterialTreeDropdownFilterableDemoComponent

MaterialTreeDropdownNestedFilterableDemoComponent

MaterialTreeDropdownNestedFilterInPopupDemoComponent

MaterialTreeNestedSingleDividerDemoComponent

MaterialTreeViewMoreDemoComponent

查看示例，查看源码。

(adsbygoogle = window.adsbygoogle || []).push({}); function googleAdJSAtOnload() { var element = document.createElement("script"); element.src = "//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"; element.async = true; document.body.appendChild(element); } if (window.addEventListener) { window.addEventListener("load", googleAdJSAtOnload, false); } else if (window.attachEvent) { window.attachEvent("onload", googleAdJSAtOnload); } else { window.onload = googleAdJSAtOnload; }