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

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

介绍

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


Github上一个非常受欢迎的React UI组件库——Evergreen

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 有两个自带主题:

一个是经典主题,另一个是默认主题:

Github上一个非常受欢迎的React UI组件库——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

Github上一个非常受欢迎的React UI组件库——Evergreen
Github上一个非常受欢迎的React UI组件库——Evergreen
Github上一个非常受欢迎的React UI组件库——Evergreen
Github上一个非常受欢迎的React UI组件库——Evergreen
Github上一个非常受欢迎的React UI组件库——Evergreen
Github上一个非常受欢迎的React UI组件库——Evergreen
Github上一个非常受欢迎的React UI组件库——Evergreen
Github上一个非常受欢迎的React UI组件库——Evergreen
Github上一个非常受欢迎的React UI组件库——Evergreen
Github上一个非常受欢迎的React UI组件库——Evergreen
Github上一个非常受欢迎的React UI组件库——Evergreen
Github上一个非常受欢迎的React UI组件库——Evergreen
Github上一个非常受欢迎的React UI组件库——Evergreen
Github上一个非常受欢迎的React UI组件库——Evergreen

总结

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

内容出处:,

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

发表评论

登录后才能评论