I've been having issues trying to change the start point of my tabs for my app bar. I want them to start after the 3rd Column but I haven't been able to make it work.
Code is below:
<template>
<div class = "header">
<v-toolbar app prominent>
<v-layout-row>
<v-layout-column>
<v-img
max-width="100"
src="../../assets/large.png"
/>
</v-layout-column>
<v-layout-column/>
<v-layout-column justify-end>
<HeaderAccount colorTheme="#FFA200" />
</v-layout-column>
</v-layout-row>
<template v-slot:extension>
<v-tabs>
<v-row>
<v-col cols = '3'/>
<v-col cols = '6'>
<v-tab v-for="l in links" :key="l.path" :to="l.path">
{{ l.text }}
</v-tab>
</v-col>
</v-row>
</v-tabs>
</template>
</v-toolbar>
</div>
</template>
Any assistance would be greatly appreciated!
I'm not clearly understand your template in case of layouts, but the main issue is that <v-tab> tag should be a direct child element of <v-tabs>.
Otherwise, the tab styles will not be applied correctly.
So your template should be similar to:
<div id="app">
<v-app id="inspire">
<v-toolbar>
...default toolbar content
<template v-slot:extension>
<v-row>
<v-col cols="3" class="lime accent-1">Three cols item</v-col>
<v-col cols="6">
<v-tabs
dark
background-color="primary"
grow
>
<v-tab>
Item One
</v-tab>
<v-tab>
Item Two
</v-tab>
<v-tab>
Item Three
</v-tab>
</v-tabs>
</v-col>
</v-row>
</template>
</v-toolbar>
</v-app>
</div>
Test this at CodePen.
Related
I have a problem with the Grid System Breakpoints in Vuetify. Except that problem mentioned in the title everything is working fine. As soon as I try expanding the site slowly, the breakpoints are just ignored. The columns should be among each other and with expanding they should move next to each other. Does someone have an idea where this might come from?
Code:
<v-container class = "big-container" fluid xs12 sm12 md16 lg12>
<v-row = "container-row">
<v-col class = "col-left"> </v-col>
<v-col class = "col-right"> </v-col>
</v-row>
</v-container>
v-container does not support attributes like xs12 sm12 md16 lg12. You should use the cols (for xs), sm, md and lg attributes of v-col. And make sure that each breakpoint uses smaller number of grid cells than the previous one so that more items fit in the same row on larger screens. That is, it should look like this:
<v-container class = "big-container" fluid>
<v-row justify="space-between" align="start">
<v-col cols = "12" sm="8" md="6" lg="3" xl="1">card 1</v-col>
<v-col cols = "12" sm="8" md="6" lg="3" xl="1">card 2</v-col>
<v-col cols = "12" sm="8" md="6" lg="3" xl="1">card 3</v-col>
<v-col cols = "12" sm="8" md="6" lg="3" xl="1">card 4</v-col>
<v-col cols = "12" sm="8" md="6" lg="3" xl="1">card 5</v-col>
<v-col cols = "12" sm="8" md="6" lg="3" xl="1">card 6</v-col>
<v-col cols = "12" sm="8" md="6" lg="3" xl="1">card 7</v-col>
</v-row>
</v-container>
So I have a radiobutton with a label. The problem is that the label and buttons are in the same line (row). I want my buttons to be underneath the label! Here is my code:
<v-radio-group row v-model="voltage" #click="consoles" label="SELECT
VOLTAGE:">
<v-radio
v-for="n in radioNames"
:key="n"
:label="n"
:value="n"
></v-radio>
</v-radio-group>
<v-radio-group row v-model="dependency">
It currently lookslike this:
As you can see the label and buttons are in the same line. How do I move to label to be above the buttons (top left. Like "S" should be placed exactly on top of the left button)?
Using p for label
As far as I can see from Vuetify API there is no option to set the label as column and the v-radio as row. A simple solution would be add the label as a separate element from the v-radio-group:
<p>SELECT VOLTAGE:</p>
<v-radio-group row v-model="voltage" #click="consoles">
<v-radio v-for="n in radioNames" :key="n" :label="n" :value="n" />
</v-radio-group>
Using v-layout
Based on #SnakeyHips answer there is a simple way to set the v-radio elements in a row. Use a <v-layout align-start row> to wrap only the radio buttons in a row:
<v-radio-group label="SELECT VOLTAGE:" v-model="row">
<v-layout align-start row>
<v-radio v-for="n in radioNames" :key="n" :label="n" :value="n" />
</v-layout>
</v-radio-group>
Here is an example of both solutions.
If you want the labels of each radio button to be above the button then you could handle all the layout manually yourself without the v-for loop like so:
<v-radio-group v-model="radioGroup">
<v-layout row wrap>
<v-flex column>
<p>Label 1</p>
<v-radio key=1 value=1>
</v-radio>
</v-flex>
<v-flex column>
<p>Label 2</p>
<v-radio key=2 value=2>
</v-radio>
</v-flex>
<v-flex column>
<p>Label 3</p>
<v-radio key=3 value=3>
</v-radio>
</v-flex>
</v-layout>
</v-radio-group>
Currently, v-radio-group in row mode is a flexbox. So you can give the legend element a width of 100% and this will force a line break. e.g.
.v-input--radio-group__input legend{
width: 100%
}
I receive inside the object passed in my component a body (actu.body) with html tags inside (mostly p tags) and im wondering how to interpret them for the client side, my code is like that for now :
<template>
<div>
<!-- {{ actu }} -->
<v-parallax
:src="actu.images[0].url"
dark
>
<v-layout
align-center
column
justify-center
>
<h1 class="display-2 font-weight-thin mb-3">{{ actu.headline }}</h1>
<h4 class="subheading">{{ actu.summarry }}</h4>
</v-layout>
</v-parallax>
<v-card>
<v-card-text>
{{ actu.body }}
</v-card-text>
</v-card>
</div>
</template>
<script>
export default {
props: {
actu: {
type: Object,
required: true
}
}
};
is there a proper way to do that with vue js ?
have a look at the official guide: https://v2.vuejs.org/v2/guide/syntax.html#Raw-HTML
the trick is the v-html directive
<span v-html="rawHtml"></span>
Yes, use v-html.
<v-card-text v-html="actu.body"></v-card-text>
Polymer: 1.0.3
More routing: 1.0.0
Having some issues with Polymer "more-routing". Those are -
1) Get this log on console -
[dom-bind::_annotatedComputationEffect]: compute method `urlFor` not defined
2) First level routing works (even though I get those error/warning messages). But second level routing (i mean nested routing) does not work. On "users" page pressing the name doesn't take me to "user-info" page. In fact the name does not appear as a link, it appears as a text. Here is my code -
My "routing.html"--
<link rel="import" href="../bower_components/more-routing/more-routing.html">
<more-routing-config driver="hash"></more-routing-config>
<more-route name="home" path="/"></more-route>
<more-route name="users" path="/users">
<more-route name="user-info" path="/:name"></more-route>
</more-route>
<more-route name="contact" path="/contact"></more-route>
My "index.html" ---
<more-route-selector>
<paper-menu class="list" on-iron-select="onMenuSelect">
<a route="home" href="{{urlFor('home')}}">
<iron-icon icon="home"></iron-icon>
<span>Home</span>
</a>
<a route="users" href="{{urlFor('users')}}">
<iron-icon icon="info"></iron-icon>
<span>Users</span>
</a>
<a route="contact" href="{{urlFor('contact')}}">
<iron-icon icon="mail"></iron-icon>
<span>Contact</span>
</a>
</paper-menu>
</more-route-selector>
<more-route-selector selectedParams="{{params}}">
<iron-pages>
<section route="home">
<paper-material elevation="1">
<bortini-home></bortini-home>
</paper-material>
</section>
<section route="users">
<paper-material elevation="1">
<h2 class="paper-font-display2">Users</h2>
<p>This is the users section</p>
Rob
</paper-material>
</section>
<section route="user-info">
<paper-material elevation="1">
<h2 class="paper-font-display2">
User:<span>{{params.name}}</span>
</h2>
<div>This is <span>{{params.name}}</span>'s section</div>
</paper-material>
</section>
<section route="contact">
<paper-material elevation="1">
<h2 class="paper-font-display2">Contact</h2>
<p>This is the contact section</p>
</paper-material>
</section>
</iron-pages>
</more-route-selector>
With 1.0 (perhaps earlier), Polymer stopped supporting expressions inside data-bindings (Migration Guide - Data binding). Thankfully, you can still call a function in a binding (called a "computed binding").
From what I can tell, the urlFor() method must be slightly too complex to work as a computed binding (the params object isn't a dependent property). I was able to make it work by wrapping urlFor() in a simpler function - one that works as a computed binding - something like this:
<more-routing-config driver="path"></more-routing-config>
<more-route name="users" path="/users">
<more-route name="user-info" path="/:name"></more-route>
</more-route>
<template is="dom-bind">
Rob
</template>
<script>
var template = document.querySelector('template');
template.makeUrl = function(route, name) {
return MoreRouting.urlFor(route, {name:name});
};
</script>
You can also pass variables in your computed binding, as long as they're dependent properties, like the item in a repeating template
<template is="dom-bind">
<template is="dom-repeat" items="{{users}}">
{{item.name}}
</template>
</template>
<script>
var template = document.querySelector('template');
template.makeUrl = function(route, user) {
return MoreRouting.urlFor(route, {name:user.name});
};
</script>
I have a problem with passing the category variable inside the <template> tag wrapped by the core-list.
I tried different binding approaches, but no luck. {{category}} corretcly appears outside the 2nd template tag.
<polymer-element name="library-list" attributes="category">
<template>
<style>
...
</style>
<service-library id="library" items="{{items}}"></service-library>
<core-list id="list" data="{{items}}" on-core-select="{{onClick}}">
<template>
<div class="item {{ {selected: selected} | tokenList }}" hidden?="{{category == type}}">
<div class="message">
<span class="title">{{title}}</span>
</div>
</div>
</template>
</core-list>
</template>
Maybe you want to try the injection approach.
<core-list data="{{data}}">
<template>
<div class="item {{ {selected: selected} | tokenList }}">
<span>{{foo}}-<b>{{category}}</b></span>
</div>
</template>
</core-list>
...
data.push({
foo: 999,
category:this.category,
...});
jsbin demo http://jsbin.com/mokok
I couldn't find a good solution, so I filtered the data instead that the core-list displays.