AngularDart Material Design 扩展面板 顶

MaterialExpansionPanel

Selector: <material-expansionpanel>

材料风格的扩展面板。

一个或多个面板在扩展面板集中组合在一起。 单击面板时,面板内容将展开。 面板由名称,值,可选的辅助文本和展开的面板内容组成。

具有属性 "value" 的内容元素将在其处于折叠状态时用作面板内容的“值”

与面板的交互是通过父扩展集完成的。 该集合考虑了集合中其他面板的状态,并在每个单独的面板上发出适当的操作。

Attributes:

  • wide - 指定展开时面板的宽度,比折叠时的宽度略宽。
  • flat - 表示面板在展开时不应“浮动”或与其他面板分离。

Inputs:

  • alwaysHideExpandIcon bool  如果为true,则永远不应显示展开图标。
  • alwaysShowExpandIcon bool 如果为true,则无论是否使用自定义图标,都应始终显示展开图标。
  • cancelDisplayed bool  默认情况下,设置小部件是否应显示取消按钮为真的选项。
  • cancelText String  要在取消按钮上显示的文本。 例如:“Dismiss”,“Not now”等。默认值为“Cancel”。
  • closeOnSave bool 如果为true,则在成功保存后,面板将尝试关闭。
  • disableHeaderExpansion bool  如果为true,则单击标题不会展开或折叠面板。
  • disabled bool  如果为true, 则面板将保持折叠状态而无法展开,或者如果默认情况下展开,它将保持展开状态。
  • enterAccepts bool  如果设置为true,则工具带按钮将侦听Enter keyup事件并对其触发yes操作。
  • expandIcon String  可选图标名称,用自定义图标替换展开箭头。
  • hideExpandedHeader bool 如果为true,则在展开面板时隐藏显示面板名称的标题。
  • expanded bool 如果为true,则默认情况下会展开面板,如果为false,则面板将关闭。
  • name String  扩展面板的短名称标签。
  • saveDisabled bool  是否禁用了保存按钮。
  • saveText String  要在保存按钮上显示的文本。 例如:“Ok”,“Apply”等。默认值为“Save”。
  • secondaryText String  一些可选的辅助摘要文本,用于描述面板内托管的窗口小部件的状态。
  • showSaveCancel bool  默认情况下,设置小部件是否应显示save/cancel按钮为真的选项。

Outputs:

  • cancel Stream<AsyncAction<bool>>  面板取消时触发事件。
  • close Stream<AsyncAction<bool>>  面板试图关闭时触发事件。 此操作可能会被取消。
  • expandedChange Stream<bool>  面板折叠或展开时触发的事件。
  • expandedChangeByUser Stream<bool> 当用户折叠或展开面板时触发事件。
  • open Stream<AsyncAction<bool>>  面板试图打开时触发事件。 此操作可能会被取消。
  • save Stream<AsyncAction<bool>>  保存面板时触发事件。

MaterialExpansionPanelSet

Selector: <material-expansionpanel-set>

一个指令,它将一组MaterialExpansionPanel转换为一个折叠小部件,因此一次只能打开一个MaterialExpansionPanel。

MaterialExpansionPanelAutoDismiss

Selector: <material-expansionpanel[autoDismissable]>

一个自动折叠MaterialExpansionPanel的指令。

展开MaterialExpansionPanel时,其外部的任何单击都将自动折叠面板。

用法示例:

<material-expansionpanel autoDismissable>
</material-expansionpanel>

MaterialExpansionDemo

查看示例,查看源码

(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; }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏小巫技术博客

A017-布局之FrameLayout

帧布局,是所有布局容器中最简单的一种,控件定义在FrameLayout中默认放置在左上角,定义在后面的控件会层叠在前面定义的控件之上,所以才会被称为帧布局。

12930
来自专栏python学习路

一、HTML

html概述和基本结构 html概述 HTML是 HyperText Mark-up Language 的首字母简写,意思是超文本标记语言,超文本指的是超链接,...

1.8K40
来自专栏十月梦想

Vue过渡动画实现

可以给transition添加一个name,如果name为"fade",则class前缀为指定的name

24610
来自专栏杨龙飞前端

页面重绘和回流(重排)以及优化

22440
来自专栏Google Dart

AngularDart4.0 高级-组件样式 顶

Angular应用程序使用标准CSS进行样式化。 这意味着您可以将所有关于CSS样式表,选择器,规则和媒体查询的知识直接应用于Angular应用程序。

11520
来自专栏Web项目聚集地

CSS布局解决方案(全屏布局)

原文连接:https://segmentfault.com/a/1190000013565024#articleHeader1

29540
来自专栏mySoul

文档和元素的几何滚动

当浏览器在窗口中渲染文档时,它将会创建文档一个视觉表现层,在哪里每个元素都有自己的位置和尺寸。通常web应用程序将文档看做元素的树。

18500
来自专栏西安-晁州

关于vue.js中slot的理解

16230
来自专栏DannyHoo的专栏

不让按钮进入高亮(HighLighted)状态

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/...

13920
来自专栏西安-晁州

关于vue.js中slot的理解

slot这块看官网文档,起初有点不懂,仔细研究还是最终理解了,slot是用来干嘛的呢,先看下一个例子:

1.2K20

扫码关注云+社区

领取腾讯云代金券