快速上手

以Alert为例,

• 参照element-ui的样式和方法, http://element.eleme.io/#/component/alert
• 找到el-alert的源代码, https://github.com/ElemeFE/element/tree/master/packages/alert/src
• 找到el-alert的Markdown文档, https://github.com/ElemeFE/element/tree/master/examples/docs/zh-cn
• 在项目的src目录下创建alert目录, 同时创建入口文件index.js, 以及对应的组件Alert.jsx, 注意jsx的文件名首字母大写.
• 注册组件Alert, 编辑src/index.js,

import Alert from './Alert';

export default Alert;

• 初始化src/alert/Alert.jsx, 参照element-ui下的packages/alert/src/main.vue,

import React from 'react';
import { Component, PropTypes, Transition, View } from '../../libs';

export default class Alert extends Component {
  render() {
    // el-alert的<template />
  }
}

Alert.propTypes = {
  // el-alert的props.type
}

Alert.defaultProps = {
  // el-alert的props.default
};

• 在项目的site/pages目录下创建alert目录, 同时创建index.js, style.scss, 同时在docs/zh-CN目录下创建alert.md, 将Vue的Markdown文档复制到alert.md里, 去除<script></script>标签, 将<style></style>标签内的样式复制到style.scss里, 仅保留标准的Markdown(:::demo除外), 然后将Markdown的代码块换为React语法的组件.

## Alert 警告

用于页面中展示重要的提示信息。

### 基本用法

页面中的非浮层元素，不会自动消失。

::: demo Alert 组件提供四种主题，由`type`属性指定，默认值为`info`。
```html
<Alert title="成功提示的文案" type="success" />
<Alert title="消息提示的文案" type="info" />
<Alert title="警告提示的文案" type="warning" />
<Alert title="错误提示的文案" type="error" />

```js
import './style.scss';

import React from 'react';
import { Component, Markdown } from '../../../libs';
import template from '../../docs/zh-CN/alert.md';

export default class Playground extends Component {
  render() {
    return <Markdown context={this} component="Alert">{template}</Markdown>
  }
}

.demo-box.demo-alert .el-alert {
  margin-bottom: 20px;
}

• 编辑site/pages/index.js, 注册Alert, 设置Demo的默认页.

import Alert from './alert';

// pages是有序的Object, 会影响到左侧的菜单顺序.
const pages = {
  alert: { title: 'Alert 警告', component: Alert },
};