Is there a way to force content behind a disabled button, that is transparent?
Here is the code:
<ion-fab bottom right #fab1>
<button tappable ion-fab color="green" class="no-text-transform" (click)="proximo()" [disabled]="!cultivaresForm.valid">
<ion-icon name="arrow-round-forward"></ion-icon>
<ion-label>Próximo</ion-label>
</button>
</ion-fab>
I'm not quite sure to understand what you want to do here, but if you want to apply a style depending on a particular logic you can use ngClass.
i.e. if you want to apply a style to your text when the button is disabled (so when
!cultivaresForm.valid) you can do something like this:
<ion-fab bottom right #fab1>
<button tappable ion-fab color="green" class="no-text-transform" (click)="proximo()" [disabled]="!cultivaresForm.valid">
<ion-icon name="arrow-round-forward"></ion-icon>
<ion-label>Próximo</ion-label>
</button>
</ion-fab>
<p [ngClass]="{text-behind: !cultivaresForm.valid}">the text you want to put behind</p>
You can then define the text-behind style in a separate CSS file.
Related
When I click on the label of an ion-item the checkbox is triggered.
I want to find a way of preventing this from happening as I want to trigger another function when clicking the label.
I found this answer for Ionic 3: https://forum.ionicframework.com/t/solved-can-i-disable-a-checkbox-from-activating-when-clicking-on-a-label/95120
However, it is not working for Ionic 4.
<ion-item>
<ion-icon [name]="setIconDoc(item.document.documentType)" color="primary" (click)="editDocument(item.document)"></ion-icon>
<ion-label padding-start color="none" (click)="editDocument(item.document)"> {{ item.document.customer.name }}
</ion-label>
<ion-checkbox slot="end" color="success" [(ngModel)]="item.isChecked">
</ion-checkbox>
</ion-item>
I'd like to have two behaviors:
- When clicking in the Checkbox trigger just the checkbox.
- When clicking on the label or the icon open a modal to edit my document.
I just had a similar problem and found a nice solution for it in ionic 4 by using the slots of ion-item.
<ion-item lines="full">
<ion-icon slot="start" name="at" (click)="iconClicked()"></ion-icon>
<ion-label slot="start" (click)="labelClicked()">
This is a separately clickable label
</ion-label>
<ion-checkbox slot="end"></ion-checkbox>
</ion-item>
Explanation
The elements in the start slot of the ion-item are not triggered when clicking the checkbox.
The start slot has no bottom border by default so it must be set by adding lines="full" to the ion-item;
Be aware, that the main slot still is rendered with a large width. That may lead to some hidden content. In this case this can be fixed with a css tweak like this.
ion-item ion-label {
overflow: visible;
}
I found another solution. I added another hidden checkbox in the item.
<ion-item *ngFor="let task of tasks;let i of index;" padding margin>
<ion-checkbox slot="start" color="success" (click)="DeleteTask($event, task)"></ion-checkbox>
<!-- another checkbox otherwise item clicks triggers checkbox click -->
<ion-checkbox hidden=true ></ion-checkbox>
<ion-label >
{{task.Name}}
</ion-label>
<ion-reorder slot="end"></ion-reorder>
You can also wrap the checkbox in a slotted div, which appears to break the link between the item and the checkbox.
<ion-item (click)="itemHandler()">
<ion-icon />
<ion-label>Label</ion-label>
<ion-checkbox (click)="checkboxHandler()" />
</ion-item>
If you put the click handler on the ion-item then it will handle clicks from anywhere on the ion-item. However, that includes clicks from the checkbox, so you have to make sure to also call event.stopPropagation() in the checkbox click handler.
using ionic 3.9.2
Objective:
back button in navbar using ios-arrow-back style and "back" with translate pipe
with setBackButtonText(), manage to set back button text.
But it's tedious to do it for every page with getting reference of nav bar, set text after view init.
Any way to set back button text in template in which can set it like {{ 'back' | translate }}
How to use other icon for back button?
first try: ion-nav-back-button, prompt ion-nav-back-button not known
second try:
<ion-buttons start>
<button ion-button>
<ion-icon name="ios-arrow-back"></ion-icon>
<p>back</p>
</button>
</ion-buttons>
However, it's strange that even with start, the button is on right end.
Playground:
ionic playground
hope to see advice, thanks
Try this. Works well on android and ios
<ion-buttons left>
<button ion-button (click)="dismiss()">
<span ion-text color="primary" showWhen="ios">Back</span>
</button>
<button ion-button (click)="dismiss()">
<ion-icon name="arrow-round-back" showWhen="android,windows"></ion-icon>
</button>
</ion-buttons>
I'm having a big issue with aligning an icon to the left. No matter what I do, it aligns to the right side of the screen. Other pages do not have problem and aligns perfectly to the left. This issue happens when I use a tab.
How do I fix this? There's no CSS code as I'm using the default codes.
This is my ionic code:
<ion-header>
<ion-toolbar>
<ion-buttons start>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
</ion-buttons>
<ion-segment end [(ngModel)]="stories">
<ion-segment-button value="headlines">
Headlines
</ion-segment-button>
<ion-segment-button value="new">
New
</ion-segment-button>
</ion-segment>
</ion-toolbar>
</ion-header>
No matter what I do, this is the end result:
PS: I'm using the latest version of ionic.
Just like #Sam5487 said, you should use an ion-navbar instead of the ion-toolbar (if you're using the toolbar in order to avoid the back arrow icon when pushing the page, you should set that page as root instead of just pushing it to the nav stack).
About end/start/left/right
I've also seen that you've used the start attribute in the ion-buttons, but it doesn't mean it will be placed to the left, since start and end follow the UI pattern for the platform
So <ion-buttons start> would be on the left for ios and be the first button on the right for android.
And <ion-buttons end> would be on the right for ios and the last button on the right for android.
So with both start or end the button will be placed at the right on Android.
If you want to place a button at the left or the right in both platforms, you should use left or right, since these attributes are provide as a way to over ride that.
Using the menuToggle button
That being said, if you take a look at the menuToggle docs:
If placing the menuToggle in a navbar or toolbar, it should be placed
as a child of the <ion-navbar> or <ion-toolbar>, and not in the
<ion-buttons>.
So in order to achieve the desired result, you just need to change your layout for this one:
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-segment [(ngModel)]="stories">
<ion-segment-button value="headlines">
Headlines
</ion-segment-button>
<ion-segment-button value="new">
New
</ion-segment-button>
</ion-segment>
</ion-navbar>
</ion-header>
You can also confirm that this is the recommended way to do it, by taking a look at this page from the Conference App demo made by the guys at Ionic
Try this instead
<ion-header>
<ion-navbar>
//*** Rest of the header code ***//
</ion-navbar>
</ion-header>
Also in your button that is only an icon i suggest adding icon-only as well.
<button ion-button icon-only menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
I have fab-button as below and I want to disable it if form is not valid, but based on docs at http://ionicframework.com/docs/v2/api/components/fab/FabButton/ it seems fab-button doesn't have disabled property.
<ion-fab right bottom [disabled]="!profileForm.valid">
<button ion-fab color="primary"><ion-icon name="md-checkmark"></ion-icon></button>
</ion-fab>
You have to disable the button inside the ion-fab. This code works for me:
<ion-fab bottom right>
<button ion-fab [disabled]="!isValidInput()" (click)="add()">
<ion-icon name="checkmark"></ion-icon>
</button>
</ion-fab>
You did absolutely fine but sometimes some property is not applicable to some element.
So here you can't apply disabled directly on the ion-fab attribute.
So, just cut + paste disabled from ion-fab to button.
<ion-fab right bottom>
<button ion-fab color="primary" [disabled]="!profileForm.valid"><ion-icon name="md-checkmark"></ion-icon></button>
</ion-fab>
I created a button in Ionic 2 as follows:
<button secondary block round padding style="text-align : left;">
<ion-icon ios="ios-key" md="md-key"></ion-icon>
Login
</button>
I am trying to align the button text to left side but its not coming there. Is there build in twik available to achieve that?
Ionic wraps the contents of the button into a <span> tag which has the class .button-inner. So the HTML markup looks something like this when you inspect it
<button secondary block round padding>
<span class="button-inner">
<ion-icon ios="ios-key" md="md-key" item-right></ion-icon>
Login
</span>
<ion-button-effect></ion-button-effect>
</button>
The .button-inner class applies flexbox properties to position the text and icons central. You can overwrite the justify-content property and change the value from center to flex-start and this will tell the content (the text and icon) to start from the beginning of the box.
Example
If you want to apply it to all buttons
.button-inner{
justify-content:flex-start;
}
If you want to apply it to a specific button (where .specific-button is added as a class to a button component)
.specific-button .button-inner{
justify-content:flex-start;
}
Because Ionic use its class generate default css. So you should use SASS to customize CSS .
For example :
<button class="item">
<ion-icon ios="ios-key" md="md-key"></ion-icon>
Login
</button>
file styles.scss
.item{
#extend secondary;
#extend block;
text-align : left;
}
You can use the item-left attribute inside the button-tag. No need for class="" or style="".
<button secondary block round padding item-left>
<ion-icon ios="ios-key" md="md-key"></ion-icon>
Login
</button>
More information here