javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-10 00:27:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(datetime): add showDefaultTimeLabel property and time-label slot (#23577)

Browse Source 
resolves #23555
This commit is contained in:
Hans Krywalsky
2021-07-07 15:21:13 +02:00
committed by GitHub
parent 55bd1f749b
commit 7ac010943b
8 changed files with 137 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
core/src/components/datetime/datetime.tsx
View File

@ -62,6 +62,7 @@ import {
*
* @slot title - The title of the datetime.
* @slot buttons - The buttons in the datetime.
* @slot time-label - The label for the time selector in the datetime.
*/
@Component({
tag: 'ion-datetime',
@ -307,6 +308,16 @@ export class Datetime implements ComponentInterface {
*/
@Prop() showDefaultButtons = false;
/**
* If `true`, the default "Time" label will be rendered
* for the time selector of the `ion-datetime` component.
* Developers can also use the `time-label` slot
* if they want to customize this label. If a custom
* label is set in the `time-label` slot then the
* default label will not be rendered.
*/
@Prop() showDefaultTimeLabel = true;
/**
* Emitted when the datetime selection was cancelled.
*/
@ -1363,6 +1374,15 @@ export class Datetime implements ComponentInterface {
)
}
private renderTimeLabel() {
const hasSlottedTimeLabel = this.el.querySelector('[slot="time-label"]') !== null;
if (!hasSlottedTimeLabel && !this.showDefaultTimeLabel) { return; }
return (
<slot name="time-label">Time</slot>
);
}
/**
* Render time picker inside of datetime.
* Do not pass color prop to segment on
@ -1376,7 +1396,9 @@ export class Datetime implements ComponentInterface {
const { hours, minutes, am, pm } = generateTime(this.locale, this.workingParts, this.minParts, this.maxParts, this.parsedHourValues, this.parsedMinuteValues);
return (
<div class="datetime-time">
<div class="time-header">Time</div>
<div class="time-header">
{this.renderTimeLabel()}
</div>
<div class="time-body">
<div class="time-base" ref={el => this.timeBaseRef = el}>
<div class="time-wrapper">