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

add demo example for customizing background

Browse Source
This commit is contained in:
Kevin Qi 2017-10-13 20:51:56 -07:00
parent 2cc2558a9f
commit e1aa435c55
3 changed files with 620 additions and 911 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
docs/demo.jsx
View File

@ -21,7 +21,7 @@ const Config = ({ name, example, description, children }) => (
);
const Example = ({ description, children }) => (
<div className="col-xs-12 col-sm-6">
<div className="col-xs-12 col-sm-4">
<div className="row mb-1">
<div className="col-xs-4 offset-xs-4">
{children}
@ -97,7 +97,7 @@ class Demo extends React.Component {
</Example>
<Example
description="Configure text formatting and stroke width."
description="Customize text formatting and stroke width."
>
<CircularProgressbar
percentage={50}
@ -105,6 +105,16 @@ class Demo extends React.Component {
textForPercentage={(percentage) => `$${percentage}`}
/>
</Example>
<Example
description="Add a background color."
>
<CircularProgressbar
className="background"
strokeWidth={10}
percentage={33}
/>
</Example>
</div>
<hr />

16
docs/index.html
View File

@ -19,7 +19,7 @@
text-decoration: none;
}
/* demo - how to customize colors based on percentage */
/* demo style overrides */
.CircularProgressbar.incomplete .CircularProgressbar-path {
stroke: #f66;
}
@ -32,6 +32,20 @@
.CircularProgressbar.complete .CircularProgressbar-text {
fill: #99f;
}
/* demo - background styles */
.CircularProgressbar.background .CircularProgressbar-background {
fill: #3e98c7;
}
.CircularProgressbar.background .CircularProgressbar-text {
fill: #fff;
}
.CircularProgressbar.background .CircularProgressbar-path {
stroke: #fff;
}
.CircularProgressbar.background .CircularProgressbar-trail {
stroke: transparent;
}
</style>
</head>
<body>

1501
docs/index.js
View File

File diff suppressed because it is too large Load Diff