Any one know how to use text-truncate with v-button. My current attempts are this:
<v-menu
offset-y>
<template v-slot:activator="{on, attrs}">
<v-btn
text
v-bind="attrs"
v-on="on"
:max-width="150"
class="text-truncate"
><span class="text-truncate;max-width:150px">{{ userEmail }}</span></v-btn>
</template>
<v-list>
<v-list-item-group>
<v-list-item
v-for="(item, index) in personalMenuItems"
:key="index"
#click="item.action">
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item>
</v-list-item-group>
</v-list>
</v-menu>
Make sure your properly setting the max-width style...
<v-btn text v-bind="attrs"
v-on="on"
:max-width="150">
<span class="text-truncate" style="max-width:150px">{{ userEmail }}</span>
</v-btn>
Demo
Related
I have this list I created, which looks like this:
<v-list class="criteria-list" color="#f2f4f7">
<v-list-group
v-for="criterion in criteria"
:key="criterion.name"
v-model="criterion.active"
no-action
>
<template v-slot:activator>
<v-list-item-content>
<v-list-item-title
class="text-uppercase"
v-text="criterion.name"
></v-list-item-title>
</v-list-item-content>
</template>
<v-list-item-group
v-for="attribute in criterion.attributes"
:key="attribute.name"
multiple
active-class=""
>
<v-list-item #click="addFilter(attribute)">
<template v-slot:default="{ active }">
<v-list-item-action>
<v-checkbox :input-value="active"></v-checkbox>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>
{{ attribute.name }} ({{ attribute.count }})
</v-list-item-title>
</v-list-item-content>
</template>
</v-list-item>
</v-list-item-group>
</v-list-group>
</v-list>
I want it to look like this:
So, as you can see, I have applied color="#f2f4f7" to the master list, which has indeed changed the background colour, but it has done it for itself, and the groups also.
I tried setting the colour of the v-list-item-group but it's not setting the background-color of the group unless it's active:
This is using color="pink" as white doesn't do anything.
Does anyone know if it's possible to do what I want without having to override using ::v-deep?
you can do it with a css;
.v-list-item::before {
background: transparent !important;
}
and , of course, remove the color attribute from the v-list
<v-list class="criteria-list">
<v-list-group
v-for="criterion in criteria"
:key="criterion.name"
v-model="criterion.active"
no-action
>
<template v-slot:activator>
<v-list-item-content>
<v-list-item-title
class="text-uppercase"
v-text="criterion.name"
></v-list-item-title>
</v-list-item-content>
</template>
<v-list-item-group
v-for="attribute in criterion.attributes"
:key="attribute.name"
multiple
active-class=""
>
<v-list-item #click="addFilter(attribute)">
<template v-slot:default="{ active }">
<v-list-item-action>
<v-checkbox :input-value="active"></v-checkbox>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>
{{ attribute.name }} ({{ attribute.count }})
</v-list-item-title>
</v-list-item-content>
</template>
</v-list-item>
</v-list-item-group>
</v-list-group>
</v-list>
When adding "hide-default-header" to the v-data-table, I've noticed the sort function for all columns are removed. I'd like to keep that functionality, is there a simple way to re-include sort?
It's tricky because I'm also attempting to add an additional icon with search features next to it, hence the need for a custom th template in the header.
In the code below, the 1st column is attempting to use the sort function to no avail. Any help would be appreciated in getting it working.
<v-data-table
#click:row="rowClick"
:headers="headers"
:items="arrangedList"
:search="search"
:items-per-page="10"
class="outlined elevation-0"
hide-default-header
>
<template>
<thead>
<tr>
<th :class="[
'column sortable',
pagination.descending ? 'desc' : 'asc',
headers[0].value === pagination.sortBy
? 'active'
: '',
]">
<!-- Foo1 -->
{{ headers[0].text }}
<template>
<v-btn :ripple="false" x-small icon>
<v-icon #click="changeSort(headers[0].value)" color="grey darken-1">fa-arrow-up</v-icon>
</v-btn>
</template>
<v-menu attach="#menuAnchor" :close-on-content-click="false" :nudge-height="200" offset-y content-class="gridfilter-dd" style="display: inline-block">
<template v-slot:activator="{ on }" id="menuAnchor">
<v-btn :ripple="false" x-small icon v-on="on">
<v-icon color="grey darken-1">mdi-filter-outline</v-icon>
</v-btn>
</template>
<v-card class="gridfilter-card">
<v-list-item class="gridfilter-list-item">
<v-list-item-content class="gridfilter-list-item-content">
<v-text-field v-model="filterCandyValue" label="Enter Candy #" :clearable="true"></v-text-field>
</v-list-item-content>
</v-list-item>
<v-card-actions class="gridfilter-card__actions">
<v-spacer></v-spacer>
<button type="button" class="btn btn-primary" #click="onCandyFilterApply()">
<i class="fa fa-floppy-o"></i>
Apply
</button>
</v-card-actions>
</v-card>
</v-menu>
</th>
<!-- Foo2 -->
<th>
<v-menu :close-on-content-click="false" :nudge-height="200" offset-y content-class="gridfilter-dd" style="display: inline-block">
<template v-slot:activator="{ on }" id="menuAnchor1">
<span v-on="on">{{ headers[1].text }}</span>
<v-btn :ripple="false" x-small icon v-on="on">
<v-icon color="grey darken-1">mdi-filter-outline</v-icon>
</v-btn>
</template>
<v-card class="gridfilter-card">
<v-list-item class="gridfilter-list-item">
<v-list-item-content class="gridfilter-list-item-content">
<v-text-field label="Enter Foo2 #" :clearable="true"></v-text-field>
</v-list-item-content>
</v-list-item>
<v-card-actions class="gridfilter-card__actions">
<v-spacer></v-spacer>
<button type="button" class="btn btn-primary" #click="onFilterApply()">
<i class="fa fa-floppy-o"></i>
Apply
</button>
</v-card-actions>
</v-card>
</v-menu>
</th>
</tr>
<template slot="items" slot-scope="props">
<tr :active="props.selected" #click="props.selected = !props.selected">
<td class="text-xs-right">{{ props.item.Foo1 }}</td>
<td class="text-xs-right">{{ props.item.Foo2 }}</td>
</tr>
</template>
</thead>
</template>
</v-data-table>
P.S. I was using this page as a starting point in getting the table set up: https://codepen.io/mikecole/pen/zLNKbG
Looks like you want to remove the header row, however you still want keep the sort.
So without adding hide-default-header option and keeping the header text value as empty string, you can keep the sort functionality.
HTML
<v-data-table
#click:row="rowClick"
:headers="headers"
:items="arrangedList"
:search="search"
:items-per-page="10"
class="outlined elevation-0"
>
JS
headers: [
{
text: '',align: 'left', value: 'name'
},
{ text: '', value: 'calories' },
.
.
],
I use Vuetify and the "secondary" color doesn't show, as the "github" icon.
Here is my code:
<div class="text-center">
<v-bottom-sheet v-model="aPropos" inset>
<template v-slot:activator="{ on: sheet }">
<v-tooltip bottom>
<template v-slot:activator="{ on: tooltip }">
<v-btn
class="mx-2"
fab
dark
small
v-on="{ ...tooltip, ...sheet }"
color="secondary">
<v-icon dark>mdi-help-circle-outline</v-icon>
</v-btn>
</template>
<span>À propos</span>
</v-tooltip>
</template>
<v-sheet class="text-center">
<div class="my-3">
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-btn href="https://www.facebook.com/xxx" target="_blank" class="mx-2" color="primary" fab x-small dark v-on="on">
<v-icon>mdi-facebook</v-icon>
</v-btn>
</template>
<span>Facebook</span>
</v-tooltip>
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-btn href="https://twitter.com/xxx" target="_blank" class="mx-2" color="primary" fab x-small dark v-on="on">
<v-icon>mdi-twitter</v-icon>
</v-btn>
</template>
<span>Twitter</span>
</v-tooltip>
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-btn href="https://www.linkedin.com/in/xxx" target="_blank" class="mx-2" color="primary" fab x-small dark v-on="on">
<v-icon>mdi-linkedin</v-icon>
</v-btn>
</template>
<span>LinkedIn</span>
</v-tooltip>
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-btn href="mailto:xxx" class="mx-2" color="secondary" fab x-small dark v-on="on">
<v-icon>mdi-email</v-icon>
</v-btn>
</template>
<span>Courriel</span>
</v-tooltip>
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-btn href="http://xxx" target="_blank" class="mx-2" color="orange" fab x-small dark v-on="on">
<v-icon>mdi-firefox</v-icon>
</v-btn>
</template>
<span>Site internet</span>
</v-tooltip>
</div>
<div class="my-3">Licence</div>
<div class="my-3">
<v-btn href="https://github.com/xxx" target="_blank" class="ma-2" tile outlined color="primary">
<v-icon left>mdi-github</v-icon> Page GitHub du projet
</v-btn>
</div>
<v-btn
class="mt-6"
text
color="error"
#click="aPropos = !aPropos"
>Fermer</v-btn>
</v-sheet>
</v-bottom-sheet>
</div>
And here is the result:
The "email" button should be light blue and the logo next to "Page GitHub" should be the GitHub logo, not a striked telephone.
I precise, because I already searched for similar questions, that I use "v-app" at the top of my app, to wrap it all (all the other features display correctly).
I use the last version of VueJS and Vuetify (everytime I build I fetch the last version).
If anybody has a clue why I have this result, it would be great. Thanks in advance.
Actually running npm install #mdi/font --save-dev solves the "GitHub" icon problem.
The color problem wasn't a problem, surprisingly it's the color they've chosen to be secondary.
Loading v-for on follow code:
<v-flex class="v-card-cards" xs6 sm4 md4 lg2>
<v-card>
<v-card-title>
<span class="headline black--text">
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-btn icon color="warning" flat small v-on="on">
<v-icon>edit</v-icon>
</v-btn>
</template>
<span>{{ $t('messages.app.edit') }}</span>
</v-tooltip>
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-btn icon color="error" flat small v-on="on">
<v-icon>delete</v-icon>
</v-btn>
</template>
<span>{{ $t('messages.app.delete') }}</span>
</v-tooltip>
</span>
<v-spacer></v-spacer>
<v-icon class="profile_icon elevation-5 success--text" x-large>account_circle</v-icon>
</v-card-title>
<v-divider class="ml-0"></v-divider>
<v-list>
<v-list-tile>
<v-list-tile-action>
<v-tooltip top>
<template v-slot:activator="{ on }">
<v-icon color="info" small v-on="on">info</v-icon>
</template>
<span>{{ $t('messages.forms.newCard.fields.firstname.label') }}</span>
</v-tooltip>
</v-list-tile-action>
<div>
<span class="caption truncate">{{ item.firstname }}</span>
</div>
</v-list-tile>
<v-divider inset></v-divider>
<v-list-tile>
<v-list-tile-action>
<v-tooltip top>
<template v-slot:activator="{ on }">
<v-icon color="info" small v-on="on">info</v-icon>
</template>
<span>{{ $t('messages.forms.newCard.fields.lastname.label') }}</span>
</v-tooltip>
</v-list-tile-action>
<div>
<span class="caption truncate">{{ item.lastname }}</span>
</div>
</v-list-tile>
<v-divider inset></v-divider>
<v-list-tile>
<v-list-tile-action>
<v-tooltip top>
<template v-slot:activator="{ on }">
<v-icon color="info" small v-on="on">people</v-icon>
</template>
<span>{{ $t('messages.forms.newCard.fields.groups.label') }}</span>
</v-tooltip>
</v-list-tile-action>
<div>
<span
v-for="group in item.groups"
:key="item.groups._id"
class="caption truncate"
>{{ group.description }}</span>
</div>
</v-list-tile>
<v-divider inset></v-divider>
<v-list-tile>
<v-list-tile-action>
<v-tooltip top>
<template v-slot:activator="{ on }">
<v-icon color="info" small v-on="on">note</v-icon>
</template>
<span>{{ $t('messages.forms.newCard.fields.notes.label') }}</span>
</v-tooltip>
</v-list-tile-action>
<div>
<span class="caption truncate">{{ item.notes }}</span>
</div>
</v-list-tile>
<v-divider inset></v-divider>
</v-list>
<v-card-actions class="mx-3">
<v-spacer></v-spacer>
<v-tooltip top>
<template v-slot:activator="{ on }">
<v-badge overlap color="info">
<template v-slot:badge>12</template>
<v-icon
large
v-on="on"
color="grey darken-1"
#click="$router.push({ name: 'dashboard' })"
>description</v-icon>
</v-badge>
</template>
<span>{{ $t('messages.forms.newCard.fields.notes.label') }}</span>
</v-tooltip>
</v-card-actions>
</v-card>
page is blocked for a few seconds, during the loading of this contents. Why? Can resolve? I have tried avoid 'v-' directive of vuetify, using only html and so not get nothing block. But i want use vuetify style.
Have tried to find other similar question on web but i don't find nothing about this argument
Given I have a the following toolbar block
<v-toolbar
color="blue darken-1"
dark
app
clipped-left
fixed
>
<v-toolbar-title :style="$vuetify.breakpoint.smAndUp ? 'width: 300px; min-width: 250px' : 'min-width: 72px'" class="ml-0 pl-3">
<v-toolbar-side-icon #click.stop="drawer = !drawer"></v-toolbar-side-icon>
<span class="hidden-xs-only">eventzimmer</span>
</v-toolbar-title>
<v-text-field
light
solo
prepend-inner-icon="search"
placeholder="Search"
class="mt-2"
></v-text-field>
<div class="d-flex align-left ml-1">
<v-btn icon>
<v-icon>
location_on
</v-icon>
</v-btn>
<v-btn icon>
<v-icon>
date_range
</v-icon>
</v-btn>
</div>
</v-toolbar>
How would I be able to use the vuetify grid system to achieve horizontal grids?
Given that I use the grid example from the docs that would look like
<v-container fluid>
<v-layout row wrap>
<v-flex xs-8>
<v-text/>
</v-flex>
<v-flex xs-4>
<buttons/>
</v-flex>
</v-layout>
</v-container>
But unfortunately that looks mostly akward. The docs don't really flavour an example for horizontal alignment. Any example would very much appreciated!