-
Notifications
You must be signed in to change notification settings - Fork 3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore: add playgrounds for JP docs (#3004)
- Loading branch information
1 parent
a3ef3b3
commit 78934cd
Showing
14 changed files
with
425 additions
and
0 deletions.
There are no files selected for viewing
3 changes: 3 additions & 0 deletions
3
static/usage/v7/datetime/theming/angular/example_component_html.md
This file contains 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 color="rose"></ion-datetime> | ||
| ``` |
This file contains 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,66 @@ | ||
| ```css | ||
| /* Core CSS required for Ionic components to work properly */ | ||
| @import '~@ionic/angular/css/core.css'; | ||
|
|
||
| /* Basic CSS for apps built with Ionic */ | ||
| @import '~@ionic/angular/css/normalize.css'; | ||
| @import '~@ionic/angular/css/structure.css'; | ||
| @import '~@ionic/angular/css/typography.css'; | ||
| @import '~@ionic/angular/css/display.css'; | ||
|
|
||
| /* Optional CSS utils that can be commented out */ | ||
| @import '~@ionic/angular/css/padding.css'; | ||
| @import '~@ionic/angular/css/float-elements.css'; | ||
| @import '~@ionic/angular/css/text-alignment.css'; | ||
| @import '~@ionic/angular/css/text-transformation.css'; | ||
| @import '~@ionic/angular/css/flex-utils.css'; | ||
|
|
||
| :root { | ||
| --ion-color-rose: #831843; | ||
| --ion-color-rose-rgb: 131, 24, 67; | ||
| --ion-color-rose-contrast: #ffffff; | ||
| --ion-color-rose-contrast-rgb: 255, 255, 255; | ||
| --ion-color-rose-shade: #73153b; | ||
| --ion-color-rose-tint: #8f2f56; | ||
|
|
||
| --ion-text-color: #881337; | ||
| --ion-text-color-rgb: 136, 19, 55; | ||
|
|
||
| --ion-color-step-50: #f9e6e9; | ||
| --ion-color-step-100: #f3dbdf; | ||
| --ion-color-step-150: #edd0d6; | ||
| --ion-color-step-200: #e7c5cd; | ||
| --ion-color-step-250: #e1bac3; | ||
| --ion-color-step-300: #dbaeba; | ||
| --ion-color-step-350: #d5a3b1; | ||
| --ion-color-step-400: #cf98a7; | ||
| --ion-color-step-450: #c98d9e; | ||
| --ion-color-step-500: #c48295; | ||
| --ion-color-step-550: #be778b; | ||
| --ion-color-step-600: #b86c82; | ||
| --ion-color-step-650: #b26178; | ||
| --ion-color-step-700: #ac566f; | ||
| --ion-color-step-750: #a64b66; | ||
| --ion-color-step-800: #a03f5c; | ||
| --ion-color-step-850: #9a3453; | ||
| --ion-color-step-900: #94294a; | ||
| --ion-color-step-950: #8e1e40; | ||
| } | ||
|
|
||
| .ion-color-rose { | ||
| --ion-color-base: var(--ion-color-rose); | ||
| --ion-color-base-rgb: var(--ion-color-rose-rgb); | ||
| --ion-color-contrast: var(--ion-color-rose-contrast); | ||
| --ion-color-contrast-rgb: var(--ion-color-rose-contrast-rgb); | ||
| --ion-color-shade: var(--ion-color-rose-shade); | ||
| --ion-color-tint: var(--ion-color-rose-tint); | ||
| } | ||
|
|
||
| ion-datetime { | ||
| --background: #fff1f2; | ||
| --background-rgb: 255, 241, 242; | ||
|
|
||
| border-radius: 16px; | ||
| box-shadow: rgba(var(--ion-color-rose-rgb), 0.3) 0px 10px 15px -3px; | ||
| } | ||
| ``` |
This file contains 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,76 @@ | ||
| <!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/core@7/dist/ionic/ionic.esm.js"></script> | ||
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" /> | ||
| <style> | ||
| :root, | ||
| .ios body.dark, | ||
| .md body.dark { | ||
| --ion-color-rose: #831843; | ||
| --ion-color-rose-rgb: 131, 24, 67; | ||
| --ion-color-rose-contrast: #ffffff; | ||
| --ion-color-rose-contrast-rgb: 255, 255, 255; | ||
| --ion-color-rose-shade: #73153b; | ||
| --ion-color-rose-tint: #8f2f56; | ||
|
|
||
| --ion-text-color: #881337; | ||
| --ion-text-color-rgb: 136, 19, 55; | ||
|
|
||
| --ion-color-step-50: #f9e6e9; | ||
| --ion-color-step-100: #f3dbdf; | ||
| --ion-color-step-150: #edd0d6; | ||
| --ion-color-step-200: #e7c5cd; | ||
| --ion-color-step-250: #e1bac3; | ||
| --ion-color-step-300: #dbaeba; | ||
| --ion-color-step-350: #d5a3b1; | ||
| --ion-color-step-400: #cf98a7; | ||
| --ion-color-step-450: #c98d9e; | ||
| --ion-color-step-500: #c48295; | ||
| --ion-color-step-550: #be778b; | ||
| --ion-color-step-600: #b86c82; | ||
| --ion-color-step-650: #b26178; | ||
| --ion-color-step-700: #ac566f; | ||
| --ion-color-step-750: #a64b66; | ||
| --ion-color-step-800: #a03f5c; | ||
| --ion-color-step-850: #9a3453; | ||
| --ion-color-step-900: #94294a; | ||
| --ion-color-step-950: #8e1e40; | ||
| } | ||
|
|
||
| .ion-color-rose { | ||
| --ion-color-base: var(--ion-color-rose); | ||
| --ion-color-base-rgb: var(--ion-color-rose-rgb); | ||
| --ion-color-contrast: var(--ion-color-rose-contrast); | ||
| --ion-color-contrast-rgb: var(--ion-color-rose-contrast-rgb); | ||
| --ion-color-shade: var(--ion-color-rose-shade); | ||
| --ion-color-tint: var(--ion-color-rose-tint); | ||
| } | ||
|
|
||
| ion-datetime { | ||
| --background: #fff1f2; | ||
| --background-rgb: 255, 241, 242; | ||
|
|
||
| width: 350px; | ||
|
|
||
| border-radius: 16px; | ||
| box-shadow: rgba(var(--ion-color-rose-rgb), 0.3) 0px 10px 15px -3px; | ||
| } | ||
| </style> | ||
| </head> | ||
|
|
||
| <body> | ||
| <ion-app> | ||
| <ion-content> | ||
| <div class="container"> | ||
| <ion-datetime color="rose"></ion-datetime> | ||
| </div> | ||
| </ion-content> | ||
| </ion-app> | ||
| </body> | ||
| </html> |
This file contains 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 @@ | ||
| # TODO FW-4608 | ||
|
|
||
| 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_global_css from './angular/global_css.md'; | ||
|
|
||
| <Playground | ||
| version="7" | ||
| size="450px" | ||
| 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/global.css': angular_global_css, | ||
| }, | ||
| }, | ||
| }} | ||
| src="usage/v7/datetime/theming/demo.html" | ||
| /> |
This file contains 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,54 @@ | ||
| ```html | ||
| <ion-datetime color="rose"></ion-datetime> | ||
|
|
||
| <style> | ||
| :root { | ||
| --ion-color-rose: #831843; | ||
| --ion-color-rose-rgb: 131, 24, 67; | ||
| --ion-color-rose-contrast: #ffffff; | ||
| --ion-color-rose-contrast-rgb: 255, 255, 255; | ||
| --ion-color-rose-shade: #73153b; | ||
| --ion-color-rose-tint: #8f2f56; | ||
| --ion-text-color: #881337; | ||
| --ion-text-color-rgb: 136, 19, 55; | ||
| --ion-color-step-50: #f9e6e9; | ||
| --ion-color-step-100: #f3dbdf; | ||
| --ion-color-step-150: #edd0d6; | ||
| --ion-color-step-200: #e7c5cd; | ||
| --ion-color-step-250: #e1bac3; | ||
| --ion-color-step-300: #dbaeba; | ||
| --ion-color-step-350: #d5a3b1; | ||
| --ion-color-step-400: #cf98a7; | ||
| --ion-color-step-450: #c98d9e; | ||
| --ion-color-step-500: #c48295; | ||
| --ion-color-step-550: #be778b; | ||
| --ion-color-step-600: #b86c82; | ||
| --ion-color-step-650: #b26178; | ||
| --ion-color-step-700: #ac566f; | ||
| --ion-color-step-750: #a64b66; | ||
| --ion-color-step-800: #a03f5c; | ||
| --ion-color-step-850: #9a3453; | ||
| --ion-color-step-900: #94294a; | ||
| --ion-color-step-950: #8e1e40; | ||
| } | ||
| .ion-color-rose { | ||
| --ion-color-base: var(--ion-color-rose); | ||
| --ion-color-base-rgb: var(--ion-color-rose-rgb); | ||
| --ion-color-contrast: var(--ion-color-rose-contrast); | ||
| --ion-color-contrast-rgb: var(--ion-color-rose-contrast-rgb); | ||
| --ion-color-shade: var(--ion-color-rose-shade); | ||
| --ion-color-tint: var(--ion-color-rose-tint); | ||
| } | ||
| ion-datetime { | ||
| --background: #fff1f2; | ||
| --background-rgb: 255, 241, 242; | ||
| border-radius: 16px; | ||
| box-shadow: rgba(var(--ion-color-rose-rgb), 0.3) 0px 10px 15px -3px; | ||
| } | ||
| </style> | ||
| ``` |
This file contains 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,50 @@ | ||
| ```css | ||
| :root { | ||
| --ion-color-rose: #831843; | ||
| --ion-color-rose-rgb: 131, 24, 67; | ||
| --ion-color-rose-contrast: #ffffff; | ||
| --ion-color-rose-contrast-rgb: 255, 255, 255; | ||
| --ion-color-rose-shade: #73153b; | ||
| --ion-color-rose-tint: #8f2f56; | ||
|
|
||
| --ion-text-color: #881337; | ||
| --ion-text-color-rgb: 136, 19, 55; | ||
|
|
||
| --ion-color-step-50: #f9e6e9; | ||
| --ion-color-step-100: #f3dbdf; | ||
| --ion-color-step-150: #edd0d6; | ||
| --ion-color-step-200: #e7c5cd; | ||
| --ion-color-step-250: #e1bac3; | ||
| --ion-color-step-300: #dbaeba; | ||
| --ion-color-step-350: #d5a3b1; | ||
| --ion-color-step-400: #cf98a7; | ||
| --ion-color-step-450: #c98d9e; | ||
| --ion-color-step-500: #c48295; | ||
| --ion-color-step-550: #be778b; | ||
| --ion-color-step-600: #b86c82; | ||
| --ion-color-step-650: #b26178; | ||
| --ion-color-step-700: #ac566f; | ||
| --ion-color-step-750: #a64b66; | ||
| --ion-color-step-800: #a03f5c; | ||
| --ion-color-step-850: #9a3453; | ||
| --ion-color-step-900: #94294a; | ||
| --ion-color-step-950: #8e1e40; | ||
| } | ||
|
|
||
| .ion-color-rose { | ||
| --ion-color-base: var(--ion-color-rose); | ||
| --ion-color-base-rgb: var(--ion-color-rose-rgb); | ||
| --ion-color-contrast: var(--ion-color-rose-contrast); | ||
| --ion-color-contrast-rgb: var(--ion-color-rose-contrast-rgb); | ||
| --ion-color-shade: var(--ion-color-rose-shade); | ||
| --ion-color-tint: var(--ion-color-rose-tint); | ||
| } | ||
|
|
||
| ion-datetime { | ||
| --background: #fff1f2; | ||
| --background-rgb: 255, 241, 242; | ||
|
|
||
| border-radius: 16px; | ||
| box-shadow: rgba(var(--ion-color-rose-rgb), 0.3) 0px 10px 15px -3px; | ||
| } | ||
| ``` |
This file contains 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,11 @@ | ||
| ```tsx | ||
| import React from 'react'; | ||
| import { IonDatetime } from '@ionic/react'; | ||
|
|
||
| import './main.css'; | ||
|
|
||
| function Example() { | ||
| return <IonDatetime color="rose"></IonDatetime>; | ||
| } | ||
| export default Example; | ||
| ``` |
This file contains 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,65 @@ | ||
| ```html | ||
| <template> | ||
| <ion-datetime color="rose"></ion-datetime> | ||
| </template> | ||
|
|
||
| <script lang="ts"> | ||
| import { IonDatetime } from '@ionic/vue'; | ||
| import { defineComponent } from 'vue'; | ||
| export default defineComponent({ | ||
| components: { IonDatetime }, | ||
| }); | ||
| </script> | ||
|
|
||
| <style> | ||
| :root { | ||
| --ion-color-rose: #831843; | ||
| --ion-color-rose-rgb: 131, 24, 67; | ||
| --ion-color-rose-contrast: #ffffff; | ||
| --ion-color-rose-contrast-rgb: 255, 255, 255; | ||
| --ion-color-rose-shade: #73153b; | ||
| --ion-color-rose-tint: #8f2f56; | ||
| --ion-text-color: #881337; | ||
| --ion-text-color-rgb: 136, 19, 55; | ||
| --ion-color-step-50: #f9e6e9; | ||
| --ion-color-step-100: #f3dbdf; | ||
| --ion-color-step-150: #edd0d6; | ||
| --ion-color-step-200: #e7c5cd; | ||
| --ion-color-step-250: #e1bac3; | ||
| --ion-color-step-300: #dbaeba; | ||
| --ion-color-step-350: #d5a3b1; | ||
| --ion-color-step-400: #cf98a7; | ||
| --ion-color-step-450: #c98d9e; | ||
| --ion-color-step-500: #c48295; | ||
| --ion-color-step-550: #be778b; | ||
| --ion-color-step-600: #b86c82; | ||
| --ion-color-step-650: #b26178; | ||
| --ion-color-step-700: #ac566f; | ||
| --ion-color-step-750: #a64b66; | ||
| --ion-color-step-800: #a03f5c; | ||
| --ion-color-step-850: #9a3453; | ||
| --ion-color-step-900: #94294a; | ||
| --ion-color-step-950: #8e1e40; | ||
| } | ||
| .ion-color-rose { | ||
| --ion-color-base: var(--ion-color-rose); | ||
| --ion-color-base-rgb: var(--ion-color-rose-rgb); | ||
| --ion-color-contrast: var(--ion-color-rose-contrast); | ||
| --ion-color-contrast-rgb: var(--ion-color-rose-contrast-rgb); | ||
| --ion-color-shade: var(--ion-color-rose-shade); | ||
| --ion-color-tint: var(--ion-color-rose-tint); | ||
| } | ||
| ion-datetime { | ||
| --background: #fff1f2; | ||
| --background-rgb: 255, 241, 242; | ||
| border-radius: 16px; | ||
| box-shadow: rgba(var(--ion-color-rose-rgb), 0.3) 0px 10px 15px -3px; | ||
| } | ||
| </style> | ||
| ``` |
This file contains 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-range aria-label="Volume"></ion-range> | ||
| ``` |
This file contains 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,27 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>Range</title> | ||
| <link rel="stylesheet" href="../../../common.css" /> | ||
| <script src="../../../common.js"></script> | ||
| <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script> | ||
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" /> | ||
| <style> | ||
| ion-range { | ||
| max-width: 320px; | ||
| } | ||
| </style> | ||
| </head> | ||
|
|
||
| <body> | ||
| <ion-app> | ||
| <ion-content> | ||
| <div class="container"> | ||
| <ion-range aria-label="Volume"></ion-range> | ||
| </div> | ||
| </ion-content> | ||
| </ion-app> | ||
| </body> | ||
| </html> |
Oops, something went wrong.
78934cdThere 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.
Successfully deployed to the following URLs:
ionic-docs – ./
ionic-docs-gqykycf8t.vercel.app
ionic-docs-ionic1.vercel.app
ionic-docs-git-main-ionic1.vercel.app