Github上一個非常受歡迎的React UI元件庫—

介紹

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（， document。getElementById（‘root’））

引入元件並使用在你的專案中

import { Button， Pane， Text， majorScale } from ‘evergreen-ui’

這是一個可點選的按鈕

主題系統

Evergreen 附帶一個全新的、可擴充套件的主題架構，讓使用者可以根據需要，自定義 Evergreen 中元件的外觀和體驗。可以針對每個元件的任意樣式和狀態，以實現最大的靈活性

Evergreen 有兩個自帶主題：

一個是經典主題，另一個是預設主題：

Using Default Theme Using Classic Theme

下面這些都是可以自定義主題物件

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