mirror of
https://github.com/kevinsqi/react-circular-progressbar.git
synced 2026-01-18 15:55:06 +00:00
Merge pull request #45 from iqnivek/distribute-styles
Allow importing styles.css from module
This commit is contained in:
Kevin Qi
GitHub
commit
a80c825a6e
1
.gitignore
vendored
1
.gitignore
vendored
@ -1,7 +1,6 @@
|
||||
node_modules
|
||||
npm-debug.log
|
||||
.DS_Store
|
||||
build
|
||||
.cache
|
||||
*.iml
|
||||
.idea
|
||||
|
||||
16
README.md
16
README.md
@ -5,7 +5,7 @@ A circular progress indicator component, built with SVG. Easily customizable wit
|
||||
[](https://badge.fury.io/js/react-circular-progressbar)
|
||||
[](https://travis-ci.org/iqnivek/react-circular-progressbar)
|
||||
|
||||
[](http://www.kevinqi.com/react-circular-progressbar/)
|
||||
[](http://www.kevinqi.com/react-circular-progressbar/)
|
||||
|
||||
## Installation
|
||||
|
||||
@ -15,8 +15,6 @@ Install the npm module:
|
||||
npm install react-circular-progressbar
|
||||
```
|
||||
|
||||
**Important**: you'll also need to copy [src/styles.css](src/styles.css) into your repo to use the default styling!
|
||||
|
||||
## Usage
|
||||
|
||||
Import the component:
|
||||
@ -25,7 +23,15 @@ Import the component:
|
||||
import CircularProgressbar from 'react-circular-progressbar';
|
||||
```
|
||||
|
||||
..and use the component in your JSX:
|
||||
If you have a CSS loader configured, you can import the stylesheet:
|
||||
|
||||
```javascript
|
||||
import 'react-circular-progressbar/dist/styles.css';
|
||||
```
|
||||
|
||||
If not, you can copy [styles.css](dist/styles.css) into your project instead and use `<link rel="stylesheet" href="styles.css" />` in your `<head>`.
|
||||
|
||||
Now you can use the component:
|
||||
|
||||
```javascript
|
||||
<CircularProgressbar percentage={60} />
|
||||
@ -52,7 +58,7 @@ For more in-depth examples, take a look at the [demo code](docs/demo.jsx) to see
|
||||
|
||||
## Customizing styles
|
||||
|
||||
Use plain CSS to customize the styling - the [default CSS](src/styles.css) is a good starting point, but you can modify it as needed.
|
||||
Use plain CSS to customize the styling - the default CSS is a good starting point, but you can override it as needed.
|
||||
|
||||
#### CSS hooks
|
||||
|
||||
|
||||
1
dist/index.js
vendored
Normal file
1
dist/index.js
vendored
Normal file
File diff suppressed because one or more lines are too long
61
dist/styles.css
vendored
Normal file
61
dist/styles.css
vendored
Normal file
@ -0,0 +1,61 @@
|
||||
/*
|
||||
* react-circular-progressbar styles
|
||||
*
|
||||
* All of the styles in this file are optional and configurable!
|
||||
*/
|
||||
|
||||
.CircularProgressbar {
|
||||
/*
|
||||
* This fixes an issue where the CircularProgressbar svg has
|
||||
* 0 width inside a "display: flex" container, and thus not visible.
|
||||
*
|
||||
* If you're not using "display: flex", you can remove this style.
|
||||
*/
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.CircularProgressbar .CircularProgressbar-path {
|
||||
stroke: #3e98c7;
|
||||
stroke-linecap: round;
|
||||
transition: stroke-dashoffset 0.5s ease 0s;
|
||||
}
|
||||
|
||||
.CircularProgressbar .CircularProgressbar-trail {
|
||||
stroke: #d6d6d6;
|
||||
}
|
||||
|
||||
.CircularProgressbar .CircularProgressbar-text {
|
||||
fill: #3e98c7;
|
||||
font-size: 20px;
|
||||
dominant-baseline: middle;
|
||||
text-anchor: middle;
|
||||
}
|
||||
|
||||
.CircularProgressbar .CircularProgressbar-background {
|
||||
fill: #d6d6d6;
|
||||
}
|
||||
|
||||
/*
|
||||
* Sample background styles. Use these with e.g.:
|
||||
*
|
||||
* <CircularProgressbar
|
||||
* className="CircularProgressbar-inverted"
|
||||
* background
|
||||
* percentage={50}
|
||||
* />
|
||||
*/
|
||||
.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-background {
|
||||
fill: #3e98c7;
|
||||
}
|
||||
|
||||
.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-text {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-path {
|
||||
stroke: #fff;
|
||||
}
|
||||
|
||||
.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-trail {
|
||||
stroke: transparent;
|
||||
}
|
||||
@ -10373,7 +10373,7 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
|
||||
|
||||
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
|
||||
|
||||
console.log('react-circular-progressbar v' + "0.6.0");
|
||||
console.log('react-circular-progressbar v' + "0.7.0");
|
||||
|
||||
var githubURL = 'https://github.com/iqnivek/react-circular-progressbar';
|
||||
|
||||
|
||||
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 23 KiB |
13
package.json
13
package.json
@ -3,7 +3,7 @@
|
||||
"version": "0.7.0",
|
||||
"description": "A circular progress indicator component",
|
||||
"author": "Kevin Qi <iqnivek@gmail.com>",
|
||||
"main": "./build/index.js",
|
||||
"main": "./dist/index.js",
|
||||
"repository": "https://github.com/iqnivek/react-circular-progressbar.git",
|
||||
"license": "MIT",
|
||||
"keywords": [
|
||||
@ -12,10 +12,15 @@
|
||||
"react-component",
|
||||
"svg"
|
||||
],
|
||||
"style": "dist/styles.css",
|
||||
"files": [
|
||||
"dist"
|
||||
],
|
||||
"scripts": {
|
||||
"build": "NODE_ENV=production webpack && npm run build:demo",
|
||||
"build:demo": "NODE_ENV=demo webpack && cp ./src/styles.css ./docs/styles.css",
|
||||
"clean": "rimraf build",
|
||||
"build": "NODE_ENV=production webpack && npm run build:demo && npm run build:css",
|
||||
"build:css": "mkdir -p dist && cp ./src/styles.css ./dist/styles.css && cp ./src/styles.css ./docs/styles.css",
|
||||
"build:demo": "NODE_ENV=demo webpack",
|
||||
"clean": "rimraf dist",
|
||||
"lint": "eslint src test",
|
||||
"prepare": "npm run clean && npm run build",
|
||||
"test": "mocha --compilers js:babel-register --recursive --require ./test/setup.js",
|
||||
|
||||
@ -70,7 +70,7 @@ if (nodeEnv === 'production') {
|
||||
amd: 'react'
|
||||
}
|
||||
};
|
||||
webpackConfig.output.path = path.resolve(__dirname, 'build');
|
||||
webpackConfig.output.path = path.resolve(__dirname, 'dist');
|
||||
webpackConfig.plugins.push(new webpack.optimize.UglifyJsPlugin({
|
||||
compress: { warnings: false },
|
||||
sourceMap: false
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user