feat(feed): 增加一个面包屑组件

slimkit · Aug 1, 2018 · 766dcf8 · 766dcf8
1 parent b4d16f6
commit 766dcf8
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 0 deletions.
diff --git a/packages/slimkit-plus-feed/admin/components/common/Breadcrumb.js b/packages/slimkit-plus-feed/admin/components/common/Breadcrumb.js
@@ -0,0 +1,53 @@
+import React from 'react';
+import PropTypes from "prop-types";
+import { withStyles } from "@material-ui/core/styles";
+
+const styles = theme => {
+    return {
+        root: {
+            ...theme.typography.subheading
+        },
+        item: {
+            color: theme.palette.text.secondary,
+            display: 'inline-block',
+            float: 'left',
+            '&:last-child:after': {
+                display: 'none'
+            },
+            '&:after': {
+                display: 'inline-block',
+                float: 'initial',
+                content: '"/"',
+                paddingLeft: theme.spacing.unit,
+                paddingRight: theme.spacing.unit,
+                color: theme.palette.text.disabled
+            },
+        }
+    };
+};
+
+class Breadcrumb extends React.Component {
+
+    static propTypes = {
+        classes: PropTypes.object.isRequired,
+        items: PropTypes.array.isRequired,
+        className: PropTypes.string
+    };
+
+    static defaultProps = {
+        className: ''
+    };
+
+    render() {
+        let { className, classes, items } = this.props;
+        return (
+            <div className={`${classes.root} ${className}`}>
+                { items.map(item => (
+                    <span key={item} className={classes.item}>{ item }</span>
+                )) }
+            </div>
+        );
+    }
+}
+
+export default withStyles(styles)(Breadcrumb);
diff --git a/packages/slimkit-plus-feed/admin/components/pages/TopicList.js b/packages/slimkit-plus-feed/admin/components/pages/TopicList.js
@@ -5,6 +5,7 @@ import Grid from "@material-ui/core/Grid";
 import Paper from '@material-ui/core/Paper';
 import Toolbar from '@material-ui/core/Toolbar';
 import Table from '@material-ui/core/Table';
+import Breadcrumb from '../common/Breadcrumb';
 
 const styles = theme => {
   return {
@@ -13,6 +14,9 @@ const styles = theme => {
     },
     paper: {
       width: '100%',
+    },
+    breadcrumb: {
+      marginBottom: theme.spacing.unit * 2
     }
   };
 };
@@ -37,6 +41,7 @@ class TopicList extends React.Component {
 
     return (
       <Grid container className={classes.root}>
+        <Breadcrumb className={classes.breadcrumb} items={['动态', '话题列表']} />
         <Paper className={classes.paper}>
           <Toolbar>
             <div>2</div>