I'm working on a form. One of the fields must ask the user to choose an image from a selection. I would like to achieve a similar result.
So I thought of an <ion-select> which would have a corresponding <ion-select-option> for each image, like this
<ion-item>
<ion-label>Images</ion-label>
<ion-select>
<ion-select-option>
<ion-img value="image1" src="https://via.placeholder.com/150"></ion-img>
</ion-select-option>
<ion-select-option>
<ion-img value="image2" src="https://via.placeholder.com/150"></ion-img>
</ion-select-option>
</ion-select>
</ion-item>
but I get the following result.
The problem is that the images are not displayed and that the ion-select dialog box is not very suitable for image selection. So I don't know if another ionic component would do a better job or if I should choose a non-ionic solution...
It is not possible to add images in ion-select-option but you can achieve the same thing by your own by :
create a page and make normal ion-list with a ngfor and inside
each item put an image and before it a radio button for single
choice or checkbox for multichoice.
open this page as modal and give this modal custom css in golobsl
.scss file as normal select alert like (width:450px;height:350px;).
when you open the modal send array that will contain images or
api link to requested when modal opens.
get the props of modal that is sent with it with navParams and
but that you will get what you wanted exactly.
And for any more info write a comment and will be with you anytime.
Related
I am new to Ionic. I want to design a carsharing application. I want to make a "Choose a destination" dropdown menu, with frequent options (like "Here", "Home", or "Anywhere") and a special "Choose a destination" option.
This option would ideally look like another dropdown menu (with the little triangle) and would open a modal with an input that would allow to pick an address (I'm not there yet, I would have to interface with google map or OSM... anyway).
I tried the following code
<ion-card>
<ion-card-header>
Where are you going?
</ion-card-header>
<ion-card-content>
<ion-item>
<ion-label>Destination</ion-label>
<ion-select [(ngModel)]="destination">
<ion-option>Here</ion-option>
<ion-option>Home</ion-option>
<ion-option>Work</ion-option>
<ion-option>
<ion-item>
<ion-label fixed>Choose a destination</ion-label>
<ion-select [(ngModel)]="destination_chosen">
</ion-select>
</ion-item>
</ion-option>
<ion-option>Anywhere</ion-option>
</ion-select>
</ion-item>
</ion-card-content>
</ion-card>
But it looks like it's not taken into account. What do I do wrong? Is it even possible? If not, would anyone have an idea of a good UX pattern to use in that case?
A simple solution would be to change the view of the modal to show the actual dropdown menu you want whan that option is selected as if it was a second step. A second different modal would not be ideal since putting a modal inside another modal is not a good UX practice. As it is part of a various-steps process, it won't feel odd.
So, instead of being part of the same view, you would have to createe a second one, should be simple enough with JS or even easier with Angular. A simple ng-show condition should do it.
I want to take the values from database such as name,email and photo for a particular user and when he clicks the view button the same details should be seen in popup can i achieve in ionic2..
Any help will be appreciated..
You cannot do it using Alert component.If you need to do that then you have to use page component.On page component where you can show your images and all other db fetched stuff.
.html
<ion-content padding>
<img src="{{imageUrl}}" alt="image">
</ion-content>
.ts
this.imageUrl = imageUrl;
I would like to have the "ion-android-sync" icon (http://ionicons.com)
My current code is
<button class="button" ng-click="loadEvents()">L</button>
What's the proper class structure for that?
Also, if I just load the css file advertised on ionicons.com is enough?
you can use ion-icon element to use ionic icons inside button.
I hope it will reach your requirement
for example, i will add facebook logo inside button
<button class="button" ng-click="loadEvents()"><ion-icon name="logo-facebook"></ion-icon></button>
I have my simple application using Ionic Framework.
It looks like :
Here the list code :
<ion-list show-Reorder="data.showReorder">
<ion-item class="item-avatar item-icon-right" ng-repeat="band in bands" type="item-text-wrap" href="#/bands/{{auth.profile.name}}/{{band.id}}">
My problem is, when I try to scroll the list up and down, it always shows blur on the selected list, and it makes the view when doing scrolls is not smooth enough.
I can solve that blur problem, but I lose the list ng-click and href capabilities, like
<ion-list show-Reorder="data.showReorder">
<ion-item class="item-avatar item-icon-right" ng-repeat="band in bands" type="item-text-wrap">
How to resolve that blur problem without losing ng-click and href capabilities, in order to make scrolls are smoother?
Try using ui-sref instead of href. If this doesn't work create an anchor link inside your ion-item and redirect through it. Hopefully this will solve your problem.
Im having a hard time understanding how Ionic handles ion-nav-view vs. ion-view. I'm trying to build an app where the views are not nested (as example apps). This is what I've done
In index.html I have an ion-nav-view
I have 3 pages. 1 login, 1 list, and 1 item (item is a list item beeing clicked)
My list page is an ion-side-menus while the other 2 are ion-view's
Now to my question
When I click an item in my list I get a transition to my item page but when I go back to my list there is no page transition. This is the HTML
<ion-header-bar class="bar-dark">
<div class="buttons">
<button nav-transition="slide-left-right" class="button button-icon button-clear ion-android-arrow-back" ui-sref="list">
</div>
<h1 class="title">Item</h1>
</ion-header-bar>
How can I get transitions to work even though each page is its own ion-view?
EDIT
I solved the "transition back" using nav-direction="back"
Next problem is that transition only works ones from the list?
If i click the above the slide left transition occurs, but if I go back and press it again I don't get a transition? Is it some sort of cache?
The way I do is to have ion-side-menus inside index.html as the only directive, and inside it and with an ion-nav-view inside.
Then define an ion-side-menu with side="left" and include the list you want to show.
That way you can define a side-menu that will show throughout the whole app and be available with all the content you need.
Now to answer your question, I think the list page (in your case the one with ion-side-menus) does not have transition when going back because it is now an ion-view. The page transitions occur on ion-views when they are swapped in-out inside the . But the ion-side-menus page is not swapped in-out it's just there.
Regarding this:
EDIT I solved the "transition back" using nav-direction="back"
It worked because you explicitly told ionic that you want a nav-transition when going back.
Hope this helps a bit