I am creating a simple dashboard in ionic that consists of a toolbar at the top and a collapsible menu (navigation bar)on the left side. The menu is toggled by the menu button in the toolbar, but clicking the standalone 'div' component is also causing the menu to hide.
<ion-content>
<ion-menu type="push" menuId="nav-menu">
// create menu items
</ion-menu>
<div main>
hello world
</div>
</ion-content>
I expect the menu to remain open/unchanged when clicking on the hello world.
This is the normal behaviour and not configurable:
ionic/menu.tsx at master · ionic-team/ionic
I think you should maybe explore split-pane if you want to keep the menu open:
ion-split-pane - Ionic Documentation
But even then I think you will need to add your own toggle button to all the "desktop" menu to be optionally collapsed.
This tutorial shows how to set it up with a menu in Angular:
Split Pane in Ionic ← Alligator.io
And I think this bit is where you would need to add your own toggle code:
<ion-split-pane [when]="checkSize()">
<!-- ... -->
</ion-split-pane>
The tutorial is giving you it from the point of view of size changes, but I think you could wire this into a toggled bool from your own menu button?
Related
I need your help. I recently started teaching Ionic, later I ran into a small problem. I use a bottom tab template for the menu. The problem is that in the ion-header I have an ion-back-button. This button works fine, but unfortunately, when you reload the page in the browser, this button disappears. How to make sure that the knpoka does not disappear? Thank you
<ion-header *ngIf="fullBox">
<ion-toolbar>
<ion-title>Details №{{fullBox.id}}</ion-title>
<ion-back-button slot="start" (click)="goBack()"></ion-back-button>
</ion-toolbar>
</ion-header>
goBack() {
this.router.navigate(['']);
}
The functionality of ion-back-button is based on the app's history. When you refresh as #NajamUsSaqib says your history is lost.
I can see you are giving some funcionality to ion-back-button with (click) attribute, but is not necesary for this component because that it's the main functionality of the button.
For your problem, you can replace the ion-back-button with a simple button and maintain the click method you are using. This should show always the button regardless of app's history.
Regards.
I am trying to make a side menu bar in my app. the side menu is showing. but I can't click those links. When I inspect the page and select an item, it is selected tag.
Assuming that you have used this example. This example does not implement click events, to add them:
In React, use onClick() handler.
In Angular, use ng-click or bind event (click)
This should be added to every "ion-item" tag in above example.
So I want to create a modal-like behavior for the search.
When the ion-searchbar is focused, a modal would slide from the bottom showing search history, which would hold the suggestion once the user starts typing. The problem with ionic nodals is the backdrop, I couldn't keep the ion-searchbar active to input search words.
This component is called Popover, you can create them pretty much like you do with a modal but using an PopoverController instead. The PopoverController.create() method has an event parameter that will tell which element will be the anchor for the popover, set that to your search bar and it should be magically aligned.
By default a backdrop is shown when the popover is created but it can be deactivated via showBackdrop property upon creation.
Take a look at the Ionic's Popover API Docs for further information
I ended up by using segments, as below:
<div *ngIf="segment == 'prodSection'">
...
</div>
<div *ngIf="segment == 'searchSection'">
...
</div>
I styled the two divs in a way to be on top of each other and added events to the searchbar like:
<ion-searchbar (ionFocus)="openSearch()" (ionCancel)="retProd()"></ion-searchbar>
And toggeled between the segments with setting the segment variable's value with each event.
I want to make a button in ionic not clickable, so how can I do it?
I have buttons inside a header bar and they are scores, so people can't click on them.
use ng-disable
<button ng-disable="true"></button>
I have a simple app which always starts up a dashboard. This is the initial page where the user has an overview over the current state.
From there he navigates to modules using direct links on the dashboard itself or the given side menu.
In every module there should be a back-button visible to reach the dashboard. Whenever the user navigates from Module A to Module B (using the side-menu, which is always available!) the back-button should not navigate back to Module A, it should target the dashboard...
Here a sketch how it should be:
Red: Expected back navigation from view
Blue: Possible navigation on
screen
Blue (dotted): Possible Navigation using the side menu
Is there any way to archive this?
Yes it's possible. The easiest way to achieve this is to just forget (disable) the Ionic default back button and place one of your own in there. Have a abstract controller for the whole app or make your own for the header or where ever you would like the back button to be (a place where to place the controller code). For example:
HTML:
<button class="button button-clear header-item" ng-click="goToDashboard()">
<i class="icon ion-android-arrow-back"></i>
</button>
Controller:
$scope.goToDashboard = function() {
$state.go('dashboard');
};
Here is a simple Codepen about the solution: https://codepen.io/thepio/pen/GqvvjA?editors=1010
In this example you can just navigate to different tabs through the content and then navigate back to dashboard with the arrow on the left top corner.