-
Notifications
You must be signed in to change notification settings - Fork 13.5k
feat(select): add label slot #27468
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(select): add label slot #27468
Conversation
|
const labelSlot = el.querySelector('[slot="label"]'); | ||
|
||
if (labelSlot !== null) { | ||
return labelSlot.textContent; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Passing this as-is to the alert header gives odd results when using a more complicated label structure. For example, opening this:
<ion-select placeholder="Select">
<div slot="label">
<div>Select a Fruit</div>
<ion-note>This will be remembered.</ion-note>
</div>
<ion-select-option value="apple">Apple</ion-select-option>
</ion-select>
Leads to this:
While I can't think of a good way to have Ionic solve this automatically, I noticed you can overwrite it manually using interfaceOptions
, and that still works:
<ion-select placeholder="Select" id="weird-label">
<div slot="label">
<div>Select a Fruit</div>
<ion-note>This will be remembered.</ion-note>
</div>
<ion-select-option value="apple">Apple</ion-select-option>
</ion-select>
<script>
const select = document.querySelector('#weird-label');
select.interfaceOptions = {
header: 'Select a Fruit'
};
</script>
Maybe we'll just want to document this pattern and leave it as-is?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yep, I can make sure this is documented.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thank you!
Issue number: N/A
What is the current behavior?
ion-select
has no way to accept a custom HTML labelWhat is the new behavior?
label
slot toion-select
textContent
of the label slot (if provided) to be the default header onion-alert
. This matches the behavior of passing thelabel
prop contents to be the default header onion-alert
.Note: This PR does not account for the notch rendering with
fill="outline"
that will be handled in a separate PR.Does this introduce a breaking change?
Other information