Need to create test 1 2 3 4 belongs to the header menu of Test
How to create mobile Side menu with sub menu in ionic framework?
<ion-list>
<ion-item menu-close-keep-history href="#/app/profile" class="item-icon-left">
<i class="icon ion-ios-home"></i> Test
</ion-item>
<ion-item menu-close-keep-history href="#/app/assignedtasks" class="item-icon-left">
<i class="icon ion-ios-paper"></i>
test 1
</ion-item>
<ion-item menu-close-keep-history href="#/app/requirements" class="item-icon-left">
<i class="icon ion-ios-paper"></i>
test 2
</ion-item>
<ion-item menu-close-keep-history href="#/app/machinery" class="item-icon-left">
<i class="icon ion-ios-paper"></i>
test 3
</ion-item>
<ion-item menu-close-keep-history href="#/app/chat" class="item-icon-left">
<i class="icon ion-ios-people"></i>
test 4
</ion-item>
<ion-item menu-close-keep-history href="#/app/settings" class="item-icon-left">
<i class="icon ion-ios-gear"></i>
Settings
</ion-item>
<ion-item menu-close-keep-history href="#/app/logout" class="item-icon-left">
<i class="icon ion-ios-locked"></i>
Logout
</ion-item>
</ion-list>
Related
when i click home in a menu, there is used [this.navCtrl.setRoot(homepage);].
in that page it does not display menu button.
actullay this is my home page:
when i set setroot for homepage it shows like this
Html code in header:
<button ion-button menuToggle style="margin-top: 10px;" >
<ion-icon name="menu" style="color: white;"></ion-icon>
</button>
menu code:
<ion-menu [content]="mycontent" type="overlay"> <ion-content>
<ion-list class="nobottomborder">
<ion-item (click)="dashboard()">
<ion-icon ios="ios-home" md="md-home" class="sidebaricon"></ion-icon>
Home
</ion-item>
<ion-item (click)="addcart()">
<ion-icon ios="ios-cart" md="md-cart" class="sidebaricon"></ion-icon>
My Cart
</ion-item>
<ion-item (click)="orders()">
<ion-icon ios="ios-list-box" md="md-list-box" class="sidebaricon"></ion-icon>
My Orders
</ion-item>
<ion-item (click)="logout()">
<ion-icon ios="ios-exit" md="md-exit" class="sidebaricon"></ion-icon>
Logout
</ion-item>
<ion-item class="powered">
Powered by
<ion-row>
<img src="assets/imgs/logo.png" alt="logo">
</ion-row>
</ion-item>
</ion-list> </ion-content>
</ion-menu>
I have added like below and it is working great(I have homepage root initial) :
Home:
<ion-navbar>
<button menuToggle ion-button>
<ion-icon name="menu"></ion-icon>
</button>
</ion-navbar>
</ion-header>
I want to add a grayspace of between header and the first card starting.
And want to remove the line highlighting on the card's top area in the screen, I have mentioned it the screenshot provided.
.html
<ion-header>
<ion-toolbar>
<img>
<ion-title>Ion Cards</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-card>
<ion-item>
<ion-avatar item-start>
<img src="img/marty-avatar.png">
</ion-avatar>
<h2>Marty McFly</h2>
<p>November 5, 1955</p>
</ion-item>
<img src="img/advance-card-bttf.png">
<ion-card-content>
<p>Wait a minute. Wait a minute, Doc. Uhhh... Are you telling me that you built a time machine... out of a DeLorean?! Whoa. This is heavy.</p>
</ion-card-content>
<ion-row>
<ion-col>
<button ion-button icon-left clear small>
<ion-icon name="thumbs-up"></ion-icon>
<div>12 Likes</div>
</button>
</ion-col>
<ion-col>
<button ion-button icon-left clear small>
<ion-icon name="text"></ion-icon>
<div>4 Comments</div>
</button>
</ion-col>
<ion-col center text-center>
<ion-note>
11h ago
</ion-note>
</ion-col>
</ion-row>
</ion-card>
</ion-content>
enter image description here
Add the bottom-border in the header.
ion-header {
border-bottom: 10px solid gray;
}
In ionic is having background white
You can change background in
<ion-header>
<ion-toolbar>
<img>
<ion-title>Ion Cards</ion-title>
</ion-toolbar>
</ion-header>
<ion-content style="background:lightgray;">
<ion-card>
<ion-item>
<ion-avatar item-start>
<img src="img/marty-avatar.png">
</ion-avatar>
<h2>Marty McFly</h2>
<p>November 5, 1955</p>
</ion-item>
<img src="img/advance-card-bttf.png">
<ion-card-content>
<p>Wait a minute. Wait a minute, Doc. Uhhh... Are you telling me that you built a time machine... out of a DeLorean?! Whoa. This is heavy.</p>
</ion-card-content>
<ion-row>
<ion-col>
<button ion-button icon-left clear small>
<ion-icon name="thumbs-up"></ion-icon>
<div>12 Likes</div>
</button>
</ion-col>
<ion-col>
<button ion-button icon-left clear small>
<ion-icon name="text"></ion-icon>
<div>4 Comments</div>
</button>
</ion-col>
<ion-col center text-center>
<ion-note>
11h ago
</ion-note>
</ion-col>
</ion-row>
</ion-card>
</ion-content>
and change header
<ion-header style="border-bottom: 5px solid gray;">
<ion-toolbar>
<img>
<ion-title>Ion Cards</ion-title>
</ion-toolbar>
</ion-header>
Using Ionic2/Angular2 I want to use Virtual scroll to make manageable a long list of contacts in contact invite. I've tried replacing both of my *ngFor with [virtualScroll].
The array to map:
var groupedContacts = [contactObject...];
var contactObject = {letter: "a", contacts: [singleContactObject...]};
//scores or even hundreds of contacts per letter
var singleContactObject = {name: "someName", number: "somePhone"};
Original HTML
<ion-content>
<ion-item-group class="invite-sheet" *ngFor="let group of groupedContacts">
<ion-item-divider class="header-letter">{{group.letter}}</ion-item-divider>
<ion-item *ngFor="let contact of group.contacts">
<ion-row align-items-center>
<ion-col width-40>
<h4 text-wrap class="name-invite">{{contact.name}}</h4>
</ion-col>
<ion-col width-35>
<p>{{contact.number}}</p>
</ion-col>
<ion-col width-25>
<button class="inner-invite" (click)="invite(contact)">Invite</button>
</ion-col>
</ion-row>
</ion-item>
</ion-item-group>
</ion-content>
HTML attempt 1:
<ion-content>
<ion-item-group [virtualScroll] = "groupedContacts">
<ion-item-divider *virtualHeader="let group">
{{group.letter}}
</ion-item-divider>
<ion-item *ngFor="let contact of group.contacts">
<ion-row align-items-center>
<ion-col width-40>
<h4 text-wrap class="name-invite">{{contact.name}}</h4>
</ion-col>
<ion-col width-35>
<p>{{contact.number}}</p>
</ion-col>
<ion-col width-25>
<button class="inner-invite" (click)="invite(contact)">Invite</button>
</ion-col>
</ion-row>
</ion-item>
</ion-item-group>
</ion-content>
HTML attempt 2:
<ion-content>
<ion-item-group [virtualScroll] = "groupedContacts">
<ion-item-divider *virtualHeader="let group">
{{group.letter}}
</ion-item-divider>
<ion-item-group [virtualScroll]="contacts">
<ion-row align-items-center>
<ion-col width-40 *virtualItem="let contact">
<h4 text-wrap class="name-invite">{{contact.name}}</h4>
</ion-col>
<ion-col width-35 *virtualItem="let contact">
<p>{{contact.number}}</p>
</ion-col>
<ion-col width-25 *virtualItem="let contact">
<button class="inner-invite" (click)="invite(contact)">Invite</button>
</ion-col>
</ion-row>
</ion-item>
</ion-item-group>
</ion-content>
HTML attempt 3:
<ion-content>
<ion-item-group class="invite-sheet" *ngFor="let group of groupedContacts">
<ion-item-divider class="header-letter">{{group.letter}}</ion-item-divider>
<ion-item-group [virtualScroll]="group.contacts">
<ion-row align-items-center>
<ion-col width-40 *virtualItem="let contact">
<h4 text-wrap class="name-invite">{{contact.name}}</h4>
</ion-col>
<ion-col width-35 *virtualItem="let contact">
<p>{{contact.number}}</p>
</ion-col>
<ion-col width-25 *virtualItem="let contact">
<button class="inner-invite" (click)="invite(contact)">Invite</button>
</ion-col>
</ion-row>
</ion-item>
</ion-item-group>
</ion-content>
No of the attempts produced results so I must fundamentally misunderstand something.
UPDATE:
Here is what I came up with after seeing #wannadream recommendation. I get a blank screen:
<ion-content>
<ion-list [virtualScroll]="groupedContacts" approxItemHeight="50px">
<ion-item *virtualItem="#group">
<ion-item-divider class="header-letter">{{group.letter}}</ion-item-divider>
<ion-list [virtualScroll]="group.contacts" approxItemHeight="50px">
<ion-item *virtualItem="#contact">
<ion-col width-40>
<h4 text-wrap class="name-invite">{{contact.name}}</h4>
</ion-col>
<ion-col width-35>
<p>{{contact.number}}</p>
</ion-col>
<ion-col width-25>
<button class="inner-invite" (click)="invite(contact)">Invite</button>
</ion-col>
</ion-item>
</ion-list>
</ion-item>
</ion-list>
</ion-content>
I have a page that I am trying to split into two sections using Ionic elements etc.: The top section is fixed, and has a set number of items that will not change, and the bottom section should be a scroll-able list.
Also, I want to use an ion-refresher for the entire screen (of course if the user were to try and pull down on the bottom section, this would just scroll through that section..)
The problem I have is that when using an ion-scroll element for the bottom section, the scroll-able area extends beyond the bottom of the screen which means the bottom elements of the list are never view-able. Why is this?
Code:
<ion-content overflow-scroll="false">
<ion-refresher
pulling-text="Pull to refresh..."
ion-refresh="refresh()">
</ion-refresher>
<ion-list>
<ion-item class="item item-icon-left" href="#/somewhere">
<i class="icon ion-icon"></i> Content
<span class="badge badge-assertive>1</span>
</ion-item>
<ion-item class="item item-icon-left" href="#/somewhere">
<i class="icon ion-icon"></i> Content
<span class="badge badge-assertive">2</span>
</ion-item>
<ion-item class="item item-icon-left" href="#/somewhere">
<i class="icon ion-icon"></i> Content
<span class="badge badge-assertive">3</span>
</ion-item>
</ion-list>
<div id="myDivider" class="item-divider">
<i class="icon ion-icon"></i> I'm a divider
</div>
<ion-scroll id=myBottomScroll">
<ion-list>
<ion-item ng-repeat="item in myItems"
class="item" href="#/somewhere/{{item.id}}">
<i class="icon ion-icon"></i>
<i class="icon ion-icon"></i> {{alert.What}}
<i class="icon ion-icon" style="float: right"></i>
</ion-item>
</ion-list>
</ion-scroll>
</ion-content>
I have the below html to build a side-menu in Ionic. I'm aiming to anchor the last item in the menu, 'login' to the bottom of the menu, away from the other items. Is there a simple way to do this in Ionic?
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-positive">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-positive">
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item nav-clear menu-close href="#/app/people">
<i class="icon ion-ios7-people"></i>
People
</ion-item>
<ion-item nav-clear menu-close href="#/app/places">
<i class="icon ion-ios7-location"></i>
Places
</ion-item>
<ion-item nav-clear menu-close href="#/app/perks">
<i class="icon ion-ios7-star"></i>
Perks
</ion-item>
<ion-item nav-clear menu-close ng-click="login()">
Login
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
Were are doing the same thing in a project I am building and found a solution that might help you. You can just adjust the styles to your needs.
<ion-side-menu side="right">
<ion-content>
<ion-list>
<ion-item nav-clear menu-close href="#">Item1</ion-item>
<ion-item nav-clear menu-close href="#">Item2</ion-item>
<ion-item nav-clear menu-close href="#">Item3</ion-item>
<ion-item nav-clear menu-close href="#">Item4</ion-item>
</ion-list>
</ion-content>
<ion-footer-bar class="bar-stable">
<ion-item nav-clear menu-close href="#" style="left:0;right:0;margin:0; width: 100%;position: fixed;">Logout</ion-item>
</ion-footer-bar>
</ion-side-menu>
#Louwki's answer is correct for Ionic 1, and only a little different in Ionic 2.
Updated for Ionic 2 (ion-footer-bar became ion-footer).
<ion-side-menu side="right">
<ion-content>
<ion-list>
<ion-item nav-clear menu-close href="#">Item1</ion-item>
<ion-item nav-clear menu-close href="#">Item2</ion-item>
<ion-item nav-clear menu-close href="#">Item3</ion-item>
<ion-item nav-clear menu-close href="#">Item4</ion-item>
</ion-list>
</ion-content>
<ion-footer class="bar-stable">
<ion-item nav-clear menu-close href="#" style="left:0;right:0;margin:0; width: 100%;position: fixed;bottom:0;">Logout</ion-item>
</ion-footer>
</ion-side-menu>
I did it like this. You don't need to add some CSS.
<ion-side-menu side="left">
<header class="bar bar-header bar-stable">
<h1 class="title">Title</h1>
</header>
<ion-content class="has-header has-footer">
<ion-list>
<ion-item nav-clear menu-close ui-sref="home">Home</ion-item>
</ion-list>
</ion-content>
<ion-footer-bar class="bar-stable" ng-click="logout()">
<div class="title"><i class="icon ion-power"></i> Logout</div>
</ion-footer-bar>
</ion-side-menu>