diff --git a/docs/api/spinner.md b/docs/api/spinner.md index dc5b55a36c3..a9af39e6dc3 100644 --- a/docs/api/spinner.md +++ b/docs/api/spinner.md @@ -37,6 +37,14 @@ import Colors from '@site/static/usage/v7/spinner/theming/colors/index.md'; +### Styling + +You may use custom CSS to style the spinner. For example, you can resize the spinner by setting the width and height. + +import Resizing from '@site/static/usage/v7/spinner/theming/resizing/index.md'; + + + ### CSS Custom Properties import CSSProps from '@site/static/usage/v7/spinner/theming/css-properties/index.md'; diff --git a/static/usage/v7/spinner/theming/resizing/angular/example_component_css.md b/static/usage/v7/spinner/theming/resizing/angular/example_component_css.md new file mode 100644 index 00000000000..845d1a9af47 --- /dev/null +++ b/static/usage/v7/spinner/theming/resizing/angular/example_component_css.md @@ -0,0 +1,6 @@ +```css +ion-spinner { + width: 100px; + height: 100px; +} +``` diff --git a/static/usage/v7/spinner/theming/resizing/angular/example_component_html.md b/static/usage/v7/spinner/theming/resizing/angular/example_component_html.md new file mode 100644 index 00000000000..4b3b8d665b4 --- /dev/null +++ b/static/usage/v7/spinner/theming/resizing/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v7/spinner/theming/resizing/demo.html b/static/usage/v7/spinner/theming/resizing/demo.html new file mode 100644 index 00000000000..acebb2ef5d2 --- /dev/null +++ b/static/usage/v7/spinner/theming/resizing/demo.html @@ -0,0 +1,29 @@ + + + + + + Spinner + + + + + + + + + + + +
+ +
+
+
+ + diff --git a/static/usage/v7/spinner/theming/resizing/index.md b/static/usage/v7/spinner/theming/resizing/index.md new file mode 100644 index 00000000000..5d4b142092e --- /dev/null +++ b/static/usage/v7/spinner/theming/resizing/index.md @@ -0,0 +1,32 @@ +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/v7/spinner/theming/resizing/javascript.md b/static/usage/v7/spinner/theming/resizing/javascript.md new file mode 100644 index 00000000000..9c875eb4951 --- /dev/null +++ b/static/usage/v7/spinner/theming/resizing/javascript.md @@ -0,0 +1,10 @@ +```html + + + +``` diff --git a/static/usage/v7/spinner/theming/resizing/react.md b/static/usage/v7/spinner/theming/resizing/react.md new file mode 100644 index 00000000000..117d82c8541 --- /dev/null +++ b/static/usage/v7/spinner/theming/resizing/react.md @@ -0,0 +1,9 @@ +```tsx +import React from 'react'; +import { IonSpinner } from '@ionic/react'; + +function Example() { + return ; +} +export default Example; +``` diff --git a/static/usage/v7/spinner/theming/resizing/react/main_css.md b/static/usage/v7/spinner/theming/resizing/react/main_css.md new file mode 100644 index 00000000000..845d1a9af47 --- /dev/null +++ b/static/usage/v7/spinner/theming/resizing/react/main_css.md @@ -0,0 +1,6 @@ +```css +ion-spinner { + width: 100px; + height: 100px; +} +``` diff --git a/static/usage/v7/spinner/theming/resizing/react/main_tsx.md b/static/usage/v7/spinner/theming/resizing/react/main_tsx.md new file mode 100644 index 00000000000..f990cb1e738 --- /dev/null +++ b/static/usage/v7/spinner/theming/resizing/react/main_tsx.md @@ -0,0 +1,15 @@ +```tsx +import React from 'react'; +import { IonSpinner } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + + + ); +} +export default Example; +``` diff --git a/static/usage/v7/spinner/theming/resizing/vue.md b/static/usage/v7/spinner/theming/resizing/vue.md new file mode 100644 index 00000000000..52ae17f7694 --- /dev/null +++ b/static/usage/v7/spinner/theming/resizing/vue.md @@ -0,0 +1,21 @@ +```html + + + + + +```