vue-bulma / tabs Goto Github PK
View Code? Open in Web Editor NEWTabs Component for Vue Bulma
License: MIT License
Tabs Component for Vue Bulma
License: MIT License
There has to be a way to watch which tab is selected.
Currently height change is 0-1 - very aggressive.
This is especially visible when 2 tabs side by side have large difference in content height.
Any chance to tweek it a little?
If I dynamically generate some tab-panes like:
<tabs layout="left" :only-fade="false">
<tab-pane v-for="item in items" :label.sync="item.header">
{{item.description}}
</tab-pane>
</tabs>
and then later refresh items
array using Ajax - the components do not get updated (in fact the content all disappears).
If I empty the contents of items
(this.$set('items', [])
) before refreshing with Ajax the component refreshes successfully as expected.
Any ideas?
Thanks!
.CodeMirror-gutters styles are overwritten
Hi there. I'm new to Vue and need help.
I'm trying to use vue-bulma-tabs in my project. I've install them via browserify, wrote all dependencies. But when i'm trying to run browserify it says "import Tabs from './Tabs'
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module' "
here is my package.json
"scripts": { "watchify": "watchify -vd -p browserify-hmr -e src/main.js -o dist/build.js", "sass-compiler": "node-sass -w sass/ -o ./css/", "dev": "npm-run-all --parallel watchify sass-compiler", "build": "cross-env NODE_ENV=production browserify -g envify src/main.js | uglifyjs -c warnings=false -m > dist/build.js" }, "dependencies": { "vue": "^2.0.1" }, "devDependencies": { "babel-core": "^6.0.0", "babel-preset-es2015": "^6.0.0", "babelify": "^7.2.0", "browserify": "^13.0.1", "browserify-hmr": "^0.3.1", "cross-env": "^1.0.6", "envify": "^3.4.1", "http-server": "^0.9.0", "npm-run-all": "^2.1.2", "uglify-js": "^2.5.0", "vueify": "^9.1.0", "watchify": "^3.4.0", "node-sass": "^3.4.0", "vue-bulma": "0.0.35", "vue-bulma-modal": "^1.0.1", "vue-bulma-tabs": "^1.1.1" }, "browserify": { "transform": [ "vueify", "babelify" ] }
in my component file i'm doing
import {Tabs, TabPane} from "vue-bulma-tabs"
export default {
name: "tabs",
components: {
Tabs,
TabPane
}
}
When a Bulma modal is included inside a tab-pane, the background is cropped and the model is centred in the tab-pane, and not the fill window. Also, the modal is stuck to the top of the cropped area.
http://bulma.io/documentation/components/tabs/
If content is inside in the .tabs class, it messes with styles.
especially the size-modifier is-small is-medium and is-large.
Now to use this component I need to something like this:
<tabs v-on:tab-selected="changeTab" animation="slide" :only-fade="false">
<tab-pane label="Day">Day Tab</tab-pane>
<tab-pane label="Month">Month Tab</tab-pane>
<tab-pane label="Year">Year Tab</tab-pane>
</tabs>
methods: {
changeTab: function (tabNumber) {
switch (tabNumber) {
case 0:
this.periodType = 'day'
break
case 1:
this.periodType = 'month'
break
case 2:
this.periodType = 'year'
break
default:
this.periodType = 'day'
}
}
},
Is there any more convenient and flexible method to do it? For example, something like this:
<tabs v-model="periodType" animation="slide" :only-fade="false">
<tab-pane label="Day" value="day">Day Tab</tab-pane>
<tab-pane label="Month" value="month">Month Tab</tab-pane>
<tab-pane label="Year" value="year">Year Tab</tab-pane>
</tabs>
hi it see seems can not run
the chrome said that
Unexpected token import
how to use it?
I am new with vue ,sorry to asked this stupid question
<tabs>
<tab-pane label="panel-title">
<table class="table">
<thead>
<tr>
<th>h1</th>
<th>h2</th>
<th>h3</th>
</tr>
</thead>
<tbody>
<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
</tr>
</tbody>
</table>
</tab-pane>
</tabs>
Is there an easy way to make content scrollable and tabs non scrollable/fixed? Now when scrolling, tabs are moving and I would like to have them static, so that only content inside is scrolling when using window scrollbar.
I tried using position fixed, but it did not solve the problem.
Any suggestions?
Hi!
I have to create a wizard like form, and I'd like to know how to change the current tab index.
Changing the selected-index
prop doesn't work as the realSelectedIndex
doesn't get updated.
Hello!
I'm not sure that this module has this feature if no so maybe you can add is-boxed
and is-toggle
modifiers as it's used in Bulma.
Thank you!
├── UNMET PEER DEPENDENCY bulma@>=0.2
├── UNMET PEER DEPENDENCY [email protected]
└── [email protected]
npm WARN [email protected] requires a peer of sinon@^2.1.0 but none was installed.
npm WARN [email protected] requires a peer of bulma@>=0.2 but none was installed.
<tabs animation="slide" :only-fade="false">
<tab-pane label="Pictures" v-for="(item, index) in category" :key="index" >{{item.name}}</tab-pane>
</tabs>
import { Tabs, TabPane } from 'vue-bulma-tabs'
export default {
components: {
Tabs, TabPane
},
}
@ ./~/vue-style-loader!./~/css-loader?{"minimize":false,"sourceMap":false}!./~/
vue-loader/lib/style-compiler?{"id":"data-v-ce47699c","scoped":false,"hasInlineC
onfig":true}!../~/sass-loader/lib/loader.js?{"sourceMap":false}!./~/vux-loader/s
rc/style-loader.js!./~/vue-loader/lib/selector.js?type=styles&index=0!./~/vue-bu
lma-tabs/src/Tabs.vue 4:14-383 13:3-17:5 14:22-391
@ ./~/vue-bulma-tabs/src/Tabs.vue
@ ./~/vue-bulma-tabs/src/index.js
@ ./~/babel-loader/lib!./~/vux-loader/src/script-loader.js!./~/vue-loader/lib/s
elector.js?type=script&index=0!./src/views/activities/index.vue
@ ./src/views/activities/index.vue
@ ./src/routes/index.js
@ ./src/main.js
@ multi ./build/dev-client ./src/main.js
"scripts": {
"dev": "node build/dev-server.js",
"build": "node build/build.js",
"unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
"e2e": "node test/e2e/runner.js",
"test": "npm run unit && npm run e2e",
"lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
},
"dependencies": {
"axios": "^0.16.2",
"fastclick": "^1.0.6",
"vue": "^2.2.2",
"vue-backtop": "0.0.3",
"vue-bulma-tabs": "^1.1.2",
"vue-router": "^2.2.0",
"vue-scroller": "^2.2.2",
"vue-wechat-title": "^2.0.4",
"vue-ydui": "^0.8.0",
"vuex": "^2.1.1",
"vuex-i18n": "^1.3.1",
"vux": "^2.2.1"
},
Why failed to install?
ERROR in ./~/css-loader!./~/vue-loader/lib/style-compiler?{"id":"data-v-0a3f9cc3","scoped":false,"hasInlineConfig":true}!./~/sass-loader/lib/loader.js!./~/vue-loader/lib/selector.js?type=styles&index=0!./~/vue-bulma-tabs/src/Tabs.vue
Module build failed:
@import '~bulma/sass/utilities/initial-variables';
^
File to import not found or unreadable: ~bulma/sass/utilities/initial-variables.
in /Users/admin/workspace/hw/vue-admin/node_modules/vue-bulma-tabs/src/Tabs.vue (line 114, column 1)
@ ./~/vue-style-loader!./~/css-loader!./~/vue-loader/lib/style-compiler?{"id":"data-v-0a3f9cc3","scoped":false,"hasInlineConfig":true}!./~/sass-loader/lib/loader.js!./~/vue-loader/lib/selector.js?type=styles&index=0!./~/vue-bulma-tabs/src/Tabs.vue 4:14-264 13:3-17:5 14:22-272
@ ./~/vue-bulma-tabs/src/Tabs.vue
@ ./~/vue-bulma-tabs/src/index.js
@ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./client/views/components/Tabs.vue
@ ./client/views/components/Tabs.vue
@ ./client/views lazy ^\.\/.*\.vue$
@ ./client/store/modules/menu/lazyLoading.js
@ ./client/store/modules/menu/index.js
@ ./client/store/index.js
@ ./client/app.js
@ ./client/index.js
@ multi ./build/dev-client ./client/index.js
I am using Gulp.js via Laravel Elixir and Webpack
{ [Error: ./~/vue-bulma-tabs/src/index.js
Module not found: Error: Can't resolve './Tabs' in '/App/node_modules/vue-bulma-tabs/src'
resolve './Tabs' in '/App/node_modules/vue-bulma-tabs/src'
using description file: /App/node_modules/vue-bulma-tabs/package.json (relative path: ./src)
Field 'browser' doesn't contain a valid alias configuration
after using description file: /App/node_modules/vue-bulma-tabs/package.json (relative path: ./src)
using description file: /App/node_modules/vue-bulma-tabs/package.json (relative path: ./src/Tabs)
as directory
Hi there - is there an easy way of tracking which tab is open? Id like to get the tab label when one is clicked - for GA tracking - is there a way to do that?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.