# vue-step-progress **Repository Path**: fecym/vue-step-progress ## Basic Information - **Project Name**: vue-step-progress - **Description**: vue-step-progress插件拓展 - **Primary Language**: JavaScript - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2020-05-09 - **Last Updated**: 2020-12-19 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # Vue Step Progress Bar ## Demo ![demo gif](https://user-images.githubusercontent.com/1242917/36874916-15c773c2-1dae-11e8-8780-595903b79018.gif) ## Installation Install the plugin with npm: ```shell npm install --save vue-step-progress ``` ## Usage ⚠️ The default settings use Font Awesome for the checkmark icon. You can change the css icon class by using the 'icon-class' prop. Add the Library import in the components you want to use the progress bar in: ```javascript import StepProgress from 'vue-step-progress'; // import the css (OPTIONAL - you can provide your own design) import 'vue-step-progress/dist/main.css'; // ... // register the component in your Vue instance components: { 'step-progress': StepProgress }, // ... ``` Put the `step-progress` element into your HTML where you want the Component to appear and pass the `steps` Array Prop and the `current-step` Number prop. ```html
``` ## Props #### `steps` A string array of all steps to be displayed. The Strings will be present as labels in the component. Example: ```javascript ['Step 1', 'Step 2', 'Step 3'] ``` #### `current-step` A simple Number prop that defines the index of the active step. Example: ``` 2 ``` #### `icon-class` _Optional_ The css class of the checkmark icon. Default: ``` fa fa-check ``` #### `active-color` _Optional_ A String prop that defines the active step color. It is red by default. Example: ``` blue ``` #### `passive-color` _Optional_ A String prop that defines the passive step color. It is gray by default. Example: ``` black ``` #### `active-thickness` _Optional_ A Number prop that defines the active step thickness. It is 5 by default. Example: ``` 10 ``` #### `passive-thickness` _Optional_ A Number prop that defines the passive step thickness. It is 5 by default. Example: ``` 10 ``` #### `line-thickness` _Optional_ A Number prop that defines the line thickness. It is 12 by default. Example: ``` 10 ``` ## Development To setup the local development environment it is recommended to use docker. *Note*: this will override your current `npm` and `node` commands. ```bash source source.sh ``` Install all development dependencies: ```bash npm i ``` Start the development server ```bash npm run dev ``` Build the dist files after changes ```bash npm run build ``` Document your changes in the "Unreleased" section in `CHANGELOG.MD`. ## Publishing Create a the `.npmrc` file: ``` //registry.npmjs.org/:_authToken= ``` Run ``` npm publish ```