-
Notifications
You must be signed in to change notification settings - Fork 3.1k
docs(datetime): adds playground for styling calendar days using shadow parts #3101
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
Merged
Merged
Changes from 6 commits
Commits
Show all changes
10 commits
Select commit
Hold shift + click to select a range
df5a823
docs(datetime): add playground for customizing calendar days
brandyscarney c81f746
chore: update ionic version for demos
brandyscarney 9b64821
style: lint
brandyscarney 733626f
docs(datetime): update styling test to remove substr
brandyscarney f419383
docs(datetime): copy editing
brandyscarney fa730ff
docs(datetime): fix angular demos where ViewEncapsulation needs to be…
brandyscarney 41b0908
docs(datetime): update css for datetime to combine the focus states
brandyscarney 2a80bf6
Revert "chore: update ionic version for demos"
brandyscarney b32d1db
docs: revert version change
brandyscarney 398e697
style: lint
brandyscarney File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,6 @@ | ||
| { | ||
| "dependencies": { | ||
| "@ionic/angular": "^7.0.0", | ||
| "@ionic/core": "^7.0.0" | ||
| "@ionic/angular": "7.3.1-dev.11692914300.171273b6", | ||
| "@ionic/core": "7.3.1-dev.11692914300.171273b6" | ||
| } | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,5 @@ | ||
| { | ||
| "dependencies": { | ||
| "@ionic/core": "^7.0.0" | ||
| "@ionic/core": "7.3.1-dev.11692914300.171273b6" | ||
| } | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
52 changes: 52 additions & 0 deletions
52
static/usage/v7/datetime/styling/calendar-days/angular/example_component_css.md
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| ```css | ||
| /* | ||
| * Custom Datetime Day Parts | ||
| * ------------------------------------------- | ||
| */ | ||
|
|
||
| ion-datetime::part(calendar-day) { | ||
| color: #da5296; | ||
|
|
||
| margin: 2px 0; | ||
| } | ||
|
|
||
| ion-datetime::part(calendar-day today) { | ||
| color: #8462d1; | ||
| } | ||
|
|
||
| /* | ||
| * Custom Material Design Datetime Day Parts | ||
| * ------------------------------------------- | ||
| */ | ||
|
|
||
| ion-datetime.md::part(calendar-day):focus { | ||
| background-color: rgb(154 209 98 / 0.2); | ||
| box-shadow: 0px 0px 0px 4px rgb(154 209 98 / 0.2); | ||
| } | ||
|
|
||
| ion-datetime.md::part(calendar-day active), | ||
| ion-datetime.md::part(calendar-day active):focus { | ||
| background-color: #9ad162; | ||
| border-color: #9ad162; | ||
| color: #fff; | ||
| } | ||
|
|
||
| ion-datetime.md::part(calendar-day today) { | ||
| border-color: #8462d1; | ||
| } | ||
|
|
||
| /* | ||
| * Custom iOS Datetime Day Parts | ||
| * ------------------------------------------- | ||
| */ | ||
|
|
||
| ion-datetime.ios::part(calendar-day):focus { | ||
| background-color: rgb(154 209 98 / 0.2); | ||
| } | ||
|
|
||
| ion-datetime.ios::part(calendar-day active), | ||
| ion-datetime.ios::part(calendar-day active):focus { | ||
| background-color: rgb(154 209 98 / 0.2); | ||
| color: #9ad162; | ||
| } | ||
| ``` |
3 changes: 3 additions & 0 deletions
3
static/usage/v7/datetime/styling/calendar-days/angular/example_component_html.md
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| ```html | ||
| <ion-datetime presentation="date" [(ngModel)]="datetime"></ion-datetime> | ||
brandyscarney marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| ``` | ||
36 changes: 36 additions & 0 deletions
36
static/usage/v7/datetime/styling/calendar-days/angular/example_component_ts.md
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| ```ts | ||
| import { Component, OnInit, ViewEncapsulation } from '@angular/core'; | ||
|
|
||
| // ViewEncapsulation is turned off for this demo due to | ||
| // a lack of support for styling multiple css shadow parts | ||
| // See https://github.com/angular/angular/issues/22515 | ||
| @Component({ | ||
| selector: 'app-example', | ||
| templateUrl: 'example.component.html', | ||
| styleUrls: ['example.component.css'], | ||
| encapsulation: ViewEncapsulation.None | ||
| }) | ||
| export class ExampleComponent implements OnInit { | ||
| public datetime; | ||
|
|
||
| ngOnInit() { | ||
| const date = new Date(); | ||
|
|
||
| // Set the value of the datetime to 2 days | ||
| // before the current day | ||
| let dayChange = -2; | ||
|
|
||
| // If the day we are going to set the value to | ||
| // is in the previous month then set the day 2 days | ||
| // later instead so it remains in the same month | ||
| if (date.getDate() + dayChange <= 0) { | ||
| dayChange = -dayChange; | ||
| } | ||
|
|
||
| // Set the value of the datetime to the day | ||
| // calculated above | ||
| date.setDate(date.getDate() + dayChange); | ||
| this.datetime = date.toISOString(); | ||
| } | ||
| } | ||
| ``` |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,97 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>Datetime</title> | ||
| <link rel="stylesheet" href="../../../../common.css" /> | ||
| <script src="../../../../common.js"></script> | ||
| <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/[email protected]/dist/ionic/ionic.esm.js"></script> | ||
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/[email protected]/css/ionic.bundle.css" /> | ||
|
|
||
| <style> | ||
| /* | ||
| * Custom Datetime Day Parts | ||
| * ------------------------------------------- | ||
| */ | ||
|
|
||
| ion-datetime::part(calendar-day) { | ||
| color: #da5296; | ||
|
|
||
| margin: 2px 0; | ||
| } | ||
|
|
||
| ion-datetime::part(calendar-day today) { | ||
| color: #8462d1; | ||
| } | ||
|
|
||
| /* | ||
| * Custom Material Design Datetime Day Parts | ||
| * ------------------------------------------- | ||
| */ | ||
|
|
||
| ion-datetime.md::part(calendar-day):focus { | ||
| background-color: rgb(154 209 98 / 0.2); | ||
| box-shadow: 0px 0px 0px 4px rgb(154 209 98 / 0.2); | ||
| } | ||
|
|
||
| ion-datetime.md::part(calendar-day active), | ||
| ion-datetime.md::part(calendar-day active):focus { | ||
| background-color: #9ad162; | ||
| border-color: #9ad162; | ||
| color: #fff; | ||
| } | ||
|
|
||
| ion-datetime.md::part(calendar-day today) { | ||
| border-color: #8462d1; | ||
| } | ||
|
|
||
| /* | ||
| * Custom iOS Datetime Day Parts | ||
| * ------------------------------------------- | ||
| */ | ||
|
|
||
| ion-datetime.ios::part(calendar-day):focus { | ||
| background-color: rgb(154 209 98 / 0.2); | ||
| } | ||
|
|
||
| ion-datetime.ios::part(calendar-day active), | ||
| ion-datetime.ios::part(calendar-day active):focus { | ||
| background-color: rgb(154 209 98 / 0.2); | ||
| color: #9ad162; | ||
| } | ||
| </style> | ||
| </head> | ||
|
|
||
| <body> | ||
| <ion-app> | ||
| <ion-content> | ||
| <div class="container"> | ||
| <ion-datetime presentation="date"></ion-datetime> | ||
| </div> | ||
| </ion-content> | ||
| </ion-app> | ||
|
|
||
| <script> | ||
| const datetime = document.querySelector('ion-datetime'); | ||
|
|
||
| const date = new Date(); | ||
|
|
||
| // Set the value of the datetime to 2 days | ||
| // before the current day | ||
| let dayChange = -2; | ||
|
|
||
| // If the day we are going to set the value to | ||
| // is in the previous month then set the day 2 days | ||
| // later instead so it remains in the same month | ||
| if (date.getDate() + dayChange <= 0) { | ||
| dayChange = -dayChange; | ||
| } | ||
|
|
||
| // Set the value of the datetime to the day | ||
| // calculated above | ||
| date.setDate(date.getDate() + dayChange); | ||
| datetime.value = date.toISOString(); | ||
| </script> | ||
| </body> | ||
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| import Playground from '@site/src/components/global/Playground'; | ||
|
|
||
| import javascript from './javascript.md'; | ||
|
|
||
| import react_main_tsx from './react/main_tsx.md'; | ||
| import react_main_css from './react/main_css.md'; | ||
|
|
||
| import vue from './vue.md'; | ||
|
|
||
| import angular_example_component_html from './angular/example_component_html.md'; | ||
| import angular_example_component_css from './angular/example_component_css.md'; | ||
| import angular_example_component_ts from './angular/example_component_ts.md'; | ||
|
|
||
| <Playground | ||
| version="7" | ||
| code={{ | ||
| javascript, | ||
| react: { | ||
| files: { | ||
| 'src/main.tsx': react_main_tsx, | ||
| 'src/main.css': react_main_css, | ||
| }, | ||
| }, | ||
| vue, | ||
| angular: { | ||
| files: { | ||
| 'src/app/example.component.html': angular_example_component_html, | ||
| 'src/app/example.component.css': angular_example_component_css, | ||
| 'src/app/example.component.ts': angular_example_component_ts, | ||
| }, | ||
| }, | ||
| }} | ||
| src="usage/v7/datetime/styling/calendar-days/demo.html" | ||
| size="medium" | ||
| /> |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.