While designing a next and previous button inside an 'ion-slides', these two buttons get automatically placed inside 'swiper-wrapper' class. Need to make it outside the 'swiper-wrapper' class, so that it is visible from any slide. Has any solution?
<ion-slides pager="false" #mySlider>
<ion-slide>1</ion-slide>
<ion-slide>2</ion-slide>
<ion-slide>3</ion-slide>
<ion-slide>4</ion-slide>
<ion-button class="slide-prev-btn"><ion-icon name="chevron-back" (click)="swipeNext()"></ion-icon></ion-button>
<ion-button class="slide-next-btn"><ion-icon name="chevron-forward" (click)="swipePrev()"></ion-icon></ion-button>
</ion-slides>
I do this by using position and two-line code
<div style="position: absolute;top: 50%;left: 16px;font-size: 25px;z-index: 2;" (click)="slidePrev()">
<ion-icon name="arrow-back"></ion-icon>
</div>
<div style="position: absolute;top: 50%;right: 16px;font-size: 25px;z-index: 2;" (click)="slideNext()">
<ion-icon name="arrow-forward"></ion-icon>
</div>
<ion-slides paginationType="bullets" slidesPerView="1" pager="true">
<ion-slide>
<h1>Slide 1</h1>
</ion-slide>
<ion-slide>
<h1>Slide 2</h1>
</ion-slide>
<ion-slide>
<h1>Slide 3</h1>
</ion-slide>
</ion-slides>
TS
#ViewChild(Slides) slides: Slides;
slidePrev() {
this.slides.slidePrev();
}
slideNext() {
this.slides.slideNext();
}
Related
I’m trying to create a ‘modal’ component. It’s using a ‘v-if’ attribute for deciding whether the component is shown or not.
The Vue docs mention you can use ‘appear’ for transitions (https://vuejs.org/guide/built-ins/transition.html#transition-on-appear), which works well.
However, when I close the modal, the element gets removed from the DOM, and the ‘leave’ transition is not trigged.
Is there an opposite of ‘appear’ for Vue transitions? How can I apply a leave transition when an element is removed from the DOM?
Link of example: https://jsfiddle.net/jelledv4/3Lr79hyg/4/
<transition
appear
enter-active-class="transition duration-1000 ease-out"
enter-from-class="transform scale-95 opacity-0"
enter-to-class="transform scale-100 opacity-100"
leave-active-class="transition duration-1000 ease-in"
leave-from-class="transform scale-100 opacity-100"
leave-to-class="transform scale-95 opacity-0"
>
PS I could use ‘v-show’ instead of ‘v-if’ to mitigate this, but for this use-case ‘v-if’ suits better. Plus I’m wondering how I can tackle this issue
In your provided jsfiddle, you use v-if on the parent element of the Transition components. Instead, use v-if on the child/slot of the Transition component. Otherwise, the transition components will be removed immediately.
const app = Vue.createApp({
data() {
return {
show: false,
};
},
methods: {
toggle() {
this.show = !this.show;
},
}
});
app.mount('#app');
<div id="app">
<button #click="toggle" class="fixed z-10 bg-white ml-3 mt-3 border border-gray-800">Toggle</button>
<div>
<!-- Modal background -->
<transition
appear
enter-active-class="transition duration-1000 ease-out"
enter-from-class="opacity-0"
enter-to-class="opacity-100"
leave-active-class="transition duration-1000 ease-in"
leave-from-class="opacity-100"
leave-to-class="opacity-0"
>
<div v-if="show" class="absolute left-0 top-0 w-full h-full bg-black bg-opacity-50"></div>
</transition>
<!-- Modal content -->
<transition
appear
enter-active-class="transition duration-1000 ease-out"
enter-from-class="transform scale-95 opacity-0"
enter-to-class="transform scale-100 opacity-100"
leave-active-class="transition duration-1000 ease-in"
leave-from-class="transform scale-100 opacity-100"
leave-to-class="transform scale-95 opacity-0"
>
<div v-if="show" class="fixed bg-red-500 w-52 h-52 z-10 mt-14">
<h2 >test</h2>
</div>
</transition>
</div>
</div>
<script src="https://unpkg.com/vue#3"></script>
<script src="https://cdn.tailwindcss.com"></script>
I am trying to get it work sidebar related to this link
Entering works but leaving not works on both overlay and slide back.
<div class="fixed inset-0 flex z-40 lg:hidden" role="dialog" aria-modal="true" v-show="mobileMenuOpen">
<transition
enter-class="opacity-0"
enter-active-class="transition-opacity ease-linear duration-300"
enter-to-class="opacity-100"
leave-class="opacity-0"
leave-active-class="transition-opacity ease-linear duration-300"
leave-to-class="opacity-0"
>
<div class="fixed inset-0 bg-black bg-opacity-25" aria-hidden="true" v-show="mobileMenuOpen" #click="closeMobileMenu"></div>
</transition>
<transition
enter-active-class="transition ease-in-out duration-300 transform"
enter-class="-translate-x-full"
enter-to-class="translate-x-0"
leave-class="translate-x-0"
leave-active-class="transition ease-in-out duration-300 transform"
leave-to-class="-translate-x-full"
appear
> sidebar code
Your starting state for leave is opacity-0 try changing it to opacity-100
...
leave-class="opacity-100"
...
v-leave: Starting state for leave. Added immediately when a leaving transition is triggered, removed after one frame.
We're using Quasar Framework with Vue.js. Consider the following q-card that is clickable:
<div class="q-pa-md row items-start q-gutter-md cursor-pointer">
<q-card class="my-card" clickable #click="GetSapRoster">
<q-card-section class="bg-primary text-white">
<div class="text-h6">SAP Truck Roster</div>
<div class="text-subtitle2">Get the truck planning</div>
</q-card-section>
</q-card>
</div>
How is it possible to achieve the same effect for a q-card as with a q-btn?
At the moment when using the class cursor-pointer it only fixes the mouse pointer but not the shading effect like a q-btn has.
You can use v-ripple + q-hoverable + q-focus-helper to simulate a button.
For example:
<q-card v-ripple class="my-box cursor-pointer q-hoverable">
<span class="q-focus-helper"></span>
<q-card-section>
...
</q-card-section>
</q-card>
Currently I am working on PWA project. In that I am using ionic-vue package. I am using ion-input for taking user input in form but required and size properties not working.
Code for vue component:
<template>
<div>
<ion-header>
<ion-toolbar>
<ion-icon name="close" class="close-icon" #click.prevent="redirectTo(close)"></ion-icon>
<ion-title>{{ title }}</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="occupie-field" padding>
{{ content }}
<div>
<ion-input class="modal-ion-input"
:placeholder="rootElement.$t('number-of-person')"
type="number" mode="ios" inputmode="decimal"
:value="total_person"
#input="total_person = $event.target.value"
></ion-input>
<ion-input class="modal-ion-input"
:placeholder="rootElement.$t('name')"
:value="booking_name"
#input="booking_name = $event.target.value"
></ion-input>
<ion-input class="modal-ion-input"
:placeholder="rootElement.$t('mobile-no')"
type="tel" inputmode="tel"
:value="contact_number"
#input="contact_number = $event.target.value"
></ion-input>
<ion-input class="modal-ion-input"
:placeholder="rootElement.$t('gstin-no')"
:value="gst_no" size="15" type="text"
#input="gst_no = $event.target.value"
></ion-input>
<!-- <tags-input
element-id="tags"
:existing-tags="available_table_list"
:typeahead="true"
:showAddedTags="true"
typeahead-style="dropdown"
:delete-on-backspace="false"
:only-existing-tags="true"
placeholder="Merge Table"
#tag-added="onTagAdded"
#tag-removed="onTagRemoved"
v-model="selectedTags"
></tags-input> -->
<!-- <ion-list> -->
<ion-item class="select-tablee">
<ion-label hidden>{{rootElement.$t('select-tables')}}</ion-label>
<ion-select :placeholder="rootElement.$t('merge-table')" multiple="true" value="merge_tables" #ionChange="selectChange($event)" :disabled="Object.keys(available_table_list).length === 0">
<ion-select-option v-for="(table, index) in available_table_list" :key="index" :value="index">{{ table }}</ion-select-option>
</ion-select>
</ion-item>
<!-- </ion-list> -->
</div>
<ion-button class="occupie-table-button" #click.prevent="submit" :disabled="disableBtn">{{rootElement.$t('occupie-table')}}</ion-button>
</ion-content>
When I add required property in ion-input then required property not working and form submitted without checking.
see this - https://gist.github.com/mlynch/2ff3692341276ba959fea96a620097f9
try
<IonInputVue v-model="contact_number" size="10"/>
I try to create a layout with element.io which has a collapsing sidebar menu.
It works quite well, the only problem is that I do not gain anything since the width of the menu and the content part are fixed.
My code looks like this:
<template>
<el-row>
<el-col :span="4">
<template>
<el-menu :router="true"
:default-active="$route.path"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b"
:collapse="isCollapse"
class="el-menu-vertical-demo"
>
<template v-for="rule in routes">
<el-menu-item :index="rule.path">
<i :class="rule.icon"></i>
<span slot="title">{{ rule.name }}</span>
</el-menu-item>
</template>
</el-menu>
</template>
</el-col>
<el-col :span="20">
<el-row>
<el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
<el-radio-button :label="true" :disabled="isCollapse" border>
<i class="fas fa-caret-left"></i>
</el-radio-button>
<el-radio-button :label="false" :disabled="!isCollapse" border>
<i class="fas fa-caret-right"></i>
</el-radio-button>
</el-radio-group>
</el-row>
<el-row>
<router-view></router-view>
</el-row>
</el-col>
</el-row>
</template>
<script>
export default {
data() {
return {
routes: this.$router.options.routes,
activeLink: null,
isCollapse: false
};
},
mounted: function () {
},
methods: {
}
};
</script>
How can I fix it so the content block will occupy 100% of the available width?
Ok, I found a simple solution.
First, I moved to element-io elements. The menu is now embedded inside el-aside tag, while the main part is embedded inside an el-container tag.
Second, I added a dynamic css class to the el-aside tag:
<el-aside v-bind:class="[isCollapse ? 'menu-collapsed' : 'menu-expanded']">
Now, if you don't want to mess around with transitions, simply add to the el-menu component :collapse-transition="false" and that's it!