feat(ripple): 添加Ripple组件文档实例

components/Ripple/Ripple.tsx

@@ -13,11 +13,11 @@ export interface IRippleProps extends IBaseComponent {
   /**
    * 波纹透明度
    */
-  opacity: number;
+  opacity?: number;
   /**
    * 波纹直径
    */
-  diameter: number;
+  diameter?: number;
 }
 
 export interface IRippleState {
@@ -29,7 +29,6 @@ export interface IRippleState {
  */
 export class Ripple extends Component<IRippleProps, IRippleState> {
   static defaultProps = {
-    color: '#4285f4',
     opacity: 0.3,
     diameter: 10,
   };

docs/pages/Ripple/api.tsx

@@ -0,0 +1,25 @@
+export default [
+  {
+    title: "API",
+    json: [
+      {
+        props: "color",
+        intro: "波纹颜色",
+        type: "string",
+        defaultValue: "-",
+      },
+      {
+        props: "opacity",
+        intro: "透明度",
+        type: "number",
+        defaultValue: "0.3",
+      },
+      {
+        props: "diameter",
+        intro: "波纹半径",
+        type: "number",
+        defaultValue: "10",
+      },
+    ]
+  }
+]

docs/pages/Ripple/demo/rippleCustom.md

@@ -0,0 +1,2 @@
+#### 配合其他组件使用
+推荐配合`button`使用，可以提高交互体验。

docs/pages/Ripple/demo/rippleCustom.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { Ripple, Icon, Button } from '../../../../components/';
+
+export default function () {
+  return (
+    <div>
+      <Ripple color="red" opacity={0.6}><Button type="primary"><Icon type="play"/>播放</Button></Ripple>
+      <Ripple color="blue"><Button type="primary"><Icon type="pause"/>暂停</Button></Ripple>
+      <Ripple color="yellow"><Button type="primary"><Icon type="skip-backward"/>上一首</Button></Ripple>
+      <Ripple color="green"><Button type="primary">下一首<Icon type="skip-forward"/></Button></Ripple>
+    </div>
+  )
+}

docs/pages/Ripple/demo/rippleDemo.md

@@ -0,0 +1,2 @@
+#### 简单的使用
+简单的波纹特效使用

docs/pages/Ripple/demo/rippleDemo.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { Ripple, Card, Icon } from '../../../../components/';
+
+export default function () {
+  return (
+    <div>
+    <Ripple style={{width: '200px'}}color="red">
+      <Card 
+        title="标题"
+        extra={(
+        <div><span>更多</span><Icon type="more"/></div>
+        )}
+        border
+        shadow
+      >
+        <div>波纹包裹的card</div>
+      </Card>
+    </Ripple>
+  </div>
+  )
+}

docs/pages/Ripple/index.md

@@ -0,0 +1,4 @@
+## Ripple 波纹
+用于包裹子组件，点击后有波纹特效。
+
+## 代码演示

docs/pages/Ripple/index.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { Component } from 'react';
+import * as md from './index.md';
+import Markdown from '../../components/Markdown/';
+import CodeBox from '../../components/CodeBox/';
+import ApiBox from '../../components/ApiBox/';
+import Api from './api';
+
+import RippleDemo from './demo/rippleDemo';
+import * as rippleDemoMd from './demo/rippleDemo.md';
+const rippleDemoCode = require('!raw-loader!./demo/rippleDemo');
+
+import RippleCustom from './demo/rippleCustom';
+import * as rippleCustomMd from './demo/rippleCustom.md';
+const rippleCustomCode = require('!raw-loader!./demo/rippleCustom');
+
+export default class RipplePage extends Component {
+  render() {
+    return (
+      <div>
+        <Markdown text={md}/>
+        <CodeBox text={rippleDemoMd} demo={<RippleDemo/>} code={rippleDemoCode}/>
+
+        <CodeBox text={rippleCustomMd} demo={<RippleCustom/>} code={rippleCustomCode}/>
+        <ApiBox api={Api}/>
+      </div>
+    )
+  }
+};
+

docs/pages/menu.tsx

@@ -135,4 +135,14 @@ export default [
       },
     ],
   },
+  {
+    name: '特效组件',
+    keyId: 'effects',
+    children: [
+      {
+        name: 'Ripple(波纹)',
+        keyId: 'ripple',
+      },
+    ],
+  },
 ];

docs/pages/routes.tsx

@@ -27,10 +27,7 @@ import Loading from './Loading';
 import Progress from './Progress';
 import BackTop from './BackTop';
 import Divider from './Divider';
-
-
-
-
+import Ripple from './Ripple';
 
 export default [
   {
@@ -149,5 +146,9 @@ export default [
   {
     component: Divider,
     path: '/components/divider',
-  }
+  },
+  {
+    component: Ripple,
+    path: '/components/ripple',
+  },
 ];