I am using ionic 4. I want to ask if I want to send value to side menu then when I open the menu the value is already at side menu. Now I need to open the side menu then click one time to show the value. Can I know how to do it? Here is my code. Thank you
app.component.html
<ion-menu side="start" (click)="onOpen()">
<ion-content>
<ion-list>
<ion-menu-toggle>
<ion-item lines="none">
<ion-icon name="business" slot="start"></ion-icon>
<ion-label>{{text}}</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outlet main></ion-router-outlet>
</ion-app>
I put the onOpen() method at app.component.ts
onOpen() {
this.text = "my pass value";
}
If you want something triggered when the menu is opened you need to handle the ionWillOpen or ionDidOpen events:
ion-menu - Ionic Documentation
An example of this would look like:
<ion-menu (ionWillOpen)="onMenuOpen()" (ionDidOpen)="menuOpened()">
Related
here's the picture
here's the style when input is clicked
Here's my code:
<ion-item fill="outline">
<ion-icon :src="mail" slot="start"></ion-icon>
<ion-label position="floating">Email Address</ion-label>
<ion-input placeholder="Enter text"></ion-input>
</ion-item>
I am using ionic framework and vue.js as a javascript framework. Please help.
The extra space above the <ion-label> is present because the text inside the tag is going to move there when clicked.
In case you want the Icon and the text of the label on one level you can easily achieve this by repositioning the Icon itself.
<style>
ion-icon{
margin-block-start: auto;
}
</style>
Here is an example.
We have a PrimeVue calendar (with a time picker) component. We have added a close button in the footer to close the calendar when that button is clicked.
The problem is that when we try to close the calendar component on button click, it does not close. It also does not throw an error.
This is the code that we have so far:
<Calendar
id="start"
ref="dateSelect"
v-model="matchModel.startDate"
placeholder="Start date"
:showTime="true"
:showIcon="true"
:yearNavigator="true"
:monthNavigator="true"
yearRange="1910:2030"
>
<template #footer>
<button v-on:click="$emit('hide')">Close</button>
</template>
</Calendar>
Please may you assist on how we can close the calendar component when the close button is clicked
although it's late, I hope can help the people who encounter such a problem like us.
add ref property to Calendar component
<Calendar dateFormat="yy-mm-dd"
:max-date="maxDate" :min-date="minDate"
selectionMode="range" v-model="product.range"
:hideOnDateTimeSelect="true" show-icon="true"
ref="ca"
>
<template #footer>
<Button v-on:click="closeCalendar()" class="button">应用</Button>
</template>
</Calendar>
add ref name to setup method
setup:{
const ca = ref()
const closeCalendar()=>{
ca.value.overlayVisible = false
}
return {closeCalendar,ca}
}
I have a simple button in ionic 4, i wan to run a function on clicking this button. but it seems like click event is not triggering.
here is html
<ion-content >
<ion-button (onclick)="changeText()" expand="block" color="light">
Click me
<ion-icon name="arrow-forward"></ion-icon>
</ion-button
<p>My Name is {{text}}</p>
</ion-content>
ts:
export class HomePage {
text = "Lakhan"
changeText(){
this.text="Ram";
}
}
Try this:
<ion-content >
<ion-button (click)="changeText()" expand="block" color="light">
Click me
<ion-icon name="arrow-forward"></ion-icon>
</ion-button
<p>My Name is {{text}}</p>
</ion-content>
Instead of using onclick you need to use click so
<ion-content >
<ion-button (onclick)="changeText()" expand="block" color="light">
Click me
<ion-icon name="arrow-forward"></ion-icon>
</ion-button
<p>My Name is {{text}}</p>
</ion-content>
you need to change to
<ion-content >
<ion-button (click)="changeText()" expand="block" color="light">
Click me
<ion-icon name="arrow-forward"></ion-icon>
</ion-button
<p>My Name is {{text}}</p>
</ion-content>
I am trying to use a single menu for both LTR and RTL but the issue I am facing when its RTL then the menu is opening from the left side which should be from the right side
I don't believe you can use a single menu for both RTL and LTR swiping behavior. You could instead, use a service that would populate the menu information with a *ngIf=let link of links", and then just have a menu on either side of the app that subscribes to the links provided in the service.
The attribute side="end" or side="start" controls which side of the app the menu will appear on, so if you want to swipe from the right side of the screen you'd use slide="end" on your ion-menu.
<ion-menu side="end" contentId="mainContent" menuId="slidingMenu" id="slidingMenu">
<ion-header>
<ion-toolbar>
<ion-title>{{(menu?.details | async)?.title}}</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item class="item-mute">
<ion-label>Mute</ion-label>
<ion-toggle></ion-toggle>
</ion-item>
<ion-item *ngFor="let link of (menu?.details | async)?.links" detail
(click)="navToPage(link)">{{link?.title}}</ion-item>
</ion-list>
</ion-content>
</ion-menu>
How do I make this expansion-panel open content only on clicking icon?
Tried using readonly but it didn't help.
Thanks in advance!
https://vuetifyjs.com/en/components/expansion-panels#expansion-panel
You can put online the argument in all collapse like: expanded={!expanded}
and in the icon you put the onClick={toggle}
I was having the same problem and just found a solution for that.
You need to implement a custom button on the expansion panel, so it will accept custom events. You can achieve that using template and v-slot:
<v-expansion-panel #click.prevent="onClick()">
<v-expansion-panel-header>
...your expansion panel code here
<template v-slot:actions>
<v-btn icon #click.stop="onClick()">
<v-icon>mdi-filter-variant</v-icon>
</v-btn>
</template>
</v-expansion-panel-header>
</v-expansion-panel>
...and your onClick method would be like this:
onClick() {
/*this will toggle only by icon click. at the same time, will prevent toggle
by clicking on header. */
const curr = this.panel
this.panel = curr === undefined ? 0 : undefined
}
It may seem a little magical that the same function is toggling on icon click and preventing toggle on header click, but this happens because the custom icon button does not toggle itself, so we force that using the onClick method. On the other hand, the expansion panel header has its native property of toggling the panel. So when we click it, its value will automatically change and we need to change it back to what it was before the click.
To make the expansion-panel open only on clicking icon you can use css that disables all clicks on the header and only allows clicks on the icon:
<style>
.v-expansion-panel-header{
pointer-events: none;
}
.v-expansion-panel-header__icon{
pointer-events: All;
}
</style>
Keep in mind if you are using scoped style you have use >>>:
https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors
Here is the template example, I added #click to provide btn like experience when user clicks on an icon, it's not necessary:
<template>
<v-expansion-panel>
<v-expansion-panel-header>
<template #actions>
<v-icon class="icon Icon Icon--32 icon-utility-arrows-carrot_down-32"
#click/>
</template>
</v-expansion-panel-header>
<v-expansion-panels >
<v-expansion-panel-content >
<!--content here-->
</v-expansion-panel-content>
</v-expansion-panels>
</v-expansion-panel>
</template>