专栏首页Google DartAngularDart Material Design 扩展面板 顶

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 条评论
登录 后参与评论

相关文章

  • AngularDart Material Design 进度条 顶

    (adsbygoogle = window.adsbygoogle || []).push({}); fun...

    南郭先生
  • AngularDart Material Design 处理指示器 顶

    请参阅http://www.google.com/design/spec/components/progress-activity.html。

    南郭先生
  • Dart VM教程 顶

    本教程让您准备好开始在编辑器或IDE中编写Dart应用程序。 在这里,您将下载Dart软件并创建并运行一个小应用程序。

    南郭先生
  • 【Hexo】自定义 Hexo 配置文件

    上一篇里,介绍了使用 Hexo + github pages + travis ci 实现自动化博客部署,我们已经收获了一个属于自己的博客,但现在还比较简陋,里...

    弗兰克的猫
  • centos下搭建wordpress

    比较熟悉,但是我作,想试试centos,然后发现命令有变化,配置文件位置也不一样,

    kirin
  • Android实现类似qq微信消息悬浮窗通知功能

    悬挂式Notification,他是5.0中新增的,也就是API中的Headsup的Notification,可以在不打断用户操作的时候,给用户通知

    砸漏
  • 厉害了!谷歌AI帮NASA发现第二个太阳系:也有八颗行星

    太阳系不再是唯一的八行星星系了!美国航天局14日宣布,谷歌和NASA宣布,通过机器学习技术在开普勒-90系统中发现了一颗新行星。通过分析开普勒太空望远镜的观测数...

    WZEARW
  • vscode rn代码格式化配置

    mcq
  • 以太坊蜜罐智能合约分析

    在学习区块链相关知识的过程中,拜读过一篇很好的文章《The phenomenon of smart contract honeypots》,作者详细分析了他遇到...

    Seebug漏洞平台
  • rpc框架之 thrift连接池实现

    接前一篇rpc框架之HA/负载均衡构架设计 继续,写了一个简单的thrift 连接池: 先做点准备工作: package yjmyzz; public cla...

    菩提树下的杨过

扫码关注云+社区

领取腾讯云代金券