Polaris Component 分析[1]

11 Dec 2017

Doc 配置

  • title - string - 标题
  • icon - SVG - 默认有几种样式
  • status - enum - default/success/info/warning/critical
  • children - React.ReactNode - 也就是允许嵌套?
  • action - Action -
  • secondaryAction - Action -
  • onDismiss() - function() - Callback when banner is dismissed

结构

  • Polaris-Banner Polaris-Banner—statusWaring
    • Polaris-Banner__Dismiss
    • Polaris-Banner__Ribbon
      • Polaris-Icon
    • div
      • Polaris-Banner__Heading
        • Polaris-Heading (不属于banner的,标题而已)
      • Polaris-Banner__Content
        • ul,p…..
        • Polaris-Banner__Actions
          • Polaris-ButtonGroup
            • …..(按钮名可以编辑)

              结构(简写

  • Banner
    • Dismiss
    • Ribbon (Icon)
    • div
      • Heading
      • Content
        • ul,p…
        • Actions

版本 的结构区别

default: icon + heading + content dismissible: dismiss + default footer call-to-aciton: default + actions information: p + call-to-action success: same as information except color and text warning: same as information except color and text critical: same as information except color and text

Data visualization

官方有提到Data visualization,但是并没有开发出来 Question: libraries for data visualization? · Issue #154 · Shopify/polaris · GitHub 甚至有人在github里提问,官方给出的回答是,暂时未开发, 建议使用HightchartsD3.js 提问的人,则用的是recharts.org

Stack分析

配置属性

  • children - React.ReactNode -
  • wrap - boolean - 默认是true,想设置为false的时候,才会加额外的class. 是针对小屏幕的,决定是否要因为空间不够就把element放到下一行去。
  • vertical - boolean - 垂直放置
  • spacing - enum - 调整elements之间的间隔 default/extraTight/tight/loose/extraLoose/none
  • alignment - enum - 排布对齐 default/leading/trailing/center/fill/baseline
  • distribution - enum - default/equalSpacing/leading/trailing/center/fill/fillEvenly

结构分析

  • Plaris-stack (在上面加 Polaris-Stack—xxxx)
    • Polaris-Stack__Item
    • Polaris-Stack__Item
    • Polaris-Stack__Item

Spinner分析

Button分析

配置属性

  • children - string - 按钮包裹的内容
  • url - string - 按钮点击访问的网址
  • primary - boolean - 按钮样式(紫色?蓝色?)
  • destructive - boolean - 警告样式(红色)
  • disabled - boolean - 不允许点击(会在原颜色的基础上变半透明)
  • loading - boolean - 让button显示读取中(一个小圈在那旋转)(需要spinner)
  • size - enum — default/slim/large
  • outline - boolean - 带边框的样式(中间白色)
  • fullWidth - boolean - 可以让按钮尽量的顶宽一点(甚至贯穿整个container)
  • disclosure - boolean - 可增加一个倒三角,用来点击弹出menu
  • submit - boolean - 允许这个button称为表单的提交按钮
  • plain - boolean - 把button变成一个链接的样子
  • external - boolean - 强制让button点击后在新标签打开网页
  • icon - svg - icon to display to the left of the button content
  • accessibilityLabel - string
  • onClick - function() -
  • onFocus - function() -

结构分析

  • button
    • content
      • spinner
      • content
      • disclosure icon

Button Group分析

配置分析

  • segmented - boolean - 把按钮无缝拼接在一起
  • children - React.ReactElement

结构分析

  • ButtonGroup
    • group item
      • button ……其它的什么的

Card分析

配置属性

  • title - string - 标题
  • children - React.ReactNode -
  • subdued - boolean - 颜色浅一点的card(浅灰色)
  • sectioned - boolean - 在react中没有明确使用Card.section可以设置这个为true来自动包裹section标签在外侧
  • actions - Action[] - Card header actions
  • primaryFooterAction - Action Primary action in the card footer
  • secondaryFooterAction - Secondary action in the card footer

结构分析

  • card
    • header
    • section
      • section header
      • ul,p…..
    • section
      • section header
      • ul,p….
    • footer

Display text分析

属性分析

  • element - enum - h1~h6,p
  • size - enum - small/medium(default)/large/extraLarge
  • children - strong or React.ReactNode -

结构

  • element + DisplayText + sizeMedium

Page 分析

属性分析

  • title* - string - Page title(in large type)
  • icon - string - app icon(are part of shopify app)
  • breadcrumbs - BreacrumbProps[“breadcrumbs”] - Collection of breadcrumbs
  • children - React.ReactNode - The content of page
  • fullWidth - boolean - Remove the normal max-width on the page
  • separator - boolean - 在page header下加一条分割线
  • secondaryActions - ComplexAction[] - collection of secondary page-level actions
  • actionGroups - ActionGroup[] - Collection of page-level groups of secondary actions
  • primaryAction - DiableableAction - Primary page-level action
  • pagination - PaginationDescriptor - Page-level pagination

结构分析

  • page
    • header
      • navigation
      • pagination
      • title 没有navigation的时候可以选择用这个
      • actions 同上
      • MainContent
        • TitleAndActions
          • title
          • actions
            • actions
            • secondaryacton
      • PrimaryAction 这个是右侧的save/create order按钮,不能放在里面
    • content
      • card, p…..

其它

如果想要用erb输出带有双引号的内容,需要使用 <%=raw @xxx %>