mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-11 19:42:54 +08:00
Code Issues Actions 41 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;
}
.code-box:target {
.code-box-target {
border: 1px solid rgba(45, 183, 245, 0.7);
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() {
const { doc, location } = this.props;
const scrollTo = location.query.scrollTo;
const { description, meta } = doc;
const demos = demosList[meta.fileName] || [];
const expand = this.state.expandAll;
@ -43,13 +44,15 @@ export default class ComponentDoc extends React.Component {
}).forEach((demoData, index) => {
if (index % 2 === 0 || isSingleCol) {
leftChildren.push(
<Demo {...demoData} key={index}
expand={expand} pathname={location.pathname} />
<Demo {...demoData} className={scrollTo === demoData.id ? 'code-box-target' : ''}
key={index}
expand={expand} pathname={location.pathname} />
);
} else {
rightChildren.push(
<Demo {...demoData} key={index}
expand={expand} pathname={location.pathname} />
<Demo {...demoData} className={scrollTo === demoData.id ? 'code-box-target' : ''}
key={index}
expand={expand} pathname={location.pathname} />
);
}
});
@ -61,7 +64,8 @@ export default class ComponentDoc extends React.Component {
const jumper = demos.map((demo) => {
return (
<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 }
</Link>
</li>

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

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