> For the complete documentation index, see [llms.txt](https://trumandu.gitbook.io/kibana-plugin-development-tutorial/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://trumandu.gitbook.io/kibana-plugin-development-tutorial/gao-ji-jin-jie/euishi-yong.md).

# EUI使用

## EUI简介

Elastic UI框架（[EUI](https://github.com/elastic/eui)）是Elastic使用的设计库，用于构建Elastic内部产品。它分发UI React组件和静态资产，以用于构建Web布局。除了React组件之外，还有一个SASS / CSS层，可以单独使用

## 文档查看

* 查看[官方文档](https://elastic.github.io/eui/#/)
* 自己下载代码，根据不同版本生成不同文档

  下载自己需要的版本，然后执行`yarn && yarn start`

## 使用

```
import {
  EuiPage,
  EuiPageBody,
  EuiPageContent,
  EuiPageContentBody,
  EuiPageContentHeader,
  EuiPageContentHeaderSection,
  EuiTitle,
  EuiFlexGroup,
  EuiFlexItem,
  EuiText,
  EuiSpacer,
} from '@elastic/eui';
import 'ui/autoload/styles';
```

## 效果

![](/files/-LMRMke5nfAKPa1j5be5)