I have the following sidebar in my App.vue ionic app
I have this code in my App.vue that displays the side nav
<template>
<IonApp>
<IonSplitPane content-id="main-content">
<ion-menu content-id="main-content" type="overlay">
<ion-header>
<ion-toolbar >
<ion-grid class="top_header_section">
<ion-row>
<ion-col size="3" offset="2">
<ion-img class="app_logo" :src="require('#/assets/improved_logo.png')"></ion-img>
</ion-col>
<ion-col size="2" offset="2">
<ion-button class="small_button" color="tertiary"><ion-icon :icon="cartOutline"></ion-icon> Sell</ion-button>
</ion-col>
</ion-row>
</ion-grid>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list class="no_margin_top">
<ion-item button router-link="/trending">
<ion-icon :icon="flameOutline"></ion-icon>
<ion-label>Trending</ion-label>
</ion-item>
<ion-item #click="hideMenu" button router-link="/vehicles">
<ion-icon :icon="carSportOutline"></ion-icon>
<ion-label>Vehicles</ion-label>
</ion-item>
<ion-item button router-link="/property">
<ion-icon :icon="businessOutline"></ion-icon>
<ion-label>Property</ion-label>
</ion-item>
<ion-item button router-link="/phones">
<ion-icon :icon="phonePortraitOutline"></ion-icon>
<ion-label>Phones & Tablets</ion-label>
</ion-item>
<ion-item button router-link="/electronics">
<ion-icon :icon="headsetOutline"></ion-icon>
<ion-label>Electronics</ion-label>
</ion-item>
<ion-item button router-link="/homegarden">
<ion-icon :icon="leafOutline"></ion-icon>
<ion-label>Home & Garden</ion-label>
</ion-item>
<ion-item button router-link="/healthbeauty">
<ion-icon :icon="medkitOutline"></ion-icon>
<ion-label>Health & Beauty</ion-label>
</ion-item>
<ion-item button router-link="/fashion">
<ion-icon :icon="colorPaletteOutline"></ion-icon>
<ion-label>Fashion</ion-label>
</ion-item>
<ion-item button router-link="/hobbies">
<ion-icon :icon="americanFootballOutline"></ion-icon>
<ion-label>Hobbies,Art & Sports</ion-label>
</ion-item>
<ion-item button router-link="/cvs">
<ion-icon :icon="documentTextOutline"></ion-icon>
<ion-label>Seeking Work CVs</ion-label>
</ion-item>
<ion-item button router-link="/services">
<ion-icon :icon="listOutline"></ion-icon>
<ion-label>Services</ion-label>
</ion-item>
<ion-item button router-link="/jobs">
<ion-icon :icon="documentAttachOutline"></ion-icon>
<ion-label>Jobs</ion-label>
</ion-item>
<ion-item button router-link="/babies">
<ion-icon :icon="happyOutline"></ion-icon>
<ion-label>Babies & Kids</ion-label>
</ion-item>
<ion-item button router-link="/animals">
<ion-icon :icon="fishOutline"></ion-icon>
<ion-label>Animals & Pets</ion-label>
</ion-item>
<ion-item button router-link="/agriculture">
<ion-icon :icon="fastFoodOutline"></ion-icon>
<ion-label>Agriculture & Food</ion-label>
</ion-item>
<ion-item button router-link="/equipment">
<ion-icon :icon="constructOutline"></ion-icon>
<ion-label>Equipment & Tools</ion-label>
</ion-item>
<ion-item button router-link="/repair">
<ion-icon :icon="extensionPuzzleOutline"></ion-icon>
<ion-label>Repair & Construction</ion-label>
</ion-item>
<ion-item button router-link="/businesses">
<ion-icon :icon="cashOutline"></ion-icon>
<ion-label>Businesses On Sale</ion-label>
</ion-item>
<ion-item button router-link="/hotels">
<ion-icon :icon="bedOutline"></ion-icon>
<ion-label>Hotel & Accomondation</ion-label>
</ion-item>
<ion-item class="no_big_space_bottom" lines="none" button router-link="/logout">
<ion-icon :icon="powerOutline"></ion-icon>
<ion-label>Logout</ion-label>
</ion-item>
</ion-list>
</ion-content>
<ion-footer class="bottom_footer_section">
<ion-toolbar class="">
<ion-grid class="">
<ion-row>
<ion-col>
<ion-title class="ion-text-center">All Rights Reserved.</ion-title>
</ion-col>
</ion-row>
</ion-grid>
</ion-toolbar>
</ion-footer>
</ion-menu>
<ion-router-outlet id="main-content"></ion-router-outlet>
</IonSplitPane>
</IonApp>
</template>
How can i hide the entire sidenav when this link is clicked
<ion-item button router-link="/trending">
<ion-icon :icon="flameOutline"></ion-icon>
<ion-label>Trending</ion-label>
</ion-item>
I was able to hide the side nav like this
<ion-menu-toggle>
<ion-item button router-link="/vehicles">
<ion-icon :icon="carSportOutline"></ion-icon>
<ion-label>Vehicles</ion-label>
</ion-item>
</ion-menu-toggle>
Related
<div v-if="boughtTicket">
<ion-row>
<ion-col size="3">
<p>ZÓNY</p>
<p>2</p>
</ion-col>
<ion-col size="3">
<p>MINÚT</p>
<p>30</p>
</ion-col>
<ion-col size="6">
<div class="flex justify-content-between">
<div class="ml-3">
<p>ZĽAVNENÝ</p>
<p>0,41€</p>
</div>
<ion-icon #click="BuyTicket" :icon="cartOutline"></ion-icon>
</div>
</ion-col>
</ion-row>
</div>
this is in ionic code and Im trying to make a function that if the button is clicked this whole code is going to be changed to different kind
methods: {
buyTicket() {
if(this.buyTicket = )
}
}
this is my method. How can I finish the code please
I would like to have a card that look pretty much like the attached image. It's seems to me that all the button ( circular ones) are on top of a card. I have tried fabs but it doesn't work even if it did i would still encounter the beneath label problem
Edit:
template:
<ion-card class="noSpacing niceAngles" >
<ion-card-content class="noSpacing">
<div class="container">
<div class="scroll" scrollX="true">
<ion-fab-button color="primary">Primary</ion-fab-button>
<ion-fab-button color="secondary">Secondary</ion-fab-button>
<ion-fab-button color="danger">Danger</ion-fab-button>
<ion-fab-button color="light">Light</ion-fab-button>
<ion-fab-button color="dark">Dark</ion-fab-button>
</div>
</div>
</ion-card-content>
</ion-card>
and the scss
.container {
overflow: hidden;
white-space: nowrap;
.scroll {
overflow: auto;
}
ion-chip{
--background:0000ff;
}
&::-webkit-scrollbar {
display: none;
}
}
ion-fab-button {
.fab { display: inline-block !important}
}
i think something like this would do
<ion-row style="padding-bottom:15px;">
<ion-col class="ion-text-center" style="background:orangeredg">
<ion-fab-button style="background:blueg;" color="primary" fill="clear" class="ion-text-center">
<ion-icon style="background:redg;" style="fill: white;" [src]="list.image" color="customcolor"></ion-icon>
</ion-fab-button>
<ion-row style="padding-top:10px;">
<h4>primary</h4>
</ion-row>
</ion-col>
<ion-col class="ion-text-center" style="background:orangeredg">
<ion-fab-button style="background:blueg;" color="secondary" fill="clear" class="ion-text-center">
<ion-icon style="background:redg;" style="fill: white;" [src]="list.image" color="customcolor"></ion-icon>
</ion-fab-button>
<ion-row style="padding-top:10px;">
<h4>secondary</h4>
</ion-row>
</ion-col>
<ion-col class="ion-text-center" style="background:orangeredg">
<ion-fab-button style="background:blueg;" color="danger" fill="clear" class="ion-text-center">
<ion-icon style="background:redg;" style="fill: white;" [src]="list.image" color="customcolor"></ion-icon>
</ion-fab-button>
<ion-row style="padding-top:10px;">
<h4>danger</h4>
</ion-row>
</ion-col>
</ion-row>
I am using a component for ion slides with ion chips for making categories (ex. All, Comedy, etc as YouTube has on Home screen for quick searching).
This component is working fine but without rubber band effect when I open in modal, so I want that user only scroll till first & last chip in modal. But in modal chips are scrolling non stop.
#ionSlidesComponentWithChips
<ion-item color="dark" class="border-top-1">
<ion-slides [options]="slideOpts">
<ion-slide *ngFor="let category of categories">
<ion-chip color="light" has-bouncing="true">
<ion-label>{{category}}</ion-label>
</ion-chip>
</ion-slide>
</ion-slides>
</ion-item>
I added component in modal.
<app-header></app-header>
<app-category-slides></app-category-slides>
<ion-content>
<ion-backdrop class="ion-margin-top"></ion-backdrop>
<img src="assets/imgs/{{img}}.jpg">
</ion-content>
<ion-footer translucent="false" class="ion-no-border" color="dark">
<ion-item lines="none" text-center color="dark">
<ion-grid>
<ion-row class="ion-align-items-center ion-text-center">
<ion-col>
<ion-button color="light" fill="clear">
<span class="material-icons">
thumb_up
</span>
</ion-button>
<span class="ion-padding">2.2k</span>
</ion-col>
<ion-col>
<ion-button color="light" fill="clear">
<span class="material-icons">
thumb_down
</span>
</ion-button>
<span class="ion-padding">20</span>
</ion-col>
<ion-col>
<ion-button color="light" fill="clear">
<span class="fa fa-share"></span>
</ion-button>
<span class="ion-padding">Share</span>
</ion-col>
<ion-col>
<ion-button color="light" fill="clear">
<span class="material-icons">
favorite
</span>
</ion-button>
<span class="ion-padding">Save</span>
</ion-col>
<ion-col>
<ion-button color="light" fill="clear" (click)="close()">
<span class="material-icons">
close
</span>
</ion-button>
</ion-col>
</ion-row>
</ion-grid>
</ion-item>
</ion-footer>
for better understanding the problem I just uploaded video: Please click here
<ion-item color="transparent" padding="0px">
<ion-input type="email" placeholder="username"></ion-input>
</ion-item>
<ion-item color="transparent" padding="0px" no-lines>
<ion-input id="password" type="password" placeholder="Password"></ion-input>
<ion-icon name="albums"></ion-icon>
</ion-item>
I'm creating a login form in ionic. But I have a problem that I want to a bottom white border in item-inner. My CSS is not working, Plz if you have any suggestions give me.....Thanks
The following is my solution, not sure whether it is work for all the cases, but at least for my project it is working.
SOLUTION: add lines="none" to the ion-item tag.
<ion-item style="--background: transparent;" lines="none">
<ion-avatar style="width: 60px;height: 60px;" slot="end" >
<ion-img [src]="displayProfilePic" style="width: 100%" ></ion-img>
</ion-avatar>
</ion-item>
REFERENCE: https://ionicframework.com/docs/api/list
NOTE: It also working for ion-list.
try this
<ion-item lines="none" class="remove_inner_bottom"> //here is the border bottom removal code
<ion-label>
No Lines Item
</ion-label>
</ion-item>
The above code does not have border bottom
inside your css
.remove_inner_bottom{
--inner-border-width: 0; // this removes the inner border width
}
Please find the link for applying sass for ion-item
Try it:
<ion-list lines="none">
<ion-item color="transparent" padding="0px">
<ion-input type="email" placeholder="username"></ion-input>
</ion-item>
<ion-item color="transparent" padding="0px" no-lines>
<ion-input id="password" type="password" placeholder="Password"></ion-input>
<ion-icon name="albums"></ion-icon>
</ion-item>
</ion-list>
OR
.item-inner{
border-style: unset !important;
}
In my Ionic 4 framework, I want to submit a form when I click on the submit button.
I want to get username and password when I click on the submit button.
`enter code here`
this is my ts file in ionic4
import { Component } from '#angular/core';
#Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
username:string;
password:string;
constructor()
{
}
login() {
console.log(this.username);
console.log(this.password);
}
}
html file in ionic4
<ion-header>
<ion-navbar>
<ion-title>Home</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<form (ngSubmit)='login()'>
<ion-item>
<ion-input type="text" name="username" [(ngModel)]="username"></ion-input>
</ion-item>
<ion-item>
<ion-input type="password" name="password" [(ngModel)]="password"></ion-input>
</ion-item>
<ion-button type="submit">Submit</ion-button>
</form>
</ion-content>
HTML
Place a form in html with input field for username and password. We will bind the username and password variables with ngModel. When the button is sumbitted, the login() function is activated.
<form (ngSubmit)="login()">
<ion-input type="text" name="username" [(ngModel)]="username"></ion-input>
<ion-input type="password" name="password" [(ngModel)]="password"></ion-input>
<ion-button type="submit">Submit</ion-button
</form>
TS
Declare username and password variables and place the login function with other logic here.
login() {
console.log(this.username);
console.log(this.password);
// other logic
}
EDIT
Example of ion-input inside ion-grid
<ion-content>
<ion-grid>
<ion-row>
<ion-col size="12"> <!-- Control width of form in grid -->
<form (ngSubmit)="login()">
<ion-row>
<ion-col size="12">
<ion-input type="text" name="username" [(ngModel)]="username"></ion-input>
</ion-col>
<ion-col size="12">
<ion-input type="password" name="password" [(ngModel)]="password"></ion-input>
</ion-col>
<ion-col size="12">
<ion-button type="submit">Submit</ion-button
</ion-col>
</ion-row>
</form>
</ion-col>
</ion-row>
</ion-grid>