When the ion-select box is open, I need the label text to be different. Somehow, I can't seem to find a working solution I can figure out. The pictures below is my goal (achieved through changing the element in browser ATM.) Also, don't know how to change the size of those pictures. Sorry.
<ion-item>
<ion-label>Water Source</ion-label>
<ion-select formControlName="waterSource" multiple="true">
<ion-select-option name="Aquifer">Aquifer</ion-select-option>
<ion-select-option name="CityWater">City Water</ion-select-option>
<ion-select-option name="Lake">Lake</ion-select-option>
<ion-select-option name="Pond">Pond</ion-select-option>
<ion-select-option name="River">River</ion-select-option>
<ion-select-option name="RuralWater">Rural Water</ion-select-option>
<ion-select-option name="Well">Well</ion-select-option>
<ion-select-option name="Other">Other</ion-select-option>
</ion-select>
<ion-input *ngIf="!customers.surveyCompleteDate" formControlName="waterSource" type="string"></ion-input>
<ion-input *ngIf="customers.surveyCompleteDate" formControlName="waterSource" readonly></ion-input>
</ion-item>
As mentioned in the docs, you can use the interfaceOptions property to set a different title for the alert (among other things).
Please take a look at this stackblitz demo.
Component
// ...
public customOptions: any = {
header: "Pick all that apply"
};
// ...
Template
<ion-item>
<ion-label>Water Source</ion-label>
<ion-select [interfaceOptions]="customOptions" multiple="true">
<ion-select-option name="Aquifer">Aquifer</ion-select-option>
<ion-select-option name="CityWater">City Water</ion-select-option>
<ion-select-option name="Lake">Lake</ion-select-option>
<ion-select-option name="Pond">Pond</ion-select-option>
<ion-select-option name="River">River</ion-select-option>
<ion-select-option name="RuralWater">Rural Water</ion-select-option>
<ion-select-option name="Well">Well</ion-select-option>
<ion-select-option name="Other">Other</ion-select-option>
</ion-select>
</ion-item>
Please also keep in mind that you can set a subHeader and even a message in case you want "Water Source" to be the main title of the alert, and show "Select all that apply" as a sub header or message since that sounds like a hint to the user but not the main title of the alert.
Related
here's the picture
here's the style when input is clicked
Here's my code:
<ion-item fill="outline">
<ion-icon :src="mail" slot="start"></ion-icon>
<ion-label position="floating">Email Address</ion-label>
<ion-input placeholder="Enter text"></ion-input>
</ion-item>
I am using ionic framework and vue.js as a javascript framework. Please help.
The extra space above the <ion-label> is present because the text inside the tag is going to move there when clicked.
In case you want the Icon and the text of the label on one level you can easily achieve this by repositioning the Icon itself.
<style>
ion-icon{
margin-block-start: auto;
}
</style>
Here is an example.
With the code below, if I press the "Edit" button, I change the disabled state all the rows, how can I separate this? I mean, once i just want to edit one row.
cols="12"
class="contact-container"
v-for="contact in contacts"
:key="contact.id"
>
<b-form inline>
<b-input
type="text"
:value="contact.name"
:disabled="editMode ? disabled : ''"
/>
<b-input
type="tel"
:value="contact.phoneNumber"
:disabled="editMode ? disabled : ''"
/>
<b-input
type="email"
:value="contact.email"
:disabled="editMode ? disabled : ''"
/>
<b-input
type="text"
:value="contact.title"
:disabled="editMode ? disabled : ''"
/>
<b-button-group>
<button type="button" size="lg" class="btn">
<b-icon-x-circle-fill variant="danger"></b-icon-x-circle-fill>
</button>
<button type="button" size="lg" class="btn" #click="startEdit">
<b-icon-pencil-fill variant="primary"></b-icon-pencil-fill>
</button>
</b-button-group>
Assuming that editMode is part of the components' data. If it's a prop this solution might be a bit tricky to implement.
Set up editMode as an empty object in your component's data. And for the method startEdit it should take, as a parameter, the id of the contact being edited.
So something like this: #click="startEdit(contact.id)". and in the method body, this.$set(this.editMode, contact.id, true). See Reactivity in Depth in Vue docs for information on this.$set.
To check if a row is disabled use :disabled="editMode[contact.id]" (no need for ternary operator checking as it's a boolean)
This approach will make it possible to edit multiple rows at the same time. Though a name such as editedContacts might be better in this case.
i'm getting the following error:
core.js:7812 Can't bind to 'checked' since it isn't a known property of 'ion-radio'.
And my code on HTML is:
<ion-list>
<ion-radio-group value="default" (ionChange)="radioGroupChange($event)">
<ion-list-header>
<ion-label>Image language</ion-label>
</ion-list-header>
<ion-item>
<ion-label>SPA</ion-label>
<ion-radio [checked]="true" slot="start" value="spa"></ion-radio>
</ion-item>
<ion-item>
<ion-label>RU</ion-label>
<ion-radio slot="start" value="ru"></ion-radio>
</ion-item>
<ion-item>
<ion-label>ENG</ion-label>
<ion-radio slot="start" value="eng"></ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>
How to set by default a radio button checked?
Well according to the Ionic5 docs (https://ionicframework.com/docs/api/radio), you have to set the value of the <ion-radio-group> to the value of the <ion-radio> that you want checked by default.
So get rid of your [checked]="true"
Change
<ion-radio-group value="default" (ionChange)="radioGroupChange($event)">
to
<ion-radio-group value="spa" (ionChange)="radioGroupChange($event)">
to achieve your desired outcome.
I am using ionic 4. I want to ask if I want to send value to side menu then when I open the menu the value is already at side menu. Now I need to open the side menu then click one time to show the value. Can I know how to do it? Here is my code. Thank you
app.component.html
<ion-menu side="start" (click)="onOpen()">
<ion-content>
<ion-list>
<ion-menu-toggle>
<ion-item lines="none">
<ion-icon name="business" slot="start"></ion-icon>
<ion-label>{{text}}</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outlet main></ion-router-outlet>
</ion-app>
I put the onOpen() method at app.component.ts
onOpen() {
this.text = "my pass value";
}
If you want something triggered when the menu is opened you need to handle the ionWillOpen or ionDidOpen events:
ion-menu - Ionic Documentation
An example of this would look like:
<ion-menu (ionWillOpen)="onMenuOpen()" (ionDidOpen)="menuOpened()">
I'm trying to display the radio button data based on user select but it doesn't display anything. Here is my code :
<div ng-app="" ng-init="categoryID">
<ion-list radio-group>
<ion-item>
<ion-label>Category 1</ion-label>
<ion-radio value="category1" ng-model="categoryID"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Category 2</ion-label>
<ion-radio value="category2" ng-model="categoryID"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Category 3</ion-label>
<ion-radio value="category3" ng-model="categoryID"></ion-radio>
</ion-item>
</ion-list>
<p>Category : {{ categoryID }}</p>
</div>
Trying to display like how it display at this url https://codepen.io/terrer-sandman/pen/erMzzQ