├── src ├── plugin.js └── VueTinyTabs.vue ├── .babelrc ├── .gitignore ├── public └── index.html ├── package.json ├── webpack.config.js └── README.md /src/plugin.js: -------------------------------------------------------------------------------- 1 | import VueTinyTabs from './VueTinyTabs.vue'; 2 | export default VueTinyTabs; -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "modules": false, 5 | "targets": { 6 | "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] 7 | } 8 | }] 9 | ] 10 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | vue-tiny-tabs 8 | 9 | 10 | 13 |
14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-tiny-tabs", 3 | "version": "1.0.5", 4 | "main": "src/plugin.js", 5 | "scripts": { 6 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", 7 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" 8 | }, 9 | "author": "Vinoth", 10 | "license": "MIT", 11 | "devDependencies": { 12 | "babel-core": "^6.26.0", 13 | "babel-loader": "^7.1.2", 14 | "babel-preset-env": "^1.6.1", 15 | "cross-env": "^5.1.1", 16 | "css-loader": "^0.28.7", 17 | "file-loader": "^1.1.5", 18 | "node-sass": "^4.13.1", 19 | "sass-loader": "^6.0.6", 20 | "vue-loader": "^14.2.2", 21 | "vue-template-compiler": "^2.5.9", 22 | "webpack": "^4.41.5", 23 | "webpack-cli": "^3.3.6", 24 | "webpack-dev-server": ">=3.1.11" 25 | }, 26 | "dependencies": { 27 | "vue": "^2.5.9", 28 | "@htoniv/tiny-tabs": "^1.0.1" 29 | }, 30 | "engines": { 31 | "node": ">= 6.0.0", 32 | "npm": ">= 3.0.0" 33 | }, 34 | "browserslist": [ 35 | "> 1%", 36 | "last 2 versions", 37 | "not ie <= 8" 38 | ], 39 | "repository": { 40 | "type": "git", 41 | "url": "git://github.com/mevinoth/vue-tiny-tabs.git" 42 | }, 43 | "description": "VueJs wrapper for tinytabs component" 44 | } 45 | -------------------------------------------------------------------------------- /src/VueTinyTabs.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 89 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var webpack = require('webpack') 3 | 4 | module.exports = { 5 | entry: './src/plugin.js', 6 | 7 | module: { 8 | rules: [ 9 | { 10 | test: /\.css$/, 11 | use: [ 12 | 'vue-style-loader', 13 | 'css-loader' 14 | ], 15 | }, 16 | { 17 | test: /\.scss$/, 18 | use: [ 19 | 'vue-style-loader', 20 | 'css-loader', 21 | 'sass-loader' 22 | ], 23 | }, 24 | { 25 | test: /\.sass$/, 26 | use: [ 27 | 'vue-style-loader', 28 | 'css-loader', 29 | 'sass-loader?indentedSyntax' 30 | ], 31 | }, 32 | { 33 | test: /\.vue$/, 34 | loader: 'vue-loader', 35 | options: { 36 | loaders: { 37 | // Since sass-loader (weirdly) has SCSS as its default parse mode, we map 38 | // the "scss" and "sass" values for the lang attribute to the right configs here. 39 | // other preprocessors should work out of the box, no loader config like this necessary. 40 | 'scss': [ 41 | 'vue-style-loader', 42 | 'css-loader', 43 | 'sass-loader' 44 | ], 45 | 'sass': [ 46 | 'vue-style-loader', 47 | 'css-loader', 48 | 'sass-loader?indentedSyntax' 49 | ] 50 | } 51 | // other vue-loader options go here 52 | } 53 | }, 54 | { 55 | test: /\.js$/, 56 | loader: 'babel-loader', 57 | exclude: /node_modules/ 58 | }, 59 | { 60 | test: /\.(png|jpg|gif|svg)$/, 61 | loader: 'file-loader', 62 | options: { 63 | name: '[name].[ext]?[hash]' 64 | } 65 | } 66 | ] 67 | }, 68 | // default for pretty much every project 69 | context: __dirname, 70 | // specify your entry/main file 71 | output: { 72 | // specify your output directory... 73 | path: path.resolve(__dirname, './dist'), 74 | // and filename 75 | filename: 'vue-tiny-tabs.js' 76 | }, 77 | resolve: { 78 | alias: { 79 | 'vue$': 'vue/dist/vue.esm.js' 80 | }, 81 | extensions: ['*', '.js', '.vue', '.json'] 82 | }, 83 | devServer: { 84 | historyApiFallback: true, 85 | noInfo: true, 86 | overlay: true 87 | }, 88 | performance: { 89 | hints: false 90 | }, 91 | devtool: '#eval-source-map' 92 | } 93 | 94 | 95 | 96 | if (process.env.NODE_ENV === 'production') { 97 | module.exports.devtool = '#source-map' 98 | // http://vue-loader.vuejs.org/en/workflow/production.html 99 | module.exports.plugins = (module.exports.plugins || []).concat([ 100 | new webpack.DefinePlugin({ 101 | 'process.env': { 102 | NODE_ENV: '"production"' 103 | } 104 | }), 105 | new webpack.optimize.UglifyJsPlugin({ 106 | sourceMap: true, 107 | compress: { 108 | warnings: false 109 | } 110 | }), 111 | new webpack.LoaderOptionsPlugin({ 112 | minimize: true 113 | }) 114 | ]) 115 | } 116 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vue Tinytabs 2 | Vuejs wrapper for [`Tinytabs`](https://github.com/knadh/tinytabs) which is a super tiny javascript plugin for rendering tabs (< 2KB). 3 | 4 | Documentation and Demo: https://vue-tiny-tabs.netlify.com 5 | 6 | ![vtt](https://user-images.githubusercontent.com/1731965/63014487-4d2da480-beac-11e9-9866-0673cd10635b.png) 7 | 8 | 9 | Find the npm package [`link`](https://www.npmjs.com/package/vue-tiny-tabs) 10 | 11 | # Install and basic usage 12 | ```sh 13 | $ npm install vue-tiny-tabs 14 | ``` 15 | 16 | # Example 17 | ```vue 18 | 34 | 35 | 56 | ``` 57 | 58 | ### Customized CSS for styling 59 | ```css 60 | .tinytabs .tabs { 61 | margin-left: 15px; 62 | display: flex; 63 | flex-flow: row wrap; 64 | } 65 | .tinytabs .tabs .tab .close { 66 | padding-left: 5px; 67 | } 68 | .tinytabs .tabs .tab { 69 | margin: 0 3px 0 0; 70 | background: #e1e1e1; 71 | display: block; 72 | padding: 6px 15px; 73 | text-decoration: none; 74 | color: #666; 75 | font-weight: bold; 76 | border-radius: 3px 3px 0 0; 77 | } 78 | .tinytabs .section { 79 | background: #f1f1f1; 80 | overflow: hidden; 81 | padding: 15px; 82 | clear: both; 83 | border-radius: 3px; 84 | } 85 | .tinytabs .tab.sel { 86 | background: #f1f1f1; 87 | color: #333; 88 | text-shadow: none; 89 | } 90 | ``` 91 | 92 | ## Options 93 | | Properties | Description 94 | |--------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| 95 | | anchor | false (default) or true. If enabled, when a tab is clicked, it's id is set in url's fragment so that the tab is retained on page reloads. | 96 | | hideTitle | false (default) or true. Hide the title element within section elements. | 97 | | sectionClass | Section element's class. Default is section. | 98 | | tabsClass | Tab (ul) container's class. Default is tabs. | 99 | | tabClass | Individual tab's (li) class. Default is tab. | 100 | | titleClass | Title element's tag. Default is title. | 101 | | onBefore | function(id, tab). Callback function that gets evaluated before a tab is activated. The first arg is the id of the tab and the second is the DOM element of the tab. | 102 | | onAfter | function(id, tab). Callback function that gets evaluated after a tab is activated. The first arg is the id of the tab and the second is the DOM element of the tab. | 103 | | onClose | function(id). Callback function that gets evaluated while closing the tab. The argument is the id of the tab. | 104 | 105 | 106 | Please find out tinytabs wrapper for [`Reactjs`](https://github.com/mevinoth/r-tiny-tabs) 107 | 108 | MIT License. 109 | --------------------------------------------------------------------------------