Pinterest Gestalt
made with React

Pinterest Gestalt

这是一个支持Pinterest设计的UI组件库。

相关问答
暂无相关问题
查看全部
简介及使用教程

Pinterest Gestalt是一个支持Pinterest设计的UI组件库,通过强制使用一系列基本的UI组件来简化设计人员和开发人员之间的沟通,有助于提高UX和跨平台的可访问性。

安装

Npm

npm i gestalt

Yarn

yarn add gestalt

使用

引入指定组件和样式文件

import { Avatar } from 'gestalt';
import 'gestalt/dist/gestalt.css';

使用

<Box display="flex" direction="row" marginLeft={-2} marginRight={-2} wrap>
  <Box paddingX={2}>
    <Avatar
      size="xs"
      src="https://i.ibb.co/ZfCZrY8/keerthi.jpg"
      name="Keerthi"
    />
  </Box>
  <Box paddingX={2}>
    <Avatar
      size="sm"
      src="https://i.ibb.co/ZfCZrY8/keerthi.jpg"
      name="Keerthi"
    />
  </Box>
  <Box paddingX={2}>
    <Avatar
      size="md"
      src="https://i.ibb.co/ZfCZrY8/keerthi.jpg"
      name="Keerthi"
    />
  </Box>
  <Box paddingX={2}>
    <Avatar
      size="lg"
      src="https://i.ibb.co/ZfCZrY8/keerthi.jpg"
      name="Keerthi"
    />
  </Box>
  <Box paddingX={2}>
    <Avatar
      size="xl"
      src="https://i.ibb.co/ZfCZrY8/keerthi.jpg"
      name="Keerthi"
    />
  </Box>
</Box>

示例

image.png

按钮

image.png

卡片

image.png

选项框

image.png

作者

Pinterest

@Pinterest

相关项目

这是一个用于使用React构建可访问的富Web应用程序的工具包。
这是一个基于开源Material风格的组件库。
这是一个React组件库。
这是一个可定制和复用的React Native组件库。
这是一个免费的React UI套件
这是一个有赞技术团队维护的UI组件库。