tonyair/silverstripe-framework
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-framework synced 2024-09-30 05:09:06 +02:00
Code Issues Projects Releases Wiki Activity

Simplified breadcrumb component

Browse Source 
The "multiline" variation was the only one actually used at the moment.
If we need a "singleline" one, we could make a "condensed" variation instead
This commit is contained in:
Ingo Schommer 2016-04-18 22:54:52 +12:00
parent 40c98c6047
commit 3c8960d88b
3 changed files with 39 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
admin/javascript/src/components/breadcrumb/README.md
View File

@ -9,28 +9,18 @@ The breadcrumbs for the current section of the CMS.
An array of objects, each object should have a `text` and `href` key. An array of objects, each object should have a `text` and `href` key.
``` ```
import BreadcrumbComponent from 'breadcrumb'; let breadcrumbs = [
{
... text: 'Pages',
href: 'admin/pages'
getBreadcrumbs() { },
var breadcrumbs = [ {
{ text: 'About us',
text: 'Pages', href: 'admin/pages/show/2'
href: 'admin/pages' }
}, ];
{ <BreadcrumbComponent crumbs={breadcrumbs} />
text: 'About us',
href: 'admin/pages/show/2'
}
];
return breadcrumbs;
}
render() {
return <BreadcrumbComponent crumbs={this.getBreadcrumbs()} />
} }
... ...
``` ```

22
admin/javascript/src/components/breadcrumb/index.js
View File

@ -4,14 +4,8 @@ import SilverStripeComponent from 'silverstripe-component';
class BreadcrumbComponent extends SilverStripeComponent { class BreadcrumbComponent extends SilverStripeComponent {
render() { render() {
const classNames = ['breadcrumb'];
if (this.props.multiline) {
classNames.push('breadcrumb--multiline');
}
const classNamesStr = classNames.join(' ');
return ( return (
<ol className={classNamesStr}> <ol className="breadcrumb">
{this.getBreadcrumbs()} {this.getBreadcrumbs()}
</ol> </ol>
); );
@ -24,11 +18,15 @@ class BreadcrumbComponent extends SilverStripeComponent {
return [].concat( return [].concat(
this.props.crumbs.slice(0, -1).map((crumb, index) => [ this.props.crumbs.slice(0, -1).map((crumb, index) => [
<li><a key={index} className="" href={crumb.href}>{crumb.text}</a></li>, <li className="breadcrumb__item">
<a key={index} className="breadcrumb__item-title" href={crumb.href}>{crumb.text}</a>
</li>,
]), ]),
this.props.crumbs.slice(-1).map((crumb, index) => [ this.props.crumbs.slice(-1).map((crumb, index) => [
<li className="active"> <li className="breadcrumb__item breadcrumb__item--last">
<h2 className="breadcrumb__crumb--last" key={index}>{crumb.text}</h2> <h2 className="breadcrumb__item-title breadcrumb__item-title--last" key={index}>
{crumb.text}
</h2>
</li>, </li>,
]) ])
); );
@ -36,4 +34,8 @@ class BreadcrumbComponent extends SilverStripeComponent {
} }
BreadcrumbComponent.propTypes = {
crumbs: React.PropTypes.array,
};
export default BreadcrumbComponent; export default BreadcrumbComponent;

35
admin/javascript/src/components/breadcrumb/styles.scss
View File

@ -1,26 +1,21 @@
.breadcrumb { .breadcrumb {
font-size: $font-size-xs; font-size: $font-size-xs;
line-height: 16px; line-height: 16px;
margin-bottom: 0;
> .active {
float: none;
}
.breadcrumb__crumb--last {
font-size: $font-size-xs;
margin: 0;
font-weight: normal;
display: inline;
line-height: 16px;
}
} }
.breadcrumb--multiline { .breadcrumb__item {}
margin-bottom: 0;
.breadcrumb__crumb--last { .breadcrumb>li.breadcrumb__item--last, // TODO Fix Bootstrap clash
font-size: $font-size-lg; .breadcrumb__item--last {
display: block; display: block;
line-height: 22px; float: none;
} }
}
.cms h2.breadcrumb__item-title--last, // TODO Fix CMS clash
.breadcrumb__item-title--last {
margin: 0;
font-size: $font-size-lg;
font-weight: normal;
line-height: 22px;
}