AngularDart Material Design 记分卡 顶

ScorecardComponent

Selector: <acx-scorecard>

独立记分卡组件。

该组件旨在重用/嵌入更大的组件中。

ng-content:

• name - 标签区域中的自定义内容。
• value - 值区域中的自定义内容。
• description - 描述区域中的自定义内容。

Inputs:

• changeGlyph bool  是否在描述中显示小的更改箭头字形; 可选的。
• changeType String  设置记分卡描述的更改类型。 这决定了描述的风格。 可能的值是：       'POSITIVE'       'NEGATIVE'       'NEUTRAL' (默认)
• description String  记分卡简短说明; 可选的。
• extraBig bool  是否使用“big”样式类风格的记分卡; 可选的。
• label String  记分卡的标题。
• selectable bool 是否可以通过单击更改记分卡的选择状态。
• selected bool  是否选择了记分卡。
• selectedColor Color 选择时应用于记分卡背景的颜色。
• suggestionAfter String  描述后的一条建议文字; 可选的。
• suggestionBefore String 描述之前的一条建议文本; 可选的。
• tooltip String  当用户将鼠标悬停在值上时，工具提示中显示的值。
• value String  显示给用户的值。

Outputs:

• selectedChange Stream<bool> 选择状态发生变化时触发。

ScoreboardComponent

Selector: <acx-scoreboard>

该组件管理一排记分卡。

Attributes:

• enableUniformWidths：bool - 记分板中的记分卡是否应具有统一的宽度。

Inputs:

• isVertical bool  记分卡是否垂直显示。 默认为false。
• resetOnCardChanges bool  卡更换时是否重置卡选择。 如果添加或删除了卡，并且设置为true，则将取消选择所有卡。 对于ScoreboardType.radio，将选择第一张卡。
• scrollable bool  是否允许通过滚动按钮滚动记分板。 可滚动属性可以在应用程序运行时动态设置 - 将根据可滚动状态添加或删除窗口大小调整侦听器。
• type ScoreboardType  记分板的类型，例如standard, selectable, radio, toggle。

ScorecardDemoComponent

查看示例，查看源码。

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