├── .babelrc ├── .gitignore ├── .npmignore ├── LICENSE.txt ├── README.md ├── demo ├── App.vue ├── assets │ └── logo.png └── main.js ├── dist ├── build.js ├── build.js.map └── logo.png ├── docs └── index.html ├── index.html ├── package-lock.json ├── package.json ├── src ├── FAB.vue └── index.js └── webpack.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["latest", { 4 | "es2015": { "modules": false } 5 | }] 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | npm-debug.log 4 | yarn-error.log 5 | .idea -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .idea 3 | .DS_Store 4 | dist 5 | .babelrc -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) PygmySlowLoris Team 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # FAB 2 | 3 |

4 | 5 |

6 | 7 | Floating Action Button for Vue. 8 | 9 | The component supports multiple action buttons so you can add as many actions as you need. It will fire an event to the parent when clicking on each one. 10 | 11 | Live Demo 12 | 13 | ## Installation 14 | 15 | ``` 16 | npm install vue-fab --save 17 | ``` 18 | 19 | ## Dependencies 20 | 21 | Include the following stylesheets on your document's head 22 | 23 | ``` 24 | 25 | ``` 26 | 27 | And 28 | 29 | ``` 30 | 31 | ``` 32 | 33 | ## Properties 34 | 35 | | Properties | Type | Values | 36 | | :--------------- | :------- | :--------- | 37 | | `bg-color` | String | Default '#333333'
Accepts all color formats: HEX, RGB & RGBA | 38 | | `position` | String | Default 'bottom-left'
Options: 'bottom-left', 'bottom-right', 'top-left','top-right' | 39 | | `position-type` | String | Default 'fixed'
Options: 'fixed' or 'absolute'| 40 | | `z-index` | String | Default '999'
Set any value that suits your needs. | 41 | | `ripple-show` | Boolean | Default true
Options: true or false. | 42 | | `ripple-color` | String | Default 'light'
Options: 'light' or 'dark'. | 43 | | `icon-size` | String | Default 'medium'
Options: 'small', 'medium' or 'large'. | 44 | | `main-icon` | String | Default 'add'
Use icons from the material icon library. | 45 | | `main-tooltip` | String | Default `null` | 46 | | `actions` | Array | [Details bellow](https://github.com/PygmySlowLoris/vue-fab/#actions) 47 | | `fixed-tooltip` | Boolean | Default 'false'
if true, it shows the tooltip beside the actions 48 | | `enable-rotation` | Boolean | Default 'true'
if true, the fab will rotate to indicate that it has been opened. Will not rotate if there are no actions specified. 49 | | `start-opened` | Boolean | Default 'false'
if true, the fab will start opened. 50 | | `toggle-when-away` | Boolean | Default 'true'
if false, the fab will not be closed when clicking outside from the fab component. 51 | 52 | ### actions 53 | 54 | | Properties | Type | Values | 55 | | :--------------- | :------- | :--------- | 56 | | `name` | String | Name of the event | 57 | | `icon` | String | Icon name (Please refer to [Material icons](https://material.io/icons/)) | 58 | | `tooltip` | String | If not used, tooltip won't appear. | 59 | | `color` | String | Default `bg-color` value
Accepts all color formats: HEX, RGB & RGBA | 60 | 61 | ## Examples 62 | 63 | Include the component in your .vue file, `actions` prop is required for the component to work. The `@event` has to match the name given in the `actions` prop. 64 | ``` 65 | 71 | ``` 72 | 73 | Either `color` and `position` are set by default but they can be changed. 74 | 75 | ``` 76 | 83 | ``` 84 | 85 | Match your data with your components props. The `bgColor` accepts either HEX, RBG or RGBA format. 86 | 87 | Remember: Only material icons are accepted. 88 | ``` 89 | 122 | ``` 123 | -------------------------------------------------------------------------------- /demo/App.vue: -------------------------------------------------------------------------------- 1 | 209 | 210 | 295 | 296 | 370 | -------------------------------------------------------------------------------- /demo/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PygmySlowLoris/vue-fab/d1af847885faa1522e69028026fd44e06c237f7d/demo/assets/logo.png -------------------------------------------------------------------------------- /demo/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | new Vue({ 5 | el: '#app', 6 | render: h => h(App) 7 | }) 8 | -------------------------------------------------------------------------------- /dist/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PygmySlowLoris/vue-fab/d1af847885faa1522e69028026fd44e06c237f7d/dist/logo.png -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | vue-fab 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | vue-fab 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-fab", 3 | "version": "2.3.1", 4 | "description": "Vue Floating Action Button", 5 | "main": "src/index.js", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/PygmySlowLoris/vue-fab" 9 | }, 10 | "keywords": [ 11 | "vue", 12 | "fab", 13 | "floating", 14 | "action", 15 | "button" 16 | ], 17 | "author": { 18 | "name": "PygmySlowLoris Team", 19 | "email": "team@pygmyslowloris.org", 20 | "url": "https://github.com/PygmySlowLoris" 21 | }, 22 | "contributors": [ 23 | "Eduardo Marcos (https://github.com/Edujugon)", 24 | "Guido Ceraso (https://github.com/hazzo)" 25 | ], 26 | "license": "MIT", 27 | "bugs": { 28 | "url": "https://github.com/PygmySlowLoris/vue-fab/issues" 29 | }, 30 | "homepage": "https://github.com/PygmySlowLoris/vue-fab#readme", 31 | "scripts": { 32 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", 33 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules", 34 | "prepublish": "npm run build" 35 | }, 36 | "dependencies": { 37 | "v-tooltip": "2.0.0-beta.1", 38 | "vue": "^2.2.1", 39 | "vue-clickaway": "^2.1.0", 40 | "vue-ripple-directive": "^1.0.0" 41 | }, 42 | "devDependencies": { 43 | "babel-core": "^6.0.0", 44 | "babel-loader": "^6.0.0", 45 | "babel-preset-latest": "^6.0.0", 46 | "cross-env": "^3.0.0", 47 | "css-loader": "^0.25.0", 48 | "file-loader": "^0.9.0", 49 | "url-loader": "^0.5.8", 50 | "vue-color": "^2.0.9", 51 | "vue-loader": "^11.1.4", 52 | "vue-template-compiler": "^2.2.1", 53 | "webpack": "^2.2.0", 54 | "webpack-dev-server": "^2.2.0" 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /src/FAB.vue: -------------------------------------------------------------------------------- 1 | 73 | 74 | 320 | 321 | 351 | 352 | 514 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./FAB.vue'); -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var webpack = require('webpack') 3 | 4 | module.exports = { 5 | entry: './demo/main.js', 6 | output: { 7 | path: path.resolve(__dirname, './dist'), 8 | publicPath: '/dist/', 9 | filename: 'build.js' 10 | }, 11 | module: { 12 | rules: [ 13 | { 14 | test: /\.vue$/, 15 | loader: 'vue-loader', 16 | options: { 17 | loaders: { 18 | } 19 | // other vue-loader options go here 20 | } 21 | }, 22 | { 23 | test: /\.js$/, 24 | loader: 'babel-loader', 25 | exclude: /node_modules/ 26 | }, 27 | { 28 | test: /\.(png|jpg|gif|svg)$/, 29 | loader: 'url-loader', 30 | options: { 31 | name: '[name].[ext]?[hash]' 32 | } 33 | } 34 | ] 35 | }, 36 | resolve: { 37 | alias: { 38 | 'vue$': 'vue/dist/vue.esm.js' 39 | } 40 | }, 41 | devServer: { 42 | historyApiFallback: true, 43 | noInfo: true 44 | }, 45 | performance: { 46 | hints: false 47 | }, 48 | devtool: '#eval-source-map' 49 | } 50 | 51 | if (process.env.NODE_ENV === 'production') { 52 | module.exports.devtool = '#source-map' 53 | // http://vue-loader.vuejs.org/en/workflow/production.html 54 | module.exports.plugins = (module.exports.plugins || []).concat([ 55 | new webpack.DefinePlugin({ 56 | 'process.env': { 57 | NODE_ENV: '"production"' 58 | } 59 | }), 60 | new webpack.optimize.UglifyJsPlugin({ 61 | sourceMap: true, 62 | compress: { 63 | warnings: false 64 | } 65 | }), 66 | new webpack.LoaderOptionsPlugin({ 67 | minimize: true 68 | }) 69 | ]) 70 | } 71 | --------------------------------------------------------------------------------