首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >AngularDart Material Design 图标 顶

AngularDart Material Design 图标 顶

作者头像
南郭先生
发布2018-09-30 10:59:49
6310
发布2018-09-30 10:59:49
举报
文章被收录于专栏:Google DartGoogle Dart

MaterialIconComponent

Selector: <material-icon>

材料样式图标。

此样式表应包含在页面顶部:

<link
    rel="stylesheet"
    type="text/css"
    href="https://fonts.googleapis.com/icon?family=Material+Icons">

确保考虑RTL。 具体来说,如果要为RTL UI翻转图标,请使用flip属性。 阅读这些指南,了解何时翻转何时不翻转图标。

Attributes:

  • size:String - 图标的大小。 选项包括:x-small, small, medium, large, 和 x-large,分别对应于12px,13px,16px,18px和20px。 如果未指定大小,则使用默认值24px。
  • flip - 是否应翻转RTL语言的图标。
  • light - 是否应减少图标的不透明度。
  • baseline是否需要将图标与基线对齐。

Inputs:

  • ariaLabel String Aria标签添加到图标。
  • icon dynamic 此组件应显示的Icon模型(lib / model / ui / icon.dart)或图标标识符(String)。

有关可用图标,请参阅https://www.google.com/design/icons/。 如果图标名称包含空格,请用下划线替换它们。

MaterialIconDemoComponent

查看示例,查看源码

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

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • MaterialIconComponent
  • MaterialIconDemoComponent
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档