Evergreen：一个非常受欢迎的React UI组件库

Vedu • 2021-07-12 13:01 • 资源分享 • 阅读 970

介绍

Evergreen是一个React的开源UI组件库，代码托管在Github上，截止目前已经收获了近11k的stars，可以说已经是相当的高了！

Github

https://github.com/segmentio/evergreen/

特性

开箱即用：Evergreen 包含一组开箱即用的精美 React 组件；
灵活性： Evergreen 组件建立在 React UI Primitive 基础上，以实现无限的可组合性。
企业级： Evergreen 为企业级 Web 应用程序提供 UI 设计语言。
- 开放源代码：Apache 2.0 license

安装使用

Evergreen 由多个组件和工具组成，可以一一导入。首先安装evergreen-ui包，你可以使用你喜欢的工具进行安装，比如yarn或者npm：

React版本：react@16.8.0 and react-dom@16.8.0

yarn add evergreen-ui
# 或者
npm install --save evergreen-ui

最简单示例：

import React from 'react'
import ReactDOM from 'react-dom'
import { Button } from 'evergreen-ui'

ReactDOM.render(<Button>I am using  Evergreen!</Button>, document.getElementById('root'))

引入组件并使用在你的项目中

import { Button, Pane, Text, majorScale } from 'evergreen-ui'

<Pane display="flex" alginItems="center" marginX={majorScale(2)}>
  <Button>点我</Button>
  <Text>这是一个可点击的按钮</Text>
</Pane>

主题系统

Evergreen 附带一个全新的、可扩展的主题架构，让用户可以根据需要，自定义 Evergreen 中组件的外观和体验。可以针对每个组件的任意样式和状态，以实现最大的灵活性

Evergreen 有两个自带主题：

一个是经典主题，另一个是默认主题：

<Pane display="grid" gridTemplateColumns="repeat(auto-fill, minmax(100px, 1fr))" gridColumnGap="300px">
  <ThemeProvider value={defaultTheme}>
    <Pane display="flex" flexDirection="column" alignItems="flex-start">
      <Heading marginBottom={majorScale(2)}>Using Default Theme</Heading>
      <Button marginBottom={majorScale(2)} appearance="primary" onClick={() => {}}>
        Confirm
      </Button>
      <Alert marginBottom={majorScale(2)} title="There was an issue processing your data!" intent="warning" />
      <Checkbox checked marginBottom={majorScale(2)} label="I agree" />
    </Pane>
  </ThemeProvider>
  <ThemeProvider value={classicTheme}>
    <Pane display="flex" flexDirection="column" alignItems="flex-start">
      <Heading marginBottom={majorScale(2)}>Using Classic Theme</Heading>
      <Button marginBottom={majorScale(2)} appearance="primary" onClick={() => {}}>
        Confirm
      </Button>
      <Alert marginBottom={majorScale(2)} title="There was an issue processing your data!" intent="warning" />
      <Checkbox checked marginBottom={majorScale(2)} label="I agree" />
    </Pane>
  </ThemeProvider>
</Pane>

下面这些都是可以自定义主题对象

export default {
  colors,
  fills,
  intents,
  radii,
  shadows,
  fontFamilies: {
    display: '...',
    ui: '...',
    mono: '...',
  },
  fontSizes: {},
  fontWeights: {},
  letterSpacings: {},
  lineHeights: [],
  zIndices,
  components: {
    Alert: {},
    Avatar: {},
    Badge: {},
    Button: {},
    Card: {},
    Checkbox: {},
    Code: {},
    DialogBody: {},
    DialogFooter: {},
    DialogHeader: {},
    Group: {},
    Heading: {},
    Icon: {},
    InlineAlert: {},
    Input: {},
    Label: {},
    List: {},
    Link: {},
    MenuItem: {},
    Option: {},
    Pane: {},
    Paragraph: {},
    Radio: {},
    Select: {},
    Spinner: {},
    Switch: {},
    Tab: {},
    Table: {},
    TableCell: {},
    TableHead: {},
    TableRow: {},
    TagInput: {},
    Text: {},
    TextDropdownButton: {},
    Tooltip: {},
  },
};

组件截图

为了更直观感受下Evergreen，通过截图的方式向大家展示下Evergreen UI

总结

React的生态相对来说还是比较丰富的，特别是国内有大厂开源的企业级Ant Desigin设计语言。Evergreen也是一个不错的React组件，也是极大地丰富的React生态，对于项目来说也是多了一个选择！

内容出处：，

声明：本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。文章链接：http://www.yixao.com/share/24967.html

Evergreen：一个非常受欢迎的React UI组件库

介绍

Github

特性

安装使用

主题系统

组件截图

总结

相关推荐

发表评论