Skip to content

Commit b43e71c

Browse files
mapsandappsmapsandapps
authored
docs(spinner): add docs for resizing (#2966)
* docs(spinner): add docs for resizing
1 parent b846359 commit b43e71c

File tree

10 files changed

+139
-0
lines changed

10 files changed

+139
-0
lines changed

‎docs/api/spinner.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,14 @@ import Colors from '@site/static/usage/v7/spinner/theming/colors/index.md';
3737

3838
<Colors />
3939

40+
### Styling
41+
42+
You may use custom CSS to style the spinner. For example, you can resize the spinner by setting the width and height.
43+
44+
import Resizing from '@site/static/usage/v7/spinner/theming/resizing/index.md';
45+
46+
<Resizing />
47+
4048
### CSS Custom Properties
4149

4250
import CSSProps from '@site/static/usage/v7/spinner/theming/css-properties/index.md';

‎static/usage/v7/spinner/theming/resizing/angular/example_component_css.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
```css
2+
ion-spinner {
3+
width: 100px;
4+
height: 100px;
5+
}
6+
```

‎static/usage/v7/spinner/theming/resizing/angular/example_component_html.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
```html
2+
<ion-spinner></ion-spinner>
3+
```

‎static/usage/v7/spinner/theming/resizing/demo.html

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Spinner</title>
7+
<link rel="stylesheet" href="../../../../common.css" />
8+
<script src="../../../../common.js"></script>
9+
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
10+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
11+
12+
<style>
13+
ion-spinner {
14+
width: 100px;
15+
height: 100px;
16+
}
17+
</style>
18+
</head>
19+
20+
<body>
21+
<ion-app>
22+
<ion-content>
23+
<div class="container">
24+
<ion-spinner></ion-spinner>
25+
</div>
26+
</ion-content>
27+
</ion-app>
28+
</body>
29+
</html>

‎static/usage/v7/spinner/theming/resizing/index.md

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import Playground from '@site/src/components/global/Playground';
2+
3+
import javascript from './javascript.md';
4+
5+
import react_main_tsx from './react/main_tsx.md';
6+
import react_main_css from './react/main_css.md';
7+
8+
import vue from './vue.md';
9+
10+
import angular_example_component_html from './angular/example_component_html.md';
11+
import angular_example_component_css from './angular/example_component_css.md';
12+
13+
<Playground
14+
version="6"
15+
code={{
16+
javascript,
17+
react: {
18+
files: {
19+
'src/main.tsx': react_main_tsx,
20+
'src/main.css': react_main_css,
21+
},
22+
},
23+
vue,
24+
angular: {
25+
files: {
26+
'src/app/example.component.html': angular_example_component_html,
27+
'src/app/example.component.css': angular_example_component_css,
28+
},
29+
},
30+
}}
31+
src="usage/v7/spinner/theming/resizing/demo.html"
32+
/>

‎static/usage/v7/spinner/theming/resizing/javascript.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
```html
2+
<ion-spinner></ion-spinner>
3+
4+
<style>
5+
ion-spinner {
6+
width: 100px;
7+
height: 100px;
8+
}
9+
</style>
10+
```

‎static/usage/v7/spinner/theming/resizing/react.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
```tsx
2+
import React from 'react';
3+
import { IonSpinner } from '@ionic/react';
4+
5+
function Example() {
6+
return <IonSpinner></IonSpinner>;
7+
}
8+
export default Example;
9+
```

‎static/usage/v7/spinner/theming/resizing/react/main_css.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
```css
2+
ion-spinner {
3+
width: 100px;
4+
height: 100px;
5+
}
6+
```

‎static/usage/v7/spinner/theming/resizing/react/main_tsx.md

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
```tsx
2+
import React from 'react';
3+
import { IonSpinner } from '@ionic/react';
4+
5+
import './main.css';
6+
7+
function Example() {
8+
return (
9+
<>
10+
<IonSpinner></IonSpinner>
11+
</>
12+
);
13+
}
14+
export default Example;
15+
```

‎static/usage/v7/spinner/theming/resizing/vue.md

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
```html
2+
<template>
3+
<ion-spinner></ion-spinner>
4+
</template>
5+
6+
<script lang="ts">
7+
import { IonSpinner } from '@ionic/vue';
8+
import { defineComponent } from 'vue';
9+
10+
export default defineComponent({
11+
components: { IonSpinner },
12+
});
13+
</script>
14+
15+
<style scoped>
16+
ion-spinner {
17+
width: 100px;
18+
height: 100px;
19+
}
20+
</style>
21+
```

0 commit comments

Comments
 (0)