From 137de3bc16ffdfd56fa5127a255ae1c52bef4ab8 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Fri, 2 Sep 2022 17:19:40 +0000 Subject: [PATCH 1/2] docs(checkbox): add theming playground --- docs/api/checkbox.md | 4 +- .../theming/angular/example_component_css.md | 11 ++++++ .../theming/angular/example_component_html.md | 6 +++ static/usage/checkbox/theming/demo.html | 35 ++++++++++++++++++ static/usage/checkbox/theming/index.md | 31 ++++++++++++++++ static/usage/checkbox/theming/javascript.md | 18 +++++++++ .../usage/checkbox/theming/react/main_css.md | 11 ++++++ .../usage/checkbox/theming/react/main_tsx.md | 20 ++++++++++ static/usage/checkbox/theming/vue.md | 37 +++++++++++++++++++ 9 files changed, 172 insertions(+), 1 deletion(-) create mode 100644 static/usage/checkbox/theming/angular/example_component_css.md create mode 100644 static/usage/checkbox/theming/angular/example_component_html.md create mode 100644 static/usage/checkbox/theming/demo.html create mode 100644 static/usage/checkbox/theming/index.md create mode 100644 static/usage/checkbox/theming/javascript.md create mode 100644 static/usage/checkbox/theming/react/main_css.md create mode 100644 static/usage/checkbox/theming/react/main_tsx.md create mode 100644 static/usage/checkbox/theming/vue.md diff --git a/docs/api/checkbox.md b/docs/api/checkbox.md index 33d199d9d89..490a0606d49 100644 --- a/docs/api/checkbox.md +++ b/docs/api/checkbox.md @@ -36,7 +36,9 @@ import Indeterminate from '@site/static/usage/checkbox/indeterminate/index.md'; ## Theming -TODO Playground +import Theming from '@site/static/usage/checkbox/theming/index.md'; + + ## Interfaces diff --git a/static/usage/checkbox/theming/angular/example_component_css.md b/static/usage/checkbox/theming/angular/example_component_css.md new file mode 100644 index 00000000000..41ee108896d --- /dev/null +++ b/static/usage/checkbox/theming/angular/example_component_css.md @@ -0,0 +1,11 @@ +```css +ion-checkbox { + --size: 32px; + --background-checked: #6815ec; +} + +ion-checkbox::part(container) { + border-radius: 6px; + border: 2px solid #6815ec; +} +``` \ No newline at end of file diff --git a/static/usage/checkbox/theming/angular/example_component_html.md b/static/usage/checkbox/theming/angular/example_component_html.md new file mode 100644 index 00000000000..a54828724aa --- /dev/null +++ b/static/usage/checkbox/theming/angular/example_component_html.md @@ -0,0 +1,6 @@ +```html + + + Themed checkbox + +``` \ No newline at end of file diff --git a/static/usage/checkbox/theming/demo.html b/static/usage/checkbox/theming/demo.html new file mode 100644 index 00000000000..7b6ccd2db1a --- /dev/null +++ b/static/usage/checkbox/theming/demo.html @@ -0,0 +1,35 @@ + + + + + + Checkbox + + + + + + + + + +
+ + + Themed checkbox + +
+ + + + diff --git a/static/usage/checkbox/theming/index.md b/static/usage/checkbox/theming/index.md new file mode 100644 index 00000000000..1fea21694a3 --- /dev/null +++ b/static/usage/checkbox/theming/index.md @@ -0,0 +1,31 @@ +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'; + + diff --git a/static/usage/checkbox/theming/javascript.md b/static/usage/checkbox/theming/javascript.md new file mode 100644 index 00000000000..18b9c7629ff --- /dev/null +++ b/static/usage/checkbox/theming/javascript.md @@ -0,0 +1,18 @@ +```html + + + Themed checkbox + + + +``` diff --git a/static/usage/checkbox/theming/react/main_css.md b/static/usage/checkbox/theming/react/main_css.md new file mode 100644 index 00000000000..41ee108896d --- /dev/null +++ b/static/usage/checkbox/theming/react/main_css.md @@ -0,0 +1,11 @@ +```css +ion-checkbox { + --size: 32px; + --background-checked: #6815ec; +} + +ion-checkbox::part(container) { + border-radius: 6px; + border: 2px solid #6815ec; +} +``` \ No newline at end of file diff --git a/static/usage/checkbox/theming/react/main_tsx.md b/static/usage/checkbox/theming/react/main_tsx.md new file mode 100644 index 00000000000..28784175181 --- /dev/null +++ b/static/usage/checkbox/theming/react/main_tsx.md @@ -0,0 +1,20 @@ +```tsx +import React from 'react'; +import { + IonCheckbox, + IonItem, + IonLabel +} from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + + + Themed checkbox + + ); +} +export default Example; +``` \ No newline at end of file diff --git a/static/usage/checkbox/theming/vue.md b/static/usage/checkbox/theming/vue.md new file mode 100644 index 00000000000..aec6025e5a6 --- /dev/null +++ b/static/usage/checkbox/theming/vue.md @@ -0,0 +1,37 @@ +```html + + + + + +``` From b8c556b66a809003cf19fe1a82b7284d202971f2 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Fri, 2 Sep 2022 17:58:44 +0000 Subject: [PATCH 2/2] chore(): remove extra whitespace --- static/usage/checkbox/theming/angular/example_component_css.md | 2 +- static/usage/checkbox/theming/demo.html | 2 +- static/usage/checkbox/theming/javascript.md | 2 +- static/usage/checkbox/theming/react/main_css.md | 2 +- static/usage/checkbox/theming/vue.md | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/static/usage/checkbox/theming/angular/example_component_css.md b/static/usage/checkbox/theming/angular/example_component_css.md index 41ee108896d..c8fbfdb86d8 100644 --- a/static/usage/checkbox/theming/angular/example_component_css.md +++ b/static/usage/checkbox/theming/angular/example_component_css.md @@ -6,6 +6,6 @@ ion-checkbox { ion-checkbox::part(container) { border-radius: 6px; - border: 2px solid #6815ec; + border: 2px solid #6815ec; } ``` \ No newline at end of file diff --git a/static/usage/checkbox/theming/demo.html b/static/usage/checkbox/theming/demo.html index 7b6ccd2db1a..224dedb9800 100644 --- a/static/usage/checkbox/theming/demo.html +++ b/static/usage/checkbox/theming/demo.html @@ -16,7 +16,7 @@ ion-checkbox::part(container) { border-radius: 6px; - border: 2px solid #6815ec; + border: 2px solid #6815ec; } diff --git a/static/usage/checkbox/theming/javascript.md b/static/usage/checkbox/theming/javascript.md index 18b9c7629ff..5ee2949135b 100644 --- a/static/usage/checkbox/theming/javascript.md +++ b/static/usage/checkbox/theming/javascript.md @@ -12,7 +12,7 @@ ion-checkbox::part(container) { border-radius: 6px; - border: 2px solid #6815ec; + border: 2px solid #6815ec; } ``` diff --git a/static/usage/checkbox/theming/react/main_css.md b/static/usage/checkbox/theming/react/main_css.md index 41ee108896d..c8fbfdb86d8 100644 --- a/static/usage/checkbox/theming/react/main_css.md +++ b/static/usage/checkbox/theming/react/main_css.md @@ -6,6 +6,6 @@ ion-checkbox { ion-checkbox::part(container) { border-radius: 6px; - border: 2px solid #6815ec; + border: 2px solid #6815ec; } ``` \ No newline at end of file diff --git a/static/usage/checkbox/theming/vue.md b/static/usage/checkbox/theming/vue.md index aec6025e5a6..3bb88c82577 100644 --- a/static/usage/checkbox/theming/vue.md +++ b/static/usage/checkbox/theming/vue.md @@ -31,7 +31,7 @@ ion-checkbox::part(container) { border-radius: 6px; - border: 2px solid #6815ec; + border: 2px solid #6815ec; } ```