diff --git a/static/usage/v7/item/theming/input-highlight/angular/example_component_css.md b/static/usage/v7/item/theming/input-highlight/angular/example_component_css.md new file mode 100644 index 00000000000..5d7cfd49c7c --- /dev/null +++ b/static/usage/v7/item/theming/input-highlight/angular/example_component_css.md @@ -0,0 +1,8 @@ +```css +ion-item { + --highlight-height: 2px; + --highlight-color-focused: #43e7f3; + --highlight-color-valid: #6f58d8; + --highlight-color-invalid: #ff46be; +} +``` diff --git a/static/usage/v7/item/theming/input-highlight/angular/example_component_html.md b/static/usage/v7/item/theming/input-highlight/angular/example_component_html.md new file mode 100644 index 00000000000..59a5e5928a9 --- /dev/null +++ b/static/usage/v7/item/theming/input-highlight/angular/example_component_html.md @@ -0,0 +1,16 @@ +```html + + Custom Input Highlight: Focused + + + + + Custom Input Highlight: Focused & Valid + + + + + Custom Input Highlight: Focused & Invalid + + +``` diff --git a/static/usage/v7/item/theming/input-highlight/demo.html b/static/usage/v7/item/theming/input-highlight/demo.html new file mode 100644 index 00000000000..c112dd699fe --- /dev/null +++ b/static/usage/v7/item/theming/input-highlight/demo.html @@ -0,0 +1,48 @@ + + + + + + Item + + + + + + + + + + + +
+ + Custom Input Highlight: Focused + + + + + Custom Input Highlight: Focused & Valid + + + + + Custom Input Highlight: Focused & Invalid + + +
+ + + + diff --git a/static/usage/v7/item/theming/input-highlight/index.md b/static/usage/v7/item/theming/input-highlight/index.md new file mode 100644 index 00000000000..4782bfdd6a5 --- /dev/null +++ b/static/usage/v7/item/theming/input-highlight/index.md @@ -0,0 +1,33 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_css from './react/main_css.md'; +import react_main_tsx from './react/main_tsx.md'; + +import vue from './vue.md'; + +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_html from './angular/example_component_html.md'; + + diff --git a/static/usage/v7/item/theming/input-highlight/javascript.md b/static/usage/v7/item/theming/input-highlight/javascript.md new file mode 100644 index 00000000000..b26cebd530e --- /dev/null +++ b/static/usage/v7/item/theming/input-highlight/javascript.md @@ -0,0 +1,25 @@ +```html + + Custom Input Highlight: Focused + + + + + Custom Input Highlight: Focused & Valid + + + + + Custom Input Highlight: Focused & Invalid + + + + +``` diff --git a/static/usage/v7/item/theming/input-highlight/react/main_css.md b/static/usage/v7/item/theming/input-highlight/react/main_css.md new file mode 100644 index 00000000000..5d7cfd49c7c --- /dev/null +++ b/static/usage/v7/item/theming/input-highlight/react/main_css.md @@ -0,0 +1,8 @@ +```css +ion-item { + --highlight-height: 2px; + --highlight-color-focused: #43e7f3; + --highlight-color-valid: #6f58d8; + --highlight-color-invalid: #ff46be; +} +``` diff --git a/static/usage/v7/item/theming/input-highlight/react/main_tsx.md b/static/usage/v7/item/theming/input-highlight/react/main_tsx.md new file mode 100644 index 00000000000..67d46a73267 --- /dev/null +++ b/static/usage/v7/item/theming/input-highlight/react/main_tsx.md @@ -0,0 +1,28 @@ +```tsx +import React from 'react'; +import { IonInput, IonItem, IonLabel } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + + Custom Input Highlight: Focused + + + + + Custom Input Highlight: Focused & Valid + + + + + Custom Input Highlight: Focused & Invalid + + + + ); +} +export default Example; +``` diff --git a/static/usage/v7/item/theming/input-highlight/vue.md b/static/usage/v7/item/theming/input-highlight/vue.md new file mode 100644 index 00000000000..76bb289ee00 --- /dev/null +++ b/static/usage/v7/item/theming/input-highlight/vue.md @@ -0,0 +1,35 @@ +```html + + + + + +``` diff --git a/static/usage/v7/label/input/angular.md b/static/usage/v7/label/input/angular.md new file mode 100644 index 00000000000..75278afd44b --- /dev/null +++ b/static/usage/v7/label/input/angular.md @@ -0,0 +1,31 @@ +```html + + Default Label + + + + + Fixed Label + + + + + Floating Label + + + + + Stacked Label + + + + + Toggle + + + + + + Checkbox + +``` diff --git a/static/usage/v7/label/input/demo.html b/static/usage/v7/label/input/demo.html new file mode 100644 index 00000000000..f35f297e34b --- /dev/null +++ b/static/usage/v7/label/input/demo.html @@ -0,0 +1,56 @@ + + + + + + Label + + + + + + + + + + + +
+ + Default Label + + + + + Fixed Label + + + + + Floating Label + + + + + Stacked Label + + + + + Toggle + + + + + + Checkbox + +
+ + + + diff --git a/static/usage/v7/label/input/index.md b/static/usage/v7/label/input/index.md new file mode 100644 index 00000000000..a1e95d3ab95 --- /dev/null +++ b/static/usage/v7/label/input/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v7/label/input/javascript.md b/static/usage/v7/label/input/javascript.md new file mode 100644 index 00000000000..75278afd44b --- /dev/null +++ b/static/usage/v7/label/input/javascript.md @@ -0,0 +1,31 @@ +```html + + Default Label + + + + + Fixed Label + + + + + Floating Label + + + + + Stacked Label + + + + + Toggle + + + + + + Checkbox + +``` diff --git a/static/usage/v7/label/input/react.md b/static/usage/v7/label/input/react.md new file mode 100644 index 00000000000..ff11fd1f176 --- /dev/null +++ b/static/usage/v7/label/input/react.md @@ -0,0 +1,41 @@ +```tsx +import React from 'react'; +import { IonCheckbox, IonInput, IonItem, IonLabel, IonToggle } from '@ionic/react'; + +function Example() { + return ( + <> + + Default Label + + + + + Fixed Label + + + + + Floating Label + + + + + Stacked Label + + + + + Toggle + + + + + + Checkbox + + + ); +} +export default Example; +``` diff --git a/static/usage/v7/label/input/vue.md b/static/usage/v7/label/input/vue.md new file mode 100644 index 00000000000..6f9443e1a5e --- /dev/null +++ b/static/usage/v7/label/input/vue.md @@ -0,0 +1,41 @@ +```html + + + +```