Polaris Component 分析[2]

13 Dec 2017

Titles and Text

Caption

小小小标题 + 字幕 57C5DCB5-23FC-4161-B6FB-DA2AB3C1843E

<p class="Polaris-Caption">Received April 21, 2017</p> 就是一个p + Polaris-Caption

children (strong or node)

Display Text

比较大的标题了(自己做文字,能变的最大的样子了) element + size + children 可嵌套(string or node)

<h1 class="Polaris-DisplayText Polaris-DisplayText--sizeLarge">Good evening, Dominic.</h1>

没得配置,只有结构

  • FootHelp
    • content
    • icon
    • text (嵌套的内容也就在这里)(node) 这个应该单立出去称为一个footer box

Heading

配置

  • 可选element
  • 嵌套children (string or node)

<h2 class="Polaris-Heading">Online store dashboard</h2>

Subheading

配置

  • 可选element
  • 可嵌套children (string)

<h3 aria-label="Accounts" class="Polaris-Subheading">Accounts</h3>

Text style

配置

  • variation - enum - subdued/strong/positive/negtive
  • children - strong or node

结构

  • span

<span class="Polaris-TextStyle--variationSubdued">No supplier listed</span>

Visually hidden

配置

给视障人事开发的