archive-gh-me/react-circular-progressbar
1
0
Fork 0
mirror of https://github.com/kevinsqi/react-circular-progressbar.git synced 2026-01-25 16:03:15 +00:00
Code Issues Projects Releases Wiki Activity

click button to toggle extended examples

Browse Source
This commit is contained in:
Kevin Qi 2019-04-28 15:32:01 -07:00
parent fe5370c76d
commit 3df9aa545d
1 changed files with 21 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
demo/src/Demo.tsx
View File

@ -14,6 +14,8 @@ const Example: React.FunctionComponent<{ description: string }> = ({ description
);
function Demo() {
const [showAllExamples, setShowAllExamples] = React.useState(false);
return (
<div className="container">
<div className="row mt-5">
@ -97,13 +99,25 @@ function Demo() {
</div>
</Example>
<Example description="Dashboard style.">
<CircularProgressbar percentage={50} circleRatio={0.7} />
</Example>
<Example description="Dashboard style, counterclockwise.">
<CircularProgressbar percentage={50} circleRatio={0.7} counterClockwise />
</Example>
{showAllExamples ? (
<React.Fragment>
<Example description="Dashboard style.">
<CircularProgressbar percentage={50} circleRatio={0.7} />
</Example>
<Example description="Dashboard style, counterclockwise.">
<CircularProgressbar percentage={50} circleRatio={0.7} counterClockwise />
</Example>
</React.Fragment>
) : (
<div className="col-12 text-center">
<button
className="btn btn-link text-secondary"
onClick={() => setShowAllExamples(true)}
>
<small>Show more examples</small>
</button>
</div>
)}
</div>
<hr />