Skip to content

Commit 80c71d5

Browse files
author
Sabra Pratt
committed
Add styling to active link for Animation example
1 parent 1a66abc commit 80c71d5

File tree

2 files changed

+7
-2
lines changed

2 files changed

+7
-2
lines changed

examples/animations/app.css

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,3 +21,8 @@
2121
.example-leave.example-leave-active {
2222
opacity: 0;
2323
}
24+
25+
.link-active {
26+
color: #bbbbbb;
27+
text-decoration: none;
28+
}

examples/animations/app.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ var Page1 = React.createClass({
2626
return (
2727
<div className="Image">
2828
<h1>Page 1</h1>
29-
<p><Link to="/page1">A link to page 1 should be active</Link>. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed <Link to="/page2">should be inactive</Link> do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
29+
<p><Link to="/page1" activeClassName="link-active">A link to page 1 should be active</Link>. Lorem ipsum dolor sit amet, consectetur adipisicing elit. <Link to="/page2" activeClassName="link-active">A link to page 2 should be inactive</Link>. Do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
3030
</div>
3131
);
3232
}
@@ -37,7 +37,7 @@ var Page2 = React.createClass({
3737
return (
3838
<div className="Image">
3939
<h1>Page 2</h1>
40-
<p>Consectetur adipisicing elit, sed do <Link to="/page2">a link to page 2 should also be active</Link> eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
40+
<p>Consectetur adipisicing elit, sed do <Link to="/page2" activeClassName="link-active">a link to page 2 should also be active</Link> eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
4141
</div>
4242
);
4343
}

0 commit comments

Comments
 (0)