feat(Breadcrumb): add styleType

close #183

Author: ZxBing0066

src/components/Breadcrumb/Breadcrumb.jsx

@@ -3,15 +3,20 @@ import PropTypes from 'prop-types';
 
 import { SeparatorWrap, BreadcrumbWrap } from './style';
 
+const StyleType = ['block-hover', 'hover', 'active'];
+
 class Breadcrumb extends Component {
     static propTypes = {
         /** 自定义分隔符 */
         separator: PropTypes.node,
+        /** 展示项激活样式的方式 */
+        styleType: PropTypes.oneOf(StyleType),
         /** @ignore */
         children: PropTypes.node
     };
     static defaultProps = {
-        separator: '/'
+        separator: '/',
+        styleType: 'block-hover'
     };
     render() {
         const { separator, children, ...rest } = this.props;
@@ -32,4 +37,6 @@ class Breadcrumb extends Component {
     }
 }
 
+Breadcrumb.StyleType = StyleType;
+
 export default Breadcrumb;

src/components/Breadcrumb/Breadcrumb.md

@@ -13,3 +13,8 @@
 
 ```js {"codepath": "breadcrumb-separator.jsx"}
 ```
+
+*   styleType
+
+```js {"codepath": "breadcrumb-styleType.jsx"}
+```

src/components/Breadcrumb/__demo__/breadcrumb-styleType.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import Breadcrumb from 'src/components/Breadcrumb';
+import Icon from 'src/components/Icon';
+
+// demo start
+class Demo extends React.Component {
+    render() {
+        return (
+            <div>
+                {Breadcrumb.StyleType.map((styleType, i) => (
+                    <div className="demo-wrap" key={i}>
+                        <Breadcrumb styleType={styleType}>
+                            <Breadcrumb.BackButton type="left" onClick={() => window.history.back()} />
+                            <Breadcrumb.Item noAction>
+                                <Icon type="home" />
+                            </Breadcrumb.Item>
+                            <Breadcrumb.Item onClick={() => window.location.reload()}>
+                                <Icon type="uhost" />
+                            </Breadcrumb.Item>
+                            <Breadcrumb.Item href="https://www.google.com" target="_blank">
+                                google
+                            </Breadcrumb.Item>
+                            <Breadcrumb.Item onClick={() => window.location.reload()}>reload</Breadcrumb.Item>
+                            <Breadcrumb.Item current>current</Breadcrumb.Item>
+                        </Breadcrumb>
+                    </div>
+                ))}
+            </div>
+        );
+    }
+}
+// demo end
+
+export default Demo;

src/components/Breadcrumb/__demo__/breadcrumb.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import Breadcrumb from 'src/components/Breadcrumb';
 import Form from 'src/components/Form';
+import Radio from 'src/components/Radio';
 import Input from 'src/components/Input';
 import Icon from 'src/components/Icon';
 
@@ -14,24 +15,33 @@ const itemLayout = {
         span: 9
     }
 };
+const StyleType = Breadcrumb.StyleType;
 class Demo extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
-            separator: Breadcrumb.defaultProps.separator
+            separator: Breadcrumb.defaultProps.separator,
+            styleType: Breadcrumb.defaultProps.styleType
         };
     }
     render() {
-        const { separator } = this.state;
+        const { separator, styleType } = this.state;
         return (
             <div>
                 <Form className="demo-form">
                     <Form.Item label="separator" {...itemLayout}>
                         <Input value={separator} onChange={e => this.setState({ separator: e.target.value })} />
                     </Form.Item>
+                    <Form.Item label="styleType" {...itemLayout}>
+                        <Radio.Group
+                            options={StyleType.map(styleType => ({ value: styleType }))}
+                            value={styleType}
+                            onChange={styleType => this.setState({ styleType })}
+                        />
+                    </Form.Item>
                 </Form>
                 <div className="demo-wrap">
-                    <Breadcrumb separator={separator}>
+                    <Breadcrumb separator={separator} styleType={styleType}>
                         <Breadcrumb.BackButton type="left" onClick={() => window.history.back()} />
                         <Breadcrumb.Item noAction>
                             <Icon type="home" />