Skip to content

Instantly share code, notes, and snippets.

@insign insign/QDbtn.vue
Last active Sep 13, 2018

Embed
What would you like to do?
Quasar Dynamic button - buttons for desktop, list for mobile
<template>
<q-btn v-if="!$q.platform.is.mobile"
@click="$emit('click')"
:color="color"
:flat="flat"
:outline="outline"
:icon="icon"
:loading="loading"
:to="to"
>
<q-tooltip :offset="[0, 8]">{{ label }}</q-tooltip>
</q-btn>
<q-item v-else v-close-overlay :class="'text-'+color" @click.native="$emit('click')" :to="to">
<q-spinner v-if="loading"></q-spinner>&nbsp;<q-item-main :label="label"/>
</q-item>
</template>
<script>
export default {
props: {
label: String,
icon: String,
flat: Boolean,
outline: Boolean,
loading: Boolean,
color: String,
to: String,
},
}
</script>
<template>
<q-item-side right v-if="!$q.platform.is.mobile">
<slot></slot>
</q-item-side>
<q-item-side right v-else-if="loading">
<q-spinner-bars :color="color"></q-spinner-bars>
</q-item-side>
<q-item-side right v-else icon="mdi-dots-vertical" :color="alert ? 'warning' : color">
<q-popover>
<q-list link>
<slot></slot>
</q-list>
</q-popover>
</q-item-side>
</template>
<script>
export default {
props: {
loading: Boolean,
alert: Boolean,
color: String,
},
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.