mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-13 04:53:11 +08:00
Code Issues Actions 22 Packages Projects Releases Wiki Activity

site: add highlight for demo and toc

Browse Source
This commit is contained in:
Benjy Cui 2016-03-24 17:34:29 +08:00
parent e928e57494
commit 859f103685
3 changed files with 12 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
site/common/styles/demo.less
View File

@ -43,7 +43,7 @@
border-color: #ccc; border-color: #ccc;
} }
.code-box:target { .code-box-target {
border: 1px solid rgba(45, 183, 245, 0.7); border: 1px solid rgba(45, 183, 245, 0.7);
box-shadow: 0 0 4px rgba(45, 183, 245, 0.5); box-shadow: 0 0 4px rgba(45, 183, 245, 0.5);
} }

14
site/component/ComponentDoc/index.jsx
View File

@ -31,6 +31,7 @@ export default class ComponentDoc extends React.Component {
render() { render() {
const { doc, location } = this.props; const { doc, location } = this.props;
const scrollTo = location.query.scrollTo;
const { description, meta } = doc; const { description, meta } = doc;
const demos = demosList[meta.fileName] || []; const demos = demosList[meta.fileName] || [];
const expand = this.state.expandAll; const expand = this.state.expandAll;
@ -43,13 +44,15 @@ export default class ComponentDoc extends React.Component {
}).forEach((demoData, index) => { }).forEach((demoData, index) => {
if (index % 2 === 0 || isSingleCol) { if (index % 2 === 0 || isSingleCol) {
leftChildren.push( leftChildren.push(
<Demo {...demoData} key={index} <Demo {...demoData} className={scrollTo === demoData.id ? 'code-box-target' : ''}
expand={expand} pathname={location.pathname} /> key={index}
expand={expand} pathname={location.pathname} />
); );
} else { } else {
rightChildren.push( rightChildren.push(
<Demo {...demoData} key={index} <Demo {...demoData} className={scrollTo === demoData.id ? 'code-box-target' : ''}
expand={expand} pathname={location.pathname} /> key={index}
expand={expand} pathname={location.pathname} />
); );
} }
}); });
@ -61,7 +64,8 @@ export default class ComponentDoc extends React.Component {
const jumper = demos.map((demo) => { const jumper = demos.map((demo) => {
return ( return (
<li key={demo.id}> <li key={demo.id}>
<Link to={{ pathname: location.pathname, query: { scrollTo: `${demo.id}` } }}> <Link className={ demo.id === scrollTo ? 'current' : ''}
to={{ pathname: location.pathname, query: { scrollTo: `${demo.id}` } }}>
{ demo.meta.chinese || demo.meta.english } { demo.meta.chinese || demo.meta.english }
</Link> </Link>
</li> </li>

4
site/component/Demo/index.jsx
View File

@ -20,12 +20,12 @@ export default class Demo extends React.Component {
} }
render() { render() {
const { id, meta, intro, preview, style, src, const { id, className, meta, intro, preview, style, src,
highlightedCode, highlightedStyle, expand, pathname } = this.props; highlightedCode, highlightedStyle, expand, pathname } = this.props;
const introChildren = intro.map(utils.objectToComponent.bind(null, pathname)); const introChildren = intro.map(utils.objectToComponent.bind(null, pathname));
return ( return (
<section className="code-box" id={id}> <section className={`code-box ${className}`} id={id}>
<section className="code-box-demo"> <section className="code-box-demo">
{ {
meta.iframe === 'true' ? meta.iframe === 'true' ?