石块

以打字和情感书写的一套轻量级且可访问的React组件.

安装

yarn add @anarock/pebble

开始

首先需要安装设计系统使用的字体和图标. 确保下面的代码从一开始就执行.

比较容易的方法是使用cdn:

<link
  rel="stylesheet"
  href="https://unpkg.com/@anarock/pebble@[version]/dist/pebble.css"
/>

: boom: 警告: Pebble 添加 box-sizing: border-box 通过使用 inherit。 。 。 . 如果您有一些元素,其孩子需要默认的框缩放,您可以重置为框缩放 content-box

多元填充

Pebble打算在保持性能的同时留下很小的足迹. 然而,这样做的代价是只支持现代浏览器. 如果您需要支持遗留浏览器, 您需要添加多填充 .

<script src="https://polyfill.io/v3/polyfill.min.js?features=Array.prototype.find,Array.prototype.findIndex,IntersectionObserver,Intl.~locale.en,Object.entries,default"></script>

UMD 用户

<script src="https://polyfill.io/v3/polyfill.min.js?features=Array.prototype.find,Array.prototype.findIndex,IntersectionObserver,Intl.~locale.en,Object.entries,default"></script>
<script src="https://unpkg.com/react@latest/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@latest/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@anarock/pebble@latest/dist/pebble.umd.js"></script>
<script>
  // Components are available in window.pebble
  var Button = pebble.Button;
  var h = React.createElement;
  ReactDOM.render(
    h(
      Button,
      {
        onClick: function() {
          alert("You clicked the button");
        }
      },
      "Click Me!"
    ),
    document.getElementById("root")
  );
</script>

在本地反应中使用图标

在您的 package.json· ;

"rnpm": {
    "assets": {
        "./node_modules/@anarock/pebble/native/icons"
    }
}

然后运行 react-native link。 。 。 . 然后可以导入图标组件来使用.

import { Icon } from "@anarock/pebble/native";

// Usage
<Icon name="iconName" size={20} color="#000000" />;

鸣谢

我们用 染色体qa 用于视觉回归测试,这是真棒.

许可证

麻省理工学院