+
Animal Facts
+
+
Rhinoceros
+
+
The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the Greek words rhino meaning ânoseâ and ceros meaning âhorn.â The number of horns that a rhino has varies on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while the Javan rhino and one-horned rhino have one horn.
+
+
Sea Turtle
+
+
Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for swimming, so they are vulnerable while on land.
+
+
Giraffe
+
+
Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the giraffe a âcamel-leopard.â Thatâs where the giraffeâs species name âcamelopardalisâ comes from.
+
+
Elephant
+
+
Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephantsâ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up water for drinking or bathing.
+
+
Dolphin
+
+
Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+
+
+```
diff --git a/static/usage/v6/header/custom-scroll-target/react/main_css.md b/static/usage/v6/header/custom-scroll-target/react/main_css.md
new file mode 100644
index 00000000000..5fe74c95f50
--- /dev/null
+++ b/static/usage/v6/header/custom-scroll-target/react/main_css.md
@@ -0,0 +1,10 @@
+```css
+.ion-content-scroll-host {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 100%;
+ width: 100%;
+ overflow-y: auto;
+}
+```
diff --git a/static/usage/v6/header/custom-scroll-target/react/main_tsx.md b/static/usage/v6/header/custom-scroll-target/react/main_tsx.md
new file mode 100644
index 00000000000..bf6d13f26ec
--- /dev/null
+++ b/static/usage/v6/header/custom-scroll-target/react/main_tsx.md
@@ -0,0 +1,44 @@
+```tsx
+import React from 'react';
+import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+
+
+ Header
+
+
+
+
+
Animal Facts
+
+
Rhinoceros
+
+
The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the Greek words rhino meaning ânoseâ and ceros meaning âhorn.â The number of horns that a rhino has varies on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while the Javan rhino and one-horned rhino have one horn.
+
+
Sea Turtle
+
+
Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for swimming, so they are vulnerable while on land.
+
+
Giraffe
+
+
Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the giraffe a âcamel-leopard.â Thatâs where the giraffeâs species name âcamelopardalisâ comes from.
+
+
Elephant
+
+
Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephantsâ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up water for drinking or bathing.
+
+
Dolphin
+
+
Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/header/custom-scroll-target/vue.md b/static/usage/v6/header/custom-scroll-target/vue.md
new file mode 100644
index 00000000000..73565d9ab18
--- /dev/null
+++ b/static/usage/v6/header/custom-scroll-target/vue.md
@@ -0,0 +1,55 @@
+```html
+
+
+
+ Header
+
+
+
+
+
Animal Facts
+
+
Rhinoceros
+
+
The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the Greek words rhino meaning ânoseâ and ceros meaning âhorn.â The number of horns that a rhino has varies on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while the Javan rhino and one-horned rhino have one horn.
+
+
Sea Turtle
+
+
Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for swimming, so they are vulnerable while on land.
+
+
Giraffe
+
+
Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the giraffe a âcamel-leopard.â Thatâs where the giraffeâs species name âcamelopardalisâ comes from.
+
+
Elephant
+
+
Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephantsâ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up water for drinking or bathing.
+
+
Dolphin
+
+
Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+
+
+
+
+```
diff --git a/static/usage/v6/header/fade/angular.md b/static/usage/v6/header/fade/angular.md
new file mode 100644
index 00000000000..72e55ffc58c
--- /dev/null
+++ b/static/usage/v6/header/fade/angular.md
@@ -0,0 +1,30 @@
+```html
+
+
+ Header
+
+
+
+ Animal Facts
+
+ Rhinoceros
+
+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the Greek words rhino meaning ânoseâ and ceros meaning âhorn.â The number of horns that a rhino has varies on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while the Javan rhino and one-horned rhino have one horn.
+
+ Sea Turtle
+
+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for swimming, so they are vulnerable while on land.
+
+ Giraffe
+
+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the giraffe a âcamel-leopard.â Thatâs where the giraffeâs species name âcamelopardalisâ comes from.
+
+ Elephant
+
+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephantsâ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up water for drinking or bathing.
+
+ Dolphin
+
+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+```
diff --git a/static/usage/v6/header/fade/demo.html b/static/usage/v6/header/fade/demo.html
new file mode 100644
index 00000000000..06b24cc2eb4
--- /dev/null
+++ b/static/usage/v6/header/fade/demo.html
@@ -0,0 +1,65 @@
+
+
+
+
+
+
+
Header
+
+
+
+
+
+
+
+
+
+
+
+ Header
+
+
+
+ Animal Facts
+
+ Rhinoceros
+
+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from
+ the Greek words rhino meaning ânoseâ and ceros meaning âhorn.â The number of horns that a rhino has varies on
+ the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two
+ horns, while the Javan rhino and one-horned rhino have one horn.
+
+ Sea Turtle
+
+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other
+ turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are
+ adapted for swimming, so they are vulnerable while on land.
+
+ Giraffe
+
+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have
+ a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called
+ the giraffe a âcamel-leopard.â Thatâs where the giraffeâs species name âcamelopardalisâ comes from.
+
+ Elephant
+
+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephantsâ
+ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or
+ suck up water for drinking or bathing.
+
+ Dolphin
+
+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray,
+ blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about
+ 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens
+ to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/header/fade/index.md b/static/usage/v6/header/fade/index.md
new file mode 100644
index 00000000000..eb5ba017071
--- /dev/null
+++ b/static/usage/v6/header/fade/index.md
@@ -0,0 +1,15 @@
+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/v6/header/fade/javascript.md b/static/usage/v6/header/fade/javascript.md
new file mode 100644
index 00000000000..72e55ffc58c
--- /dev/null
+++ b/static/usage/v6/header/fade/javascript.md
@@ -0,0 +1,30 @@
+```html
+
+
+ Header
+
+
+
+ Animal Facts
+
+ Rhinoceros
+
+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the Greek words rhino meaning ânoseâ and ceros meaning âhorn.â The number of horns that a rhino has varies on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while the Javan rhino and one-horned rhino have one horn.
+
+ Sea Turtle
+
+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for swimming, so they are vulnerable while on land.
+
+ Giraffe
+
+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the giraffe a âcamel-leopard.â Thatâs where the giraffeâs species name âcamelopardalisâ comes from.
+
+ Elephant
+
+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephantsâ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up water for drinking or bathing.
+
+ Dolphin
+
+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+```
diff --git a/static/usage/v6/header/fade/react.md b/static/usage/v6/header/fade/react.md
new file mode 100644
index 00000000000..453f32c4db4
--- /dev/null
+++ b/static/usage/v6/header/fade/react.md
@@ -0,0 +1,40 @@
+```tsx
+import React from 'react';
+import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+ Header
+
+
+
+ Animal Facts
+
+ Rhinoceros
+
+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the Greek words rhino meaning ânoseâ and ceros meaning âhorn.â The number of horns that a rhino has varies on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while the Javan rhino and one-horned rhino have one horn.
+
+ Sea Turtle
+
+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for swimming, so they are vulnerable while on land.
+
+ Giraffe
+
+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the giraffe a âcamel-leopard.â Thatâs where the giraffeâs species name âcamelopardalisâ comes from.
+
+ Elephant
+
+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephantsâ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up water for drinking or bathing.
+
+ Dolphin
+
+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/header/fade/vue.md b/static/usage/v6/header/fade/vue.md
new file mode 100644
index 00000000000..44327bf809c
--- /dev/null
+++ b/static/usage/v6/header/fade/vue.md
@@ -0,0 +1,41 @@
+```html
+
+
+
+ Header
+
+
+
+ Animal Facts
+
+ Rhinoceros
+
+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the Greek words rhino meaning ânoseâ and ceros meaning âhorn.â The number of horns that a rhino has varies on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while the Javan rhino and one-horned rhino have one horn.
+
+ Sea Turtle
+
+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for swimming, so they are vulnerable while on land.
+
+ Giraffe
+
+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the giraffe a âcamel-leopard.â Thatâs where the giraffeâs species name âcamelopardalisâ comes from.
+
+ Elephant
+
+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephantsâ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up water for drinking or bathing.
+
+ Dolphin
+
+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+
+
+
+```
diff --git a/static/usage/v6/header/no-border/angular.md b/static/usage/v6/header/no-border/angular.md
new file mode 100644
index 00000000000..064fa753744
--- /dev/null
+++ b/static/usage/v6/header/no-border/angular.md
@@ -0,0 +1,10 @@
+```html
+
+
+ Header
+
+
+
+ Content
+
+```
diff --git a/static/usage/v6/header/no-border/demo.html b/static/usage/v6/header/no-border/demo.html
new file mode 100644
index 00000000000..9e8356fe253
--- /dev/null
+++ b/static/usage/v6/header/no-border/demo.html
@@ -0,0 +1,28 @@
+
+
+
+
+
+
+
Header
+
+
+
+
+
+
+
+
+
+
+
+ Header
+
+
+
+ Content
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/header/no-border/index.md b/static/usage/v6/header/no-border/index.md
new file mode 100644
index 00000000000..3cce680ca39
--- /dev/null
+++ b/static/usage/v6/header/no-border/index.md
@@ -0,0 +1,14 @@
+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/v6/header/no-border/javascript.md b/static/usage/v6/header/no-border/javascript.md
new file mode 100644
index 00000000000..064fa753744
--- /dev/null
+++ b/static/usage/v6/header/no-border/javascript.md
@@ -0,0 +1,10 @@
+```html
+
+
+ Header
+
+
+
+ Content
+
+```
diff --git a/static/usage/v6/header/no-border/react.md b/static/usage/v6/header/no-border/react.md
new file mode 100644
index 00000000000..2eb14f6882f
--- /dev/null
+++ b/static/usage/v6/header/no-border/react.md
@@ -0,0 +1,20 @@
+```tsx
+import React from 'react';
+import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+ Header
+
+
+
+ Content
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/header/no-border/vue.md b/static/usage/v6/header/no-border/vue.md
new file mode 100644
index 00000000000..a5583fb06d1
--- /dev/null
+++ b/static/usage/v6/header/no-border/vue.md
@@ -0,0 +1,21 @@
+```html
+
+
+
+ Header
+
+
+
+ Content
+
+
+
+
+```
diff --git a/static/usage/v6/header/translucent/angular.md b/static/usage/v6/header/translucent/angular.md
new file mode 100644
index 00000000000..f2779c7d5c9
--- /dev/null
+++ b/static/usage/v6/header/translucent/angular.md
@@ -0,0 +1,30 @@
+```html
+
+
+ Header
+
+
+
+ Animal Facts
+
+ Rhinoceros
+
+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the Greek words rhino meaning ânoseâ and ceros meaning âhorn.â The number of horns that a rhino has varies on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while the Javan rhino and one-horned rhino have one horn.
+
+ Sea Turtle
+
+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for swimming, so they are vulnerable while on land.
+
+ Giraffe
+
+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the giraffe a âcamel-leopard.â Thatâs where the giraffeâs species name âcamelopardalisâ comes from.
+
+ Elephant
+
+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephantsâ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up water for drinking or bathing.
+
+ Dolphin
+
+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+```
diff --git a/static/usage/v6/header/translucent/demo.html b/static/usage/v6/header/translucent/demo.html
new file mode 100644
index 00000000000..bea9d3ecba1
--- /dev/null
+++ b/static/usage/v6/header/translucent/demo.html
@@ -0,0 +1,65 @@
+
+
+
+
+
+
+
Header
+
+
+
+
+
+
+
+
+
+
+
+ Header
+
+
+
+ Animal Facts
+
+ Rhinoceros
+
+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from
+ the Greek words rhino meaning ânoseâ and ceros meaning âhorn.â The number of horns that a rhino has varies on
+ the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two
+ horns, while the Javan rhino and one-horned rhino have one horn.
+
+ Sea Turtle
+
+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other
+ turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are
+ adapted for swimming, so they are vulnerable while on land.
+
+ Giraffe
+
+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have
+ a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called
+ the giraffe a âcamel-leopard.â Thatâs where the giraffeâs species name âcamelopardalisâ comes from.
+
+ Elephant
+
+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephantsâ
+ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or
+ suck up water for drinking or bathing.
+
+ Dolphin
+
+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray,
+ blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about
+ 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens
+ to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/header/translucent/index.md b/static/usage/v6/header/translucent/index.md
new file mode 100644
index 00000000000..5a0054584ca
--- /dev/null
+++ b/static/usage/v6/header/translucent/index.md
@@ -0,0 +1,15 @@
+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/v6/header/translucent/javascript.md b/static/usage/v6/header/translucent/javascript.md
new file mode 100644
index 00000000000..e03deeda2a5
--- /dev/null
+++ b/static/usage/v6/header/translucent/javascript.md
@@ -0,0 +1,30 @@
+```html
+
+
+ Header
+
+
+
+ Animal Facts
+
+ Rhinoceros
+
+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the Greek words rhino meaning ânoseâ and ceros meaning âhorn.â The number of horns that a rhino has varies on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while the Javan rhino and one-horned rhino have one horn.
+
+ Sea Turtle
+
+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for swimming, so they are vulnerable while on land.
+
+ Giraffe
+
+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the giraffe a âcamel-leopard.â Thatâs where the giraffeâs species name âcamelopardalisâ comes from.
+
+ Elephant
+
+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephantsâ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up water for drinking or bathing.
+
+ Dolphin
+
+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+```
diff --git a/static/usage/v6/header/translucent/react.md b/static/usage/v6/header/translucent/react.md
new file mode 100644
index 00000000000..862211d839b
--- /dev/null
+++ b/static/usage/v6/header/translucent/react.md
@@ -0,0 +1,40 @@
+```tsx
+import React from 'react';
+import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+ Header
+
+
+
+ Animal Facts
+
+ Rhinoceros
+
+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the Greek words rhino meaning ânoseâ and ceros meaning âhorn.â The number of horns that a rhino has varies on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while the Javan rhino and one-horned rhino have one horn.
+
+ Sea Turtle
+
+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for swimming, so they are vulnerable while on land.
+
+ Giraffe
+
+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the giraffe a âcamel-leopard.â Thatâs where the giraffeâs species name âcamelopardalisâ comes from.
+
+ Elephant
+
+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephantsâ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up water for drinking or bathing.
+
+ Dolphin
+
+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/header/translucent/vue.md b/static/usage/v6/header/translucent/vue.md
new file mode 100644
index 00000000000..34a4c740014
--- /dev/null
+++ b/static/usage/v6/header/translucent/vue.md
@@ -0,0 +1,41 @@
+```html
+
+
+
+ Header
+
+
+
+ Animal Facts
+
+ Rhinoceros
+
+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the Greek words rhino meaning ânoseâ and ceros meaning âhorn.â The number of horns that a rhino has varies on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while the Javan rhino and one-horned rhino have one horn.
+
+ Sea Turtle
+
+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for swimming, so they are vulnerable while on land.
+
+ Giraffe
+
+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the giraffe a âcamel-leopard.â Thatâs where the giraffeâs species name âcamelopardalisâ comes from.
+
+ Elephant
+
+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephantsâ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up water for drinking or bathing.
+
+ Dolphin
+
+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+
+
+
+```
diff --git a/static/usage/v6/icon/basic/angular.md b/static/usage/v6/icon/basic/angular.md
new file mode 100644
index 00000000000..7dba86b2634
--- /dev/null
+++ b/static/usage/v6/icon/basic/angular.md
@@ -0,0 +1,6 @@
+```html
+
+
+
+
+```
diff --git a/static/usage/v6/icon/basic/demo.html b/static/usage/v6/icon/basic/demo.html
new file mode 100644
index 00000000000..f2284770ab9
--- /dev/null
+++ b/static/usage/v6/icon/basic/demo.html
@@ -0,0 +1,28 @@
+
+
+
+
+
+
+
Icon
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/icon/basic/index.md b/static/usage/v6/icon/basic/index.md
new file mode 100644
index 00000000000..ccb83aec3df
--- /dev/null
+++ b/static/usage/v6/icon/basic/index.md
@@ -0,0 +1,13 @@
+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/v6/icon/basic/javascript.md b/static/usage/v6/icon/basic/javascript.md
new file mode 100644
index 00000000000..7dba86b2634
--- /dev/null
+++ b/static/usage/v6/icon/basic/javascript.md
@@ -0,0 +1,6 @@
+```html
+
+
+
+
+```
diff --git a/static/usage/v6/icon/basic/react.md b/static/usage/v6/icon/basic/react.md
new file mode 100644
index 00000000000..57383875130
--- /dev/null
+++ b/static/usage/v6/icon/basic/react.md
@@ -0,0 +1,17 @@
+```tsx
+import React from 'react';
+import { IonIcon } from '@ionic/react';
+import { logoIonic } from 'ionicons/icons';
+
+function Example() {
+ return (
+ <>
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/icon/basic/vue.md b/static/usage/v6/icon/basic/vue.md
new file mode 100644
index 00000000000..c78d79fb041
--- /dev/null
+++ b/static/usage/v6/icon/basic/vue.md
@@ -0,0 +1,21 @@
+```html
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/img/basic/angular.md b/static/usage/v6/img/basic/angular.md
new file mode 100644
index 00000000000..fc408402024
--- /dev/null
+++ b/static/usage/v6/img/basic/angular.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v6/img/basic/demo.html b/static/usage/v6/img/basic/demo.html
new file mode 100644
index 00000000000..8b292725825
--- /dev/null
+++ b/static/usage/v6/img/basic/demo.html
@@ -0,0 +1,31 @@
+
+
+
+
+
+
+
Image
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v6/img/basic/index.md b/static/usage/v6/img/basic/index.md
new file mode 100644
index 00000000000..563aaf951f0
--- /dev/null
+++ b/static/usage/v6/img/basic/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/v6/img/basic/javascript.md b/static/usage/v6/img/basic/javascript.md
new file mode 100644
index 00000000000..fc408402024
--- /dev/null
+++ b/static/usage/v6/img/basic/javascript.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v6/img/basic/react.md b/static/usage/v6/img/basic/react.md
new file mode 100644
index 00000000000..6637dfacef0
--- /dev/null
+++ b/static/usage/v6/img/basic/react.md
@@ -0,0 +1,11 @@
+```tsx
+import React from 'react';
+import { IonImg } from '@ionic/react';
+
+function Example() {
+ return (
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/img/basic/vue.md b/static/usage/v6/img/basic/vue.md
new file mode 100644
index 00000000000..a92ec67a3a5
--- /dev/null
+++ b/static/usage/v6/img/basic/vue.md
@@ -0,0 +1,14 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v6/infinite-scroll/basic/angular/example_component_html.md b/static/usage/v6/infinite-scroll/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..55469ab3c5a
--- /dev/null
+++ b/static/usage/v6/infinite-scroll/basic/angular/example_component_html.md
@@ -0,0 +1,15 @@
+```html
+
+
+
+
+ ![avatar]()
+
+ {{ item }}
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/infinite-scroll/basic/angular/example_component_ts.md b/static/usage/v6/infinite-scroll/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..390ba6b75f1
--- /dev/null
+++ b/static/usage/v6/infinite-scroll/basic/angular/example_component_ts.md
@@ -0,0 +1,32 @@
+```tsx
+import { Component, OnInit } from '@angular/core';
+
+import { InfiniteScrollCustomEvent } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.scss'],
+})
+export class ExampleComponent implements OnInit {
+ items = [];
+
+ ngOnInit() {
+ this.generateItems();
+ }
+
+ private generateItems() {
+ const count = this.items.length + 1;
+ for (let i = 0; i < 50; i++) {
+ this.items.push(`Item ${count + i}`);
+ }
+ }
+
+ onIonInfinite(ev) {
+ this.generateItems();
+ setTimeout(() => {
+ (ev as InfiniteScrollCustomEvent).target.complete();
+ }, 500);
+ }
+}
+```
diff --git a/static/usage/v6/infinite-scroll/basic/demo.html b/static/usage/v6/infinite-scroll/basic/demo.html
new file mode 100644
index 00000000000..ea12f54b686
--- /dev/null
+++ b/static/usage/v6/infinite-scroll/basic/demo.html
@@ -0,0 +1,63 @@
+
+
+
+
+
+
+
Infinite Scroll
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/infinite-scroll/basic/index.md b/static/usage/v6/infinite-scroll/basic/index.md
new file mode 100644
index 00000000000..43a3abf2881
--- /dev/null
+++ b/static/usage/v6/infinite-scroll/basic/index.md
@@ -0,0 +1,24 @@
+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_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/v6/infinite-scroll/basic/javascript.md b/static/usage/v6/infinite-scroll/basic/javascript.md
new file mode 100644
index 00000000000..b61db4c6ae3
--- /dev/null
+++ b/static/usage/v6/infinite-scroll/basic/javascript.md
@@ -0,0 +1,46 @@
+```html
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/infinite-scroll/basic/react.md b/static/usage/v6/infinite-scroll/basic/react.md
new file mode 100644
index 00000000000..c12032a6540
--- /dev/null
+++ b/static/usage/v6/infinite-scroll/basic/react.md
@@ -0,0 +1,53 @@
+```tsx
+import React, { useState, useEffect } from 'react';
+import {
+ IonContent,
+ IonInfiniteScroll,
+ IonInfiniteScrollContent,
+ IonList,
+ IonItem,
+ IonAvatar,
+ IonLabel,
+} from '@ionic/react';
+
+function Example() {
+ const [items, setItems] = useState
([]);
+
+ const generateItems = () => {
+ const newItems = [];
+ for (let i = 0; i < 50; i++) {
+ newItems.push(`Item ${1 + items.length + i}`);
+ }
+ setItems([...items, ...newItems]);
+ };
+
+ useEffect(() => {
+ generateItems();
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+
+ return (
+
+
+ {items.map((item, index) => (
+
+
+ 
+
+ {item}
+
+ ))}
+
+ {
+ generateItems();
+ setTimeout(() => ev.target.complete(), 500);
+ }}
+ >
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/infinite-scroll/basic/vue.md b/static/usage/v6/infinite-scroll/basic/vue.md
new file mode 100644
index 00000000000..856c421b23b
--- /dev/null
+++ b/static/usage/v6/infinite-scroll/basic/vue.md
@@ -0,0 +1,65 @@
+```html
+
+
+
+
+
+ ![avatar]()
+
+ {{ item }}
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/infinite-scroll/custom-infinite-scroll-content/angular/example_component_css.md b/static/usage/v6/infinite-scroll/custom-infinite-scroll-content/angular/example_component_css.md
new file mode 100644
index 00000000000..9f14adbc405
--- /dev/null
+++ b/static/usage/v6/infinite-scroll/custom-infinite-scroll-content/angular/example_component_css.md
@@ -0,0 +1,12 @@
+```css
+svg {
+ width: 20px;
+ height: 20px;
+ display: inline-block;
+}
+
+.infinite-scroll-content {
+ text-align: center;
+ padding: 20px 0;
+}
+```
diff --git a/static/usage/v6/infinite-scroll/custom-infinite-scroll-content/angular/example_component_html.md b/static/usage/v6/infinite-scroll/custom-infinite-scroll-content/angular/example_component_html.md
new file mode 100644
index 00000000000..60c02b86ea0
--- /dev/null
+++ b/static/usage/v6/infinite-scroll/custom-infinite-scroll-content/angular/example_component_html.md
@@ -0,0 +1,68 @@
+```html
+
+
+
+
+ ![avatar]()
+
+ {{ item }}
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/infinite-scroll/custom-infinite-scroll-content/angular/example_component_ts.md b/static/usage/v6/infinite-scroll/custom-infinite-scroll-content/angular/example_component_ts.md
new file mode 100644
index 00000000000..415ed5dba8b
--- /dev/null
+++ b/static/usage/v6/infinite-scroll/custom-infinite-scroll-content/angular/example_component_ts.md
@@ -0,0 +1,20 @@
+```tsx
+import { Component, OnInit } from '@angular/core';
+
+import { InfiniteScrollCustomEvent } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.scss'],
+})
+export class ExampleComponent implements OnInit {
+ items = [];
+
+ ngOnInit() {
+ for (let i = 1; i < 51; i++) {
+ this.items.push(`Item ${i}`);
+ }
+ }
+}
+```
diff --git a/static/usage/v6/infinite-scroll/custom-infinite-scroll-content/demo.html b/static/usage/v6/infinite-scroll/custom-infinite-scroll-content/demo.html
new file mode 100644
index 00000000000..b56e952cfe7
--- /dev/null
+++ b/static/usage/v6/infinite-scroll/custom-infinite-scroll-content/demo.html
@@ -0,0 +1,82 @@
+
+
+
+
+
+
+ Infinite Scroll
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/infinite-scroll/custom-infinite-scroll-content/index.md b/static/usage/v6/infinite-scroll/custom-infinite-scroll-content/index.md
new file mode 100644
index 00000000000..ade9cc84531
--- /dev/null
+++ b/static/usage/v6/infinite-scroll/custom-infinite-scroll-content/index.md
@@ -0,0 +1,34 @@
+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_ts from './angular/example_component_ts.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+
diff --git a/static/usage/v6/infinite-scroll/custom-infinite-scroll-content/javascript.md b/static/usage/v6/infinite-scroll/custom-infinite-scroll-content/javascript.md
new file mode 100644
index 00000000000..721eb0c0ad4
--- /dev/null
+++ b/static/usage/v6/infinite-scroll/custom-infinite-scroll-content/javascript.md
@@ -0,0 +1,104 @@
+```html
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/infinite-scroll/custom-infinite-scroll-content/react/main_css.md b/static/usage/v6/infinite-scroll/custom-infinite-scroll-content/react/main_css.md
new file mode 100644
index 00000000000..9f14adbc405
--- /dev/null
+++ b/static/usage/v6/infinite-scroll/custom-infinite-scroll-content/react/main_css.md
@@ -0,0 +1,12 @@
+```css
+svg {
+ width: 20px;
+ height: 20px;
+ display: inline-block;
+}
+
+.infinite-scroll-content {
+ text-align: center;
+ padding: 20px 0;
+}
+```
diff --git a/static/usage/v6/infinite-scroll/custom-infinite-scroll-content/react/main_tsx.md b/static/usage/v6/infinite-scroll/custom-infinite-scroll-content/react/main_tsx.md
new file mode 100644
index 00000000000..1139f55920d
--- /dev/null
+++ b/static/usage/v6/infinite-scroll/custom-infinite-scroll-content/react/main_tsx.md
@@ -0,0 +1,89 @@
+```tsx
+import React, { useState, useEffect } from 'react';
+import { IonContent, IonInfiniteScroll, IonList, IonItem, IonAvatar, IonLabel } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ const [items, setItems] = useState([]);
+
+ useEffect(() => {
+ const newItems = [];
+ for (let i = 1; i < 51; i++) {
+ newItems.push(`Item ${items.length + i}`);
+ }
+ setItems([...items, ...newItems]);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+
+ return (
+
+
+ {items.map((item, index) => (
+
+
+
+
+ {item}
+
+ ))}
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/infinite-scroll/custom-infinite-scroll-content/vue.md b/static/usage/v6/infinite-scroll/custom-infinite-scroll-content/vue.md
new file mode 100644
index 00000000000..a86fa6ed062
--- /dev/null
+++ b/static/usage/v6/infinite-scroll/custom-infinite-scroll-content/vue.md
@@ -0,0 +1,121 @@
+```html
+
+
+
+
+
+
+
+ ![avatar]()
+
+ {{ item }}
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/infinite-scroll/infinite-scroll-content/angular/example_component_html.md b/static/usage/v6/infinite-scroll/infinite-scroll-content/angular/example_component_html.md
new file mode 100644
index 00000000000..2e23e359257
--- /dev/null
+++ b/static/usage/v6/infinite-scroll/infinite-scroll-content/angular/example_component_html.md
@@ -0,0 +1,15 @@
+```html
+
+
+
+
+ ![avatar]()
+
+ {{ item }}
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/infinite-scroll/infinite-scroll-content/angular/example_component_ts.md b/static/usage/v6/infinite-scroll/infinite-scroll-content/angular/example_component_ts.md
new file mode 100644
index 00000000000..415ed5dba8b
--- /dev/null
+++ b/static/usage/v6/infinite-scroll/infinite-scroll-content/angular/example_component_ts.md
@@ -0,0 +1,20 @@
+```tsx
+import { Component, OnInit } from '@angular/core';
+
+import { InfiniteScrollCustomEvent } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.scss'],
+})
+export class ExampleComponent implements OnInit {
+ items = [];
+
+ ngOnInit() {
+ for (let i = 1; i < 51; i++) {
+ this.items.push(`Item ${i}`);
+ }
+ }
+}
+```
diff --git a/static/usage/v6/infinite-scroll/infinite-scroll-content/demo.html b/static/usage/v6/infinite-scroll/infinite-scroll-content/demo.html
new file mode 100644
index 00000000000..46016207432
--- /dev/null
+++ b/static/usage/v6/infinite-scroll/infinite-scroll-content/demo.html
@@ -0,0 +1,56 @@
+
+
+
+
+
+
+ Infinite Scroll
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/infinite-scroll/infinite-scroll-content/index.md b/static/usage/v6/infinite-scroll/infinite-scroll-content/index.md
new file mode 100644
index 00000000000..506aa28f20d
--- /dev/null
+++ b/static/usage/v6/infinite-scroll/infinite-scroll-content/index.md
@@ -0,0 +1,24 @@
+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_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/v6/infinite-scroll/infinite-scroll-content/javascript.md b/static/usage/v6/infinite-scroll/infinite-scroll-content/javascript.md
new file mode 100644
index 00000000000..6b2a9bb409f
--- /dev/null
+++ b/static/usage/v6/infinite-scroll/infinite-scroll-content/javascript.md
@@ -0,0 +1,38 @@
+```html
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/infinite-scroll/infinite-scroll-content/react.md b/static/usage/v6/infinite-scroll/infinite-scroll-content/react.md
new file mode 100644
index 00000000000..2c2b5f77b8a
--- /dev/null
+++ b/static/usage/v6/infinite-scroll/infinite-scroll-content/react.md
@@ -0,0 +1,44 @@
+```tsx
+import React, { useState, useEffect } from 'react';
+import {
+ IonContent,
+ IonInfiniteScroll,
+ IonInfiniteScrollContent,
+ IonList,
+ IonItem,
+ IonAvatar,
+ IonLabel,
+} from '@ionic/react';
+
+function Example() {
+ const [items, setItems] = useState([]);
+
+ useEffect(() => {
+ const newItems = [];
+ for (let i = 1; i < 51; i++) {
+ newItems.push(`Item ${items.length + i}`);
+ }
+ setItems([...items, ...newItems]);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+
+ return (
+
+
+ {items.map((item, index) => (
+
+
+
+
+ {item}
+
+ ))}
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/infinite-scroll/infinite-scroll-content/vue.md b/static/usage/v6/infinite-scroll/infinite-scroll-content/vue.md
new file mode 100644
index 00000000000..9b7d22436ee
--- /dev/null
+++ b/static/usage/v6/infinite-scroll/infinite-scroll-content/vue.md
@@ -0,0 +1,58 @@
+```html
+
+
+
+
+
+ ![avatar]()
+
+ {{ item }}
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/input/basic/angular.md b/static/usage/v6/input/basic/angular.md
new file mode 100644
index 00000000000..faa0271acae
--- /dev/null
+++ b/static/usage/v6/input/basic/angular.md
@@ -0,0 +1,28 @@
+```html
+
+
+ Default input
+
+
+
+
+ Input with placeholder
+
+
+
+
+ Input with value
+
+
+
+
+ Readonly input
+
+
+
+
+ Disabled input
+
+
+
+```
diff --git a/static/usage/v6/input/basic/demo.html b/static/usage/v6/input/basic/demo.html
new file mode 100644
index 00000000000..264bbaa75e6
--- /dev/null
+++ b/static/usage/v6/input/basic/demo.html
@@ -0,0 +1,55 @@
+
+
+
+
+
+
+ Input
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Default input
+
+
+
+
+ Input with placeholder
+
+
+
+
+ Input with value
+
+
+
+
+ Readonly input
+
+
+
+
+ Disabled input
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/input/basic/index.md b/static/usage/v6/input/basic/index.md
new file mode 100644
index 00000000000..48508afa6d4
--- /dev/null
+++ b/static/usage/v6/input/basic/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/v6/input/basic/javascript.md b/static/usage/v6/input/basic/javascript.md
new file mode 100644
index 00000000000..668cdbdf07e
--- /dev/null
+++ b/static/usage/v6/input/basic/javascript.md
@@ -0,0 +1,28 @@
+```html
+
+
+ Default input
+
+
+
+
+ Input with placeholder
+
+
+
+
+ Input with value
+
+
+
+
+ Readonly input
+
+
+
+
+ Disabled input
+
+
+
+```
diff --git a/static/usage/v6/input/basic/react.md b/static/usage/v6/input/basic/react.md
new file mode 100644
index 00000000000..b3ad075a156
--- /dev/null
+++ b/static/usage/v6/input/basic/react.md
@@ -0,0 +1,36 @@
+```tsx
+import React from 'react';
+import { IonInput, IonItem, IonLabel, IonList } from '@ionic/react';
+
+function Example() {
+ return (
+
+
+ Default input
+
+
+
+
+ Input with placeholder
+
+
+
+
+ Input with value
+
+
+
+
+ Readonly input
+
+
+
+
+ Disabled input
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/input/basic/vue.md b/static/usage/v6/input/basic/vue.md
new file mode 100644
index 00000000000..80ad1c0cd54
--- /dev/null
+++ b/static/usage/v6/input/basic/vue.md
@@ -0,0 +1,39 @@
+```html
+
+
+
+ Default input
+
+
+
+
+ Input with placeholder
+
+
+
+
+ Input with value
+
+
+
+
+ Readonly input
+
+
+
+
+ Disabled input
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/input/clear/angular.md b/static/usage/v6/input/clear/angular.md
new file mode 100644
index 00000000000..d198485925f
--- /dev/null
+++ b/static/usage/v6/input/clear/angular.md
@@ -0,0 +1,18 @@
+```html
+
+
+ Input with clear button
+
+
+
+
+ Input with clear on edit
+
+
+
+
+ Password input
+
+
+
+```
diff --git a/static/usage/v6/input/clear/demo.html b/static/usage/v6/input/clear/demo.html
new file mode 100644
index 00000000000..e46c310a3a4
--- /dev/null
+++ b/static/usage/v6/input/clear/demo.html
@@ -0,0 +1,48 @@
+
+
+
+
+
+
+ Input
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Input with clear button
+
+
+
+
+
+ Input with clear on edit
+
+
+
+
+
+ Password input
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/input/clear/index.md b/static/usage/v6/input/clear/index.md
new file mode 100644
index 00000000000..f6bac9b0fbb
--- /dev/null
+++ b/static/usage/v6/input/clear/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/v6/input/clear/javascript.md b/static/usage/v6/input/clear/javascript.md
new file mode 100644
index 00000000000..7a3a7fc2701
--- /dev/null
+++ b/static/usage/v6/input/clear/javascript.md
@@ -0,0 +1,18 @@
+```html
+
+
+ Input with clear button
+
+
+
+
+ Input with clear on edit
+
+
+
+
+ Password input
+
+
+
+```
diff --git a/static/usage/v6/input/clear/react.md b/static/usage/v6/input/clear/react.md
new file mode 100644
index 00000000000..c7205c903a4
--- /dev/null
+++ b/static/usage/v6/input/clear/react.md
@@ -0,0 +1,26 @@
+```tsx
+import React from 'react';
+import { IonInput, IonItem, IonLabel, IonList } from '@ionic/react';
+
+function Example() {
+ return (
+
+
+ Input with clear button
+
+
+
+
+ Input with clear on edit
+
+
+
+
+ Password input
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/input/clear/vue.md b/static/usage/v6/input/clear/vue.md
new file mode 100644
index 00000000000..fecb1e831f1
--- /dev/null
+++ b/static/usage/v6/input/clear/vue.md
@@ -0,0 +1,29 @@
+```html
+
+
+
+ Input with clear button
+
+
+
+
+ Input with clear on edit
+
+
+
+
+ Password input
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/input/fill/angular.md b/static/usage/v6/input/fill/angular.md
new file mode 100644
index 00000000000..54ff7eafb18
--- /dev/null
+++ b/static/usage/v6/input/fill/angular.md
@@ -0,0 +1,16 @@
+```html
+
+ Default input
+
+
+
+
+ Solid input
+
+
+
+
+ Outline input
+
+
+```
diff --git a/static/usage/v6/input/fill/demo.html b/static/usage/v6/input/fill/demo.html
new file mode 100644
index 00000000000..a7afe6c8d13
--- /dev/null
+++ b/static/usage/v6/input/fill/demo.html
@@ -0,0 +1,44 @@
+
+
+
+
+
+
+ Input
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Default input
+
+
+
+
+ Solid input
+
+
+
+
+ Outline input
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/input/fill/index.md b/static/usage/v6/input/fill/index.md
new file mode 100644
index 00000000000..68c94cd6714
--- /dev/null
+++ b/static/usage/v6/input/fill/index.md
@@ -0,0 +1,14 @@
+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/v6/input/fill/javascript.md b/static/usage/v6/input/fill/javascript.md
new file mode 100644
index 00000000000..54ff7eafb18
--- /dev/null
+++ b/static/usage/v6/input/fill/javascript.md
@@ -0,0 +1,16 @@
+```html
+
+ Default input
+
+
+
+
+ Solid input
+
+
+
+
+ Outline input
+
+
+```
diff --git a/static/usage/v6/input/fill/react.md b/static/usage/v6/input/fill/react.md
new file mode 100644
index 00000000000..00000a9ee97
--- /dev/null
+++ b/static/usage/v6/input/fill/react.md
@@ -0,0 +1,26 @@
+```tsx
+import React from 'react';
+import { IonInput, IonItem, IonLabel } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+ Default input
+
+
+
+
+ Solid input
+
+
+
+
+ Outline input
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/input/fill/vue.md b/static/usage/v6/input/fill/vue.md
new file mode 100644
index 00000000000..d76a7929fb2
--- /dev/null
+++ b/static/usage/v6/input/fill/vue.md
@@ -0,0 +1,27 @@
+```html
+
+
+ Default input
+
+
+
+
+ Solid input
+
+
+
+
+ Outline input
+
+
+
+
+
+```
diff --git a/static/usage/v6/input/filtering/angular/example_component_html.md b/static/usage/v6/input/filtering/angular/example_component_html.md
new file mode 100644
index 00000000000..354c1e65610
--- /dev/null
+++ b/static/usage/v6/input/filtering/angular/example_component_html.md
@@ -0,0 +1,12 @@
+```html
+
+
+ Alphanumeric Characters
+
+
+
+```
diff --git a/static/usage/v6/input/filtering/angular/example_component_ts.md b/static/usage/v6/input/filtering/angular/example_component_ts.md
new file mode 100644
index 00000000000..03f71066cc3
--- /dev/null
+++ b/static/usage/v6/input/filtering/angular/example_component_ts.md
@@ -0,0 +1,27 @@
+```ts
+import { Component, ViewChild } from '@angular/core';
+import type { IonInput } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ inputModel = '';
+
+ @ViewChild('ionInputEl', { static: true }) ionInputEl!: IonInput;
+
+ onInput(ev) {
+ const value = ev.target!.value;
+
+ // Removes non alphanumeric characters
+ const filteredValue = value.replace(/[^a-zA-Z0-9]+/g,'');
+
+ /**
+ * Update both the state variable and
+ * the component to keep them in sync.
+ */
+ this.ionInputEl.value = this.inputModel = filteredValue;
+ }
+}
+```
diff --git a/static/usage/v6/input/filtering/demo.html b/static/usage/v6/input/filtering/demo.html
new file mode 100644
index 00000000000..ae4cb5381f9
--- /dev/null
+++ b/static/usage/v6/input/filtering/demo.html
@@ -0,0 +1,39 @@
+
+
+
+
+
+
+ Input
+
+
+
+
+
+
+
+
+
+
+
+
+ Alphanumeric Characters
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v6/input/filtering/index.md b/static/usage/v6/input/filtering/index.md
new file mode 100644
index 00000000000..41b9ef2f591
--- /dev/null
+++ b/static/usage/v6/input/filtering/index.md
@@ -0,0 +1,20 @@
+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_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/v6/input/filtering/javascript.md b/static/usage/v6/input/filtering/javascript.md
new file mode 100644
index 00000000000..007a211e40f
--- /dev/null
+++ b/static/usage/v6/input/filtering/javascript.md
@@ -0,0 +1,17 @@
+```html
+
+
+ Alphanumeric Characters
+
+
+
+
+
+```
\ No newline at end of file
diff --git a/static/usage/v6/input/filtering/react.md b/static/usage/v6/input/filtering/react.md
new file mode 100644
index 00000000000..ae2df1a1cdd
--- /dev/null
+++ b/static/usage/v6/input/filtering/react.md
@@ -0,0 +1,41 @@
+```tsx
+import React, { useState, useRef } from 'react';
+import { IonInput, IonItem, IonLabel, IonList } from '@ionic/react';
+
+function Example() {
+ const [inputModel, setInputModel ] = useState('');
+ const ionInputEl = useRef(null);
+
+ const onInput = (ev: Event) => {
+ const value = (ev.target as HTMLIonInputElement).value as string;
+
+ // Removes non alphanumeric characters
+ const filteredValue = value.replace(/[^a-zA-Z0-9]+/g,'');
+
+ /**
+ * Update both the state variable and
+ * the component to keep them in sync.
+ */
+ setInputModel(filteredValue);
+
+ const inputCmp = ionInputEl.current;
+ if (inputCmp !== null) {
+ inputCmp.value = filteredValue;
+ }
+ }
+
+ return (
+
+
+ Alphanumeric Characters
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/input/filtering/vue.md b/static/usage/v6/input/filtering/vue.md
new file mode 100644
index 00000000000..bfce3c9c58b
--- /dev/null
+++ b/static/usage/v6/input/filtering/vue.md
@@ -0,0 +1,46 @@
+```html
+
+
+
+ Alphanumeric Characters
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/input/labels/angular.md b/static/usage/v6/input/labels/angular.md
new file mode 100644
index 00000000000..9756b9c57cb
--- /dev/null
+++ b/static/usage/v6/input/labels/angular.md
@@ -0,0 +1,23 @@
+```html
+
+
+ Default label
+
+
+
+
+ Fixed label
+
+
+
+
+ Stacked label
+
+
+
+
+ Floating label
+
+
+
+```
diff --git a/static/usage/v6/input/labels/demo.html b/static/usage/v6/input/labels/demo.html
new file mode 100644
index 00000000000..ea089a533e8
--- /dev/null
+++ b/static/usage/v6/input/labels/demo.html
@@ -0,0 +1,50 @@
+
+
+
+
+
+
+ Input
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Default label
+
+
+
+
+ Fixed label
+
+
+
+
+ Stacked label
+
+
+
+
+ Floating label
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/input/labels/index.md b/static/usage/v6/input/labels/index.md
new file mode 100644
index 00000000000..1da820e911e
--- /dev/null
+++ b/static/usage/v6/input/labels/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/v6/input/labels/javascript.md b/static/usage/v6/input/labels/javascript.md
new file mode 100644
index 00000000000..9756b9c57cb
--- /dev/null
+++ b/static/usage/v6/input/labels/javascript.md
@@ -0,0 +1,23 @@
+```html
+
+
+ Default label
+
+
+
+
+ Fixed label
+
+
+
+
+ Stacked label
+
+
+
+
+ Floating label
+
+
+
+```
diff --git a/static/usage/v6/input/labels/react.md b/static/usage/v6/input/labels/react.md
new file mode 100644
index 00000000000..37a6bb8246b
--- /dev/null
+++ b/static/usage/v6/input/labels/react.md
@@ -0,0 +1,31 @@
+```tsx
+import React from 'react';
+import { IonInput, IonItem, IonLabel, IonList } from '@ionic/react';
+
+function Example() {
+ return (
+
+
+ Default label
+
+
+
+
+ Fixed label
+
+
+
+
+ Stacked label
+
+
+
+
+ Floating label
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/input/labels/vue.md b/static/usage/v6/input/labels/vue.md
new file mode 100644
index 00000000000..fae061af85f
--- /dev/null
+++ b/static/usage/v6/input/labels/vue.md
@@ -0,0 +1,34 @@
+```html
+
+
+
+ Default label
+
+
+
+
+ Fixed label
+
+
+
+
+ Stacked label
+
+
+
+
+ Floating label
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/input/theming/colors/angular.md b/static/usage/v6/input/theming/colors/angular.md
new file mode 100644
index 00000000000..cc4a5b35ed5
--- /dev/null
+++ b/static/usage/v6/input/theming/colors/angular.md
@@ -0,0 +1,11 @@
+```html
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/input/theming/colors/demo.html b/static/usage/v6/input/theming/colors/demo.html
new file mode 100644
index 00000000000..c0c93908ac6
--- /dev/null
+++ b/static/usage/v6/input/theming/colors/demo.html
@@ -0,0 +1,44 @@
+
+
+
+
+
+
+ Input
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/input/theming/colors/index.md b/static/usage/v6/input/theming/colors/index.md
new file mode 100644
index 00000000000..9f3861e073b
--- /dev/null
+++ b/static/usage/v6/input/theming/colors/index.md
@@ -0,0 +1,13 @@
+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/v6/input/theming/colors/javascript.md b/static/usage/v6/input/theming/colors/javascript.md
new file mode 100644
index 00000000000..cc4a5b35ed5
--- /dev/null
+++ b/static/usage/v6/input/theming/colors/javascript.md
@@ -0,0 +1,11 @@
+```html
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/input/theming/colors/react.md b/static/usage/v6/input/theming/colors/react.md
new file mode 100644
index 00000000000..d9697d40c34
--- /dev/null
+++ b/static/usage/v6/input/theming/colors/react.md
@@ -0,0 +1,21 @@
+```tsx
+import React from 'react';
+import { IonInput } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/input/theming/colors/vue.md b/static/usage/v6/input/theming/colors/vue.md
new file mode 100644
index 00000000000..b6229c74c63
--- /dev/null
+++ b/static/usage/v6/input/theming/colors/vue.md
@@ -0,0 +1,22 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/input/theming/css-properties/angular/example_component_css.md b/static/usage/v6/input/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..bede6457325
--- /dev/null
+++ b/static/usage/v6/input/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,13 @@
+```css
+ion-input.custom {
+ --background: #373737;
+ --color: #fff;
+ --placeholder-color: #ddd;
+ --placeholder-opacity: .8;
+
+ --padding-bottom: 10px;
+ --padding-end: 10px;
+ --padding-start: 10px;
+ --padding-top: 10px;
+}
+```
diff --git a/static/usage/v6/input/theming/css-properties/angular/example_component_html.md b/static/usage/v6/input/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..b0f2c5bff5a
--- /dev/null
+++ b/static/usage/v6/input/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v6/input/theming/css-properties/demo.html b/static/usage/v6/input/theming/css-properties/demo.html
new file mode 100644
index 00000000000..4414ead7bf6
--- /dev/null
+++ b/static/usage/v6/input/theming/css-properties/demo.html
@@ -0,0 +1,43 @@
+
+
+
+
+
+
+ Input
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/input/theming/css-properties/index.md b/static/usage/v6/input/theming/css-properties/index.md
new file mode 100644
index 00000000000..c67d8ddf1bc
--- /dev/null
+++ b/static/usage/v6/input/theming/css-properties/index.md
@@ -0,0 +1,33 @@
+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/v6/input/theming/css-properties/javascript.md b/static/usage/v6/input/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..3b406ede42f
--- /dev/null
+++ b/static/usage/v6/input/theming/css-properties/javascript.md
@@ -0,0 +1,17 @@
+```html
+
+
+
+```
diff --git a/static/usage/v6/input/theming/css-properties/react/main_css.md b/static/usage/v6/input/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..bede6457325
--- /dev/null
+++ b/static/usage/v6/input/theming/css-properties/react/main_css.md
@@ -0,0 +1,13 @@
+```css
+ion-input.custom {
+ --background: #373737;
+ --color: #fff;
+ --placeholder-color: #ddd;
+ --placeholder-opacity: .8;
+
+ --padding-bottom: 10px;
+ --padding-end: 10px;
+ --padding-start: 10px;
+ --padding-top: 10px;
+}
+```
diff --git a/static/usage/v6/input/theming/css-properties/react/main_tsx.md b/static/usage/v6/input/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..e4ec0fb134a
--- /dev/null
+++ b/static/usage/v6/input/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,13 @@
+```tsx
+import React from 'react';
+import { IonInput } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/input/theming/css-properties/vue.md b/static/usage/v6/input/theming/css-properties/vue.md
new file mode 100644
index 00000000000..6d5d5fa41cc
--- /dev/null
+++ b/static/usage/v6/input/theming/css-properties/vue.md
@@ -0,0 +1,28 @@
+```html
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/input/types/angular.md b/static/usage/v6/input/types/angular.md
new file mode 100644
index 00000000000..1c8ae75a5bc
--- /dev/null
+++ b/static/usage/v6/input/types/angular.md
@@ -0,0 +1,28 @@
+```html
+
+
+ Text input
+
+
+
+
+ Number input
+
+
+
+
+ Password input
+
+
+
+
+ Email input
+
+
+
+
+ Telephone input
+
+
+
+```
diff --git a/static/usage/v6/input/types/demo.html b/static/usage/v6/input/types/demo.html
new file mode 100644
index 00000000000..5955051f78f
--- /dev/null
+++ b/static/usage/v6/input/types/demo.html
@@ -0,0 +1,55 @@
+
+
+
+
+
+
+ Input
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Text input
+
+
+
+
+ Number input
+
+
+
+
+ Password input
+
+
+
+
+ Email input
+
+
+
+
+ Telephone input
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/input/types/index.md b/static/usage/v6/input/types/index.md
new file mode 100644
index 00000000000..678dc4d9737
--- /dev/null
+++ b/static/usage/v6/input/types/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/v6/input/types/javascript.md b/static/usage/v6/input/types/javascript.md
new file mode 100644
index 00000000000..1c8ae75a5bc
--- /dev/null
+++ b/static/usage/v6/input/types/javascript.md
@@ -0,0 +1,28 @@
+```html
+
+
+ Text input
+
+
+
+
+ Number input
+
+
+
+
+ Password input
+
+
+
+
+ Email input
+
+
+
+
+ Telephone input
+
+
+
+```
diff --git a/static/usage/v6/input/types/react.md b/static/usage/v6/input/types/react.md
new file mode 100644
index 00000000000..8ee7ad7044d
--- /dev/null
+++ b/static/usage/v6/input/types/react.md
@@ -0,0 +1,36 @@
+```tsx
+import React from 'react';
+import { IonInput, IonItem, IonLabel, IonList } from '@ionic/react';
+
+function Example() {
+ return (
+
+
+ Text input
+
+
+
+
+ Number input
+
+
+
+
+ Password input
+
+
+
+
+ Email input
+
+
+
+
+ Telephone input
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/input/types/vue.md b/static/usage/v6/input/types/vue.md
new file mode 100644
index 00000000000..9f44a8e4ca5
--- /dev/null
+++ b/static/usage/v6/input/types/vue.md
@@ -0,0 +1,39 @@
+```html
+
+
+
+ Text input
+
+
+
+
+ Number input
+
+
+
+
+ Password input
+
+
+
+
+ Email input
+
+
+
+
+ Telephone input
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/item-divider/basic/angular.md b/static/usage/v6/item-divider/basic/angular.md
new file mode 100644
index 00000000000..d74e5b05549
--- /dev/null
+++ b/static/usage/v6/item-divider/basic/angular.md
@@ -0,0 +1,39 @@
+```html
+
+
+
+
+ Section A
+
+
+
+
+ A1
+
+
+ A2
+
+
+ A3
+
+
+
+
+
+
+ Section B
+
+
+
+
+ B1
+
+
+ B2
+
+
+ B3
+
+
+
+```
diff --git a/static/usage/v6/item-divider/basic/demo.html b/static/usage/v6/item-divider/basic/demo.html
new file mode 100644
index 00000000000..d99c52d65af
--- /dev/null
+++ b/static/usage/v6/item-divider/basic/demo.html
@@ -0,0 +1,66 @@
+
+
+
+
+
+
+ Item Divider
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Section A
+
+
+
+
+ A1
+
+
+ A2
+
+
+ A3
+
+
+
+
+
+
+ Section B
+
+
+
+
+ B1
+
+
+ B2
+
+
+ B3
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/item-divider/basic/index.md b/static/usage/v6/item-divider/basic/index.md
new file mode 100644
index 00000000000..c50ecfe1199
--- /dev/null
+++ b/static/usage/v6/item-divider/basic/index.md
@@ -0,0 +1,13 @@
+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/v6/item-divider/basic/javascript.md b/static/usage/v6/item-divider/basic/javascript.md
new file mode 100644
index 00000000000..d74e5b05549
--- /dev/null
+++ b/static/usage/v6/item-divider/basic/javascript.md
@@ -0,0 +1,39 @@
+```html
+
+
+
+
+ Section A
+
+
+
+
+ A1
+
+
+ A2
+
+
+ A3
+
+
+
+
+
+
+ Section B
+
+
+
+
+ B1
+
+
+ B2
+
+
+ B3
+
+
+
+```
diff --git a/static/usage/v6/item-divider/basic/react.md b/static/usage/v6/item-divider/basic/react.md
new file mode 100644
index 00000000000..289f1727c8d
--- /dev/null
+++ b/static/usage/v6/item-divider/basic/react.md
@@ -0,0 +1,47 @@
+```tsx
+import React from 'react';
+import { IonItem, IonItemDivider, IonItemGroup, IonLabel, IonList } from '@ionic/react';
+
+function Example() {
+ return (
+
+
+
+
+ Section A
+
+
+
+
+ A1
+
+
+ A2
+
+
+ A3
+
+
+
+
+
+
+ Section B
+
+
+
+
+ B1
+
+
+ B2
+
+
+ B3
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/item-divider/basic/vue.md b/static/usage/v6/item-divider/basic/vue.md
new file mode 100644
index 00000000000..95f26ebc027
--- /dev/null
+++ b/static/usage/v6/item-divider/basic/vue.md
@@ -0,0 +1,50 @@
+```html
+
+
+
+
+
+ Section A
+
+
+
+
+ A1
+
+
+ A2
+
+
+ A3
+
+
+
+
+
+
+ Section B
+
+
+
+
+ B1
+
+
+ B2
+
+
+ B3
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/item-divider/theming/colors/angular.md b/static/usage/v6/item-divider/theming/colors/angular.md
new file mode 100644
index 00000000000..e23070ec5a0
--- /dev/null
+++ b/static/usage/v6/item-divider/theming/colors/angular.md
@@ -0,0 +1,32 @@
+```html
+
+ Default
+
+
+ Primary
+
+
+ Secondary
+
+
+ Tertiary
+
+
+ Success
+
+
+ Warning
+
+
+ Danger
+
+
+ Light
+
+
+ Medium
+
+
+ Dark
+
+```
diff --git a/static/usage/v6/item-divider/theming/colors/demo.html b/static/usage/v6/item-divider/theming/colors/demo.html
new file mode 100644
index 00000000000..354ab9096e8
--- /dev/null
+++ b/static/usage/v6/item-divider/theming/colors/demo.html
@@ -0,0 +1,59 @@
+
+
+
+
+
+
+ Item Divider
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Default
+
+
+ Primary
+
+
+ Secondary
+
+
+ Tertiary
+
+
+ Success
+
+
+ Warning
+
+
+ Danger
+
+
+ Light
+
+
+ Medium
+
+
+ Dark
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/item-divider/theming/colors/index.md b/static/usage/v6/item-divider/theming/colors/index.md
new file mode 100644
index 00000000000..912ef18df03
--- /dev/null
+++ b/static/usage/v6/item-divider/theming/colors/index.md
@@ -0,0 +1,13 @@
+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/v6/item-divider/theming/colors/javascript.md b/static/usage/v6/item-divider/theming/colors/javascript.md
new file mode 100644
index 00000000000..e23070ec5a0
--- /dev/null
+++ b/static/usage/v6/item-divider/theming/colors/javascript.md
@@ -0,0 +1,32 @@
+```html
+
+ Default
+
+
+ Primary
+
+
+ Secondary
+
+
+ Tertiary
+
+
+ Success
+
+
+ Warning
+
+
+ Danger
+
+
+ Light
+
+
+ Medium
+
+
+ Dark
+
+```
diff --git a/static/usage/v6/item-divider/theming/colors/react.md b/static/usage/v6/item-divider/theming/colors/react.md
new file mode 100644
index 00000000000..7bf4cd2193f
--- /dev/null
+++ b/static/usage/v6/item-divider/theming/colors/react.md
@@ -0,0 +1,42 @@
+```tsx
+import React from 'react';
+import { IonItemDivider, IonLabel } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+ Default
+
+
+ Primary
+
+
+ Secondary
+
+
+ Tertiary
+
+
+ Success
+
+
+ Warning
+
+
+ Danger
+
+
+ Light
+
+
+ Medium
+
+
+ Dark
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/item-divider/theming/colors/vue.md b/static/usage/v6/item-divider/theming/colors/vue.md
new file mode 100644
index 00000000000..981f99a09da
--- /dev/null
+++ b/static/usage/v6/item-divider/theming/colors/vue.md
@@ -0,0 +1,43 @@
+```html
+
+
+ Default
+
+
+ Primary
+
+
+ Secondary
+
+
+ Tertiary
+
+
+ Success
+
+
+ Warning
+
+
+ Danger
+
+
+ Light
+
+
+ Medium
+
+
+ Dark
+
+
+
+
+```
diff --git a/static/usage/v6/item-divider/theming/css-properties/angular/example_component_css.md b/static/usage/v6/item-divider/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..7c29ebdd846
--- /dev/null
+++ b/static/usage/v6/item-divider/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,11 @@
+```css
+ion-item-divider {
+ --background: #19422d;
+ --color: #fff;
+
+ --padding-top: 10px;
+ --padding-bottom: 10px;
+ --padding-start: 20px;
+ --padding-end: 20px;
+}
+```
diff --git a/static/usage/v6/item-divider/theming/css-properties/angular/example_component_html.md b/static/usage/v6/item-divider/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..b3b1bb4da25
--- /dev/null
+++ b/static/usage/v6/item-divider/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,7 @@
+```html
+
+
+ Item Divider
+
+
+```
diff --git a/static/usage/v6/item-divider/theming/css-properties/demo.html b/static/usage/v6/item-divider/theming/css-properties/demo.html
new file mode 100644
index 00000000000..9223767446d
--- /dev/null
+++ b/static/usage/v6/item-divider/theming/css-properties/demo.html
@@ -0,0 +1,40 @@
+
+
+
+
+
+
+ Item Divider
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Item Divider
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/item-divider/theming/css-properties/index.md b/static/usage/v6/item-divider/theming/css-properties/index.md
new file mode 100644
index 00000000000..499d29749cc
--- /dev/null
+++ b/static/usage/v6/item-divider/theming/css-properties/index.md
@@ -0,0 +1,33 @@
+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/v6/item-divider/theming/css-properties/javascript.md b/static/usage/v6/item-divider/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..6622b6d7e3f
--- /dev/null
+++ b/static/usage/v6/item-divider/theming/css-properties/javascript.md
@@ -0,0 +1,19 @@
+```html
+
+
+
+
+ Item Divider
+
+
+```
diff --git a/static/usage/v6/item-divider/theming/css-properties/react/main_css.md b/static/usage/v6/item-divider/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..7c29ebdd846
--- /dev/null
+++ b/static/usage/v6/item-divider/theming/css-properties/react/main_css.md
@@ -0,0 +1,11 @@
+```css
+ion-item-divider {
+ --background: #19422d;
+ --color: #fff;
+
+ --padding-top: 10px;
+ --padding-bottom: 10px;
+ --padding-start: 20px;
+ --padding-end: 20px;
+}
+```
diff --git a/static/usage/v6/item-divider/theming/css-properties/react/main_tsx.md b/static/usage/v6/item-divider/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..6cd8d464d7e
--- /dev/null
+++ b/static/usage/v6/item-divider/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,18 @@
+
+```tsx
+import React from 'react';
+import { IonItemDivider, IonLabel } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+
+
+ Item Divider
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/item-divider/theming/css-properties/vue.md b/static/usage/v6/item-divider/theming/css-properties/vue.md
new file mode 100644
index 00000000000..3589bcc7cd4
--- /dev/null
+++ b/static/usage/v6/item-divider/theming/css-properties/vue.md
@@ -0,0 +1,30 @@
+```html
+
+
+
+ Item Divider
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/item-group/basic/angular.md b/static/usage/v6/item-group/basic/angular.md
new file mode 100644
index 00000000000..8ea0ff7cef9
--- /dev/null
+++ b/static/usage/v6/item-group/basic/angular.md
@@ -0,0 +1,33 @@
+```html
+
+
+ A
+
+
+
+ Angola
+
+
+ Argentina
+
+
+ Armenia
+
+
+
+
+
+ B
+
+
+
+ Bangladesh
+
+
+ Belarus
+
+
+ Belgium
+
+
+```
diff --git a/static/usage/v6/item-group/basic/demo.html b/static/usage/v6/item-group/basic/demo.html
new file mode 100644
index 00000000000..eaf062c371d
--- /dev/null
+++ b/static/usage/v6/item-group/basic/demo.html
@@ -0,0 +1,60 @@
+
+
+
+
+
+
+ Item Group
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ A
+
+
+
+ Angola
+
+
+ Argentina
+
+
+ Armenia
+
+
+
+
+
+ B
+
+
+
+ Bangladesh
+
+
+ Belarus
+
+
+ Belgium
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/item-group/basic/index.md b/static/usage/v6/item-group/basic/index.md
new file mode 100644
index 00000000000..d8486d97536
--- /dev/null
+++ b/static/usage/v6/item-group/basic/index.md
@@ -0,0 +1,13 @@
+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/v6/item-group/basic/javascript.md b/static/usage/v6/item-group/basic/javascript.md
new file mode 100644
index 00000000000..8ea0ff7cef9
--- /dev/null
+++ b/static/usage/v6/item-group/basic/javascript.md
@@ -0,0 +1,33 @@
+```html
+
+
+ A
+
+
+
+ Angola
+
+
+ Argentina
+
+
+ Armenia
+
+
+
+
+
+ B
+
+
+
+ Bangladesh
+
+
+ Belarus
+
+
+ Belgium
+
+
+```
diff --git a/static/usage/v6/item-group/basic/react.md b/static/usage/v6/item-group/basic/react.md
new file mode 100644
index 00000000000..ddb3f381230
--- /dev/null
+++ b/static/usage/v6/item-group/basic/react.md
@@ -0,0 +1,43 @@
+```tsx
+import React from 'react';
+import { IonItem, IonItemDivider, IonItemGroup, IonLabel } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+ A
+
+
+
+ Angola
+
+
+ Argentina
+
+
+ Armenia
+
+
+
+
+
+ B
+
+
+
+ Bangladesh
+
+
+ Belarus
+
+
+ Belgium
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/item-group/basic/vue.md b/static/usage/v6/item-group/basic/vue.md
new file mode 100644
index 00000000000..edba72f0e69
--- /dev/null
+++ b/static/usage/v6/item-group/basic/vue.md
@@ -0,0 +1,44 @@
+```html
+
+
+
+ A
+
+
+
+ Angola
+
+
+ Argentina
+
+
+ Armenia
+
+
+
+
+
+ B
+
+
+
+ Bangladesh
+
+
+ Belarus
+
+
+ Belgium
+
+
+
+
+
+```
diff --git a/static/usage/v6/item-group/sliding-items/angular.md b/static/usage/v6/item-group/sliding-items/angular.md
new file mode 100644
index 00000000000..a451b58c9c4
--- /dev/null
+++ b/static/usage/v6/item-group/sliding-items/angular.md
@@ -0,0 +1,95 @@
+```html
+
+
+
+ Fruits
+
+
+
+
+
+
+ Grapes
+
+
+
+
+ Favorite
+
+
+
+
+
+
+
+ Apples
+
+
+
+
+ Favorite
+
+
+
+
+
+
+
+ Bananas
+
+
+
+
+ Favorite
+
+
+
+
+
+
+
+
+ Vegetables
+
+
+
+
+
+
+ Carrots
+
+
+
+
+ Favorite
+
+
+
+
+
+
+
+ Broccoli
+
+
+
+
+ Favorite
+
+
+
+
+
+
+
+ Celery
+
+
+
+
+ Favorite
+
+
+
+
+```
diff --git a/static/usage/v6/item-group/sliding-items/demo.html b/static/usage/v6/item-group/sliding-items/demo.html
new file mode 100644
index 00000000000..87c87870df4
--- /dev/null
+++ b/static/usage/v6/item-group/sliding-items/demo.html
@@ -0,0 +1,122 @@
+
+
+
+
+
+
+ Item Group
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Fruits
+
+
+
+
+
+
+ Grapes
+
+
+
+
+ Favorite
+
+
+
+
+
+
+
+ Apples
+
+
+
+
+ Favorite
+
+
+
+
+
+
+
+ Bananas
+
+
+
+
+ Favorite
+
+
+
+
+
+
+
+
+ Vegetables
+
+
+
+
+
+
+ Carrots
+
+
+
+
+ Favorite
+
+
+
+
+
+
+
+ Broccoli
+
+
+
+
+ Favorite
+
+
+
+
+
+
+
+ Celery
+
+
+
+
+ Favorite
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/item-group/sliding-items/index.md b/static/usage/v6/item-group/sliding-items/index.md
new file mode 100644
index 00000000000..c5d90b9bc8a
--- /dev/null
+++ b/static/usage/v6/item-group/sliding-items/index.md
@@ -0,0 +1,13 @@
+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/v6/item-group/sliding-items/javascript.md b/static/usage/v6/item-group/sliding-items/javascript.md
new file mode 100644
index 00000000000..a451b58c9c4
--- /dev/null
+++ b/static/usage/v6/item-group/sliding-items/javascript.md
@@ -0,0 +1,95 @@
+```html
+
+
+
+ Fruits
+
+
+
+
+
+
+ Grapes
+
+
+
+
+ Favorite
+
+
+
+
+
+
+
+ Apples
+
+
+
+
+ Favorite
+
+
+
+
+
+
+
+ Bananas
+
+
+
+
+ Favorite
+
+
+
+
+
+
+
+
+ Vegetables
+
+
+
+
+
+
+ Carrots
+
+
+
+
+ Favorite
+
+
+
+
+
+
+
+ Broccoli
+
+
+
+
+ Favorite
+
+
+
+
+
+
+
+ Celery
+
+
+
+
+ Favorite
+
+
+
+
+```
diff --git a/static/usage/v6/item-group/sliding-items/react.md b/static/usage/v6/item-group/sliding-items/react.md
new file mode 100644
index 00000000000..2ca4d7ca380
--- /dev/null
+++ b/static/usage/v6/item-group/sliding-items/react.md
@@ -0,0 +1,105 @@
+```tsx
+import React from 'react';
+import { IonItem, IonItemDivider, IonItemGroup, IonItemOption, IonItemOptions, IonItemSliding, IonLabel } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+
+ Fruits
+
+
+
+
+
+
+ Grapes
+
+
+
+
+ Favorite
+
+
+
+
+
+
+
+ Apples
+
+
+
+
+ Favorite
+
+
+
+
+
+
+
+ Bananas
+
+
+
+
+ Favorite
+
+
+
+
+
+
+
+
+ Vegetables
+
+
+
+
+
+
+ Carrots
+
+
+
+
+ Favorite
+
+
+
+
+
+
+
+ Broccoli
+
+
+
+
+ Favorite
+
+
+
+
+
+
+
+ Celery
+
+
+
+
+ Favorite
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/item-group/sliding-items/vue.md b/static/usage/v6/item-group/sliding-items/vue.md
new file mode 100644
index 00000000000..5110ba1abed
--- /dev/null
+++ b/static/usage/v6/item-group/sliding-items/vue.md
@@ -0,0 +1,106 @@
+```html
+
+
+
+
+ Fruits
+
+
+
+
+
+
+ Grapes
+
+
+
+
+ Favorite
+
+
+
+
+
+
+
+ Apples
+
+
+
+
+ Favorite
+
+
+
+
+
+
+
+ Bananas
+
+
+
+
+ Favorite
+
+
+
+
+
+
+
+
+ Vegetables
+
+
+
+
+
+
+ Carrots
+
+
+
+
+ Favorite
+
+
+
+
+
+
+
+ Broccoli
+
+
+
+
+ Favorite
+
+
+
+
+
+
+
+ Celery
+
+
+
+
+ Favorite
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/item-sliding/basic/angular.md b/static/usage/v6/item-sliding/basic/angular.md
new file mode 100644
index 00000000000..a5404da4cb4
--- /dev/null
+++ b/static/usage/v6/item-sliding/basic/angular.md
@@ -0,0 +1,39 @@
+```html
+
+
+
+ Sliding Item with End Options
+
+
+
+ Favorite
+ Delete
+
+
+
+
+
+ Archive
+
+
+
+ Sliding Item with Start Options
+
+
+
+
+
+ Archive
+
+
+
+ Sliding Item with Options on Both Sides
+
+
+
+ Favorite
+ Delete
+
+
+
+```
diff --git a/static/usage/v6/item-sliding/basic/demo.html b/static/usage/v6/item-sliding/basic/demo.html
new file mode 100644
index 00000000000..00e4bc82f99
--- /dev/null
+++ b/static/usage/v6/item-sliding/basic/demo.html
@@ -0,0 +1,66 @@
+
+
+
+
+
+
+ Item Sliding
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Sliding Item with End Options
+
+
+
+ Favorite
+ Delete
+
+
+
+
+
+ Archive
+
+
+
+ Sliding Item with Start Options
+
+
+
+
+
+ Archive
+
+
+
+ Sliding Item with Options on Both Sides
+
+
+
+ Favorite
+ Delete
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/item-sliding/basic/index.md b/static/usage/v6/item-sliding/basic/index.md
new file mode 100644
index 00000000000..0b03726eb1b
--- /dev/null
+++ b/static/usage/v6/item-sliding/basic/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/v6/item-sliding/basic/javascript.md b/static/usage/v6/item-sliding/basic/javascript.md
new file mode 100644
index 00000000000..a5404da4cb4
--- /dev/null
+++ b/static/usage/v6/item-sliding/basic/javascript.md
@@ -0,0 +1,39 @@
+```html
+
+
+
+ Sliding Item with End Options
+
+
+
+ Favorite
+ Delete
+
+
+
+
+
+ Archive
+
+
+
+ Sliding Item with Start Options
+
+
+
+
+
+ Archive
+
+
+
+ Sliding Item with Options on Both Sides
+
+
+
+ Favorite
+ Delete
+
+
+
+```
diff --git a/static/usage/v6/item-sliding/basic/react.md b/static/usage/v6/item-sliding/basic/react.md
new file mode 100644
index 00000000000..d9b45125574
--- /dev/null
+++ b/static/usage/v6/item-sliding/basic/react.md
@@ -0,0 +1,47 @@
+```tsx
+import React from 'react';
+import { IonItem, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList } from '@ionic/react';
+
+function Example() {
+ return (
+
+
+
+ Sliding Item with End Options
+
+
+
+ Favorite
+ Delete
+
+
+
+
+
+ Archive
+
+
+
+ Sliding Item with Start Options
+
+
+
+
+
+ Archive
+
+
+
+ Sliding Item with Options on Both Sides
+
+
+
+ Favorite
+ Delete
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/item-sliding/basic/vue.md b/static/usage/v6/item-sliding/basic/vue.md
new file mode 100644
index 00000000000..f6f8631a2bd
--- /dev/null
+++ b/static/usage/v6/item-sliding/basic/vue.md
@@ -0,0 +1,50 @@
+```html
+
+
+
+
+ Sliding Item with End Options
+
+
+
+ Favorite
+ Delete
+
+
+
+
+
+ Archive
+
+
+
+ Sliding Item with Start Options
+
+
+
+
+
+ Archive
+
+
+
+ Sliding Item with Options on Both Sides
+
+
+
+ Favorite
+ Delete
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/item-sliding/expandable/angular.md b/static/usage/v6/item-sliding/expandable/angular.md
new file mode 100644
index 00000000000..b7e37fa57c7
--- /dev/null
+++ b/static/usage/v6/item-sliding/expandable/angular.md
@@ -0,0 +1,18 @@
+```html
+
+
+
+ Archive
+
+
+
+ Sliding Item with Expandable Options
+
+
+
+ Favorite
+ Delete
+
+
+
+```
diff --git a/static/usage/v6/item-sliding/expandable/demo.html b/static/usage/v6/item-sliding/expandable/demo.html
new file mode 100644
index 00000000000..bfdb1ef5884
--- /dev/null
+++ b/static/usage/v6/item-sliding/expandable/demo.html
@@ -0,0 +1,45 @@
+
+
+
+
+
+
+ Item Sliding
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Archive
+
+
+
+ Sliding Item with Expandable Options
+
+
+
+ Favorite
+ Delete
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/item-sliding/expandable/index.md b/static/usage/v6/item-sliding/expandable/index.md
new file mode 100644
index 00000000000..d5025c568ac
--- /dev/null
+++ b/static/usage/v6/item-sliding/expandable/index.md
@@ -0,0 +1,13 @@
+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/v6/item-sliding/expandable/javascript.md b/static/usage/v6/item-sliding/expandable/javascript.md
new file mode 100644
index 00000000000..b7e37fa57c7
--- /dev/null
+++ b/static/usage/v6/item-sliding/expandable/javascript.md
@@ -0,0 +1,18 @@
+```html
+
+
+
+ Archive
+
+
+
+ Sliding Item with Expandable Options
+
+
+
+ Favorite
+ Delete
+
+
+
+```
diff --git a/static/usage/v6/item-sliding/expandable/react.md b/static/usage/v6/item-sliding/expandable/react.md
new file mode 100644
index 00000000000..3cb039d08ba
--- /dev/null
+++ b/static/usage/v6/item-sliding/expandable/react.md
@@ -0,0 +1,26 @@
+```tsx
+import React from 'react';
+import { IonItem, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList } from '@ionic/react';
+
+function Example() {
+ return (
+
+
+
+ Archive
+
+
+
+ Sliding Item with Expandable Options
+
+
+
+ Favorite
+ Delete
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/item-sliding/expandable/vue.md b/static/usage/v6/item-sliding/expandable/vue.md
new file mode 100644
index 00000000000..fc9ee8c25ca
--- /dev/null
+++ b/static/usage/v6/item-sliding/expandable/vue.md
@@ -0,0 +1,29 @@
+```html
+
+
+
+
+ Archive
+
+
+
+ Sliding Item with Expandable Options
+
+
+
+ Favorite
+ Delete
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/item-sliding/icons/angular.md b/static/usage/v6/item-sliding/icons/angular.md
new file mode 100644
index 00000000000..2ea983f2056
--- /dev/null
+++ b/static/usage/v6/item-sliding/icons/angular.md
@@ -0,0 +1,128 @@
+```html
+
+
+
+
+
+
+
+
+
+ Sliding Item with Icons Only
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Archive
+
+
+
+
+
+ Sliding Item with Start Icons
+
+
+
+
+
+
+ Favorite
+
+
+
+ Delete
+
+
+
+
+
+
+
+
+ Archive
+
+
+
+
+
+ Sliding Item with End Icons
+
+
+
+
+
+
+ Favorite
+
+
+
+ Delete
+
+
+
+
+
+
+
+
+ Archive
+
+
+
+
+
+ Sliding Item with Top Icons
+
+
+
+
+
+
+ Favorite
+
+
+
+ Delete
+
+
+
+
+
+
+
+
+ Archive
+
+
+
+
+
+ Sliding Item with Bottom Icons
+
+
+
+
+
+
+ Favorite
+
+
+
+ Delete
+
+
+
+
+```
diff --git a/static/usage/v6/item-sliding/icons/demo.html b/static/usage/v6/item-sliding/icons/demo.html
new file mode 100644
index 00000000000..6bc01e42837
--- /dev/null
+++ b/static/usage/v6/item-sliding/icons/demo.html
@@ -0,0 +1,156 @@
+
+
+
+
+
+
+ Item Sliding
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Sliding Item with Icons Only
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Archive
+
+
+
+
+
+ Sliding Item with Start Icons
+
+
+
+
+
+
+ Favorite
+
+
+
+ Delete
+
+
+
+
+
+
+
+
+ Archive
+
+
+
+
+
+ Sliding Item with End Icons
+
+
+
+
+
+
+ Favorite
+
+
+
+ Delete
+
+
+
+
+
+
+
+
+ Archive
+
+
+
+
+
+ Sliding Item with Top Icons
+
+
+
+
+
+
+ Favorite
+
+
+
+ Delete
+
+
+
+
+
+
+
+
+ Archive
+
+
+
+
+
+ Sliding Item with Bottom Icons
+
+
+
+
+
+
+ Favorite
+
+
+
+ Delete
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/item-sliding/icons/index.md b/static/usage/v6/item-sliding/icons/index.md
new file mode 100644
index 00000000000..6345bb374fb
--- /dev/null
+++ b/static/usage/v6/item-sliding/icons/index.md
@@ -0,0 +1,13 @@
+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/v6/item-sliding/icons/javascript.md b/static/usage/v6/item-sliding/icons/javascript.md
new file mode 100644
index 00000000000..2ea983f2056
--- /dev/null
+++ b/static/usage/v6/item-sliding/icons/javascript.md
@@ -0,0 +1,128 @@
+```html
+
+
+
+
+
+
+
+
+
+ Sliding Item with Icons Only
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Archive
+
+
+
+
+
+ Sliding Item with Start Icons
+
+
+
+
+
+
+ Favorite
+
+
+
+ Delete
+
+
+
+
+
+
+
+
+ Archive
+
+
+
+
+
+ Sliding Item with End Icons
+
+
+
+
+
+
+ Favorite
+
+
+
+ Delete
+
+
+
+
+
+
+
+
+ Archive
+
+
+
+
+
+ Sliding Item with Top Icons
+
+
+
+
+
+
+ Favorite
+
+
+
+ Delete
+
+
+
+
+
+
+
+
+ Archive
+
+
+
+
+
+ Sliding Item with Bottom Icons
+
+
+
+
+
+
+ Favorite
+
+
+
+ Delete
+
+
+
+
+```
diff --git a/static/usage/v6/item-sliding/icons/react.md b/static/usage/v6/item-sliding/icons/react.md
new file mode 100644
index 00000000000..be291c017e4
--- /dev/null
+++ b/static/usage/v6/item-sliding/icons/react.md
@@ -0,0 +1,137 @@
+```tsx
+import React from 'react';
+import { IonIcon, IonItem, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList } from '@ionic/react';
+import { archive, heart, trash } from 'ionicons/icons';
+
+function Example() {
+ return (
+
+
+
+
+
+
+
+
+
+ Sliding Item with Icons Only
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Archive
+
+
+
+
+
+ Sliding Item with Start Icons
+
+
+
+
+
+
+ Favorite
+
+
+
+ Delete
+
+
+
+
+
+
+
+
+ Archive
+
+
+
+
+
+ Sliding Item with End Icons
+
+
+
+
+
+
+ Favorite
+
+
+
+ Delete
+
+
+
+
+
+
+
+
+ Archive
+
+
+
+
+
+ Sliding Item with Top Icons
+
+
+
+
+
+
+ Favorite
+
+
+
+ Delete
+
+
+
+
+
+
+
+
+ Archive
+
+
+
+
+
+ Sliding Item with Bottom Icons
+
+
+
+
+
+
+ Favorite
+
+
+
+ Delete
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/item-sliding/icons/vue.md b/static/usage/v6/item-sliding/icons/vue.md
new file mode 100644
index 00000000000..6b456c9882e
--- /dev/null
+++ b/static/usage/v6/item-sliding/icons/vue.md
@@ -0,0 +1,143 @@
+```html
+
+
+
+
+
+
+
+
+
+
+ Sliding Item with Icons Only
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Archive
+
+
+
+
+
+ Sliding Item with Start Icons
+
+
+
+
+
+
+ Favorite
+
+
+
+ Delete
+
+
+
+
+
+
+
+
+ Archive
+
+
+
+
+
+ Sliding Item with End Icons
+
+
+
+
+
+
+ Favorite
+
+
+
+ Delete
+
+
+
+
+
+
+
+
+ Archive
+
+
+
+
+
+ Sliding Item with Top Icons
+
+
+
+
+
+
+ Favorite
+
+
+
+ Delete
+
+
+
+
+
+
+
+
+ Archive
+
+
+
+
+
+ Sliding Item with Bottom Icons
+
+
+
+
+
+
+ Favorite
+
+
+
+ Delete
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/item/basic/angular.md b/static/usage/v6/item/basic/angular.md
new file mode 100644
index 00000000000..f0b13250493
--- /dev/null
+++ b/static/usage/v6/item/basic/angular.md
@@ -0,0 +1,42 @@
+```html
+
+ Basic Item
+
+
+
+
+ Multi-line text that should ellipsis when it is too long
+ to fit on one line. Lorem ipsum dolor sit amet,
+ consectetur adipiscing elit.
+
+
+
+
+
+ Multi-line text that should wrap when it is too long
+ to fit on one line. Lorem ipsum dolor sit amet,
+ consectetur adipiscing elit.
+
+
+
+
+
+ H1 Heading
+ Paragraph
+
+
+
+
+
+ H2 Heading
+ Paragraph
+
+
+
+
+
+ H3 Heading
+ Paragraph
+
+
+```
diff --git a/static/usage/v6/item/basic/demo.html b/static/usage/v6/item/basic/demo.html
new file mode 100644
index 00000000000..55e5fe17a30
--- /dev/null
+++ b/static/usage/v6/item/basic/demo.html
@@ -0,0 +1,69 @@
+
+
+
+
+
+
+ Item
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Basic Item
+
+
+
+
+ Multi-line text that should ellipsis when it is too long
+ to fit on one line. Lorem ipsum dolor sit amet,
+ consectetur adipiscing elit.
+
+
+
+
+
+ Multi-line text that should wrap when it is too long
+ to fit on one line. Lorem ipsum dolor sit amet,
+ consectetur adipiscing elit.
+
+
+
+
+
+ H1 Heading
+ Paragraph
+
+
+
+
+
+ H2 Heading
+ Paragraph
+
+
+
+
+
+ H3 Heading
+ Paragraph
+
+
+
H1 Heading
+ Paragraph
+
+
+
+
+
+ H2 Heading
+ Paragraph
+
+
+
+
+
+ H3 Heading
+ Paragraph
+
+
+```
diff --git a/static/usage/v6/item/basic/react.md b/static/usage/v6/item/basic/react.md
new file mode 100644
index 00000000000..dfed86af19e
--- /dev/null
+++ b/static/usage/v6/item/basic/react.md
@@ -0,0 +1,52 @@
+```tsx
+import React from 'react';
+import { IonItem, IonLabel } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+ Basic Item
+
+
+
+
+ Multi-line text that should ellipsis when it is too long
+ to fit on one line. Lorem ipsum dolor sit amet,
+ consectetur adipiscing elit.
+
+
+
+
+
+ Multi-line text that should wrap when it is too long
+ to fit on one line. Lorem ipsum dolor sit amet,
+ consectetur adipiscing elit.
+
+
+
+
+
+ H1 Heading
+ Paragraph
+
+
+
+
+
+ H2 Heading
+ Paragraph
+
+
+
+
+
+ H3 Heading
+ Paragraph
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/item/basic/vue.md b/static/usage/v6/item/basic/vue.md
new file mode 100644
index 00000000000..479e90196a4
--- /dev/null
+++ b/static/usage/v6/item/basic/vue.md
@@ -0,0 +1,53 @@
+```html
+
+
+ Basic Item
+
+
+
+
+ Multi-line text that should ellipsis when it is too long
+ to fit on one line. Lorem ipsum dolor sit amet,
+ consectetur adipiscing elit.
+
+
+
+
+
+ Multi-line text that should wrap when it is too long
+ to fit on one line. Lorem ipsum dolor sit amet,
+ consectetur adipiscing elit.
+
+
+
+
+
+ H1 Heading
+ Paragraph
+
+
+
+
+
+ H2 Heading
+ Paragraph
+
+
+
+
+
+ H3 Heading
+ Paragraph
+
+
+
+
+
+```
diff --git a/static/usage/v6/item/buttons/angular.md b/static/usage/v6/item/buttons/angular.md
new file mode 100644
index 00000000000..bf7069f48f7
--- /dev/null
+++ b/static/usage/v6/item/buttons/angular.md
@@ -0,0 +1,46 @@
+```html
+
+
+ Start
+
+ Default Buttons
+
+ End
+
+
+
+
+
+ Start
+
+
+ Buttons with Icons
+
+
+ End
+
+
+
+
+
+
+
+ Icon only Buttons
+
+
+
+
+
+
+ Button Sizes
+
+ Small
+
+
+ Default
+
+
+ Large
+
+
+```
diff --git a/static/usage/v6/item/buttons/demo.html b/static/usage/v6/item/buttons/demo.html
new file mode 100644
index 00000000000..08847fb4fff
--- /dev/null
+++ b/static/usage/v6/item/buttons/demo.html
@@ -0,0 +1,74 @@
+
+
+
+
+
+
+ Item
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Start
+
+ Default Buttons
+
+ End
+
+
+
+
+
+ Start
+
+
+ Buttons with Icons
+
+
+ End
+
+
+
+
+
+
+
+ Icon only Buttons
+
+
+
+
+
+
+ Button Sizes
+
+ Small
+
+
+ Default
+
+
+ Large
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/item/buttons/index.md b/static/usage/v6/item/buttons/index.md
new file mode 100644
index 00000000000..d46337926bc
--- /dev/null
+++ b/static/usage/v6/item/buttons/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/v6/item/buttons/javascript.md b/static/usage/v6/item/buttons/javascript.md
new file mode 100644
index 00000000000..bf7069f48f7
--- /dev/null
+++ b/static/usage/v6/item/buttons/javascript.md
@@ -0,0 +1,46 @@
+```html
+
+
+ Start
+
+ Default Buttons
+
+ End
+
+
+
+
+
+ Start
+
+
+ Buttons with Icons
+
+
+ End
+
+
+
+
+
+
+
+ Icon only Buttons
+
+
+
+
+
+
+ Button Sizes
+
+ Small
+
+
+ Default
+
+
+ Large
+
+
+```
diff --git a/static/usage/v6/item/buttons/react.md b/static/usage/v6/item/buttons/react.md
new file mode 100644
index 00000000000..8776e5215fb
--- /dev/null
+++ b/static/usage/v6/item/buttons/react.md
@@ -0,0 +1,57 @@
+```tsx
+import React from 'react';
+import { IonButton, IonIcon, IonItem, IonLabel } from '@ionic/react';
+import { home, navigate, star } from 'ionicons/icons';
+
+function Example() {
+ return (
+ <>
+
+
+ Start
+
+ Default Buttons
+
+ End
+
+
+
+
+
+ Start
+
+
+ Buttons with Icons
+
+
+ End
+
+
+
+
+
+
+
+ Icon only Buttons
+
+
+
+
+
+
+ Button Sizes
+
+ Small
+
+
+ Default
+
+
+ Large
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/item/buttons/vue.md b/static/usage/v6/item/buttons/vue.md
new file mode 100644
index 00000000000..02de38e58ab
--- /dev/null
+++ b/static/usage/v6/item/buttons/vue.md
@@ -0,0 +1,61 @@
+```html
+
+
+
+ Start
+
+ Default Buttons
+
+ End
+
+
+
+
+
+ Start
+
+
+ Buttons with Icons
+
+
+ End
+
+
+
+
+
+
+
+ Icon only Buttons
+
+
+
+
+
+
+ Button Sizes
+
+ Small
+
+
+ Default
+
+
+ Large
+
+
+
+
+
+```
diff --git a/static/usage/v6/item/clickable/angular.md b/static/usage/v6/item/clickable/angular.md
new file mode 100644
index 00000000000..7e8ac266eb2
--- /dev/null
+++ b/static/usage/v6/item/clickable/angular.md
@@ -0,0 +1,17 @@
+```html
+
+ Anchor Item
+
+
+
+ Disabled Anchor Item
+
+
+
+ Button Item
+
+
+
+ Disabled Button Item
+
+```
diff --git a/static/usage/v6/item/clickable/demo.html b/static/usage/v6/item/clickable/demo.html
new file mode 100644
index 00000000000..189cbffbd35
--- /dev/null
+++ b/static/usage/v6/item/clickable/demo.html
@@ -0,0 +1,44 @@
+
+
+
+
+
+
+ Item
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Anchor Item
+
+
+
+ Disabled Anchor Item
+
+
+
+ Button Item
+
+
+
+ Disabled Button Item
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/item/clickable/index.md b/static/usage/v6/item/clickable/index.md
new file mode 100644
index 00000000000..91e3cc80ba6
--- /dev/null
+++ b/static/usage/v6/item/clickable/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/v6/item/clickable/javascript.md b/static/usage/v6/item/clickable/javascript.md
new file mode 100644
index 00000000000..7e8ac266eb2
--- /dev/null
+++ b/static/usage/v6/item/clickable/javascript.md
@@ -0,0 +1,17 @@
+```html
+
+ Anchor Item
+
+
+
+ Disabled Anchor Item
+
+
+
+ Button Item
+
+
+
+ Disabled Button Item
+
+```
diff --git a/static/usage/v6/item/clickable/react.md b/static/usage/v6/item/clickable/react.md
new file mode 100644
index 00000000000..c83845b65c7
--- /dev/null
+++ b/static/usage/v6/item/clickable/react.md
@@ -0,0 +1,27 @@
+```tsx
+import React from 'react';
+import { IonItem, IonLabel } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+ Anchor Item
+
+
+
+ Disabled Anchor Item
+
+
+
+ Button Item
+
+
+
+ Disabled Button Item
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/item/clickable/vue.md b/static/usage/v6/item/clickable/vue.md
new file mode 100644
index 00000000000..1af8f362758
--- /dev/null
+++ b/static/usage/v6/item/clickable/vue.md
@@ -0,0 +1,28 @@
+```html
+
+
+ Anchor Item
+
+
+
+ Disabled Anchor Item
+
+
+
+ Button Item
+
+
+
+ Disabled Button Item
+
+
+
+
+```
diff --git a/static/usage/v6/item/counter/angular/example_component_html.md b/static/usage/v6/item/counter/angular/example_component_html.md
new file mode 100644
index 00000000000..913d6644cfc
--- /dev/null
+++ b/static/usage/v6/item/counter/angular/example_component_html.md
@@ -0,0 +1,11 @@
+```html
+
+ Default Counter
+
+
+
+
+ Custom Counter Format
+
+
+```
diff --git a/static/usage/v6/item/counter/angular/example_component_ts.md b/static/usage/v6/item/counter/angular/example_component_ts.md
new file mode 100644
index 00000000000..2c08dc06fc2
--- /dev/null
+++ b/static/usage/v6/item/counter/angular/example_component_ts.md
@@ -0,0 +1,13 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ customCounterFormatter(inputLength: number, maxLength: number) {
+ return `${maxLength - inputLength} characters remaining`;
+ }
+}
+```
diff --git a/static/usage/v6/item/counter/demo.html b/static/usage/v6/item/counter/demo.html
new file mode 100644
index 00000000000..cb68d350bc2
--- /dev/null
+++ b/static/usage/v6/item/counter/demo.html
@@ -0,0 +1,47 @@
+
+
+
+
+
+
+ Item
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Default Counter
+
+
+
+
+ Custom Counter Format
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/item/counter/index.md b/static/usage/v6/item/counter/index.md
new file mode 100644
index 00000000000..b06fb2ecf1a
--- /dev/null
+++ b/static/usage/v6/item/counter/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+import react from './react.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/v6/item/counter/javascript.md b/static/usage/v6/item/counter/javascript.md
new file mode 100644
index 00000000000..761f1819ef9
--- /dev/null
+++ b/static/usage/v6/item/counter/javascript.md
@@ -0,0 +1,16 @@
+```html
+
+ Default Counter
+
+
+
+
+ Custom Counter Format
+
+
+
+
+```
diff --git a/static/usage/v6/item/counter/react.md b/static/usage/v6/item/counter/react.md
new file mode 100644
index 00000000000..435701d5b53
--- /dev/null
+++ b/static/usage/v6/item/counter/react.md
@@ -0,0 +1,21 @@
+```tsx
+import React from 'react';
+import { IonInput, IonItem, IonLabel } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+ Default Counter
+
+
+
+ `${maxLength - inputLength} characters remaining`}>
+ Custom Counter Format
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/item/counter/vue.md b/static/usage/v6/item/counter/vue.md
new file mode 100644
index 00000000000..3a97d40743a
--- /dev/null
+++ b/static/usage/v6/item/counter/vue.md
@@ -0,0 +1,27 @@
+```html
+
+
+ Default Counter
+
+
+
+
+ Custom Counter Format
+
+
+
+
+
+```
diff --git a/static/usage/v6/item/detail-arrows/angular.md b/static/usage/v6/item/detail-arrows/angular.md
new file mode 100644
index 00000000000..aa14eb9ec2d
--- /dev/null
+++ b/static/usage/v6/item/detail-arrows/angular.md
@@ -0,0 +1,37 @@
+```html
+
+
+ Text Item
+ Detail set to true - detail arrow displays on both modes
+
+
+
+
+
+ Button Item
+ Default detail - detail arrow displays on iOS only
+
+
+
+
+
+ Button Item
+ Detail set to true - detail arrow displays on both modes
+
+
+
+
+
+ Button Item
+ Detail set to false - detail arrow hidden on both modes
+
+
+
+
+
+ Button Item
+ Detail set to true - detail arrow displays on both modes
+ Detail icon set to caret-forward-outline
+
+
+```
diff --git a/static/usage/v6/item/detail-arrows/demo.html b/static/usage/v6/item/detail-arrows/demo.html
new file mode 100644
index 00000000000..1cc1c907045
--- /dev/null
+++ b/static/usage/v6/item/detail-arrows/demo.html
@@ -0,0 +1,64 @@
+
+
+
+
+
+
+ Item
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Text Item
+ Detail set to true - detail arrow displays on both modes
+
+
+
+
+
+ Button Item
+ Default detail - detail arrow displays on iOS only
+
+
+
+
+
+ Button Item
+ Detail set to true - detail arrow displays on both modes
+
+
+
+
+
+ Button Item
+ Detail set to false - detail arrow hidden on both modes
+
+
+
+
+
+ Button Item
+ Detail set to true - detail arrow displays on both modes
+ Detail icon set to caret-forward-outline
+
+
+
Text Item
+ Detail set to true - detail arrow displays on both modes
+
+
+
+
+
+ Button Item
+ Default detail - detail arrow displays on iOS only
+
+
+
+
+
+ Button Item
+ Detail set to true - detail arrow displays on both modes
+
+
+
+
+
+ Button Item
+ Detail set to false - detail arrow hidden on both modes
+
+
+
+
+
+ Button Item
+ Detail set to true - detail arrow displays on both modes
+ Detail icon set to caret-forward-outline
+
+
+```
diff --git a/static/usage/v6/item/detail-arrows/react.md b/static/usage/v6/item/detail-arrows/react.md
new file mode 100644
index 00000000000..de16b10fde6
--- /dev/null
+++ b/static/usage/v6/item/detail-arrows/react.md
@@ -0,0 +1,48 @@
+```tsx
+import React from 'react';
+import { IonItem, IonLabel } from '@ionic/react';
+import { caretForwardOutline } from 'ionicons/icons';
+
+function Example() {
+ return (
+ <>
+
+
+ Text Item
+ Detail set to true - detail arrow displays on both modes
+
+
+
+
+
+ Button Item
+ Default detail - detail arrow displays on iOS only
+
+
+
+
+
+ Button Item
+ Detail set to true - detail arrow displays on both modes
+
+
+
+
+
+ Button Item
+ Detail set to false - detail arrow hidden on both modes
+
+
+
+
+
+ Button Item
+ Detail set to true - detail arrow displays on both modes
+ Detail icon set to caret-forward-outline
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/item/detail-arrows/vue.md b/static/usage/v6/item/detail-arrows/vue.md
new file mode 100644
index 00000000000..d341c004f15
--- /dev/null
+++ b/static/usage/v6/item/detail-arrows/vue.md
@@ -0,0 +1,53 @@
+```html
+
+
+
+ Text Item
+ Detail set to true - detail arrow displays on both modes
+
+
+
+
+
+ Button Item
+ Default detail - detail arrow displays on iOS only
+
+
+
+
+
+ Button Item
+ Detail set to true - detail arrow displays on both modes
+
+
+
+
+
+ Button Item
+ Detail set to false - detail arrow hidden on both modes
+
+
+
+
+
+ Button Item
+ Detail set to true - detail arrow displays on both modes
+ Detail icon set to caret-forward-outline
+
+
+
+
+
diff --git a/static/usage/v6/item/helper-error/angular.md b/static/usage/v6/item/helper-error/angular.md
new file mode 100644
index 00000000000..05959c95210
--- /dev/null
+++ b/static/usage/v6/item/helper-error/angular.md
@@ -0,0 +1,8 @@
+```html
+
+ Email
+
+ Enter a valid email
+ Invalid email
+
+```
diff --git a/static/usage/v6/item/helper-error/demo.html b/static/usage/v6/item/helper-error/demo.html
new file mode 100644
index 00000000000..399f66d1270
--- /dev/null
+++ b/static/usage/v6/item/helper-error/demo.html
@@ -0,0 +1,56 @@
+
+
+
+
+
+
+ Item
+
+
+
+
+
+
+
+
+
+
+
+ Email
+
+ Enter a valid email
+ Invalid email
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/item/helper-error/index.md b/static/usage/v6/item/helper-error/index.md
new file mode 100644
index 00000000000..021ea8858cf
--- /dev/null
+++ b/static/usage/v6/item/helper-error/index.md
@@ -0,0 +1,18 @@
+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/v6/item/helper-error/javascript.md b/static/usage/v6/item/helper-error/javascript.md
new file mode 100644
index 00000000000..eb0d43327d9
--- /dev/null
+++ b/static/usage/v6/item/helper-error/javascript.md
@@ -0,0 +1,35 @@
+```html
+
+ Email
+
+ Enter a valid email
+ Invalid email
+
+
+
+```
diff --git a/static/usage/v6/item/helper-error/react.md b/static/usage/v6/item/helper-error/react.md
new file mode 100644
index 00000000000..a1e0e1e1b25
--- /dev/null
+++ b/static/usage/v6/item/helper-error/react.md
@@ -0,0 +1,39 @@
+```tsx
+import React, { useState } from 'react';
+import { IonInput, IonItem, IonLabel, IonNote } from '@ionic/react';
+
+function Example() {
+ const [isTouched, setIsTouched] = useState(false);
+ const [isValid, setIsValid] = useState();
+
+ const validateEmail = (email: string) => {
+ return email.match(
+ /^(?=.{1,254}$)(?=.{1,64}@)[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/
+ );
+ };
+
+ const validate = (ev: Event) => {
+ const value = (ev.target as HTMLInputElement).value;
+
+ setIsValid(undefined);
+
+ if (value === '') return;
+
+ validateEmail(value) !== null ? setIsValid(true) : setIsValid(false);
+ };
+
+ const markTouched = () => {
+ setIsTouched(true);
+ };
+
+ return (
+
+ Email
+ validate(event)} onIonBlur={() => markTouched()}>
+ Enter a valid email
+ Invalid email
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/item/helper-error/vue.md b/static/usage/v6/item/helper-error/vue.md
new file mode 100644
index 00000000000..0febb45cfe4
--- /dev/null
+++ b/static/usage/v6/item/helper-error/vue.md
@@ -0,0 +1,41 @@
+```html
+
+
+ Email
+
+ Enter a valid email
+ Invalid email
+
+
+
+
+```
diff --git a/static/usage/v6/item/icons/angular.md b/static/usage/v6/item/icons/angular.md
new file mode 100644
index 00000000000..49a1cc707e3
--- /dev/null
+++ b/static/usage/v6/item/icons/angular.md
@@ -0,0 +1,29 @@
+```html
+
+
+ Default Icon
+
+
+
+
+
+
+ Large Icon
+
+
+
+
+
+
+ Small Icon
+
+
+
+
+
+
+
+ Default Icon
+
+
+```
diff --git a/static/usage/v6/item/icons/demo.html b/static/usage/v6/item/icons/demo.html
new file mode 100644
index 00000000000..6cbd9d1b2a9
--- /dev/null
+++ b/static/usage/v6/item/icons/demo.html
@@ -0,0 +1,56 @@
+
+
+
+
+
+
+ Item
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Default Icon
+
+
+
+
+
+
+ Large Icon
+
+
+
+
+
+
+ Small Icon
+
+
+
+
+
+
+
+ Default Icon
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/item/icons/index.md b/static/usage/v6/item/icons/index.md
new file mode 100644
index 00000000000..97b18d73650
--- /dev/null
+++ b/static/usage/v6/item/icons/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/v6/item/icons/javascript.md b/static/usage/v6/item/icons/javascript.md
new file mode 100644
index 00000000000..49a1cc707e3
--- /dev/null
+++ b/static/usage/v6/item/icons/javascript.md
@@ -0,0 +1,29 @@
+```html
+
+
+ Default Icon
+
+
+
+
+
+
+ Large Icon
+
+
+
+
+
+
+ Small Icon
+
+
+
+
+
+
+
+ Default Icon
+
+
+```
diff --git a/static/usage/v6/item/icons/react.md b/static/usage/v6/item/icons/react.md
new file mode 100644
index 00000000000..a5fc0ae6629
--- /dev/null
+++ b/static/usage/v6/item/icons/react.md
@@ -0,0 +1,40 @@
+```tsx
+import React from 'react';
+import { IonIcon, IonItem, IonLabel } from '@ionic/react';
+import { informationCircle, star } from 'ionicons/icons';
+
+function Example() {
+ return (
+ <>
+
+
+ Default Icon
+
+
+
+
+
+
+ Large Icon
+
+
+
+
+
+
+ Small Icon
+
+
+
+
+
+
+
+ Default Icon
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/item/icons/vue.md b/static/usage/v6/item/icons/vue.md
new file mode 100644
index 00000000000..82e09004fbe
--- /dev/null
+++ b/static/usage/v6/item/icons/vue.md
@@ -0,0 +1,44 @@
+```html
+
+
+
+ Default Icon
+
+
+
+
+
+
+ Large Icon
+
+
+
+
+
+
+ Small Icon
+
+
+
+
+
+
+
+ Default Icon
+
+
+
+
+
+```
diff --git a/static/usage/v6/item/inputs/angular.md b/static/usage/v6/item/inputs/angular.md
new file mode 100644
index 00000000000..013e672ae99
--- /dev/null
+++ b/static/usage/v6/item/inputs/angular.md
@@ -0,0 +1,59 @@
+```html
+
+ Default Input
+
+
+
+
+ Fixed Input
+
+
+
+
+ Stacked Input
+
+
+
+
+ Floating Input
+
+
+
+
+ Floating Input: Outline (MD only)
+
+
+
+
+ Floating Input: Solid (MD only)
+
+
+
+
+ Select
+
+ No Game Console
+ NES
+ Nintendo64
+ PlayStation
+ Sega Genesis
+ Sega Saturn
+ SNES
+
+
+
+
+ Toggle
+
+
+
+
+ Checkbox
+
+
+
+
+ Range
+
+
+```
diff --git a/static/usage/v6/item/inputs/demo.html b/static/usage/v6/item/inputs/demo.html
new file mode 100644
index 00000000000..4ab92196b2e
--- /dev/null
+++ b/static/usage/v6/item/inputs/demo.html
@@ -0,0 +1,86 @@
+
+
+
+
+
+
+ Item
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Default Input
+
+
+
+
+ Fixed Input
+
+
+
+
+ Stacked Input
+
+
+
+
+ Floating Input
+
+
+
+
+ Floating Input: Outline (MD only)
+
+
+
+
+ Floating Input: Solid (MD only)
+
+
+
+
+ Select
+
+ No Game Console
+ NES
+ Nintendo64
+ PlayStation
+ Sega Genesis
+ Sega Saturn
+ SNES
+
+
+
+
+ Toggle
+
+
+
+
+ Checkbox
+
+
+
+
+ Range
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/item/inputs/index.md b/static/usage/v6/item/inputs/index.md
new file mode 100644
index 00000000000..069052abc58
--- /dev/null
+++ b/static/usage/v6/item/inputs/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/v6/item/inputs/javascript.md b/static/usage/v6/item/inputs/javascript.md
new file mode 100644
index 00000000000..013e672ae99
--- /dev/null
+++ b/static/usage/v6/item/inputs/javascript.md
@@ -0,0 +1,59 @@
+```html
+
+ Default Input
+
+
+
+
+ Fixed Input
+
+
+
+
+ Stacked Input
+
+
+
+
+ Floating Input
+
+
+
+
+ Floating Input: Outline (MD only)
+
+
+
+
+ Floating Input: Solid (MD only)
+
+
+
+
+ Select
+
+ No Game Console
+ NES
+ Nintendo64
+ PlayStation
+ Sega Genesis
+ Sega Saturn
+ SNES
+
+
+
+
+ Toggle
+
+
+
+
+ Checkbox
+
+
+
+
+ Range
+
+
+```
diff --git a/static/usage/v6/item/inputs/react.md b/static/usage/v6/item/inputs/react.md
new file mode 100644
index 00000000000..0cb6523f053
--- /dev/null
+++ b/static/usage/v6/item/inputs/react.md
@@ -0,0 +1,69 @@
+```tsx
+import React from 'react';
+import { IonCheckbox, IonInput, IonItem, IonLabel, IonRange, IonSelect, IonSelectOption, IonToggle } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+ Default Input
+
+
+
+
+ Fixed Input
+
+
+
+
+ Stacked Input
+
+
+
+
+ Floating Input
+
+
+
+
+ Floating Input: Outline (MD only)
+
+
+
+
+ Floating Input: Solid (MD only)
+
+
+
+
+ Select
+
+ No Game Console
+ NES
+ Nintendo64
+ PlayStation
+ Sega Genesis
+ Sega Saturn
+ SNES
+
+
+
+
+ Toggle
+
+
+
+
+ Checkbox
+
+
+
+
+ Range
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/item/inputs/vue.md b/static/usage/v6/item/inputs/vue.md
new file mode 100644
index 00000000000..7dc085a7a4d
--- /dev/null
+++ b/static/usage/v6/item/inputs/vue.md
@@ -0,0 +1,70 @@
+```html
+
+
+ Default Input
+
+
+
+
+ Fixed Input
+
+
+
+
+ Stacked Input
+
+
+
+
+ Floating Input
+
+
+
+
+ Floating Input: Outline (MD only)
+
+
+
+
+ Floating Input: Solid (MD only)
+
+
+
+
+ Select
+
+ No Game Console
+ NES
+ Nintendo64
+ PlayStation
+ Sega Genesis
+ Sega Saturn
+ SNES
+
+
+
+
+ Toggle
+
+
+
+
+ Checkbox
+
+
+
+
+ Range
+
+
+
+
+
+```
diff --git a/static/usage/v6/item/lines/angular.md b/static/usage/v6/item/lines/angular.md
new file mode 100644
index 00000000000..b0700ae1a1b
--- /dev/null
+++ b/static/usage/v6/item/lines/angular.md
@@ -0,0 +1,43 @@
+```html
+
+
+ Default Item Lines
+
+
+
+
+ Item Lines Inset
+
+
+
+ Item Lines Full
+
+
+
+ Item Lines None
+
+
+
+
+ Default Item Lines
+
+
+
+
+
+ Item Lines Inset
+
+
+
+
+
+ Item Lines Full
+
+
+
+
+
+ Item Lines None
+
+
+```
diff --git a/static/usage/v6/item/lines/demo.html b/static/usage/v6/item/lines/demo.html
new file mode 100644
index 00000000000..79cb3ce7933
--- /dev/null
+++ b/static/usage/v6/item/lines/demo.html
@@ -0,0 +1,70 @@
+
+
+
+
+
+
+ Item
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Default Item Lines
+
+
+
+
+ Item Lines Inset
+
+
+
+ Item Lines Full
+
+
+
+ Item Lines None
+
+
+
+
+ Default Item Lines
+
+
+
+
+
+ Item Lines Inset
+
+
+
+
+
+ Item Lines Full
+
+
+
+
+
+ Item Lines None
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/item/lines/index.md b/static/usage/v6/item/lines/index.md
new file mode 100644
index 00000000000..f1ccef30f7e
--- /dev/null
+++ b/static/usage/v6/item/lines/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/v6/item/lines/javascript.md b/static/usage/v6/item/lines/javascript.md
new file mode 100644
index 00000000000..b0700ae1a1b
--- /dev/null
+++ b/static/usage/v6/item/lines/javascript.md
@@ -0,0 +1,43 @@
+```html
+
+
+ Default Item Lines
+
+
+
+
+ Item Lines Inset
+
+
+
+ Item Lines Full
+
+
+
+ Item Lines None
+
+
+
+
+ Default Item Lines
+
+
+
+
+
+ Item Lines Inset
+
+
+
+
+
+ Item Lines Full
+
+
+
+
+
+ Item Lines None
+
+
+```
diff --git a/static/usage/v6/item/lines/react.md b/static/usage/v6/item/lines/react.md
new file mode 100644
index 00000000000..c5e2cf3f55c
--- /dev/null
+++ b/static/usage/v6/item/lines/react.md
@@ -0,0 +1,54 @@
+```tsx
+import React from 'react';
+import { IonIcon, IonItem, IonLabel } from '@ionic/react';
+import { informationCircle, star } from 'ionicons/icons';
+
+function Example() {
+ return (
+ <>
+
+
+ Default Item Lines
+
+
+
+
+ Item Lines Inset
+
+
+
+ Item Lines Full
+
+
+
+ Item Lines None
+
+
+
+
+ Default Item Lines
+
+
+
+
+
+ Item Lines Inset
+
+
+
+
+
+ Item Lines Full
+
+
+
+
+
+ Item Lines None
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/item/lines/vue.md b/static/usage/v6/item/lines/vue.md
new file mode 100644
index 00000000000..37c6c432ca4
--- /dev/null
+++ b/static/usage/v6/item/lines/vue.md
@@ -0,0 +1,58 @@
+```html
+
+
+
+ Default Item Lines
+
+
+
+
+ Item Lines Inset
+
+
+
+ Item Lines Full
+
+
+
+ Item Lines None
+
+
+
+
+ Default Item Lines
+
+
+
+
+
+ Item Lines Inset
+
+
+
+
+
+ Item Lines Full
+
+
+
+
+
+ Item Lines None
+
+
+
+
+
+```
diff --git a/static/usage/v6/item/media/angular.md b/static/usage/v6/item/media/angular.md
new file mode 100644
index 00000000000..915969f127e
--- /dev/null
+++ b/static/usage/v6/item/media/angular.md
@@ -0,0 +1,19 @@
+```html
+
+
+ 
+
+
+ Avatar Item
+
+
+
+
+
+ 
+
+
+ Thumbnail Item
+
+
+```
diff --git a/static/usage/v6/item/media/demo.html b/static/usage/v6/item/media/demo.html
new file mode 100644
index 00000000000..451c5d6eaf1
--- /dev/null
+++ b/static/usage/v6/item/media/demo.html
@@ -0,0 +1,46 @@
+
+
+
+
+
+
+ Item
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Avatar Item
+
+
+
+
+
+
+
+
+ Thumbnail Item
+
+
+
+
+ Default Item
+
+
+ Primary Item
+
+
+ Secondary Item
+
+
+ Tertiary Item
+
+
+ Success Item
+
+
+ Warning Item
+
+
+ Danger Item
+
+
+ Light Item
+
+
+ Medium Item
+
+
+ Dark Item
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/item/theming/colors/index.md b/static/usage/v6/item/theming/colors/index.md
new file mode 100644
index 00000000000..c646ae03dbe
--- /dev/null
+++ b/static/usage/v6/item/theming/colors/index.md
@@ -0,0 +1,13 @@
+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/v6/item/theming/colors/javascript.md b/static/usage/v6/item/theming/colors/javascript.md
new file mode 100644
index 00000000000..f1b6dd45e0c
--- /dev/null
+++ b/static/usage/v6/item/theming/colors/javascript.md
@@ -0,0 +1,32 @@
+```html
+
+ Default Item
+
+
+ Primary Item
+
+
+ Secondary Item
+
+
+ Tertiary Item
+
+
+ Success Item
+
+
+ Warning Item
+
+
+ Danger Item
+
+
+ Light Item
+
+
+ Medium Item
+
+
+ Dark Item
+
+```
diff --git a/static/usage/v6/item/theming/colors/react.md b/static/usage/v6/item/theming/colors/react.md
new file mode 100644
index 00000000000..2efad83cba3
--- /dev/null
+++ b/static/usage/v6/item/theming/colors/react.md
@@ -0,0 +1,42 @@
+```tsx
+import React from 'react';
+import { IonItem, IonLabel } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+ Default Item
+
+
+ Primary Item
+
+
+ Secondary Item
+
+
+ Tertiary Item
+
+
+ Success Item
+
+
+ Warning Item
+
+
+ Danger Item
+
+
+ Light Item
+
+
+ Medium Item
+
+
+ Dark Item
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/item/theming/colors/vue.md b/static/usage/v6/item/theming/colors/vue.md
new file mode 100644
index 00000000000..b98f625e479
--- /dev/null
+++ b/static/usage/v6/item/theming/colors/vue.md
@@ -0,0 +1,43 @@
+```html
+
+
+ Default Item
+
+
+ Primary Item
+
+
+ Secondary Item
+
+
+ Tertiary Item
+
+
+ Success Item
+
+
+ Warning Item
+
+
+ Danger Item
+
+
+ Light Item
+
+
+ Medium Item
+
+
+ Dark Item
+
+
+
+
+```
diff --git a/static/usage/v6/item/theming/css-properties/angular/example_component_css.md b/static/usage/v6/item/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..8a8b6be7f5b
--- /dev/null
+++ b/static/usage/v6/item/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,18 @@
+```css
+ion-item {
+ --background: #19422d;
+ --color: #fff;
+
+ --border-color: #fff;
+ --border-style: dashed;
+ --border-width: 2px;
+
+ --border-radius: 20px;
+
+ --ripple-color: purple;
+
+ --detail-icon-color: white;
+ --detail-icon-opacity: 1;
+ --detail-icon-font-size: 20px;
+}
+```
diff --git a/static/usage/v6/item/theming/css-properties/angular/example_component_html.md b/static/usage/v6/item/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..4bc8310465a
--- /dev/null
+++ b/static/usage/v6/item/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,13 @@
+```html
+
+ Custom Item
+
+
+
+ Custom Item
+
+
+
+ Custom Item
+
+```
diff --git a/static/usage/v6/item/theming/css-properties/demo.html b/static/usage/v6/item/theming/css-properties/demo.html
new file mode 100644
index 00000000000..c255a677199
--- /dev/null
+++ b/static/usage/v6/item/theming/css-properties/demo.html
@@ -0,0 +1,57 @@
+
+
+
+
+
+
+ Item
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Custom Item
+
+
+
+ Custom Item
+
+
+
+ Custom Item
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/item/theming/css-properties/index.md b/static/usage/v6/item/theming/css-properties/index.md
new file mode 100644
index 00000000000..5db040f5834
--- /dev/null
+++ b/static/usage/v6/item/theming/css-properties/index.md
@@ -0,0 +1,32 @@
+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/v6/item/theming/css-properties/javascript.md b/static/usage/v6/item/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..d1ad4121c2d
--- /dev/null
+++ b/static/usage/v6/item/theming/css-properties/javascript.md
@@ -0,0 +1,32 @@
+```html
+
+ Custom Item
+
+
+
+ Custom Item
+
+
+
+ Custom Item
+
+
+
+```
diff --git a/static/usage/v6/item/theming/css-properties/react/main_css.md b/static/usage/v6/item/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..8a8b6be7f5b
--- /dev/null
+++ b/static/usage/v6/item/theming/css-properties/react/main_css.md
@@ -0,0 +1,18 @@
+```css
+ion-item {
+ --background: #19422d;
+ --color: #fff;
+
+ --border-color: #fff;
+ --border-style: dashed;
+ --border-width: 2px;
+
+ --border-radius: 20px;
+
+ --ripple-color: purple;
+
+ --detail-icon-color: white;
+ --detail-icon-opacity: 1;
+ --detail-icon-font-size: 20px;
+}
+```
diff --git a/static/usage/v6/item/theming/css-properties/react/main_tsx.md b/static/usage/v6/item/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..0d8329f134a
--- /dev/null
+++ b/static/usage/v6/item/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,25 @@
+```tsx
+import React from 'react';
+import { IonItem, IonLabel } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+
+ Custom Item
+
+
+
+ Custom Item
+
+
+
+ Custom Item
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/item/theming/css-properties/vue.md b/static/usage/v6/item/theming/css-properties/vue.md
new file mode 100644
index 00000000000..305102b811b
--- /dev/null
+++ b/static/usage/v6/item/theming/css-properties/vue.md
@@ -0,0 +1,43 @@
+```html
+
+
+ Custom Item
+
+
+
+ Custom Item
+
+
+
+ Custom Item
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/item/theming/css-shadow-parts/angular/example_component_css.md b/static/usage/v6/item/theming/css-shadow-parts/angular/example_component_css.md
new file mode 100644
index 00000000000..0c5e9969494
--- /dev/null
+++ b/static/usage/v6/item/theming/css-shadow-parts/angular/example_component_css.md
@@ -0,0 +1,18 @@
+```css
+ion-item::part(native) {
+ background: #19422d;
+ color: #fff;
+
+ border-color: #fff;
+ border-style: dashed;
+ border-width: 2px;
+
+ border-radius: 20px;
+}
+
+ion-item::part(detail-icon) {
+ color: white;
+ opacity: 1;
+ font-size: 20px;
+}
+```
diff --git a/static/usage/v6/item/theming/css-shadow-parts/angular/example_component_html.md b/static/usage/v6/item/theming/css-shadow-parts/angular/example_component_html.md
new file mode 100644
index 00000000000..4bc8310465a
--- /dev/null
+++ b/static/usage/v6/item/theming/css-shadow-parts/angular/example_component_html.md
@@ -0,0 +1,13 @@
+```html
+
+ Custom Item
+
+
+
+ Custom Item
+
+
+
+ Custom Item
+
+```
diff --git a/static/usage/v6/item/theming/css-shadow-parts/demo.html b/static/usage/v6/item/theming/css-shadow-parts/demo.html
new file mode 100644
index 00000000000..132c0900cb8
--- /dev/null
+++ b/static/usage/v6/item/theming/css-shadow-parts/demo.html
@@ -0,0 +1,57 @@
+
+
+
+
+
+
+ Item
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Custom Item
+
+
+
+ Custom Item
+
+
+
+ Custom Item
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/item/theming/css-shadow-parts/index.md b/static/usage/v6/item/theming/css-shadow-parts/index.md
new file mode 100644
index 00000000000..a0f2c064b09
--- /dev/null
+++ b/static/usage/v6/item/theming/css-shadow-parts/index.md
@@ -0,0 +1,32 @@
+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/v6/item/theming/css-shadow-parts/javascript.md b/static/usage/v6/item/theming/css-shadow-parts/javascript.md
new file mode 100644
index 00000000000..1991ad6c139
--- /dev/null
+++ b/static/usage/v6/item/theming/css-shadow-parts/javascript.md
@@ -0,0 +1,32 @@
+```html
+
+ Custom Item
+
+
+
+ Custom Item
+
+
+
+ Custom Item
+
+
+
+```
diff --git a/static/usage/v6/item/theming/css-shadow-parts/react/main_css.md b/static/usage/v6/item/theming/css-shadow-parts/react/main_css.md
new file mode 100644
index 00000000000..0c5e9969494
--- /dev/null
+++ b/static/usage/v6/item/theming/css-shadow-parts/react/main_css.md
@@ -0,0 +1,18 @@
+```css
+ion-item::part(native) {
+ background: #19422d;
+ color: #fff;
+
+ border-color: #fff;
+ border-style: dashed;
+ border-width: 2px;
+
+ border-radius: 20px;
+}
+
+ion-item::part(detail-icon) {
+ color: white;
+ opacity: 1;
+ font-size: 20px;
+}
+```
diff --git a/static/usage/v6/item/theming/css-shadow-parts/react/main_tsx.md b/static/usage/v6/item/theming/css-shadow-parts/react/main_tsx.md
new file mode 100644
index 00000000000..0d8329f134a
--- /dev/null
+++ b/static/usage/v6/item/theming/css-shadow-parts/react/main_tsx.md
@@ -0,0 +1,25 @@
+```tsx
+import React from 'react';
+import { IonItem, IonLabel } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+
+ Custom Item
+
+
+
+ Custom Item
+
+
+
+ Custom Item
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/item/theming/css-shadow-parts/vue.md b/static/usage/v6/item/theming/css-shadow-parts/vue.md
new file mode 100644
index 00000000000..b0ebb030693
--- /dev/null
+++ b/static/usage/v6/item/theming/css-shadow-parts/vue.md
@@ -0,0 +1,43 @@
+```html
+
+
+ Custom Item
+
+
+
+ Custom Item
+
+
+
+ Custom Item
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/item/theming/input-highlight/angular/example_component_css.md b/static/usage/v6/item/theming/input-highlight/angular/example_component_css.md
new file mode 100644
index 00000000000..5d7cfd49c7c
--- /dev/null
+++ b/static/usage/v6/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/v6/item/theming/input-highlight/angular/example_component_html.md b/static/usage/v6/item/theming/input-highlight/angular/example_component_html.md
new file mode 100644
index 00000000000..59a5e5928a9
--- /dev/null
+++ b/static/usage/v6/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/v6/item/theming/input-highlight/demo.html b/static/usage/v6/item/theming/input-highlight/demo.html
new file mode 100644
index 00000000000..2094539141e
--- /dev/null
+++ b/static/usage/v6/item/theming/input-highlight/demo.html
@@ -0,0 +1,50 @@
+
+
+
+
+
+
+ Item
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Custom Input Highlight: Focused
+
+
+
+
+ Custom Input Highlight: Focused & Valid
+
+
+
+
+ Custom Input Highlight: Focused & Invalid
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/item/theming/input-highlight/index.md b/static/usage/v6/item/theming/input-highlight/index.md
new file mode 100644
index 00000000000..e74a8267a28
--- /dev/null
+++ b/static/usage/v6/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/v6/item/theming/input-highlight/javascript.md b/static/usage/v6/item/theming/input-highlight/javascript.md
new file mode 100644
index 00000000000..b26cebd530e
--- /dev/null
+++ b/static/usage/v6/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/v6/item/theming/input-highlight/react/main_css.md b/static/usage/v6/item/theming/input-highlight/react/main_css.md
new file mode 100644
index 00000000000..5d7cfd49c7c
--- /dev/null
+++ b/static/usage/v6/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/v6/item/theming/input-highlight/react/main_tsx.md b/static/usage/v6/item/theming/input-highlight/react/main_tsx.md
new file mode 100644
index 00000000000..67d46a73267
--- /dev/null
+++ b/static/usage/v6/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/v6/item/theming/input-highlight/vue.md b/static/usage/v6/item/theming/input-highlight/vue.md
new file mode 100644
index 00000000000..52713eb0ca5
--- /dev/null
+++ b/static/usage/v6/item/theming/input-highlight/vue.md
@@ -0,0 +1,36 @@
+```html
+
+
+ Custom Input Highlight: Focused
+
+
+
+
+ Custom Input Highlight: Focused & Valid
+
+
+
+
+ Custom Input Highlight: Focused & Invalid
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/label/basic/angular.md b/static/usage/v6/label/basic/angular.md
new file mode 100644
index 00000000000..c3125f70b5f
--- /dev/null
+++ b/static/usage/v6/label/basic/angular.md
@@ -0,0 +1,3 @@
+```html
+Label
+```
diff --git a/static/usage/v6/label/basic/demo.html b/static/usage/v6/label/basic/demo.html
new file mode 100644
index 00000000000..a6bad98959e
--- /dev/null
+++ b/static/usage/v6/label/basic/demo.html
@@ -0,0 +1,24 @@
+
+
+
+
+
+
+ Label
+
+
+
+
+
+
+
+
+
+
+ Label
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/label/basic/index.md b/static/usage/v6/label/basic/index.md
new file mode 100644
index 00000000000..d6c1819f1b6
--- /dev/null
+++ b/static/usage/v6/label/basic/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/v6/label/basic/javascript.md b/static/usage/v6/label/basic/javascript.md
new file mode 100644
index 00000000000..c3125f70b5f
--- /dev/null
+++ b/static/usage/v6/label/basic/javascript.md
@@ -0,0 +1,3 @@
+```html
+Label
+```
diff --git a/static/usage/v6/label/basic/react.md b/static/usage/v6/label/basic/react.md
new file mode 100644
index 00000000000..8eb985452c0
--- /dev/null
+++ b/static/usage/v6/label/basic/react.md
@@ -0,0 +1,13 @@
+```tsx
+import React from 'react';
+import { IonLabel } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+ Label
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/label/basic/vue.md b/static/usage/v6/label/basic/vue.md
new file mode 100644
index 00000000000..87f46b68110
--- /dev/null
+++ b/static/usage/v6/label/basic/vue.md
@@ -0,0 +1,14 @@
+```html
+
+ Label
+
+
+
+```
diff --git a/static/usage/v6/label/input/angular.md b/static/usage/v6/label/input/angular.md
new file mode 100644
index 00000000000..75278afd44b
--- /dev/null
+++ b/static/usage/v6/label/input/angular.md
@@ -0,0 +1,31 @@
+```html
+
+ Default Label
+
+
+
+
+ Fixed Label
+
+
+
+
+ Floating Label
+
+
+
+
+ Stacked Label
+
+
+
+
+ Toggle
+
+
+
+
+
+ Checkbox
+
+```
diff --git a/static/usage/v6/label/input/demo.html b/static/usage/v6/label/input/demo.html
new file mode 100644
index 00000000000..d43bb5ba712
--- /dev/null
+++ b/static/usage/v6/label/input/demo.html
@@ -0,0 +1,59 @@
+
+
+
+
+
+
+ Label
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Default Label
+
+
+
+
+ Fixed Label
+
+
+
+
+ Floating Label
+
+
+
+
+ Stacked Label
+
+
+
+
+ Toggle
+
+
+
+
+
+ Checkbox
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/label/input/index.md b/static/usage/v6/label/input/index.md
new file mode 100644
index 00000000000..7f825e38e93
--- /dev/null
+++ b/static/usage/v6/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/v6/label/input/javascript.md b/static/usage/v6/label/input/javascript.md
new file mode 100644
index 00000000000..75278afd44b
--- /dev/null
+++ b/static/usage/v6/label/input/javascript.md
@@ -0,0 +1,31 @@
+```html
+
+ Default Label
+
+
+
+
+ Fixed Label
+
+
+
+
+ Floating Label
+
+
+
+
+ Stacked Label
+
+
+
+
+ Toggle
+
+
+
+
+
+ Checkbox
+
+```
diff --git a/static/usage/v6/label/input/react.md b/static/usage/v6/label/input/react.md
new file mode 100644
index 00000000000..ff11fd1f176
--- /dev/null
+++ b/static/usage/v6/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/v6/label/input/vue.md b/static/usage/v6/label/input/vue.md
new file mode 100644
index 00000000000..cd05ef82b44
--- /dev/null
+++ b/static/usage/v6/label/input/vue.md
@@ -0,0 +1,42 @@
+```html
+
+
+ Default Label
+
+
+
+
+ Fixed Label
+
+
+
+
+ Floating Label
+
+
+
+
+ Stacked Label
+
+
+
+
+ Toggle
+
+
+
+
+
+ Checkbox
+
+
+
+
+```
diff --git a/static/usage/v6/label/item/angular.md b/static/usage/v6/label/item/angular.md
new file mode 100644
index 00000000000..be252b899a0
--- /dev/null
+++ b/static/usage/v6/label/item/angular.md
@@ -0,0 +1,28 @@
+```html
+
+ Default Label
+
+
+
+
+ Multi-line text that should ellipsis when it is too long
+ to fit on one line. Lorem ipsum dolor sit amet,
+ consectetur adipiscing elit.
+
+
+
+
+
+ Multi-line text that should wrap when it is too long
+ to fit on one line. Lorem ipsum dolor sit amet,
+ consectetur adipiscing elit.
+
+
+
+
+
+ Heading
+ Paragraph
+
+
+```
diff --git a/static/usage/v6/label/item/demo.html b/static/usage/v6/label/item/demo.html
new file mode 100644
index 00000000000..67dbf234345
--- /dev/null
+++ b/static/usage/v6/label/item/demo.html
@@ -0,0 +1,56 @@
+
+
+
+
+
+
+ Label
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Default Label
+
+
+
+
+ Multi-line text that should ellipsis when it is too long
+ to fit on one line. Lorem ipsum dolor sit amet,
+ consectetur adipiscing elit.
+
+
+
+
+
+ Multi-line text that should wrap when it is too long
+ to fit on one line. Lorem ipsum dolor sit amet,
+ consectetur adipiscing elit.
+
+
+
+
+
+ Heading
+ Paragraph
+
+
+
Heading
+ Paragraph
+
+
+```
diff --git a/static/usage/v6/label/item/react.md b/static/usage/v6/label/item/react.md
new file mode 100644
index 00000000000..88e4f904deb
--- /dev/null
+++ b/static/usage/v6/label/item/react.md
@@ -0,0 +1,38 @@
+```tsx
+import React from 'react';
+import { IonItem, IonLabel } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+ Default Label
+
+
+
+
+ Multi-line text that should ellipsis when it is too long
+ to fit on one line. Lorem ipsum dolor sit amet,
+ consectetur adipiscing elit.
+
+
+
+
+
+ Multi-line text that should wrap when it is too long
+ to fit on one line. Lorem ipsum dolor sit amet,
+ consectetur adipiscing elit.
+
+
+
+
+
+ Heading
+ Paragraph
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/label/item/vue.md b/static/usage/v6/label/item/vue.md
new file mode 100644
index 00000000000..99ec3ea3d40
--- /dev/null
+++ b/static/usage/v6/label/item/vue.md
@@ -0,0 +1,39 @@
+```html
+
+
+ Default Label
+
+
+
+
+ Multi-line text that should ellipsis when it is too long
+ to fit on one line. Lorem ipsum dolor sit amet,
+ consectetur adipiscing elit.
+
+
+
+
+
+ Multi-line text that should wrap when it is too long
+ to fit on one line. Lorem ipsum dolor sit amet,
+ consectetur adipiscing elit.
+
+
+
+
+
+ Heading
+ Paragraph
+
+
+
+
+
+```
diff --git a/static/usage/v6/label/theming/colors/angular.md b/static/usage/v6/label/theming/colors/angular.md
new file mode 100644
index 00000000000..1fbebb19888
--- /dev/null
+++ b/static/usage/v6/label/theming/colors/angular.md
@@ -0,0 +1,12 @@
+```html
+Default
+Primary
+Secondary
+Tertiary
+Success
+Warning
+Danger
+Light
+Medium
+Dark
+```
diff --git a/static/usage/v6/label/theming/colors/demo.html b/static/usage/v6/label/theming/colors/demo.html
new file mode 100644
index 00000000000..3444d3c2da9
--- /dev/null
+++ b/static/usage/v6/label/theming/colors/demo.html
@@ -0,0 +1,39 @@
+
+
+
+
+
+
+ Label
+
+
+
+
+
+
+
+
+
+
+
+
+ Default
+ Primary
+ Secondary
+ Tertiary
+ Success
+ Warning
+ Danger
+ Light
+ Medium
+ Dark
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/label/theming/colors/index.md b/static/usage/v6/label/theming/colors/index.md
new file mode 100644
index 00000000000..2e055eab680
--- /dev/null
+++ b/static/usage/v6/label/theming/colors/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/v6/label/theming/colors/javascript.md b/static/usage/v6/label/theming/colors/javascript.md
new file mode 100644
index 00000000000..1fbebb19888
--- /dev/null
+++ b/static/usage/v6/label/theming/colors/javascript.md
@@ -0,0 +1,12 @@
+```html
+Default
+Primary
+Secondary
+Tertiary
+Success
+Warning
+Danger
+Light
+Medium
+Dark
+```
diff --git a/static/usage/v6/label/theming/colors/react.md b/static/usage/v6/label/theming/colors/react.md
new file mode 100644
index 00000000000..6680a644fb6
--- /dev/null
+++ b/static/usage/v6/label/theming/colors/react.md
@@ -0,0 +1,22 @@
+```tsx
+import React from 'react';
+import { IonLabel } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+ Default
+ Primary
+ Secondary
+ Tertiary
+ Success
+ Warning
+ Danger
+ Light
+ Medium
+ Dark
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/label/theming/colors/vue.md b/static/usage/v6/label/theming/colors/vue.md
new file mode 100644
index 00000000000..da18a00d4d1
--- /dev/null
+++ b/static/usage/v6/label/theming/colors/vue.md
@@ -0,0 +1,23 @@
+```html
+
+ Default
+ Primary
+ Secondary
+ Tertiary
+ Success
+ Warning
+ Danger
+ Light
+ Medium
+ Dark
+
+
+
+```
diff --git a/static/usage/v6/list-header/basic/angular.md b/static/usage/v6/list-header/basic/angular.md
new file mode 100644
index 00000000000..d2e2f3fb345
--- /dev/null
+++ b/static/usage/v6/list-header/basic/angular.md
@@ -0,0 +1,22 @@
+```html
+
+
+ Video Games
+
+
+ Pokémon Yellow
+
+
+ Mega Man X
+
+
+ The Legend of Zelda
+
+
+ Pac-Man
+
+
+ Super Mario World
+
+
+```
diff --git a/static/usage/v6/list-header/basic/demo.html b/static/usage/v6/list-header/basic/demo.html
new file mode 100644
index 00000000000..dae3477fac9
--- /dev/null
+++ b/static/usage/v6/list-header/basic/demo.html
@@ -0,0 +1,49 @@
+
+
+
+
+
+
+ List Header
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Video Games
+
+
+ Pokémon Yellow
+
+
+ Mega Man X
+
+
+ The Legend of Zelda
+
+
+ Pac-Man
+
+
+ Super Mario World
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/list-header/basic/index.md b/static/usage/v6/list-header/basic/index.md
new file mode 100644
index 00000000000..78b84e21387
--- /dev/null
+++ b/static/usage/v6/list-header/basic/index.md
@@ -0,0 +1,13 @@
+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/v6/list-header/basic/javascript.md b/static/usage/v6/list-header/basic/javascript.md
new file mode 100644
index 00000000000..d2e2f3fb345
--- /dev/null
+++ b/static/usage/v6/list-header/basic/javascript.md
@@ -0,0 +1,22 @@
+```html
+
+
+ Video Games
+
+
+ Pokémon Yellow
+
+
+ Mega Man X
+
+
+ The Legend of Zelda
+
+
+ Pac-Man
+
+
+ Super Mario World
+
+
+```
diff --git a/static/usage/v6/list-header/basic/react.md b/static/usage/v6/list-header/basic/react.md
new file mode 100644
index 00000000000..b48a05b05da
--- /dev/null
+++ b/static/usage/v6/list-header/basic/react.md
@@ -0,0 +1,30 @@
+```tsx
+import React from 'react';
+import { IonItem, IonLabel, IonList, IonListHeader } from '@ionic/react';
+
+function Example() {
+ return (
+
+
+ Video Games
+
+
+ Pokémon Yellow
+
+
+ Mega Man X
+
+
+ The Legend of Zelda
+
+
+ Pac-Man
+
+
+ Super Mario World
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/list-header/basic/vue.md b/static/usage/v6/list-header/basic/vue.md
new file mode 100644
index 00000000000..b7d6980e400
--- /dev/null
+++ b/static/usage/v6/list-header/basic/vue.md
@@ -0,0 +1,33 @@
+```html
+
+
+
+ Video Games
+
+
+ Pokémon Yellow
+
+
+ Mega Man X
+
+
+ The Legend of Zelda
+
+
+ Pac-Man
+
+
+ Super Mario World
+
+
+
+
+
+```
diff --git a/static/usage/v6/list-header/buttons/angular.md b/static/usage/v6/list-header/buttons/angular.md
new file mode 100644
index 00000000000..7c24d9242a2
--- /dev/null
+++ b/static/usage/v6/list-header/buttons/angular.md
@@ -0,0 +1,23 @@
+```html
+
+
+ Video Games
+ See All
+
+
+ Pokémon Yellow
+
+
+ Mega Man X
+
+
+ The Legend of Zelda
+
+
+ Pac-Man
+
+
+ Super Mario World
+
+
+```
diff --git a/static/usage/v6/list-header/buttons/demo.html b/static/usage/v6/list-header/buttons/demo.html
new file mode 100644
index 00000000000..19ecb87a9a2
--- /dev/null
+++ b/static/usage/v6/list-header/buttons/demo.html
@@ -0,0 +1,50 @@
+
+
+
+
+
+
+ List Header
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Video Games
+ See All
+
+
+ Pokémon Yellow
+
+
+ Mega Man X
+
+
+ The Legend of Zelda
+
+
+ Pac-Man
+
+
+ Super Mario World
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/list-header/buttons/index.md b/static/usage/v6/list-header/buttons/index.md
new file mode 100644
index 00000000000..368b68089d1
--- /dev/null
+++ b/static/usage/v6/list-header/buttons/index.md
@@ -0,0 +1,13 @@
+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/v6/list-header/buttons/javascript.md b/static/usage/v6/list-header/buttons/javascript.md
new file mode 100644
index 00000000000..7c24d9242a2
--- /dev/null
+++ b/static/usage/v6/list-header/buttons/javascript.md
@@ -0,0 +1,23 @@
+```html
+
+
+ Video Games
+ See All
+
+
+ Pokémon Yellow
+
+
+ Mega Man X
+
+
+ The Legend of Zelda
+
+
+ Pac-Man
+
+
+ Super Mario World
+
+
+```
diff --git a/static/usage/v6/list-header/buttons/react.md b/static/usage/v6/list-header/buttons/react.md
new file mode 100644
index 00000000000..d5d45b36ab0
--- /dev/null
+++ b/static/usage/v6/list-header/buttons/react.md
@@ -0,0 +1,31 @@
+```tsx
+import React from 'react';
+import { IonButton, IonItem, IonLabel, IonList, IonListHeader } from '@ionic/react';
+
+function Example() {
+ return (
+
+
+ Video Games
+ See All
+
+
+ Pokémon Yellow
+
+
+ Mega Man X
+
+
+ The Legend of Zelda
+
+
+ Pac-Man
+
+
+ Super Mario World
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/list-header/buttons/vue.md b/static/usage/v6/list-header/buttons/vue.md
new file mode 100644
index 00000000000..704e94f057a
--- /dev/null
+++ b/static/usage/v6/list-header/buttons/vue.md
@@ -0,0 +1,34 @@
+```html
+
+
+
+ Video Games
+ See All
+
+
+ Pokémon Yellow
+
+
+ Mega Man X
+
+
+ The Legend of Zelda
+
+
+ Pac-Man
+
+
+ Super Mario World
+
+
+
+
+
+```
diff --git a/static/usage/v6/list-header/lines/angular.md b/static/usage/v6/list-header/lines/angular.md
new file mode 100644
index 00000000000..7feb30bd27d
--- /dev/null
+++ b/static/usage/v6/list-header/lines/angular.md
@@ -0,0 +1,37 @@
+```html
+
+
+ Default
+
+
+ Item
+
+
+ Item
+
+
+
+
+
+ Inset
+
+
+ Item
+
+
+ Item
+
+
+
+
+
+ Full
+
+
+ Item
+
+
+ Item
+
+
+```
diff --git a/static/usage/v6/list-header/lines/demo.html b/static/usage/v6/list-header/lines/demo.html
new file mode 100644
index 00000000000..dad3ebc17cb
--- /dev/null
+++ b/static/usage/v6/list-header/lines/demo.html
@@ -0,0 +1,64 @@
+
+
+
+
+
+
+ List Header
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Default
+
+
+ Item
+
+
+ Item
+
+
+
+
+
+ Inset
+
+
+ Item
+
+
+ Item
+
+
+
+
+
+ Full
+
+
+ Item
+
+
+ Item
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/list-header/lines/index.md b/static/usage/v6/list-header/lines/index.md
new file mode 100644
index 00000000000..53f77fb4ff3
--- /dev/null
+++ b/static/usage/v6/list-header/lines/index.md
@@ -0,0 +1,13 @@
+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/v6/list-header/lines/javascript.md b/static/usage/v6/list-header/lines/javascript.md
new file mode 100644
index 00000000000..7feb30bd27d
--- /dev/null
+++ b/static/usage/v6/list-header/lines/javascript.md
@@ -0,0 +1,37 @@
+```html
+
+
+ Default
+
+
+ Item
+
+
+ Item
+
+
+
+
+
+ Inset
+
+
+ Item
+
+
+ Item
+
+
+
+
+
+ Full
+
+
+ Item
+
+
+ Item
+
+
+```
diff --git a/static/usage/v6/list-header/lines/react.md b/static/usage/v6/list-header/lines/react.md
new file mode 100644
index 00000000000..9ab1c69d35e
--- /dev/null
+++ b/static/usage/v6/list-header/lines/react.md
@@ -0,0 +1,47 @@
+```tsx
+import React from 'react';
+import { IonItem, IonLabel, IonList, IonListHeader } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+ Default
+
+
+ Item
+
+
+ Item
+
+
+
+
+
+ Inset
+
+
+ Item
+
+
+ Item
+
+
+
+
+
+ Full
+
+
+ Item
+
+
+ Item
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/list-header/lines/vue.md b/static/usage/v6/list-header/lines/vue.md
new file mode 100644
index 00000000000..6ec522dd8a4
--- /dev/null
+++ b/static/usage/v6/list-header/lines/vue.md
@@ -0,0 +1,48 @@
+```html
+
+
+
+ Default
+
+
+ Item
+
+
+ Item
+
+
+
+
+
+ Inset
+
+
+ Item
+
+
+ Item
+
+
+
+
+
+ Full
+
+
+ Item
+
+
+ Item
+
+
+
+
+
+```
diff --git a/static/usage/v6/list-header/theming/colors/angular.md b/static/usage/v6/list-header/theming/colors/angular.md
new file mode 100644
index 00000000000..88d5b12d912
--- /dev/null
+++ b/static/usage/v6/list-header/theming/colors/angular.md
@@ -0,0 +1,32 @@
+```html
+
+ Default
+
+
+ Primary
+
+
+ Secondary
+
+
+ Tertiary
+
+
+ Success
+
+
+ Warning
+
+
+ Danger
+
+
+ Light
+
+
+ Medium
+
+
+ Dark
+
+```
diff --git a/static/usage/v6/list-header/theming/colors/demo.html b/static/usage/v6/list-header/theming/colors/demo.html
new file mode 100644
index 00000000000..fa36d9b0a9a
--- /dev/null
+++ b/static/usage/v6/list-header/theming/colors/demo.html
@@ -0,0 +1,59 @@
+
+
+
+
+
+
+ List Header
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Default
+
+
+ Primary
+
+
+ Secondary
+
+
+ Tertiary
+
+
+ Success
+
+
+ Warning
+
+
+ Danger
+
+
+ Light
+
+
+ Medium
+
+
+ Dark
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/list-header/theming/colors/index.md b/static/usage/v6/list-header/theming/colors/index.md
new file mode 100644
index 00000000000..828041239f3
--- /dev/null
+++ b/static/usage/v6/list-header/theming/colors/index.md
@@ -0,0 +1,13 @@
+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/v6/list-header/theming/colors/javascript.md b/static/usage/v6/list-header/theming/colors/javascript.md
new file mode 100644
index 00000000000..88d5b12d912
--- /dev/null
+++ b/static/usage/v6/list-header/theming/colors/javascript.md
@@ -0,0 +1,32 @@
+```html
+
+ Default
+
+
+ Primary
+
+
+ Secondary
+
+
+ Tertiary
+
+
+ Success
+
+
+ Warning
+
+
+ Danger
+
+
+ Light
+
+
+ Medium
+
+
+ Dark
+
+```
diff --git a/static/usage/v6/list-header/theming/colors/react.md b/static/usage/v6/list-header/theming/colors/react.md
new file mode 100644
index 00000000000..f00ce7c16d1
--- /dev/null
+++ b/static/usage/v6/list-header/theming/colors/react.md
@@ -0,0 +1,42 @@
+```tsx
+import React from 'react';
+import { IonLabel, IonListHeader } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+ Default
+
+
+ Primary
+
+
+ Secondary
+
+
+ Tertiary
+
+
+ Success
+
+
+ Warning
+
+
+ Danger
+
+
+ Light
+
+
+ Medium
+
+
+ Dark
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/list-header/theming/colors/vue.md b/static/usage/v6/list-header/theming/colors/vue.md
new file mode 100644
index 00000000000..b20672dd78f
--- /dev/null
+++ b/static/usage/v6/list-header/theming/colors/vue.md
@@ -0,0 +1,43 @@
+```html
+
+
+ Default
+
+
+ Primary
+
+
+ Secondary
+
+
+ Tertiary
+
+
+ Success
+
+
+ Warning
+
+
+ Danger
+
+
+ Light
+
+
+ Medium
+
+
+ Dark
+
+
+
+
+```
diff --git a/static/usage/v6/list-header/theming/css-properties/angular/example_component_css.md b/static/usage/v6/list-header/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..9609437fd1d
--- /dev/null
+++ b/static/usage/v6/list-header/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,10 @@
+```css
+ion-list-header {
+ --background: #19422d;
+ --color: #fff;
+
+ --border-width: 0 0 4px 0;
+ --border-color: #f24aec;
+ --border-style: double;
+}
+```
diff --git a/static/usage/v6/list-header/theming/css-properties/angular/example_component_html.md b/static/usage/v6/list-header/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..0bf6d9fa3fe
--- /dev/null
+++ b/static/usage/v6/list-header/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,5 @@
+```html
+
+ Custom List Header
+
+```
diff --git a/static/usage/v6/list-header/theming/css-properties/demo.html b/static/usage/v6/list-header/theming/css-properties/demo.html
new file mode 100644
index 00000000000..133c2d8f994
--- /dev/null
+++ b/static/usage/v6/list-header/theming/css-properties/demo.html
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+ List Header
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Custom List Header
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/list-header/theming/css-properties/index.md b/static/usage/v6/list-header/theming/css-properties/index.md
new file mode 100644
index 00000000000..0a63f448d35
--- /dev/null
+++ b/static/usage/v6/list-header/theming/css-properties/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/v6/list-header/theming/css-properties/javascript.md b/static/usage/v6/list-header/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..5ac75dc4f0f
--- /dev/null
+++ b/static/usage/v6/list-header/theming/css-properties/javascript.md
@@ -0,0 +1,16 @@
+```html
+
+ Custom List Header
+
+
+
+```
diff --git a/static/usage/v6/list-header/theming/css-properties/react/main_css.md b/static/usage/v6/list-header/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..9609437fd1d
--- /dev/null
+++ b/static/usage/v6/list-header/theming/css-properties/react/main_css.md
@@ -0,0 +1,10 @@
+```css
+ion-list-header {
+ --background: #19422d;
+ --color: #fff;
+
+ --border-width: 0 0 4px 0;
+ --border-color: #f24aec;
+ --border-style: double;
+}
+```
diff --git a/static/usage/v6/list-header/theming/css-properties/react/main_tsx.md b/static/usage/v6/list-header/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..169485b3365
--- /dev/null
+++ b/static/usage/v6/list-header/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,15 @@
+```tsx
+import React from 'react';
+import { IonLabel, IonListHeader } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+
+ Custom List Header
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/list-header/theming/css-properties/vue.md b/static/usage/v6/list-header/theming/css-properties/vue.md
new file mode 100644
index 00000000000..c56d482c2a2
--- /dev/null
+++ b/static/usage/v6/list-header/theming/css-properties/vue.md
@@ -0,0 +1,27 @@
+```html
+
+
+ Custom List Header
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/list/basic/angular.md b/static/usage/v6/list/basic/angular.md
new file mode 100644
index 00000000000..f36481075e8
--- /dev/null
+++ b/static/usage/v6/list/basic/angular.md
@@ -0,0 +1,19 @@
+```html
+
+
+ Pokémon Yellow
+
+
+ Mega Man X
+
+
+ The Legend of Zelda
+
+
+ Pac-Man
+
+
+ Super Mario World
+
+
+```
diff --git a/static/usage/v6/list/basic/demo.html b/static/usage/v6/list/basic/demo.html
new file mode 100644
index 00000000000..86ed4981f63
--- /dev/null
+++ b/static/usage/v6/list/basic/demo.html
@@ -0,0 +1,46 @@
+
+
+
+
+
+
+ List
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Pokémon Yellow
+
+
+ Mega Man X
+
+
+ The Legend of Zelda
+
+
+ Pac-Man
+
+
+ Super Mario World
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/list/basic/index.md b/static/usage/v6/list/basic/index.md
new file mode 100644
index 00000000000..906f3f91880
--- /dev/null
+++ b/static/usage/v6/list/basic/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/v6/list/basic/javascript.md b/static/usage/v6/list/basic/javascript.md
new file mode 100644
index 00000000000..f36481075e8
--- /dev/null
+++ b/static/usage/v6/list/basic/javascript.md
@@ -0,0 +1,19 @@
+```html
+
+
+ Pokémon Yellow
+
+
+ Mega Man X
+
+
+ The Legend of Zelda
+
+
+ Pac-Man
+
+
+ Super Mario World
+
+
+```
diff --git a/static/usage/v6/list/basic/react.md b/static/usage/v6/list/basic/react.md
new file mode 100644
index 00000000000..51b30335ccd
--- /dev/null
+++ b/static/usage/v6/list/basic/react.md
@@ -0,0 +1,27 @@
+```tsx
+import React from 'react';
+import { IonItem, IonLabel, IonList } from '@ionic/react';
+
+function Example() {
+ return (
+
+
+ Pokémon Yellow
+
+
+ Mega Man X
+
+
+ The Legend of Zelda
+
+
+ Pac-Man
+
+
+ Super Mario World
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/list/basic/vue.md b/static/usage/v6/list/basic/vue.md
new file mode 100644
index 00000000000..4f3886c0719
--- /dev/null
+++ b/static/usage/v6/list/basic/vue.md
@@ -0,0 +1,30 @@
+```html
+
+
+
+ Pokémon Yellow
+
+
+ Mega Man X
+
+
+ The Legend of Zelda
+
+
+ Pac-Man
+
+
+ Super Mario World
+
+
+
+
+
+```
diff --git a/static/usage/v6/list/inset/angular.md b/static/usage/v6/list/inset/angular.md
new file mode 100644
index 00000000000..d88d56e77f1
--- /dev/null
+++ b/static/usage/v6/list/inset/angular.md
@@ -0,0 +1,19 @@
+```html
+
+
+ Pokémon Yellow
+
+
+ Mega Man X
+
+
+ The Legend of Zelda
+
+
+ Pac-Man
+
+
+ Super Mario World
+
+
+```
diff --git a/static/usage/v6/list/inset/demo.html b/static/usage/v6/list/inset/demo.html
new file mode 100644
index 00000000000..b2cbacc4e11
--- /dev/null
+++ b/static/usage/v6/list/inset/demo.html
@@ -0,0 +1,51 @@
+
+
+
+
+
+
+ List
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Pokémon Yellow
+
+
+ Mega Man X
+
+
+ The Legend of Zelda
+
+
+ Pac-Man
+
+
+ Super Mario World
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/list/inset/index.md b/static/usage/v6/list/inset/index.md
new file mode 100644
index 00000000000..cbab47db1ea
--- /dev/null
+++ b/static/usage/v6/list/inset/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/v6/list/inset/javascript.md b/static/usage/v6/list/inset/javascript.md
new file mode 100644
index 00000000000..a5c6e28dd38
--- /dev/null
+++ b/static/usage/v6/list/inset/javascript.md
@@ -0,0 +1,19 @@
+```html
+
+
+ Pokémon Yellow
+
+
+ Mega Man X
+
+
+ The Legend of Zelda
+
+
+ Pac-Man
+
+
+ Super Mario World
+
+
+```
diff --git a/static/usage/v6/list/inset/react.md b/static/usage/v6/list/inset/react.md
new file mode 100644
index 00000000000..d9f00d8a4f9
--- /dev/null
+++ b/static/usage/v6/list/inset/react.md
@@ -0,0 +1,27 @@
+```tsx
+import React from 'react';
+import { IonItem, IonLabel, IonList } from '@ionic/react';
+
+function Example() {
+ return (
+
+
+ Pokémon Yellow
+
+
+ Mega Man X
+
+
+ The Legend of Zelda
+
+
+ Pac-Man
+
+
+ Super Mario World
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/list/inset/vue.md b/static/usage/v6/list/inset/vue.md
new file mode 100644
index 00000000000..15d801c7eae
--- /dev/null
+++ b/static/usage/v6/list/inset/vue.md
@@ -0,0 +1,30 @@
+```html
+
+
+
+ Pokémon Yellow
+
+
+ Mega Man X
+
+
+ The Legend of Zelda
+
+
+ Pac-Man
+
+
+ Super Mario World
+
+
+
+
+
+```
diff --git a/static/usage/v6/list/lines/angular.md b/static/usage/v6/list/lines/angular.md
new file mode 100644
index 00000000000..b311cb8ad0a
--- /dev/null
+++ b/static/usage/v6/list/lines/angular.md
@@ -0,0 +1,37 @@
+```html
+
+
+ Full Lines
+
+
+ Full Lines
+
+
+ Full Lines
+
+
+
+
+
+ Inset Lines
+
+
+ Inset Lines
+
+
+ Inset Lines
+
+
+
+
+
+ No Lines
+
+
+ No Lines
+
+
+ No Lines
+
+
+```
diff --git a/static/usage/v6/list/lines/demo.html b/static/usage/v6/list/lines/demo.html
new file mode 100644
index 00000000000..259465266e1
--- /dev/null
+++ b/static/usage/v6/list/lines/demo.html
@@ -0,0 +1,66 @@
+
+
+
+
+
+
+ List
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Full Lines
+
+
+ Full Lines
+
+
+ Full Lines
+
+
+
+
+
+ Inset Lines
+
+
+ Inset Lines
+
+
+ Inset Lines
+
+
+
+
+
+ No Lines
+
+
+ No Lines
+
+
+ No Lines
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/list/lines/index.md b/static/usage/v6/list/lines/index.md
new file mode 100644
index 00000000000..2f622d7723a
--- /dev/null
+++ b/static/usage/v6/list/lines/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/v6/list/lines/javascript.md b/static/usage/v6/list/lines/javascript.md
new file mode 100644
index 00000000000..b311cb8ad0a
--- /dev/null
+++ b/static/usage/v6/list/lines/javascript.md
@@ -0,0 +1,37 @@
+```html
+
+
+ Full Lines
+
+
+ Full Lines
+
+
+ Full Lines
+
+
+
+
+
+ Inset Lines
+
+
+ Inset Lines
+
+
+ Inset Lines
+
+
+
+
+
+ No Lines
+
+
+ No Lines
+
+
+ No Lines
+
+
+```
diff --git a/static/usage/v6/list/lines/react.md b/static/usage/v6/list/lines/react.md
new file mode 100644
index 00000000000..16754ad804b
--- /dev/null
+++ b/static/usage/v6/list/lines/react.md
@@ -0,0 +1,47 @@
+```tsx
+import React from 'react';
+import { IonItem, IonLabel, IonList } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+ Full Lines
+
+
+ Full Lines
+
+
+ Full Lines
+
+
+
+
+
+ Inset Lines
+
+
+ Inset Lines
+
+
+ Inset Lines
+
+
+
+
+
+ No Lines
+
+
+ No Lines
+
+
+ No Lines
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/list/lines/vue.md b/static/usage/v6/list/lines/vue.md
new file mode 100644
index 00000000000..914ba88d980
--- /dev/null
+++ b/static/usage/v6/list/lines/vue.md
@@ -0,0 +1,48 @@
+```html
+
+
+
+ Full Lines
+
+
+ Full Lines
+
+
+ Full Lines
+
+
+
+
+
+ Inset Lines
+
+
+ Inset Lines
+
+
+ Inset Lines
+
+
+
+
+
+ No Lines
+
+
+ No Lines
+
+
+ No Lines
+
+
+
+
+
+```
diff --git a/static/usage/loading/controller/angular/html.md b/static/usage/v6/loading/controller/angular/example_component_html.md
similarity index 100%
rename from static/usage/loading/controller/angular/html.md
rename to static/usage/v6/loading/controller/angular/example_component_html.md
diff --git a/static/usage/v6/loading/controller/angular/example_component_ts.md b/static/usage/v6/loading/controller/angular/example_component_ts.md
new file mode 100644
index 00000000000..bd4b86eef29
--- /dev/null
+++ b/static/usage/v6/loading/controller/angular/example_component_ts.md
@@ -0,0 +1,22 @@
+```ts
+import { Component } from '@angular/core';
+
+import { LoadingController } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ constructor(private loadingCtrl: LoadingController) {}
+
+ async showLoading() {
+ const loading = await this.loadingCtrl.create({
+ message: 'Dismissing after 3 seconds...',
+ duration: 3000,
+ });
+
+ loading.present();
+ }
+}
+```
diff --git a/static/usage/v6/loading/controller/demo.html b/static/usage/v6/loading/controller/demo.html
new file mode 100644
index 00000000000..9a3385f7307
--- /dev/null
+++ b/static/usage/v6/loading/controller/demo.html
@@ -0,0 +1,39 @@
+
+
+
+
+
+
+ Datetime
+
+
+
+
+
+
+
+
+
+
+
+ Show Loading
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/loading/controller/index.md b/static/usage/v6/loading/controller/index.md
new file mode 100644
index 00000000000..43c62e88258
--- /dev/null
+++ b/static/usage/v6/loading/controller/index.md
@@ -0,0 +1,24 @@
+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_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/loading/controller/javascript.md b/static/usage/v6/loading/controller/javascript.md
similarity index 100%
rename from static/usage/loading/controller/javascript.md
rename to static/usage/v6/loading/controller/javascript.md
diff --git a/static/usage/loading/controller/react.md b/static/usage/v6/loading/controller/react.md
similarity index 100%
rename from static/usage/loading/controller/react.md
rename to static/usage/v6/loading/controller/react.md
diff --git a/static/usage/loading/controller/vue.md b/static/usage/v6/loading/controller/vue.md
similarity index 100%
rename from static/usage/loading/controller/vue.md
rename to static/usage/v6/loading/controller/vue.md
diff --git a/static/usage/loading/spinners/angular/html.md b/static/usage/v6/loading/spinners/angular/example_component_html.md
similarity index 100%
rename from static/usage/loading/spinners/angular/html.md
rename to static/usage/v6/loading/spinners/angular/example_component_html.md
diff --git a/static/usage/v6/loading/spinners/angular/example_component_ts.md b/static/usage/v6/loading/spinners/angular/example_component_ts.md
new file mode 100644
index 00000000000..7e522cb3a64
--- /dev/null
+++ b/static/usage/v6/loading/spinners/angular/example_component_ts.md
@@ -0,0 +1,23 @@
+```ts
+import { Component } from '@angular/core';
+
+import { LoadingController } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ constructor(private loadingCtrl: LoadingController) {}
+
+ async showLoading() {
+ const loading = await this.loadingCtrl.create({
+ message: 'Loading...',
+ duration: 3000,
+ spinner: 'circles',
+ });
+
+ loading.present();
+ }
+}
+```
diff --git a/static/usage/v6/loading/spinners/demo.html b/static/usage/v6/loading/spinners/demo.html
new file mode 100644
index 00000000000..01929a4e1f2
--- /dev/null
+++ b/static/usage/v6/loading/spinners/demo.html
@@ -0,0 +1,40 @@
+
+
+
+
+
+
+ Datetime
+
+
+
+
+
+
+
+
+
+
+
+ Show Loading
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/loading/spinners/index.md b/static/usage/v6/loading/spinners/index.md
new file mode 100644
index 00000000000..e29eca69331
--- /dev/null
+++ b/static/usage/v6/loading/spinners/index.md
@@ -0,0 +1,24 @@
+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_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/loading/spinners/javascript.md b/static/usage/v6/loading/spinners/javascript.md
similarity index 100%
rename from static/usage/loading/spinners/javascript.md
rename to static/usage/v6/loading/spinners/javascript.md
diff --git a/static/usage/loading/spinners/react.md b/static/usage/v6/loading/spinners/react.md
similarity index 100%
rename from static/usage/loading/spinners/react.md
rename to static/usage/v6/loading/spinners/react.md
diff --git a/static/usage/loading/spinners/vue.md b/static/usage/v6/loading/spinners/vue.md
similarity index 100%
rename from static/usage/loading/spinners/vue.md
rename to static/usage/v6/loading/spinners/vue.md
diff --git a/static/usage/loading/theming/angular/html.md b/static/usage/v6/loading/theming/angular/example_component_html.md
similarity index 100%
rename from static/usage/loading/theming/angular/html.md
rename to static/usage/v6/loading/theming/angular/example_component_html.md
diff --git a/static/usage/v6/loading/theming/angular/example_component_ts.md b/static/usage/v6/loading/theming/angular/example_component_ts.md
new file mode 100644
index 00000000000..800335c91ad
--- /dev/null
+++ b/static/usage/v6/loading/theming/angular/example_component_ts.md
@@ -0,0 +1,23 @@
+```ts
+import { Component } from '@angular/core';
+
+import { LoadingController } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ constructor(private loadingCtrl: LoadingController) {}
+
+ async showLoading() {
+ const loading = await this.loadingCtrl.create({
+ message: 'Loading...',
+ duration: 3000,
+ cssClass: 'custom-loading',
+ });
+
+ loading.present();
+ }
+}
+```
diff --git a/static/usage/loading/theming/angular/css.md b/static/usage/v6/loading/theming/angular/global_css.md
similarity index 100%
rename from static/usage/loading/theming/angular/css.md
rename to static/usage/v6/loading/theming/angular/global_css.md
diff --git a/static/usage/v6/loading/theming/demo.html b/static/usage/v6/loading/theming/demo.html
new file mode 100644
index 00000000000..d901557c331
--- /dev/null
+++ b/static/usage/v6/loading/theming/demo.html
@@ -0,0 +1,48 @@
+
+
+
+
+
+
+ Datetime
+
+
+
+
+
+
+
+
+
+
+
+
+ Show Loading
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/loading/theming/index.md b/static/usage/v6/loading/theming/index.md
new file mode 100644
index 00000000000..61dc8c20be3
--- /dev/null
+++ b/static/usage/v6/loading/theming/index.md
@@ -0,0 +1,34 @@
+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_ts from './angular/example_component_ts.md';
+import angular_global_css from './angular/global_css.md';
+
+
diff --git a/static/usage/loading/theming/javascript.md b/static/usage/v6/loading/theming/javascript.md
similarity index 100%
rename from static/usage/loading/theming/javascript.md
rename to static/usage/v6/loading/theming/javascript.md
diff --git a/static/usage/loading/theming/react.md b/static/usage/v6/loading/theming/react.md
similarity index 100%
rename from static/usage/loading/theming/react.md
rename to static/usage/v6/loading/theming/react.md
diff --git a/static/usage/loading/theming/react/css.md b/static/usage/v6/loading/theming/react/main_css.md
similarity index 100%
rename from static/usage/loading/theming/react/css.md
rename to static/usage/v6/loading/theming/react/main_css.md
diff --git a/static/usage/loading/theming/react/tsx.md b/static/usage/v6/loading/theming/react/main_tsx.md
similarity index 100%
rename from static/usage/loading/theming/react/tsx.md
rename to static/usage/v6/loading/theming/react/main_tsx.md
diff --git a/static/usage/loading/theming/vue.md b/static/usage/v6/loading/theming/vue.md
similarity index 100%
rename from static/usage/loading/theming/vue.md
rename to static/usage/v6/loading/theming/vue.md
diff --git a/static/usage/v6/menu/basic/angular.md b/static/usage/v6/menu/basic/angular.md
new file mode 100644
index 00000000000..c169f35f1f4
--- /dev/null
+++ b/static/usage/v6/menu/basic/angular.md
@@ -0,0 +1,23 @@
+```html
+
+
+
+ Menu Content
+
+
+ This is the menu content.
+
+
+
+
+
+
+
+ Menu
+
+
+
+ Tap the button in the toolbar to open the menu.
+
+
+```
diff --git a/static/usage/v6/menu/basic/demo.html b/static/usage/v6/menu/basic/demo.html
new file mode 100644
index 00000000000..83f3f3ac7c4
--- /dev/null
+++ b/static/usage/v6/menu/basic/demo.html
@@ -0,0 +1,40 @@
+
+
+
+
+
+
+ Menu
+
+
+
+
+
+
+
+
+
+
+
+ Menu Content
+
+
+ This is the menu content.
+
+
+
+
+
+
+
+ Menu
+
+
+
+ Tap the button in the toolbar to open the menu.
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/menu/basic/index.md b/static/usage/v6/menu/basic/index.md
new file mode 100644
index 00000000000..b54e840574d
--- /dev/null
+++ b/static/usage/v6/menu/basic/index.md
@@ -0,0 +1,18 @@
+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/v6/menu/basic/javascript.md b/static/usage/v6/menu/basic/javascript.md
new file mode 100644
index 00000000000..570c03c9512
--- /dev/null
+++ b/static/usage/v6/menu/basic/javascript.md
@@ -0,0 +1,23 @@
+```html
+
+
+
+ Menu Content
+
+
+ This is the menu content.
+
+
+
+
+
+
+
+ Menu
+
+
+
+ Tap the button in the toolbar to open the menu.
+
+
+```
diff --git a/static/usage/v6/menu/basic/react.md b/static/usage/v6/menu/basic/react.md
new file mode 100644
index 00000000000..71abc258aef
--- /dev/null
+++ b/static/usage/v6/menu/basic/react.md
@@ -0,0 +1,41 @@
+```tsx
+import React from 'react';
+import {
+ IonButtons,
+ IonContent,
+ IonHeader,
+ IonMenu,
+ IonMenuButton,
+ IonPage,
+ IonTitle,
+ IonToolbar
+} from '@ionic/react';
+function Example() {
+ return (
+ <>
+
+
+
+ Menu Content
+
+
+ This is the menu content.
+
+
+
+
+
+
+
+ Menu
+
+
+
+ Tap the button in the toolbar to open the menu.
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/menu/basic/vue.md b/static/usage/v6/menu/basic/vue.md
new file mode 100644
index 00000000000..d6e3d73d648
--- /dev/null
+++ b/static/usage/v6/menu/basic/vue.md
@@ -0,0 +1,52 @@
+```html
+
+
+
+
+ Menu Content
+
+
+ This is the menu content.
+
+
+
+
+
+
+
+ Menu
+
+
+
+ Tap the button in the toolbar to open the menu.
+
+
+
+
+
+```
diff --git a/static/usage/v6/menu/theming/angular/example_component_css.md b/static/usage/v6/menu/theming/angular/example_component_css.md
new file mode 100644
index 00000000000..839c8f41df5
--- /dev/null
+++ b/static/usage/v6/menu/theming/angular/example_component_css.md
@@ -0,0 +1,11 @@
+```css
+ion-menu::part(backdrop) {
+ background-color: rgba(255, 0, 255, 0.5);
+}
+
+ion-menu::part(container) {
+ border-radius: 0 20px 20px 0;
+
+ box-shadow: 4px 0px 16px rgba(255, 0, 255, 0.18);
+}
+```
\ No newline at end of file
diff --git a/static/usage/v6/menu/theming/angular/example_component_html.md b/static/usage/v6/menu/theming/angular/example_component_html.md
new file mode 100644
index 00000000000..f630cf4c378
--- /dev/null
+++ b/static/usage/v6/menu/theming/angular/example_component_html.md
@@ -0,0 +1,25 @@
+```html
+
+
+
+
+ Menu Content
+
+
+ This is the menu content.
+
+
+
+
+
+
+
+ Menu
+
+
+
+ Tap the button in the toolbar to open the menu.
+
+
+
+```
diff --git a/static/usage/v6/menu/theming/demo.html b/static/usage/v6/menu/theming/demo.html
new file mode 100644
index 00000000000..e3d7c78a20f
--- /dev/null
+++ b/static/usage/v6/menu/theming/demo.html
@@ -0,0 +1,51 @@
+
+
+
+
+
+
+ Menu
+
+
+
+
+
+
+
+
+
+
+
+
+ Menu Content
+
+
+ This is the menu content.
+
+
+
+
+
+
+
+ Menu
+
+
+
+ Tap the button in the toolbar to open the menu.
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/menu/theming/index.md b/static/usage/v6/menu/theming/index.md
new file mode 100644
index 00000000000..5ff9842fe38
--- /dev/null
+++ b/static/usage/v6/menu/theming/index.md
@@ -0,0 +1,33 @@
+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/v6/menu/theming/javascript.md b/static/usage/v6/menu/theming/javascript.md
new file mode 100644
index 00000000000..a147ef68090
--- /dev/null
+++ b/static/usage/v6/menu/theming/javascript.md
@@ -0,0 +1,37 @@
+```html
+
+
+
+
+ Menu Content
+
+
+ This is the menu content.
+
+
+
+
+
+
+
+ Menu
+
+
+
+ Tap the button in the toolbar to open the menu.
+
+
+
+
+
+```
diff --git a/static/usage/v6/menu/theming/react/main_css.md b/static/usage/v6/menu/theming/react/main_css.md
new file mode 100644
index 00000000000..839c8f41df5
--- /dev/null
+++ b/static/usage/v6/menu/theming/react/main_css.md
@@ -0,0 +1,11 @@
+```css
+ion-menu::part(backdrop) {
+ background-color: rgba(255, 0, 255, 0.5);
+}
+
+ion-menu::part(container) {
+ border-radius: 0 20px 20px 0;
+
+ box-shadow: 4px 0px 16px rgba(255, 0, 255, 0.18);
+}
+```
\ No newline at end of file
diff --git a/static/usage/v6/menu/theming/react/main_tsx.md b/static/usage/v6/menu/theming/react/main_tsx.md
new file mode 100644
index 00000000000..c935fefb33f
--- /dev/null
+++ b/static/usage/v6/menu/theming/react/main_tsx.md
@@ -0,0 +1,44 @@
+```tsx
+import React from 'react';
+import {
+ IonButtons,
+ IonContent,
+ IonHeader,
+ IonMenu,
+ IonMenuButton,
+ IonPage,
+ IonTitle,
+ IonToolbar
+} from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+
+
+
+ Menu Content
+
+
+ This is the menu content.
+
+
+
+
+
+
+
+ Menu
+
+
+
+ Tap the button in the toolbar to open the menu.
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/menu/theming/vue.md b/static/usage/v6/menu/theming/vue.md
new file mode 100644
index 00000000000..b9d02e48b1f
--- /dev/null
+++ b/static/usage/v6/menu/theming/vue.md
@@ -0,0 +1,64 @@
+```html
+
+
+
+
+ Menu Content
+
+
+ This is the menu content.
+
+
+
+
+
+
+
+ Menu
+
+
+
+ Tap the button in the toolbar to open the menu.
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/menu/toggle/angular.md b/static/usage/v6/menu/toggle/angular.md
new file mode 100644
index 00000000000..d2ecafc7904
--- /dev/null
+++ b/static/usage/v6/menu/toggle/angular.md
@@ -0,0 +1,26 @@
+```html
+
+
+
+ Menu Content
+
+
+
+
+ Click to close the menu
+
+
+
+
+
+
+ Menu
+
+
+
+
+ Click to open the menu
+
+
+
+```
diff --git a/static/usage/v6/menu/toggle/demo.html b/static/usage/v6/menu/toggle/demo.html
new file mode 100644
index 00000000000..6a760b44aa3
--- /dev/null
+++ b/static/usage/v6/menu/toggle/demo.html
@@ -0,0 +1,43 @@
+
+
+
+
+
+
+ Menu - Toggle
+
+
+
+
+
+
+
+
+
+
+
+
+ Menu
+
+
+
+
+ Click to open the menu
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/menu/toggle/index.md b/static/usage/v6/menu/toggle/index.md
new file mode 100644
index 00000000000..417ec9471e7
--- /dev/null
+++ b/static/usage/v6/menu/toggle/index.md
@@ -0,0 +1,18 @@
+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/v6/menu/toggle/javascript.md b/static/usage/v6/menu/toggle/javascript.md
new file mode 100644
index 00000000000..660e0b4d1b6
--- /dev/null
+++ b/static/usage/v6/menu/toggle/javascript.md
@@ -0,0 +1,26 @@
+```html
+
+
+
+ Menu Content
+
+
+
+
+ Click to close the menu
+
+
+
+
+
+
+ Menu
+
+
+
+
+ Click to open the menu
+
+
+
+```
diff --git a/static/usage/v6/menu/toggle/react.md b/static/usage/v6/menu/toggle/react.md
new file mode 100644
index 00000000000..a940b83e4af
--- /dev/null
+++ b/static/usage/v6/menu/toggle/react.md
@@ -0,0 +1,44 @@
+```tsx
+import React from 'react';
+import {
+ IonButton,
+ IonContent,
+ IonHeader,
+ IonMenu,
+ IonMenuToggle,
+ IonPage,
+ IonTitle,
+ IonToolbar
+} from '@ionic/react';
+function Example() {
+ return (
+ <>
+
+
+
+ Menu Content
+
+
+
+
+ Click to close the menu
+
+
+
+
+
+
+ Menu
+
+
+
+
+ Click to open the menu
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/menu/toggle/vue.md b/static/usage/v6/menu/toggle/vue.md
new file mode 100644
index 00000000000..2cc4807109e
--- /dev/null
+++ b/static/usage/v6/menu/toggle/vue.md
@@ -0,0 +1,55 @@
+```html
+
+
+
+
+ Menu Content
+
+
+
+
+ Click to close the menu
+
+
+
+
+
+
+ Menu
+
+
+
+
+ Click to open the menu
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/menu/type/angular/example_component_html.md b/static/usage/v6/menu/type/angular/example_component_html.md
new file mode 100644
index 00000000000..7154c645660
--- /dev/null
+++ b/static/usage/v6/menu/type/angular/example_component_html.md
@@ -0,0 +1,48 @@
+```html
+
+
+
+ Menu Content
+
+
+
+
+ Click to close the menu
+
+
+
+
+
+
+
+ Menu
+
+
+
+ Select an overlay type:
+
+
+
+ overlay
+
+
+
+
+
+ reveal
+
+
+
+
+
+ push
+
+
+
+
+
+ Click to open the menu
+
+
+
+```
\ No newline at end of file
diff --git a/static/usage/v6/menu/type/angular/example_component_ts.md b/static/usage/v6/menu/type/angular/example_component_ts.md
new file mode 100644
index 00000000000..5f03ec13b76
--- /dev/null
+++ b/static/usage/v6/menu/type/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ menuType: string = 'overlay';
+}
+```
diff --git a/static/usage/v6/menu/type/demo.html b/static/usage/v6/menu/type/demo.html
new file mode 100644
index 00000000000..7dbfe39cffa
--- /dev/null
+++ b/static/usage/v6/menu/type/demo.html
@@ -0,0 +1,74 @@
+
+
+
+
+
+
+ Menu - Type
+
+
+
+
+
+
+
+
+
+
+
+ Menu Content
+
+
+
+
+ Click to close the menu
+
+
+
+
+
+
+
+ Menu
+
+
+
+ Select an overlay type:
+
+
+
+ overlay
+
+
+
+
+
+ reveal
+
+
+
+
+
+ push
+
+
+
+
+
+ Click to open the menu
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/menu/type/index.md b/static/usage/v6/menu/type/index.md
new file mode 100644
index 00000000000..1316b5662e9
--- /dev/null
+++ b/static/usage/v6/menu/type/index.md
@@ -0,0 +1,25 @@
+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_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/v6/menu/type/javascript.md b/static/usage/v6/menu/type/javascript.md
new file mode 100644
index 00000000000..24dc49cf906
--- /dev/null
+++ b/static/usage/v6/menu/type/javascript.md
@@ -0,0 +1,57 @@
+```html
+
+
+
+ Menu Content
+
+
+
+
+ Click to close the menu
+
+
+
+
+
+
+
+ Menu
+
+
+
+ Select an overlay type:
+
+
+
+ overlay
+
+
+
+
+
+ reveal
+
+
+
+
+
+ push
+
+
+
+
+
+ Click to open the menu
+
+
+
+
+
+```
diff --git a/static/usage/v6/menu/type/react.md b/static/usage/v6/menu/type/react.md
new file mode 100644
index 00000000000..806e67e21a2
--- /dev/null
+++ b/static/usage/v6/menu/type/react.md
@@ -0,0 +1,78 @@
+```tsx
+import React, { useState } from 'react';
+import {
+ IonButton,
+ IonContent,
+ IonHeader,
+ IonItem,
+ IonLabel,
+ IonMenu,
+ IonMenuToggle,
+ IonPage,
+ IonRadio,
+ IonRadioGroup,
+ IonTitle,
+ IonToolbar
+} from '@ionic/react';
+import type { RadioGroupCustomEvent } from '@ionic/react';
+
+function Example() {
+ const [menuType, setMenuType] = useState('overlay');
+
+ return (
+ <>
+
+
+
+ Menu Content
+
+
+
+
+ Click to close the menu
+
+
+
+
+
+
+ Menu
+
+
+
+ Select an overlay type:
+ {
+ setMenuType(ev.detail.value);
+ }}
+ >
+
+
+ overlay
+
+
+
+
+
+ reveal
+
+
+
+
+
+ push
+
+
+
+
+
+ Click to open the menu
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/menu/type/vue.md b/static/usage/v6/menu/type/vue.md
new file mode 100644
index 00000000000..2abcb137577
--- /dev/null
+++ b/static/usage/v6/menu/type/vue.md
@@ -0,0 +1,90 @@
+```html
+
+
+
+
+ Menu Content
+
+
+
+
+ Click to close the menu
+
+
+
+
+
+
+
+ Menu
+
+
+
+ Select an overlay type:
+
+
+
+ overlay
+
+
+
+
+
+ reveal
+
+
+
+
+
+ push
+
+
+
+
+
+ Click to open the menu
+
+
+
+
+
+
+```
diff --git a/static/usage/modal/can-dismiss/boolean/angular/app_component_html.md b/static/usage/v6/modal/can-dismiss/boolean/angular/example_component_html.md
similarity index 100%
rename from static/usage/modal/can-dismiss/boolean/angular/app_component_html.md
rename to static/usage/v6/modal/can-dismiss/boolean/angular/example_component_html.md
diff --git a/static/usage/v6/modal/can-dismiss/boolean/angular/example_component_ts.md b/static/usage/v6/modal/can-dismiss/boolean/angular/example_component_ts.md
new file mode 100644
index 00000000000..b13c147dc2d
--- /dev/null
+++ b/static/usage/v6/modal/can-dismiss/boolean/angular/example_component_ts.md
@@ -0,0 +1,23 @@
+```ts
+import { Component } from '@angular/core';
+import { CheckboxCustomEvent } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ canDismiss = false;
+
+ presentingElement = null;
+
+ ngOnInit() {
+ this.presentingElement = document.querySelector('.ion-page');
+ }
+
+ onTermsChanged(event: Event) {
+ const ev = event as CheckboxCustomEvent;
+ this.canDismiss = ev.detail.checked;
+ }
+}
+```
diff --git a/static/usage/v6/modal/can-dismiss/boolean/demo.html b/static/usage/v6/modal/can-dismiss/boolean/demo.html
new file mode 100644
index 00000000000..d548f1c9e61
--- /dev/null
+++ b/static/usage/v6/modal/can-dismiss/boolean/demo.html
@@ -0,0 +1,67 @@
+
+
+
+
+
+
+ Modal | Can Dismiss
+
+
+
+
+
+
+
+
+
+
+
+ App
+
+
+
+ Open
+
+
+
+
+ Modal
+
+ Close
+
+
+
+
+ You must accept the terms and conditions to close this modal.
+
+ Do you accept the terms and conditions?
+
+
+
+
+
+
+
+
+ App
+
+
+
+ Open
+
+
+
+
+ Modal
+
+ Close
+
+
+
+
+ You must accept the terms and conditions to close this modal.
+
+ Do you accept the terms and conditions?
+
+
+
+
+
+
+
+
+ App
+
+
+
+ Open
+
+
+
+
+ Modal
+
+ Close
+
+
+
+
+ You will be prompted when closing this modal.
+
+
+
+
+
+
+
+ App
+
+
+
+ Open
+
+
+
+
+ Modal
+
+ Close
+
+
+
+
+ You will be prompted when closing this modal.
+
+
+
+
+
+
+ App
+
+
+
+ Open
+
+
+
+
+ Modal
+
+ Close
+
+
+
+
+ You will be prompted when closing this modal.
+
+
+
+
+
+
+ App
+
+
+
+ Open Card Modal
+
+
+
+
+ Modal
+
+ Close
+
+
+
+
+
+
+
+
+
+
+ Connor Smith
+ Sales Rep
+
+
+
+
+
+
+
+ Daniel Smith
+ Product Designer
+
+
+
+
+
+
+
+ Greg Smith
+ Director of Operations
+
+
+
+
+
+
+
+ Zoey Smith
+ CEO
+
+
+
+
+
+
+
+
+
+ App
+
+
+
+ Open Card Modal
+
+
+
+
+ Modal
+
+ Close
+
+
+
+
+
+
+
+
+
+
+ Connor Smith
+ Sales Rep
+
+
+
+
+
+
+
+ Daniel Smith
+ Product Designer
+
+
+
+
+
+
+
+ Greg Smith
+ Director of Operations
+
+
+
+
+
+
+
+ Zoey Smith
+ CEO
+
+
+
+
+
+
+
This modal example uses the modalController to present and dismiss modals.
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/modal/controller/index.md b/static/usage/v6/modal/controller/index.md
new file mode 100644
index 00000000000..2f1d5c9b961
--- /dev/null
+++ b/static/usage/v6/modal/controller/index.md
@@ -0,0 +1,39 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+
+import vue_example from './vue/example_vue.md';
+import vue_modal from './vue/modal_vue.md';
+
+import angular_app_module_ts from './angular/app_module_ts.md';
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_modal_example_component_ts from './angular/modal-example_component_ts.md';
+import angular_modal_example_component_html from './angular/modal-example_component_html.md';
+
+
diff --git a/static/usage/v6/modal/controller/javascript.md b/static/usage/v6/modal/controller/javascript.md
new file mode 100644
index 00000000000..dc4786be8cf
--- /dev/null
+++ b/static/usage/v6/modal/controller/javascript.md
@@ -0,0 +1,57 @@
+```html
+
+
+ Controller Modal
+
+
+
+ Open
+ This modal example uses the modalController to present and dismiss modals.
+
+
+
+```
diff --git a/static/usage/modal/controller/react.md b/static/usage/v6/modal/controller/react.md
similarity index 100%
rename from static/usage/modal/controller/react.md
rename to static/usage/v6/modal/controller/react.md
diff --git a/static/usage/modal/controller/vue/example_vue.md b/static/usage/v6/modal/controller/vue/example_vue.md
similarity index 100%
rename from static/usage/modal/controller/vue/example_vue.md
rename to static/usage/v6/modal/controller/vue/example_vue.md
diff --git a/static/usage/modal/controller/vue/modal_vue.md b/static/usage/v6/modal/controller/vue/modal_vue.md
similarity index 100%
rename from static/usage/modal/controller/vue/modal_vue.md
rename to static/usage/v6/modal/controller/vue/modal_vue.md
diff --git a/static/usage/v6/modal/custom-dialogs/angular/example_component_html.md b/static/usage/v6/modal/custom-dialogs/angular/example_component_html.md
new file mode 100644
index 00000000000..d8f43b4b55d
--- /dev/null
+++ b/static/usage/v6/modal/custom-dialogs/angular/example_component_html.md
@@ -0,0 +1,33 @@
+```html
+
+
+ App
+
+
+
+ Open Custom Dialog
+
+
+
+
+
Dialog header
+
+
+
+
+ Item 1
+
+
+
+ Item 2
+
+
+
+ Item 3
+
+
+
+
+
+
+```
diff --git a/static/usage/modal/custom-dialogs/angular/angular_css.md b/static/usage/v6/modal/custom-dialogs/angular/global_css.md
similarity index 100%
rename from static/usage/modal/custom-dialogs/angular/angular_css.md
rename to static/usage/v6/modal/custom-dialogs/angular/global_css.md
diff --git a/static/usage/v6/modal/custom-dialogs/demo.html b/static/usage/v6/modal/custom-dialogs/demo.html
new file mode 100644
index 00000000000..95149828ba7
--- /dev/null
+++ b/static/usage/v6/modal/custom-dialogs/demo.html
@@ -0,0 +1,83 @@
+
+
+
+
+
+
+ Modal | Custom Dialog
+
+
+
+
+
+
+
+
+
+
+
+ App
+
+
+
+ Open Custom Dialog
+
+
+
+
Dialog header
+
+
+
+
+ Item 1
+
+
+
+ Item 2
+
+
+
+ Item 3
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/modal/custom-dialogs/index.md b/static/usage/v6/modal/custom-dialogs/index.md
new file mode 100644
index 00000000000..a67a23d1dd3
--- /dev/null
+++ b/static/usage/v6/modal/custom-dialogs/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import angular_global_css from './angular/global_css.md';
+import angular_example_component_html from './angular/example_component_html.md';
+
+
diff --git a/static/usage/v6/modal/custom-dialogs/javascript.md b/static/usage/v6/modal/custom-dialogs/javascript.md
new file mode 100644
index 00000000000..b465debd41b
--- /dev/null
+++ b/static/usage/v6/modal/custom-dialogs/javascript.md
@@ -0,0 +1,67 @@
+```html
+
+
+
+
+ App
+
+
+
+ Open Custom Dialog
+
+
+
+
Dialog header
+
+
+
+
+ Item 1
+
+
+
+ Item 2
+
+
+
+ Item 3
+
+
+
+
+
+
+
+```
diff --git a/static/usage/modal/custom-dialogs/react/main_css.md b/static/usage/v6/modal/custom-dialogs/react/main_css.md
similarity index 100%
rename from static/usage/modal/custom-dialogs/react/main_css.md
rename to static/usage/v6/modal/custom-dialogs/react/main_css.md
diff --git a/static/usage/modal/custom-dialogs/react/main_tsx.md b/static/usage/v6/modal/custom-dialogs/react/main_tsx.md
similarity index 100%
rename from static/usage/modal/custom-dialogs/react/main_tsx.md
rename to static/usage/v6/modal/custom-dialogs/react/main_tsx.md
diff --git a/static/usage/modal/custom-dialogs/vue.md b/static/usage/v6/modal/custom-dialogs/vue.md
similarity index 100%
rename from static/usage/modal/custom-dialogs/vue.md
rename to static/usage/v6/modal/custom-dialogs/vue.md
diff --git a/static/usage/v6/modal/inline/basic/angular/example_component_html.md b/static/usage/v6/modal/inline/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..d89c7626f3d
--- /dev/null
+++ b/static/usage/v6/modal/inline/basic/angular/example_component_html.md
@@ -0,0 +1,32 @@
+```html
+
+
+ Inline Modal
+
+
+
+ Open
+ {{ message }}
+
+
+
+
+
+ Cancel
+
+ Welcome
+
+ Confirm
+
+
+
+
+
+ Enter your name
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/modal/inline/basic/angular/example_component_ts.md b/static/usage/v6/modal/inline/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..a21954ec5f1
--- /dev/null
+++ b/static/usage/v6/modal/inline/basic/angular/example_component_ts.md
@@ -0,0 +1,31 @@
+```ts
+import { Component, ViewChild } from '@angular/core';
+import { IonModal } from '@ionic/angular';
+import { OverlayEventDetail } from '@ionic/core/components';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ @ViewChild(IonModal) modal: IonModal;
+
+ message = 'This modal example uses triggers to automatically open a modal when the button is clicked.';
+ name: string;
+
+ cancel() {
+ this.modal.dismiss(null, 'cancel');
+ }
+
+ confirm() {
+ this.modal.dismiss(this.name, 'confirm');
+ }
+
+ onWillDismiss(event: Event) {
+ const ev = event as CustomEvent>;
+ if (ev.detail.role === 'confirm') {
+ this.message = `Hello, ${ev.detail.data}!`;
+ }
+ }
+}
+```
diff --git a/static/usage/v6/modal/inline/basic/demo.html b/static/usage/v6/modal/inline/basic/demo.html
new file mode 100644
index 00000000000..4007d9fc2be
--- /dev/null
+++ b/static/usage/v6/modal/inline/basic/demo.html
@@ -0,0 +1,67 @@
+
+
+
+
+
+
+ Modal | Inline
+
+
+
+
+
+
+
+
+
+
+ Inline Modal
+
+
+
+ Open
+ This modal example uses triggers to automatically open a modal when the button is clicked.
+
+
+
+
+ Cancel
+
+ Welcome
+
+ Confirm
+
+
+
+
+
+ Enter your name
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/modal/inline/basic/index.md b/static/usage/v6/modal/inline/basic/index.md
new file mode 100644
index 00000000000..e0a5c191430
--- /dev/null
+++ b/static/usage/v6/modal/inline/basic/index.md
@@ -0,0 +1,26 @@
+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_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/v6/modal/inline/basic/javascript.md b/static/usage/v6/modal/inline/basic/javascript.md
new file mode 100644
index 00000000000..cffa297eebd
--- /dev/null
+++ b/static/usage/v6/modal/inline/basic/javascript.md
@@ -0,0 +1,50 @@
+```html
+
+
+ Inline Modal
+
+
+
+ Open
+ This modal example uses triggers to automatically open a modal when the button is clicked.
+
+
+
+
+ Cancel
+
+ Welcome
+
+ Confirm
+
+
+
+
+
+ Enter your name
+
+
+
+
+
+
+
+```
diff --git a/static/usage/modal/inline/basic/react.md b/static/usage/v6/modal/inline/basic/react.md
similarity index 100%
rename from static/usage/modal/inline/basic/react.md
rename to static/usage/v6/modal/inline/basic/react.md
diff --git a/static/usage/modal/inline/basic/vue.md b/static/usage/v6/modal/inline/basic/vue.md
similarity index 100%
rename from static/usage/modal/inline/basic/vue.md
rename to static/usage/v6/modal/inline/basic/vue.md
diff --git a/static/usage/modal/inline/is-open/angular/app_component_html.md b/static/usage/v6/modal/inline/is-open/angular/example_component_html.md
similarity index 100%
rename from static/usage/modal/inline/is-open/angular/app_component_html.md
rename to static/usage/v6/modal/inline/is-open/angular/example_component_html.md
diff --git a/static/usage/v6/modal/inline/is-open/angular/example_component_ts.md b/static/usage/v6/modal/inline/is-open/angular/example_component_ts.md
new file mode 100644
index 00000000000..321577939a9
--- /dev/null
+++ b/static/usage/v6/modal/inline/is-open/angular/example_component_ts.md
@@ -0,0 +1,15 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ isModalOpen = false;
+
+ setOpen(isOpen: boolean) {
+ this.isModalOpen = isOpen;
+ }
+}
+```
diff --git a/static/usage/v6/modal/inline/is-open/demo.html b/static/usage/v6/modal/inline/is-open/demo.html
new file mode 100644
index 00000000000..ed5f3494869
--- /dev/null
+++ b/static/usage/v6/modal/inline/is-open/demo.html
@@ -0,0 +1,46 @@
+
+
+
+
+
+
+ Modal | Inline
+
+
+
+
+
+
+
+
+
+
+ Inline Modal
+
+
+
+ Open
+
+
+
+ Modal
+
+ Close
+
+
+
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni illum quidem recusandae ducimus quos
+ reprehenderit. Veniam, molestias quos, dolorum consequuntur nisi deserunt omnis id illo sit cum qui. Eaque,
+ dicta.
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/modal/inline/is-open/index.md b/static/usage/v6/modal/inline/is-open/index.md
new file mode 100644
index 00000000000..026b443d9a8
--- /dev/null
+++ b/static/usage/v6/modal/inline/is-open/index.md
@@ -0,0 +1,26 @@
+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_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/v6/modal/inline/is-open/javascript.md b/static/usage/v6/modal/inline/is-open/javascript.md
new file mode 100644
index 00000000000..1893f105d79
--- /dev/null
+++ b/static/usage/v6/modal/inline/is-open/javascript.md
@@ -0,0 +1,31 @@
+```html
+
+
+ Inline Modal
+
+
+
+ Open
+
+
+
+ Modal
+
+ Close
+
+
+
+
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni illum quidem recusandae ducimus quos
+ reprehenderit. Veniam, molestias quos, dolorum consequuntur nisi deserunt omnis id illo sit cum qui. Eaque,
+ dicta.
+
+
+
+
+
+
+```
diff --git a/static/usage/modal/inline/is-open/react.md b/static/usage/v6/modal/inline/is-open/react.md
similarity index 100%
rename from static/usage/modal/inline/is-open/react.md
rename to static/usage/v6/modal/inline/is-open/react.md
diff --git a/static/usage/modal/inline/is-open/vue.md b/static/usage/v6/modal/inline/is-open/vue.md
similarity index 100%
rename from static/usage/modal/inline/is-open/vue.md
rename to static/usage/v6/modal/inline/is-open/vue.md
diff --git a/static/usage/modal/performance/mount/angular.md b/static/usage/v6/modal/performance/mount/angular.md
similarity index 100%
rename from static/usage/modal/performance/mount/angular.md
rename to static/usage/v6/modal/performance/mount/angular.md
diff --git a/static/usage/v6/modal/performance/mount/demo.html b/static/usage/v6/modal/performance/mount/demo.html
new file mode 100644
index 00000000000..03d47899733
--- /dev/null
+++ b/static/usage/v6/modal/performance/mount/demo.html
@@ -0,0 +1,55 @@
+
+
+
+
+
+
+ Modal | Performance
+
+
+
+
+
+
+
+
+
+
+
+ Example
+
+
+
+ Open Modal
+
+
+
+
+ Close
+
+ Modal
+
+
+
+ This content was mounted as soon as the modal was created.
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/modal/performance/mount/index.md b/static/usage/v6/modal/performance/mount/index.md
new file mode 100644
index 00000000000..6e850c913b1
--- /dev/null
+++ b/static/usage/v6/modal/performance/mount/index.md
@@ -0,0 +1,19 @@
+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/v6/modal/performance/mount/javascript.md b/static/usage/v6/modal/performance/mount/javascript.md
new file mode 100644
index 00000000000..a7dd685dad4
--- /dev/null
+++ b/static/usage/v6/modal/performance/mount/javascript.md
@@ -0,0 +1,32 @@
+```html
+
+
+ Example
+
+
+
+ Open Modal
+
+
+
+
+ Close
+
+ Modal
+
+
+ This content was mounted as soon as the modal was created.
+
+
+
+
+```
diff --git a/static/usage/modal/performance/mount/react.md b/static/usage/v6/modal/performance/mount/react.md
similarity index 100%
rename from static/usage/modal/performance/mount/react.md
rename to static/usage/v6/modal/performance/mount/react.md
diff --git a/static/usage/modal/performance/mount/vue.md b/static/usage/v6/modal/performance/mount/vue.md
similarity index 100%
rename from static/usage/modal/performance/mount/vue.md
rename to static/usage/v6/modal/performance/mount/vue.md
diff --git a/static/usage/modal/sheet/background-content/angular/app_component_css.md b/static/usage/v6/modal/sheet/background-content/angular/example_component_css.md
similarity index 100%
rename from static/usage/modal/sheet/background-content/angular/app_component_css.md
rename to static/usage/v6/modal/sheet/background-content/angular/example_component_css.md
diff --git a/static/usage/v6/modal/sheet/background-content/angular/example_component_html.md b/static/usage/v6/modal/sheet/background-content/angular/example_component_html.md
new file mode 100644
index 00000000000..286c8e66487
--- /dev/null
+++ b/static/usage/v6/modal/sheet/background-content/angular/example_component_html.md
@@ -0,0 +1,72 @@
+```html
+
+
+
+ App
+
+
+
+ You can interact with the +/- buttons until the sheet is fully expanded.
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Connor Smith
+ Sales Rep
+
+
+
+
+
+
+
+ Daniel Smith
+ Product Designer
+
+
+
+
+
+
+
+ Greg Smith
+ Director of Operations
+
+
+
+
+
+
+
+ Zoey Smith
+ CEO
+
+
+
+
+
+
+
+
You can interact with the +/- buttons until the sheet is fully expanded.
+
+
+
+
+
+
+
+
+
+
+
+
+ Connor Smith
+ Sales Rep
+
+
+
+
+
+
+
+ Daniel Smith
+ Product Designer
+
+
+
+
+
+
+
+ Greg Smith
+ Director of Operations
+
+
+
+
+
+
+
+ Zoey Smith
+ CEO
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/modal/sheet/background-content/index.md b/static/usage/v6/modal/sheet/background-content/index.md
new file mode 100644
index 00000000000..ef44efa7104
--- /dev/null
+++ b/static/usage/v6/modal/sheet/background-content/index.md
@@ -0,0 +1,28 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+import react from './react.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+
diff --git a/static/usage/v6/modal/sheet/background-content/javascript.md b/static/usage/v6/modal/sheet/background-content/javascript.md
new file mode 100644
index 00000000000..7d58104e6dd
--- /dev/null
+++ b/static/usage/v6/modal/sheet/background-content/javascript.md
@@ -0,0 +1,89 @@
+```html
+
+
+
+
+ App
+
+
+
+ You can interact with the +/- buttons until the sheet is fully expanded.
+
+
+
+
+
+
+
+
+
+
+
+
+ Connor Smith
+ Sales Rep
+
+
+
+
+
+
+
+ Daniel Smith
+ Product Designer
+
+
+
+
+
+
+
+ Greg Smith
+ Director of Operations
+
+
+
+
+
+
+
+ Zoey Smith
+ CEO
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/modal/sheet/background-content/react.md b/static/usage/v6/modal/sheet/background-content/react.md
similarity index 100%
rename from static/usage/modal/sheet/background-content/react.md
rename to static/usage/v6/modal/sheet/background-content/react.md
diff --git a/static/usage/modal/sheet/background-content/vue.md b/static/usage/v6/modal/sheet/background-content/vue.md
similarity index 100%
rename from static/usage/modal/sheet/background-content/vue.md
rename to static/usage/v6/modal/sheet/background-content/vue.md
diff --git a/static/usage/v6/modal/sheet/basic/angular.md b/static/usage/v6/modal/sheet/basic/angular.md
new file mode 100644
index 00000000000..6561e311463
--- /dev/null
+++ b/static/usage/v6/modal/sheet/basic/angular.md
@@ -0,0 +1,56 @@
+```html
+
+
+ App
+
+
+
+ Open Sheet Modal
+
+
+
+
+
+
+
+
+
+
+
+ Connor Smith
+ Sales Rep
+
+
+
+
+
+
+
+ Daniel Smith
+ Product Designer
+
+
+
+
+
+
+
+ Greg Smith
+ Director of Operations
+
+
+
+
+
+
+
+ Zoey Smith
+ CEO
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/modal/sheet/basic/demo.html b/static/usage/v6/modal/sheet/basic/demo.html
new file mode 100644
index 00000000000..65be6a2ceab
--- /dev/null
+++ b/static/usage/v6/modal/sheet/basic/demo.html
@@ -0,0 +1,82 @@
+
+
+
+
+
+
+ Modal | Sheet
+
+
+
+
+
+
+
+
+
+
+ App
+
+
+
+ Open Sheet Modal
+
+
+
+
+
+
+
+
+
+
+ Connor Smith
+ Sales Rep
+
+
+
+
+
+
+
+ Daniel Smith
+ Product Designer
+
+
+
+
+
+
+
+ Greg Smith
+ Director of Operations
+
+
+
+
+
+
+
+ Zoey Smith
+ CEO
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/modal/sheet/basic/index.md b/static/usage/v6/modal/sheet/basic/index.md
new file mode 100644
index 00000000000..3525336234e
--- /dev/null
+++ b/static/usage/v6/modal/sheet/basic/index.md
@@ -0,0 +1,19 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+import react from './react.md';
+import angular from './angular.md';
+
+
diff --git a/static/usage/v6/modal/sheet/basic/javascript.md b/static/usage/v6/modal/sheet/basic/javascript.md
new file mode 100644
index 00000000000..2fb52ea2242
--- /dev/null
+++ b/static/usage/v6/modal/sheet/basic/javascript.md
@@ -0,0 +1,65 @@
+```html
+
+
+ App
+
+
+
+ Open Sheet Modal
+
+
+
+
+
+
+
+
+
+
+ Connor Smith
+ Sales Rep
+
+
+
+
+
+
+
+ Daniel Smith
+ Product Designer
+
+
+
+
+
+
+
+ Greg Smith
+ Director of Operations
+
+
+
+
+
+
+
+ Zoey Smith
+ CEO
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/modal/sheet/basic/react.md b/static/usage/v6/modal/sheet/basic/react.md
similarity index 100%
rename from static/usage/modal/sheet/basic/react.md
rename to static/usage/v6/modal/sheet/basic/react.md
diff --git a/static/usage/modal/sheet/basic/vue.md b/static/usage/v6/modal/sheet/basic/vue.md
similarity index 100%
rename from static/usage/modal/sheet/basic/vue.md
rename to static/usage/v6/modal/sheet/basic/vue.md
diff --git a/static/usage/v6/modal/sheet/handle-behavior/angular.md b/static/usage/v6/modal/sheet/handle-behavior/angular.md
new file mode 100644
index 00000000000..d6f30b1ca8f
--- /dev/null
+++ b/static/usage/v6/modal/sheet/handle-behavior/angular.md
@@ -0,0 +1,25 @@
+```html
+
+
+ App
+
+
+
+ Open Sheet Modal
+
+
+
+
+
+ Click the handle above to advance to the next breakpoint.
+
+
+
+
+
+```
diff --git a/static/usage/v6/modal/sheet/handle-behavior/demo.html b/static/usage/v6/modal/sheet/handle-behavior/demo.html
new file mode 100644
index 00000000000..c89417e7ecf
--- /dev/null
+++ b/static/usage/v6/modal/sheet/handle-behavior/demo.html
@@ -0,0 +1,41 @@
+
+
+
+
+
+
+ Modal | Sheet
+
+
+
+
+
+
+
+
+
+
+ App
+
+
+
+ Open Sheet Modal
+
+
+
+
+ Click the handle above to advance to the next breakpoint.
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/modal/sheet/handle-behavior/index.md b/static/usage/v6/modal/sheet/handle-behavior/index.md
new file mode 100644
index 00000000000..319f0e86dfe
--- /dev/null
+++ b/static/usage/v6/modal/sheet/handle-behavior/index.md
@@ -0,0 +1,19 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+import react from './react.md';
+import angular from './angular.md';
+
+
diff --git a/static/usage/v6/modal/sheet/handle-behavior/javascript.md b/static/usage/v6/modal/sheet/handle-behavior/javascript.md
new file mode 100644
index 00000000000..8215dd69636
--- /dev/null
+++ b/static/usage/v6/modal/sheet/handle-behavior/javascript.md
@@ -0,0 +1,24 @@
+```html
+
+
+ App
+
+
+
+ Open Sheet Modal
+
+
+
+
+ Click the handle above to advance to the next breakpoint.
+
+
+
+
+
+
+```
diff --git a/static/usage/modal/sheet/handle-behavior/react.md b/static/usage/v6/modal/sheet/handle-behavior/react.md
similarity index 100%
rename from static/usage/modal/sheet/handle-behavior/react.md
rename to static/usage/v6/modal/sheet/handle-behavior/react.md
diff --git a/static/usage/modal/sheet/handle-behavior/vue.md b/static/usage/v6/modal/sheet/handle-behavior/vue.md
similarity index 100%
rename from static/usage/modal/sheet/handle-behavior/vue.md
rename to static/usage/v6/modal/sheet/handle-behavior/vue.md
diff --git a/static/usage/v6/modal/styling/animations/angular/example_component_html.md b/static/usage/v6/modal/styling/animations/angular/example_component_html.md
new file mode 100644
index 00000000000..befb0873d45
--- /dev/null
+++ b/static/usage/v6/modal/styling/animations/angular/example_component_html.md
@@ -0,0 +1,63 @@
+```html
+
+
+ App
+
+
+
+ Open Modal
+
+
+
+
+
+ Modal
+
+ Close
+
+
+
+
+
+
+
+
+
+
+ Connor Smith
+ Sales Rep
+
+
+
+
+
+
+
+ Daniel Smith
+ Product Designer
+
+
+
+
+
+
+
+ Greg Smith
+ Director of Operations
+
+
+
+
+
+
+
+ Zoey Smith
+ CEO
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/modal/styling/animations/angular/example_component_ts.md b/static/usage/v6/modal/styling/animations/angular/example_component_ts.md
new file mode 100644
index 00000000000..c4a743b2745
--- /dev/null
+++ b/static/usage/v6/modal/styling/animations/angular/example_component_ts.md
@@ -0,0 +1,40 @@
+```ts
+import { Component } from '@angular/core';
+import { AnimationController } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ constructor(private animationCtrl: AnimationController) {}
+
+ enterAnimation = (baseEl: HTMLElement) => {
+ const root = baseEl.shadowRoot;
+
+ const backdropAnimation = this.animationCtrl
+ .create()
+ .addElement(root.querySelector('ion-backdrop')!)
+ .fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
+
+ const wrapperAnimation = this.animationCtrl
+ .create()
+ .addElement(root.querySelector('.modal-wrapper')!)
+ .keyframes([
+ { offset: 0, opacity: '0', transform: 'scale(0)' },
+ { offset: 1, opacity: '0.99', transform: 'scale(1)' },
+ ]);
+
+ return this.animationCtrl
+ .create()
+ .addElement(baseEl)
+ .easing('ease-out')
+ .duration(500)
+ .addAnimation([backdropAnimation, wrapperAnimation]);
+ };
+
+ leaveAnimation = (baseEl: HTMLElement) => {
+ return this.enterAnimation(baseEl).direction('reverse');
+ };
+}
+```
diff --git a/static/usage/v6/modal/styling/animations/demo.html b/static/usage/v6/modal/styling/animations/demo.html
new file mode 100644
index 00000000000..555667996c4
--- /dev/null
+++ b/static/usage/v6/modal/styling/animations/demo.html
@@ -0,0 +1,117 @@
+
+
+
+
+
+
+ Modal | Animations
+
+
+
+
+
+
+
+
+
+
+
+
+ App
+
+
+
+ Open Modal
+
+
+
+
+ Modal
+
+ Close
+
+
+
+
+
+
+
+
+
+
+ Connor Smith
+ Sales Rep
+
+
+
+
+
+
+
+ Daniel Smith
+ Product Designer
+
+
+
+
+
+
+
+ Greg Smith
+ Director of Operations
+
+
+
+
+
+
+
+ Zoey Smith
+ CEO
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/modal/styling/animations/index.md b/static/usage/v6/modal/styling/animations/index.md
new file mode 100644
index 00000000000..9198d960c17
--- /dev/null
+++ b/static/usage/v6/modal/styling/animations/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import vue from './vue.md';
+import react from './react.md';
+
+import javascript_index_html from './javascript/index_html.md';
+import javascript_index_ts from './javascript/index_ts.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/modal/styling/animations/javascript/index_html.md b/static/usage/v6/modal/styling/animations/javascript/index_html.md
similarity index 100%
rename from static/usage/modal/styling/animations/javascript/index_html.md
rename to static/usage/v6/modal/styling/animations/javascript/index_html.md
diff --git a/static/usage/modal/styling/animations/javascript/index_ts.md b/static/usage/v6/modal/styling/animations/javascript/index_ts.md
similarity index 100%
rename from static/usage/modal/styling/animations/javascript/index_ts.md
rename to static/usage/v6/modal/styling/animations/javascript/index_ts.md
diff --git a/static/usage/v6/modal/styling/animations/react.md b/static/usage/v6/modal/styling/animations/react.md
new file mode 100644
index 00000000000..06dfa9d70ff
--- /dev/null
+++ b/static/usage/v6/modal/styling/animations/react.md
@@ -0,0 +1,123 @@
+```tsx
+import React, { useRef } from 'react';
+import {
+ createAnimation,
+ IonButtons,
+ IonButton,
+ IonModal,
+ IonHeader,
+ IonContent,
+ IonToolbar,
+ IonTitle,
+ IonPage,
+ IonList,
+ IonItem,
+ IonLabel,
+ IonAvatar,
+ IonImg,
+} from '@ionic/react';
+
+function Example() {
+ const modal = useRef(null);
+
+ function dismiss() {
+ modal.current?.dismiss();
+ }
+
+ const enterAnimation = (baseEl: HTMLElement) => {
+ const root = baseEl.shadowRoot;
+
+ const backdropAnimation = createAnimation()
+ .addElement(root?.querySelector('ion-backdrop')!)
+ .fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
+
+ const wrapperAnimation = createAnimation()
+ .addElement(root?.querySelector('.modal-wrapper')!)
+ .keyframes([
+ { offset: 0, opacity: '0', transform: 'scale(0)' },
+ { offset: 1, opacity: '0.99', transform: 'scale(1)' },
+ ]);
+
+ return createAnimation()
+ .addElement(baseEl)
+ .easing('ease-out')
+ .duration(500)
+ .addAnimation([backdropAnimation, wrapperAnimation]);
+ };
+
+ const leaveAnimation = (baseEl: HTMLElement) => {
+ return enterAnimation(baseEl).direction('reverse');
+ };
+
+ return (
+
+
+
+ App
+
+
+
+
+ Open Modal
+
+
+
+
+ Modal
+
+ dismiss()}>Close
+
+
+
+
+
+
+
+
+ Connor Smith
+ Sales Rep
+
+
+
+
+
+
+
+ Daniel Smith
+ Product Designer
+
+
+
+
+
+
+
+ Greg Smith
+ Director of Operations
+
+
+
+
+
+
+
+ Zoey Smith
+ CEO
+
+
+
+
+
+
+
+ );
+}
+
+export default Example;
+```
diff --git a/static/usage/modal/styling/animations/vue.md b/static/usage/v6/modal/styling/animations/vue.md
similarity index 100%
rename from static/usage/modal/styling/animations/vue.md
rename to static/usage/v6/modal/styling/animations/vue.md
diff --git a/static/usage/v6/modal/styling/theming/angular/example_component_html.md b/static/usage/v6/modal/styling/theming/angular/example_component_html.md
new file mode 100644
index 00000000000..2d18a6f26d9
--- /dev/null
+++ b/static/usage/v6/modal/styling/theming/angular/example_component_html.md
@@ -0,0 +1,61 @@
+```html
+
+
+ App
+
+
+
+ Open Modal
+
+
+
+
+
+ Modal
+
+ Close
+
+
+
+
+
+
+
+
+ Connor Smith
+ Sales Rep
+
+
+
+
+
+
+
+ Daniel Smith
+ Product Designer
+
+
+
+
+
+
+
+ Greg Smith
+ Director of Operations
+
+
+
+
+
+
+
+ Zoey Smith
+ CEO
+
+
+
+
+
+
+
+```
diff --git a/static/usage/modal/styling/theming/angular/angular_css.md b/static/usage/v6/modal/styling/theming/angular/global_css.md
similarity index 100%
rename from static/usage/modal/styling/theming/angular/angular_css.md
rename to static/usage/v6/modal/styling/theming/angular/global_css.md
diff --git a/static/usage/v6/modal/styling/theming/demo.html b/static/usage/v6/modal/styling/theming/demo.html
new file mode 100644
index 00000000000..f0c3f00bbe4
--- /dev/null
+++ b/static/usage/v6/modal/styling/theming/demo.html
@@ -0,0 +1,101 @@
+
+
+
+
+
+
+ Modal | Theming
+
+
+
+
+
+
+
+
+
+
+
+ App
+
+
+
+ Open Modal
+
+
+
+
+ Modal
+
+ Close
+
+
+
+
+
+
+
+
+ Connor Smith
+ Sales Rep
+
+
+
+
+
+
+
+ Daniel Smith
+ Product Designer
+
+
+
+
+
+
+
+ Greg Smith
+ Director of Operations
+
+
+
+
+
+
+
+ Zoey Smith
+ CEO
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/modal/styling/theming/index.md b/static/usage/v6/modal/styling/theming/index.md
new file mode 100644
index 00000000000..883a0197744
--- /dev/null
+++ b/static/usage/v6/modal/styling/theming/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import angular_global_css from './angular/global_css.md';
+import angular_example_component_html from './angular/example_component_html.md';
+
+
diff --git a/static/usage/modal/styling/theming/javascript.md b/static/usage/v6/modal/styling/theming/javascript.md
similarity index 100%
rename from static/usage/modal/styling/theming/javascript.md
rename to static/usage/v6/modal/styling/theming/javascript.md
diff --git a/static/usage/modal/styling/theming/react/main_css.md b/static/usage/v6/modal/styling/theming/react/main_css.md
similarity index 100%
rename from static/usage/modal/styling/theming/react/main_css.md
rename to static/usage/v6/modal/styling/theming/react/main_css.md
diff --git a/static/usage/v6/modal/styling/theming/react/main_tsx.md b/static/usage/v6/modal/styling/theming/react/main_tsx.md
new file mode 100644
index 00000000000..7c8509879ab
--- /dev/null
+++ b/static/usage/v6/modal/styling/theming/react/main_tsx.md
@@ -0,0 +1,95 @@
+```tsx
+import React, { useRef } from 'react';
+import {
+ IonButtons,
+ IonButton,
+ IonModal,
+ IonHeader,
+ IonContent,
+ IonToolbar,
+ IonTitle,
+ IonPage,
+ IonList,
+ IonItem,
+ IonLabel,
+ IonAvatar,
+ IonImg,
+} from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ const modal = useRef(null);
+
+ function dismiss() {
+ modal.current?.dismiss();
+ }
+
+ return (
+
+
+
+ App
+
+
+
+
+ Open Modal
+
+
+
+
+ Modal
+
+ dismiss()}>
+ Close
+
+
+
+
+
+
+
+
+
+ Connor Smith
+ Sales Rep
+
+
+
+
+
+
+
+ Daniel Smith
+ Product Designer
+
+
+
+
+
+
+
+ Greg Smith
+ Director of Operations
+
+
+
+
+
+
+
+ Zoey Smith
+ CEO
+
+
+
+
+
+
+
+ );
+}
+
+export default Example;
+```
diff --git a/static/usage/modal/styling/theming/vue.md b/static/usage/v6/modal/styling/theming/vue.md
similarity index 100%
rename from static/usage/modal/styling/theming/vue.md
rename to static/usage/v6/modal/styling/theming/vue.md
diff --git a/static/usage/v6/nav/modal-navigation/angular/app_module_ts.md b/static/usage/v6/nav/modal-navigation/angular/app_module_ts.md
new file mode 100644
index 00000000000..d3b8b44f6ce
--- /dev/null
+++ b/static/usage/v6/nav/modal-navigation/angular/app_module_ts.md
@@ -0,0 +1,21 @@
+```ts
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+
+import { AppComponent } from './app.component';
+import { ExampleComponent } from './example.component';
+
+import { PageOneComponent } from './page-one.component';
+import { PageTwoComponent } from './page-two.component';
+import { PageThreeComponent } from './page-three.component';
+
+@NgModule({
+ imports: [BrowserModule, RouterModule.forRoot([]), IonicModule.forRoot({})],
+ declarations: [AppComponent, ExampleComponent, PageOneComponent, PageTwoComponent, PageThreeComponent],
+ bootstrap: [AppComponent],
+})
+export class AppModule {}
+```
diff --git a/static/usage/v6/nav/modal-navigation/angular/example_component_html.md b/static/usage/v6/nav/modal-navigation/angular/example_component_html.md
new file mode 100644
index 00000000000..06d46334df5
--- /dev/null
+++ b/static/usage/v6/nav/modal-navigation/angular/example_component_html.md
@@ -0,0 +1,25 @@
+```html
+
+
+ Modal Navigation
+
+
+
+ Open Modal
+
+
+
+
+ Modal
+
+ Close
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/nav/modal-navigation/angular/example_component_ts.md b/static/usage/v6/nav/modal-navigation/angular/example_component_ts.md
new file mode 100644
index 00000000000..366dc7e246d
--- /dev/null
+++ b/static/usage/v6/nav/modal-navigation/angular/example_component_ts.md
@@ -0,0 +1,18 @@
+```ts
+import { Component, ViewChild } from '@angular/core';
+import { IonNav } from '@ionic/angular';
+
+import { PageOneComponent } from './page-one.component';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ @ViewChild('nav') private nav: IonNav;
+
+ onWillPresent() {
+ this.nav.setRoot(PageOneComponent);
+ }
+}
+```
diff --git a/static/usage/v6/nav/modal-navigation/angular/page_one_component_ts.md b/static/usage/v6/nav/modal-navigation/angular/page_one_component_ts.md
new file mode 100644
index 00000000000..3c9ec863d04
--- /dev/null
+++ b/static/usage/v6/nav/modal-navigation/angular/page_one_component_ts.md
@@ -0,0 +1,23 @@
+```ts
+import { Component } from '@angular/core';
+import { IonNav } from '@ionic/angular';
+
+import { PageTwoComponent } from './page-two.component';
+
+@Component({
+ selector: 'app-page-one',
+ template: `
+
+ Page One
+ Go to Page Two
+
+ `,
+})
+export class PageOneComponent {
+ constructor(private nav: IonNav) {}
+
+ navigateToPageTwo() {
+ this.nav.push(PageTwoComponent);
+ }
+}
+```
diff --git a/static/usage/v6/nav/modal-navigation/angular/page_three_component_ts.md b/static/usage/v6/nav/modal-navigation/angular/page_three_component_ts.md
new file mode 100644
index 00000000000..5b1b70c3474
--- /dev/null
+++ b/static/usage/v6/nav/modal-navigation/angular/page_three_component_ts.md
@@ -0,0 +1,26 @@
+```ts
+import { Component } from '@angular/core';
+import { IonNav } from '@ionic/angular';
+
+@Component({
+ selector: 'app-page-one',
+ template: `
+
+ Page Three
+ Go Back
+ Go to Root
+
+ `,
+})
+export class PageThreeComponent {
+ constructor(private nav: IonNav) {}
+
+ navigateBack() {
+ this.nav.pop();
+ }
+
+ navigateToRoot() {
+ this.nav.popToRoot();
+ }
+}
+```
diff --git a/static/usage/v6/nav/modal-navigation/angular/page_two_component_ts.md b/static/usage/v6/nav/modal-navigation/angular/page_two_component_ts.md
new file mode 100644
index 00000000000..0cd5713c062
--- /dev/null
+++ b/static/usage/v6/nav/modal-navigation/angular/page_two_component_ts.md
@@ -0,0 +1,25 @@
+```ts
+import { Component } from '@angular/core';
+import { IonNav } from '@ionic/angular';
+
+import { PageThreeComponent } from './page-three.component';
+
+@Component({
+ selector: 'app-page-two',
+ template: `
+
+ Page Two
+ Go to Page Three
+
+ `,
+})
+export class PageTwoComponent {
+ component = PageThreeComponent;
+
+ constructor(private nav: IonNav) {}
+
+ navigateToPageThree() {
+ this.nav.push(PageThreeComponent);
+ }
+}
+```
diff --git a/static/usage/v6/nav/modal-navigation/demo.html b/static/usage/v6/nav/modal-navigation/demo.html
new file mode 100644
index 00000000000..0d099f1e3cc
--- /dev/null
+++ b/static/usage/v6/nav/modal-navigation/demo.html
@@ -0,0 +1,106 @@
+
+
+
+
+
+
+
+ Nav | Modal Navigation
+
+
+
+
+
+
+
+
+
+
+ Modal Navigation
+
+
+
+ Open Modal
+
+
+
+ Modal
+
+
+ Close
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/nav/modal-navigation/index.md b/static/usage/v6/nav/modal-navigation/index.md
new file mode 100644
index 00000000000..37de19ca71a
--- /dev/null
+++ b/static/usage/v6/nav/modal-navigation/index.md
@@ -0,0 +1,56 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import angular_app_module_ts from './angular/app_module_ts.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_page_one_component_ts from './angular/page_one_component_ts.md';
+import angular_page_two_component_ts from './angular/page_two_component_ts.md';
+import angular_page_three_component_ts from './angular/page_three_component_ts.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_page_one_tsx from './react/page_one_tsx.md';
+import react_page_two_tsx from './react/page_two_tsx.md';
+import react_page_three_tsx from './react/page_three_tsx.md';
+
+import vue_example from './vue/example_vue.md';
+import vue_page_one from './vue/page_one_vue.md';
+import vue_page_two from './vue/page_two_vue.md';
+import vue_page_three from './vue/page_three_vue.md';
+
+
diff --git a/static/usage/v6/nav/modal-navigation/javascript.md b/static/usage/v6/nav/modal-navigation/javascript.md
new file mode 100644
index 00000000000..5fd4e9ef13a
--- /dev/null
+++ b/static/usage/v6/nav/modal-navigation/javascript.md
@@ -0,0 +1,86 @@
+```html
+
+
+
+ Modal Navigation
+
+
+
+ Open Modal
+
+
+
+ Modal
+
+ Close
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/nav/modal-navigation/react/main_tsx.md b/static/usage/v6/nav/modal-navigation/react/main_tsx.md
new file mode 100644
index 00000000000..fc6901b3d6d
--- /dev/null
+++ b/static/usage/v6/nav/modal-navigation/react/main_tsx.md
@@ -0,0 +1,60 @@
+```tsx
+import React, { useRef } from 'react';
+import {
+ IonNav,
+ IonPage,
+ IonHeader,
+ IonToolbar,
+ IonTitle,
+ IonButton,
+ IonButtons,
+ IonContent,
+ IonModal,
+} from '@ionic/react';
+
+import PageOne from './page-one';
+
+function Example() {
+ const nav = useRef(null);
+ const modal = useRef(null);
+
+ const didPresent = () => {
+ if (nav.current) {
+ nav.current.setRoot(PageOne, { nav: nav.current });
+ }
+ };
+
+ const dismiss = () => {
+ if (modal.current) {
+ modal.current.dismiss();
+ }
+ };
+
+ return (
+
+
+
+ Modal Navigation
+
+
+
+ Open Modal
+
+
+
+ Modal
+
+ Close
+
+
+
+
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/nav/modal-navigation/react/page_one_tsx.md b/static/usage/v6/nav/modal-navigation/react/page_one_tsx.md
new file mode 100644
index 00000000000..ce5c266e21b
--- /dev/null
+++ b/static/usage/v6/nav/modal-navigation/react/page_one_tsx.md
@@ -0,0 +1,18 @@
+```tsx
+import React from 'react';
+import { IonButton, IonContent } from '@ionic/react';
+
+import PageTwo from './page-two';
+
+function PageOne({ nav }: { nav: HTMLIonNavElement }) {
+ const navigateToPageTwo = () => nav.push(PageTwo, { nav });
+ return (
+
+ Page One
+ Go to Page Two
+
+ );
+}
+
+export default PageOne;
+```
diff --git a/static/usage/v6/nav/modal-navigation/react/page_three_tsx.md b/static/usage/v6/nav/modal-navigation/react/page_three_tsx.md
new file mode 100644
index 00000000000..3613967edfd
--- /dev/null
+++ b/static/usage/v6/nav/modal-navigation/react/page_three_tsx.md
@@ -0,0 +1,19 @@
+```tsx
+import React from 'react';
+import { IonButton, IonContent } from '@ionic/react';
+
+function PageThree({ nav }: { nav: HTMLIonNavElement }) {
+ const navigateBack = () => nav.pop();
+ const navigateToRoot = () => nav.popToRoot();
+
+ return (
+
+ Page Three
+ Go Back
+ Go to Root
+
+ );
+}
+
+export default PageThree;
+```
diff --git a/static/usage/v6/nav/modal-navigation/react/page_two_tsx.md b/static/usage/v6/nav/modal-navigation/react/page_two_tsx.md
new file mode 100644
index 00000000000..48562bd23cd
--- /dev/null
+++ b/static/usage/v6/nav/modal-navigation/react/page_two_tsx.md
@@ -0,0 +1,19 @@
+```tsx
+import React from 'react';
+import { IonButton, IonContent } from '@ionic/react';
+
+import PageThree from './page-three';
+
+function PageTwo({ nav }: { nav: HTMLIonNavElement }) {
+ const navigateToPageThree = () => nav.push(PageThree, { nav });
+
+ return (
+
+ Page Two
+ Go to Page Three
+
+ );
+}
+
+export default PageTwo;
+```
diff --git a/static/usage/v6/nav/modal-navigation/vue/example_vue.md b/static/usage/v6/nav/modal-navigation/vue/example_vue.md
new file mode 100644
index 00000000000..ad5242e5c06
--- /dev/null
+++ b/static/usage/v6/nav/modal-navigation/vue/example_vue.md
@@ -0,0 +1,60 @@
+```html
+
+
+
+
+ Modal Navigation
+
+
+
+ Open Modal
+
+
+
+ Modal
+
+ Close
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/nav/modal-navigation/vue/page_one_vue.md b/static/usage/v6/nav/modal-navigation/vue/page_one_vue.md
new file mode 100644
index 00000000000..94613725139
--- /dev/null
+++ b/static/usage/v6/nav/modal-navigation/vue/page_one_vue.md
@@ -0,0 +1,24 @@
+```html
+
+
+ Page One
+ Go to Page Two
+
+
+
+
+```
diff --git a/static/usage/v6/nav/modal-navigation/vue/page_three_vue.md b/static/usage/v6/nav/modal-navigation/vue/page_three_vue.md
new file mode 100644
index 00000000000..9dde8817996
--- /dev/null
+++ b/static/usage/v6/nav/modal-navigation/vue/page_three_vue.md
@@ -0,0 +1,28 @@
+```html
+
+
+ Page Three
+ Go Back
+ Go to Root
+
+
+
+
+```
diff --git a/static/usage/v6/nav/modal-navigation/vue/page_two_vue.md b/static/usage/v6/nav/modal-navigation/vue/page_two_vue.md
new file mode 100644
index 00000000000..737fa71158b
--- /dev/null
+++ b/static/usage/v6/nav/modal-navigation/vue/page_two_vue.md
@@ -0,0 +1,24 @@
+```html
+
+
+ Page Two
+ Go to Page Three
+
+
+
+
+```
diff --git a/static/usage/v6/nav/nav-link/angular/app_module_ts.md b/static/usage/v6/nav/nav-link/angular/app_module_ts.md
new file mode 100644
index 00000000000..d3b8b44f6ce
--- /dev/null
+++ b/static/usage/v6/nav/nav-link/angular/app_module_ts.md
@@ -0,0 +1,21 @@
+```ts
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+
+import { AppComponent } from './app.component';
+import { ExampleComponent } from './example.component';
+
+import { PageOneComponent } from './page-one.component';
+import { PageTwoComponent } from './page-two.component';
+import { PageThreeComponent } from './page-three.component';
+
+@NgModule({
+ imports: [BrowserModule, RouterModule.forRoot([]), IonicModule.forRoot({})],
+ declarations: [AppComponent, ExampleComponent, PageOneComponent, PageTwoComponent, PageThreeComponent],
+ bootstrap: [AppComponent],
+})
+export class AppModule {}
+```
diff --git a/static/usage/v6/nav/nav-link/angular/example_component_html.md b/static/usage/v6/nav/nav-link/angular/example_component_html.md
new file mode 100644
index 00000000000..1534ea3a6ec
--- /dev/null
+++ b/static/usage/v6/nav/nav-link/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v6/nav/nav-link/angular/example_component_ts.md b/static/usage/v6/nav/nav-link/angular/example_component_ts.md
new file mode 100644
index 00000000000..b123a4858ce
--- /dev/null
+++ b/static/usage/v6/nav/nav-link/angular/example_component_ts.md
@@ -0,0 +1,13 @@
+```ts
+import { Component } from '@angular/core';
+
+import { PageOneComponent } from './page-one.component';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ component = PageOneComponent;
+}
+```
diff --git a/static/usage/v6/nav/nav-link/angular/page_one_component_ts.md b/static/usage/v6/nav/nav-link/angular/page_one_component_ts.md
new file mode 100644
index 00000000000..06c42b342cf
--- /dev/null
+++ b/static/usage/v6/nav/nav-link/angular/page_one_component_ts.md
@@ -0,0 +1,25 @@
+```ts
+import { Component } from '@angular/core';
+
+import { PageTwoComponent } from './page-two.component';
+
+@Component({
+ selector: 'app-page-one',
+ template: `
+
+
+ Page One
+
+
+
+ Page One
+
+ Go to Page Two
+
+
+ `,
+})
+export class PageOneComponent {
+ component = PageTwoComponent;
+}
+```
diff --git a/static/usage/v6/nav/nav-link/angular/page_three_component_ts.md b/static/usage/v6/nav/nav-link/angular/page_three_component_ts.md
new file mode 100644
index 00000000000..d9e95ed7218
--- /dev/null
+++ b/static/usage/v6/nav/nav-link/angular/page_three_component_ts.md
@@ -0,0 +1,21 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-page-one',
+ template: `
+
+
+
+
+
+ Page Three
+
+
+
+ Page Three
+
+ `,
+})
+export class PageThreeComponent {}
+```
diff --git a/static/usage/v6/nav/nav-link/angular/page_two_component_ts.md b/static/usage/v6/nav/nav-link/angular/page_two_component_ts.md
new file mode 100644
index 00000000000..d6edd90a593
--- /dev/null
+++ b/static/usage/v6/nav/nav-link/angular/page_two_component_ts.md
@@ -0,0 +1,30 @@
+```ts
+import { Component } from '@angular/core';
+
+import { PageThreeComponent } from './page-three.component';
+
+@Component({
+ selector: 'app-page-two',
+ template: `
+
+
+
+
+
+ Page Two
+
+
+
+ Page Two
+
+
+ Go to Page Three
+
+
+
+ `,
+})
+export class PageTwoComponent {
+ component = PageThreeComponent;
+}
+```
diff --git a/static/usage/v6/nav/nav-link/demo.html b/static/usage/v6/nav/nav-link/demo.html
new file mode 100644
index 00000000000..9d8aa06c58f
--- /dev/null
+++ b/static/usage/v6/nav/nav-link/demo.html
@@ -0,0 +1,84 @@
+
+
+
+
+
+
+
+ Nav | NavLink
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/nav/nav-link/index.md b/static/usage/v6/nav/nav-link/index.md
new file mode 100644
index 00000000000..2fdeadbbbdd
--- /dev/null
+++ b/static/usage/v6/nav/nav-link/index.md
@@ -0,0 +1,55 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import angular_app_module_ts from './angular/app_module_ts.md';
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_page_one_component_ts from './angular/page_one_component_ts.md';
+import angular_page_two_component_ts from './angular/page_two_component_ts.md';
+import angular_page_three_component_ts from './angular/page_three_component_ts.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_page_one_tsx from './react/page_one_tsx.md';
+import react_page_two_tsx from './react/page_two_tsx.md';
+import react_page_three_tsx from './react/page_three_tsx.md';
+
+import vue_example from './vue/example_vue.md';
+import vue_page_one from './vue/page_one_vue.md';
+import vue_page_two from './vue/page_two_vue.md';
+import vue_page_three from './vue/page_three_vue.md';
+
+
diff --git a/static/usage/v6/nav/nav-link/javascript.md b/static/usage/v6/nav/nav-link/javascript.md
new file mode 100644
index 00000000000..faf19dc3ca7
--- /dev/null
+++ b/static/usage/v6/nav/nav-link/javascript.md
@@ -0,0 +1,67 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v6/nav/nav-link/react/main_tsx.md b/static/usage/v6/nav/nav-link/react/main_tsx.md
new file mode 100644
index 00000000000..f6196a362e9
--- /dev/null
+++ b/static/usage/v6/nav/nav-link/react/main_tsx.md
@@ -0,0 +1,11 @@
+```tsx
+import React from 'react';
+import { IonNav } from '@ionic/react';
+
+import PageOne from './page-one';
+
+function Example() {
+ return }>;
+}
+export default Example;
+```
diff --git a/static/usage/v6/nav/nav-link/react/page_one_tsx.md b/static/usage/v6/nav/nav-link/react/page_one_tsx.md
new file mode 100644
index 00000000000..303ad18547a
--- /dev/null
+++ b/static/usage/v6/nav/nav-link/react/page_one_tsx.md
@@ -0,0 +1,26 @@
+```tsx
+import React from 'react';
+import { IonButton, IonHeader, IonContent, IonNavLink, IonToolbar, IonTitle } from '@ionic/react';
+
+import PageTwo from './page-two';
+
+function PageOne() {
+ return (
+ <>
+
+
+ Page One
+
+
+
+ Page One
+ }>
+ Go to Page Two
+
+
+
+ );
+}
+
+export default PageOne;
+```
diff --git a/static/usage/v6/nav/nav-link/react/page_three_tsx.md b/static/usage/v6/nav/nav-link/react/page_three_tsx.md
new file mode 100644
index 00000000000..451d30db85d
--- /dev/null
+++ b/static/usage/v6/nav/nav-link/react/page_three_tsx.md
@@ -0,0 +1,24 @@
+```tsx
+import React from 'react';
+import { IonBackButton, IonButtons, IonHeader, IonContent, IonToolbar, IonTitle } from '@ionic/react';
+
+function PageThree() {
+ return (
+ <>
+
+
+
+
+
+ Page Three
+
+
+
+ Page Three
+
+
+ );
+}
+
+export default PageThree;
+```
diff --git a/static/usage/v6/nav/nav-link/react/page_two_tsx.md b/static/usage/v6/nav/nav-link/react/page_two_tsx.md
new file mode 100644
index 00000000000..fd3f8764873
--- /dev/null
+++ b/static/usage/v6/nav/nav-link/react/page_two_tsx.md
@@ -0,0 +1,38 @@
+```tsx
+import React from 'react';
+import {
+ IonBackButton,
+ IonButtons,
+ IonButton,
+ IonHeader,
+ IonContent,
+ IonNavLink,
+ IonToolbar,
+ IonTitle,
+} from '@ionic/react';
+
+import PageThree from './page-three';
+
+function PageTwo() {
+ return (
+ <>
+
+
+
+
+
+ Page Two
+
+
+
+ Page Two
+ }>
+ Go to Page Three
+
+
+
+ );
+}
+
+export default PageTwo;
+```
diff --git a/static/usage/v6/nav/nav-link/vue/example_vue.md b/static/usage/v6/nav/nav-link/vue/example_vue.md
new file mode 100644
index 00000000000..ec054a80749
--- /dev/null
+++ b/static/usage/v6/nav/nav-link/vue/example_vue.md
@@ -0,0 +1,19 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v6/nav/nav-link/vue/page_one_vue.md b/static/usage/v6/nav/nav-link/vue/page_one_vue.md
new file mode 100644
index 00000000000..f3635e1db37
--- /dev/null
+++ b/static/usage/v6/nav/nav-link/vue/page_one_vue.md
@@ -0,0 +1,29 @@
+```html
+
+
+
+ Page One
+
+
+
+ Page One
+
+ Go to Page Two
+
+
+
+
+
+```
diff --git a/static/usage/v6/nav/nav-link/vue/page_three_vue.md b/static/usage/v6/nav/nav-link/vue/page_three_vue.md
new file mode 100644
index 00000000000..54d6acf24c9
--- /dev/null
+++ b/static/usage/v6/nav/nav-link/vue/page_three_vue.md
@@ -0,0 +1,23 @@
+```html
+
+
+
+
+
+
+ Page Three
+
+
+
+ Page Three
+
+
+
+
+```
diff --git a/static/usage/v6/nav/nav-link/vue/page_two_vue.md b/static/usage/v6/nav/nav-link/vue/page_two_vue.md
new file mode 100644
index 00000000000..0d736d69c88
--- /dev/null
+++ b/static/usage/v6/nav/nav-link/vue/page_two_vue.md
@@ -0,0 +1,50 @@
+```html
+
+
+
+
+
+
+ Page Two
+
+
+
+ Page Two
+
+ Go to Page Three
+
+
+
+
+
+```
diff --git a/static/usage/v6/note/basic/angular.md b/static/usage/v6/note/basic/angular.md
new file mode 100644
index 00000000000..2c59ef63faa
--- /dev/null
+++ b/static/usage/v6/note/basic/angular.md
@@ -0,0 +1,3 @@
+```html
+Default Note
+```
diff --git a/static/usage/v6/note/basic/demo.html b/static/usage/v6/note/basic/demo.html
new file mode 100644
index 00000000000..ae5b7ce7f04
--- /dev/null
+++ b/static/usage/v6/note/basic/demo.html
@@ -0,0 +1,25 @@
+
+
+
+
+
+
+ Note
+
+
+
+
+
+
+
+
+
+
+
+ Default Note
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/note/basic/index.md b/static/usage/v6/note/basic/index.md
new file mode 100644
index 00000000000..893b26095d4
--- /dev/null
+++ b/static/usage/v6/note/basic/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/v6/note/basic/javascript.md b/static/usage/v6/note/basic/javascript.md
new file mode 100644
index 00000000000..2c59ef63faa
--- /dev/null
+++ b/static/usage/v6/note/basic/javascript.md
@@ -0,0 +1,3 @@
+```html
+Default Note
+```
diff --git a/static/usage/v6/note/basic/react.md b/static/usage/v6/note/basic/react.md
new file mode 100644
index 00000000000..9f1cdb45225
--- /dev/null
+++ b/static/usage/v6/note/basic/react.md
@@ -0,0 +1,13 @@
+```tsx
+import React from 'react';
+import { IonNote } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+ Default Note
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/note/basic/vue.md b/static/usage/v6/note/basic/vue.md
new file mode 100644
index 00000000000..dffb1348fc9
--- /dev/null
+++ b/static/usage/v6/note/basic/vue.md
@@ -0,0 +1,14 @@
+```html
+
+ Default Note
+
+
+
+```
diff --git a/static/usage/v6/note/item/angular.md b/static/usage/v6/note/item/angular.md
new file mode 100644
index 00000000000..0d26cf33b27
--- /dev/null
+++ b/static/usage/v6/note/item/angular.md
@@ -0,0 +1,11 @@
+```html
+
+ Label
+ Note (End)
+
+
+
+ Note (Start)
+ Label
+
+```
diff --git a/static/usage/v6/note/item/demo.html b/static/usage/v6/note/item/demo.html
new file mode 100644
index 00000000000..3aea8507aa8
--- /dev/null
+++ b/static/usage/v6/note/item/demo.html
@@ -0,0 +1,38 @@
+
+
+
+
+
+
+ Note
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Label
+ Note (End)
+
+
+
+ Note (Start)
+ Label
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/note/item/index.md b/static/usage/v6/note/item/index.md
new file mode 100644
index 00000000000..8327141e7d3
--- /dev/null
+++ b/static/usage/v6/note/item/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/v6/note/item/javascript.md b/static/usage/v6/note/item/javascript.md
new file mode 100644
index 00000000000..0d26cf33b27
--- /dev/null
+++ b/static/usage/v6/note/item/javascript.md
@@ -0,0 +1,11 @@
+```html
+
+ Label
+ Note (End)
+
+
+
+ Note (Start)
+ Label
+
+```
diff --git a/static/usage/v6/note/item/react.md b/static/usage/v6/note/item/react.md
new file mode 100644
index 00000000000..422ba6eff85
--- /dev/null
+++ b/static/usage/v6/note/item/react.md
@@ -0,0 +1,21 @@
+```tsx
+import React from 'react';
+import { IonItem, IonLabel, IonNote } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+ Label
+ Note (End)
+
+
+
+ Note (Start)
+ Label
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/note/item/vue.md b/static/usage/v6/note/item/vue.md
new file mode 100644
index 00000000000..24b7add1ed1
--- /dev/null
+++ b/static/usage/v6/note/item/vue.md
@@ -0,0 +1,22 @@
+```html
+
+
+ Label
+ Note (End)
+
+
+
+ Note (Start)
+ Label
+
+
+
+
+```
diff --git a/static/usage/v6/note/theming/colors/angular.md b/static/usage/v6/note/theming/colors/angular.md
new file mode 100644
index 00000000000..2740648d5ad
--- /dev/null
+++ b/static/usage/v6/note/theming/colors/angular.md
@@ -0,0 +1,12 @@
+```html
+Default Note
+Primary Note
+Secondary Note
+Tertiary Note
+Success Note
+Warning Note
+Danger Note
+Light Note
+Medium Note
+Dark Note
+```
diff --git a/static/usage/v6/note/theming/colors/demo.html b/static/usage/v6/note/theming/colors/demo.html
new file mode 100644
index 00000000000..2564a686b1a
--- /dev/null
+++ b/static/usage/v6/note/theming/colors/demo.html
@@ -0,0 +1,49 @@
+
+
+
+
+
+
+ Note
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Default Note
+ Primary Note
+ Secondary Note
+ Tertiary Note
+ Success Note
+ Warning Note
+ Danger Note
+ Light Note
+ Medium Note
+ Dark Note
+
+
+ Default Note
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/note/theming/css-properties/index.md b/static/usage/v6/note/theming/css-properties/index.md
new file mode 100644
index 00000000000..7055e40a026
--- /dev/null
+++ b/static/usage/v6/note/theming/css-properties/index.md
@@ -0,0 +1,32 @@
+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/v6/note/theming/css-properties/javascript.md b/static/usage/v6/note/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..cc1bdeec421
--- /dev/null
+++ b/static/usage/v6/note/theming/css-properties/javascript.md
@@ -0,0 +1,9 @@
+```html
+
+
+Default Note
+```
diff --git a/static/usage/v6/note/theming/css-properties/react/main_css.md b/static/usage/v6/note/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..5f39ab9c48f
--- /dev/null
+++ b/static/usage/v6/note/theming/css-properties/react/main_css.md
@@ -0,0 +1,5 @@
+```css
+ion-note {
+ --color: #54dc98;
+}
+```
diff --git a/static/usage/v6/note/theming/css-properties/react/main_tsx.md b/static/usage/v6/note/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..798b6ab90d1
--- /dev/null
+++ b/static/usage/v6/note/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,15 @@
+```tsx
+import React from 'react';
+import { IonNote } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+ Default Note
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/note/theming/css-properties/vue.md b/static/usage/v6/note/theming/css-properties/vue.md
new file mode 100644
index 00000000000..77e8b361f2c
--- /dev/null
+++ b/static/usage/v6/note/theming/css-properties/vue.md
@@ -0,0 +1,20 @@
+```html
+
+ Default Note
+
+
+
+
+
+```
diff --git a/static/usage/v6/picker/multiple-column/angular/example_component_html.md b/static/usage/v6/picker/multiple-column/angular/example_component_html.md
new file mode 100644
index 00000000000..1e25fa99c40
--- /dev/null
+++ b/static/usage/v6/picker/multiple-column/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+Open
+```
diff --git a/static/usage/v6/picker/multiple-column/angular/example_component_ts.md b/static/usage/v6/picker/multiple-column/angular/example_component_ts.md
new file mode 100644
index 00000000000..ce535b1391a
--- /dev/null
+++ b/static/usage/v6/picker/multiple-column/angular/example_component_ts.md
@@ -0,0 +1,84 @@
+```ts
+import { Component } from '@angular/core';
+import { PickerController } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ constructor(private pickerCtrl: PickerController) {}
+
+ async openPicker() {
+ const picker = await this.pickerCtrl.create({
+ columns: [
+ {
+ name: 'meat',
+ options: [
+ {
+ text: 'Pepperoni',
+ value: 'pepperoni',
+ },
+ {
+ text: 'Smoked Ham',
+ value: 'smoked-ham',
+ },
+ {
+ text: 'Crispy Bacon',
+ value: 'bacon',
+ },
+ ],
+ },
+ {
+ name: 'veggies',
+ options: [
+ {
+ text: 'Red onion',
+ value: 'red-onion',
+ },
+ {
+ text: 'Peppers',
+ value: 'peppers',
+ },
+ {
+ text: 'Black olives',
+ value: 'black-olives',
+ },
+ ],
+ },
+ {
+ name: 'crust',
+ options: [
+ {
+ text: 'Pan style',
+ value: 'pan',
+ },
+ {
+ text: 'Hand tossed',
+ value: 'hand-tossed',
+ },
+ {
+ text: 'Stuffed crust',
+ value: 'stuffed-crust',
+ },
+ ],
+ },
+ ],
+ buttons: [
+ {
+ text: 'Cancel',
+ role: 'cancel',
+ },
+ {
+ text: 'Confirm',
+ handler: (value) => {
+ window.alert(`You selected a ${value.crust.text} pizza with ${value.meat.text} and ${value.veggies.text}`);
+ },
+ },
+ ],
+ });
+
+ await picker.present();
+ }
+}
+```
diff --git a/static/usage/v6/picker/multiple-column/demo.html b/static/usage/v6/picker/multiple-column/demo.html
new file mode 100644
index 00000000000..50b673172e2
--- /dev/null
+++ b/static/usage/v6/picker/multiple-column/demo.html
@@ -0,0 +1,90 @@
+
+
+
+
+
+
+ Picker | Multiple Columns
+
+
+
+
+
+
+
+
+
+
+
+ Open
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/picker/multiple-column/index.md b/static/usage/v6/picker/multiple-column/index.md
new file mode 100644
index 00000000000..a8709df973c
--- /dev/null
+++ b/static/usage/v6/picker/multiple-column/index.md
@@ -0,0 +1,25 @@
+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_example_component_ts from './angular/example_component_ts.md';
+import angular_example_component_html from './angular/example_component_html.md';
+
+
diff --git a/static/usage/v6/picker/multiple-column/javascript.md b/static/usage/v6/picker/multiple-column/javascript.md
new file mode 100644
index 00000000000..5024f90a43f
--- /dev/null
+++ b/static/usage/v6/picker/multiple-column/javascript.md
@@ -0,0 +1,76 @@
+```html
+Open
+
+
+```
diff --git a/static/usage/v6/picker/multiple-column/react.md b/static/usage/v6/picker/multiple-column/react.md
new file mode 100644
index 00000000000..1d0a47e178c
--- /dev/null
+++ b/static/usage/v6/picker/multiple-column/react.md
@@ -0,0 +1,82 @@
+```tsx
+import React from 'react';
+import { IonButton, useIonPicker } from '@ionic/react';
+
+function Example() {
+ const [present] = useIonPicker();
+
+ const openPicker = async () => {
+ present({
+ columns: [
+ {
+ name: 'meat',
+ options: [
+ {
+ text: 'Pepperoni',
+ value: 'pepperoni',
+ },
+ {
+ text: 'Smoked Ham',
+ value: 'smoked-ham',
+ },
+ {
+ text: 'Crispy Bacon',
+ value: 'bacon',
+ },
+ ],
+ },
+ {
+ name: 'veggies',
+ options: [
+ {
+ text: 'Red onion',
+ value: 'red-onion',
+ },
+ {
+ text: 'Peppers',
+ value: 'peppers',
+ },
+ {
+ text: 'Black olives',
+ value: 'black-olives',
+ },
+ ],
+ },
+ {
+ name: 'crust',
+ options: [
+ {
+ text: 'Pan style',
+ value: 'pan',
+ },
+ {
+ text: 'Hand tossed',
+ value: 'hand-tossed',
+ },
+ {
+ text: 'Stuffed crust',
+ value: 'stuffed-crust',
+ },
+ ],
+ },
+ ],
+ buttons: [
+ {
+ text: 'Cancel',
+ role: 'cancel',
+ },
+ {
+ text: 'Confirm',
+ handler: (value) => {
+ window.alert(`You selected a ${value.crust.text} pizza with ${value.meat.text} and ${value.veggies.text}`);
+ },
+ },
+ ],
+ });
+ };
+
+ return Open;
+}
+
+export default Example;
+```
diff --git a/static/usage/v6/picker/multiple-column/vue.md b/static/usage/v6/picker/multiple-column/vue.md
new file mode 100644
index 00000000000..07418f16bbf
--- /dev/null
+++ b/static/usage/v6/picker/multiple-column/vue.md
@@ -0,0 +1,93 @@
+```html
+
+ Open
+
+
+
+```
diff --git a/static/usage/v6/picker/single-column/angular/example_component_html.md b/static/usage/v6/picker/single-column/angular/example_component_html.md
new file mode 100644
index 00000000000..1e25fa99c40
--- /dev/null
+++ b/static/usage/v6/picker/single-column/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+Open
+```
diff --git a/static/usage/v6/picker/single-column/angular/example_component_ts.md b/static/usage/v6/picker/single-column/angular/example_component_ts.md
new file mode 100644
index 00000000000..849da3f0f16
--- /dev/null
+++ b/static/usage/v6/picker/single-column/angular/example_component_ts.md
@@ -0,0 +1,54 @@
+```ts
+import { Component } from '@angular/core';
+import { PickerController } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ constructor(private pickerCtrl: PickerController) {}
+
+ async openPicker() {
+ const picker = await this.pickerCtrl.create({
+ columns: [
+ {
+ name: 'languages',
+ options: [
+ {
+ text: 'JavaScript',
+ value: 'javascript',
+ },
+ {
+ text: 'TypeScript',
+ value: 'typescript',
+ },
+ {
+ text: 'Rust',
+ value: 'rust',
+ },
+ {
+ text: 'C#',
+ value: 'c#',
+ },
+ ],
+ },
+ ],
+ buttons: [
+ {
+ text: 'Cancel',
+ role: 'cancel',
+ },
+ {
+ text: 'Confirm',
+ handler: (value) => {
+ window.alert(`You selected: ${value.languages.value}`);
+ },
+ },
+ ],
+ });
+
+ await picker.present();
+ }
+}
+```
diff --git a/static/usage/v6/picker/single-column/demo.html b/static/usage/v6/picker/single-column/demo.html
new file mode 100644
index 00000000000..6f81b1c6e8f
--- /dev/null
+++ b/static/usage/v6/picker/single-column/demo.html
@@ -0,0 +1,65 @@
+
+
+
+
+
+
+ Picker | Single Column
+
+
+
+
+
+
+
+
+
+
+
+ Open
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/picker/single-column/index.md b/static/usage/v6/picker/single-column/index.md
new file mode 100644
index 00000000000..a2ee8ee48e3
--- /dev/null
+++ b/static/usage/v6/picker/single-column/index.md
@@ -0,0 +1,25 @@
+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_example_component_ts from './angular/example_component_ts.md';
+import angular_example_component_html from './angular/example_component_html.md';
+
+
diff --git a/static/usage/v6/picker/single-column/javascript.md b/static/usage/v6/picker/single-column/javascript.md
new file mode 100644
index 00000000000..ca15ad55132
--- /dev/null
+++ b/static/usage/v6/picker/single-column/javascript.md
@@ -0,0 +1,46 @@
+```html
+Open
+
+
+```
diff --git a/static/usage/v6/picker/single-column/react.md b/static/usage/v6/picker/single-column/react.md
new file mode 100644
index 00000000000..d0c351a9368
--- /dev/null
+++ b/static/usage/v6/picker/single-column/react.md
@@ -0,0 +1,52 @@
+```tsx
+import React from 'react';
+import { IonButton, useIonPicker } from '@ionic/react';
+
+function Example() {
+ const [present] = useIonPicker();
+
+ const openPicker = async () => {
+ present({
+ columns: [
+ {
+ name: 'languages',
+ options: [
+ {
+ text: 'JavaScript',
+ value: 'javascript',
+ },
+ {
+ text: 'TypeScript',
+ value: 'typescript',
+ },
+ {
+ text: 'Rust',
+ value: 'rust',
+ },
+ {
+ text: 'C#',
+ value: 'c#',
+ },
+ ],
+ },
+ ],
+ buttons: [
+ {
+ text: 'Cancel',
+ role: 'cancel',
+ },
+ {
+ text: 'Confirm',
+ handler: (value) => {
+ window.alert(`You selected: ${value.languages.value}`);
+ },
+ },
+ ],
+ });
+ };
+
+ return Open;
+}
+
+export default Example;
+```
diff --git a/static/usage/v6/picker/single-column/vue.md b/static/usage/v6/picker/single-column/vue.md
new file mode 100644
index 00000000000..71660c96aeb
--- /dev/null
+++ b/static/usage/v6/picker/single-column/vue.md
@@ -0,0 +1,61 @@
+```html
+
+ Open
+
+
+
+```
diff --git a/static/usage/popover/customization/positioning/angular/angular_css.md b/static/usage/v6/popover/customization/positioning/angular/example_component_css.md
similarity index 100%
rename from static/usage/popover/customization/positioning/angular/angular_css.md
rename to static/usage/v6/popover/customization/positioning/angular/example_component_css.md
diff --git a/static/usage/popover/customization/positioning/angular/angular_html.md b/static/usage/v6/popover/customization/positioning/angular/example_component_html.md
similarity index 100%
rename from static/usage/popover/customization/positioning/angular/angular_html.md
rename to static/usage/v6/popover/customization/positioning/angular/example_component_html.md
diff --git a/static/usage/v6/popover/customization/positioning/angular/example_component_ts.md b/static/usage/v6/popover/customization/positioning/angular/example_component_ts.md
new file mode 100644
index 00000000000..4db53a836a9
--- /dev/null
+++ b/static/usage/v6/popover/customization/positioning/angular/example_component_ts.md
@@ -0,0 +1,10 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v6/popover/customization/positioning/demo.html b/static/usage/v6/popover/customization/positioning/demo.html
new file mode 100644
index 00000000000..71a74fb45e9
--- /dev/null
+++ b/static/usage/v6/popover/customization/positioning/demo.html
@@ -0,0 +1,52 @@
+
+
+
+
+
+
+ Popover
+
+
+
+
+
+
+
+
+
+
+
+
+ Side=Top, Alignment=Center
+
+ Hello World!
+
+
+ Side=Bottom, Alignment=Start
+
+ Hello World!
+
+
+ Side=Left, Alignment=Start
+
+ Hello World!
+
+
+ Side=Right, Alignment=End
+
+ Hello World!
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/popover/customization/positioning/index.md b/static/usage/v6/popover/customization/positioning/index.md
new file mode 100644
index 00000000000..6907af6ceb8
--- /dev/null
+++ b/static/usage/v6/popover/customization/positioning/index.md
@@ -0,0 +1,34 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/popover/customization/positioning/javascript.md b/static/usage/v6/popover/customization/positioning/javascript.md
similarity index 100%
rename from static/usage/popover/customization/positioning/javascript.md
rename to static/usage/v6/popover/customization/positioning/javascript.md
diff --git a/static/usage/popover/customization/positioning/react/react_css.md b/static/usage/v6/popover/customization/positioning/react/main_css.md
similarity index 100%
rename from static/usage/popover/customization/positioning/react/react_css.md
rename to static/usage/v6/popover/customization/positioning/react/main_css.md
diff --git a/static/usage/popover/customization/positioning/react/react_ts.md b/static/usage/v6/popover/customization/positioning/react/main_tsx.md
similarity index 100%
rename from static/usage/popover/customization/positioning/react/react_ts.md
rename to static/usage/v6/popover/customization/positioning/react/main_tsx.md
diff --git a/static/usage/popover/customization/positioning/vue.md b/static/usage/v6/popover/customization/positioning/vue.md
similarity index 100%
rename from static/usage/popover/customization/positioning/vue.md
rename to static/usage/v6/popover/customization/positioning/vue.md
diff --git a/static/usage/popover/customization/sizing/angular.md b/static/usage/v6/popover/customization/sizing/angular.md
similarity index 100%
rename from static/usage/popover/customization/sizing/angular.md
rename to static/usage/v6/popover/customization/sizing/angular.md
diff --git a/static/usage/v6/popover/customization/sizing/demo.html b/static/usage/v6/popover/customization/sizing/demo.html
new file mode 100644
index 00000000000..b85d71034f8
--- /dev/null
+++ b/static/usage/v6/popover/customization/sizing/demo.html
@@ -0,0 +1,32 @@
+
+
+
+
+
+
+ Popover
+
+
+
+
+
+
+
+
+
+
+ Size=Auto
+
+ Hello!
+
+
+ Size=Cover
+
+ Hello!
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/popover/customization/sizing/index.md b/static/usage/v6/popover/customization/sizing/index.md
new file mode 100644
index 00000000000..45fec0f6b58
--- /dev/null
+++ b/static/usage/v6/popover/customization/sizing/index.md
@@ -0,0 +1,13 @@
+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/popover/customization/sizing/javascript.md b/static/usage/v6/popover/customization/sizing/javascript.md
similarity index 100%
rename from static/usage/popover/customization/sizing/javascript.md
rename to static/usage/v6/popover/customization/sizing/javascript.md
diff --git a/static/usage/v6/popover/customization/sizing/react.md b/static/usage/v6/popover/customization/sizing/react.md
new file mode 100644
index 00000000000..35b60534df6
--- /dev/null
+++ b/static/usage/v6/popover/customization/sizing/react.md
@@ -0,0 +1,20 @@
+```tsx
+import React from 'react';
+import { IonButton, IonContent, IonPopover } from '@ionic/react';
+function Example() {
+ return (
+ <>
+ Size=Auto
+
+ Hello!
+
+
+ Size=Cover
+
+ Hello!
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/popover/customization/sizing/vue.md b/static/usage/v6/popover/customization/sizing/vue.md
new file mode 100644
index 00000000000..72d20c9fa77
--- /dev/null
+++ b/static/usage/v6/popover/customization/sizing/vue.md
@@ -0,0 +1,22 @@
+```html
+
+ Size=Auto
+
+ Hello!
+
+
+ Size=Cover
+
+ Hello!
+
+
+
+
+```
diff --git a/static/usage/popover/customization/styling/angular/angular_html.md b/static/usage/v6/popover/customization/styling/angular/example_component_html.md
similarity index 100%
rename from static/usage/popover/customization/styling/angular/angular_html.md
rename to static/usage/v6/popover/customization/styling/angular/example_component_html.md
diff --git a/static/usage/popover/customization/styling/angular/angular_css.md b/static/usage/v6/popover/customization/styling/angular/global_css.md
similarity index 100%
rename from static/usage/popover/customization/styling/angular/angular_css.md
rename to static/usage/v6/popover/customization/styling/angular/global_css.md
diff --git a/static/usage/v6/popover/customization/styling/demo.html b/static/usage/v6/popover/customization/styling/demo.html
new file mode 100644
index 00000000000..6d858b14659
--- /dev/null
+++ b/static/usage/v6/popover/customization/styling/demo.html
@@ -0,0 +1,45 @@
+
+
+
+
+
+
+ Popover
+
+
+
+
+
+
+
+
+
+
+
+
+ Click Me
+
+ Hello Styled World!
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/popover/customization/styling/index.md b/static/usage/v6/popover/customization/styling/index.md
new file mode 100644
index 00000000000..47d131c44c3
--- /dev/null
+++ b/static/usage/v6/popover/customization/styling/index.md
@@ -0,0 +1,32 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_global_css from './angular/global_css.md';
+
+
diff --git a/static/usage/popover/customization/styling/javascript.md b/static/usage/v6/popover/customization/styling/javascript.md
similarity index 100%
rename from static/usage/popover/customization/styling/javascript.md
rename to static/usage/v6/popover/customization/styling/javascript.md
diff --git a/static/usage/popover/customization/styling/react/react_css.md b/static/usage/v6/popover/customization/styling/react/main_css.md
similarity index 100%
rename from static/usage/popover/customization/styling/react/react_css.md
rename to static/usage/v6/popover/customization/styling/react/main_css.md
diff --git a/static/usage/v6/popover/customization/styling/react/main_tsx.md b/static/usage/v6/popover/customization/styling/react/main_tsx.md
new file mode 100644
index 00000000000..1a905f8056d
--- /dev/null
+++ b/static/usage/v6/popover/customization/styling/react/main_tsx.md
@@ -0,0 +1,18 @@
+```tsx
+import React from 'react';
+import { IonButton, IonContent, IonPopover } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+ Click Me
+
+ Hello Styled World!
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/popover/customization/styling/vue.md b/static/usage/v6/popover/customization/styling/vue.md
new file mode 100644
index 00000000000..964eeb09bfc
--- /dev/null
+++ b/static/usage/v6/popover/customization/styling/vue.md
@@ -0,0 +1,35 @@
+```html
+
+ Click Me
+
+ Hello Styled World!
+
+
+
+
+
+
+```
diff --git a/static/usage/popover/nested/angular.md b/static/usage/v6/popover/nested/angular.md
similarity index 100%
rename from static/usage/popover/nested/angular.md
rename to static/usage/v6/popover/nested/angular.md
diff --git a/static/usage/v6/popover/nested/demo.html b/static/usage/v6/popover/nested/demo.html
new file mode 100644
index 00000000000..ab52c1d5540
--- /dev/null
+++ b/static/usage/v6/popover/nested/demo.html
@@ -0,0 +1,41 @@
+
+
+
+
+
+
+ Popover
+
+
+
+
+
+
+
+
+
+
+ Open Menu
+
+
+
+ Option 1
+ Option 2
+ More options...
+
+
+
+
+ Nested option
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/popover/nested/index.md b/static/usage/v6/popover/nested/index.md
new file mode 100644
index 00000000000..24fb460b14a
--- /dev/null
+++ b/static/usage/v6/popover/nested/index.md
@@ -0,0 +1,13 @@
+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/popover/nested/javascript.md b/static/usage/v6/popover/nested/javascript.md
similarity index 100%
rename from static/usage/popover/nested/javascript.md
rename to static/usage/v6/popover/nested/javascript.md
diff --git a/static/usage/v6/popover/nested/react.md b/static/usage/v6/popover/nested/react.md
new file mode 100644
index 00000000000..eb84d67effb
--- /dev/null
+++ b/static/usage/v6/popover/nested/react.md
@@ -0,0 +1,37 @@
+```tsx
+import React from 'react';
+import { IonButton, IonContent, IonItem, IonList, IonPopover } from '@ionic/react';
+function Example() {
+ return (
+ <>
+ Open Menu
+
+
+
+
+ Option 1
+
+
+ Option 2
+
+
+ More options...
+
+
+
+
+
+
+ Nested option
+
+
+
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/popover/nested/vue.md b/static/usage/v6/popover/nested/vue.md
new file mode 100644
index 00000000000..04a7b6d7e36
--- /dev/null
+++ b/static/usage/v6/popover/nested/vue.md
@@ -0,0 +1,31 @@
+```html
+
+ Open Menu
+
+
+
+ Option 1
+ Option 2
+ More options...
+
+
+
+
+ Nested option
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/popover/performance/mount/angular.md b/static/usage/v6/popover/performance/mount/angular.md
similarity index 100%
rename from static/usage/popover/performance/mount/angular.md
rename to static/usage/v6/popover/performance/mount/angular.md
diff --git a/static/usage/v6/popover/performance/mount/demo.html b/static/usage/v6/popover/performance/mount/demo.html
new file mode 100644
index 00000000000..053883d5e75
--- /dev/null
+++ b/static/usage/v6/popover/performance/mount/demo.html
@@ -0,0 +1,27 @@
+
+
+
+
+
+
+ Popover
+
+
+
+
+
+
+
+
+
+
+ Open Popover
+
+ This content was mounted as soon as the popover was created.
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/popover/performance/mount/index.md b/static/usage/v6/popover/performance/mount/index.md
new file mode 100644
index 00000000000..cfa394abec0
--- /dev/null
+++ b/static/usage/v6/popover/performance/mount/index.md
@@ -0,0 +1,18 @@
+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/popover/performance/mount/javascript.md b/static/usage/v6/popover/performance/mount/javascript.md
similarity index 100%
rename from static/usage/popover/performance/mount/javascript.md
rename to static/usage/v6/popover/performance/mount/javascript.md
diff --git a/static/usage/popover/performance/mount/react.md b/static/usage/v6/popover/performance/mount/react.md
similarity index 100%
rename from static/usage/popover/performance/mount/react.md
rename to static/usage/v6/popover/performance/mount/react.md
diff --git a/static/usage/popover/performance/mount/vue.md b/static/usage/v6/popover/performance/mount/vue.md
similarity index 100%
rename from static/usage/popover/performance/mount/vue.md
rename to static/usage/v6/popover/performance/mount/vue.md
diff --git a/static/usage/v6/popover/presenting/controller/angular/app_module_ts.md b/static/usage/v6/popover/presenting/controller/angular/app_module_ts.md
new file mode 100644
index 00000000000..887ca3acf89
--- /dev/null
+++ b/static/usage/v6/popover/presenting/controller/angular/app_module_ts.md
@@ -0,0 +1,19 @@
+```ts
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { IonicModule } from '@ionic/angular';
+
+import { AppComponent } from './app.component';
+import { ExampleComponent } from './example.component';
+
+import { PopoverComponent } from './popover.component';
+
+@NgModule({
+ imports: [BrowserModule, FormsModule, IonicModule.forRoot({})],
+ declarations: [AppComponent, ExampleComponent, PopoverComponent],
+ bootstrap: [AppComponent],
+})
+export class AppModule {}
+```
diff --git a/static/usage/popover/presenting/controller/angular/angular_html.md b/static/usage/v6/popover/presenting/controller/angular/example_component_html.md
similarity index 100%
rename from static/usage/popover/presenting/controller/angular/angular_html.md
rename to static/usage/v6/popover/presenting/controller/angular/example_component_html.md
diff --git a/static/usage/v6/popover/presenting/controller/angular/example_component_ts.md b/static/usage/v6/popover/presenting/controller/angular/example_component_ts.md
new file mode 100644
index 00000000000..bf0e0165d78
--- /dev/null
+++ b/static/usage/v6/popover/presenting/controller/angular/example_component_ts.md
@@ -0,0 +1,29 @@
+```ts
+import { Component, ViewChild } from '@angular/core';
+
+import { PopoverController } from '@ionic/angular';
+
+import { PopoverComponent } from './popover.component';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ roleMsg = '';
+
+ constructor(public popoverController: PopoverController) {}
+
+ async presentPopover(e: Event) {
+ const popover = await this.popoverController.create({
+ component: PopoverComponent,
+ event: e,
+ });
+
+ await popover.present();
+
+ const { role } = await popover.onDidDismiss();
+ this.roleMsg = `Popover dismissed with role: ${role}`;
+ }
+}
+```
diff --git a/static/usage/popover/presenting/controller/angular/angular_popover_html.md b/static/usage/v6/popover/presenting/controller/angular/popover_component_html.md
similarity index 100%
rename from static/usage/popover/presenting/controller/angular/angular_popover_html.md
rename to static/usage/v6/popover/presenting/controller/angular/popover_component_html.md
diff --git a/static/usage/v6/popover/presenting/controller/angular/popover_component_ts.md b/static/usage/v6/popover/presenting/controller/angular/popover_component_ts.md
new file mode 100644
index 00000000000..2900a32240c
--- /dev/null
+++ b/static/usage/v6/popover/presenting/controller/angular/popover_component_ts.md
@@ -0,0 +1,10 @@
+```ts
+import { Component } from '@angular/core';
+import { PopoverController } from '@ionic/angular';
+
+@Component({
+ selector: 'app-popover',
+ templateUrl: 'popover.component.html',
+})
+export class PopoverComponent {}
+```
diff --git a/static/usage/v6/popover/presenting/controller/demo.html b/static/usage/v6/popover/presenting/controller/demo.html
new file mode 100644
index 00000000000..0a235d3c41d
--- /dev/null
+++ b/static/usage/v6/popover/presenting/controller/demo.html
@@ -0,0 +1,63 @@
+
+
+
+
+
+
+ Popover
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/popover/presenting/controller/index.md b/static/usage/v6/popover/presenting/controller/index.md
new file mode 100644
index 00000000000..4906017d235
--- /dev/null
+++ b/static/usage/v6/popover/presenting/controller/index.md
@@ -0,0 +1,38 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+
+import vue_example from './vue/example_vue.md';
+import vue_popover from './vue/popover_vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_popover_component_html from './angular/popover_component_html.md';
+import angular_popover_component_ts from './angular/popover_component_ts.md';
+import angular_app_module from './angular/app_module_ts.md';
+
+
diff --git a/static/usage/popover/presenting/controller/javascript.md b/static/usage/v6/popover/presenting/controller/javascript.md
similarity index 100%
rename from static/usage/popover/presenting/controller/javascript.md
rename to static/usage/v6/popover/presenting/controller/javascript.md
diff --git a/static/usage/v6/popover/presenting/controller/react.md b/static/usage/v6/popover/presenting/controller/react.md
new file mode 100644
index 00000000000..8d772ca8ef6
--- /dev/null
+++ b/static/usage/v6/popover/presenting/controller/react.md
@@ -0,0 +1,30 @@
+```tsx
+import React, { useState } from 'react';
+import { IonButton, IonContent, useIonPopover } from '@ionic/react';
+
+const Popover = () => Hello World!;
+
+function Example() {
+ const [present, dismiss] = useIonPopover(Popover, {
+ onDismiss: (data: any, role: string) => dismiss(data, role),
+ });
+ const [roleMsg, setRoleMsg] = useState('');
+
+ return (
+ <>
+
+ present({
+ event: e,
+ onDidDismiss: (e: CustomEvent) => setRoleMsg(`Popover dismissed with role: ${e.detail.role}`),
+ })
+ }
+ >
+ Click Me
+
+ {roleMsg}
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/popover/presenting/controller/vue/example_vue.md b/static/usage/v6/popover/presenting/controller/vue/example_vue.md
new file mode 100644
index 00000000000..36e0e51d3d8
--- /dev/null
+++ b/static/usage/v6/popover/presenting/controller/vue/example_vue.md
@@ -0,0 +1,32 @@
+```html
+
+ Click Me
+ {{ roleMsg }}
+
+
+
+```
diff --git a/static/usage/popover/presenting/controller/vue/vue_popover.md b/static/usage/v6/popover/presenting/controller/vue/popover_vue.md
similarity index 100%
rename from static/usage/popover/presenting/controller/vue/vue_popover.md
rename to static/usage/v6/popover/presenting/controller/vue/popover_vue.md
diff --git a/static/usage/popover/presenting/inline-isopen/angular/angular_html.md b/static/usage/v6/popover/presenting/inline-isopen/angular/example_component_html.md
similarity index 100%
rename from static/usage/popover/presenting/inline-isopen/angular/angular_html.md
rename to static/usage/v6/popover/presenting/inline-isopen/angular/example_component_html.md
diff --git a/static/usage/v6/popover/presenting/inline-isopen/angular/example_component_ts.md b/static/usage/v6/popover/presenting/inline-isopen/angular/example_component_ts.md
new file mode 100644
index 00000000000..ef604e603d9
--- /dev/null
+++ b/static/usage/v6/popover/presenting/inline-isopen/angular/example_component_ts.md
@@ -0,0 +1,18 @@
+```ts
+import { Component, ViewChild } from '@angular/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ @ViewChild('popover') popover;
+
+ isOpen = false;
+
+ presentPopover(e: Event) {
+ this.popover.event = e;
+ this.isOpen = true;
+ }
+}
+```
diff --git a/static/usage/v6/popover/presenting/inline-isopen/demo.html b/static/usage/v6/popover/presenting/inline-isopen/demo.html
new file mode 100644
index 00000000000..4180760c005
--- /dev/null
+++ b/static/usage/v6/popover/presenting/inline-isopen/demo.html
@@ -0,0 +1,39 @@
+
+
+
+
+
+
+ Popover
+
+
+
+
+
+
+
+
+
+
+ Click Me
+
+ Hello World!
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/popover/presenting/inline-isopen/index.md b/static/usage/v6/popover/presenting/inline-isopen/index.md
new file mode 100644
index 00000000000..b5aaac58ac1
--- /dev/null
+++ b/static/usage/v6/popover/presenting/inline-isopen/index.md
@@ -0,0 +1,25 @@
+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_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/popover/presenting/inline-isopen/javascript.md b/static/usage/v6/popover/presenting/inline-isopen/javascript.md
similarity index 100%
rename from static/usage/popover/presenting/inline-isopen/javascript.md
rename to static/usage/v6/popover/presenting/inline-isopen/javascript.md
diff --git a/static/usage/v6/popover/presenting/inline-isopen/react.md b/static/usage/v6/popover/presenting/inline-isopen/react.md
new file mode 100644
index 00000000000..1d0b68fd1f5
--- /dev/null
+++ b/static/usage/v6/popover/presenting/inline-isopen/react.md
@@ -0,0 +1,24 @@
+```tsx
+import React, { useRef, useState } from 'react';
+import { IonButton, IonContent, IonPopover } from '@ionic/react';
+
+function Example() {
+ const popover = useRef(null);
+ const [popoverOpen, setPopoverOpen] = useState(false);
+
+ const openPopover = (e: any) => {
+ popover.current!.event = e;
+ setPopoverOpen(true);
+ };
+
+ return (
+ <>
+ Click Me
+ setPopoverOpen(false)}>
+ Hello World!
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/popover/presenting/inline-isopen/vue.md b/static/usage/v6/popover/presenting/inline-isopen/vue.md
new file mode 100644
index 00000000000..fbbaf065a17
--- /dev/null
+++ b/static/usage/v6/popover/presenting/inline-isopen/vue.md
@@ -0,0 +1,29 @@
+```html
+
+ Click Me
+
+ Hello World!
+
+
+
+
+```
diff --git a/static/usage/popover/presenting/inline-trigger/angular.md b/static/usage/v6/popover/presenting/inline-trigger/angular.md
similarity index 100%
rename from static/usage/popover/presenting/inline-trigger/angular.md
rename to static/usage/v6/popover/presenting/inline-trigger/angular.md
diff --git a/static/usage/v6/popover/presenting/inline-trigger/demo.html b/static/usage/v6/popover/presenting/inline-trigger/demo.html
new file mode 100644
index 00000000000..d1b2020e454
--- /dev/null
+++ b/static/usage/v6/popover/presenting/inline-trigger/demo.html
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+ Popover
+
+
+
+
+
+
+
+
+
+
+ Left-Click Me
+
+ Hello World!
+
+
+
+
+ Hello World!
+
+
+ Hover Over Me
+
+ Hello World!
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/popover/presenting/inline-trigger/index.md b/static/usage/v6/popover/presenting/inline-trigger/index.md
new file mode 100644
index 00000000000..973dea6fa41
--- /dev/null
+++ b/static/usage/v6/popover/presenting/inline-trigger/index.md
@@ -0,0 +1,13 @@
+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/popover/presenting/inline-trigger/javascript.md b/static/usage/v6/popover/presenting/inline-trigger/javascript.md
similarity index 100%
rename from static/usage/popover/presenting/inline-trigger/javascript.md
rename to static/usage/v6/popover/presenting/inline-trigger/javascript.md
diff --git a/static/usage/v6/popover/presenting/inline-trigger/react.md b/static/usage/v6/popover/presenting/inline-trigger/react.md
new file mode 100644
index 00000000000..93ba97cbd7c
--- /dev/null
+++ b/static/usage/v6/popover/presenting/inline-trigger/react.md
@@ -0,0 +1,25 @@
+```tsx
+import React from 'react';
+import { IonButton, IonContent, IonPopover } from '@ionic/react';
+function Example() {
+ return (
+ <>
+ Left-Click Me
+
+ Hello World!
+
+
+
+
+ Hello World!
+
+
+ Hover Over Me
+
+ Hello World!
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/popover/presenting/inline-trigger/vue.md b/static/usage/v6/popover/presenting/inline-trigger/vue.md
new file mode 100644
index 00000000000..07f1f68a62f
--- /dev/null
+++ b/static/usage/v6/popover/presenting/inline-trigger/vue.md
@@ -0,0 +1,27 @@
+```html
+
+ Left-Click Me
+
+ Hello World!
+
+
+
+
+ Hello World!
+
+
+ Hover Over Me
+
+ Hello World!
+
+
+
+
+```
diff --git a/static/usage/v6/progress-bar/buffer/angular/example_component_html.md b/static/usage/v6/progress-bar/buffer/angular/example_component_html.md
new file mode 100644
index 00000000000..55dfda33a34
--- /dev/null
+++ b/static/usage/v6/progress-bar/buffer/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v6/progress-bar/buffer/angular/example_component_ts.md b/static/usage/v6/progress-bar/buffer/angular/example_component_ts.md
new file mode 100644
index 00000000000..56e3d3a3b09
--- /dev/null
+++ b/static/usage/v6/progress-bar/buffer/angular/example_component_ts.md
@@ -0,0 +1,29 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css']
+})
+export class ExampleComponent {
+ public buffer = 0.06;
+ public progress = 0;
+
+ constructor() {
+ setInterval(() => {
+ this.buffer += 0.06;
+ this.progress += 0.06;
+
+ // Reset the progress bar when it reaches 100%
+ // to continuously show the demo
+ if (this.progress > 1) {
+ setTimeout(() => {
+ this.buffer = 0.06;
+ this.progress = 0;
+ }, 1000);
+ }
+ }, 1000);
+ }
+}
+```
diff --git a/static/usage/v6/progress-bar/buffer/demo.html b/static/usage/v6/progress-bar/buffer/demo.html
new file mode 100644
index 00000000000..023c907ed39
--- /dev/null
+++ b/static/usage/v6/progress-bar/buffer/demo.html
@@ -0,0 +1,47 @@
+
+
+
+
+
+
+ Progress Bar
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/progress-bar/buffer/index.md b/static/usage/v6/progress-bar/buffer/index.md
new file mode 100644
index 00000000000..dda56114b78
--- /dev/null
+++ b/static/usage/v6/progress-bar/buffer/index.md
@@ -0,0 +1,25 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+
+import react from './react.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/v6/progress-bar/buffer/javascript.md b/static/usage/v6/progress-bar/buffer/javascript.md
new file mode 100644
index 00000000000..0938fb5fca1
--- /dev/null
+++ b/static/usage/v6/progress-bar/buffer/javascript.md
@@ -0,0 +1,25 @@
+```html
+
+
+
+```
diff --git a/static/usage/v6/progress-bar/buffer/react.md b/static/usage/v6/progress-bar/buffer/react.md
new file mode 100644
index 00000000000..1fa8208ac3a
--- /dev/null
+++ b/static/usage/v6/progress-bar/buffer/react.md
@@ -0,0 +1,30 @@
+```tsx
+import React, { useEffect, useState } from 'react';
+import { IonProgressBar } from '@ionic/react';
+
+function Example() {
+ const [buffer, setBuffer] = useState(0.06);
+ const [progress, setProgress] = useState(0);
+
+ useEffect(() => {
+ const interval = setInterval(() => {
+ setBuffer((prevBuffer) => prevBuffer + 0.06);
+ setProgress((prevProgress) => prevProgress + 0.06);
+ }, 1000);
+
+ return () => clearInterval(interval);
+ }, []);
+
+ if (progress > 1) {
+ setTimeout(() => {
+ setBuffer(0.06);
+ setProgress(0);
+ }, 1000);
+ }
+
+ return (
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/progress-bar/buffer/vue.md b/static/usage/v6/progress-bar/buffer/vue.md
new file mode 100644
index 00000000000..3edc59bdf6f
--- /dev/null
+++ b/static/usage/v6/progress-bar/buffer/vue.md
@@ -0,0 +1,38 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v6/progress-bar/determinate/angular/example_component_html.md b/static/usage/v6/progress-bar/determinate/angular/example_component_html.md
new file mode 100644
index 00000000000..95969f5d197
--- /dev/null
+++ b/static/usage/v6/progress-bar/determinate/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v6/progress-bar/determinate/angular/example_component_ts.md b/static/usage/v6/progress-bar/determinate/angular/example_component_ts.md
new file mode 100644
index 00000000000..d8f8b690fc9
--- /dev/null
+++ b/static/usage/v6/progress-bar/determinate/angular/example_component_ts.md
@@ -0,0 +1,26 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css']
+})
+export class ExampleComponent {
+ public progress = 0;
+
+ constructor() {
+ setInterval(() => {
+ this.progress += 0.01;
+
+ // Reset the progress bar when it reaches 100%
+ // to continuously show the demo
+ if (this.progress > 1) {
+ setTimeout(() => {
+ this.progress = 0;
+ }, 1000);
+ }
+ }, 50);
+ }
+}
+```
diff --git a/static/usage/v6/progress-bar/determinate/demo.html b/static/usage/v6/progress-bar/determinate/demo.html
new file mode 100644
index 00000000000..2f09a3ad5cd
--- /dev/null
+++ b/static/usage/v6/progress-bar/determinate/demo.html
@@ -0,0 +1,42 @@
+
+
+
+
+
+
+ Progress Bar
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/progress-bar/determinate/index.md b/static/usage/v6/progress-bar/determinate/index.md
new file mode 100644
index 00000000000..43fdf15b741
--- /dev/null
+++ b/static/usage/v6/progress-bar/determinate/index.md
@@ -0,0 +1,25 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+
+import react from './react.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/v6/progress-bar/determinate/javascript.md b/static/usage/v6/progress-bar/determinate/javascript.md
new file mode 100644
index 00000000000..6adb7e43590
--- /dev/null
+++ b/static/usage/v6/progress-bar/determinate/javascript.md
@@ -0,0 +1,20 @@
+```html
+
+
+
+```
diff --git a/static/usage/v6/progress-bar/determinate/react.md b/static/usage/v6/progress-bar/determinate/react.md
new file mode 100644
index 00000000000..9622be87f95
--- /dev/null
+++ b/static/usage/v6/progress-bar/determinate/react.md
@@ -0,0 +1,27 @@
+```tsx
+import React, { useEffect, useState } from 'react';
+import { IonProgressBar } from '@ionic/react';
+
+function Example() {
+ const [progress, setProgress] = useState(0);
+
+ useEffect(() => {
+ const interval = setInterval(() => {
+ setProgress((prevProgress) => prevProgress + 0.01);
+ }, 50);
+
+ return () => clearInterval(interval);
+ }, []);
+
+ if (progress > 1) {
+ setTimeout(() => {
+ setProgress(0);
+ }, 1000);
+ }
+
+ return (
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/progress-bar/determinate/vue.md b/static/usage/v6/progress-bar/determinate/vue.md
new file mode 100644
index 00000000000..c22b3ead5d3
--- /dev/null
+++ b/static/usage/v6/progress-bar/determinate/vue.md
@@ -0,0 +1,34 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v6/progress-bar/indeterminate/angular.md b/static/usage/v6/progress-bar/indeterminate/angular.md
new file mode 100644
index 00000000000..f83f9173c39
--- /dev/null
+++ b/static/usage/v6/progress-bar/indeterminate/angular.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v6/progress-bar/indeterminate/demo.html b/static/usage/v6/progress-bar/indeterminate/demo.html
new file mode 100644
index 00000000000..46c9cdd7254
--- /dev/null
+++ b/static/usage/v6/progress-bar/indeterminate/demo.html
@@ -0,0 +1,25 @@
+
+
+
+
+
+
+ Progress Bar
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/progress-bar/indeterminate/index.md b/static/usage/v6/progress-bar/indeterminate/index.md
new file mode 100644
index 00000000000..4596d5a54b9
--- /dev/null
+++ b/static/usage/v6/progress-bar/indeterminate/index.md
@@ -0,0 +1,12 @@
+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/v6/progress-bar/indeterminate/javascript.md b/static/usage/v6/progress-bar/indeterminate/javascript.md
new file mode 100644
index 00000000000..f83f9173c39
--- /dev/null
+++ b/static/usage/v6/progress-bar/indeterminate/javascript.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v6/progress-bar/indeterminate/react.md b/static/usage/v6/progress-bar/indeterminate/react.md
new file mode 100644
index 00000000000..45e74e79ce7
--- /dev/null
+++ b/static/usage/v6/progress-bar/indeterminate/react.md
@@ -0,0 +1,11 @@
+```tsx
+import React from 'react';
+import { IonProgressBar } from '@ionic/react';
+
+function Example() {
+ return (
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/progress-bar/indeterminate/vue.md b/static/usage/v6/progress-bar/indeterminate/vue.md
new file mode 100644
index 00000000000..b15c060bdcc
--- /dev/null
+++ b/static/usage/v6/progress-bar/indeterminate/vue.md
@@ -0,0 +1,14 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v6/progress-bar/theming/colors/angular.md b/static/usage/v6/progress-bar/theming/colors/angular.md
new file mode 100644
index 00000000000..71bc3675422
--- /dev/null
+++ b/static/usage/v6/progress-bar/theming/colors/angular.md
@@ -0,0 +1,11 @@
+```html
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/progress-bar/theming/colors/demo.html b/static/usage/v6/progress-bar/theming/colors/demo.html
new file mode 100644
index 00000000000..2ecac2e80fa
--- /dev/null
+++ b/static/usage/v6/progress-bar/theming/colors/demo.html
@@ -0,0 +1,39 @@
+
+
+
+
+
+
+ Progress Bar
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/progress-bar/theming/colors/index.md b/static/usage/v6/progress-bar/theming/colors/index.md
new file mode 100644
index 00000000000..e4defcbfc84
--- /dev/null
+++ b/static/usage/v6/progress-bar/theming/colors/index.md
@@ -0,0 +1,12 @@
+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/v6/progress-bar/theming/colors/javascript.md b/static/usage/v6/progress-bar/theming/colors/javascript.md
new file mode 100644
index 00000000000..71bc3675422
--- /dev/null
+++ b/static/usage/v6/progress-bar/theming/colors/javascript.md
@@ -0,0 +1,11 @@
+```html
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/progress-bar/theming/colors/react.md b/static/usage/v6/progress-bar/theming/colors/react.md
new file mode 100644
index 00000000000..d40b838e65b
--- /dev/null
+++ b/static/usage/v6/progress-bar/theming/colors/react.md
@@ -0,0 +1,21 @@
+```tsx
+import React from 'react';
+import { IonProgressBar } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/progress-bar/theming/colors/vue.md b/static/usage/v6/progress-bar/theming/colors/vue.md
new file mode 100644
index 00000000000..6f42832e199
--- /dev/null
+++ b/static/usage/v6/progress-bar/theming/colors/vue.md
@@ -0,0 +1,22 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/progress-bar/theming/css-properties/angular/example_component_css.md b/static/usage/v6/progress-bar/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..7d5576bdeeb
--- /dev/null
+++ b/static/usage/v6/progress-bar/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,6 @@
+```css
+ion-progress-bar {
+ --background: #f3e895;
+ --progress-background: #09c567;
+}
+```
diff --git a/static/usage/v6/progress-bar/theming/css-properties/angular/example_component_html.md b/static/usage/v6/progress-bar/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..d2c997037ad
--- /dev/null
+++ b/static/usage/v6/progress-bar/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,4 @@
+```html
+
+
+```
diff --git a/static/usage/v6/progress-bar/theming/css-properties/demo.html b/static/usage/v6/progress-bar/theming/css-properties/demo.html
new file mode 100644
index 00000000000..5d60e67fbc5
--- /dev/null
+++ b/static/usage/v6/progress-bar/theming/css-properties/demo.html
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+ Progress Bar
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/progress-bar/theming/css-properties/index.md b/static/usage/v6/progress-bar/theming/css-properties/index.md
new file mode 100644
index 00000000000..cb943ed9e51
--- /dev/null
+++ b/static/usage/v6/progress-bar/theming/css-properties/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/v6/progress-bar/theming/css-properties/javascript.md b/static/usage/v6/progress-bar/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..f57e0166013
--- /dev/null
+++ b/static/usage/v6/progress-bar/theming/css-properties/javascript.md
@@ -0,0 +1,11 @@
+```html
+
+
+
+
+```
diff --git a/static/usage/v6/progress-bar/theming/css-properties/react/main_css.md b/static/usage/v6/progress-bar/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..7d5576bdeeb
--- /dev/null
+++ b/static/usage/v6/progress-bar/theming/css-properties/react/main_css.md
@@ -0,0 +1,6 @@
+```css
+ion-progress-bar {
+ --background: #f3e895;
+ --progress-background: #09c567;
+}
+```
diff --git a/static/usage/v6/progress-bar/theming/css-properties/react/main_tsx.md b/static/usage/v6/progress-bar/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..a4c5e382892
--- /dev/null
+++ b/static/usage/v6/progress-bar/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,17 @@
+
+```tsx
+import React from 'react';
+import { IonProgressBar } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/progress-bar/theming/css-properties/vue.md b/static/usage/v6/progress-bar/theming/css-properties/vue.md
new file mode 100644
index 00000000000..bfff4db7a1b
--- /dev/null
+++ b/static/usage/v6/progress-bar/theming/css-properties/vue.md
@@ -0,0 +1,22 @@
+```html
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/progress-bar/theming/css-shadow-parts/angular/example_component_css.md b/static/usage/v6/progress-bar/theming/css-shadow-parts/angular/example_component_css.md
new file mode 100644
index 00000000000..2ccf6f72dd8
--- /dev/null
+++ b/static/usage/v6/progress-bar/theming/css-shadow-parts/angular/example_component_css.md
@@ -0,0 +1,13 @@
+```css
+ion-progress-bar::part(track) {
+ background: #f3e895;
+}
+
+ion-progress-bar::part(progress) {
+ background: #09c567;
+}
+
+ion-progress-bar::part(stream) {
+ background-image: radial-gradient(ellipse at center, #e475f3 0%, #e475f3 30%, transparent 30%);
+}
+```
diff --git a/static/usage/v6/progress-bar/theming/css-shadow-parts/angular/example_component_html.md b/static/usage/v6/progress-bar/theming/css-shadow-parts/angular/example_component_html.md
new file mode 100644
index 00000000000..d2c997037ad
--- /dev/null
+++ b/static/usage/v6/progress-bar/theming/css-shadow-parts/angular/example_component_html.md
@@ -0,0 +1,4 @@
+```html
+
+
+```
diff --git a/static/usage/v6/progress-bar/theming/css-shadow-parts/demo.html b/static/usage/v6/progress-bar/theming/css-shadow-parts/demo.html
new file mode 100644
index 00000000000..7ccd266e946
--- /dev/null
+++ b/static/usage/v6/progress-bar/theming/css-shadow-parts/demo.html
@@ -0,0 +1,44 @@
+
+
+
+
+
+
+ Progress Bar
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/progress-bar/theming/css-shadow-parts/index.md b/static/usage/v6/progress-bar/theming/css-shadow-parts/index.md
new file mode 100644
index 00000000000..35baa022fa2
--- /dev/null
+++ b/static/usage/v6/progress-bar/theming/css-shadow-parts/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/v6/progress-bar/theming/css-shadow-parts/javascript.md b/static/usage/v6/progress-bar/theming/css-shadow-parts/javascript.md
new file mode 100644
index 00000000000..52b5be57e5a
--- /dev/null
+++ b/static/usage/v6/progress-bar/theming/css-shadow-parts/javascript.md
@@ -0,0 +1,18 @@
+```html
+
+
+
+
+```
diff --git a/static/usage/v6/progress-bar/theming/css-shadow-parts/react/main_css.md b/static/usage/v6/progress-bar/theming/css-shadow-parts/react/main_css.md
new file mode 100644
index 00000000000..2ccf6f72dd8
--- /dev/null
+++ b/static/usage/v6/progress-bar/theming/css-shadow-parts/react/main_css.md
@@ -0,0 +1,13 @@
+```css
+ion-progress-bar::part(track) {
+ background: #f3e895;
+}
+
+ion-progress-bar::part(progress) {
+ background: #09c567;
+}
+
+ion-progress-bar::part(stream) {
+ background-image: radial-gradient(ellipse at center, #e475f3 0%, #e475f3 30%, transparent 30%);
+}
+```
diff --git a/static/usage/v6/progress-bar/theming/css-shadow-parts/react/main_tsx.md b/static/usage/v6/progress-bar/theming/css-shadow-parts/react/main_tsx.md
new file mode 100644
index 00000000000..a4c5e382892
--- /dev/null
+++ b/static/usage/v6/progress-bar/theming/css-shadow-parts/react/main_tsx.md
@@ -0,0 +1,17 @@
+
+```tsx
+import React from 'react';
+import { IonProgressBar } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/progress-bar/theming/css-shadow-parts/vue.md b/static/usage/v6/progress-bar/theming/css-shadow-parts/vue.md
new file mode 100644
index 00000000000..a9ca62b2c4f
--- /dev/null
+++ b/static/usage/v6/progress-bar/theming/css-shadow-parts/vue.md
@@ -0,0 +1,29 @@
+```html
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/radio/basic/angular.md b/static/usage/v6/radio/basic/angular.md
new file mode 100644
index 00000000000..6e14ab487f5
--- /dev/null
+++ b/static/usage/v6/radio/basic/angular.md
@@ -0,0 +1,25 @@
+```html
+
+
+
+ Grapes
+
+
+
+
+ Strawberries
+
+
+
+
+ Pineapple
+
+
+
+
+ Cherries (Disabled)
+
+
+
+
+```
diff --git a/static/usage/v6/radio/basic/demo.html b/static/usage/v6/radio/basic/demo.html
new file mode 100644
index 00000000000..896041e948e
--- /dev/null
+++ b/static/usage/v6/radio/basic/demo.html
@@ -0,0 +1,52 @@
+
+
+
+
+
+
+ Radio
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Grapes
+
+
+
+
+ Strawberries
+
+
+
+
+ Pineapple
+
+
+
+
+ Cherries (Disabled)
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/radio/basic/index.md b/static/usage/v6/radio/basic/index.md
new file mode 100644
index 00000000000..2abde833f2e
--- /dev/null
+++ b/static/usage/v6/radio/basic/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/v6/radio/basic/javascript.md b/static/usage/v6/radio/basic/javascript.md
new file mode 100644
index 00000000000..23b545a77ba
--- /dev/null
+++ b/static/usage/v6/radio/basic/javascript.md
@@ -0,0 +1,25 @@
+```html
+
+
+
+ Grapes
+
+
+
+
+ Strawberries
+
+
+
+
+ Pineapple
+
+
+
+
+ Cherries (Disabled)
+
+
+
+
+```
diff --git a/static/usage/v6/radio/basic/react.md b/static/usage/v6/radio/basic/react.md
new file mode 100644
index 00000000000..55c404e1d22
--- /dev/null
+++ b/static/usage/v6/radio/basic/react.md
@@ -0,0 +1,33 @@
+```tsx
+import React from 'react';
+import { IonItem, IonLabel, IonList, IonRadio, IonRadioGroup } from '@ionic/react';
+
+function Example() {
+ return (
+
+
+
+ Grapes
+
+
+
+
+ Strawberries
+
+
+
+
+ Pineapple
+
+
+
+
+ Cherries (Disabled)
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/radio/basic/vue.md b/static/usage/v6/radio/basic/vue.md
new file mode 100644
index 00000000000..b0e7187361c
--- /dev/null
+++ b/static/usage/v6/radio/basic/vue.md
@@ -0,0 +1,36 @@
+```html
+
+
+
+
+ Grapes
+
+
+
+
+ Strawberries
+
+
+
+
+ Pineapple
+
+
+
+
+ Cherries (Disabled)
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/radio/empty-selection/angular.md b/static/usage/v6/radio/empty-selection/angular.md
new file mode 100644
index 00000000000..3709479a101
--- /dev/null
+++ b/static/usage/v6/radio/empty-selection/angular.md
@@ -0,0 +1,25 @@
+```html
+
+
+
+ Dogs
+
+
+
+
+ Cats
+
+
+
+
+ Turtles
+
+
+
+
+ Fish
+
+
+
+
+```
diff --git a/static/usage/v6/radio/empty-selection/demo.html b/static/usage/v6/radio/empty-selection/demo.html
new file mode 100644
index 00000000000..29731178d61
--- /dev/null
+++ b/static/usage/v6/radio/empty-selection/demo.html
@@ -0,0 +1,52 @@
+
+
+
+
+
+
+ Radio
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Dogs
+
+
+
+
+ Cats
+
+
+
+
+ Turtles
+
+
+
+
+ Fish
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/radio/empty-selection/index.md b/static/usage/v6/radio/empty-selection/index.md
new file mode 100644
index 00000000000..fd6d995816d
--- /dev/null
+++ b/static/usage/v6/radio/empty-selection/index.md
@@ -0,0 +1,13 @@
+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/v6/radio/empty-selection/javascript.md b/static/usage/v6/radio/empty-selection/javascript.md
new file mode 100644
index 00000000000..85c59f7fa91
--- /dev/null
+++ b/static/usage/v6/radio/empty-selection/javascript.md
@@ -0,0 +1,25 @@
+```html
+
+
+
+ Dogs
+
+
+
+
+ Cats
+
+
+
+
+ Turtles
+
+
+
+
+ Fish
+
+
+
+
+```
diff --git a/static/usage/v6/radio/empty-selection/react.md b/static/usage/v6/radio/empty-selection/react.md
new file mode 100644
index 00000000000..e9b05a45be1
--- /dev/null
+++ b/static/usage/v6/radio/empty-selection/react.md
@@ -0,0 +1,33 @@
+```tsx
+import React from 'react';
+import { IonItem, IonLabel, IonList, IonRadio, IonRadioGroup } from '@ionic/react';
+
+function Example() {
+ return (
+
+
+
+ Dogs
+
+
+
+
+ Cats
+
+
+
+
+ Turtles
+
+
+
+
+ Fish
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/radio/empty-selection/vue.md b/static/usage/v6/radio/empty-selection/vue.md
new file mode 100644
index 00000000000..7a0bd6e7140
--- /dev/null
+++ b/static/usage/v6/radio/empty-selection/vue.md
@@ -0,0 +1,36 @@
+```html
+
+
+
+
+ Dogs
+
+
+
+
+ Cats
+
+
+
+
+ Turtles
+
+
+
+
+ Fish
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/radio/theming/colors/angular.md b/static/usage/v6/radio/theming/colors/angular.md
new file mode 100644
index 00000000000..ace9bab6018
--- /dev/null
+++ b/static/usage/v6/radio/theming/colors/angular.md
@@ -0,0 +1,29 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/radio/theming/colors/demo.html b/static/usage/v6/radio/theming/colors/demo.html
new file mode 100644
index 00000000000..aa122b5f0ec
--- /dev/null
+++ b/static/usage/v6/radio/theming/colors/demo.html
@@ -0,0 +1,54 @@
+
+
+
+
+
+
+ Radio
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/radio/theming/colors/index.md b/static/usage/v6/radio/theming/colors/index.md
new file mode 100644
index 00000000000..fe4ef66c18e
--- /dev/null
+++ b/static/usage/v6/radio/theming/colors/index.md
@@ -0,0 +1,13 @@
+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/v6/radio/theming/colors/javascript.md b/static/usage/v6/radio/theming/colors/javascript.md
new file mode 100644
index 00000000000..ace9bab6018
--- /dev/null
+++ b/static/usage/v6/radio/theming/colors/javascript.md
@@ -0,0 +1,29 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/radio/theming/colors/react.md b/static/usage/v6/radio/theming/colors/react.md
new file mode 100644
index 00000000000..8a96c775064
--- /dev/null
+++ b/static/usage/v6/radio/theming/colors/react.md
@@ -0,0 +1,39 @@
+```tsx
+import React from 'react';
+import { IonRadio, IonRadioGroup } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/radio/theming/colors/vue.md b/static/usage/v6/radio/theming/colors/vue.md
new file mode 100644
index 00000000000..084d8f27a21
--- /dev/null
+++ b/static/usage/v6/radio/theming/colors/vue.md
@@ -0,0 +1,40 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/radio/theming/css-properties/angular/example_component_css.md b/static/usage/v6/radio/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..9e36e69c77d
--- /dev/null
+++ b/static/usage/v6/radio/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,21 @@
+```css
+ion-radio {
+ --border-radius: 4px;
+ --inner-border-radius: 4px;
+
+ --color: #ddd;
+ --color-checked: #6815ec;
+}
+
+ion-radio.ios {
+ width: 20px;
+ height: 20px;
+
+ border: 2px solid #ddd;
+ border-radius: 4px;
+}
+
+.radio-checked.ios {
+ border-color: #6815ec;
+}
+```
diff --git a/static/usage/v6/radio/theming/css-properties/angular/example_component_html.md b/static/usage/v6/radio/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..3944db27fae
--- /dev/null
+++ b/static/usage/v6/radio/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,6 @@
+```html
+
+
+
+
+```
diff --git a/static/usage/v6/radio/theming/css-properties/demo.html b/static/usage/v6/radio/theming/css-properties/demo.html
new file mode 100644
index 00000000000..8d2a07e5df6
--- /dev/null
+++ b/static/usage/v6/radio/theming/css-properties/demo.html
@@ -0,0 +1,49 @@
+
+
+
+
+
+
+ Radio
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/radio/theming/css-properties/index.md b/static/usage/v6/radio/theming/css-properties/index.md
new file mode 100644
index 00000000000..844b06a04f2
--- /dev/null
+++ b/static/usage/v6/radio/theming/css-properties/index.md
@@ -0,0 +1,33 @@
+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/v6/radio/theming/css-properties/javascript.md b/static/usage/v6/radio/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..3900a4a863e
--- /dev/null
+++ b/static/usage/v6/radio/theming/css-properties/javascript.md
@@ -0,0 +1,28 @@
+```html
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/radio/theming/css-properties/react/main_css.md b/static/usage/v6/radio/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..9e36e69c77d
--- /dev/null
+++ b/static/usage/v6/radio/theming/css-properties/react/main_css.md
@@ -0,0 +1,21 @@
+```css
+ion-radio {
+ --border-radius: 4px;
+ --inner-border-radius: 4px;
+
+ --color: #ddd;
+ --color-checked: #6815ec;
+}
+
+ion-radio.ios {
+ width: 20px;
+ height: 20px;
+
+ border: 2px solid #ddd;
+ border-radius: 4px;
+}
+
+.radio-checked.ios {
+ border-color: #6815ec;
+}
+```
diff --git a/static/usage/v6/radio/theming/css-properties/react/main_tsx.md b/static/usage/v6/radio/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..188ac677707
--- /dev/null
+++ b/static/usage/v6/radio/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,16 @@
+```tsx
+import React from 'react';
+import { IonRadio, IonRadioGroup } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/radio/theming/css-properties/vue.md b/static/usage/v6/radio/theming/css-properties/vue.md
new file mode 100644
index 00000000000..557c0547e49
--- /dev/null
+++ b/static/usage/v6/radio/theming/css-properties/vue.md
@@ -0,0 +1,39 @@
+```html
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/radio/theming/css-shadow-parts/angular/example_component_css.md b/static/usage/v6/radio/theming/css-shadow-parts/angular/example_component_css.md
new file mode 100644
index 00000000000..85c8747d6e5
--- /dev/null
+++ b/static/usage/v6/radio/theming/css-shadow-parts/angular/example_component_css.md
@@ -0,0 +1,34 @@
+```css
+ion-radio {
+ width: 30px;
+ height: 30px;
+}
+
+ion-radio::part(container) {
+ border-radius: 8px;
+ border: 2px solid #ddd;
+}
+
+ion-radio::part(mark) {
+ background: none;
+ transition: none;
+ transform: none;
+ border-radius: 0;
+}
+
+ion-radio.radio-checked::part(container) {
+ background: #6815ec;
+ border-color: transparent;
+}
+
+ion-radio.radio-checked::part(mark) {
+ width: 6px;
+ height: 10px;
+
+ border-width: 0px 2px 2px 0px;
+ border-style: solid;
+ border-color: #fff;
+
+ transform: rotate(45deg);
+}
+```
diff --git a/static/usage/v6/radio/theming/css-shadow-parts/angular/example_component_html.md b/static/usage/v6/radio/theming/css-shadow-parts/angular/example_component_html.md
new file mode 100644
index 00000000000..3944db27fae
--- /dev/null
+++ b/static/usage/v6/radio/theming/css-shadow-parts/angular/example_component_html.md
@@ -0,0 +1,6 @@
+```html
+
+
+
+
+```
diff --git a/static/usage/v6/radio/theming/css-shadow-parts/demo.html b/static/usage/v6/radio/theming/css-shadow-parts/demo.html
new file mode 100644
index 00000000000..f2bc280fb83
--- /dev/null
+++ b/static/usage/v6/radio/theming/css-shadow-parts/demo.html
@@ -0,0 +1,62 @@
+
+
+
+
+
+
+ Radio
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/radio/theming/css-shadow-parts/index.md b/static/usage/v6/radio/theming/css-shadow-parts/index.md
new file mode 100644
index 00000000000..84c388f35f3
--- /dev/null
+++ b/static/usage/v6/radio/theming/css-shadow-parts/index.md
@@ -0,0 +1,33 @@
+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/v6/radio/theming/css-shadow-parts/javascript.md b/static/usage/v6/radio/theming/css-shadow-parts/javascript.md
new file mode 100644
index 00000000000..728d1ad34ea
--- /dev/null
+++ b/static/usage/v6/radio/theming/css-shadow-parts/javascript.md
@@ -0,0 +1,41 @@
+```html
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/radio/theming/css-shadow-parts/react/main_css.md b/static/usage/v6/radio/theming/css-shadow-parts/react/main_css.md
new file mode 100644
index 00000000000..85c8747d6e5
--- /dev/null
+++ b/static/usage/v6/radio/theming/css-shadow-parts/react/main_css.md
@@ -0,0 +1,34 @@
+```css
+ion-radio {
+ width: 30px;
+ height: 30px;
+}
+
+ion-radio::part(container) {
+ border-radius: 8px;
+ border: 2px solid #ddd;
+}
+
+ion-radio::part(mark) {
+ background: none;
+ transition: none;
+ transform: none;
+ border-radius: 0;
+}
+
+ion-radio.radio-checked::part(container) {
+ background: #6815ec;
+ border-color: transparent;
+}
+
+ion-radio.radio-checked::part(mark) {
+ width: 6px;
+ height: 10px;
+
+ border-width: 0px 2px 2px 0px;
+ border-style: solid;
+ border-color: #fff;
+
+ transform: rotate(45deg);
+}
+```
diff --git a/static/usage/v6/radio/theming/css-shadow-parts/react/main_tsx.md b/static/usage/v6/radio/theming/css-shadow-parts/react/main_tsx.md
new file mode 100644
index 00000000000..188ac677707
--- /dev/null
+++ b/static/usage/v6/radio/theming/css-shadow-parts/react/main_tsx.md
@@ -0,0 +1,16 @@
+```tsx
+import React from 'react';
+import { IonRadio, IonRadioGroup } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/radio/theming/css-shadow-parts/vue.md b/static/usage/v6/radio/theming/css-shadow-parts/vue.md
new file mode 100644
index 00000000000..e8078202f6c
--- /dev/null
+++ b/static/usage/v6/radio/theming/css-shadow-parts/vue.md
@@ -0,0 +1,52 @@
+```html
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/range/basic/angular.md b/static/usage/v6/range/basic/angular.md
new file mode 100644
index 00000000000..207b74f1fc7
--- /dev/null
+++ b/static/usage/v6/range/basic/angular.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v6/range/basic/demo.html b/static/usage/v6/range/basic/demo.html
new file mode 100644
index 00000000000..2580a0cda5e
--- /dev/null
+++ b/static/usage/v6/range/basic/demo.html
@@ -0,0 +1,29 @@
+
+
+
+
+
+
+ Range
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/range/basic/index.md b/static/usage/v6/range/basic/index.md
new file mode 100644
index 00000000000..46bb7648339
--- /dev/null
+++ b/static/usage/v6/range/basic/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/v6/range/basic/javascript.md b/static/usage/v6/range/basic/javascript.md
new file mode 100644
index 00000000000..207b74f1fc7
--- /dev/null
+++ b/static/usage/v6/range/basic/javascript.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v6/range/basic/react.md b/static/usage/v6/range/basic/react.md
new file mode 100644
index 00000000000..b2f57aed027
--- /dev/null
+++ b/static/usage/v6/range/basic/react.md
@@ -0,0 +1,8 @@
+```tsx
+import React from 'react';
+import { IonRange } from '@ionic/react';
+function Example() {
+ return ;
+}
+export default Example;
+```
diff --git a/static/usage/v6/range/basic/vue.md b/static/usage/v6/range/basic/vue.md
new file mode 100644
index 00000000000..73f55df111e
--- /dev/null
+++ b/static/usage/v6/range/basic/vue.md
@@ -0,0 +1,14 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v6/range/dual-knobs/angular.md b/static/usage/v6/range/dual-knobs/angular.md
new file mode 100644
index 00000000000..b5d6a592a92
--- /dev/null
+++ b/static/usage/v6/range/dual-knobs/angular.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v6/range/dual-knobs/demo.html b/static/usage/v6/range/dual-knobs/demo.html
new file mode 100644
index 00000000000..2c324f0eb57
--- /dev/null
+++ b/static/usage/v6/range/dual-knobs/demo.html
@@ -0,0 +1,36 @@
+
+
+
+
+
+
+ Range
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/range/dual-knobs/index.md b/static/usage/v6/range/dual-knobs/index.md
new file mode 100644
index 00000000000..70792168ada
--- /dev/null
+++ b/static/usage/v6/range/dual-knobs/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/v6/range/dual-knobs/javascript.md b/static/usage/v6/range/dual-knobs/javascript.md
new file mode 100644
index 00000000000..1227b5cc841
--- /dev/null
+++ b/static/usage/v6/range/dual-knobs/javascript.md
@@ -0,0 +1,11 @@
+```html
+
+
+
+```
diff --git a/static/usage/v6/range/dual-knobs/react.md b/static/usage/v6/range/dual-knobs/react.md
new file mode 100644
index 00000000000..7f72b8e1dc3
--- /dev/null
+++ b/static/usage/v6/range/dual-knobs/react.md
@@ -0,0 +1,16 @@
+```tsx
+import React from 'react';
+import { IonRange } from '@ionic/react';
+function Example() {
+ return (
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/range/dual-knobs/vue.md b/static/usage/v6/range/dual-knobs/vue.md
new file mode 100644
index 00000000000..afc825a067c
--- /dev/null
+++ b/static/usage/v6/range/dual-knobs/vue.md
@@ -0,0 +1,14 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v6/range/ion-change-event/angular/example_component_html.md b/static/usage/v6/range/ion-change-event/angular/example_component_html.md
new file mode 100644
index 00000000000..1c7dedd0408
--- /dev/null
+++ b/static/usage/v6/range/ion-change-event/angular/example_component_html.md
@@ -0,0 +1,4 @@
+```html
+
+ionChange emitted value: {{ lastEmittedValue }}
+```
diff --git a/static/usage/v6/range/ion-change-event/angular/example_component_ts.md b/static/usage/v6/range/ion-change-event/angular/example_component_ts.md
new file mode 100644
index 00000000000..b90eff62d29
--- /dev/null
+++ b/static/usage/v6/range/ion-change-event/angular/example_component_ts.md
@@ -0,0 +1,18 @@
+```ts
+import { Component } from '@angular/core';
+
+import { RangeCustomEvent } from '@ionic/angular';
+import { RangeValue } from '@ionic/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ lastEmittedValue: RangeValue;
+
+ onIonChange(ev: Event) {
+ this.lastEmittedValue = (ev as RangeCustomEvent).detail.value;
+ }
+}
+```
diff --git a/static/usage/v6/range/ion-change-event/demo.html b/static/usage/v6/range/ion-change-event/demo.html
new file mode 100644
index 00000000000..93e35b59ba7
--- /dev/null
+++ b/static/usage/v6/range/ion-change-event/demo.html
@@ -0,0 +1,40 @@
+
+
+
+
+
+
+ Range
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ionChange emitted value:
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/range/ion-change-event/index.md b/static/usage/v6/range/ion-change-event/index.md
new file mode 100644
index 00000000000..f4376e63985
--- /dev/null
+++ b/static/usage/v6/range/ion-change-event/index.md
@@ -0,0 +1,24 @@
+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_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/v6/range/ion-change-event/javascript.md b/static/usage/v6/range/ion-change-event/javascript.md
new file mode 100644
index 00000000000..d483a43dd5a
--- /dev/null
+++ b/static/usage/v6/range/ion-change-event/javascript.md
@@ -0,0 +1,13 @@
+```html
+
+
ionChange emitted value:
+
+
+```
diff --git a/static/usage/v6/range/ion-change-event/react.md b/static/usage/v6/range/ion-change-event/react.md
new file mode 100644
index 00000000000..3e1eed172b0
--- /dev/null
+++ b/static/usage/v6/range/ion-change-event/react.md
@@ -0,0 +1,15 @@
+```tsx
+import React, { useState } from 'react';
+import { IonLabel, IonRange } from '@ionic/react';
+import { RangeValue } from '@ionic/core';
+function Example() {
+ const [lastEmittedValue, setLastEmittedValue] = useState
();
+ return (
+ <>
+ setLastEmittedValue(detail.value)}>
+ ionChange emitted value: {lastEmittedValue as number}
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/range/ion-change-event/vue.md b/static/usage/v6/range/ion-change-event/vue.md
new file mode 100644
index 00000000000..d043c11089d
--- /dev/null
+++ b/static/usage/v6/range/ion-change-event/vue.md
@@ -0,0 +1,25 @@
+```html
+
+
+ ionChange emitted value: {{lastEmittedValue}}
+
+
+
+```
diff --git a/static/usage/v6/range/ion-knob-move-event/angular/example_component_html.md b/static/usage/v6/range/ion-knob-move-event/angular/example_component_html.md
new file mode 100644
index 00000000000..d8b54e782eb
--- /dev/null
+++ b/static/usage/v6/range/ion-knob-move-event/angular/example_component_html.md
@@ -0,0 +1,9 @@
+```html
+
+
+ ionKnobMoveStart: {{ moveStart }}
+
+
+ ionKnobMoveEnd: {{ moveEnd }}
+
+```
diff --git a/static/usage/v6/range/ion-knob-move-event/angular/example_component_ts.md b/static/usage/v6/range/ion-knob-move-event/angular/example_component_ts.md
new file mode 100644
index 00000000000..e4b331a10f2
--- /dev/null
+++ b/static/usage/v6/range/ion-knob-move-event/angular/example_component_ts.md
@@ -0,0 +1,23 @@
+```ts
+import { Component } from '@angular/core';
+
+import { RangeCustomEvent } from '@ionic/angular';
+import { RangeValue } from '@ionic/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ moveStart: RangeValue;
+ moveEnd: RangeValue;
+
+ onIonKnobMoveStart(ev: Event) {
+ this.moveStart = (ev as RangeCustomEvent).detail.value;
+ }
+
+ onIonKnobMoveEnd(ev: Event) {
+ this.moveEnd = (ev as RangeCustomEvent).detail.value;
+ }
+}
+```
diff --git a/static/usage/v6/range/ion-knob-move-event/demo.html b/static/usage/v6/range/ion-knob-move-event/demo.html
new file mode 100644
index 00000000000..0522fd9b1ff
--- /dev/null
+++ b/static/usage/v6/range/ion-knob-move-event/demo.html
@@ -0,0 +1,50 @@
+
+
+
+
+
+
+ Range
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ionKnobMoveStart:
+
+
+ ionKnobMoveEnd:
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/range/ion-knob-move-event/index.md b/static/usage/v6/range/ion-knob-move-event/index.md
new file mode 100644
index 00000000000..5e0475a5781
--- /dev/null
+++ b/static/usage/v6/range/ion-knob-move-event/index.md
@@ -0,0 +1,24 @@
+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_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/v6/range/ion-knob-move-event/javascript.md b/static/usage/v6/range/ion-knob-move-event/javascript.md
new file mode 100644
index 00000000000..70346efa5eb
--- /dev/null
+++ b/static/usage/v6/range/ion-knob-move-event/javascript.md
@@ -0,0 +1,23 @@
+```html
+
+
+ ionKnobMoveStart:
+
+
+ ionKnobMoveEnd:
+
+
+
+```
diff --git a/static/usage/v6/range/ion-knob-move-event/react.md b/static/usage/v6/range/ion-knob-move-event/react.md
new file mode 100644
index 00000000000..25d80caae72
--- /dev/null
+++ b/static/usage/v6/range/ion-knob-move-event/react.md
@@ -0,0 +1,24 @@
+```tsx
+import React, { useState } from 'react';
+import { IonLabel, IonRange } from '@ionic/react';
+import { RangeValue } from '@ionic/core';
+function Example() {
+ const [moveStartValue, setMoveStartValue] = useState
();
+ const [moveEndValue, setMoveEndValue] = useState();
+ return (
+ <>
+ setMoveStartValue(detail.value)}
+ onIonKnobMoveEnd={({ detail }) => setMoveEndValue(detail.value)}
+ >
+
+ ionKnobMoveStart: {moveStartValue as number}
+
+
+ ionKnobMoveEnd: {moveEndValue as number}
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/range/ion-knob-move-event/vue.md b/static/usage/v6/range/ion-knob-move-event/vue.md
new file mode 100644
index 00000000000..ffe8e9f5390
--- /dev/null
+++ b/static/usage/v6/range/ion-knob-move-event/vue.md
@@ -0,0 +1,34 @@
+```html
+
+
+
+ ionKnobMoveStart: {{moveStart}}
+
+
+ onIonKnobMoveEnd: {{moveEnd}}
+
+
+
+
+```
diff --git a/static/usage/v6/range/pins/angular/example_component_html.md b/static/usage/v6/range/pins/angular/example_component_html.md
new file mode 100644
index 00000000000..c5f3c823b82
--- /dev/null
+++ b/static/usage/v6/range/pins/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v6/range/pins/angular/example_component_ts.md b/static/usage/v6/range/pins/angular/example_component_ts.md
new file mode 100644
index 00000000000..8dc875e1bda
--- /dev/null
+++ b/static/usage/v6/range/pins/angular/example_component_ts.md
@@ -0,0 +1,13 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ pinFormatter(value: number) {
+ return `${value}%`;
+ }
+}
+```
diff --git a/static/usage/v6/range/pins/demo.html b/static/usage/v6/range/pins/demo.html
new file mode 100644
index 00000000000..032a649d14d
--- /dev/null
+++ b/static/usage/v6/range/pins/demo.html
@@ -0,0 +1,35 @@
+
+
+
+
+
+
+ Range
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/range/pins/index.md b/static/usage/v6/range/pins/index.md
new file mode 100644
index 00000000000..6cd4afa65c3
--- /dev/null
+++ b/static/usage/v6/range/pins/index.md
@@ -0,0 +1,24 @@
+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_example_component_ts from './angular/example_component_ts.md';
+import angular_example_component_html from './angular/example_component_html.md';
+
+
diff --git a/static/usage/v6/range/pins/javascript.md b/static/usage/v6/range/pins/javascript.md
new file mode 100644
index 00000000000..45491f91514
--- /dev/null
+++ b/static/usage/v6/range/pins/javascript.md
@@ -0,0 +1,10 @@
+```html
+
+
+
+```
diff --git a/static/usage/v6/range/pins/react.md b/static/usage/v6/range/pins/react.md
new file mode 100644
index 00000000000..9da75eae26a
--- /dev/null
+++ b/static/usage/v6/range/pins/react.md
@@ -0,0 +1,8 @@
+```tsx
+import React from 'react';
+import { IonRange } from '@ionic/react';
+function Example() {
+ return `${value}%`}>;
+}
+export default Example;
+```
diff --git a/static/usage/v6/range/pins/vue.md b/static/usage/v6/range/pins/vue.md
new file mode 100644
index 00000000000..b2d49bc8300
--- /dev/null
+++ b/static/usage/v6/range/pins/vue.md
@@ -0,0 +1,19 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/range/slots/angular.md b/static/usage/v6/range/slots/angular.md
similarity index 100%
rename from static/usage/range/slots/angular.md
rename to static/usage/v6/range/slots/angular.md
diff --git a/static/usage/v6/range/slots/demo.html b/static/usage/v6/range/slots/demo.html
new file mode 100644
index 00000000000..a6c24e8da62
--- /dev/null
+++ b/static/usage/v6/range/slots/demo.html
@@ -0,0 +1,32 @@
+
+
+
+
+
+
+ Range
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/range/slots/index.md b/static/usage/v6/range/slots/index.md
new file mode 100644
index 00000000000..b5c41e0f8dc
--- /dev/null
+++ b/static/usage/v6/range/slots/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/range/slots/javascript.md b/static/usage/v6/range/slots/javascript.md
similarity index 100%
rename from static/usage/range/slots/javascript.md
rename to static/usage/v6/range/slots/javascript.md
diff --git a/static/usage/range/slots/react.md b/static/usage/v6/range/slots/react.md
similarity index 100%
rename from static/usage/range/slots/react.md
rename to static/usage/v6/range/slots/react.md
diff --git a/static/usage/range/slots/vue.md b/static/usage/v6/range/slots/vue.md
similarity index 100%
rename from static/usage/range/slots/vue.md
rename to static/usage/v6/range/slots/vue.md
diff --git a/static/usage/v6/range/snapping-ticks/angular.md b/static/usage/v6/range/snapping-ticks/angular.md
new file mode 100644
index 00000000000..4ec64a7d5c6
--- /dev/null
+++ b/static/usage/v6/range/snapping-ticks/angular.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v6/range/snapping-ticks/demo.html b/static/usage/v6/range/snapping-ticks/demo.html
new file mode 100644
index 00000000000..8b0ada20488
--- /dev/null
+++ b/static/usage/v6/range/snapping-ticks/demo.html
@@ -0,0 +1,29 @@
+
+
+
+
+
+
+ Range
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/range/snapping-ticks/index.md b/static/usage/v6/range/snapping-ticks/index.md
new file mode 100644
index 00000000000..aab3bbecead
--- /dev/null
+++ b/static/usage/v6/range/snapping-ticks/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/v6/range/snapping-ticks/javascript.md b/static/usage/v6/range/snapping-ticks/javascript.md
new file mode 100644
index 00000000000..d9ebe86597d
--- /dev/null
+++ b/static/usage/v6/range/snapping-ticks/javascript.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v6/range/snapping-ticks/react.md b/static/usage/v6/range/snapping-ticks/react.md
new file mode 100644
index 00000000000..37a0ca15ad4
--- /dev/null
+++ b/static/usage/v6/range/snapping-ticks/react.md
@@ -0,0 +1,8 @@
+```tsx
+import React from 'react';
+import { IonRange } from '@ionic/react';
+function Example() {
+ return ;
+}
+export default Example;
+```
diff --git a/static/usage/v6/range/snapping-ticks/vue.md b/static/usage/v6/range/snapping-ticks/vue.md
new file mode 100644
index 00000000000..5ea90c66f2c
--- /dev/null
+++ b/static/usage/v6/range/snapping-ticks/vue.md
@@ -0,0 +1,14 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/range/theming/css-properties/angular/app_component_css.md b/static/usage/v6/range/theming/css-properties/angular/example_component_css.md
similarity index 100%
rename from static/usage/range/theming/css-properties/angular/app_component_css.md
rename to static/usage/v6/range/theming/css-properties/angular/example_component_css.md
diff --git a/static/usage/v6/range/theming/css-properties/angular/example_component_html.md b/static/usage/v6/range/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..788c2c288d8
--- /dev/null
+++ b/static/usage/v6/range/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v6/range/theming/css-properties/demo.html b/static/usage/v6/range/theming/css-properties/demo.html
new file mode 100644
index 00000000000..2bbf61e793b
--- /dev/null
+++ b/static/usage/v6/range/theming/css-properties/demo.html
@@ -0,0 +1,38 @@
+
+
+
+
+
+
+ Range
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/range/theming/css-properties/index.md b/static/usage/v6/range/theming/css-properties/index.md
new file mode 100644
index 00000000000..1f5aa7529f7
--- /dev/null
+++ b/static/usage/v6/range/theming/css-properties/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/v6/range/theming/css-properties/javascript.md b/static/usage/v6/range/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..619c3e4f6e8
--- /dev/null
+++ b/static/usage/v6/range/theming/css-properties/javascript.md
@@ -0,0 +1,16 @@
+```html
+
+
+
+```
diff --git a/static/usage/range/theming/css-properties/react/main_css.md b/static/usage/v6/range/theming/css-properties/react/main_css.md
similarity index 100%
rename from static/usage/range/theming/css-properties/react/main_css.md
rename to static/usage/v6/range/theming/css-properties/react/main_css.md
diff --git a/static/usage/v6/range/theming/css-properties/react/main_tsx.md b/static/usage/v6/range/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..78261555c9b
--- /dev/null
+++ b/static/usage/v6/range/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,11 @@
+```tsx
+import React from 'react';
+import { IonRange } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return ;
+}
+export default Example;
+```
diff --git a/static/usage/v6/range/theming/css-properties/vue.md b/static/usage/v6/range/theming/css-properties/vue.md
new file mode 100644
index 00000000000..6c0aeff6268
--- /dev/null
+++ b/static/usage/v6/range/theming/css-properties/vue.md
@@ -0,0 +1,27 @@
+```html
+
+
+
+
+
+
+
+```
diff --git a/static/usage/range/theming/css-shadow-parts/angular/app_component_css.md b/static/usage/v6/range/theming/css-shadow-parts/angular/example_component_css.md
similarity index 100%
rename from static/usage/range/theming/css-shadow-parts/angular/app_component_css.md
rename to static/usage/v6/range/theming/css-shadow-parts/angular/example_component_css.md
diff --git a/static/usage/v6/range/theming/css-shadow-parts/angular/example_component_html.md b/static/usage/v6/range/theming/css-shadow-parts/angular/example_component_html.md
new file mode 100644
index 00000000000..95fbcd6f6ab
--- /dev/null
+++ b/static/usage/v6/range/theming/css-shadow-parts/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v6/range/theming/css-shadow-parts/demo.html b/static/usage/v6/range/theming/css-shadow-parts/demo.html
new file mode 100644
index 00000000000..8469ebda0a8
--- /dev/null
+++ b/static/usage/v6/range/theming/css-shadow-parts/demo.html
@@ -0,0 +1,71 @@
+
+
+
+
+
+
+ Range
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/range/theming/css-shadow-parts/index.md b/static/usage/v6/range/theming/css-shadow-parts/index.md
new file mode 100644
index 00000000000..a319fbcfaaa
--- /dev/null
+++ b/static/usage/v6/range/theming/css-shadow-parts/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/v6/range/theming/css-shadow-parts/javascript.md b/static/usage/v6/range/theming/css-shadow-parts/javascript.md
new file mode 100644
index 00000000000..df02ec30fbd
--- /dev/null
+++ b/static/usage/v6/range/theming/css-shadow-parts/javascript.md
@@ -0,0 +1,47 @@
+```html
+
+
+
+```
diff --git a/static/usage/range/theming/css-shadow-parts/react/main_css.md b/static/usage/v6/range/theming/css-shadow-parts/react/main_css.md
similarity index 100%
rename from static/usage/range/theming/css-shadow-parts/react/main_css.md
rename to static/usage/v6/range/theming/css-shadow-parts/react/main_css.md
diff --git a/static/usage/v6/range/theming/css-shadow-parts/react/main_tsx.md b/static/usage/v6/range/theming/css-shadow-parts/react/main_tsx.md
new file mode 100644
index 00000000000..b22ec8d6fd9
--- /dev/null
+++ b/static/usage/v6/range/theming/css-shadow-parts/react/main_tsx.md
@@ -0,0 +1,12 @@
+```tsx
+import React from 'react';
+import { IonRange } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return ;
+}
+
+export default Example;
+```
diff --git a/static/usage/v6/range/theming/css-shadow-parts/vue.md b/static/usage/v6/range/theming/css-shadow-parts/vue.md
new file mode 100644
index 00000000000..c0bccfc8df9
--- /dev/null
+++ b/static/usage/v6/range/theming/css-shadow-parts/vue.md
@@ -0,0 +1,58 @@
+```html
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/refresher/advanced/angular/example_component_css.md b/static/usage/v6/refresher/advanced/angular/example_component_css.md
new file mode 100644
index 00000000000..102c69d71f9
--- /dev/null
+++ b/static/usage/v6/refresher/advanced/angular/example_component_css.md
@@ -0,0 +1,11 @@
+```css
+ion-item {
+ --padding-start: 8px;
+}
+
+ion-icon {
+ font-size: 12px;
+ align-self: start;
+ margin: 15px 8px;
+}
+```
diff --git a/static/usage/v6/refresher/advanced/angular/example_component_html.md b/static/usage/v6/refresher/advanced/angular/example_component_html.md
new file mode 100644
index 00000000000..e724a1da71e
--- /dev/null
+++ b/static/usage/v6/refresher/advanced/angular/example_component_html.md
@@ -0,0 +1,23 @@
+```html
+
+
+ Pull to Refresh
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ item.name }}
+ New message from {{ item.name }}
+
+
+
+
+```
diff --git a/static/usage/v6/refresher/advanced/angular/example_component_ts.md b/static/usage/v6/refresher/advanced/angular/example_component_ts.md
new file mode 100644
index 00000000000..035069fc2a9
--- /dev/null
+++ b/static/usage/v6/refresher/advanced/angular/example_component_ts.md
@@ -0,0 +1,37 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['./example.component.css'],
+})
+export class ExampleComponent {
+ public names = ['Burt Bear', 'Charlie Cheetah', 'Donald Duck', 'Eva Eagle', 'Ellie Elephant', 'Gino Giraffe', 'Isabella Iguana', 'Karl Kitten', 'Lionel Lion', 'Molly Mouse', 'Paul Puppy', 'Rachel Rabbit', 'Ted Turtle'];
+ public items = [];
+
+ ngOnInit() {
+ this.addItems(5);
+ }
+
+ chooseRandomName() {
+ return this.names[Math.floor(Math.random() * this.names.length)];
+ }
+
+ addItems(count, unread = false) {
+ for (let i = 0; i < count; i++) {
+ this.items.unshift({
+ name: this.chooseRandomName(),
+ unread: unread
+ });
+ }
+ }
+
+ handleRefresh(event) {
+ setTimeout(() => {
+ this.addItems(3, true);
+ event.target.complete();
+ }, 2000);
+ };
+}
+```
diff --git a/static/usage/v6/refresher/advanced/demo.html b/static/usage/v6/refresher/advanced/demo.html
new file mode 100644
index 00000000000..8f0b2fbbe52
--- /dev/null
+++ b/static/usage/v6/refresher/advanced/demo.html
@@ -0,0 +1,99 @@
+
+
+
+
+
+
+ Refresher
+
+
+
+
+
+
+
+
+
+
+
+
+ Pull to Refresh
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/refresher/advanced/index.md b/static/usage/v6/refresher/advanced/index.md
new file mode 100644
index 00000000000..287a2d7dc66
--- /dev/null
+++ b/static/usage/v6/refresher/advanced/index.md
@@ -0,0 +1,36 @@
+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_ts from './angular/example_component_ts.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+
diff --git a/static/usage/v6/refresher/advanced/javascript.md b/static/usage/v6/refresher/advanced/javascript.md
new file mode 100644
index 00000000000..d05bed7cacf
--- /dev/null
+++ b/static/usage/v6/refresher/advanced/javascript.md
@@ -0,0 +1,68 @@
+```html
+
+
+ Pull to Refresh
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/refresher/advanced/react/main_css.md b/static/usage/v6/refresher/advanced/react/main_css.md
new file mode 100644
index 00000000000..102c69d71f9
--- /dev/null
+++ b/static/usage/v6/refresher/advanced/react/main_css.md
@@ -0,0 +1,11 @@
+```css
+ion-item {
+ --padding-start: 8px;
+}
+
+ion-icon {
+ font-size: 12px;
+ align-self: start;
+ margin: 15px 8px;
+}
+```
diff --git a/static/usage/v6/refresher/advanced/react/main_tsx.md b/static/usage/v6/refresher/advanced/react/main_tsx.md
new file mode 100644
index 00000000000..ab9596a2675
--- /dev/null
+++ b/static/usage/v6/refresher/advanced/react/main_tsx.md
@@ -0,0 +1,67 @@
+```tsx
+import React, { useEffect, useState } from 'react';
+import { IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonRefresher, IonRefresherContent, IonTitle, IonToolbar, RefresherEventDetail } from '@ionic/react';
+import { ellipse } from 'ionicons/icons';
+
+import './main.css';
+
+function Example() {
+ const names = ['Burt Bear', 'Charlie Cheetah', 'Donald Duck', 'Eva Eagle', 'Ellie Elephant', 'Gino Giraffe', 'Isabella Iguana', 'Karl Kitten', 'Lionel Lion', 'Molly Mouse', 'Paul Puppy', 'Rachel Rabbit', 'Ted Turtle'];
+ const [items, setItems] = useState<{name: string, unread: boolean}[]>([]);
+
+ let didInit = false;
+
+ useEffect(() => {
+ if (!didInit) {
+ didInit = true;
+ addItems(5);
+ }
+ }, []);
+
+ function handleRefresh(event: CustomEvent) {
+ setTimeout(() => {
+ addItems(3, true);
+ event.detail.complete();
+ }, 2000);
+ }
+
+ function chooseRandomName() {
+ return names[Math.floor(Math.random() * names.length)];
+ }
+
+ function addItems(count: number, unread = false) {
+ for (let i = 0; i < count; i++) {
+ setItems((current) => [{ name: chooseRandomName(), unread }, ...current]);
+ }
+ }
+
+ return (
+ <>
+
+
+ Pull to Refresh
+
+
+
+
+
+
+
+
+
+ { items.map((item) => (
+
+
+
+ { item.name }
+ New message from { item.name }
+
+
+ ))}
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/refresher/advanced/vue.md b/static/usage/v6/refresher/advanced/vue.md
new file mode 100644
index 00000000000..328bfcf00f1
--- /dev/null
+++ b/static/usage/v6/refresher/advanced/vue.md
@@ -0,0 +1,72 @@
+```html
+
+
+
+ Pull to Refresh
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ item.name }}
+ New message from {{ item.name }}
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/refresher/basic/angular/example_component_html.md b/static/usage/v6/refresher/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..f665c1c51a1
--- /dev/null
+++ b/static/usage/v6/refresher/basic/angular/example_component_html.md
@@ -0,0 +1,15 @@
+```html
+
+
+ Pull to Refresh
+
+
+
+
+
+
+
+
+ Pull this content down to trigger the refresh.
+
+```
diff --git a/static/usage/v6/refresher/basic/angular/example_component_ts.md b/static/usage/v6/refresher/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..efb168da9d4
--- /dev/null
+++ b/static/usage/v6/refresher/basic/angular/example_component_ts.md
@@ -0,0 +1,16 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ handleRefresh(event) {
+ setTimeout(() => {
+ // Any calls to load data go here
+ event.target.complete();
+ }, 2000);
+ };
+}
+```
diff --git a/static/usage/v6/refresher/basic/demo.html b/static/usage/v6/refresher/basic/demo.html
new file mode 100644
index 00000000000..9c378cad03e
--- /dev/null
+++ b/static/usage/v6/refresher/basic/demo.html
@@ -0,0 +1,43 @@
+
+
+
+
+
+
+ Refresher
+
+
+
+
+
+
+
+
+
+
+ Pull to Refresh
+
+
+
+
+
+
+
+
+ Pull this content down to trigger the refresh.
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/refresher/basic/index.md b/static/usage/v6/refresher/basic/index.md
new file mode 100644
index 00000000000..7d5881fdc1c
--- /dev/null
+++ b/static/usage/v6/refresher/basic/index.md
@@ -0,0 +1,26 @@
+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_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/v6/refresher/basic/javascript.md b/static/usage/v6/refresher/basic/javascript.md
new file mode 100644
index 00000000000..565e1247624
--- /dev/null
+++ b/static/usage/v6/refresher/basic/javascript.md
@@ -0,0 +1,26 @@
+```html
+
+
+ Pull to Refresh
+
+
+
+
+
+
+
+
+ Pull this content down to trigger the refresh.
+
+
+
+```
diff --git a/static/usage/v6/refresher/basic/react.md b/static/usage/v6/refresher/basic/react.md
new file mode 100644
index 00000000000..8c828b090c7
--- /dev/null
+++ b/static/usage/v6/refresher/basic/react.md
@@ -0,0 +1,33 @@
+```tsx
+import React from 'react';
+import { IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar, RefresherEventDetail } from '@ionic/react';
+
+function Example() {
+
+ function handleRefresh(event: CustomEvent) {
+ setTimeout(() => {
+ // Any calls to load data go here
+ event.detail.complete();
+ }, 2000);
+ }
+
+ return (
+ <>
+
+
+ Pull to Refresh
+
+
+
+
+
+
+
+
+ Pull this content down to trigger the refresh.
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/refresher/basic/vue.md b/static/usage/v6/refresher/basic/vue.md
new file mode 100644
index 00000000000..870081dcfbf
--- /dev/null
+++ b/static/usage/v6/refresher/basic/vue.md
@@ -0,0 +1,36 @@
+```html
+
+
+
+ Pull to Refresh
+
+
+
+
+
+
+
+
+ Pull this content down to trigger the refresh.
+
+
+
+
+```
diff --git a/static/usage/v6/refresher/custom-content/angular/example_component_html.md b/static/usage/v6/refresher/custom-content/angular/example_component_html.md
new file mode 100644
index 00000000000..bca91e0a0d8
--- /dev/null
+++ b/static/usage/v6/refresher/custom-content/angular/example_component_html.md
@@ -0,0 +1,20 @@
+```html
+
+
+ Pull to Refresh
+
+
+
+
+
+
+
+
+
+ Pull this content down to trigger the refresh.
+
+```
diff --git a/static/usage/v6/refresher/custom-content/angular/example_component_ts.md b/static/usage/v6/refresher/custom-content/angular/example_component_ts.md
new file mode 100644
index 00000000000..efb168da9d4
--- /dev/null
+++ b/static/usage/v6/refresher/custom-content/angular/example_component_ts.md
@@ -0,0 +1,16 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ handleRefresh(event) {
+ setTimeout(() => {
+ // Any calls to load data go here
+ event.target.complete();
+ }, 2000);
+ };
+}
+```
diff --git a/static/usage/v6/refresher/custom-content/demo.html b/static/usage/v6/refresher/custom-content/demo.html
new file mode 100644
index 00000000000..084ad40e10d
--- /dev/null
+++ b/static/usage/v6/refresher/custom-content/demo.html
@@ -0,0 +1,45 @@
+
+
+
+
+
+
+ Refresher
+
+
+
+
+
+
+
+
+
+
+ Pull to Refresh
+
+
+
+
+
+
+
+
+
+ Pull this content down to trigger the refresh.
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/refresher/custom-content/index.md b/static/usage/v6/refresher/custom-content/index.md
new file mode 100644
index 00000000000..535914c3215
--- /dev/null
+++ b/static/usage/v6/refresher/custom-content/index.md
@@ -0,0 +1,26 @@
+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_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/v6/refresher/custom-content/javascript.md b/static/usage/v6/refresher/custom-content/javascript.md
new file mode 100644
index 00000000000..779bd97ed80
--- /dev/null
+++ b/static/usage/v6/refresher/custom-content/javascript.md
@@ -0,0 +1,31 @@
+```html
+
+
+ Pull to Refresh
+
+
+
+
+
+
+
+
+
+ Pull this content down to trigger the refresh.
+
+
+
+```
diff --git a/static/usage/v6/refresher/custom-content/react.md b/static/usage/v6/refresher/custom-content/react.md
new file mode 100644
index 00000000000..627f4981f56
--- /dev/null
+++ b/static/usage/v6/refresher/custom-content/react.md
@@ -0,0 +1,39 @@
+```tsx
+import React from 'react';
+import { IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar, RefresherEventDetail } from '@ionic/react';
+import { chevronDownCircleOutline } from 'ionicons/icons';
+
+function Example() {
+
+ function handleRefresh(event: CustomEvent) {
+ setTimeout(() => {
+ // Any calls to load data go here
+ event.detail.complete();
+ }, 2000);
+ }
+
+ return (
+ <>
+
+
+ Pull to Refresh
+
+
+
+
+
+
+
+
+
+ Pull this content down to trigger the refresh.
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/refresher/custom-content/vue.md b/static/usage/v6/refresher/custom-content/vue.md
new file mode 100644
index 00000000000..a5bb444fd91
--- /dev/null
+++ b/static/usage/v6/refresher/custom-content/vue.md
@@ -0,0 +1,42 @@
+```html
+
+
+
+ Pull to Refresh
+
+
+
+
+
+
+
+
+
+ Pull this content down to trigger the refresh.
+
+
+
+
+```
diff --git a/static/usage/v6/refresher/custom-scroll-target/angular/example_component_css.md b/static/usage/v6/refresher/custom-scroll-target/angular/example_component_css.md
new file mode 100644
index 00000000000..5fe74c95f50
--- /dev/null
+++ b/static/usage/v6/refresher/custom-scroll-target/angular/example_component_css.md
@@ -0,0 +1,10 @@
+```css
+.ion-content-scroll-host {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 100%;
+ width: 100%;
+ overflow-y: auto;
+}
+```
diff --git a/static/usage/v6/refresher/custom-scroll-target/angular/example_component_html.md b/static/usage/v6/refresher/custom-scroll-target/angular/example_component_html.md
new file mode 100644
index 00000000000..4c0e2cddc16
--- /dev/null
+++ b/static/usage/v6/refresher/custom-scroll-target/angular/example_component_html.md
@@ -0,0 +1,17 @@
+```html
+
+
+ Pull to Refresh
+
+
+
+
+
+
+
+
+
+
Pull this content down to trigger the refresh.
+
+
Pull this content down to trigger the refresh.
+
+
Pull this content down to trigger the refresh.
+
+
Pull this content down to trigger the refresh.
+
+
Pull this content down to trigger the refresh.
+
Pull this content down to trigger the refresh.
+
+```
diff --git a/static/usage/v6/refresher/pull-properties/angular/example_component_ts.md b/static/usage/v6/refresher/pull-properties/angular/example_component_ts.md
new file mode 100644
index 00000000000..efb168da9d4
--- /dev/null
+++ b/static/usage/v6/refresher/pull-properties/angular/example_component_ts.md
@@ -0,0 +1,16 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ handleRefresh(event) {
+ setTimeout(() => {
+ // Any calls to load data go here
+ event.target.complete();
+ }, 2000);
+ };
+}
+```
diff --git a/static/usage/v6/refresher/pull-properties/demo.html b/static/usage/v6/refresher/pull-properties/demo.html
new file mode 100644
index 00000000000..3d8e940a636
--- /dev/null
+++ b/static/usage/v6/refresher/pull-properties/demo.html
@@ -0,0 +1,43 @@
+
+
+
+
+
+
+ Refresher
+
+
+
+
+
+
+
+
+
+
+ Pull to Refresh
+
+
+
+
+
+
+
+
+ Pull this content down to trigger the refresh.
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/refresher/pull-properties/index.md b/static/usage/v6/refresher/pull-properties/index.md
new file mode 100644
index 00000000000..0d7f17cc547
--- /dev/null
+++ b/static/usage/v6/refresher/pull-properties/index.md
@@ -0,0 +1,26 @@
+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_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/v6/refresher/pull-properties/javascript.md b/static/usage/v6/refresher/pull-properties/javascript.md
new file mode 100644
index 00000000000..8bc8b286566
--- /dev/null
+++ b/static/usage/v6/refresher/pull-properties/javascript.md
@@ -0,0 +1,26 @@
+```html
+
+
+ Pull to Refresh
+
+
+
+
+
+
+
+
+ Pull this content down to trigger the refresh.
+
+
+
+```
diff --git a/static/usage/v6/refresher/pull-properties/react.md b/static/usage/v6/refresher/pull-properties/react.md
new file mode 100644
index 00000000000..73f5a65b07a
--- /dev/null
+++ b/static/usage/v6/refresher/pull-properties/react.md
@@ -0,0 +1,33 @@
+```tsx
+import React from 'react';
+import { IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar, RefresherEventDetail } from '@ionic/react';
+
+function Example() {
+
+ function handleRefresh(event: CustomEvent) {
+ setTimeout(() => {
+ // Any calls to load data go here
+ event.detail.complete();
+ }, 2000);
+ }
+
+ return (
+ <>
+
+
+ Pull to Refresh
+
+
+
+
+
+
+
+
+ Pull this content down to trigger the refresh.
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/refresher/pull-properties/vue.md b/static/usage/v6/refresher/pull-properties/vue.md
new file mode 100644
index 00000000000..0d3e1b45e9f
--- /dev/null
+++ b/static/usage/v6/refresher/pull-properties/vue.md
@@ -0,0 +1,36 @@
+```html
+
+
+
+ Pull to Refresh
+
+
+
+
+
+
+
+
+ Pull this content down to trigger the refresh.
+
+
+
+
+```
diff --git a/static/usage/v6/reorder/basic/angular/example_component_html.md b/static/usage/v6/reorder/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..0a02fe2563d
--- /dev/null
+++ b/static/usage/v6/reorder/basic/angular/example_component_html.md
@@ -0,0 +1,42 @@
+```html
+
+
+
+
+
+
+ Item 1
+
+
+
+
+
+
+ Item 2
+
+
+
+
+
+
+ Item 3
+
+
+
+
+
+
+ Item 4
+
+
+
+
+
+
+ Item 5
+
+
+
+
+
+```
diff --git a/static/usage/v6/reorder/basic/angular/example_component_ts.md b/static/usage/v6/reorder/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..6fdf85ed614
--- /dev/null
+++ b/static/usage/v6/reorder/basic/angular/example_component_ts.md
@@ -0,0 +1,22 @@
+```ts
+import { Component } from '@angular/core';
+
+import { ItemReorderEventDetail } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html'
+})
+export class ExampleComponent {
+ handleReorder(ev: CustomEvent) {
+ // The `from` and `to` properties contain the index of the item
+ // when the drag started and ended, respectively
+ console.log('Dragged from index', ev.detail.from, 'to', ev.detail.to);
+
+ // Finish the reorder and position the item in the DOM based on
+ // where the gesture ended. This method can also be called directly
+ // by the reorder group
+ ev.detail.complete();
+ }
+}
+```
diff --git a/static/usage/v6/reorder/basic/demo.html b/static/usage/v6/reorder/basic/demo.html
new file mode 100644
index 00000000000..7d721cc2790
--- /dev/null
+++ b/static/usage/v6/reorder/basic/demo.html
@@ -0,0 +1,83 @@
+
+
+
+
+
+
+ Reorder
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Item 1
+
+
+
+
+
+
+ Item 2
+
+
+
+
+
+
+ Item 3
+
+
+
+
+
+
+ Item 4
+
+
+
+
+
+
+ Item 5
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/reorder/basic/index.md b/static/usage/v6/reorder/basic/index.md
new file mode 100644
index 00000000000..7e5b9512ad7
--- /dev/null
+++ b/static/usage/v6/reorder/basic/index.md
@@ -0,0 +1,25 @@
+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_example_component_ts from './angular/example_component_ts.md';
+import angular_example_component_html from './angular/example_component_html.md';
+
+
diff --git a/static/usage/v6/reorder/basic/javascript.md b/static/usage/v6/reorder/basic/javascript.md
new file mode 100644
index 00000000000..0d7a09f9818
--- /dev/null
+++ b/static/usage/v6/reorder/basic/javascript.md
@@ -0,0 +1,56 @@
+```html
+
+
+
+
+
+ Item 1
+
+
+
+
+
+
+ Item 2
+
+
+
+
+
+
+ Item 3
+
+
+
+
+
+
+ Item 4
+
+
+
+
+
+
+ Item 5
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/reorder/basic/react.md b/static/usage/v6/reorder/basic/react.md
new file mode 100644
index 00000000000..179ee82a782
--- /dev/null
+++ b/static/usage/v6/reorder/basic/react.md
@@ -0,0 +1,60 @@
+```tsx
+import React from 'react';
+import { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, ItemReorderEventDetail } from '@ionic/react';
+
+function Example() {
+ function handleReorder(event: CustomEvent) {
+ // The `from` and `to` properties contain the index of the item
+ // when the drag started and ended, respectively
+ console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
+
+ // Finish the reorder and position the item in the DOM based on
+ // where the gesture ended. This method can also be called directly
+ // by the reorder group
+ event.detail.complete();
+ }
+
+ return (
+
+ {/* The reorder gesture is disabled by default, enable it to drag and drop items */}
+
+
+
+ Item 1
+
+
+
+
+
+
+ Item 2
+
+
+
+
+
+
+ Item 3
+
+
+
+
+
+
+ Item 4
+
+
+
+
+
+
+ Item 5
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/reorder/basic/vue.md b/static/usage/v6/reorder/basic/vue.md
new file mode 100644
index 00000000000..5a861e1dc26
--- /dev/null
+++ b/static/usage/v6/reorder/basic/vue.md
@@ -0,0 +1,66 @@
+```html
+
+
+
+
+
+
+ Item 1
+
+
+
+
+
+
+ Item 2
+
+
+
+
+
+
+ Item 3
+
+
+
+
+
+
+ Item 4
+
+
+
+
+
+
+ Item 5
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/reorder/custom-icon/angular/example_component_html.md b/static/usage/v6/reorder/custom-icon/angular/example_component_html.md
new file mode 100644
index 00000000000..12473b3a04a
--- /dev/null
+++ b/static/usage/v6/reorder/custom-icon/angular/example_component_html.md
@@ -0,0 +1,52 @@
+```html
+
+
+
+
+
+
+ Item 1
+
+
+
+
+
+
+
+
+ Item 2
+
+
+
+
+
+
+
+
+ Item 3
+
+
+
+
+
+
+
+
+ Item 4
+
+
+
+
+
+
+
+
+ Item 5
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/reorder/custom-icon/angular/example_component_ts.md b/static/usage/v6/reorder/custom-icon/angular/example_component_ts.md
new file mode 100644
index 00000000000..6fdf85ed614
--- /dev/null
+++ b/static/usage/v6/reorder/custom-icon/angular/example_component_ts.md
@@ -0,0 +1,22 @@
+```ts
+import { Component } from '@angular/core';
+
+import { ItemReorderEventDetail } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html'
+})
+export class ExampleComponent {
+ handleReorder(ev: CustomEvent) {
+ // The `from` and `to` properties contain the index of the item
+ // when the drag started and ended, respectively
+ console.log('Dragged from index', ev.detail.from, 'to', ev.detail.to);
+
+ // Finish the reorder and position the item in the DOM based on
+ // where the gesture ended. This method can also be called directly
+ // by the reorder group
+ ev.detail.complete();
+ }
+}
+```
diff --git a/static/usage/v6/reorder/custom-icon/demo.html b/static/usage/v6/reorder/custom-icon/demo.html
new file mode 100644
index 00000000000..1d9ad3dd39e
--- /dev/null
+++ b/static/usage/v6/reorder/custom-icon/demo.html
@@ -0,0 +1,93 @@
+
+
+
+
+
+
+ Reorder
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Item 1
+
+
+
+
+
+
+
+
+ Item 2
+
+
+
+
+
+
+
+
+ Item 3
+
+
+
+
+
+
+
+
+ Item 4
+
+
+
+
+
+
+
+
+ Item 5
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/reorder/custom-icon/index.md b/static/usage/v6/reorder/custom-icon/index.md
new file mode 100644
index 00000000000..4a5490803bf
--- /dev/null
+++ b/static/usage/v6/reorder/custom-icon/index.md
@@ -0,0 +1,25 @@
+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_example_component_ts from './angular/example_component_ts.md';
+import angular_example_component_html from './angular/example_component_html.md';
+
+
diff --git a/static/usage/v6/reorder/custom-icon/javascript.md b/static/usage/v6/reorder/custom-icon/javascript.md
new file mode 100644
index 00000000000..6e75b74343f
--- /dev/null
+++ b/static/usage/v6/reorder/custom-icon/javascript.md
@@ -0,0 +1,66 @@
+```html
+
+
+
+
+
+ Item 1
+
+
+
+
+
+
+
+
+ Item 2
+
+
+
+
+
+
+
+
+ Item 3
+
+
+
+
+
+
+
+
+ Item 4
+
+
+
+
+
+
+
+
+ Item 5
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/reorder/custom-icon/react.md b/static/usage/v6/reorder/custom-icon/react.md
new file mode 100644
index 00000000000..845a3a6decc
--- /dev/null
+++ b/static/usage/v6/reorder/custom-icon/react.md
@@ -0,0 +1,71 @@
+```tsx
+import React from 'react';
+import { IonIcon, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, ItemReorderEventDetail } from '@ionic/react';
+import { pizza } from 'ionicons/icons';
+
+function Example() {
+ function handleReorder(event: CustomEvent) {
+ // The `from` and `to` properties contain the index of the item
+ // when the drag started and ended, respectively
+ console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
+
+ // Finish the reorder and position the item in the DOM based on
+ // where the gesture ended. This method can also be called directly
+ // by the reorder group
+ event.detail.complete();
+ }
+
+ return (
+
+ {/* The reorder gesture is disabled by default, enable it to drag and drop items */}
+
+
+
+ Item 1
+
+
+
+
+
+
+
+
+ Item 2
+
+
+
+
+
+
+
+
+ Item 3
+
+
+
+
+
+
+
+
+ Item 4
+
+
+
+
+
+
+
+
+ Item 5
+
+
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/reorder/custom-icon/vue.md b/static/usage/v6/reorder/custom-icon/vue.md
new file mode 100644
index 00000000000..17416c67e85
--- /dev/null
+++ b/static/usage/v6/reorder/custom-icon/vue.md
@@ -0,0 +1,76 @@
+```html
+
+
+
+
+
+
+ Item 1
+
+
+
+
+
+
+
+
+ Item 2
+
+
+
+
+
+
+
+
+ Item 3
+
+
+
+
+
+
+
+
+ Item 4
+
+
+
+
+
+
+
+
+ Item 5
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/reorder/custom-scroll-target/angular/example_component_css.md b/static/usage/v6/reorder/custom-scroll-target/angular/example_component_css.md
new file mode 100644
index 00000000000..4db169a0e16
--- /dev/null
+++ b/static/usage/v6/reorder/custom-scroll-target/angular/example_component_css.md
@@ -0,0 +1,11 @@
+```css
+.ion-content-scroll-host {
+ position: absolute;
+ top: 0;
+ left: 0;
+
+ height: 100%;
+ width: 100%;
+ overflow-y: auto;
+}
+```
diff --git a/static/usage/v6/reorder/custom-scroll-target/angular/example_component_html.md b/static/usage/v6/reorder/custom-scroll-target/angular/example_component_html.md
new file mode 100644
index 00000000000..bd08063770b
--- /dev/null
+++ b/static/usage/v6/reorder/custom-scroll-target/angular/example_component_html.md
@@ -0,0 +1,46 @@
+```html
+
+
+
+
+
+
+
+
+ Item 1
+
+
+
+
+
+
+ Item 2
+
+
+
+
+
+
+ Item 3
+
+
+
+
+
+
+ Item 4
+
+
+
+
+
+
+ Item 5
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/reorder/custom-scroll-target/angular/example_component_ts.md b/static/usage/v6/reorder/custom-scroll-target/angular/example_component_ts.md
new file mode 100644
index 00000000000..2cd3dd66740
--- /dev/null
+++ b/static/usage/v6/reorder/custom-scroll-target/angular/example_component_ts.md
@@ -0,0 +1,23 @@
+```ts
+import { Component } from '@angular/core';
+
+import { ItemReorderEventDetail } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['./example.component.css'],
+})
+export class ExampleComponent {
+ handleReorder(ev: CustomEvent) {
+ // The `from` and `to` properties contain the index of the item
+ // when the drag started and ended, respectively
+ console.log('Dragged from index', ev.detail.from, 'to', ev.detail.to);
+
+ // Finish the reorder and position the item in the DOM based on
+ // where the gesture ended. This method can also be called directly
+ // by the reorder group
+ ev.detail.complete();
+ }
+}
+```
diff --git a/static/usage/v6/reorder/custom-scroll-target/demo.html b/static/usage/v6/reorder/custom-scroll-target/demo.html
new file mode 100644
index 00000000000..8a94ae5d8e6
--- /dev/null
+++ b/static/usage/v6/reorder/custom-scroll-target/demo.html
@@ -0,0 +1,95 @@
+
+
+
+
+
+
+ Reorder
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Item 1
+
+
+
+
+
+
+ Item 2
+
+
+
+
+
+
+ Item 3
+
+
+
+
+
+
+ Item 4
+
+
+
+
+
+
+ Item 5
+
+
+
+
+
+
+
+
+
+
+
+
+ Item 1
+
+
+
+
+
+
+ Item 2
+
+
+
+
+
+
+ Item 3
+
+
+
+
+
+
+ Item 4
+
+
+
+
+
+
+ Item 5
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/reorder/custom-scroll-target/react/main_css.md b/static/usage/v6/reorder/custom-scroll-target/react/main_css.md
new file mode 100644
index 00000000000..4db169a0e16
--- /dev/null
+++ b/static/usage/v6/reorder/custom-scroll-target/react/main_css.md
@@ -0,0 +1,11 @@
+```css
+.ion-content-scroll-host {
+ position: absolute;
+ top: 0;
+ left: 0;
+
+ height: 100%;
+ width: 100%;
+ overflow-y: auto;
+}
+```
diff --git a/static/usage/v6/reorder/custom-scroll-target/react/main_tsx.md b/static/usage/v6/reorder/custom-scroll-target/react/main_tsx.md
new file mode 100644
index 00000000000..cd7fd8f84b0
--- /dev/null
+++ b/static/usage/v6/reorder/custom-scroll-target/react/main_tsx.md
@@ -0,0 +1,66 @@
+```tsx
+import React from 'react';
+import { IonContent, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, ItemReorderEventDetail } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ function handleReorder(event: CustomEvent) {
+ // The `from` and `to` properties contain the index of the item
+ // when the drag started and ended, respectively
+ console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
+
+ // Finish the reorder and position the item in the DOM based on
+ // where the gesture ended. This method can also be called directly
+ // by the reorder group
+ event.detail.complete();
+ }
+
+ return (
+
+
+
+ {/* The reorder gesture is disabled by default, enable it to drag and drop items */}
+
+
+
+ Item 1
+
+
+
+
+
+
+ Item 2
+
+
+
+
+
+
+ Item 3
+
+
+
+
+
+
+ Item 4
+
+
+
+
+
+
+ Item 5
+
+
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/reorder/custom-scroll-target/vue.md b/static/usage/v6/reorder/custom-scroll-target/vue.md
new file mode 100644
index 00000000000..808ed347020
--- /dev/null
+++ b/static/usage/v6/reorder/custom-scroll-target/vue.md
@@ -0,0 +1,82 @@
+```html
+
+
+
+
+
+
+
+
+ Item 1
+
+
+
+
+
+
+ Item 2
+
+
+
+
+
+
+ Item 3
+
+
+
+
+
+
+ Item 4
+
+
+
+
+
+
+ Item 5
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/reorder/toggling-disabled/angular/example_component_html.md b/static/usage/v6/reorder/toggling-disabled/angular/example_component_html.md
new file mode 100644
index 00000000000..76af0bff12e
--- /dev/null
+++ b/static/usage/v6/reorder/toggling-disabled/angular/example_component_html.md
@@ -0,0 +1,46 @@
+```html
+
+
+
+
+
+ Item 1
+
+
+
+
+
+
+ Item 2
+
+
+
+
+
+
+ Item 3
+
+
+
+
+
+
+ Item 4
+
+
+
+
+
+
+ Item 5
+
+
+
+
+
+
+
+
+ Toggle Reorder
+
+```
diff --git a/static/usage/v6/reorder/toggling-disabled/angular/example_component_ts.md b/static/usage/v6/reorder/toggling-disabled/angular/example_component_ts.md
new file mode 100644
index 00000000000..ded54467eba
--- /dev/null
+++ b/static/usage/v6/reorder/toggling-disabled/angular/example_component_ts.md
@@ -0,0 +1,28 @@
+```ts
+import { Component } from '@angular/core';
+
+import { ItemReorderEventDetail } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html'
+})
+export class ExampleComponent {
+ public isDisabled = true;
+
+ handleReorder(ev: CustomEvent) {
+ // The `from` and `to` properties contain the index of the item
+ // when the drag started and ended, respectively
+ console.log('Dragged from index', ev.detail.from, 'to', ev.detail.to);
+
+ // Finish the reorder and position the item in the DOM based on
+ // where the gesture ended. This method can also be called directly
+ // by the reorder group
+ ev.detail.complete();
+ }
+
+ toggleReorder() {
+ this.isDisabled = !this.isDisabled;
+ }
+}
+```
diff --git a/static/usage/v6/reorder/toggling-disabled/demo.html b/static/usage/v6/reorder/toggling-disabled/demo.html
new file mode 100644
index 00000000000..1eb8cba120b
--- /dev/null
+++ b/static/usage/v6/reorder/toggling-disabled/demo.html
@@ -0,0 +1,96 @@
+
+
+
+
+
+
+ Reorder
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Item 1
+
+
+
+
+
+
+ Item 2
+
+
+
+
+
+
+ Item 3
+
+
+
+
+
+
+ Item 4
+
+
+
+
+
+
+ Item 5
+
+
+
+
+
+
+
+
+ Toggle Reorder
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/reorder/toggling-disabled/index.md b/static/usage/v6/reorder/toggling-disabled/index.md
new file mode 100644
index 00000000000..c4f5dac0112
--- /dev/null
+++ b/static/usage/v6/reorder/toggling-disabled/index.md
@@ -0,0 +1,25 @@
+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_example_component_ts from './angular/example_component_ts.md';
+import angular_example_component_html from './angular/example_component_html.md';
+
+
diff --git a/static/usage/v6/reorder/toggling-disabled/javascript.md b/static/usage/v6/reorder/toggling-disabled/javascript.md
new file mode 100644
index 00000000000..68319ec0221
--- /dev/null
+++ b/static/usage/v6/reorder/toggling-disabled/javascript.md
@@ -0,0 +1,64 @@
+```html
+
+
+
+
+ Item 1
+
+
+
+
+
+
+ Item 2
+
+
+
+
+
+
+ Item 3
+
+
+
+
+
+
+ Item 4
+
+
+
+
+
+
+ Item 5
+
+
+
+
+
+
+
+
+ Toggle Reorder
+
+
+
+```
diff --git a/static/usage/v6/reorder/toggling-disabled/react.md b/static/usage/v6/reorder/toggling-disabled/react.md
new file mode 100644
index 00000000000..e86e1e7516f
--- /dev/null
+++ b/static/usage/v6/reorder/toggling-disabled/react.md
@@ -0,0 +1,72 @@
+```tsx
+import React, { useState } from 'react';
+import { IonButton, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, ItemReorderEventDetail } from '@ionic/react';
+
+function Example() {
+ const [isDisabled, setIsDisabled] = useState(true);
+
+ function handleReorder(event: CustomEvent) {
+ // The `from` and `to` properties contain the index of the item
+ // when the drag started and ended, respectively
+ console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
+
+ // Finish the reorder and position the item in the DOM based on
+ // where the gesture ended. This method can also be called directly
+ // by the reorder group
+ event.detail.complete();
+ }
+
+ function toggleReorder() {
+ setIsDisabled(current => !current);
+ }
+
+ return (
+ <>
+
+
+
+
+ Item 1
+
+
+
+
+
+
+ Item 2
+
+
+
+
+
+
+ Item 3
+
+
+
+
+
+
+ Item 4
+
+
+
+
+
+
+ Item 5
+
+
+
+
+
+
+ {/* The reorder gesture is disabled by default, enable it to drag and drop items */}
+
+ Toggle Reorder
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/reorder/toggling-disabled/vue.md b/static/usage/v6/reorder/toggling-disabled/vue.md
new file mode 100644
index 00000000000..4711f6dc74b
--- /dev/null
+++ b/static/usage/v6/reorder/toggling-disabled/vue.md
@@ -0,0 +1,76 @@
+```html
+
+
+
+
+
+ Item 1
+
+
+
+
+
+
+ Item 2
+
+
+
+
+
+
+ Item 3
+
+
+
+
+
+
+ Item 4
+
+
+
+
+
+
+ Item 5
+
+
+
+
+
+
+
+
+ Toggle Reorder
+
+
+
+
+```
diff --git a/static/usage/v6/reorder/updating-data/angular/example_component_html.md b/static/usage/v6/reorder/updating-data/angular/example_component_html.md
new file mode 100644
index 00000000000..4339191e634
--- /dev/null
+++ b/static/usage/v6/reorder/updating-data/angular/example_component_html.md
@@ -0,0 +1,14 @@
+```html
+
+
+
+
+
+
+ Item {{ item }}
+
+
+
+
+
+```
diff --git a/static/usage/v6/reorder/updating-data/angular/example_component_ts.md b/static/usage/v6/reorder/updating-data/angular/example_component_ts.md
new file mode 100644
index 00000000000..f1132926bb4
--- /dev/null
+++ b/static/usage/v6/reorder/updating-data/angular/example_component_ts.md
@@ -0,0 +1,27 @@
+```ts
+import { Component } from '@angular/core';
+
+import { ItemReorderEventDetail } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html'
+})
+export class ExampleComponent {
+ items = [1, 2, 3, 4, 5];
+
+ handleReorder(ev: CustomEvent) {
+ // Before complete is called with the items they will remain in the
+ // order before the drag
+ console.log('Before complete', this.items);
+
+ // Finish the reorder and position the item in the DOM based on
+ // where the gesture ended. Update the items variable to the
+ // new order of items
+ this.items = ev.detail.complete(this.items);
+
+ // After complete is called the items will be in the new order
+ console.log('After complete', this.items);
+ }
+}
+```
diff --git a/static/usage/v6/reorder/updating-data/demo.html b/static/usage/v6/reorder/updating-data/demo.html
new file mode 100644
index 00000000000..bf7d175f937
--- /dev/null
+++ b/static/usage/v6/reorder/updating-data/demo.html
@@ -0,0 +1,76 @@
+
+
+
+
+
+
+ Reorder
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/reorder/updating-data/index.md b/static/usage/v6/reorder/updating-data/index.md
new file mode 100644
index 00000000000..6ff98a45bf2
--- /dev/null
+++ b/static/usage/v6/reorder/updating-data/index.md
@@ -0,0 +1,25 @@
+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_example_component_ts from './angular/example_component_ts.md';
+import angular_example_component_html from './angular/example_component_html.md';
+
+
diff --git a/static/usage/v6/reorder/updating-data/javascript.md b/static/usage/v6/reorder/updating-data/javascript.md
new file mode 100644
index 00000000000..603f9802241
--- /dev/null
+++ b/static/usage/v6/reorder/updating-data/javascript.md
@@ -0,0 +1,49 @@
+```html
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/reorder/updating-data/react.md b/static/usage/v6/reorder/updating-data/react.md
new file mode 100644
index 00000000000..25e58caaf0f
--- /dev/null
+++ b/static/usage/v6/reorder/updating-data/react.md
@@ -0,0 +1,39 @@
+```tsx
+import React, { useState } from 'react';
+import { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, ItemReorderEventDetail } from '@ionic/react';
+
+function Example() {
+ const [items, setItems] = useState([1, 2, 3, 4, 5]);
+
+ function handleReorder(event: CustomEvent) {
+ // Before complete is called with the items they will remain in the
+ // order before the drag
+ console.log('Before complete', items);
+
+ // Finish the reorder and position the item in the DOM based on
+ // where the gesture ended. Update the items variable to the
+ // new order of items
+ setItems(event.detail.complete(items));
+
+ // After complete is called the items will be in the new order
+ console.log('After complete', items);
+ }
+
+ return (
+
+ {/* The reorder gesture is disabled by default, enable it to drag and drop items */}
+
+ {items.map(item =>
+
+
+ Item { item }
+
+
+
+ )}
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/reorder/updating-data/vue.md b/static/usage/v6/reorder/updating-data/vue.md
new file mode 100644
index 00000000000..024fa130469
--- /dev/null
+++ b/static/usage/v6/reorder/updating-data/vue.md
@@ -0,0 +1,42 @@
+```html
+
+
+
+
+
+
+ Item {{ item }}
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/reorder/wrapper/angular/example_component_html.md b/static/usage/v6/reorder/wrapper/angular/example_component_html.md
new file mode 100644
index 00000000000..acc62e86b49
--- /dev/null
+++ b/static/usage/v6/reorder/wrapper/angular/example_component_html.md
@@ -0,0 +1,47 @@
+```html
+
+
+
+
+
+
+
+ Item 1
+
+
+
+
+
+
+
+ Item 2
+
+
+
+
+
+
+
+ Item 3
+
+
+
+
+
+
+
+ Item 4
+
+
+
+
+
+
+
+ Item 5
+
+
+
+
+
+```
diff --git a/static/usage/v6/reorder/wrapper/angular/example_component_ts.md b/static/usage/v6/reorder/wrapper/angular/example_component_ts.md
new file mode 100644
index 00000000000..6fdf85ed614
--- /dev/null
+++ b/static/usage/v6/reorder/wrapper/angular/example_component_ts.md
@@ -0,0 +1,22 @@
+```ts
+import { Component } from '@angular/core';
+
+import { ItemReorderEventDetail } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html'
+})
+export class ExampleComponent {
+ handleReorder(ev: CustomEvent) {
+ // The `from` and `to` properties contain the index of the item
+ // when the drag started and ended, respectively
+ console.log('Dragged from index', ev.detail.from, 'to', ev.detail.to);
+
+ // Finish the reorder and position the item in the DOM based on
+ // where the gesture ended. This method can also be called directly
+ // by the reorder group
+ ev.detail.complete();
+ }
+}
+```
diff --git a/static/usage/v6/reorder/wrapper/demo.html b/static/usage/v6/reorder/wrapper/demo.html
new file mode 100644
index 00000000000..6bf8b66760b
--- /dev/null
+++ b/static/usage/v6/reorder/wrapper/demo.html
@@ -0,0 +1,88 @@
+
+
+
+
+
+
+ Reorder
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Item 1
+
+
+
+
+
+
+
+ Item 2
+
+
+
+
+
+
+
+ Item 3
+
+
+
+
+
+
+
+ Item 4
+
+
+
+
+
+
+
+ Item 5
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/reorder/wrapper/index.md b/static/usage/v6/reorder/wrapper/index.md
new file mode 100644
index 00000000000..e598b393527
--- /dev/null
+++ b/static/usage/v6/reorder/wrapper/index.md
@@ -0,0 +1,25 @@
+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_example_component_ts from './angular/example_component_ts.md';
+import angular_example_component_html from './angular/example_component_html.md';
+
+
diff --git a/static/usage/v6/reorder/wrapper/javascript.md b/static/usage/v6/reorder/wrapper/javascript.md
new file mode 100644
index 00000000000..38d112c30fb
--- /dev/null
+++ b/static/usage/v6/reorder/wrapper/javascript.md
@@ -0,0 +1,61 @@
+```html
+
+
+
+
+
+
+ Item 1
+
+
+
+
+
+
+
+ Item 2
+
+
+
+
+
+
+
+ Item 3
+
+
+
+
+
+
+
+ Item 4
+
+
+
+
+
+
+
+ Item 5
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/reorder/wrapper/react.md b/static/usage/v6/reorder/wrapper/react.md
new file mode 100644
index 00000000000..8abaf724dfa
--- /dev/null
+++ b/static/usage/v6/reorder/wrapper/react.md
@@ -0,0 +1,65 @@
+```tsx
+import React from 'react';
+import { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, ItemReorderEventDetail } from '@ionic/react';
+
+function Example() {
+ function handleReorder(event: CustomEvent) {
+ // The `from` and `to` properties contain the index of the item
+ // when the drag started and ended, respectively
+ console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
+
+ // Finish the reorder and position the item in the DOM based on
+ // where the gesture ended. This method can also be called directly
+ // by the reorder group
+ event.detail.complete();
+ }
+
+ return (
+
+ {/* The reorder gesture is disabled by default, enable it to drag and drop items */}
+
+
+
+
+ Item 1
+
+
+
+
+
+
+
+ Item 2
+
+
+
+
+
+
+
+ Item 3
+
+
+
+
+
+
+
+ Item 4
+
+
+
+
+
+
+
+ Item 5
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/reorder/wrapper/vue.md b/static/usage/v6/reorder/wrapper/vue.md
new file mode 100644
index 00000000000..d0c732c7d39
--- /dev/null
+++ b/static/usage/v6/reorder/wrapper/vue.md
@@ -0,0 +1,71 @@
+```html
+
+
+
+
+
+
+
+ Item 1
+
+
+
+
+
+
+
+ Item 2
+
+
+
+
+
+
+
+ Item 3
+
+
+
+
+
+
+
+ Item 4
+
+
+
+
+
+
+
+ Item 5
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/ripple-effect/basic/angular/example_component_css.md b/static/usage/v6/ripple-effect/basic/angular/example_component_css.md
new file mode 100644
index 00000000000..792bc105ff8
--- /dev/null
+++ b/static/usage/v6/ripple-effect/basic/angular/example_component_css.md
@@ -0,0 +1,43 @@
+```css
+.wrapper {
+ display: flex;
+ flex-wrap: wrap;
+
+ align-items: center;
+ justify-content: space-between;
+ text-align: center;
+
+ height: 300px;
+ width: 300px;
+
+ margin: 0 auto;
+}
+
+b {
+ width: 100%;
+}
+
+.ripple-parent {
+ position: relative;
+ overflow: hidden;
+
+ border: 1px solid #ddd;
+}
+
+.rectangle {
+ width: 300px;
+ height: 150px;
+}
+
+.rounded-rectangle {
+ width: 185px;
+ height: 65px;
+ border-radius: 8px;
+}
+
+.circle {
+ width: 90px;
+ height: 90px;
+ border-radius: 50%;
+}
+```
diff --git a/static/usage/v6/ripple-effect/basic/angular/example_component_html.md b/static/usage/v6/ripple-effect/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..f46a434abac
--- /dev/null
+++ b/static/usage/v6/ripple-effect/basic/angular/example_component_html.md
@@ -0,0 +1,17 @@
+```html
+
+
Click on a shape to see the ripple
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Click on a shape to see the ripple
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Click on a shape to see the ripple
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Click on a shape to see the ripple
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Click on a shape to see the ripple
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Click on a shape to see the ripple
+
+
+ Custom Parent Color
+
+
+
+
+ Custom Ripple Color
+
+
+
+
+
Click on a shape to see the ripple
+
+
+ Custom Parent Color
+
+
+
+
+ Custom Ripple Color
+
+
+
+
+
Click on a shape to see the ripple
+
+
+ Custom Parent Color
+
+
+
+
+ Custom Ripple Color
+
+
+
+
Click on a shape to see the ripple
+
+
+ Custom Parent Color
+
+
+
+
+ Custom Ripple Color
+
+
+
+
Click on a shape to see the ripple
+
+
+ Custom Parent Color
+
+
+
+
+ Custom Ripple Color
+
+
+
+
Click on a shape to see the ripple
+
+
+ Bounded
+
+
+
+
+ Unbounded
+
+
+
+
+
Click on a shape to see the ripple
+
+
+ Bounded
+
+
+
+
+ Unbounded
+
+
+
+
+
Click on a shape to see the ripple
+
+
+ Bounded
+
+
+
+
+ Unbounded
+
+
+
+
Click on a shape to see the ripple
+
+
+ Bounded
+
+
+
+
+ Unbounded
+
+
+
+
Click on a shape to see the ripple
+
+
+ Bounded
+
+
+
+
+ Unbounded
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/searchbar/basic/index.md b/static/usage/v6/searchbar/basic/index.md
new file mode 100644
index 00000000000..b61097ef839
--- /dev/null
+++ b/static/usage/v6/searchbar/basic/index.md
@@ -0,0 +1,13 @@
+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/v6/searchbar/basic/javascript.md b/static/usage/v6/searchbar/basic/javascript.md
new file mode 100644
index 00000000000..610e6556428
--- /dev/null
+++ b/static/usage/v6/searchbar/basic/javascript.md
@@ -0,0 +1,7 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v6/searchbar/basic/react.md b/static/usage/v6/searchbar/basic/react.md
new file mode 100644
index 00000000000..b0a3d625855
--- /dev/null
+++ b/static/usage/v6/searchbar/basic/react.md
@@ -0,0 +1,17 @@
+```tsx
+import React from 'react';
+import { IonSearchbar } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/searchbar/basic/vue.md b/static/usage/v6/searchbar/basic/vue.md
new file mode 100644
index 00000000000..f50a9cb5a5f
--- /dev/null
+++ b/static/usage/v6/searchbar/basic/vue.md
@@ -0,0 +1,18 @@
+```html
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/searchbar/cancel-button/angular.md b/static/usage/v6/searchbar/cancel-button/angular.md
new file mode 100644
index 00000000000..094e4d63193
--- /dev/null
+++ b/static/usage/v6/searchbar/cancel-button/angular.md
@@ -0,0 +1,6 @@
+```html
+
+
+
+
+```
diff --git a/static/usage/v6/searchbar/cancel-button/demo.html b/static/usage/v6/searchbar/cancel-button/demo.html
new file mode 100644
index 00000000000..ebfef12609b
--- /dev/null
+++ b/static/usage/v6/searchbar/cancel-button/demo.html
@@ -0,0 +1,34 @@
+
+
+
+
+
+
+ Searchbar
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/searchbar/cancel-button/index.md b/static/usage/v6/searchbar/cancel-button/index.md
new file mode 100644
index 00000000000..4ad2c30b731
--- /dev/null
+++ b/static/usage/v6/searchbar/cancel-button/index.md
@@ -0,0 +1,13 @@
+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/v6/searchbar/cancel-button/javascript.md b/static/usage/v6/searchbar/cancel-button/javascript.md
new file mode 100644
index 00000000000..094e4d63193
--- /dev/null
+++ b/static/usage/v6/searchbar/cancel-button/javascript.md
@@ -0,0 +1,6 @@
+```html
+
+
+
+
+```
diff --git a/static/usage/v6/searchbar/cancel-button/react.md b/static/usage/v6/searchbar/cancel-button/react.md
new file mode 100644
index 00000000000..5f312e34aa0
--- /dev/null
+++ b/static/usage/v6/searchbar/cancel-button/react.md
@@ -0,0 +1,17 @@
+```tsx
+import React from 'react';
+import { IonSearchbar } from '@ionic/react';
+import { trash } from 'ionicons/icons';
+
+function Example() {
+ return (
+ <>
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/searchbar/cancel-button/vue.md b/static/usage/v6/searchbar/cancel-button/vue.md
new file mode 100644
index 00000000000..a56a1451692
--- /dev/null
+++ b/static/usage/v6/searchbar/cancel-button/vue.md
@@ -0,0 +1,21 @@
+```html
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/searchbar/clear-button/angular.md b/static/usage/v6/searchbar/clear-button/angular.md
new file mode 100644
index 00000000000..fa10e4b90d9
--- /dev/null
+++ b/static/usage/v6/searchbar/clear-button/angular.md
@@ -0,0 +1,6 @@
+```html
+
+
+
+
+```
diff --git a/static/usage/v6/searchbar/clear-button/demo.html b/static/usage/v6/searchbar/clear-button/demo.html
new file mode 100644
index 00000000000..e85b497b349
--- /dev/null
+++ b/static/usage/v6/searchbar/clear-button/demo.html
@@ -0,0 +1,33 @@
+
+
+
+
+
+
+ Searchbar
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/searchbar/clear-button/index.md b/static/usage/v6/searchbar/clear-button/index.md
new file mode 100644
index 00000000000..aa821ec048b
--- /dev/null
+++ b/static/usage/v6/searchbar/clear-button/index.md
@@ -0,0 +1,13 @@
+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/v6/searchbar/clear-button/javascript.md b/static/usage/v6/searchbar/clear-button/javascript.md
new file mode 100644
index 00000000000..fa10e4b90d9
--- /dev/null
+++ b/static/usage/v6/searchbar/clear-button/javascript.md
@@ -0,0 +1,6 @@
+```html
+
+
+
+
+```
diff --git a/static/usage/v6/searchbar/clear-button/react.md b/static/usage/v6/searchbar/clear-button/react.md
new file mode 100644
index 00000000000..9f21f1a1d84
--- /dev/null
+++ b/static/usage/v6/searchbar/clear-button/react.md
@@ -0,0 +1,17 @@
+```tsx
+import React from 'react';
+import { IonSearchbar } from '@ionic/react';
+import { trashBin } from 'ionicons/icons';
+
+function Example() {
+ return (
+ <>
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/searchbar/clear-button/vue.md b/static/usage/v6/searchbar/clear-button/vue.md
new file mode 100644
index 00000000000..b778093f372
--- /dev/null
+++ b/static/usage/v6/searchbar/clear-button/vue.md
@@ -0,0 +1,21 @@
+```html
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/searchbar/debounce/angular/example_component_html.md b/static/usage/v6/searchbar/debounce/angular/example_component_html.md
new file mode 100644
index 00000000000..5a554a24551
--- /dev/null
+++ b/static/usage/v6/searchbar/debounce/angular/example_component_html.md
@@ -0,0 +1,9 @@
+```html
+
+
+
+
+ {{ result }}
+
+
+```
diff --git a/static/usage/v6/searchbar/debounce/angular/example_component_ts.md b/static/usage/v6/searchbar/debounce/angular/example_component_ts.md
new file mode 100644
index 00000000000..1d8215ef1a5
--- /dev/null
+++ b/static/usage/v6/searchbar/debounce/angular/example_component_ts.md
@@ -0,0 +1,17 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ public data = ['Amsterdam', 'Buenos Aires', 'Cairo', 'Geneva', 'Hong Kong', 'Istanbul', 'London', 'Madrid', 'New York', 'Panama City'];
+ public results = [...this.data];
+
+ handleChange(event) {
+ const query = event.target.value.toLowerCase();
+ this.results = this.data.filter(d => d.toLowerCase().indexOf(query) > -1);
+ }
+}
+```
diff --git a/static/usage/v6/searchbar/debounce/demo.html b/static/usage/v6/searchbar/debounce/demo.html
new file mode 100644
index 00000000000..ac43a663b20
--- /dev/null
+++ b/static/usage/v6/searchbar/debounce/demo.html
@@ -0,0 +1,64 @@
+
+
+
+
+
+
+ Searchbar
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/searchbar/debounce/index.md b/static/usage/v6/searchbar/debounce/index.md
new file mode 100644
index 00000000000..d161cc8b140
--- /dev/null
+++ b/static/usage/v6/searchbar/debounce/index.md
@@ -0,0 +1,26 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+
+import react from './react.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/v6/searchbar/debounce/javascript.md b/static/usage/v6/searchbar/debounce/javascript.md
new file mode 100644
index 00000000000..6a74446f699
--- /dev/null
+++ b/static/usage/v6/searchbar/debounce/javascript.md
@@ -0,0 +1,37 @@
+```html
+
+
+
+
+```
diff --git a/static/usage/v6/searchbar/debounce/react.md b/static/usage/v6/searchbar/debounce/react.md
new file mode 100644
index 00000000000..f46ce1a6da5
--- /dev/null
+++ b/static/usage/v6/searchbar/debounce/react.md
@@ -0,0 +1,30 @@
+```tsx
+import React, { useState } from 'react';
+import { IonItem, IonList, IonSearchbar } from '@ionic/react';
+
+function Example() {
+ const data = ['Amsterdam', 'Buenos Aires', 'Cairo', 'Geneva', 'Hong Kong', 'Istanbul', 'London', 'Madrid', 'New York', 'Panama City'];
+ let [results, setResults] = useState([...data]);
+
+ const handleChange = (ev: Event) => {
+ let query = "";
+ const target = ev.target as HTMLIonSearchbarElement;
+ if (target) query = target.value!.toLowerCase();
+
+ setResults(data.filter(d => d.toLowerCase().indexOf(query) > -1));
+ }
+
+ return (
+ <>
+ handleChange(ev)}>
+
+
+ { results.map(result => (
+ { result }
+ ))}
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/searchbar/debounce/vue.md b/static/usage/v6/searchbar/debounce/vue.md
new file mode 100644
index 00000000000..2d85d6ed2d2
--- /dev/null
+++ b/static/usage/v6/searchbar/debounce/vue.md
@@ -0,0 +1,32 @@
+```html
+
+
+
+
+
+ {{ result }}
+
+
+
+
+
+```
diff --git a/static/usage/v6/searchbar/search-icon/angular.md b/static/usage/v6/searchbar/search-icon/angular.md
new file mode 100644
index 00000000000..2a66008d0cc
--- /dev/null
+++ b/static/usage/v6/searchbar/search-icon/angular.md
@@ -0,0 +1,4 @@
+```html
+
+
+```
diff --git a/static/usage/v6/searchbar/search-icon/demo.html b/static/usage/v6/searchbar/search-icon/demo.html
new file mode 100644
index 00000000000..33e2793d25d
--- /dev/null
+++ b/static/usage/v6/searchbar/search-icon/demo.html
@@ -0,0 +1,31 @@
+
+
+
+
+
+
+ Searchbar
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/searchbar/search-icon/index.md b/static/usage/v6/searchbar/search-icon/index.md
new file mode 100644
index 00000000000..c3611623923
--- /dev/null
+++ b/static/usage/v6/searchbar/search-icon/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/v6/searchbar/search-icon/javascript.md b/static/usage/v6/searchbar/search-icon/javascript.md
new file mode 100644
index 00000000000..2a66008d0cc
--- /dev/null
+++ b/static/usage/v6/searchbar/search-icon/javascript.md
@@ -0,0 +1,4 @@
+```html
+
+
+```
diff --git a/static/usage/v6/searchbar/search-icon/react.md b/static/usage/v6/searchbar/search-icon/react.md
new file mode 100644
index 00000000000..4bb596d1e00
--- /dev/null
+++ b/static/usage/v6/searchbar/search-icon/react.md
@@ -0,0 +1,15 @@
+```tsx
+import React from 'react';
+import { IonSearchbar } from '@ionic/react';
+import { searchCircle } from 'ionicons/icons';
+
+function Example() {
+ return (
+ <>
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/searchbar/search-icon/vue.md b/static/usage/v6/searchbar/search-icon/vue.md
new file mode 100644
index 00000000000..6414acf7b2e
--- /dev/null
+++ b/static/usage/v6/searchbar/search-icon/vue.md
@@ -0,0 +1,19 @@
+```html
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/searchbar/theming/colors/angular.md b/static/usage/v6/searchbar/theming/colors/angular.md
new file mode 100644
index 00000000000..b0f0f2e533f
--- /dev/null
+++ b/static/usage/v6/searchbar/theming/colors/angular.md
@@ -0,0 +1,12 @@
+```html
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/searchbar/theming/colors/demo.html b/static/usage/v6/searchbar/theming/colors/demo.html
new file mode 100644
index 00000000000..5701010c08b
--- /dev/null
+++ b/static/usage/v6/searchbar/theming/colors/demo.html
@@ -0,0 +1,39 @@
+
+
+
+
+
+
+ Searchbar
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/searchbar/theming/colors/index.md b/static/usage/v6/searchbar/theming/colors/index.md
new file mode 100644
index 00000000000..c13f364ca20
--- /dev/null
+++ b/static/usage/v6/searchbar/theming/colors/index.md
@@ -0,0 +1,13 @@
+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/v6/searchbar/theming/colors/javascript.md b/static/usage/v6/searchbar/theming/colors/javascript.md
new file mode 100644
index 00000000000..b0f0f2e533f
--- /dev/null
+++ b/static/usage/v6/searchbar/theming/colors/javascript.md
@@ -0,0 +1,12 @@
+```html
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/searchbar/theming/colors/react.md b/static/usage/v6/searchbar/theming/colors/react.md
new file mode 100644
index 00000000000..d1c29b9cd28
--- /dev/null
+++ b/static/usage/v6/searchbar/theming/colors/react.md
@@ -0,0 +1,22 @@
+```tsx
+import React from 'react';
+import { IonSearchbar } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/searchbar/theming/colors/vue.md b/static/usage/v6/searchbar/theming/colors/vue.md
new file mode 100644
index 00000000000..ef95e690107
--- /dev/null
+++ b/static/usage/v6/searchbar/theming/colors/vue.md
@@ -0,0 +1,23 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/searchbar/theming/css-properties/angular/example_component_css.md b/static/usage/v6/searchbar/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..22aa0428b89
--- /dev/null
+++ b/static/usage/v6/searchbar/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,20 @@
+```css
+/* Scoped components require higher specificity to customize */
+ion-searchbar.custom {
+ --background: #19422d;
+ --color: #fff;
+ --placeholder-color: #fff;
+ --icon-color: #fff;
+ --clear-button-color: #fff;
+
+ --border-radius: 4px;
+}
+
+ion-searchbar.ios.custom {
+ --cancel-button-color: #19422d;
+}
+
+ion-searchbar.md.custom {
+ --cancel-button-color: #fff;
+}
+```
diff --git a/static/usage/v6/searchbar/theming/css-properties/angular/example_component_html.md b/static/usage/v6/searchbar/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..080217dcc41
--- /dev/null
+++ b/static/usage/v6/searchbar/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v6/searchbar/theming/css-properties/demo.html b/static/usage/v6/searchbar/theming/css-properties/demo.html
new file mode 100644
index 00000000000..bd168970198
--- /dev/null
+++ b/static/usage/v6/searchbar/theming/css-properties/demo.html
@@ -0,0 +1,48 @@
+
+
+
+
+
+
+ Searchbar
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/searchbar/theming/css-properties/index.md b/static/usage/v6/searchbar/theming/css-properties/index.md
new file mode 100644
index 00000000000..c6c51b8f352
--- /dev/null
+++ b/static/usage/v6/searchbar/theming/css-properties/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/v6/searchbar/theming/css-properties/javascript.md b/static/usage/v6/searchbar/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..dca643d2a52
--- /dev/null
+++ b/static/usage/v6/searchbar/theming/css-properties/javascript.md
@@ -0,0 +1,24 @@
+```html
+
+
+
+```
diff --git a/static/usage/v6/searchbar/theming/css-properties/react/main_css.md b/static/usage/v6/searchbar/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..22aa0428b89
--- /dev/null
+++ b/static/usage/v6/searchbar/theming/css-properties/react/main_css.md
@@ -0,0 +1,20 @@
+```css
+/* Scoped components require higher specificity to customize */
+ion-searchbar.custom {
+ --background: #19422d;
+ --color: #fff;
+ --placeholder-color: #fff;
+ --icon-color: #fff;
+ --clear-button-color: #fff;
+
+ --border-radius: 4px;
+}
+
+ion-searchbar.ios.custom {
+ --cancel-button-color: #19422d;
+}
+
+ion-searchbar.md.custom {
+ --cancel-button-color: #fff;
+}
+```
diff --git a/static/usage/v6/searchbar/theming/css-properties/react/main_tsx.md b/static/usage/v6/searchbar/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..4b1b527952e
--- /dev/null
+++ b/static/usage/v6/searchbar/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,13 @@
+```tsx
+import React from 'react';
+import { IonSearchbar } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/searchbar/theming/css-properties/vue.md b/static/usage/v6/searchbar/theming/css-properties/vue.md
new file mode 100644
index 00000000000..6e45e744231
--- /dev/null
+++ b/static/usage/v6/searchbar/theming/css-properties/vue.md
@@ -0,0 +1,35 @@
+```html
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/segment-button/basic/angular.md b/static/usage/v6/segment-button/basic/angular.md
new file mode 100644
index 00000000000..6f3fc0bb9ab
--- /dev/null
+++ b/static/usage/v6/segment-button/basic/angular.md
@@ -0,0 +1,25 @@
+```html
+
+
+ Default
+
+
+ Segment
+
+
+ Button
+
+
+
+
+
+ Disabled
+
+
+ Segment
+
+
+ Button
+
+
+```
diff --git a/static/usage/v6/segment-button/basic/demo.html b/static/usage/v6/segment-button/basic/demo.html
new file mode 100644
index 00000000000..280022dbc91
--- /dev/null
+++ b/static/usage/v6/segment-button/basic/demo.html
@@ -0,0 +1,56 @@
+
+
+
+
+
+
+ Segment Button
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Default
+
+
+ Segment
+
+
+ Button
+
+
+
+
+
+ Disabled
+
+
+ Segment
+
+
+ Button
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/segment-button/basic/index.md b/static/usage/v6/segment-button/basic/index.md
new file mode 100644
index 00000000000..7f655ea0adc
--- /dev/null
+++ b/static/usage/v6/segment-button/basic/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/v6/segment-button/basic/javascript.md b/static/usage/v6/segment-button/basic/javascript.md
new file mode 100644
index 00000000000..d001e59d7fc
--- /dev/null
+++ b/static/usage/v6/segment-button/basic/javascript.md
@@ -0,0 +1,25 @@
+```html
+
+
+ Default
+
+
+ Segment
+
+
+ Button
+
+
+
+
+
+ Disabled
+
+
+ Segment
+
+
+ Button
+
+
+```
diff --git a/static/usage/v6/segment-button/basic/react.md b/static/usage/v6/segment-button/basic/react.md
new file mode 100644
index 00000000000..241242412bf
--- /dev/null
+++ b/static/usage/v6/segment-button/basic/react.md
@@ -0,0 +1,35 @@
+```tsx
+import React from 'react';
+import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+ Default
+
+
+ Segment
+
+
+ Button
+
+
+
+
+
+ Disabled
+
+
+ Segment
+
+
+ Button
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/segment-button/basic/vue.md b/static/usage/v6/segment-button/basic/vue.md
new file mode 100644
index 00000000000..79fd032d7ca
--- /dev/null
+++ b/static/usage/v6/segment-button/basic/vue.md
@@ -0,0 +1,36 @@
+```html
+
+
+
+ Default
+
+
+ Segment
+
+
+ Button
+
+
+
+
+
+ Disabled
+
+
+ Segment
+
+
+ Button
+
+
+
+
+
+```
diff --git a/static/usage/v6/segment-button/layout/angular.md b/static/usage/v6/segment-button/layout/angular.md
new file mode 100644
index 00000000000..3f634915d9b
--- /dev/null
+++ b/static/usage/v6/segment-button/layout/angular.md
@@ -0,0 +1,73 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Call
+
+
+
+ Heart
+
+
+
+ Pin
+
+
+
+
+
+
+ Call
+
+
+
+ Heart
+
+
+
+ Pin
+
+
+
+
+
+
+ Call
+
+
+
+ Heart
+
+
+
+ Pin
+
+
+
+
+
+
+ Call
+
+
+
+ Heart
+
+
+
+ Pin
+
+
+
+```
diff --git a/static/usage/v6/segment-button/layout/demo.html b/static/usage/v6/segment-button/layout/demo.html
new file mode 100644
index 00000000000..83bd89fd250
--- /dev/null
+++ b/static/usage/v6/segment-button/layout/demo.html
@@ -0,0 +1,104 @@
+
+
+
+
+
+
+ Segment Button
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Call
+
+
+
+ Heart
+
+
+
+ Pin
+
+
+
+
+
+
+ Call
+
+
+
+ Heart
+
+
+
+ Pin
+
+
+
+
+
+
+ Call
+
+
+
+ Heart
+
+
+
+ Pin
+
+
+
+
+
+
+ Call
+
+
+
+ Heart
+
+
+
+ Pin
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/segment-button/layout/index.md b/static/usage/v6/segment-button/layout/index.md
new file mode 100644
index 00000000000..5ddcc6a17b8
--- /dev/null
+++ b/static/usage/v6/segment-button/layout/index.md
@@ -0,0 +1,13 @@
+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/v6/segment-button/layout/javascript.md b/static/usage/v6/segment-button/layout/javascript.md
new file mode 100644
index 00000000000..3f634915d9b
--- /dev/null
+++ b/static/usage/v6/segment-button/layout/javascript.md
@@ -0,0 +1,73 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Call
+
+
+
+ Heart
+
+
+
+ Pin
+
+
+
+
+
+
+ Call
+
+
+
+ Heart
+
+
+
+ Pin
+
+
+
+
+
+
+ Call
+
+
+
+ Heart
+
+
+
+ Pin
+
+
+
+
+
+
+ Call
+
+
+
+ Heart
+
+
+
+ Pin
+
+
+
+```
diff --git a/static/usage/v6/segment-button/layout/react.md b/static/usage/v6/segment-button/layout/react.md
new file mode 100644
index 00000000000..9b6c44ac073
--- /dev/null
+++ b/static/usage/v6/segment-button/layout/react.md
@@ -0,0 +1,84 @@
+```tsx
+import React from 'react';
+import { IonIcon, IonLabel, IonSegment, IonSegmentButton } from '@ionic/react';
+import { call, heart, pin } from 'ionicons/icons';
+
+function Example() {
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Call
+
+
+
+ Heart
+
+
+
+ Pin
+
+
+
+
+
+
+ Call
+
+
+
+ Heart
+
+
+
+ Pin
+
+
+
+
+
+
+ Call
+
+
+
+ Heart
+
+
+
+ Pin
+
+
+
+
+
+
+ Call
+
+
+
+ Heart
+
+
+
+ Pin
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/segment-button/layout/vue.md b/static/usage/v6/segment-button/layout/vue.md
new file mode 100644
index 00000000000..d3c60a4004d
--- /dev/null
+++ b/static/usage/v6/segment-button/layout/vue.md
@@ -0,0 +1,88 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Call
+
+
+
+ Heart
+
+
+
+ Pin
+
+
+
+
+
+
+ Call
+
+
+
+ Heart
+
+
+
+ Pin
+
+
+
+
+
+
+ Call
+
+
+
+ Heart
+
+
+
+ Pin
+
+
+
+
+
+
+ Call
+
+
+
+ Heart
+
+
+
+ Pin
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/segment-button/theming/css-properties/angular/example_component_css.md b/static/usage/v6/segment-button/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..a4e8f04f2b0
--- /dev/null
+++ b/static/usage/v6/segment-button/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,19 @@
+```css
+ion-segment-button {
+ --indicator-color: #08a391;
+}
+
+/* Material Design styles */
+ion-segment-button.md {
+ --color: #000;
+ --color-checked: #08a391;
+ --indicator-height: 4px;
+}
+
+/* iOS styles */
+ion-segment-button.ios {
+ --color: #08a391;
+ --color-checked: #fff;
+ --border-radius: 20px;
+}
+```
diff --git a/static/usage/v6/segment-button/theming/css-properties/angular/example_component_html.md b/static/usage/v6/segment-button/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..4ab86c2cdda
--- /dev/null
+++ b/static/usage/v6/segment-button/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,13 @@
+```html
+
+
+ Custom
+
+
+ Segment
+
+
+ Buttons
+
+
+```
diff --git a/static/usage/v6/segment-button/theming/css-properties/demo.html b/static/usage/v6/segment-button/theming/css-properties/demo.html
new file mode 100644
index 00000000000..144ecaa5639
--- /dev/null
+++ b/static/usage/v6/segment-button/theming/css-properties/demo.html
@@ -0,0 +1,59 @@
+
+
+
+
+
+
+ Segment Button
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Custom
+
+
+ Segment
+
+
+ Buttons
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/segment-button/theming/css-properties/index.md b/static/usage/v6/segment-button/theming/css-properties/index.md
new file mode 100644
index 00000000000..3bfdd96bb1d
--- /dev/null
+++ b/static/usage/v6/segment-button/theming/css-properties/index.md
@@ -0,0 +1,32 @@
+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/v6/segment-button/theming/css-properties/javascript.md b/static/usage/v6/segment-button/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..f8ebaae2f19
--- /dev/null
+++ b/static/usage/v6/segment-button/theming/css-properties/javascript.md
@@ -0,0 +1,33 @@
+```html
+
+
+
+
+ Custom
+
+
+ Segment
+
+
+ Buttons
+
+
+```
diff --git a/static/usage/v6/segment-button/theming/css-properties/react/main_css.md b/static/usage/v6/segment-button/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..a4e8f04f2b0
--- /dev/null
+++ b/static/usage/v6/segment-button/theming/css-properties/react/main_css.md
@@ -0,0 +1,19 @@
+```css
+ion-segment-button {
+ --indicator-color: #08a391;
+}
+
+/* Material Design styles */
+ion-segment-button.md {
+ --color: #000;
+ --color-checked: #08a391;
+ --indicator-height: 4px;
+}
+
+/* iOS styles */
+ion-segment-button.ios {
+ --color: #08a391;
+ --color-checked: #fff;
+ --border-radius: 20px;
+}
+```
diff --git a/static/usage/v6/segment-button/theming/css-properties/react/main_tsx.md b/static/usage/v6/segment-button/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..2459d01206b
--- /dev/null
+++ b/static/usage/v6/segment-button/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,23 @@
+```tsx
+import React from 'react';
+import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+
+
+ Custom
+
+
+ Segment
+
+
+ Buttons
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/segment-button/theming/css-properties/vue.md b/static/usage/v6/segment-button/theming/css-properties/vue.md
new file mode 100644
index 00000000000..50c99688335
--- /dev/null
+++ b/static/usage/v6/segment-button/theming/css-properties/vue.md
@@ -0,0 +1,44 @@
+```html
+
+
+
+ Custom
+
+
+ Segment
+
+
+ Buttons
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/segment-button/theming/css-shadow-parts/angular/example_component_css.md b/static/usage/v6/segment-button/theming/css-shadow-parts/angular/example_component_css.md
new file mode 100644
index 00000000000..fde253b69f9
--- /dev/null
+++ b/static/usage/v6/segment-button/theming/css-shadow-parts/angular/example_component_css.md
@@ -0,0 +1,31 @@
+```css
+ion-segment-button::part(indicator-background) {
+ background: #08a391;
+}
+
+/* Material Design styles */
+ion-segment-button.md::part(native) {
+ color: #000;
+}
+
+.segment-button-checked.md::part(native) {
+ color: #08a391;
+}
+
+ion-segment-button.md::part(indicator-background) {
+ height: 4px;
+}
+
+/* iOS styles */
+ion-segment-button.ios::part(native) {
+ color: #08a391;
+}
+
+.segment-button-checked.ios::part(native) {
+ color: #fff;
+}
+
+ion-segment-button.ios::part(indicator-background) {
+ border-radius: 20px;
+}
+```
diff --git a/static/usage/v6/segment-button/theming/css-shadow-parts/angular/example_component_html.md b/static/usage/v6/segment-button/theming/css-shadow-parts/angular/example_component_html.md
new file mode 100644
index 00000000000..4ab86c2cdda
--- /dev/null
+++ b/static/usage/v6/segment-button/theming/css-shadow-parts/angular/example_component_html.md
@@ -0,0 +1,13 @@
+```html
+
+
+ Custom
+
+
+ Segment
+
+
+ Buttons
+
+
+```
diff --git a/static/usage/v6/segment-button/theming/css-shadow-parts/demo.html b/static/usage/v6/segment-button/theming/css-shadow-parts/demo.html
new file mode 100644
index 00000000000..c81886b5b20
--- /dev/null
+++ b/static/usage/v6/segment-button/theming/css-shadow-parts/demo.html
@@ -0,0 +1,71 @@
+
+
+
+
+
+
+ Segment Button
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Custom
+
+
+ Segment
+
+
+ Buttons
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/segment-button/theming/css-shadow-parts/index.md b/static/usage/v6/segment-button/theming/css-shadow-parts/index.md
new file mode 100644
index 00000000000..7008dbc3c4c
--- /dev/null
+++ b/static/usage/v6/segment-button/theming/css-shadow-parts/index.md
@@ -0,0 +1,32 @@
+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/v6/segment-button/theming/css-shadow-parts/javascript.md b/static/usage/v6/segment-button/theming/css-shadow-parts/javascript.md
new file mode 100644
index 00000000000..102ba6ccd19
--- /dev/null
+++ b/static/usage/v6/segment-button/theming/css-shadow-parts/javascript.md
@@ -0,0 +1,45 @@
+```html
+
+
+
+
+ Custom
+
+
+ Segment
+
+
+ Buttons
+
+
+```
diff --git a/static/usage/v6/segment-button/theming/css-shadow-parts/react/main_css.md b/static/usage/v6/segment-button/theming/css-shadow-parts/react/main_css.md
new file mode 100644
index 00000000000..fde253b69f9
--- /dev/null
+++ b/static/usage/v6/segment-button/theming/css-shadow-parts/react/main_css.md
@@ -0,0 +1,31 @@
+```css
+ion-segment-button::part(indicator-background) {
+ background: #08a391;
+}
+
+/* Material Design styles */
+ion-segment-button.md::part(native) {
+ color: #000;
+}
+
+.segment-button-checked.md::part(native) {
+ color: #08a391;
+}
+
+ion-segment-button.md::part(indicator-background) {
+ height: 4px;
+}
+
+/* iOS styles */
+ion-segment-button.ios::part(native) {
+ color: #08a391;
+}
+
+.segment-button-checked.ios::part(native) {
+ color: #fff;
+}
+
+ion-segment-button.ios::part(indicator-background) {
+ border-radius: 20px;
+}
+```
diff --git a/static/usage/v6/segment-button/theming/css-shadow-parts/react/main_tsx.md b/static/usage/v6/segment-button/theming/css-shadow-parts/react/main_tsx.md
new file mode 100644
index 00000000000..2459d01206b
--- /dev/null
+++ b/static/usage/v6/segment-button/theming/css-shadow-parts/react/main_tsx.md
@@ -0,0 +1,23 @@
+```tsx
+import React from 'react';
+import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+
+
+ Custom
+
+
+ Segment
+
+
+ Buttons
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/segment-button/theming/css-shadow-parts/vue.md b/static/usage/v6/segment-button/theming/css-shadow-parts/vue.md
new file mode 100644
index 00000000000..911d8b7854e
--- /dev/null
+++ b/static/usage/v6/segment-button/theming/css-shadow-parts/vue.md
@@ -0,0 +1,56 @@
+```html
+
+
+
+ Custom
+
+
+ Segment
+
+
+ Buttons
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/segment/basic/angular.md b/static/usage/v6/segment/basic/angular.md
new file mode 100644
index 00000000000..c497151f125
--- /dev/null
+++ b/static/usage/v6/segment/basic/angular.md
@@ -0,0 +1,19 @@
+```html
+
+
+ Default
+
+
+ Segment
+
+
+
+
+
+ Disabled
+
+
+ Segment
+
+
+```
diff --git a/static/usage/v6/segment/basic/demo.html b/static/usage/v6/segment/basic/demo.html
new file mode 100644
index 00000000000..886c2aafef7
--- /dev/null
+++ b/static/usage/v6/segment/basic/demo.html
@@ -0,0 +1,50 @@
+
+
+
+
+
+
+ Segment
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Default
+
+
+ Segment
+
+
+
+
+
+ Disabled
+
+
+ Segment
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/segment/basic/index.md b/static/usage/v6/segment/basic/index.md
new file mode 100644
index 00000000000..6486c6e66f6
--- /dev/null
+++ b/static/usage/v6/segment/basic/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/v6/segment/basic/javascript.md b/static/usage/v6/segment/basic/javascript.md
new file mode 100644
index 00000000000..91d67d8dca7
--- /dev/null
+++ b/static/usage/v6/segment/basic/javascript.md
@@ -0,0 +1,19 @@
+```html
+
+
+ Default
+
+
+ Segment
+
+
+
+
+
+ Disabled
+
+
+ Segment
+
+
+```
diff --git a/static/usage/v6/segment/basic/react.md b/static/usage/v6/segment/basic/react.md
new file mode 100644
index 00000000000..bb5c402112f
--- /dev/null
+++ b/static/usage/v6/segment/basic/react.md
@@ -0,0 +1,29 @@
+```tsx
+import React from 'react';
+import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+ Default
+
+
+ Segment
+
+
+
+
+
+ Disabled
+
+
+ Segment
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/segment/basic/vue.md b/static/usage/v6/segment/basic/vue.md
new file mode 100644
index 00000000000..7252ce56f2f
--- /dev/null
+++ b/static/usage/v6/segment/basic/vue.md
@@ -0,0 +1,30 @@
+```html
+
+
+
+ Default
+
+
+ Segment
+
+
+
+
+
+ Disabled
+
+
+ Segment
+
+
+
+
+
+```
diff --git a/static/usage/v6/segment/scrollable/angular.md b/static/usage/v6/segment/scrollable/angular.md
new file mode 100644
index 00000000000..bbcc03848ec
--- /dev/null
+++ b/static/usage/v6/segment/scrollable/angular.md
@@ -0,0 +1,34 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/segment/scrollable/demo.html b/static/usage/v6/segment/scrollable/demo.html
new file mode 100644
index 00000000000..b8f90118667
--- /dev/null
+++ b/static/usage/v6/segment/scrollable/demo.html
@@ -0,0 +1,66 @@
+
+
+
+
+
+
+ Segment
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/segment/scrollable/index.md b/static/usage/v6/segment/scrollable/index.md
new file mode 100644
index 00000000000..de206ca652a
--- /dev/null
+++ b/static/usage/v6/segment/scrollable/index.md
@@ -0,0 +1,13 @@
+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/v6/segment/scrollable/javascript.md b/static/usage/v6/segment/scrollable/javascript.md
new file mode 100644
index 00000000000..dfc630d1d46
--- /dev/null
+++ b/static/usage/v6/segment/scrollable/javascript.md
@@ -0,0 +1,34 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/segment/scrollable/react.md b/static/usage/v6/segment/scrollable/react.md
new file mode 100644
index 00000000000..61d304989bb
--- /dev/null
+++ b/static/usage/v6/segment/scrollable/react.md
@@ -0,0 +1,43 @@
+```tsx
+import React from 'react';
+import { IonIcon, IonSegment, IonSegmentButton } from '@ionic/react';
+import { home, heart, pin, star, call, globe, basket, barbell, trash, person } from 'ionicons/icons';
+
+function Example() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/segment/scrollable/vue.md b/static/usage/v6/segment/scrollable/vue.md
new file mode 100644
index 00000000000..c3afaf67ba2
--- /dev/null
+++ b/static/usage/v6/segment/scrollable/vue.md
@@ -0,0 +1,51 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/segment/theming/colors/angular.md b/static/usage/v6/segment/theming/colors/angular.md
new file mode 100644
index 00000000000..4787acc7ba3
--- /dev/null
+++ b/static/usage/v6/segment/theming/colors/angular.md
@@ -0,0 +1,82 @@
+```html
+
+
+ Default
+
+
+ Segment
+
+
+
+
+ Primary
+
+
+ Segment
+
+
+
+
+ Secondary
+
+
+ Segment
+
+
+
+
+ Tertiary
+
+
+ Segment
+
+
+
+
+ Success
+
+
+ Segment
+
+
+
+
+ Warning
+
+
+ Segment
+
+
+
+
+ Danger
+
+
+ Segment
+
+
+
+
+ Light
+
+
+ Segment
+
+
+
+
+ Medium
+
+
+ Segment
+
+
+
+
+ Dark
+
+
+ Segment
+
+
+```
diff --git a/static/usage/v6/segment/theming/colors/demo.html b/static/usage/v6/segment/theming/colors/demo.html
new file mode 100644
index 00000000000..0f7579af2cd
--- /dev/null
+++ b/static/usage/v6/segment/theming/colors/demo.html
@@ -0,0 +1,113 @@
+
+
+
+
+
+
+ Segment
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Default
+
+
+ Segment
+
+
+
+
+ Primary
+
+
+ Segment
+
+
+
+
+ Secondary
+
+
+ Segment
+
+
+
+
+ Tertiary
+
+
+ Segment
+
+
+
+
+ Success
+
+
+ Segment
+
+
+
+
+ Warning
+
+
+ Segment
+
+
+
+
+ Danger
+
+
+ Segment
+
+
+
+
+ Light
+
+
+ Segment
+
+
+
+
+ Medium
+
+
+ Segment
+
+
+
+
+ Dark
+
+
+ Segment
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/segment/theming/colors/index.md b/static/usage/v6/segment/theming/colors/index.md
new file mode 100644
index 00000000000..1896c85f8f3
--- /dev/null
+++ b/static/usage/v6/segment/theming/colors/index.md
@@ -0,0 +1,13 @@
+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/v6/segment/theming/colors/javascript.md b/static/usage/v6/segment/theming/colors/javascript.md
new file mode 100644
index 00000000000..4787acc7ba3
--- /dev/null
+++ b/static/usage/v6/segment/theming/colors/javascript.md
@@ -0,0 +1,82 @@
+```html
+
+
+ Default
+
+
+ Segment
+
+
+
+
+ Primary
+
+
+ Segment
+
+
+
+
+ Secondary
+
+
+ Segment
+
+
+
+
+ Tertiary
+
+
+ Segment
+
+
+
+
+ Success
+
+
+ Segment
+
+
+
+
+ Warning
+
+
+ Segment
+
+
+
+
+ Danger
+
+
+ Segment
+
+
+
+
+ Light
+
+
+ Segment
+
+
+
+
+ Medium
+
+
+ Segment
+
+
+
+
+ Dark
+
+
+ Segment
+
+
+```
diff --git a/static/usage/v6/segment/theming/colors/react.md b/static/usage/v6/segment/theming/colors/react.md
new file mode 100644
index 00000000000..81c799bbbec
--- /dev/null
+++ b/static/usage/v6/segment/theming/colors/react.md
@@ -0,0 +1,92 @@
+```tsx
+import React from 'react';
+import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+ Default
+
+
+ Segment
+
+
+
+
+ Primary
+
+
+ Segment
+
+
+
+
+ Secondary
+
+
+ Segment
+
+
+
+
+ Tertiary
+
+
+ Segment
+
+
+
+
+ Success
+
+
+ Segment
+
+
+
+
+ Warning
+
+
+ Segment
+
+
+
+
+ Danger
+
+
+ Segment
+
+
+
+
+ Light
+
+
+ Segment
+
+
+
+
+ Medium
+
+
+ Segment
+
+
+
+
+ Dark
+
+
+ Segment
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/segment/theming/colors/vue.md b/static/usage/v6/segment/theming/colors/vue.md
new file mode 100644
index 00000000000..fcce8cce913
--- /dev/null
+++ b/static/usage/v6/segment/theming/colors/vue.md
@@ -0,0 +1,93 @@
+```html
+
+
+
+ Default
+
+
+ Segment
+
+
+
+
+ Primary
+
+
+ Segment
+
+
+
+
+ Secondary
+
+
+ Segment
+
+
+
+
+ Tertiary
+
+
+ Segment
+
+
+
+
+ Success
+
+
+ Segment
+
+
+
+
+ Warning
+
+
+ Segment
+
+
+
+
+ Danger
+
+
+ Segment
+
+
+
+
+ Light
+
+
+ Segment
+
+
+
+
+ Medium
+
+
+ Segment
+
+
+
+
+ Dark
+
+
+ Segment
+
+
+
+
+
+```
diff --git a/static/usage/v6/segment/theming/css-properties/angular/example_component_css.md b/static/usage/v6/segment/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..8ecca25270d
--- /dev/null
+++ b/static/usage/v6/segment/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,5 @@
+```css
+ion-segment {
+ --background: #54dc98;
+}
+```
diff --git a/static/usage/v6/segment/theming/css-properties/angular/example_component_html.md b/static/usage/v6/segment/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..01aac10305d
--- /dev/null
+++ b/static/usage/v6/segment/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,10 @@
+```html
+
+
+ Custom
+
+
+ Segment
+
+
+```
diff --git a/static/usage/v6/segment/theming/css-properties/demo.html b/static/usage/v6/segment/theming/css-properties/demo.html
new file mode 100644
index 00000000000..d6d92fbd835
--- /dev/null
+++ b/static/usage/v6/segment/theming/css-properties/demo.html
@@ -0,0 +1,42 @@
+
+
+
+
+
+
+ Note
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Custom
+
+
+ Segment
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/segment/theming/css-properties/index.md b/static/usage/v6/segment/theming/css-properties/index.md
new file mode 100644
index 00000000000..f8dfa374ba9
--- /dev/null
+++ b/static/usage/v6/segment/theming/css-properties/index.md
@@ -0,0 +1,32 @@
+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/v6/segment/theming/css-properties/javascript.md b/static/usage/v6/segment/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..b5ae092adeb
--- /dev/null
+++ b/static/usage/v6/segment/theming/css-properties/javascript.md
@@ -0,0 +1,16 @@
+```html
+
+
+
+
+ Custom
+
+
+ Segment
+
+
+```
diff --git a/static/usage/v6/segment/theming/css-properties/react/main_css.md b/static/usage/v6/segment/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..8ecca25270d
--- /dev/null
+++ b/static/usage/v6/segment/theming/css-properties/react/main_css.md
@@ -0,0 +1,5 @@
+```css
+ion-segment {
+ --background: #54dc98;
+}
+```
diff --git a/static/usage/v6/segment/theming/css-properties/react/main_tsx.md b/static/usage/v6/segment/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..a7e9dc7e0f5
--- /dev/null
+++ b/static/usage/v6/segment/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,22 @@
+```tsx
+import React from 'react';
+import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+
+
+ Custom
+
+
+ Segment
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/segment/theming/css-properties/vue.md b/static/usage/v6/segment/theming/css-properties/vue.md
new file mode 100644
index 00000000000..00bf2e42c8f
--- /dev/null
+++ b/static/usage/v6/segment/theming/css-properties/vue.md
@@ -0,0 +1,27 @@
+```html
+
+
+
+ Custom
+
+
+ Segment
+
+
+
+
+
+
+
+```
diff --git a/static/usage/select/basic/multiple-selection/angular.md b/static/usage/v6/select/basic/multiple-selection/angular.md
similarity index 100%
rename from static/usage/select/basic/multiple-selection/angular.md
rename to static/usage/v6/select/basic/multiple-selection/angular.md
diff --git a/static/usage/v6/select/basic/multiple-selection/demo.html b/static/usage/v6/select/basic/multiple-selection/demo.html
new file mode 100644
index 00000000000..9847cfa382b
--- /dev/null
+++ b/static/usage/v6/select/basic/multiple-selection/demo.html
@@ -0,0 +1,32 @@
+
+
+
+
+
+
+ Select - Multiple Selection
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/select/basic/multiple-selection/index.md b/static/usage/v6/select/basic/multiple-selection/index.md
new file mode 100644
index 00000000000..57f3380c18f
--- /dev/null
+++ b/static/usage/v6/select/basic/multiple-selection/index.md
@@ -0,0 +1,13 @@
+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/select/basic/multiple-selection/javascript.md b/static/usage/v6/select/basic/multiple-selection/javascript.md
similarity index 100%
rename from static/usage/select/basic/multiple-selection/javascript.md
rename to static/usage/v6/select/basic/multiple-selection/javascript.md
diff --git a/static/usage/select/basic/multiple-selection/react.md b/static/usage/v6/select/basic/multiple-selection/react.md
similarity index 100%
rename from static/usage/select/basic/multiple-selection/react.md
rename to static/usage/v6/select/basic/multiple-selection/react.md
diff --git a/static/usage/select/basic/multiple-selection/vue.md b/static/usage/v6/select/basic/multiple-selection/vue.md
similarity index 100%
rename from static/usage/select/basic/multiple-selection/vue.md
rename to static/usage/v6/select/basic/multiple-selection/vue.md
diff --git a/static/usage/select/basic/responding-to-interaction/angular/app.component_html.md b/static/usage/v6/select/basic/responding-to-interaction/angular/example_component_html.md
similarity index 100%
rename from static/usage/select/basic/responding-to-interaction/angular/app.component_html.md
rename to static/usage/v6/select/basic/responding-to-interaction/angular/example_component_html.md
diff --git a/static/usage/v6/select/basic/responding-to-interaction/angular/example_component_ts.md b/static/usage/v6/select/basic/responding-to-interaction/angular/example_component_ts.md
new file mode 100644
index 00000000000..18c0b1eaa1b
--- /dev/null
+++ b/static/usage/v6/select/basic/responding-to-interaction/angular/example_component_ts.md
@@ -0,0 +1,19 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ logs: string[] = [];
+
+ pushLog(msg) {
+ this.logs.unshift(msg);
+ }
+
+ handleChange(e) {
+ this.pushLog('ionChange fired with value: ' + e.detail.value);
+ }
+}
+```
diff --git a/static/usage/v6/select/basic/responding-to-interaction/demo.html b/static/usage/v6/select/basic/responding-to-interaction/demo.html
new file mode 100644
index 00000000000..dbea5d3b8df
--- /dev/null
+++ b/static/usage/v6/select/basic/responding-to-interaction/demo.html
@@ -0,0 +1,62 @@
+
+
+
+
+
+
+ Select - Responding to Interaction
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+
+
+
+
+ {logs.map((log) => (
+
{log}
+ ))}
+
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/select/basic/single-selection/index.md b/static/usage/v6/select/basic/single-selection/index.md
new file mode 100644
index 00000000000..b697188b540
--- /dev/null
+++ b/static/usage/v6/select/basic/single-selection/index.md
@@ -0,0 +1,13 @@
+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/select/basic/single-selection/javascript.md b/static/usage/v6/select/basic/single-selection/javascript.md
similarity index 100%
rename from static/usage/select/basic/single-selection/javascript.md
rename to static/usage/v6/select/basic/single-selection/javascript.md
diff --git a/static/usage/select/basic/single-selection/react.md b/static/usage/v6/select/basic/single-selection/react.md
similarity index 100%
rename from static/usage/select/basic/single-selection/react.md
rename to static/usage/v6/select/basic/single-selection/react.md
diff --git a/static/usage/select/basic/single-selection/vue.md b/static/usage/v6/select/basic/single-selection/vue.md
similarity index 100%
rename from static/usage/select/basic/single-selection/vue.md
rename to static/usage/v6/select/basic/single-selection/vue.md
diff --git a/static/usage/select/customization/button-text/angular.md b/static/usage/v6/select/customization/button-text/angular.md
similarity index 100%
rename from static/usage/select/customization/button-text/angular.md
rename to static/usage/v6/select/customization/button-text/angular.md
diff --git a/static/usage/v6/select/customization/button-text/demo.html b/static/usage/v6/select/customization/button-text/demo.html
new file mode 100644
index 00000000000..1eb72b8dda5
--- /dev/null
+++ b/static/usage/v6/select/customization/button-text/demo.html
@@ -0,0 +1,41 @@
+
+
+
+
+
+
+ Select - Button Text
+
+
+
+
+
+
+
+
+
+
+
+
+ Alert Interface
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+ Action Sheet Interface
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/select/customization/button-text/index.md b/static/usage/v6/select/customization/button-text/index.md
new file mode 100644
index 00000000000..06e014afb5c
--- /dev/null
+++ b/static/usage/v6/select/customization/button-text/index.md
@@ -0,0 +1,13 @@
+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/select/customization/button-text/javascript.md b/static/usage/v6/select/customization/button-text/javascript.md
similarity index 100%
rename from static/usage/select/customization/button-text/javascript.md
rename to static/usage/v6/select/customization/button-text/javascript.md
diff --git a/static/usage/select/customization/button-text/react.md b/static/usage/v6/select/customization/button-text/react.md
similarity index 100%
rename from static/usage/select/customization/button-text/react.md
rename to static/usage/v6/select/customization/button-text/react.md
diff --git a/static/usage/select/customization/button-text/vue.md b/static/usage/v6/select/customization/button-text/vue.md
similarity index 100%
rename from static/usage/select/customization/button-text/vue.md
rename to static/usage/v6/select/customization/button-text/vue.md
diff --git a/static/usage/select/customization/interface-options/angular/app.component_html.md b/static/usage/v6/select/customization/interface-options/angular/example_component_html.md
similarity index 100%
rename from static/usage/select/customization/interface-options/angular/app.component_html.md
rename to static/usage/v6/select/customization/interface-options/angular/example_component_html.md
diff --git a/static/usage/v6/select/customization/interface-options/angular/example_component_ts.md b/static/usage/v6/select/customization/interface-options/angular/example_component_ts.md
new file mode 100644
index 00000000000..c3f34d0adaf
--- /dev/null
+++ b/static/usage/v6/select/customization/interface-options/angular/example_component_ts.md
@@ -0,0 +1,27 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ customAlertOptions = {
+ header: 'Pizza Toppings',
+ subHeader: 'Select your favorite topping',
+ message: 'Choose only one',
+ translucent: true,
+ };
+
+ customPopoverOptions = {
+ header: 'Hair Color',
+ subHeader: 'Select your hair color',
+ message: 'Only select your dominant hair color',
+ };
+
+ customActionSheetOptions = {
+ header: 'Colors',
+ subHeader: 'Select your favorite color',
+ };
+}
+```
diff --git a/static/usage/v6/select/customization/interface-options/demo.html b/static/usage/v6/select/customization/interface-options/demo.html
new file mode 100644
index 00000000000..8cff7c7bbf0
--- /dev/null
+++ b/static/usage/v6/select/customization/interface-options/demo.html
@@ -0,0 +1,83 @@
+
+
+
+
+
+
+ Select - Interface Options
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Alert
+
+ Bacon
+ Onions
+ Pepperoni
+
+
+
+
+ Popover
+
+ Brown
+ Blonde
+ Red
+
+
+
+
+ Action Sheet
+
+ Red
+ Green
+ Blue
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/select/customization/interface-options/index.md b/static/usage/v6/select/customization/interface-options/index.md
new file mode 100644
index 00000000000..ac291deb492
--- /dev/null
+++ b/static/usage/v6/select/customization/interface-options/index.md
@@ -0,0 +1,25 @@
+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_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/select/customization/interface-options/javascript.md b/static/usage/v6/select/customization/interface-options/javascript.md
similarity index 100%
rename from static/usage/select/customization/interface-options/javascript.md
rename to static/usage/v6/select/customization/interface-options/javascript.md
diff --git a/static/usage/select/customization/interface-options/react.md b/static/usage/v6/select/customization/interface-options/react.md
similarity index 100%
rename from static/usage/select/customization/interface-options/react.md
rename to static/usage/v6/select/customization/interface-options/react.md
diff --git a/static/usage/select/customization/interface-options/vue.md b/static/usage/v6/select/customization/interface-options/vue.md
similarity index 100%
rename from static/usage/select/customization/interface-options/vue.md
rename to static/usage/v6/select/customization/interface-options/vue.md
diff --git a/static/usage/select/customization/styling-select/angular/angular-css.md b/static/usage/v6/select/customization/styling-select/angular/example_component_css.md
similarity index 100%
rename from static/usage/select/customization/styling-select/angular/angular-css.md
rename to static/usage/v6/select/customization/styling-select/angular/example_component_css.md
diff --git a/static/usage/select/customization/styling-select/angular/angular-html.md b/static/usage/v6/select/customization/styling-select/angular/example_component_html.md
similarity index 100%
rename from static/usage/select/customization/styling-select/angular/angular-html.md
rename to static/usage/v6/select/customization/styling-select/angular/example_component_html.md
diff --git a/static/usage/v6/select/customization/styling-select/angular/example_component_ts.md b/static/usage/v6/select/customization/styling-select/angular/example_component_ts.md
new file mode 100644
index 00000000000..4db53a836a9
--- /dev/null
+++ b/static/usage/v6/select/customization/styling-select/angular/example_component_ts.md
@@ -0,0 +1,10 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v6/select/customization/styling-select/demo.html b/static/usage/v6/select/customization/styling-select/demo.html
new file mode 100644
index 00000000000..429beab68c4
--- /dev/null
+++ b/static/usage/v6/select/customization/styling-select/demo.html
@@ -0,0 +1,60 @@
+
+
+
+
+
+
+ Select - Styling the Select
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/select/customization/styling-select/index.md b/static/usage/v6/select/customization/styling-select/index.md
new file mode 100644
index 00000000000..188a777bf0b
--- /dev/null
+++ b/static/usage/v6/select/customization/styling-select/index.md
@@ -0,0 +1,34 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/select/customization/styling-select/javascript.md b/static/usage/v6/select/customization/styling-select/javascript.md
similarity index 100%
rename from static/usage/select/customization/styling-select/javascript.md
rename to static/usage/v6/select/customization/styling-select/javascript.md
diff --git a/static/usage/select/customization/styling-select/react/react-css.md b/static/usage/v6/select/customization/styling-select/react/main_css.md
similarity index 100%
rename from static/usage/select/customization/styling-select/react/react-css.md
rename to static/usage/v6/select/customization/styling-select/react/main_css.md
diff --git a/static/usage/select/customization/styling-select/react/react-ts.md b/static/usage/v6/select/customization/styling-select/react/main_tsx.md
similarity index 100%
rename from static/usage/select/customization/styling-select/react/react-ts.md
rename to static/usage/v6/select/customization/styling-select/react/main_tsx.md
diff --git a/static/usage/select/customization/styling-select/vue.md b/static/usage/v6/select/customization/styling-select/vue.md
similarity index 100%
rename from static/usage/select/customization/styling-select/vue.md
rename to static/usage/v6/select/customization/styling-select/vue.md
diff --git a/static/usage/select/interfaces/action-sheet/angular.md b/static/usage/v6/select/interfaces/action-sheet/angular.md
similarity index 100%
rename from static/usage/select/interfaces/action-sheet/angular.md
rename to static/usage/v6/select/interfaces/action-sheet/angular.md
diff --git a/static/usage/v6/select/interfaces/action-sheet/demo.html b/static/usage/v6/select/interfaces/action-sheet/demo.html
new file mode 100644
index 00000000000..bd1dd427e85
--- /dev/null
+++ b/static/usage/v6/select/interfaces/action-sheet/demo.html
@@ -0,0 +1,32 @@
+
+
+
+
+
+
+ Select - Action Sheet
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/select/interfaces/action-sheet/index.md b/static/usage/v6/select/interfaces/action-sheet/index.md
new file mode 100644
index 00000000000..86bfc5a6723
--- /dev/null
+++ b/static/usage/v6/select/interfaces/action-sheet/index.md
@@ -0,0 +1,13 @@
+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/select/interfaces/action-sheet/javascript.md b/static/usage/v6/select/interfaces/action-sheet/javascript.md
similarity index 100%
rename from static/usage/select/interfaces/action-sheet/javascript.md
rename to static/usage/v6/select/interfaces/action-sheet/javascript.md
diff --git a/static/usage/select/interfaces/action-sheet/react.md b/static/usage/v6/select/interfaces/action-sheet/react.md
similarity index 100%
rename from static/usage/select/interfaces/action-sheet/react.md
rename to static/usage/v6/select/interfaces/action-sheet/react.md
diff --git a/static/usage/select/interfaces/action-sheet/vue.md b/static/usage/v6/select/interfaces/action-sheet/vue.md
similarity index 100%
rename from static/usage/select/interfaces/action-sheet/vue.md
rename to static/usage/v6/select/interfaces/action-sheet/vue.md
diff --git a/static/usage/select/interfaces/popover/angular.md b/static/usage/v6/select/interfaces/popover/angular.md
similarity index 100%
rename from static/usage/select/interfaces/popover/angular.md
rename to static/usage/v6/select/interfaces/popover/angular.md
diff --git a/static/usage/v6/select/interfaces/popover/demo.html b/static/usage/v6/select/interfaces/popover/demo.html
new file mode 100644
index 00000000000..9656b8e303d
--- /dev/null
+++ b/static/usage/v6/select/interfaces/popover/demo.html
@@ -0,0 +1,32 @@
+
+
+
+
+
+
+ Select - Popover
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/select/interfaces/popover/index.md b/static/usage/v6/select/interfaces/popover/index.md
new file mode 100644
index 00000000000..3aef2c12272
--- /dev/null
+++ b/static/usage/v6/select/interfaces/popover/index.md
@@ -0,0 +1,13 @@
+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/select/interfaces/popover/javascript.md b/static/usage/v6/select/interfaces/popover/javascript.md
similarity index 100%
rename from static/usage/select/interfaces/popover/javascript.md
rename to static/usage/v6/select/interfaces/popover/javascript.md
diff --git a/static/usage/select/interfaces/popover/react.md b/static/usage/v6/select/interfaces/popover/react.md
similarity index 100%
rename from static/usage/select/interfaces/popover/react.md
rename to static/usage/v6/select/interfaces/popover/react.md
diff --git a/static/usage/select/interfaces/popover/vue.md b/static/usage/v6/select/interfaces/popover/vue.md
similarity index 100%
rename from static/usage/select/interfaces/popover/vue.md
rename to static/usage/v6/select/interfaces/popover/vue.md
diff --git a/static/usage/select/objects-as-values/multiple-selection/angular/app.component_html.md b/static/usage/v6/select/objects-as-values/multiple-selection/angular/example_component_html.md
similarity index 100%
rename from static/usage/select/objects-as-values/multiple-selection/angular/app.component_html.md
rename to static/usage/v6/select/objects-as-values/multiple-selection/angular/example_component_html.md
diff --git a/static/usage/v6/select/objects-as-values/multiple-selection/angular/example_component_ts.md b/static/usage/v6/select/objects-as-values/multiple-selection/angular/example_component_ts.md
new file mode 100644
index 00000000000..76fa7e51e49
--- /dev/null
+++ b/static/usage/v6/select/objects-as-values/multiple-selection/angular/example_component_ts.md
@@ -0,0 +1,45 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ currentFood = undefined;
+
+ foods = [
+ {
+ id: 1,
+ name: 'Apples',
+ type: 'fruit',
+ },
+ {
+ id: 2,
+ name: 'Carrots',
+ type: 'vegetable',
+ },
+ {
+ id: 3,
+ name: 'Cupcakes',
+ type: 'dessert',
+ },
+ ];
+
+ compareWith(o1, o2) {
+ if (!o1 || !o2) {
+ return o1 === o2;
+ }
+
+ if (Array.isArray(o2)) {
+ return o2.some((o) => o.id === o1.id);
+ }
+
+ return o1.id === o2.id;
+ }
+
+ handleChange(ev) {
+ this.currentFood = ev.target.value;
+ }
+}
+```
diff --git a/static/usage/v6/select/objects-as-values/multiple-selection/demo.html b/static/usage/v6/select/objects-as-values/multiple-selection/demo.html
new file mode 100644
index 00000000000..2c3dc70038b
--- /dev/null
+++ b/static/usage/v6/select/objects-as-values/multiple-selection/demo.html
@@ -0,0 +1,91 @@
+
+
+
+
+
+
+ Select - Object Values and Multiple Selection
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Current value:
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/select/objects-as-values/multiple-selection/index.md b/static/usage/v6/select/objects-as-values/multiple-selection/index.md
new file mode 100644
index 00000000000..6868120f239
--- /dev/null
+++ b/static/usage/v6/select/objects-as-values/multiple-selection/index.md
@@ -0,0 +1,25 @@
+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_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/select/objects-as-values/multiple-selection/javascript.md b/static/usage/v6/select/objects-as-values/multiple-selection/javascript.md
similarity index 100%
rename from static/usage/select/objects-as-values/multiple-selection/javascript.md
rename to static/usage/v6/select/objects-as-values/multiple-selection/javascript.md
diff --git a/static/usage/v6/select/objects-as-values/multiple-selection/react.md b/static/usage/v6/select/objects-as-values/multiple-selection/react.md
new file mode 100644
index 00000000000..c60b9d2fa7e
--- /dev/null
+++ b/static/usage/v6/select/objects-as-values/multiple-selection/react.md
@@ -0,0 +1,67 @@
+```tsx
+import React, { useState } from 'react';
+import { IonItem, IonList, IonLabel, IonSelect, IonSelectOption } from '@ionic/react';
+
+interface Food {
+ id: number;
+ name: string;
+ type: string;
+}
+
+const foods: Food[] = [
+ {
+ id: 1,
+ name: 'Apples',
+ type: 'fruit',
+ },
+ {
+ id: 2,
+ name: 'Carrots',
+ type: 'vegetable',
+ },
+ {
+ id: 3,
+ name: 'Cupcakes',
+ type: 'dessert',
+ },
+];
+
+const compareWith = (o1: Food, o2: Food) => {
+ if (!o1 || !o2) {
+ return o1 === o2;
+ }
+
+ if (Array.isArray(o2)) {
+ return o2.some((o) => o.id === o1.id);
+ }
+
+ return o1.id === o2.id;
+};
+
+function Example() {
+ const [currentFood, setCurrentFood] = useState('');
+
+ return (
+
+
+ setCurrentFood(JSON.stringify(ev.detail.value))}
+ multiple={true}
+ >
+ {foods.map((food) => (
+
+ {food.name}
+
+ ))}
+
+
+
+ Current value: {currentFood}
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/select/objects-as-values/multiple-selection/vue.md b/static/usage/v6/select/objects-as-values/multiple-selection/vue.md
similarity index 100%
rename from static/usage/select/objects-as-values/multiple-selection/vue.md
rename to static/usage/v6/select/objects-as-values/multiple-selection/vue.md
diff --git a/static/usage/select/objects-as-values/using-comparewith/angular/app.component_html.md b/static/usage/v6/select/objects-as-values/using-comparewith/angular/example_component_html.md
similarity index 100%
rename from static/usage/select/objects-as-values/using-comparewith/angular/app.component_html.md
rename to static/usage/v6/select/objects-as-values/using-comparewith/angular/example_component_html.md
diff --git a/static/usage/v6/select/objects-as-values/using-comparewith/angular/example_component_ts.md b/static/usage/v6/select/objects-as-values/using-comparewith/angular/example_component_ts.md
new file mode 100644
index 00000000000..afbd5f454cd
--- /dev/null
+++ b/static/usage/v6/select/objects-as-values/using-comparewith/angular/example_component_ts.md
@@ -0,0 +1,37 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ currentFood = undefined;
+
+ foods = [
+ {
+ id: 1,
+ name: 'Apples',
+ type: 'fruit',
+ },
+ {
+ id: 2,
+ name: 'Carrots',
+ type: 'vegetable',
+ },
+ {
+ id: 3,
+ name: 'Cupcakes',
+ type: 'dessert',
+ },
+ ];
+
+ compareWith(o1, o2) {
+ return o1 && o2 ? o1.id === o2.id : o1 === o2;
+ }
+
+ handleChange(ev) {
+ this.currentFood = ev.target.value;
+ }
+}
+```
diff --git a/static/usage/v6/select/objects-as-values/using-comparewith/demo.html b/static/usage/v6/select/objects-as-values/using-comparewith/demo.html
new file mode 100644
index 00000000000..ca59d32afb2
--- /dev/null
+++ b/static/usage/v6/select/objects-as-values/using-comparewith/demo.html
@@ -0,0 +1,79 @@
+
+
+
+
+
+
+ Select - Using compareWith
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Current value:
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/select/objects-as-values/using-comparewith/index.md b/static/usage/v6/select/objects-as-values/using-comparewith/index.md
new file mode 100644
index 00000000000..cbe6f0fe783
--- /dev/null
+++ b/static/usage/v6/select/objects-as-values/using-comparewith/index.md
@@ -0,0 +1,25 @@
+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_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/select/objects-as-values/using-comparewith/javascript.md b/static/usage/v6/select/objects-as-values/using-comparewith/javascript.md
similarity index 100%
rename from static/usage/select/objects-as-values/using-comparewith/javascript.md
rename to static/usage/v6/select/objects-as-values/using-comparewith/javascript.md
diff --git a/static/usage/v6/select/objects-as-values/using-comparewith/react.md b/static/usage/v6/select/objects-as-values/using-comparewith/react.md
new file mode 100644
index 00000000000..7cd468d5b0e
--- /dev/null
+++ b/static/usage/v6/select/objects-as-values/using-comparewith/react.md
@@ -0,0 +1,58 @@
+```tsx
+import React, { useState } from 'react';
+import { IonItem, IonList, IonLabel, IonSelect, IonSelectOption } from '@ionic/react';
+
+interface Food {
+ id: number;
+ name: string;
+ type: string;
+}
+
+const foods: Food[] = [
+ {
+ id: 1,
+ name: 'Apples',
+ type: 'fruit',
+ },
+ {
+ id: 2,
+ name: 'Carrots',
+ type: 'vegetable',
+ },
+ {
+ id: 3,
+ name: 'Cupcakes',
+ type: 'dessert',
+ },
+];
+
+const compareWith = (o1: Food, o2: Food) => {
+ return o1 && o2 ? o1.id === o2.id : o1 === o2;
+};
+
+function Example() {
+ const [currentFood, setCurrentFood] = useState('');
+
+ return (
+
+
+ setCurrentFood(JSON.stringify(ev.detail.value))}
+ >
+ {foods.map((food) => (
+
+ {food.name}
+
+ ))}
+
+
+
+ Current food: {currentFood}
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/select/objects-as-values/using-comparewith/vue.md b/static/usage/v6/select/objects-as-values/using-comparewith/vue.md
similarity index 100%
rename from static/usage/select/objects-as-values/using-comparewith/vue.md
rename to static/usage/v6/select/objects-as-values/using-comparewith/vue.md
diff --git a/static/usage/v6/select/typeahead/angular/angular_types_ts.md b/static/usage/v6/select/typeahead/angular/angular_types_ts.md
new file mode 100644
index 00000000000..bdf47c9d0ae
--- /dev/null
+++ b/static/usage/v6/select/typeahead/angular/angular_types_ts.md
@@ -0,0 +1,6 @@
+```ts
+export interface Item {
+ text: string;
+ value: string;
+};
+```
diff --git a/static/usage/v6/select/typeahead/angular/app_module_ts.md b/static/usage/v6/select/typeahead/angular/app_module_ts.md
new file mode 100644
index 00000000000..0fa58037717
--- /dev/null
+++ b/static/usage/v6/select/typeahead/angular/app_module_ts.md
@@ -0,0 +1,19 @@
+```ts
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { AppComponent } from './app.component';
+import { ExampleComponent } from './example.component';
+
+import { TypeaheadComponent } from './typeahead.component';
+
+@NgModule({
+ imports: [BrowserModule, FormsModule, IonicModule.forRoot({})],
+ declarations: [AppComponent, ExampleComponent, TypeaheadComponent],
+ bootstrap: [AppComponent],
+})
+export class AppModule {}
+```
diff --git a/static/usage/v6/select/typeahead/angular/example_component_html.md b/static/usage/v6/select/typeahead/angular/example_component_html.md
new file mode 100644
index 00000000000..3c702c08d67
--- /dev/null
+++ b/static/usage/v6/select/typeahead/angular/example_component_html.md
@@ -0,0 +1,23 @@
+```html
+
+
+
+ Favorite Fruits
+ {{ selectedFruitsText }}
+
+
+
+
+
+
+
+
+
+```
\ No newline at end of file
diff --git a/static/usage/v6/select/typeahead/angular/example_component_ts.md b/static/usage/v6/select/typeahead/angular/example_component_ts.md
new file mode 100644
index 00000000000..ee7f5e29305
--- /dev/null
+++ b/static/usage/v6/select/typeahead/angular/example_component_ts.md
@@ -0,0 +1,59 @@
+```ts
+import { Component, ViewChild } from '@angular/core';
+import { IonModal } from '@ionic/angular';
+import { Item } from './types';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ @ViewChild('modal', { static: true }) modal!: IonModal;
+
+ selectedFruitsText = '0 Items';
+ selectedFruits: string[] = [];
+
+ fruits: Item[] = [
+ { text: 'Apple', value: 'apple' },
+ { text: 'Apricot', value: 'apricot' },
+ { text: 'Banana', value: 'banana' },
+ { text: 'Blackberry', value: 'blackberry' },
+ { text: 'Blueberry', value: 'blueberry' },
+ { text: 'Cherry', value: 'cherry' },
+ { text: 'Cranberry', value: 'cranberry' },
+ { text: 'Grape', value: 'grape' },
+ { text: 'Grapefruit', value: 'grapefruit' },
+ { text: 'Guava', value: 'guava' },
+ { text: 'Jackfruit', value: 'jackfruit' },
+ { text: 'Lime', value: 'lime' },
+ { text: 'Mango', value: 'mango' },
+ { text: 'Nectarine', value: 'nectarine' },
+ { text: 'Orange', value: 'orange' },
+ { text: 'Papaya', value: 'papaya' },
+ { text: 'Passionfruit', value: 'passionfruit' },
+ { text: 'Peach', value: 'peach' },
+ { text: 'Pear', value: 'pear' },
+ { text: 'Plantain', value: 'plantain' },
+ { text: 'Plum', value: 'plum' },
+ { text: 'Pineapple', value: 'pineapple' },
+ { text: 'Pomegranate', value: 'pomegranate' },
+ { text: 'Raspberry', value: 'raspberry' },
+ { text: 'Strawberry', value: 'strawberry' }
+ ];
+
+ private formatData(data: string[]) {
+ if (data.length === 1) {
+ const fruit = this.fruits.find(fruit => fruit.value === data[0])
+ return fruit.text;
+ }
+
+ return `${data.length} items`;
+ }
+
+ fruitSelectionChanged(fruits: string[]) {
+ this.selectedFruits = fruits;
+ this.selectedFruitsText = this.formatData(this.selectedFruits);
+ this.modal.dismiss();
+ }
+}
+```
diff --git a/static/usage/v6/select/typeahead/angular/modal-example_component_html.md b/static/usage/v6/select/typeahead/angular/modal-example_component_html.md
new file mode 100644
index 00000000000..ed5fc081852
--- /dev/null
+++ b/static/usage/v6/select/typeahead/angular/modal-example_component_html.md
@@ -0,0 +1,29 @@
+```html
+
+
+
+ Cancel
+
+ {{ title }}
+
+ Done
+
+
+
+
+
+
+
+
+
+
+ {{ item.text }}
+
+
+
+
+```
diff --git a/static/usage/v6/select/typeahead/angular/modal-example_component_ts.md b/static/usage/v6/select/typeahead/angular/modal-example_component_ts.md
new file mode 100644
index 00000000000..e1b536e723e
--- /dev/null
+++ b/static/usage/v6/select/typeahead/angular/modal-example_component_ts.md
@@ -0,0 +1,85 @@
+```ts
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import type { OnInit } from '@angular/core';
+import { Item } from './types';
+
+@Component({
+ selector: 'app-typeahead',
+ templateUrl: 'typeahead.component.html',
+})
+export class TypeaheadComponent implements OnInit {
+ @Input() items: Item[] = [];
+ @Input() selectedItems: string[] = [];
+ @Input() title = 'Select Items';
+
+ @Output() selectionCancel = new EventEmitter();
+ @Output() selectionChange = new EventEmitter();
+
+ filteredItems: Item[] = [];
+ workingSelectedValues: string[] = [];
+
+ ngOnInit() {
+ this.filteredItems = [...this.items];
+ this.workingSelectedValues = [...this.selectedItems];
+ }
+
+ trackItems(index: number, item: Item) {
+ return item.value;
+ }
+
+ cancelChanges() {
+ this.selectionCancel.emit();
+ }
+
+ confirmChanges() {
+ this.selectionChange.emit(this.workingSelectedValues);
+ }
+
+ searchbarInput(ev) {
+ this.filterList(ev.target.value);
+ }
+
+ /**
+ * Update the rendered view with
+ * the provided search query. If no
+ * query is provided, all data
+ * will be rendered.
+ */
+ filterList(searchQuery: string | undefined) {
+ /**
+ * If no search query is defined,
+ * return all options.
+ */
+ if (searchQuery === undefined) {
+ this.filteredItems = [...this.items];
+ } else {
+ /**
+ * Otherwise, normalize the search
+ * query and check to see which items
+ * contain the search query as a substring.
+ */
+ const normalizedQuery = searchQuery.toLowerCase();
+ this.filteredItems = this.items.filter(item => {
+ return item.value.includes(normalizedQuery);
+ });
+ }
+ }
+
+ isChecked(value: string) {
+ return this.workingSelectedValues.find(item => item === value);
+ }
+
+ checkboxChange(ev) {
+ const { checked, value } = ev.detail;
+
+ if (checked) {
+ this.workingSelectedValues = [
+ ...this.workingSelectedValues,
+ value
+ ]
+ } else {
+ this.workingSelectedValues = this.workingSelectedValues.filter(item => item !== value);
+ }
+ }
+}
+```
diff --git a/static/usage/v6/select/typeahead/demo.html b/static/usage/v6/select/typeahead/demo.html
new file mode 100644
index 00000000000..2f7410fb810
--- /dev/null
+++ b/static/usage/v6/select/typeahead/demo.html
@@ -0,0 +1,223 @@
+
+
+
+
+
+ Select
+
+
+
+
+
+
+
+
+
+
+
+
+ Favorite Fruits
+ 0 Items
+
+
+
+
+
+ Favorite Fruits
+ 0 Items
+
+
+
{ selectedFruitsText }
+
+
+
+
+
+ modal.current?.dismiss()}
+ onSelectionChange={fruitSelectionChanged}
+ />
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/select/typeahead/react/react_types_ts.md b/static/usage/v6/select/typeahead/react/react_types_ts.md
new file mode 100644
index 00000000000..bdf47c9d0ae
--- /dev/null
+++ b/static/usage/v6/select/typeahead/react/react_types_ts.md
@@ -0,0 +1,6 @@
+```ts
+export interface Item {
+ text: string;
+ value: string;
+};
+```
diff --git a/static/usage/v6/select/typeahead/react/typeahead_component_tsx.md b/static/usage/v6/select/typeahead/react/typeahead_component_tsx.md
new file mode 100644
index 00000000000..1192f3bc2a3
--- /dev/null
+++ b/static/usage/v6/select/typeahead/react/typeahead_component_tsx.md
@@ -0,0 +1,112 @@
+```tsx
+import React, { useState } from 'react';
+import { IonButton, IonButtons, IonCheckbox, IonContent, IonHeader, IonItem, IonLabel, IonList, IonTitle, IonSearchbar, IonToolbar } from '@ionic/react';
+import type { CheckboxCustomEvent } from '@ionic/react';
+import type { Item } from './types';
+
+interface TypeaheadProps {
+ items: Item[];
+ selectedItems: string[];
+ title?: string;
+ onSelectionCancel?: () => void;
+ onSelectionChange?: (items: string[]) => void;
+}
+
+function AppTypeahead(props: TypeaheadProps) {
+ const [filteredItems, setFilteredItems] = useState([...props.items]);
+ const [workingSelectedValues, setWorkingSelectedValues] = useState([...props.selectedItems]);
+
+ const isChecked = (value: string) => {
+ return workingSelectedValues.find(item => item === value) !== undefined;
+ }
+
+ const cancelChanges = () => {
+ const { onSelectionCancel } = props;
+ if (onSelectionCancel !== undefined) {
+ onSelectionCancel();
+ }
+ }
+
+ const confirmChanges = () => {
+ const { onSelectionChange } = props;
+ if (onSelectionChange !== undefined) {
+ onSelectionChange(workingSelectedValues);
+ }
+ }
+
+ const searchbarInput = (ev: any) => {
+ filterList(ev.target.value);
+ }
+
+ /**
+ * Update the rendered view with
+ * the provided search query. If no
+ * query is provided, all data
+ * will be rendered.
+ */
+ const filterList = (searchQuery: string | null | undefined) => {
+ /**
+ * If no search query is defined,
+ * return all options.
+ */
+ if (searchQuery === undefined || searchQuery === null) {
+ setFilteredItems([...props.items]);
+ } else {
+ /**
+ * Otherwise, normalize the search
+ * query and check to see which items
+ * contain the search query as a substring.
+ */
+ const normalizedQuery = searchQuery.toLowerCase();
+ setFilteredItems(props.items.filter(item => {
+ return item.value.includes(normalizedQuery);
+ }));
+ }
+ }
+
+ const checkboxChange = (ev: CheckboxCustomEvent) => {
+ const { checked, value } = ev.detail;
+
+ if (checked) {
+ setWorkingSelectedValues([...workingSelectedValues, value]);
+ } else {
+ setWorkingSelectedValues(workingSelectedValues.filter(item => item !== value));
+ }
+ }
+
+ return (
+ <>
+
+
+
+ Cancel
+
+ {props.title}
+
+ Done
+
+
+
+
+
+
+
+
+
+ {filteredItems.map(item => (
+
+ {item.text}
+
+
+ ))}
+
+
+
+ );
+}
+export default AppTypeahead;
+```
diff --git a/static/usage/v6/select/typeahead/vue/example_vue.md b/static/usage/v6/select/typeahead/vue/example_vue.md
new file mode 100644
index 00000000000..8086c2f0d6a
--- /dev/null
+++ b/static/usage/v6/select/typeahead/vue/example_vue.md
@@ -0,0 +1,83 @@
+```html
+
+
+
+
+ Favorite Fruits
+ {{ selectedFruitsText }}
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/select/typeahead/vue/typeahead_component_vue.md b/static/usage/v6/select/typeahead/vue/typeahead_component_vue.md
new file mode 100644
index 00000000000..c49e7113678
--- /dev/null
+++ b/static/usage/v6/select/typeahead/vue/typeahead_component_vue.md
@@ -0,0 +1,122 @@
+```html
+
+
+
+
+ Cancel
+
+ {{ $props.title }}
+
+ Done
+
+
+
+
+
+
+
+
+
+
+ {{ item.text }}
+
+
+
+
+
+
+
+```
\ No newline at end of file
diff --git a/static/usage/v6/select/typeahead/vue/vue_types_ts.md b/static/usage/v6/select/typeahead/vue/vue_types_ts.md
new file mode 100644
index 00000000000..bdf47c9d0ae
--- /dev/null
+++ b/static/usage/v6/select/typeahead/vue/vue_types_ts.md
@@ -0,0 +1,6 @@
+```ts
+export interface Item {
+ text: string;
+ value: string;
+};
+```
diff --git a/static/usage/v6/skeleton-text/basic/angular/example_component_html.md b/static/usage/v6/skeleton-text/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..bea0ee90431
--- /dev/null
+++ b/static/usage/v6/skeleton-text/basic/angular/example_component_html.md
@@ -0,0 +1,39 @@
+```html
+
+ Albums
+
+
+
+
+
+ Abbey Road
+ The Beatles
+ 1969
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Toggle
+```
diff --git a/static/usage/v6/skeleton-text/basic/angular/example_component_ts.md b/static/usage/v6/skeleton-text/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..8b30337848c
--- /dev/null
+++ b/static/usage/v6/skeleton-text/basic/angular/example_component_ts.md
@@ -0,0 +1,13 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css']
+})
+export class ExampleComponent {
+ public loaded = false;
+}
+
+```
\ No newline at end of file
diff --git a/static/usage/v6/skeleton-text/basic/demo.html b/static/usage/v6/skeleton-text/basic/demo.html
new file mode 100644
index 00000000000..a1cbc3f4f12
--- /dev/null
+++ b/static/usage/v6/skeleton-text/basic/demo.html
@@ -0,0 +1,92 @@
+
+
+
+
+
+
+ Accordion
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Toggle
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/skeleton-text/basic/index.md b/static/usage/v6/skeleton-text/basic/index.md
new file mode 100644
index 00000000000..2e3371fb890
--- /dev/null
+++ b/static/usage/v6/skeleton-text/basic/index.md
@@ -0,0 +1,25 @@
+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_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/v6/skeleton-text/basic/javascript.md b/static/usage/v6/skeleton-text/basic/javascript.md
new file mode 100644
index 00000000000..5eefa7c1149
--- /dev/null
+++ b/static/usage/v6/skeleton-text/basic/javascript.md
@@ -0,0 +1,61 @@
+```html
+
+Toggle
+
+
+```
diff --git a/static/usage/v6/skeleton-text/basic/react.md b/static/usage/v6/skeleton-text/basic/react.md
new file mode 100644
index 00000000000..2ea377034c9
--- /dev/null
+++ b/static/usage/v6/skeleton-text/basic/react.md
@@ -0,0 +1,61 @@
+```tsx
+import React, { useState } from 'react';
+import {
+ IonButton,
+ IonIcon,
+ IonItem,
+ IonLabel,
+ IonList,
+ IonListHeader,
+ IonSkeletonText,
+ IonThumbnail,
+} from '@ionic/react';
+import { musicalNotes } from 'ionicons/icons';
+function Example() {
+ const [loaded, setLoaded] = useState(false);
+ return (
+ <>
+ {loaded &&
+
+ Albums
+
+
+
+
+
+ Abbey Road
+ The Beatles
+ 1969
+
+
+
+ }
+ {!loaded &&
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ }
+ setLoaded(!loaded)}>Toggle
+
+ );
+}
+export default Example;
+```
\ No newline at end of file
diff --git a/static/usage/v6/skeleton-text/basic/vue.md b/static/usage/v6/skeleton-text/basic/vue.md
new file mode 100644
index 00000000000..c03a518af19
--- /dev/null
+++ b/static/usage/v6/skeleton-text/basic/vue.md
@@ -0,0 +1,78 @@
+```html
+
+
+ Albums
+
+
+
+
+
+ Abbey Road
+ The Beatles
+ 1969
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Toggle
+
+
+
+```
diff --git a/static/usage/v6/skeleton-text/theming/css-properties/angular/example_component_css.md b/static/usage/v6/skeleton-text/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..67761872c60
--- /dev/null
+++ b/static/usage/v6/skeleton-text/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,7 @@
+```css
+ion-skeleton-text {
+ --border-radius: 9999px;
+ --background: rgba(188, 0, 255, 0.065);
+ --background-rgb: 188, 0, 255;
+}
+```
\ No newline at end of file
diff --git a/static/usage/v6/skeleton-text/theming/css-properties/angular/example_component_html.md b/static/usage/v6/skeleton-text/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..4044c112b0c
--- /dev/null
+++ b/static/usage/v6/skeleton-text/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,23 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/skeleton-text/theming/css-properties/demo.html b/static/usage/v6/skeleton-text/theming/css-properties/demo.html
new file mode 100644
index 00000000000..6a84c2b7943
--- /dev/null
+++ b/static/usage/v6/skeleton-text/theming/css-properties/demo.html
@@ -0,0 +1,60 @@
+
+
+
+
+
+
+ Accordion
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/skeleton-text/theming/css-properties/react/main_css.md b/static/usage/v6/skeleton-text/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..67761872c60
--- /dev/null
+++ b/static/usage/v6/skeleton-text/theming/css-properties/react/main_css.md
@@ -0,0 +1,7 @@
+```css
+ion-skeleton-text {
+ --border-radius: 9999px;
+ --background: rgba(188, 0, 255, 0.065);
+ --background-rgb: 188, 0, 255;
+}
+```
\ No newline at end of file
diff --git a/static/usage/v6/skeleton-text/theming/css-properties/react/main_tsx.md b/static/usage/v6/skeleton-text/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..29e6e159f68
--- /dev/null
+++ b/static/usage/v6/skeleton-text/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,40 @@
+```tsx
+import React from 'react';
+import {
+ IonItem,
+ IonLabel,
+ IonList,
+ IonListHeader,
+ IonSkeletonText,
+ IonThumbnail,
+} from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+export default Example;
+```
\ No newline at end of file
diff --git a/static/usage/v6/skeleton-text/theming/css-properties/vue.md b/static/usage/v6/skeleton-text/theming/css-properties/vue.md
new file mode 100644
index 00000000000..418a7ca610f
--- /dev/null
+++ b/static/usage/v6/skeleton-text/theming/css-properties/vue.md
@@ -0,0 +1,56 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/spinner/basic/angular.md b/static/usage/v6/spinner/basic/angular.md
new file mode 100644
index 00000000000..72997980940
--- /dev/null
+++ b/static/usage/v6/spinner/basic/angular.md
@@ -0,0 +1,51 @@
+```html
+
+ Default
+
+
+
+
+ Dots
+
+
+
+
+ Lines
+
+
+
+
+ Lines Small
+
+
+
+
+ Lines Sharp
+
+
+
+
+ Lines Sharp Small
+
+
+
+
+ Bubbles
+
+
+
+
+ Circles
+
+
+
+
+ Circular
+
+
+
+
+ Crescent
+
+
+```
diff --git a/static/usage/v6/spinner/basic/demo.html b/static/usage/v6/spinner/basic/demo.html
new file mode 100644
index 00000000000..cf495c8bd07
--- /dev/null
+++ b/static/usage/v6/spinner/basic/demo.html
@@ -0,0 +1,79 @@
+
+
+
+
+
+
+ Spinner
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Default
+
+
+
+
+ Dots
+
+
+
+
+ Lines
+
+
+
+
+ Lines Small
+
+
+
+
+ Lines Sharp
+
+
+
+
+ Lines Sharp Small
+
+
+
+
+ Bubbles
+
+
+
+
+ Circles
+
+
+
+
+ Circular
+
+
+
+
+ Crescent
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/spinner/basic/index.md b/static/usage/v6/spinner/basic/index.md
new file mode 100644
index 00000000000..db7b7e0e8e2
--- /dev/null
+++ b/static/usage/v6/spinner/basic/index.md
@@ -0,0 +1,13 @@
+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/v6/spinner/basic/javascript.md b/static/usage/v6/spinner/basic/javascript.md
new file mode 100644
index 00000000000..72997980940
--- /dev/null
+++ b/static/usage/v6/spinner/basic/javascript.md
@@ -0,0 +1,51 @@
+```html
+
+ Default
+
+
+
+
+ Dots
+
+
+
+
+ Lines
+
+
+
+
+ Lines Small
+
+
+
+
+ Lines Sharp
+
+
+
+
+ Lines Sharp Small
+
+
+
+
+ Bubbles
+
+
+
+
+ Circles
+
+
+
+
+ Circular
+
+
+
+
+ Crescent
+
+
+```
diff --git a/static/usage/v6/spinner/basic/react.md b/static/usage/v6/spinner/basic/react.md
new file mode 100644
index 00000000000..c6219c28b42
--- /dev/null
+++ b/static/usage/v6/spinner/basic/react.md
@@ -0,0 +1,61 @@
+```tsx
+import React from 'react';
+import { IonItem, IonLabel, IonSpinner } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+ Default
+
+
+
+
+ Dots
+
+
+
+
+ Lines
+
+
+
+
+ Lines Small
+
+
+
+
+ Lines Sharp
+
+
+
+
+ Lines Sharp Small
+
+
+
+
+ Bubbles
+
+
+
+
+ Circles
+
+
+
+
+ Circular
+
+
+
+
+ Crescent
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/spinner/basic/vue.md b/static/usage/v6/spinner/basic/vue.md
new file mode 100644
index 00000000000..089b9fb6da8
--- /dev/null
+++ b/static/usage/v6/spinner/basic/vue.md
@@ -0,0 +1,62 @@
+```html
+
+
+ Default
+
+
+
+
+ Dots
+
+
+
+
+ Lines
+
+
+
+
+ Lines Small
+
+
+
+
+ Lines Sharp
+
+
+
+
+ Lines Sharp Small
+
+
+
+
+ Bubbles
+
+
+
+
+ Circles
+
+
+
+
+ Circular
+
+
+
+
+ Crescent
+
+
+
+
+
+```
diff --git a/static/usage/v6/spinner/theming/colors/angular.md b/static/usage/v6/spinner/theming/colors/angular.md
new file mode 100644
index 00000000000..089ea023e92
--- /dev/null
+++ b/static/usage/v6/spinner/theming/colors/angular.md
@@ -0,0 +1,12 @@
+```html
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/spinner/theming/colors/demo.html b/static/usage/v6/spinner/theming/colors/demo.html
new file mode 100644
index 00000000000..387a56e38d4
--- /dev/null
+++ b/static/usage/v6/spinner/theming/colors/demo.html
@@ -0,0 +1,33 @@
+
+
+
+
+
+
+ Spinner
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/spinner/theming/colors/index.md b/static/usage/v6/spinner/theming/colors/index.md
new file mode 100644
index 00000000000..243c7ead7bf
--- /dev/null
+++ b/static/usage/v6/spinner/theming/colors/index.md
@@ -0,0 +1,13 @@
+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/v6/spinner/theming/colors/javascript.md b/static/usage/v6/spinner/theming/colors/javascript.md
new file mode 100644
index 00000000000..089ea023e92
--- /dev/null
+++ b/static/usage/v6/spinner/theming/colors/javascript.md
@@ -0,0 +1,12 @@
+```html
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/spinner/theming/colors/react.md b/static/usage/v6/spinner/theming/colors/react.md
new file mode 100644
index 00000000000..aca320e2720
--- /dev/null
+++ b/static/usage/v6/spinner/theming/colors/react.md
@@ -0,0 +1,22 @@
+```tsx
+import React from 'react';
+import { IonSpinner } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/spinner/theming/colors/vue.md b/static/usage/v6/spinner/theming/colors/vue.md
new file mode 100644
index 00000000000..c45f320c7ed
--- /dev/null
+++ b/static/usage/v6/spinner/theming/colors/vue.md
@@ -0,0 +1,23 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/spinner/theming/css-properties/angular/example_component_css.md b/static/usage/v6/spinner/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..e77a7d79e6a
--- /dev/null
+++ b/static/usage/v6/spinner/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,5 @@
+```css
+ion-spinner {
+ --color: #54dc98;
+}
+```
diff --git a/static/usage/v6/spinner/theming/css-properties/angular/example_component_html.md b/static/usage/v6/spinner/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..4b3b8d665b4
--- /dev/null
+++ b/static/usage/v6/spinner/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v6/spinner/theming/css-properties/demo.html b/static/usage/v6/spinner/theming/css-properties/demo.html
new file mode 100644
index 00000000000..6c369bd71fd
--- /dev/null
+++ b/static/usage/v6/spinner/theming/css-properties/demo.html
@@ -0,0 +1,30 @@
+
+
+
+
+
+
+ Spinner
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/spinner/theming/css-properties/index.md b/static/usage/v6/spinner/theming/css-properties/index.md
new file mode 100644
index 00000000000..bdc0e36afd4
--- /dev/null
+++ b/static/usage/v6/spinner/theming/css-properties/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/v6/spinner/theming/css-properties/javascript.md b/static/usage/v6/spinner/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..e2077bc508e
--- /dev/null
+++ b/static/usage/v6/spinner/theming/css-properties/javascript.md
@@ -0,0 +1,9 @@
+```html
+
+
+
+```
diff --git a/static/usage/v6/spinner/theming/css-properties/react.md b/static/usage/v6/spinner/theming/css-properties/react.md
new file mode 100644
index 00000000000..e5cd98ffb60
--- /dev/null
+++ b/static/usage/v6/spinner/theming/css-properties/react.md
@@ -0,0 +1,11 @@
+```tsx
+import React from 'react';
+import { IonSpinner } from '@ionic/react';
+
+function Example() {
+ return (
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/spinner/theming/css-properties/react/main_css.md b/static/usage/v6/spinner/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..e77a7d79e6a
--- /dev/null
+++ b/static/usage/v6/spinner/theming/css-properties/react/main_css.md
@@ -0,0 +1,5 @@
+```css
+ion-spinner {
+ --color: #54dc98;
+}
+```
diff --git a/static/usage/v6/spinner/theming/css-properties/react/main_tsx.md b/static/usage/v6/spinner/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..f990cb1e738
--- /dev/null
+++ b/static/usage/v6/spinner/theming/css-properties/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/v6/spinner/theming/css-properties/vue.md b/static/usage/v6/spinner/theming/css-properties/vue.md
new file mode 100644
index 00000000000..c818d2c7488
--- /dev/null
+++ b/static/usage/v6/spinner/theming/css-properties/vue.md
@@ -0,0 +1,20 @@
+```html
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/split-pane/basic/angular.md b/static/usage/v6/split-pane/basic/angular.md
new file mode 100644
index 00000000000..0183d57a9fa
--- /dev/null
+++ b/static/usage/v6/split-pane/basic/angular.md
@@ -0,0 +1,25 @@
+```html
+
+
+
+
+ Menu
+
+
+
+ Menu Content
+
+
+
+
+
+
+ Main View
+
+
+
+ Main View Content
+
+
+
+```
diff --git a/static/usage/v6/split-pane/basic/demo.html b/static/usage/v6/split-pane/basic/demo.html
new file mode 100644
index 00000000000..c514ebd1dbc
--- /dev/null
+++ b/static/usage/v6/split-pane/basic/demo.html
@@ -0,0 +1,42 @@
+
+
+
+
+
+
+ Spinner
+
+
+
+
+
+
+
+
+
+
+
+
+ Menu
+
+
+
+ Menu Content
+
+
+
+
+
+
+ Main View
+
+
+
+ Main View Content
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/split-pane/basic/index.md b/static/usage/v6/split-pane/basic/index.md
new file mode 100644
index 00000000000..5f07ca49a5d
--- /dev/null
+++ b/static/usage/v6/split-pane/basic/index.md
@@ -0,0 +1,13 @@
+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/v6/split-pane/basic/javascript.md b/static/usage/v6/split-pane/basic/javascript.md
new file mode 100644
index 00000000000..626cc1ee03f
--- /dev/null
+++ b/static/usage/v6/split-pane/basic/javascript.md
@@ -0,0 +1,25 @@
+```html
+
+
+
+
+ Menu
+
+
+
+ Menu Content
+
+
+
+
+
+
+ Main View
+
+
+
+ Main View Content
+
+
+
+```
diff --git a/static/usage/v6/split-pane/basic/react.md b/static/usage/v6/split-pane/basic/react.md
new file mode 100644
index 00000000000..4088c068f1d
--- /dev/null
+++ b/static/usage/v6/split-pane/basic/react.md
@@ -0,0 +1,33 @@
+```tsx
+import React from 'react';
+import { IonContent, IonHeader, IonMenu, IonSplitPane, IonTitle, IonToolbar } from '@ionic/react';
+
+function Example() {
+ return (
+
+
+
+
+ Menu
+
+
+
+ Menu Content
+
+
+
+
+
+
+ Main View
+
+
+
+ Main View Content
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/split-pane/basic/vue.md b/static/usage/v6/split-pane/basic/vue.md
new file mode 100644
index 00000000000..b514acbcf6e
--- /dev/null
+++ b/static/usage/v6/split-pane/basic/vue.md
@@ -0,0 +1,36 @@
+```html
+
+
+
+
+
+ Menu
+
+
+
+ Menu Content
+
+
+
+
+
+
+ Main View
+
+
+
+ Main View Content
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/split-pane/theming/css-properties/angular/example_component_css.md b/static/usage/v6/split-pane/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..701bc942f7b
--- /dev/null
+++ b/static/usage/v6/split-pane/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,8 @@
+```css
+ion-split-pane {
+ --side-width: 350px;
+ --side-max-width: 350px;
+
+ --border: 1px dashed #b3baff;
+}
+```
diff --git a/static/usage/v6/split-pane/theming/css-properties/angular/example_component_html.md b/static/usage/v6/split-pane/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..4772826c933
--- /dev/null
+++ b/static/usage/v6/split-pane/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,25 @@
+```html
+
+
+
+
+ Menu
+
+
+
+ Menu Content is 350px wide and has a blue dashed border
+
+
+
+
+
+
+ Main View
+
+
+
+ Main View Content
+
+
+
+```
diff --git a/static/usage/v6/split-pane/theming/css-properties/demo.html b/static/usage/v6/split-pane/theming/css-properties/demo.html
new file mode 100644
index 00000000000..83353796a32
--- /dev/null
+++ b/static/usage/v6/split-pane/theming/css-properties/demo.html
@@ -0,0 +1,50 @@
+
+
+
+
+
+
+ Spinner
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Menu
+
+
+
+ Menu Content is 350px wide and has a blue dashed border
+
+
+
+
+
+
+ Main View
+
+
+
+ Main View Content
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/split-pane/theming/css-properties/index.md b/static/usage/v6/split-pane/theming/css-properties/index.md
new file mode 100644
index 00000000000..d92888173f0
--- /dev/null
+++ b/static/usage/v6/split-pane/theming/css-properties/index.md
@@ -0,0 +1,33 @@
+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/v6/split-pane/theming/css-properties/javascript.md b/static/usage/v6/split-pane/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..943993aa380
--- /dev/null
+++ b/static/usage/v6/split-pane/theming/css-properties/javascript.md
@@ -0,0 +1,34 @@
+```html
+
+
+
+
+ Menu
+
+
+
+ Menu Content is 350px wide and has a blue dashed border
+
+
+
+
+
+
+ Main View
+
+
+
+ Main View Content
+
+
+
+
+
+```
diff --git a/static/usage/v6/split-pane/theming/css-properties/react/main_css.md b/static/usage/v6/split-pane/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..701bc942f7b
--- /dev/null
+++ b/static/usage/v6/split-pane/theming/css-properties/react/main_css.md
@@ -0,0 +1,8 @@
+```css
+ion-split-pane {
+ --side-width: 350px;
+ --side-max-width: 350px;
+
+ --border: 1px dashed #b3baff;
+}
+```
diff --git a/static/usage/v6/split-pane/theming/css-properties/react/main_tsx.md b/static/usage/v6/split-pane/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..7456a34359d
--- /dev/null
+++ b/static/usage/v6/split-pane/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,35 @@
+```tsx
+import React from 'react';
+import { IonContent, IonHeader, IonMenu, IonSplitPane, IonTitle, IonToolbar } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+
+
+
+
+ Menu
+
+
+
+ Menu Content is 350px wide and has a blue dashed border
+
+
+
+
+
+
+ Main View
+
+
+
+ Main View Content
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/split-pane/theming/css-properties/vue.md b/static/usage/v6/split-pane/theming/css-properties/vue.md
new file mode 100644
index 00000000000..cc891eaeda1
--- /dev/null
+++ b/static/usage/v6/split-pane/theming/css-properties/vue.md
@@ -0,0 +1,45 @@
+```html
+
+
+
+
+
+ Menu
+
+
+
+ Menu Content is 350px wide and has a blue dashed border
+
+
+
+
+
+
+ Main View
+
+
+
+ Main View Content
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/tabs/router/angular/app_component_html.md b/static/usage/v6/tabs/router/angular/app_component_html.md
new file mode 100644
index 00000000000..7636539f28a
--- /dev/null
+++ b/static/usage/v6/tabs/router/angular/app_component_html.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v6/tabs/router/angular/app_module_ts.md b/static/usage/v6/tabs/router/angular/app_module_ts.md
new file mode 100644
index 00000000000..b2d3db7f33d
--- /dev/null
+++ b/static/usage/v6/tabs/router/angular/app_module_ts.md
@@ -0,0 +1,19 @@
+```ts
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { IonicModule } from '@ionic/angular';
+
+import { AppComponent } from './app.component';
+import { ExampleComponent } from './example.component';
+
+import { AppRoutingModule } from './app-routing.module';
+
+@NgModule({
+ imports: [BrowserModule, FormsModule, AppRoutingModule, IonicModule.forRoot()],
+ declarations: [AppComponent, ExampleComponent],
+ bootstrap: [AppComponent],
+})
+export class AppModule {}
+```
diff --git a/static/usage/v6/tabs/router/angular/app_routing_module_ts.md b/static/usage/v6/tabs/router/angular/app_routing_module_ts.md
new file mode 100644
index 00000000000..7ff1067030f
--- /dev/null
+++ b/static/usage/v6/tabs/router/angular/app_routing_module_ts.md
@@ -0,0 +1,42 @@
+```ts
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { ExampleComponent } from './example.component';
+
+@NgModule({
+ imports: [
+ RouterModule.forRoot([
+ {
+ path: '',
+ component: ExampleComponent,
+ children: [
+ {
+ path: '',
+ pathMatch: 'full',
+ redirectTo: 'home',
+ },
+ {
+ path: 'home',
+ loadChildren: () => import('./home/home-page.module').then((m) => m.HomePageModule),
+ },
+ {
+ path: 'radio',
+ loadChildren: () => import('./radio/radio-page.module').then((m) => m.RadioPageModule),
+ },
+ {
+ path: 'library',
+ loadChildren: () => import('./library/library-page.module').then((m) => m.LibraryPageModule),
+ },
+ {
+ path: 'search',
+ loadChildren: () => import('./search/search-page.module').then((m) => m.SearchPageModule),
+ },
+ ],
+ },
+ ]),
+ ],
+ exports: [RouterModule],
+})
+export class AppRoutingModule {}
+```
diff --git a/static/usage/v6/tabs/router/angular/example_component_html.md b/static/usage/v6/tabs/router/angular/example_component_html.md
new file mode 100644
index 00000000000..5b7b9b87a57
--- /dev/null
+++ b/static/usage/v6/tabs/router/angular/example_component_html.md
@@ -0,0 +1,24 @@
+```html
+
+
+
+
+
+
+ Listen Now
+
+
+
+ Radio
+
+
+
+ Library
+
+
+
+ Search
+
+
+
+```
diff --git a/static/usage/v6/tabs/router/angular/global_css.md b/static/usage/v6/tabs/router/angular/global_css.md
new file mode 100644
index 00000000000..a782d2d7f90
--- /dev/null
+++ b/static/usage/v6/tabs/router/angular/global_css.md
@@ -0,0 +1,8 @@
+```css
+.example-content {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+}
+```
diff --git a/static/usage/v6/tabs/router/angular/home_page_component_html.md b/static/usage/v6/tabs/router/angular/home_page_component_html.md
new file mode 100644
index 00000000000..7ef5bc47333
--- /dev/null
+++ b/static/usage/v6/tabs/router/angular/home_page_component_html.md
@@ -0,0 +1,10 @@
+```html
+
+
+ Listen now
+
+
+
+ Listen now content
+
+```
diff --git a/static/usage/v6/tabs/router/angular/home_page_component_ts.md b/static/usage/v6/tabs/router/angular/home_page_component_ts.md
new file mode 100644
index 00000000000..9e2ef0a3e8c
--- /dev/null
+++ b/static/usage/v6/tabs/router/angular/home_page_component_ts.md
@@ -0,0 +1,9 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-home-page',
+ templateUrl: './home-page.component.html',
+})
+export class HomePageComponent {}
+```
diff --git a/static/usage/v6/tabs/router/angular/home_page_module_ts.md b/static/usage/v6/tabs/router/angular/home_page_module_ts.md
new file mode 100644
index 00000000000..2a1fb15b460
--- /dev/null
+++ b/static/usage/v6/tabs/router/angular/home_page_module_ts.md
@@ -0,0 +1,14 @@
+```ts
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { HomePageComponent } from './home-page.component';
+
+import { IonicModule } from '@ionic/angular';
+
+@NgModule({
+ imports: [IonicModule, RouterModule.forChild([{ path: '', component: HomePageComponent }])],
+ declarations: [HomePageComponent],
+ exports: [HomePageComponent],
+})
+export class HomePageModule {}
+```
diff --git a/static/usage/v6/tabs/router/angular/library_page_component_html.md b/static/usage/v6/tabs/router/angular/library_page_component_html.md
new file mode 100644
index 00000000000..a0df4a6d684
--- /dev/null
+++ b/static/usage/v6/tabs/router/angular/library_page_component_html.md
@@ -0,0 +1,10 @@
+```html
+
+
+ Library
+
+
+
+ Library content
+
+```
diff --git a/static/usage/v6/tabs/router/angular/library_page_component_ts.md b/static/usage/v6/tabs/router/angular/library_page_component_ts.md
new file mode 100644
index 00000000000..f5a92a4868a
--- /dev/null
+++ b/static/usage/v6/tabs/router/angular/library_page_component_ts.md
@@ -0,0 +1,9 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-library-page',
+ templateUrl: './library-page.component.html',
+})
+export class LibraryPageComponent {}
+```
diff --git a/static/usage/v6/tabs/router/angular/library_page_module_ts.md b/static/usage/v6/tabs/router/angular/library_page_module_ts.md
new file mode 100644
index 00000000000..8e2ab48cf39
--- /dev/null
+++ b/static/usage/v6/tabs/router/angular/library_page_module_ts.md
@@ -0,0 +1,14 @@
+```ts
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { IonicModule } from '@ionic/angular';
+
+import { LibraryPageComponent } from './library-page.component';
+
+@NgModule({
+ imports: [IonicModule, RouterModule.forChild([{ path: '', component: LibraryPageComponent }])],
+ declarations: [LibraryPageComponent],
+ exports: [LibraryPageComponent],
+})
+export class LibraryPageModule {}
+```
diff --git a/static/usage/v6/tabs/router/angular/radio_page_component_html.md b/static/usage/v6/tabs/router/angular/radio_page_component_html.md
new file mode 100644
index 00000000000..e6affd4132f
--- /dev/null
+++ b/static/usage/v6/tabs/router/angular/radio_page_component_html.md
@@ -0,0 +1,10 @@
+```html
+
+
+ Radio
+
+
+
+ Radio content
+
+```
diff --git a/static/usage/v6/tabs/router/angular/radio_page_component_ts.md b/static/usage/v6/tabs/router/angular/radio_page_component_ts.md
new file mode 100644
index 00000000000..d29209c00dd
--- /dev/null
+++ b/static/usage/v6/tabs/router/angular/radio_page_component_ts.md
@@ -0,0 +1,9 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-radio-page',
+ templateUrl: './radio-page.component.html',
+})
+export class RadioPageComponent {}
+```
diff --git a/static/usage/v6/tabs/router/angular/radio_page_module_ts.md b/static/usage/v6/tabs/router/angular/radio_page_module_ts.md
new file mode 100644
index 00000000000..f50a0088632
--- /dev/null
+++ b/static/usage/v6/tabs/router/angular/radio_page_module_ts.md
@@ -0,0 +1,14 @@
+```ts
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { RadioPageComponent } from './radio-page.component';
+
+import { IonicModule } from '@ionic/angular';
+
+@NgModule({
+ imports: [IonicModule, RouterModule.forChild([{ path: '', component: RadioPageComponent }])],
+ declarations: [RadioPageComponent],
+ exports: [RadioPageComponent],
+})
+export class RadioPageModule {}
+```
diff --git a/static/usage/v6/tabs/router/angular/search_page_component_html.md b/static/usage/v6/tabs/router/angular/search_page_component_html.md
new file mode 100644
index 00000000000..91cb5c6f2db
--- /dev/null
+++ b/static/usage/v6/tabs/router/angular/search_page_component_html.md
@@ -0,0 +1,10 @@
+```html
+
+
+ Search
+
+
+
+ Search content
+
+```
diff --git a/static/usage/v6/tabs/router/angular/search_page_component_ts.md b/static/usage/v6/tabs/router/angular/search_page_component_ts.md
new file mode 100644
index 00000000000..bd6e723d332
--- /dev/null
+++ b/static/usage/v6/tabs/router/angular/search_page_component_ts.md
@@ -0,0 +1,9 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-search-page',
+ templateUrl: './search-page.component.html',
+})
+export class SearchPageComponent {}
+```
diff --git a/static/usage/v6/tabs/router/angular/search_page_module_ts.md b/static/usage/v6/tabs/router/angular/search_page_module_ts.md
new file mode 100644
index 00000000000..a1d599c5d9b
--- /dev/null
+++ b/static/usage/v6/tabs/router/angular/search_page_module_ts.md
@@ -0,0 +1,14 @@
+```ts
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { SearchPageComponent } from './search-page.component';
+
+import { IonicModule } from '@ionic/angular';
+
+@NgModule({
+ imports: [IonicModule, RouterModule.forChild([{ path: '', component: SearchPageComponent }])],
+ declarations: [SearchPageComponent],
+ exports: [SearchPageComponent],
+})
+export class SearchPageModule {}
+```
diff --git a/static/usage/v6/tabs/router/demo.html b/static/usage/v6/tabs/router/demo.html
new file mode 100644
index 00000000000..335bdccc86f
--- /dev/null
+++ b/static/usage/v6/tabs/router/demo.html
@@ -0,0 +1,125 @@
+
+
+
+
+
+
+ Tabs
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Listen now
+
+
+
+
+ Listen now content
+
+
+
+
+
+ Radio
+
+
+
+
+ Radio content
+
+
+
+
+
+ Library
+
+
+
+
+ Library content
+
+
+
+
+
+ Search
+
+
+
+
+ Search content
+
+
+
+
+
+ Listen now
+
+
+
+ Listen now content
+
+
+
+
+ Radio
+
+
+
+ Radio content
+
+
+
+
+ Library
+
+
+
+ Library content
+
+
+
+
+ Search
+
+
+
+ Search content
+
+
+ Listen now content
+
+
+
+);
+
+export default HomePage;
+```
diff --git a/static/usage/v6/tabs/router/react/library_page_tsx.md b/static/usage/v6/tabs/router/react/library_page_tsx.md
new file mode 100644
index 00000000000..383b6f115de
--- /dev/null
+++ b/static/usage/v6/tabs/router/react/library_page_tsx.md
@@ -0,0 +1,28 @@
+```tsx
+import React from 'react';
+import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react';
+
+const LibraryPage = () => (
+ <>
+
+
+ Library
+
+
+
+
+ Library content
+
+
+
+);
+
+export default LibraryPage;
+```
diff --git a/static/usage/v6/tabs/router/react/main_tsx.md b/static/usage/v6/tabs/router/react/main_tsx.md
new file mode 100644
index 00000000000..b5005ef3778
--- /dev/null
+++ b/static/usage/v6/tabs/router/react/main_tsx.md
@@ -0,0 +1,58 @@
+```tsx
+import React from 'react';
+import { IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel, IonRouterOutlet } from '@ionic/react';
+import { IonReactRouter } from '@ionic/react-router';
+
+import { Route, Redirect } from 'react-router';
+
+import { playCircle, radio, library, search } from 'ionicons/icons';
+
+import HomePage from './pages/HomePage';
+import RadioPage from './pages/RadioPage';
+import LibraryPage from './pages/LibraryPage';
+import SearchPage from './pages/SearchPage';
+
+function Example() {
+ return (
+
+
+
+
+ {/*
+ Use the render method to reduce the number of renders your component will have due to a route change.
+
+ Use the component prop when your component depends on the RouterComponentProps passed in automatically.
+ */}
+ } exact={true} />
+ } exact={true} />
+ } exact={true} />
+ } exact={true} />
+
+
+
+
+
+ Listen now
+
+
+
+
+ Radio
+
+
+
+
+ Library
+
+
+
+
+ Search
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/tabs/router/react/radio_page_tsx.md b/static/usage/v6/tabs/router/react/radio_page_tsx.md
new file mode 100644
index 00000000000..d0e432c3a58
--- /dev/null
+++ b/static/usage/v6/tabs/router/react/radio_page_tsx.md
@@ -0,0 +1,28 @@
+```tsx
+import React from 'react';
+import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react';
+
+const RadioPage = () => (
+ <>
+
+
+ Radio
+
+
+
+
+ Radio content
+
+
+
+);
+
+export default RadioPage;
+```
diff --git a/static/usage/v6/tabs/router/react/search_page_tsx.md b/static/usage/v6/tabs/router/react/search_page_tsx.md
new file mode 100644
index 00000000000..3d51b374830
--- /dev/null
+++ b/static/usage/v6/tabs/router/react/search_page_tsx.md
@@ -0,0 +1,28 @@
+```tsx
+import React from 'react';
+import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react';
+
+const SearchPage = () => (
+ <>
+
+
+ Search
+
+
+
+
+ Search content
+
+
+
+);
+
+export default SearchPage;
+```
diff --git a/static/usage/v6/tabs/router/vue.md b/static/usage/v6/tabs/router/vue.md
new file mode 100644
index 00000000000..091cabaa6f8
--- /dev/null
+++ b/static/usage/v6/tabs/router/vue.md
@@ -0,0 +1,81 @@
+```html
+
+
+
+
+
+
+ Listen now
+
+
+
+ Listen now content
+
+
+
+
+
+ Radio
+
+
+
+ Radio content
+
+
+
+
+
+ Library
+
+
+
+ Library content
+
+
+
+
+
+ Search
+
+
+
+ Search content
+
+
+
+
+
+ Listen Now
+
+
+
+ Radio
+
+
+
+ Library
+
+
+
+ Search
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/tabs/router/vue/app_vue.md b/static/usage/v6/tabs/router/vue/app_vue.md
new file mode 100644
index 00000000000..b5f330406db
--- /dev/null
+++ b/static/usage/v6/tabs/router/vue/app_vue.md
@@ -0,0 +1,20 @@
+```html
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/tabs/router/vue/example_vue.md b/static/usage/v6/tabs/router/vue/example_vue.md
new file mode 100644
index 00000000000..846b8b4d621
--- /dev/null
+++ b/static/usage/v6/tabs/router/vue/example_vue.md
@@ -0,0 +1,48 @@
+```html
+
+
+
+
+
+
+
+ Listen now
+
+
+
+
+ Radio
+
+
+
+
+ Library
+
+
+
+
+ Search
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/tabs/router/vue/home_page_vue.md b/static/usage/v6/tabs/router/vue/home_page_vue.md
new file mode 100644
index 00000000000..9d809b9a70d
--- /dev/null
+++ b/static/usage/v6/tabs/router/vue/home_page_vue.md
@@ -0,0 +1,31 @@
+```html
+
+
+
+
+
+
+ Listen now
+
+
+
+ Listen now content
+
+
+
+
+
+```
diff --git a/static/usage/v6/tabs/router/vue/library_page_vue.md b/static/usage/v6/tabs/router/vue/library_page_vue.md
new file mode 100644
index 00000000000..b46e1dec9d7
--- /dev/null
+++ b/static/usage/v6/tabs/router/vue/library_page_vue.md
@@ -0,0 +1,31 @@
+```html
+
+
+
+
+
+
+ Library
+
+
+
+ Library content
+
+
+
+
+
+```
diff --git a/static/usage/v6/tabs/router/vue/main_ts.md b/static/usage/v6/tabs/router/vue/main_ts.md
new file mode 100644
index 00000000000..d3253963fa5
--- /dev/null
+++ b/static/usage/v6/tabs/router/vue/main_ts.md
@@ -0,0 +1,32 @@
+```ts
+import { createApp } from 'vue';
+import { IonicVue } from '@ionic/vue';
+
+import App from './App.vue';
+import router from './router';
+
+/* Core CSS required for Ionic components to work properly */
+import '@ionic/vue/css/core.css';
+
+/* Basic CSS for apps built with Ionic */
+import '@ionic/vue/css/normalize.css';
+import '@ionic/vue/css/structure.css';
+import '@ionic/vue/css/typography.css';
+
+/* Optional CSS utils that can be commented out */
+import '@ionic/vue/css/padding.css';
+import '@ionic/vue/css/float-elements.css';
+import '@ionic/vue/css/text-alignment.css';
+import '@ionic/vue/css/text-transformation.css';
+import '@ionic/vue/css/flex-utils.css';
+import '@ionic/vue/css/display.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+const app = createApp(App).use(IonicVue).use(router);
+
+router.isReady().then(() => {
+ app.mount('#app');
+});
+```
diff --git a/static/usage/v6/tabs/router/vue/radio_page_vue.md b/static/usage/v6/tabs/router/vue/radio_page_vue.md
new file mode 100644
index 00000000000..5f65a8963cf
--- /dev/null
+++ b/static/usage/v6/tabs/router/vue/radio_page_vue.md
@@ -0,0 +1,31 @@
+```html
+
+
+
+
+
+
+ Radio
+
+
+
+ Radio content
+
+
+
+
+
+```
diff --git a/static/usage/v6/tabs/router/vue/router_ts.md b/static/usage/v6/tabs/router/vue/router_ts.md
new file mode 100644
index 00000000000..3279c38def4
--- /dev/null
+++ b/static/usage/v6/tabs/router/vue/router_ts.md
@@ -0,0 +1,46 @@
+```ts
+import { createRouter, createWebHistory } from '@ionic/vue-router';
+import { RouteRecordRaw } from 'vue-router';
+import Example from './components/Example.vue';
+
+const routes: Array = [
+ {
+ path: '/',
+ redirect: '/home',
+ },
+ {
+ path: '/',
+ component: Example,
+ children: [
+ {
+ path: '',
+ redirect: '/home',
+ },
+ {
+ path: 'home',
+ component: () => import('./views/HomePage.vue'),
+ },
+ {
+ path: 'radio',
+ component: () => import('./views/RadioPage.vue'),
+ },
+ {
+ path: 'library',
+ component: () => import('./views/LibraryPage.vue'),
+ },
+ {
+ path: 'search',
+ component: () => import('./views/SearchPage.vue'),
+ },
+ ],
+ },
+];
+
+const router = createRouter({
+ // Use: createWebHistory(process.env.BASE_URL) in your app
+ history: createWebHistory(),
+ routes,
+});
+
+export default router;
+```
diff --git a/static/usage/v6/tabs/router/vue/search_page_vue.md b/static/usage/v6/tabs/router/vue/search_page_vue.md
new file mode 100644
index 00000000000..f85eeb9c649
--- /dev/null
+++ b/static/usage/v6/tabs/router/vue/search_page_vue.md
@@ -0,0 +1,31 @@
+```html
+
+
+
+
+
+
+ Search
+
+
+
+ Search content
+
+
+
+
+
+```
diff --git a/static/usage/v6/text/basic/angular.md b/static/usage/v6/text/basic/angular.md
new file mode 100644
index 00000000000..fb2f6064fba
--- /dev/null
+++ b/static/usage/v6/text/basic/angular.md
@@ -0,0 +1,21 @@
+```html
+
+ H1: The quick brown fox jumps over the lazy dog
+
+
+
+ H2: The quick brown fox jumps over the lazy dog
+
+
+
+ H3: The quick brown fox jumps over the lazy dog
+
+
+
+
+ I saw a werewolf with a Chinese menu in his hand.
+ Walking through the streets of Soho in the rain.
+ He was looking for a place called Lee Ho Fook's.
+ Gonna get a big dish of beef chow mein.
+
+```
diff --git a/static/usage/v6/text/basic/demo.html b/static/usage/v6/text/basic/demo.html
new file mode 100644
index 00000000000..7dda6c901cb
--- /dev/null
+++ b/static/usage/v6/text/basic/demo.html
@@ -0,0 +1,61 @@
+
+
+
+
+
+
+ Text
+
+
+
+
+
+
+
+
+
+
+
+
+
+ H1: The quick brown fox jumps over the lazy dog
+
+
+
+ H2: The quick brown fox jumps over the lazy dog
+
+
+
+ H3: The quick brown fox jumps over the lazy dog
+
+
+
+
+
+
+ I saw a werewolf with a Chinese menu in his hand.
+ Walking through the streets of Soho in the rain.
+ He was looking for a place called Lee Ho Fook's.
+ Gonna get a big dish of beef chow mein.
+
+
H1: The quick brown fox jumps over the lazy dog
+
+
+
+ H2: The quick brown fox jumps over the lazy dog
+
+
+
+ H3: The quick brown fox jumps over the lazy dog
+
+
+
+
+ I saw a werewolf with a Chinese menu in his hand.
+ Walking through the streets of Soho in the rain.
+ He was looking for a place called Lee Ho Fook's.
+ Gonna get a big dish of beef chow mein.
+
+```
diff --git a/static/usage/v6/text/basic/react.md b/static/usage/v6/text/basic/react.md
new file mode 100644
index 00000000000..dac54e84471
--- /dev/null
+++ b/static/usage/v6/text/basic/react.md
@@ -0,0 +1,32 @@
+```tsx
+import React from 'react';
+import { IonText, IonIcon } from '@ionic/react';
+import { warning } from 'ionicons/icons';
+
+function Example() {
+ return (
+ <>
+
+ H1: The quick brown fox jumps over the lazy dog
+
+
+
+ H2: The quick brown fox jumps over the lazy dog
+
+
+
+ H3: The quick brown fox jumps over the lazy dog
+
+
+
+
+ I saw a werewolf with a Chinese menu in his hand.
+ Walking through the streets of Soho in the rain.
+ He was looking for a place called Lee Ho Fook's.
+ Gonna get a big dish of beef chow mein.
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/text/basic/vue.md b/static/usage/v6/text/basic/vue.md
new file mode 100644
index 00000000000..742167bf9f1
--- /dev/null
+++ b/static/usage/v6/text/basic/vue.md
@@ -0,0 +1,38 @@
+```html
+
+
+ H1: The quick brown fox jumps over the lazy dog
+
+
+
+ H2: The quick brown fox jumps over the lazy dog
+
+
+
+ H3: The quick brown fox jumps over the lazy dog
+
+
+
+
+ I saw a werewolf with a Chinese menu in his hand.
+ Walking through the streets of Soho in the rain.
+ He was looking for a place called Lee Ho Fook's.
+ Gonna get a big dish of beef chow mein.
+
+
+
+
+```
diff --git a/static/usage/v6/textarea/autogrow/angular.md b/static/usage/v6/textarea/autogrow/angular.md
new file mode 100644
index 00000000000..5ff7394eec0
--- /dev/null
+++ b/static/usage/v6/textarea/autogrow/angular.md
@@ -0,0 +1,7 @@
+```html
+
+
+
+
+```
diff --git a/static/usage/v6/textarea/autogrow/demo.html b/static/usage/v6/textarea/autogrow/demo.html
new file mode 100644
index 00000000000..07434619b22
--- /dev/null
+++ b/static/usage/v6/textarea/autogrow/demo.html
@@ -0,0 +1,38 @@
+
+
+
+
+
+
+ Textarea - Autogrow
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/textarea/autogrow/index.md b/static/usage/v6/textarea/autogrow/index.md
new file mode 100644
index 00000000000..9d0efc4679e
--- /dev/null
+++ b/static/usage/v6/textarea/autogrow/index.md
@@ -0,0 +1,13 @@
+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/v6/textarea/autogrow/javascript.md b/static/usage/v6/textarea/autogrow/javascript.md
new file mode 100644
index 00000000000..bea62987f5e
--- /dev/null
+++ b/static/usage/v6/textarea/autogrow/javascript.md
@@ -0,0 +1,7 @@
+```html
+
+
+
+
+```
diff --git a/static/usage/v6/textarea/autogrow/react.md b/static/usage/v6/textarea/autogrow/react.md
new file mode 100644
index 00000000000..28d11b28efc
--- /dev/null
+++ b/static/usage/v6/textarea/autogrow/react.md
@@ -0,0 +1,16 @@
+```tsx
+import React from 'react';
+import { IonItem, IonTextarea } from '@ionic/react';
+function Example() {
+ return (
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/textarea/autogrow/vue.md b/static/usage/v6/textarea/autogrow/vue.md
new file mode 100644
index 00000000000..824ada24909
--- /dev/null
+++ b/static/usage/v6/textarea/autogrow/vue.md
@@ -0,0 +1,18 @@
+```html
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/textarea/basic/angular.md b/static/usage/v6/textarea/basic/angular.md
new file mode 100644
index 00000000000..82392c0f2bc
--- /dev/null
+++ b/static/usage/v6/textarea/basic/angular.md
@@ -0,0 +1,16 @@
+```html
+
+
+ Regular textarea
+
+
+
+ Readonly textarea
+
+
+
+ Disabled textarea
+
+
+
+```
diff --git a/static/usage/v6/textarea/basic/demo.html b/static/usage/v6/textarea/basic/demo.html
new file mode 100644
index 00000000000..54d2bee2efb
--- /dev/null
+++ b/static/usage/v6/textarea/basic/demo.html
@@ -0,0 +1,43 @@
+
+
+
+
+
+
+ Textarea - Basic Usage
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Regular textarea
+
+
+
+ Readonly textarea
+
+
+
+ Disabled textarea
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/textarea/basic/index.md b/static/usage/v6/textarea/basic/index.md
new file mode 100644
index 00000000000..3325f10b870
--- /dev/null
+++ b/static/usage/v6/textarea/basic/index.md
@@ -0,0 +1,13 @@
+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/v6/textarea/basic/javascript.md b/static/usage/v6/textarea/basic/javascript.md
new file mode 100644
index 00000000000..fc1bdf3b50f
--- /dev/null
+++ b/static/usage/v6/textarea/basic/javascript.md
@@ -0,0 +1,16 @@
+```html
+
+
+ Regular textarea
+
+
+
+ Readonly textarea
+
+
+
+ Disabled textarea
+
+
+
+```
diff --git a/static/usage/v6/textarea/basic/react.md b/static/usage/v6/textarea/basic/react.md
new file mode 100644
index 00000000000..37c11aa5137
--- /dev/null
+++ b/static/usage/v6/textarea/basic/react.md
@@ -0,0 +1,23 @@
+```tsx
+import React from 'react';
+import { IonItem, IonLabel, IonList, IonTextarea } from '@ionic/react';
+function Example() {
+ return (
+
+
+ Regular textarea
+
+
+
+ Readonly textarea
+
+
+
+ Disabled textarea
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/textarea/basic/vue.md b/static/usage/v6/textarea/basic/vue.md
new file mode 100644
index 00000000000..df9f8873ade
--- /dev/null
+++ b/static/usage/v6/textarea/basic/vue.md
@@ -0,0 +1,27 @@
+```html
+
+
+
+ Regular textarea
+
+
+
+ Readonly textarea
+
+
+
+ Disabled textarea
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/textarea/clear-on-edit/angular.md b/static/usage/v6/textarea/clear-on-edit/angular.md
new file mode 100644
index 00000000000..409362189a3
--- /dev/null
+++ b/static/usage/v6/textarea/clear-on-edit/angular.md
@@ -0,0 +1,6 @@
+```html
+
+```
diff --git a/static/usage/v6/textarea/clear-on-edit/demo.html b/static/usage/v6/textarea/clear-on-edit/demo.html
new file mode 100644
index 00000000000..253bc7a2bc9
--- /dev/null
+++ b/static/usage/v6/textarea/clear-on-edit/demo.html
@@ -0,0 +1,31 @@
+
+
+
+
+
+
+ Textarea - Clear on Edit
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/textarea/clear-on-edit/index.md b/static/usage/v6/textarea/clear-on-edit/index.md
new file mode 100644
index 00000000000..4bb42164650
--- /dev/null
+++ b/static/usage/v6/textarea/clear-on-edit/index.md
@@ -0,0 +1,13 @@
+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/v6/textarea/clear-on-edit/javascript.md b/static/usage/v6/textarea/clear-on-edit/javascript.md
new file mode 100644
index 00000000000..1982d982013
--- /dev/null
+++ b/static/usage/v6/textarea/clear-on-edit/javascript.md
@@ -0,0 +1,6 @@
+```html
+
+```
diff --git a/static/usage/v6/textarea/clear-on-edit/react.md b/static/usage/v6/textarea/clear-on-edit/react.md
new file mode 100644
index 00000000000..62b8b7dcf7b
--- /dev/null
+++ b/static/usage/v6/textarea/clear-on-edit/react.md
@@ -0,0 +1,13 @@
+```tsx
+import React from 'react';
+import { IonTextarea } from '@ionic/react';
+function Example() {
+ return (
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/textarea/clear-on-edit/vue.md b/static/usage/v6/textarea/clear-on-edit/vue.md
new file mode 100644
index 00000000000..04deb37bf1e
--- /dev/null
+++ b/static/usage/v6/textarea/clear-on-edit/vue.md
@@ -0,0 +1,17 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v6/textarea/theming/angular/example_component_css.md b/static/usage/v6/textarea/theming/angular/example_component_css.md
new file mode 100644
index 00000000000..f36f2d0f144
--- /dev/null
+++ b/static/usage/v6/textarea/theming/angular/example_component_css.md
@@ -0,0 +1,10 @@
+```css
+ion-textarea.custom-textarea {
+ --background: #373737;
+ --color: #fff;
+ --padding-end: 10px;
+ --padding-start: 10px;
+ --placeholder-color: #ddd;
+ --placeholder-opacity: 0.8;
+}
+```
diff --git a/static/usage/v6/textarea/theming/angular/example_component_html.md b/static/usage/v6/textarea/theming/angular/example_component_html.md
new file mode 100644
index 00000000000..639c4e22a1f
--- /dev/null
+++ b/static/usage/v6/textarea/theming/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v6/textarea/theming/demo.html b/static/usage/v6/textarea/theming/demo.html
new file mode 100644
index 00000000000..556000b9591
--- /dev/null
+++ b/static/usage/v6/textarea/theming/demo.html
@@ -0,0 +1,38 @@
+
+
+
+
+
+
+ Textarea - Theming
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/textarea/theming/index.md b/static/usage/v6/textarea/theming/index.md
new file mode 100644
index 00000000000..3570856f99e
--- /dev/null
+++ b/static/usage/v6/textarea/theming/index.md
@@ -0,0 +1,33 @@
+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/v6/textarea/theming/javascript.md b/static/usage/v6/textarea/theming/javascript.md
new file mode 100644
index 00000000000..be7bfef12a7
--- /dev/null
+++ b/static/usage/v6/textarea/theming/javascript.md
@@ -0,0 +1,14 @@
+```html
+
+
+
+```
diff --git a/static/usage/v6/textarea/theming/react/main_css.md b/static/usage/v6/textarea/theming/react/main_css.md
new file mode 100644
index 00000000000..f36f2d0f144
--- /dev/null
+++ b/static/usage/v6/textarea/theming/react/main_css.md
@@ -0,0 +1,10 @@
+```css
+ion-textarea.custom-textarea {
+ --background: #373737;
+ --color: #fff;
+ --padding-end: 10px;
+ --padding-start: 10px;
+ --placeholder-color: #ddd;
+ --placeholder-opacity: 0.8;
+}
+```
diff --git a/static/usage/v6/textarea/theming/react/main_tsx.md b/static/usage/v6/textarea/theming/react/main_tsx.md
new file mode 100644
index 00000000000..2f5acbf2fdc
--- /dev/null
+++ b/static/usage/v6/textarea/theming/react/main_tsx.md
@@ -0,0 +1,11 @@
+```tsx
+import React from 'react';
+import { IonTextarea } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return ;
+}
+export default Example;
+```
diff --git a/static/usage/v6/textarea/theming/vue.md b/static/usage/v6/textarea/theming/vue.md
new file mode 100644
index 00000000000..b8f6639d8e8
--- /dev/null
+++ b/static/usage/v6/textarea/theming/vue.md
@@ -0,0 +1,25 @@
+```html
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/thumbnail/basic/angular.md b/static/usage/v6/thumbnail/basic/angular.md
new file mode 100644
index 00000000000..119cfb8ee9c
--- /dev/null
+++ b/static/usage/v6/thumbnail/basic/angular.md
@@ -0,0 +1,5 @@
+```html
+
+
+
+```
diff --git a/static/usage/v6/thumbnail/basic/demo.html b/static/usage/v6/thumbnail/basic/demo.html
new file mode 100644
index 00000000000..e3aabdff4c2
--- /dev/null
+++ b/static/usage/v6/thumbnail/basic/demo.html
@@ -0,0 +1,27 @@
+
+
+
+
+
+
+ Thumbnail
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Item Thumbnail
+
+
+
+
+
+
Scroll the list to see the title collapse.
+
+
+ Item 1
+ Item 2
+ Item 3
+ Item 4
+ Item 5
+ Item 6
+ Item 7
+ Item 8
+ Item 9
+ Item 10
+ Item 11
+ Item 12
+ Item 13
+ Item 14
+ Item 15
+ Item 16
+ Item 17
+ Item 18
+ Item 19
+ Item 20
+
+
+```
diff --git a/static/usage/v6/title/collapsible-large-title/basic/demo.html b/static/usage/v6/title/collapsible-large-title/basic/demo.html
new file mode 100644
index 00000000000..e67c7bd3a33
--- /dev/null
+++ b/static/usage/v6/title/collapsible-large-title/basic/demo.html
@@ -0,0 +1,59 @@
+
+
+
+
+
+
+ Title
+
+
+
+
+
+
+
+
+
+
+
+ Title
+
+
+
+
+
+ Title
+
+
+
+
+ Scroll the list to see the title collapse.
+
+
+
+ Item 1
+ Item 2
+ Item 3
+ Item 4
+ Item 5
+ Item 6
+ Item 7
+ Item 8
+ Item 9
+ Item 10
+ Item 11
+ Item 12
+ Item 13
+ Item 14
+ Item 15
+ Item 16
+ Item 17
+ Item 18
+ Item 19
+ Item 20
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/title/collapsible-large-title/basic/index.md b/static/usage/v6/title/collapsible-large-title/basic/index.md
new file mode 100644
index 00000000000..11869e671e5
--- /dev/null
+++ b/static/usage/v6/title/collapsible-large-title/basic/index.md
@@ -0,0 +1,16 @@
+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/v6/title/collapsible-large-title/basic/javascript.md b/static/usage/v6/title/collapsible-large-title/basic/javascript.md
new file mode 100644
index 00000000000..77e7de55212
--- /dev/null
+++ b/static/usage/v6/title/collapsible-large-title/basic/javascript.md
@@ -0,0 +1,39 @@
+```html
+
+
+ Title
+
+
+
+
+
+ Title
+
+
+
+ Scroll the list to see the title collapse.
+
+
+ Item 1
+ Item 2
+ Item 3
+ Item 4
+ Item 5
+ Item 6
+ Item 7
+ Item 8
+ Item 9
+ Item 10
+ Item 11
+ Item 12
+ Item 13
+ Item 14
+ Item 15
+ Item 16
+ Item 17
+ Item 18
+ Item 19
+ Item 20
+
+
+```
diff --git a/static/usage/v6/title/collapsible-large-title/basic/react.md b/static/usage/v6/title/collapsible-large-title/basic/react.md
new file mode 100644
index 00000000000..cdcbdc557b6
--- /dev/null
+++ b/static/usage/v6/title/collapsible-large-title/basic/react.md
@@ -0,0 +1,49 @@
+```tsx
+import React from 'react';
+import { IonContent, IonHeader, IonToolbar, IonTitle, IonList, IonItem } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+ Title
+
+
+
+
+
+ Title
+
+
+
+ Scroll the list to see the title collapse.
+
+
+ Item 1
+ Item 2
+ Item 3
+ Item 4
+ Item 5
+ Item 6
+ Item 7
+ Item 8
+ Item 9
+ Item 10
+ Item 11
+ Item 12
+ Item 13
+ Item 14
+ Item 15
+ Item 16
+ Item 17
+ Item 18
+ Item 19
+ Item 20
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/title/collapsible-large-title/basic/vue.md b/static/usage/v6/title/collapsible-large-title/basic/vue.md
new file mode 100644
index 00000000000..de922b98bca
--- /dev/null
+++ b/static/usage/v6/title/collapsible-large-title/basic/vue.md
@@ -0,0 +1,50 @@
+```html
+
+
+
+ Title
+
+
+
+
+
+ Title
+
+
+
+ Scroll the list to see the title collapse.
+
+
+ Item 1
+ Item 2
+ Item 3
+ Item 4
+ Item 5
+ Item 6
+ Item 7
+ Item 8
+ Item 9
+ Item 10
+ Item 11
+ Item 12
+ Item 13
+ Item 14
+ Item 15
+ Item 16
+ Item 17
+ Item 18
+ Item 19
+ Item 20
+
+
+
+
+
+```
diff --git a/static/usage/v6/title/collapsible-large-title/buttons/angular.md b/static/usage/v6/title/collapsible-large-title/buttons/angular.md
new file mode 100644
index 00000000000..6f253b16cd4
--- /dev/null
+++ b/static/usage/v6/title/collapsible-large-title/buttons/angular.md
@@ -0,0 +1,45 @@
+```html
+
+
+ Title
+
+ Button
+
+
+
+
+
+
+ Title
+
+ Button
+
+
+
+
+ Scroll the list to see the title & buttons collapse.
+
+
+ Item 1
+ Item 2
+ Item 3
+ Item 4
+ Item 5
+ Item 6
+ Item 7
+ Item 8
+ Item 9
+ Item 10
+ Item 11
+ Item 12
+ Item 13
+ Item 14
+ Item 15
+ Item 16
+ Item 17
+ Item 18
+ Item 19
+ Item 20
+
+
+```
diff --git a/static/usage/v6/title/collapsible-large-title/buttons/demo.html b/static/usage/v6/title/collapsible-large-title/buttons/demo.html
new file mode 100644
index 00000000000..ecf88cf5305
--- /dev/null
+++ b/static/usage/v6/title/collapsible-large-title/buttons/demo.html
@@ -0,0 +1,65 @@
+
+
+
+
+
+
+ Title
+
+
+
+
+
+
+
+
+
+
+
+ Title
+
+ Button
+
+
+
+
+
+
+ Title
+
+ Button
+
+
+
+
+
+ Scroll the list to see the title & buttons collapse.
+
+
+
+ Item 1
+ Item 2
+ Item 3
+ Item 4
+ Item 5
+ Item 6
+ Item 7
+ Item 8
+ Item 9
+ Item 10
+ Item 11
+ Item 12
+ Item 13
+ Item 14
+ Item 15
+ Item 16
+ Item 17
+ Item 18
+ Item 19
+ Item 20
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/title/collapsible-large-title/buttons/index.md b/static/usage/v6/title/collapsible-large-title/buttons/index.md
new file mode 100644
index 00000000000..f427df176fb
--- /dev/null
+++ b/static/usage/v6/title/collapsible-large-title/buttons/index.md
@@ -0,0 +1,15 @@
+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/v6/title/collapsible-large-title/buttons/javascript.md b/static/usage/v6/title/collapsible-large-title/buttons/javascript.md
new file mode 100644
index 00000000000..feb1583e3b6
--- /dev/null
+++ b/static/usage/v6/title/collapsible-large-title/buttons/javascript.md
@@ -0,0 +1,45 @@
+```html
+
+
+ Title
+
+ Button
+
+
+
+
+
+
+ Title
+
+ Button
+
+
+
+
+ Scroll the list to see the title & buttons collapse.
+
+
+ Item 1
+ Item 2
+ Item 3
+ Item 4
+ Item 5
+ Item 6
+ Item 7
+ Item 8
+ Item 9
+ Item 10
+ Item 11
+ Item 12
+ Item 13
+ Item 14
+ Item 15
+ Item 16
+ Item 17
+ Item 18
+ Item 19
+ Item 20
+
+
+```
diff --git a/static/usage/v6/title/collapsible-large-title/buttons/react.md b/static/usage/v6/title/collapsible-large-title/buttons/react.md
new file mode 100644
index 00000000000..deca52428ce
--- /dev/null
+++ b/static/usage/v6/title/collapsible-large-title/buttons/react.md
@@ -0,0 +1,55 @@
+```tsx
+import React from 'react';
+import { IonContent, IonHeader, IonToolbar, IonTitle, IonList, IonItem, IonButtons, IonButton } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+ Title
+
+ Button
+
+
+
+
+
+
+ Title
+
+ Button
+
+
+
+
+ Scroll the list to see the title & buttons collapse.
+
+
+ Item 1
+ Item 2
+ Item 3
+ Item 4
+ Item 5
+ Item 6
+ Item 7
+ Item 8
+ Item 9
+ Item 10
+ Item 11
+ Item 12
+ Item 13
+ Item 14
+ Item 15
+ Item 16
+ Item 17
+ Item 18
+ Item 19
+ Item 20
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/title/collapsible-large-title/buttons/vue.md b/static/usage/v6/title/collapsible-large-title/buttons/vue.md
new file mode 100644
index 00000000000..2c23d8982ad
--- /dev/null
+++ b/static/usage/v6/title/collapsible-large-title/buttons/vue.md
@@ -0,0 +1,56 @@
+```html
+
+
+
+ Title
+
+ Button
+
+
+
+
+
+
+ Title
+
+ Button
+
+
+
+
+ Scroll the list to see the title & buttons collapse.
+
+
+ Item 1
+ Item 2
+ Item 3
+ Item 4
+ Item 5
+ Item 6
+ Item 7
+ Item 8
+ Item 9
+ Item 10
+ Item 11
+ Item 12
+ Item 13
+ Item 14
+ Item 15
+ Item 16
+ Item 17
+ Item 18
+ Item 19
+ Item 20
+
+
+
+
+
+```
diff --git a/static/usage/v6/title/theming/css-properties/angular/example_component_html.md b/static/usage/v6/title/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..31c40bb2ef7
--- /dev/null
+++ b/static/usage/v6/title/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,37 @@
+```html
+
+
+ Title
+
+
+
+
+
+ Title
+
+
+
+
+ Item 1
+ Item 2
+ Item 3
+ Item 4
+ Item 5
+ Item 6
+ Item 7
+ Item 8
+ Item 9
+ Item 10
+ Item 11
+ Item 12
+ Item 13
+ Item 14
+ Item 15
+ Item 16
+ Item 17
+ Item 18
+ Item 19
+ Item 20
+
+
+```
diff --git a/static/usage/v6/title/theming/css-properties/angular/global_css.md b/static/usage/v6/title/theming/css-properties/angular/global_css.md
new file mode 100644
index 00000000000..0da76c33423
--- /dev/null
+++ b/static/usage/v6/title/theming/css-properties/angular/global_css.md
@@ -0,0 +1,14 @@
+```css
+ion-title.title-large {
+ color: #c897d8;
+ font-size: 30px;
+}
+
+ion-title {
+ --color: #000;
+}
+
+ion-toolbar {
+ --background: #c897d8;
+}
+```
diff --git a/static/usage/v6/title/theming/css-properties/demo.html b/static/usage/v6/title/theming/css-properties/demo.html
new file mode 100644
index 00000000000..202131c46ac
--- /dev/null
+++ b/static/usage/v6/title/theming/css-properties/demo.html
@@ -0,0 +1,69 @@
+
+
+
+
+
+
+ Title
+
+
+
+
+
+
+
+
+
+
+
+
+ Title
+
+
+
+
+
+ Title
+
+
+
+
+ Item 1
+ Item 2
+ Item 3
+ Item 4
+ Item 5
+ Item 6
+ Item 7
+ Item 8
+ Item 9
+ Item 10
+ Item 11
+ Item 12
+ Item 13
+ Item 14
+ Item 15
+ Item 16
+ Item 17
+ Item 18
+ Item 19
+ Item 20
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/title/theming/css-properties/index.md b/static/usage/v6/title/theming/css-properties/index.md
new file mode 100644
index 00000000000..c08b16c85e7
--- /dev/null
+++ b/static/usage/v6/title/theming/css-properties/index.md
@@ -0,0 +1,34 @@
+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';
+
+
diff --git a/static/usage/v6/title/theming/css-properties/javascript.md b/static/usage/v6/title/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..443ca1bf39d
--- /dev/null
+++ b/static/usage/v6/title/theming/css-properties/javascript.md
@@ -0,0 +1,52 @@
+```html
+
+
+
+
+ Title
+
+
+
+
+
+ Title
+
+
+
+
+ Item 1
+ Item 2
+ Item 3
+ Item 4
+ Item 5
+ Item 6
+ Item 7
+ Item 8
+ Item 9
+ Item 10
+ Item 11
+ Item 12
+ Item 13
+ Item 14
+ Item 15
+ Item 16
+ Item 17
+ Item 18
+ Item 19
+ Item 20
+
+
+```
diff --git a/static/usage/v6/title/theming/css-properties/react/main_css.md b/static/usage/v6/title/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..0da76c33423
--- /dev/null
+++ b/static/usage/v6/title/theming/css-properties/react/main_css.md
@@ -0,0 +1,14 @@
+```css
+ion-title.title-large {
+ color: #c897d8;
+ font-size: 30px;
+}
+
+ion-title {
+ --color: #000;
+}
+
+ion-toolbar {
+ --background: #c897d8;
+}
+```
diff --git a/static/usage/v6/title/theming/css-properties/react/main_tsx.md b/static/usage/v6/title/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..5dc5b9d993b
--- /dev/null
+++ b/static/usage/v6/title/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,49 @@
+```tsx
+import React from 'react';
+import { IonContent, IonHeader, IonToolbar, IonTitle, IonList, IonItem } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+
+
+ Title
+
+
+
+
+
+ Title
+
+
+
+
+ Item 1
+ Item 2
+ Item 3
+ Item 4
+ Item 5
+ Item 6
+ Item 7
+ Item 8
+ Item 9
+ Item 10
+ Item 11
+ Item 12
+ Item 13
+ Item 14
+ Item 15
+ Item 16
+ Item 17
+ Item 18
+ Item 19
+ Item 20
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/title/theming/css-properties/vue.md b/static/usage/v6/title/theming/css-properties/vue.md
new file mode 100644
index 00000000000..dc85c93d3ab
--- /dev/null
+++ b/static/usage/v6/title/theming/css-properties/vue.md
@@ -0,0 +1,62 @@
+```html
+
+
+
+
+ Title
+
+
+
+
+
+ Title
+
+
+
+
+ Item 1
+ Item 2
+ Item 3
+ Item 4
+ Item 5
+ Item 6
+ Item 7
+ Item 8
+ Item 9
+ Item 10
+ Item 11
+ Item 12
+ Item 13
+ Item 14
+ Item 15
+ Item 16
+ Item 17
+ Item 18
+ Item 19
+ Item 20
+
+
+
+
+
+```
diff --git a/static/usage/v6/toast/buttons/angular/example_component_html.md b/static/usage/v6/toast/buttons/angular/example_component_html.md
new file mode 100644
index 00000000000..5d457cdbf2f
--- /dev/null
+++ b/static/usage/v6/toast/buttons/angular/example_component_html.md
@@ -0,0 +1,5 @@
+```html
+Click Me
+{{ handlerMessage }}
+{{ roleMessage }}
+```
\ No newline at end of file
diff --git a/static/usage/v6/toast/buttons/angular/example_component_ts.md b/static/usage/v6/toast/buttons/angular/example_component_ts.md
new file mode 100644
index 00000000000..54dc88ac35c
--- /dev/null
+++ b/static/usage/v6/toast/buttons/angular/example_component_ts.md
@@ -0,0 +1,39 @@
+```ts
+import { Component } from '@angular/core';
+import { ToastController } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ handlerMessage = '';
+ roleMessage = '';
+
+ constructor(private toastController: ToastController) {}
+
+ async presentToast() {
+ const toast = await this.toastController.create({
+ message: 'Hello World!',
+ duration: 3000,
+ buttons: [
+ {
+ text: 'More Info',
+ role: 'info',
+ handler: () => { this.handlerMessage = 'More Info clicked'; }
+ },
+ {
+ text: 'Dismiss',
+ role: 'cancel',
+ handler: () => { this.handlerMessage = 'Dismiss clicked'; }
+ }
+ ]
+ });
+
+ await toast.present();
+
+ const { role } = await toast.onDidDismiss();
+ this.roleMessage = `Dismissed with role: ${role}`;
+ }
+}
+```
\ No newline at end of file
diff --git a/static/usage/v6/toast/buttons/demo.html b/static/usage/v6/toast/buttons/demo.html
new file mode 100644
index 00000000000..261a6e53cc7
--- /dev/null
+++ b/static/usage/v6/toast/buttons/demo.html
@@ -0,0 +1,75 @@
+
+
+
+
+
+
+ Toast
+
+
+
+
+
+
+
+
+
+
+
+
+ Toast
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/toast/buttons/index.md b/static/usage/v6/toast/buttons/index.md
new file mode 100644
index 00000000000..5bd8e1f56ce
--- /dev/null
+++ b/static/usage/v6/toast/buttons/index.md
@@ -0,0 +1,25 @@
+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_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/v6/toast/buttons/javascript.md b/static/usage/v6/toast/buttons/javascript.md
new file mode 100644
index 00000000000..c5cea896bb3
--- /dev/null
+++ b/static/usage/v6/toast/buttons/javascript.md
@@ -0,0 +1,34 @@
+```html
+Click Me
+
+
+
+
+```
diff --git a/static/usage/v6/toast/buttons/react.md b/static/usage/v6/toast/buttons/react.md
new file mode 100644
index 00000000000..ac08a9b543b
--- /dev/null
+++ b/static/usage/v6/toast/buttons/react.md
@@ -0,0 +1,41 @@
+```tsx
+import React, { useState } from 'react';
+import { IonButton, useIonToast } from '@ionic/react';
+
+function Example() {
+ const [presentToast] = useIonToast();
+ const [handlerMessage, setHandlerMessage] = useState('');
+ const [roleMessage, setRoleMessage] = useState('');
+
+ return (
+ <>
+ {
+ presentToast({
+ message: 'Hello World!',
+ duration: 3000,
+ onDidDismiss: (e: CustomEvent) => setRoleMessage(`Dismissed with role: ${e.detail.role}`),
+ buttons: [
+ {
+ text: 'More Info',
+ role: 'info',
+ handler: () => { setHandlerMessage('More Info clicked'); }
+ },
+ {
+ text: 'Dismiss',
+ role: 'cancel',
+ handler: () => { setHandlerMessage('Dismiss clicked'); }
+ }
+ ]
+ })
+ }}
+ >
+ Click Me
+
+ {handlerMessage}
+ {roleMessage}
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/toast/buttons/vue.md b/static/usage/v6/toast/buttons/vue.md
new file mode 100644
index 00000000000..ec7da81c54c
--- /dev/null
+++ b/static/usage/v6/toast/buttons/vue.md
@@ -0,0 +1,46 @@
+```html
+
+ Click Me
+ {{ handlerMessage }}
+ {{ roleMessage }}
+
+
+
+```
diff --git a/static/usage/v6/toast/icon/angular/example_component_html.md b/static/usage/v6/toast/icon/angular/example_component_html.md
new file mode 100644
index 00000000000..976194efc1e
--- /dev/null
+++ b/static/usage/v6/toast/icon/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+Click Me
+```
\ No newline at end of file
diff --git a/static/usage/v6/toast/icon/angular/example_component_ts.md b/static/usage/v6/toast/icon/angular/example_component_ts.md
new file mode 100644
index 00000000000..addffa2daf9
--- /dev/null
+++ b/static/usage/v6/toast/icon/angular/example_component_ts.md
@@ -0,0 +1,22 @@
+```ts
+import { Component } from '@angular/core';
+import { ToastController } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ constructor(private toastController: ToastController) {}
+
+ async presentToast() {
+ const toast = await this.toastController.create({
+ message: 'Hello World!',
+ duration: 1500,
+ icon: 'globe'
+ });
+
+ await toast.present();
+ }
+}
+```
\ No newline at end of file
diff --git a/static/usage/v6/toast/icon/demo.html b/static/usage/v6/toast/icon/demo.html
new file mode 100644
index 00000000000..efecadbf937
--- /dev/null
+++ b/static/usage/v6/toast/icon/demo.html
@@ -0,0 +1,46 @@
+
+
+
+
+
+
+ Toast
+
+
+
+
+
+
+
+
+
+
+ Toast
+
+
+
+
+ Click Me
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/toast/icon/index.md b/static/usage/v6/toast/icon/index.md
new file mode 100644
index 00000000000..d636c54d905
--- /dev/null
+++ b/static/usage/v6/toast/icon/index.md
@@ -0,0 +1,25 @@
+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_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/v6/toast/icon/javascript.md b/static/usage/v6/toast/icon/javascript.md
new file mode 100644
index 00000000000..b63e8550ab3
--- /dev/null
+++ b/static/usage/v6/toast/icon/javascript.md
@@ -0,0 +1,15 @@
+```html
+Click Me
+
+
+```
diff --git a/static/usage/v6/toast/icon/react.md b/static/usage/v6/toast/icon/react.md
new file mode 100644
index 00000000000..25d758c16b6
--- /dev/null
+++ b/static/usage/v6/toast/icon/react.md
@@ -0,0 +1,24 @@
+```tsx
+import React from 'react';
+import { IonButton, useIonToast } from '@ionic/react';
+import { globe } from 'ionicons/icons';
+
+function Example() {
+ const [presentToast] = useIonToast();
+
+ return (
+ {
+ presentToast({
+ message: 'Hello World!',
+ duration: 1500,
+ icon: globe
+ })
+ }}
+ >
+ Click Me
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/toast/icon/vue.md b/static/usage/v6/toast/icon/vue.md
new file mode 100644
index 00000000000..d3a123f598b
--- /dev/null
+++ b/static/usage/v6/toast/icon/vue.md
@@ -0,0 +1,28 @@
+```html
+
+ Click Me
+
+
+
+```
diff --git a/static/usage/v6/toast/layout/angular/example_component_html.md b/static/usage/v6/toast/layout/angular/example_component_html.md
new file mode 100644
index 00000000000..8bd086f7ba5
--- /dev/null
+++ b/static/usage/v6/toast/layout/angular/example_component_html.md
@@ -0,0 +1,4 @@
+```html
+Open Baseline Layout Toast
+Click Stacked Layout Toast
+```
\ No newline at end of file
diff --git a/static/usage/v6/toast/layout/angular/example_component_ts.md b/static/usage/v6/toast/layout/angular/example_component_ts.md
new file mode 100644
index 00000000000..6e8c63a9b58
--- /dev/null
+++ b/static/usage/v6/toast/layout/angular/example_component_ts.md
@@ -0,0 +1,41 @@
+```ts
+import { Component } from '@angular/core';
+import { ToastController } from '@ionic/angular';
+import type { ToastOptions } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+
+ constructor(private toastController: ToastController) {}
+
+ async presentToast(opts: ToastOptions) {
+ const toast = await this.toastController.create(opts);
+
+ await toast.present();
+ }
+
+ async presentBaselineToast() {
+ await this.presentToast({
+ duration: 3000,
+ message: "This is a toast with a long message and a button that appears on the same line.",
+ buttons: [
+ { text: 'Action With Long Text'}
+ ]
+ });
+ }
+
+ async presentStackedToast() {
+ await this.presentToast({
+ duration: 3000,
+ message: "This is a toast with a long message and a button that appears on the next line.",
+ buttons: [
+ { text: 'Action With Long Text'}
+ ],
+ layout: "stacked"
+ });
+ }
+}
+```
\ No newline at end of file
diff --git a/static/usage/v6/toast/layout/demo.html b/static/usage/v6/toast/layout/demo.html
new file mode 100644
index 00000000000..79942ae2484
--- /dev/null
+++ b/static/usage/v6/toast/layout/demo.html
@@ -0,0 +1,62 @@
+
+
+
+
+
+
+ Toast
+
+
+
+
+
+
+
+
+
+
+ Toast
+
+
+
+ Open Baseline Layout Toast
+ Click Stacked Layout Toast
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v6/toast/layout/index.md b/static/usage/v6/toast/layout/index.md
new file mode 100644
index 00000000000..331eef6b0f5
--- /dev/null
+++ b/static/usage/v6/toast/layout/index.md
@@ -0,0 +1,25 @@
+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_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/v6/toast/layout/javascript.md b/static/usage/v6/toast/layout/javascript.md
new file mode 100644
index 00000000000..2350799f7e1
--- /dev/null
+++ b/static/usage/v6/toast/layout/javascript.md
@@ -0,0 +1,33 @@
+```html
+Open Baseline Layout Toast
+Click Stacked Layout Toast
+
+
+```
diff --git a/static/usage/v6/toast/layout/react.md b/static/usage/v6/toast/layout/react.md
new file mode 100644
index 00000000000..68813f1eb1f
--- /dev/null
+++ b/static/usage/v6/toast/layout/react.md
@@ -0,0 +1,41 @@
+```tsx
+import React from 'react';
+import { IonButton, useIonToast } from '@ionic/react';
+
+function Example() {
+ const [presentToast] = useIonToast();
+
+ return (
+ <>
+ {
+ presentToast({
+ duration: 3000,
+ message: "This is a toast with a long message and a button that appears on the next line.",
+ buttons: [
+ { text: 'Action With Long Text'}
+ ]
+ })
+ }}
+ >
+ Open Baseline Layout Toast
+
+ {
+ presentToast({
+ duration: 3000,
+ message: "This is a toast with a long message and a button that appears on the next line.",
+ buttons: [
+ { text: 'Action With Long Text'}
+ ],
+ layout: "stacked"
+ })
+ }}
+ >
+ Open Stacked Layout Toast
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/toast/layout/vue.md b/static/usage/v6/toast/layout/vue.md
new file mode 100644
index 00000000000..5b884ea7caf
--- /dev/null
+++ b/static/usage/v6/toast/layout/vue.md
@@ -0,0 +1,46 @@
+```html
+
+ Open Baseline Layout Toast
+ Click Stacked Layout Toast
+
+
+
+```
diff --git a/static/usage/v6/toast/presenting/controller/angular/example_component_html.md b/static/usage/v6/toast/presenting/controller/angular/example_component_html.md
new file mode 100644
index 00000000000..962fcd0e355
--- /dev/null
+++ b/static/usage/v6/toast/presenting/controller/angular/example_component_html.md
@@ -0,0 +1,5 @@
+```html
+Present Toast At the Top
+Present Toast At the Middle
+Present Toast At the Bottom
+```
\ No newline at end of file
diff --git a/static/usage/v6/toast/presenting/controller/angular/example_component_ts.md b/static/usage/v6/toast/presenting/controller/angular/example_component_ts.md
new file mode 100644
index 00000000000..c772728c3c1
--- /dev/null
+++ b/static/usage/v6/toast/presenting/controller/angular/example_component_ts.md
@@ -0,0 +1,22 @@
+```ts
+import { Component } from '@angular/core';
+import { ToastController } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ constructor(private toastController: ToastController) {}
+
+ async presentToast(position: 'top' | 'middle' | 'bottom') {
+ const toast = await this.toastController.create({
+ message: 'Hello World!',
+ duration: 1500,
+ position: position
+ });
+
+ await toast.present();
+ }
+}
+```
\ No newline at end of file
diff --git a/static/usage/v6/toast/presenting/controller/demo.html b/static/usage/v6/toast/presenting/controller/demo.html
new file mode 100644
index 00000000000..24cc1fcb8d0
--- /dev/null
+++ b/static/usage/v6/toast/presenting/controller/demo.html
@@ -0,0 +1,54 @@
+
+
+
+
+
+
+ Toast
+
+
+
+
+
+
+
+
+
+
+
+
+ Toast
+
+
+
+
+ Present Toast At the Top
+ Present Toast At the Middle
+ Present Toast At the Bottom
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/toast/presenting/controller/index.md b/static/usage/v6/toast/presenting/controller/index.md
new file mode 100644
index 00000000000..492699916c0
--- /dev/null
+++ b/static/usage/v6/toast/presenting/controller/index.md
@@ -0,0 +1,25 @@
+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_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/v6/toast/presenting/controller/javascript.md b/static/usage/v6/toast/presenting/controller/javascript.md
new file mode 100644
index 00000000000..5260ba8d1a1
--- /dev/null
+++ b/static/usage/v6/toast/presenting/controller/javascript.md
@@ -0,0 +1,17 @@
+```html
+Present Toast At the Top
+Present Toast At the Middle
+Present Toast At the Bottom
+
+
+```
diff --git a/static/usage/v6/toast/presenting/controller/react.md b/static/usage/v6/toast/presenting/controller/react.md
new file mode 100644
index 00000000000..1dd38b3cd48
--- /dev/null
+++ b/static/usage/v6/toast/presenting/controller/react.md
@@ -0,0 +1,25 @@
+```tsx
+import React from 'react';
+import { IonButton, useIonToast } from '@ionic/react';
+
+function Example() {
+ const [present] = useIonToast();
+
+ const presentToast = (position: 'top' | 'middle' | 'bottom') => {
+ present({
+ message: 'Hello World!',
+ duration: 1500,
+ position: position
+ });
+ };
+
+ return (
+ <>
+ presentToast('top')}>Present Toast At the Top
+ presentToast('middle')}>Present Toast At the Middle
+ presentToast('bottom')}>Present Toast At the Bottom
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/toast/presenting/controller/vue.md b/static/usage/v6/toast/presenting/controller/vue.md
new file mode 100644
index 00000000000..ac520d0e7b9
--- /dev/null
+++ b/static/usage/v6/toast/presenting/controller/vue.md
@@ -0,0 +1,26 @@
+```html
+
+ Present Toast At the Top
+ Present Toast At the Middle
+ Present Toast At the Bottom
+
+
+
+```
diff --git a/static/usage/v6/toast/theming/angular/example_component_html.md b/static/usage/v6/toast/theming/angular/example_component_html.md
new file mode 100644
index 00000000000..91e6579dfa8
--- /dev/null
+++ b/static/usage/v6/toast/theming/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+Click Me
+```
diff --git a/static/usage/v6/toast/theming/angular/example_component_ts.md b/static/usage/v6/toast/theming/angular/example_component_ts.md
new file mode 100644
index 00000000000..62c8151b0f4
--- /dev/null
+++ b/static/usage/v6/toast/theming/angular/example_component_ts.md
@@ -0,0 +1,28 @@
+```ts
+import { Component } from '@angular/core';
+import { ToastController } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ constructor(private toastController: ToastController) {}
+
+ async presentToast() {
+ const toast = await this.toastController.create({
+ message: 'Hello Styled World!',
+ duration: 3000,
+ cssClass: 'custom-toast',
+ buttons: [
+ {
+ text: 'Dismiss',
+ role: 'cancel'
+ }
+ ],
+ });
+
+ await toast.present();
+ }
+}
+```
diff --git a/static/usage/v6/toast/theming/angular/global_css.md b/static/usage/v6/toast/theming/angular/global_css.md
new file mode 100644
index 00000000000..4d261622074
--- /dev/null
+++ b/static/usage/v6/toast/theming/angular/global_css.md
@@ -0,0 +1,17 @@
+```css
+ion-toast.custom-toast {
+ --background: #F4F4FA;
+ --box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, 0.2);
+ --color: #4b4a50;
+}
+
+ion-toast.custom-toast::part(message) {
+ font-style: italic;
+}
+
+ion-toast.custom-toast::part(button) {
+ border-left: 1px solid #d2d2d2;
+ color: #030207;
+ font-size: 15px;
+}
+```
\ No newline at end of file
diff --git a/static/usage/v6/toast/theming/demo.html b/static/usage/v6/toast/theming/demo.html
new file mode 100644
index 00000000000..cdbffb5541c
--- /dev/null
+++ b/static/usage/v6/toast/theming/demo.html
@@ -0,0 +1,70 @@
+
+
+
+
+
+
+ Toast
+
+
+
+
+
+
+
+
+
+
+
+
+ Toast
+
+
+
+
+ Click Me
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/toast/theming/index.md b/static/usage/v6/toast/theming/index.md
new file mode 100644
index 00000000000..0e5b1b56e72
--- /dev/null
+++ b/static/usage/v6/toast/theming/index.md
@@ -0,0 +1,34 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_global_css from './angular/global_css.md';
+
+
diff --git a/static/usage/v6/toast/theming/javascript.md b/static/usage/v6/toast/theming/javascript.md
new file mode 100644
index 00000000000..b540eccaaf7
--- /dev/null
+++ b/static/usage/v6/toast/theming/javascript.md
@@ -0,0 +1,39 @@
+```html
+Click Me
+
+
+
+
+```
diff --git a/static/usage/v6/toast/theming/react/main_css.md b/static/usage/v6/toast/theming/react/main_css.md
new file mode 100644
index 00000000000..4d261622074
--- /dev/null
+++ b/static/usage/v6/toast/theming/react/main_css.md
@@ -0,0 +1,17 @@
+```css
+ion-toast.custom-toast {
+ --background: #F4F4FA;
+ --box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, 0.2);
+ --color: #4b4a50;
+}
+
+ion-toast.custom-toast::part(message) {
+ font-style: italic;
+}
+
+ion-toast.custom-toast::part(button) {
+ border-left: 1px solid #d2d2d2;
+ color: #030207;
+ font-size: 15px;
+}
+```
\ No newline at end of file
diff --git a/static/usage/v6/toast/theming/react/main_tsx.md b/static/usage/v6/toast/theming/react/main_tsx.md
new file mode 100644
index 00000000000..fe88e64e8c7
--- /dev/null
+++ b/static/usage/v6/toast/theming/react/main_tsx.md
@@ -0,0 +1,31 @@
+```tsx
+import React from 'react';
+import { IonButton, useIonToast } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ const [presentToast] = useIonToast();
+
+ return (
+
+ presentToast({
+ message: 'Hello Styled World!',
+ duration: 3000,
+ cssClass: 'custom-toast',
+ buttons: [
+ {
+ text: 'Dismiss',
+ role: 'cancel'
+ }
+ ],
+ })
+ }
+ >
+ Click Me
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/toast/theming/vue.md b/static/usage/v6/toast/theming/vue.md
new file mode 100644
index 00000000000..99bcbb7cf18
--- /dev/null
+++ b/static/usage/v6/toast/theming/vue.md
@@ -0,0 +1,48 @@
+```html
+
+ Click Me
+
+
+
+
+
+```
diff --git a/static/usage/v6/toggle/basic/angular.md b/static/usage/v6/toggle/basic/angular.md
new file mode 100644
index 00000000000..696e4e2ca61
--- /dev/null
+++ b/static/usage/v6/toggle/basic/angular.md
@@ -0,0 +1,20 @@
+```html
+
+
+ Default Toggle
+
+
+
+ Checked Toggle
+
+
+
+ Disabled Toggle
+
+
+
+ Disabled Checked Toggle
+
+
+
+```
diff --git a/static/usage/v6/toggle/basic/demo.html b/static/usage/v6/toggle/basic/demo.html
new file mode 100644
index 00000000000..5e45931c3b4
--- /dev/null
+++ b/static/usage/v6/toggle/basic/demo.html
@@ -0,0 +1,47 @@
+
+
+
+
+
+
+ Toggle
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Default Toggle
+
+
+
+ Checked Toggle
+
+
+
+ Disabled Toggle
+
+
+
+ Disabled Checked Toggle
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/toggle/basic/index.md b/static/usage/v6/toggle/basic/index.md
new file mode 100644
index 00000000000..87505db9a20
--- /dev/null
+++ b/static/usage/v6/toggle/basic/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/v6/toggle/basic/javascript.md b/static/usage/v6/toggle/basic/javascript.md
new file mode 100644
index 00000000000..043c09333f0
--- /dev/null
+++ b/static/usage/v6/toggle/basic/javascript.md
@@ -0,0 +1,20 @@
+```html
+
+
+ Default Toggle
+
+
+
+ Checked Toggle
+
+
+
+ Disabled Toggle
+
+
+
+ Disabled Checked Toggle
+
+
+
+```
diff --git a/static/usage/v6/toggle/basic/react.md b/static/usage/v6/toggle/basic/react.md
new file mode 100644
index 00000000000..21721d14467
--- /dev/null
+++ b/static/usage/v6/toggle/basic/react.md
@@ -0,0 +1,28 @@
+```tsx
+import React from 'react';
+import { IonItem, IonLabel, IonList, IonToggle } from '@ionic/react';
+
+function Example() {
+ return (
+
+
+ Default Toggle
+
+
+
+ Checked Toggle
+
+
+
+ Disabled Toggle
+
+
+
+ Disabled Checked Toggle
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/toggle/basic/vue.md b/static/usage/v6/toggle/basic/vue.md
new file mode 100644
index 00000000000..938dee314ed
--- /dev/null
+++ b/static/usage/v6/toggle/basic/vue.md
@@ -0,0 +1,31 @@
+```html
+
+
+
+ Default Toggle
+
+
+
+ Checked Toggle
+
+
+
+ Disabled Toggle
+
+
+
+ Disabled Checked Toggle
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/toggle/on-off/angular.md b/static/usage/v6/toggle/on-off/angular.md
new file mode 100644
index 00000000000..d32c09c626f
--- /dev/null
+++ b/static/usage/v6/toggle/on-off/angular.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v6/toggle/on-off/demo.html b/static/usage/v6/toggle/on-off/demo.html
new file mode 100644
index 00000000000..7622a018101
--- /dev/null
+++ b/static/usage/v6/toggle/on-off/demo.html
@@ -0,0 +1,25 @@
+
+
+
+
+
+
+ Toggle
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/toggle/on-off/index.md b/static/usage/v6/toggle/on-off/index.md
new file mode 100644
index 00000000000..3e716535563
--- /dev/null
+++ b/static/usage/v6/toggle/on-off/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/v6/toggle/on-off/javascript.md b/static/usage/v6/toggle/on-off/javascript.md
new file mode 100644
index 00000000000..5ae617f6e4a
--- /dev/null
+++ b/static/usage/v6/toggle/on-off/javascript.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v6/toggle/on-off/react.md b/static/usage/v6/toggle/on-off/react.md
new file mode 100644
index 00000000000..6d24a2c2704
--- /dev/null
+++ b/static/usage/v6/toggle/on-off/react.md
@@ -0,0 +1,11 @@
+```tsx
+import React from 'react';
+import { IonToggle } from '@ionic/react';
+
+function Example() {
+ return (
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/toggle/on-off/vue.md b/static/usage/v6/toggle/on-off/vue.md
new file mode 100644
index 00000000000..a6958f0e1a5
--- /dev/null
+++ b/static/usage/v6/toggle/on-off/vue.md
@@ -0,0 +1,14 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v6/toggle/theming/colors/angular.md b/static/usage/v6/toggle/theming/colors/angular.md
new file mode 100644
index 00000000000..b8cb7076de3
--- /dev/null
+++ b/static/usage/v6/toggle/theming/colors/angular.md
@@ -0,0 +1,11 @@
+```html
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/toggle/theming/colors/demo.html b/static/usage/v6/toggle/theming/colors/demo.html
new file mode 100644
index 00000000000..e2e115e84bf
--- /dev/null
+++ b/static/usage/v6/toggle/theming/colors/demo.html
@@ -0,0 +1,33 @@
+
+
+
+
+
+
+ Toggle
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/toggle/theming/colors/index.md b/static/usage/v6/toggle/theming/colors/index.md
new file mode 100644
index 00000000000..e5a56aa4452
--- /dev/null
+++ b/static/usage/v6/toggle/theming/colors/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/v6/toggle/theming/colors/javascript.md b/static/usage/v6/toggle/theming/colors/javascript.md
new file mode 100644
index 00000000000..26990bd1a4f
--- /dev/null
+++ b/static/usage/v6/toggle/theming/colors/javascript.md
@@ -0,0 +1,11 @@
+```html
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/toggle/theming/colors/react.md b/static/usage/v6/toggle/theming/colors/react.md
new file mode 100644
index 00000000000..6ba932092c4
--- /dev/null
+++ b/static/usage/v6/toggle/theming/colors/react.md
@@ -0,0 +1,21 @@
+```tsx
+import React from 'react';
+import { IonToggle } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/toggle/theming/colors/vue.md b/static/usage/v6/toggle/theming/colors/vue.md
new file mode 100644
index 00000000000..4b906d9da5d
--- /dev/null
+++ b/static/usage/v6/toggle/theming/colors/vue.md
@@ -0,0 +1,22 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/toggle/theming/css-properties/angular/example_component_css.md b/static/usage/v6/toggle/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..a5ac3b87533
--- /dev/null
+++ b/static/usage/v6/toggle/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,26 @@
+```css
+ion-toggle {
+ height: 10px;
+ width: 65px;
+
+ padding: 12px;
+
+ --background: #ddd;
+ --background-checked: #ddd;
+
+ --handle-background: #eb7769;
+ --handle-background-checked: #95c34e;
+
+ --handle-width: 25px;
+ --handle-height: 27px;
+ --handle-max-height: auto;
+ --handle-spacing: 6px;
+
+ --handle-border-radius: 4px;
+ --handle-box-shadow: none;
+
+ /* Required for iOS handle to overflow the height of the track */
+ overflow: visible;
+ contain: none;
+}
+```
diff --git a/static/usage/v6/toggle/theming/css-properties/angular/example_component_html.md b/static/usage/v6/toggle/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..b66cfc51480
--- /dev/null
+++ b/static/usage/v6/toggle/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,4 @@
+```html
+
+
+```
diff --git a/static/usage/v6/toggle/theming/css-properties/demo.html b/static/usage/v6/toggle/theming/css-properties/demo.html
new file mode 100644
index 00000000000..b357ff59b4a
--- /dev/null
+++ b/static/usage/v6/toggle/theming/css-properties/demo.html
@@ -0,0 +1,52 @@
+
+
+
+
+
+
+ Item
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/toggle/theming/css-properties/index.md b/static/usage/v6/toggle/theming/css-properties/index.md
new file mode 100644
index 00000000000..6a78a059e49
--- /dev/null
+++ b/static/usage/v6/toggle/theming/css-properties/index.md
@@ -0,0 +1,32 @@
+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/v6/toggle/theming/css-properties/javascript.md b/static/usage/v6/toggle/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..ed02575807b
--- /dev/null
+++ b/static/usage/v6/toggle/theming/css-properties/javascript.md
@@ -0,0 +1,31 @@
+```html
+
+
+
+
+```
diff --git a/static/usage/v6/toggle/theming/css-properties/react/main_css.md b/static/usage/v6/toggle/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..a5ac3b87533
--- /dev/null
+++ b/static/usage/v6/toggle/theming/css-properties/react/main_css.md
@@ -0,0 +1,26 @@
+```css
+ion-toggle {
+ height: 10px;
+ width: 65px;
+
+ padding: 12px;
+
+ --background: #ddd;
+ --background-checked: #ddd;
+
+ --handle-background: #eb7769;
+ --handle-background-checked: #95c34e;
+
+ --handle-width: 25px;
+ --handle-height: 27px;
+ --handle-max-height: auto;
+ --handle-spacing: 6px;
+
+ --handle-border-radius: 4px;
+ --handle-box-shadow: none;
+
+ /* Required for iOS handle to overflow the height of the track */
+ overflow: visible;
+ contain: none;
+}
+```
diff --git a/static/usage/v6/toggle/theming/css-properties/react/main_tsx.md b/static/usage/v6/toggle/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..6548f53b021
--- /dev/null
+++ b/static/usage/v6/toggle/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,16 @@
+```tsx
+import React from 'react';
+import { IonToggle } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/toggle/theming/css-properties/vue.md b/static/usage/v6/toggle/theming/css-properties/vue.md
new file mode 100644
index 00000000000..f66c8236836
--- /dev/null
+++ b/static/usage/v6/toggle/theming/css-properties/vue.md
@@ -0,0 +1,42 @@
+```html
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/toggle/theming/css-shadow-parts/angular/example_component_css.md b/static/usage/v6/toggle/theming/css-shadow-parts/angular/example_component_css.md
new file mode 100644
index 00000000000..e34322115b6
--- /dev/null
+++ b/static/usage/v6/toggle/theming/css-shadow-parts/angular/example_component_css.md
@@ -0,0 +1,33 @@
+```css
+ion-toggle {
+ height: 10px;
+ width: 65px;
+
+ padding: 12px;
+
+ --handle-width: 25px;
+ --handle-height: 27px;
+ --handle-max-height: auto;
+ --handle-spacing: 6px;
+
+ /* Required for iOS handle to overflow the height of the track */
+ overflow: visible;
+ contain: none;
+}
+
+ion-toggle::part(track),
+ion-toggle.toggle-checked::part(track) {
+ background: #ddd;
+}
+
+ion-toggle::part(handle) {
+ background: #eb7769;
+
+ border-radius: 4px;
+ box-shadow: none;
+}
+
+ion-toggle.toggle-checked::part(handle) {
+ background: #95c34e;
+}
+```
diff --git a/static/usage/v6/toggle/theming/css-shadow-parts/angular/example_component_html.md b/static/usage/v6/toggle/theming/css-shadow-parts/angular/example_component_html.md
new file mode 100644
index 00000000000..b66cfc51480
--- /dev/null
+++ b/static/usage/v6/toggle/theming/css-shadow-parts/angular/example_component_html.md
@@ -0,0 +1,4 @@
+```html
+
+
+```
diff --git a/static/usage/v6/toggle/theming/css-shadow-parts/demo.html b/static/usage/v6/toggle/theming/css-shadow-parts/demo.html
new file mode 100644
index 00000000000..5647327547a
--- /dev/null
+++ b/static/usage/v6/toggle/theming/css-shadow-parts/demo.html
@@ -0,0 +1,59 @@
+
+
+
+
+
+
+ Item
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/toggle/theming/css-shadow-parts/index.md b/static/usage/v6/toggle/theming/css-shadow-parts/index.md
new file mode 100644
index 00000000000..137b6d4c1d9
--- /dev/null
+++ b/static/usage/v6/toggle/theming/css-shadow-parts/index.md
@@ -0,0 +1,32 @@
+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/v6/toggle/theming/css-shadow-parts/javascript.md b/static/usage/v6/toggle/theming/css-shadow-parts/javascript.md
new file mode 100644
index 00000000000..bda83da747a
--- /dev/null
+++ b/static/usage/v6/toggle/theming/css-shadow-parts/javascript.md
@@ -0,0 +1,38 @@
+```html
+
+
+
+
+```
diff --git a/static/usage/v6/toggle/theming/css-shadow-parts/react/main_css.md b/static/usage/v6/toggle/theming/css-shadow-parts/react/main_css.md
new file mode 100644
index 00000000000..e34322115b6
--- /dev/null
+++ b/static/usage/v6/toggle/theming/css-shadow-parts/react/main_css.md
@@ -0,0 +1,33 @@
+```css
+ion-toggle {
+ height: 10px;
+ width: 65px;
+
+ padding: 12px;
+
+ --handle-width: 25px;
+ --handle-height: 27px;
+ --handle-max-height: auto;
+ --handle-spacing: 6px;
+
+ /* Required for iOS handle to overflow the height of the track */
+ overflow: visible;
+ contain: none;
+}
+
+ion-toggle::part(track),
+ion-toggle.toggle-checked::part(track) {
+ background: #ddd;
+}
+
+ion-toggle::part(handle) {
+ background: #eb7769;
+
+ border-radius: 4px;
+ box-shadow: none;
+}
+
+ion-toggle.toggle-checked::part(handle) {
+ background: #95c34e;
+}
+```
diff --git a/static/usage/v6/toggle/theming/css-shadow-parts/react/main_tsx.md b/static/usage/v6/toggle/theming/css-shadow-parts/react/main_tsx.md
new file mode 100644
index 00000000000..6548f53b021
--- /dev/null
+++ b/static/usage/v6/toggle/theming/css-shadow-parts/react/main_tsx.md
@@ -0,0 +1,16 @@
+```tsx
+import React from 'react';
+import { IonToggle } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/toggle/theming/css-shadow-parts/vue.md b/static/usage/v6/toggle/theming/css-shadow-parts/vue.md
new file mode 100644
index 00000000000..dbf40a9ed62
--- /dev/null
+++ b/static/usage/v6/toggle/theming/css-shadow-parts/vue.md
@@ -0,0 +1,49 @@
+```html
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/toolbar/basic/angular.md b/static/usage/v6/toolbar/basic/angular.md
new file mode 100644
index 00000000000..40fbd442061
--- /dev/null
+++ b/static/usage/v6/toolbar/basic/angular.md
@@ -0,0 +1,13 @@
+```html
+
+
+ Header Toolbar
+
+
+
+
+
+ Footer Toolbar
+
+
+```
diff --git a/static/usage/v6/toolbar/basic/demo.html b/static/usage/v6/toolbar/basic/demo.html
new file mode 100644
index 00000000000..bc598f63d22
--- /dev/null
+++ b/static/usage/v6/toolbar/basic/demo.html
@@ -0,0 +1,31 @@
+
+
+
+
+
+
+ Toolbar
+
+
+
+
+
+
+
+
+
+
+
+ Header Toolbar
+
+
+
+
+
+ Footer Toolbar
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/toolbar/basic/index.md b/static/usage/v6/toolbar/basic/index.md
new file mode 100644
index 00000000000..3262c3c2847
--- /dev/null
+++ b/static/usage/v6/toolbar/basic/index.md
@@ -0,0 +1,14 @@
+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/v6/toolbar/basic/javascript.md b/static/usage/v6/toolbar/basic/javascript.md
new file mode 100644
index 00000000000..40fbd442061
--- /dev/null
+++ b/static/usage/v6/toolbar/basic/javascript.md
@@ -0,0 +1,13 @@
+```html
+
+
+ Header Toolbar
+
+
+
+
+
+ Footer Toolbar
+
+
+```
diff --git a/static/usage/v6/toolbar/basic/react.md b/static/usage/v6/toolbar/basic/react.md
new file mode 100644
index 00000000000..42b46929d3f
--- /dev/null
+++ b/static/usage/v6/toolbar/basic/react.md
@@ -0,0 +1,23 @@
+```tsx
+import React from 'react';
+import { IonFooter, IonHeader, IonTitle, IonToolbar } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+ Header Toolbar
+
+
+
+
+
+ Footer Toolbar
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/toolbar/basic/vue.md b/static/usage/v6/toolbar/basic/vue.md
new file mode 100644
index 00000000000..ec71b1a340b
--- /dev/null
+++ b/static/usage/v6/toolbar/basic/vue.md
@@ -0,0 +1,24 @@
+```html
+
+
+
+ Header Toolbar
+
+
+
+
+
+ Footer Toolbar
+
+
+
+
+
+```
diff --git a/static/usage/v6/toolbar/buttons/angular.md b/static/usage/v6/toolbar/buttons/angular.md
new file mode 100644
index 00000000000..ceafe115821
--- /dev/null
+++ b/static/usage/v6/toolbar/buttons/angular.md
@@ -0,0 +1,92 @@
+```html
+
+
+
+ Start
+
+
+ Start / End Buttons
+
+
+ End
+
+
+
+
+
+
+
+ Secondary
+
+
+
+
+ Primary
+
+
+ Primary / Secondary Buttons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Icon Buttons
+
+
+
+
+
+
+ Contact
+
+
+
+
+ Help
+
+
+
+ Solid Buttons
+
+
+
+
+
+
+ Star
+
+
+
+
+ Edit
+
+
+
+ Outline Buttons
+
+
+
+
+
+
+ Back Button
+
+
+
+
+
+
+ Menu Button
+
+```
diff --git a/static/usage/v6/toolbar/buttons/demo.html b/static/usage/v6/toolbar/buttons/demo.html
new file mode 100644
index 00000000000..55941b2c348
--- /dev/null
+++ b/static/usage/v6/toolbar/buttons/demo.html
@@ -0,0 +1,120 @@
+
+
+
+
+
+
+ Toolbar
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Start
+
+
+ Start / End Buttons
+
+
+ End
+
+
+
+
+
+
+
+ Secondary
+
+
+
+
+ Primary
+
+
+ Primary / Secondary Buttons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Icon Buttons
+
+
+
+
+
+
+ Contact
+
+
+
+
+ Help
+
+
+
+ Solid Buttons
+
+
+
+
+
+
+ Star
+
+
+
+
+ Edit
+
+
+
+ Outline Buttons
+
+
+
+
+
+
+ Back Button
+
+
+
+
+
+
+ Menu Button
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/toolbar/buttons/index.md b/static/usage/v6/toolbar/buttons/index.md
new file mode 100644
index 00000000000..2ac28550f9d
--- /dev/null
+++ b/static/usage/v6/toolbar/buttons/index.md
@@ -0,0 +1,13 @@
+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/v6/toolbar/buttons/javascript.md b/static/usage/v6/toolbar/buttons/javascript.md
new file mode 100644
index 00000000000..ceafe115821
--- /dev/null
+++ b/static/usage/v6/toolbar/buttons/javascript.md
@@ -0,0 +1,92 @@
+```html
+
+
+
+ Start
+
+
+ Start / End Buttons
+
+
+ End
+
+
+
+
+
+
+
+ Secondary
+
+
+
+
+ Primary
+
+
+ Primary / Secondary Buttons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Icon Buttons
+
+
+
+
+
+
+ Contact
+
+
+
+
+ Help
+
+
+
+ Solid Buttons
+
+
+
+
+
+
+ Star
+
+
+
+
+ Edit
+
+
+
+ Outline Buttons
+
+
+
+
+
+
+ Back Button
+
+
+
+
+
+
+ Menu Button
+
+```
diff --git a/static/usage/v6/toolbar/buttons/react.md b/static/usage/v6/toolbar/buttons/react.md
new file mode 100644
index 00000000000..ff7736981f0
--- /dev/null
+++ b/static/usage/v6/toolbar/buttons/react.md
@@ -0,0 +1,103 @@
+```tsx
+import React from 'react';
+import { IonBackButton, IonButton, IonButtons, IonIcon, IonMenuButton, IonTitle, IonToolbar } from '@ionic/react';
+import { create, ellipsisHorizontal, ellipsisVertical, helpCircle, search, personCircle, star } from 'ionicons/icons';
+
+function Example() {
+ return (
+ <>
+
+
+
+ Start
+
+
+ Start / End Buttons
+
+
+ End
+
+
+
+
+
+
+
+ Secondary
+
+
+
+
+ Primary
+
+
+ Primary / Secondary Buttons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Icon Buttons
+
+
+
+
+
+
+ Contact
+
+
+
+
+ Help
+
+
+
+ Solid Buttons
+
+
+
+
+
+
+ Star
+
+
+
+
+ Edit
+
+
+
+ Outline Buttons
+
+
+
+
+
+
+ Back Button
+
+
+
+
+
+
+ Menu Button
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/toolbar/buttons/vue.md b/static/usage/v6/toolbar/buttons/vue.md
new file mode 100644
index 00000000000..388760dcd9f
--- /dev/null
+++ b/static/usage/v6/toolbar/buttons/vue.md
@@ -0,0 +1,107 @@
+```html
+
+
+
+
+ Start
+
+
+ Start / End Buttons
+
+
+ End
+
+
+
+
+
+
+
+ Secondary
+
+
+
+
+ Primary
+
+
+ Primary / Secondary Buttons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Icon Buttons
+
+
+
+
+
+
+ Contact
+
+
+
+
+ Help
+
+
+
+ Solid Buttons
+
+
+
+
+
+
+ Star
+
+
+
+
+ Edit
+
+
+
+ Outline Buttons
+
+
+
+
+
+
+ Back Button
+
+
+
+
+
+
+ Menu Button
+
+
+
+
+```
diff --git a/static/usage/v6/toolbar/progress-bars/angular.md b/static/usage/v6/toolbar/progress-bars/angular.md
new file mode 100644
index 00000000000..0c80f0f5955
--- /dev/null
+++ b/static/usage/v6/toolbar/progress-bars/angular.md
@@ -0,0 +1,8 @@
+```html
+
+
+ Toolbar
+
+
+
+```
diff --git a/static/usage/v6/toolbar/progress-bars/demo.html b/static/usage/v6/toolbar/progress-bars/demo.html
new file mode 100644
index 00000000000..58ddadffe72
--- /dev/null
+++ b/static/usage/v6/toolbar/progress-bars/demo.html
@@ -0,0 +1,26 @@
+
+
+
+
+
+
+ Toolbar
+
+
+
+
+
+
+
+
+
+
+
+ Toolbar
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/toolbar/progress-bars/index.md b/static/usage/v6/toolbar/progress-bars/index.md
new file mode 100644
index 00000000000..b6e14d7faac
--- /dev/null
+++ b/static/usage/v6/toolbar/progress-bars/index.md
@@ -0,0 +1,14 @@
+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/v6/toolbar/progress-bars/javascript.md b/static/usage/v6/toolbar/progress-bars/javascript.md
new file mode 100644
index 00000000000..0c80f0f5955
--- /dev/null
+++ b/static/usage/v6/toolbar/progress-bars/javascript.md
@@ -0,0 +1,8 @@
+```html
+
+
+ Toolbar
+
+
+
+```
diff --git a/static/usage/v6/toolbar/progress-bars/react.md b/static/usage/v6/toolbar/progress-bars/react.md
new file mode 100644
index 00000000000..52720f12b14
--- /dev/null
+++ b/static/usage/v6/toolbar/progress-bars/react.md
@@ -0,0 +1,16 @@
+```tsx
+import React from 'react';
+import { IonHeader, IonProgressBar, IonTitle, IonToolbar } from '@ionic/react';
+
+function Example() {
+ return (
+
+
+ Toolbar
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/toolbar/progress-bars/vue.md b/static/usage/v6/toolbar/progress-bars/vue.md
new file mode 100644
index 00000000000..2b3a3b85d0c
--- /dev/null
+++ b/static/usage/v6/toolbar/progress-bars/vue.md
@@ -0,0 +1,19 @@
+```html
+
+
+
+ Toolbar
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/toolbar/searchbars/angular.md b/static/usage/v6/toolbar/searchbars/angular.md
new file mode 100644
index 00000000000..9016e1e04cf
--- /dev/null
+++ b/static/usage/v6/toolbar/searchbars/angular.md
@@ -0,0 +1,10 @@
+```html
+
+
+ Toolbar
+
+
+
+
+
+```
diff --git a/static/usage/v6/toolbar/searchbars/demo.html b/static/usage/v6/toolbar/searchbars/demo.html
new file mode 100644
index 00000000000..a75cf4e6483
--- /dev/null
+++ b/static/usage/v6/toolbar/searchbars/demo.html
@@ -0,0 +1,28 @@
+
+
+
+
+
+
+ Toolbar
+
+
+
+
+
+
+
+
+
+
+
+ Toolbar
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/toolbar/searchbars/index.md b/static/usage/v6/toolbar/searchbars/index.md
new file mode 100644
index 00000000000..46b45f13b54
--- /dev/null
+++ b/static/usage/v6/toolbar/searchbars/index.md
@@ -0,0 +1,14 @@
+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/v6/toolbar/searchbars/javascript.md b/static/usage/v6/toolbar/searchbars/javascript.md
new file mode 100644
index 00000000000..9016e1e04cf
--- /dev/null
+++ b/static/usage/v6/toolbar/searchbars/javascript.md
@@ -0,0 +1,10 @@
+```html
+
+
+ Toolbar
+
+
+
+
+
+```
diff --git a/static/usage/v6/toolbar/searchbars/react.md b/static/usage/v6/toolbar/searchbars/react.md
new file mode 100644
index 00000000000..dcf4fc644f3
--- /dev/null
+++ b/static/usage/v6/toolbar/searchbars/react.md
@@ -0,0 +1,18 @@
+```tsx
+import React from 'react';
+import { IonHeader, IonSearchbar, IonTitle, IonToolbar } from '@ionic/react';
+
+function Example() {
+ return (
+
+
+ Toolbar
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/toolbar/searchbars/vue.md b/static/usage/v6/toolbar/searchbars/vue.md
new file mode 100644
index 00000000000..8543a2ef976
--- /dev/null
+++ b/static/usage/v6/toolbar/searchbars/vue.md
@@ -0,0 +1,21 @@
+```html
+
+
+
+ Toolbar
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/toolbar/segments/angular.md b/static/usage/v6/toolbar/segments/angular.md
new file mode 100644
index 00000000000..e7cce4323dc
--- /dev/null
+++ b/static/usage/v6/toolbar/segments/angular.md
@@ -0,0 +1,14 @@
+```html
+
+
+
+
+ All
+
+
+ Favorites
+
+
+
+
+```
diff --git a/static/usage/v6/toolbar/segments/demo.html b/static/usage/v6/toolbar/segments/demo.html
new file mode 100644
index 00000000000..42452b90dd8
--- /dev/null
+++ b/static/usage/v6/toolbar/segments/demo.html
@@ -0,0 +1,32 @@
+
+
+
+
+
+
+ Toolbar
+
+
+
+
+
+
+
+
+
+
+
+
+
+ All
+
+
+ Favorites
+
+
+
+
+
+
+
+
diff --git a/static/usage/v6/toolbar/segments/index.md b/static/usage/v6/toolbar/segments/index.md
new file mode 100644
index 00000000000..f7eb713a371
--- /dev/null
+++ b/static/usage/v6/toolbar/segments/index.md
@@ -0,0 +1,14 @@
+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/v6/toolbar/segments/javascript.md b/static/usage/v6/toolbar/segments/javascript.md
new file mode 100644
index 00000000000..e7cce4323dc
--- /dev/null
+++ b/static/usage/v6/toolbar/segments/javascript.md
@@ -0,0 +1,14 @@
+```html
+
+
+
+
+ All
+
+
+ Favorites
+
+
+
+
+```
diff --git a/static/usage/v6/toolbar/segments/react.md b/static/usage/v6/toolbar/segments/react.md
new file mode 100644
index 00000000000..f2fad4d0ec5
--- /dev/null
+++ b/static/usage/v6/toolbar/segments/react.md
@@ -0,0 +1,22 @@
+```tsx
+import React from 'react';
+import { IonHeader, IonLabel, IonSegment, IonSegmentButton, IonTitle, IonToolbar } from '@ionic/react';
+
+function Example() {
+ return (
+
+
+
+
+ All
+
+
+ Favorites
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/toolbar/segments/vue.md b/static/usage/v6/toolbar/segments/vue.md
new file mode 100644
index 00000000000..b31855bf734
--- /dev/null
+++ b/static/usage/v6/toolbar/segments/vue.md
@@ -0,0 +1,25 @@
+```html
+
+
+
+
+
+ All
+
+
+ Favorites
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v6/toolbar/theming/colors/angular.md b/static/usage/v6/toolbar/theming/colors/angular.md
new file mode 100644
index 00000000000..a2763a1c1c7
--- /dev/null
+++ b/static/usage/v6/toolbar/theming/colors/angular.md
@@ -0,0 +1,32 @@
+```html
+
+ Default Toolbar
+
+
+ Primary Toolbar
+
+
+ Secondary Toolbar
+
+
+ Tertiary Toolbar
+
+
+ Success Toolbar
+
+
+ Warning Toolbar
+
+
+ Danger Toolbar
+
+
+ Light Toolbar
+
+
+ Medium Toolbar
+
+
+ Dark Toolbar
+
+```
diff --git a/static/usage/v6/toolbar/theming/colors/demo.html b/static/usage/v6/toolbar/theming/colors/demo.html
new file mode 100644
index 00000000000..f8c44dcd8e2
--- /dev/null
+++ b/static/usage/v6/toolbar/theming/colors/demo.html
@@ -0,0 +1,60 @@
+
+
+
+
+
+
+ Toolbar
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Default Toolbar
+
+
+ Primary Toolbar
+
+
+ Secondary Toolbar
+
+
+ Tertiary Toolbar
+
+
+ Success Toolbar
+
+
+ Warning Toolbar
+
+
+ Danger Toolbar
+
+
+ Light Toolbar
+
+
+ Medium Toolbar
+
+
+ Dark Toolbar
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/toolbar/theming/colors/index.md b/static/usage/v6/toolbar/theming/colors/index.md
new file mode 100644
index 00000000000..e61569c60d4
--- /dev/null
+++ b/static/usage/v6/toolbar/theming/colors/index.md
@@ -0,0 +1,13 @@
+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/v6/toolbar/theming/colors/javascript.md b/static/usage/v6/toolbar/theming/colors/javascript.md
new file mode 100644
index 00000000000..a2763a1c1c7
--- /dev/null
+++ b/static/usage/v6/toolbar/theming/colors/javascript.md
@@ -0,0 +1,32 @@
+```html
+
+ Default Toolbar
+
+
+ Primary Toolbar
+
+
+ Secondary Toolbar
+
+
+ Tertiary Toolbar
+
+
+ Success Toolbar
+
+
+ Warning Toolbar
+
+
+ Danger Toolbar
+
+
+ Light Toolbar
+
+
+ Medium Toolbar
+
+
+ Dark Toolbar
+
+```
diff --git a/static/usage/v6/toolbar/theming/colors/react.md b/static/usage/v6/toolbar/theming/colors/react.md
new file mode 100644
index 00000000000..ba6fd010f23
--- /dev/null
+++ b/static/usage/v6/toolbar/theming/colors/react.md
@@ -0,0 +1,42 @@
+```tsx
+import React from 'react';
+import { IonTitle, IonToolbar } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+ Default Toolbar
+
+
+ Primary Toolbar
+
+
+ Secondary Toolbar
+
+
+ Tertiary Toolbar
+
+
+ Success Toolbar
+
+
+ Warning Toolbar
+
+
+ Danger Toolbar
+
+
+ Light Toolbar
+
+
+ Medium Toolbar
+
+
+ Dark Toolbar
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/toolbar/theming/colors/vue.md b/static/usage/v6/toolbar/theming/colors/vue.md
new file mode 100644
index 00000000000..d71cb7a3c05
--- /dev/null
+++ b/static/usage/v6/toolbar/theming/colors/vue.md
@@ -0,0 +1,43 @@
+```html
+
+
+ Default Toolbar
+
+
+ Primary Toolbar
+
+
+ Secondary Toolbar
+
+
+ Tertiary Toolbar
+
+
+ Success Toolbar
+
+
+ Warning Toolbar
+
+
+ Danger Toolbar
+
+
+ Light Toolbar
+
+
+ Medium Toolbar
+
+
+ Dark Toolbar
+
+
+
+
+```
diff --git a/static/usage/v6/toolbar/theming/css-properties/angular/example_component_css.md b/static/usage/v6/toolbar/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..f485553f7ad
--- /dev/null
+++ b/static/usage/v6/toolbar/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,14 @@
+```css
+ion-toolbar {
+ --background: #19422d;
+ --color: white;
+
+ --border-color: #f24aec;
+ --border-width: 4px 0;
+ --border-style: double;
+
+ --min-height: 80px;
+ --padding-top: 20px;
+ --padding-bottom: 20px;
+}
+```
diff --git a/static/usage/v6/toolbar/theming/css-properties/angular/example_component_html.md b/static/usage/v6/toolbar/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..8f21356a707
--- /dev/null
+++ b/static/usage/v6/toolbar/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,5 @@
+```html
+
+ Custom Toolbar
+
+```
diff --git a/static/usage/v6/toolbar/theming/css-properties/demo.html b/static/usage/v6/toolbar/theming/css-properties/demo.html
new file mode 100644
index 00000000000..dca3fea437d
--- /dev/null
+++ b/static/usage/v6/toolbar/theming/css-properties/demo.html
@@ -0,0 +1,46 @@
+
+
+
+
+
+
+ Toolbar
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Custom Toolbar
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v6/toolbar/theming/css-properties/index.md b/static/usage/v6/toolbar/theming/css-properties/index.md
new file mode 100644
index 00000000000..95b9a7db1ce
--- /dev/null
+++ b/static/usage/v6/toolbar/theming/css-properties/index.md
@@ -0,0 +1,33 @@
+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/v6/toolbar/theming/css-properties/javascript.md b/static/usage/v6/toolbar/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..7ee9cd6d581
--- /dev/null
+++ b/static/usage/v6/toolbar/theming/css-properties/javascript.md
@@ -0,0 +1,20 @@
+```html
+
+ Custom Toolbar
+
+
+
+```
diff --git a/static/usage/v6/toolbar/theming/css-properties/react/main_css.md b/static/usage/v6/toolbar/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..f485553f7ad
--- /dev/null
+++ b/static/usage/v6/toolbar/theming/css-properties/react/main_css.md
@@ -0,0 +1,14 @@
+```css
+ion-toolbar {
+ --background: #19422d;
+ --color: white;
+
+ --border-color: #f24aec;
+ --border-width: 4px 0;
+ --border-style: double;
+
+ --min-height: 80px;
+ --padding-top: 20px;
+ --padding-bottom: 20px;
+}
+```
diff --git a/static/usage/v6/toolbar/theming/css-properties/react/main_tsx.md b/static/usage/v6/toolbar/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..8e8f663cd98
--- /dev/null
+++ b/static/usage/v6/toolbar/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,15 @@
+```tsx
+import React from 'react';
+import { IonTitle, IonToolbar } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+
+ Custom Toolbar
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/toolbar/theming/css-properties/vue.md b/static/usage/v6/toolbar/theming/css-properties/vue.md
new file mode 100644
index 00000000000..17d8653117c
--- /dev/null
+++ b/static/usage/v6/toolbar/theming/css-properties/vue.md
@@ -0,0 +1,31 @@
+```html
+
+
+ Custom Toolbar
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/accordion/accessibility/animations/angular.md b/static/usage/v7/accordion/accessibility/animations/angular.md
new file mode 100644
index 00000000000..ced314d2657
--- /dev/null
+++ b/static/usage/v7/accordion/accessibility/animations/angular.md
@@ -0,0 +1,22 @@
+```html
+
+
+
+ First Accordion
+
+ First Content
+
+
+
+ Second Accordion
+
+ Second Content
+
+
+
+ Third Accordion
+
+ Third Content
+
+
+```
diff --git a/static/usage/v7/accordion/accessibility/animations/demo.html b/static/usage/v7/accordion/accessibility/animations/demo.html
new file mode 100644
index 00000000000..6ce674bb64b
--- /dev/null
+++ b/static/usage/v7/accordion/accessibility/animations/demo.html
@@ -0,0 +1,49 @@
+
+
+
+
+
+
+ Button
+
+
+
+
+
+
+
+
+
+
+
+
+
+ First Accordion
+
+
+ First Content
+
+
+
+
+ Second Accordion
+
+
+ Second Content
+
+
+
+
+ Third Accordion
+
+
+ Third Content
+
+
+
+
+ First Content
+
+
+
+
+ Second Accordion
+
+
+ Second Content
+
+
+
+
+ Third Accordion
+
+
+ Third Content
+
+
+
+```
diff --git a/static/usage/v7/accordion/accessibility/animations/react.md b/static/usage/v7/accordion/accessibility/animations/react.md
new file mode 100644
index 00000000000..0bf5878865b
--- /dev/null
+++ b/static/usage/v7/accordion/accessibility/animations/react.md
@@ -0,0 +1,35 @@
+```tsx
+import React from 'react';
+import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react';
+function Example() {
+ return (
+
+
+
+ First Accordion
+
+
+ First Content
+
+
+
+
+ Second Accordion
+
+
+ Second Content
+
+
+
+
+ Third Accordion
+
+
+ Third Content
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/accordion/accessibility/animations/vue.md b/static/usage/v7/accordion/accessibility/animations/vue.md
new file mode 100644
index 00000000000..05847edab7b
--- /dev/null
+++ b/static/usage/v7/accordion/accessibility/animations/vue.md
@@ -0,0 +1,37 @@
+```html
+
+
+
+
+ First Accordion
+
+ First Content
+
+
+
+ Second Accordion
+
+ Second Content
+
+
+
+ Third Accordion
+
+ Third Content
+
+
+
+
+
+```
diff --git a/static/usage/v7/accordion/basic/angular.md b/static/usage/v7/accordion/basic/angular.md
new file mode 100644
index 00000000000..085d138de20
--- /dev/null
+++ b/static/usage/v7/accordion/basic/angular.md
@@ -0,0 +1,28 @@
+```html
+
+
+
+ First Accordion
+
+
+ First Content
+
+
+
+
+ Second Accordion
+
+
+ Second Content
+
+
+
+
+ Third Accordion
+
+
+ Third Content
+
+
+
+```
diff --git a/static/usage/v7/accordion/basic/demo.html b/static/usage/v7/accordion/basic/demo.html
new file mode 100644
index 00000000000..ae833b5f61d
--- /dev/null
+++ b/static/usage/v7/accordion/basic/demo.html
@@ -0,0 +1,49 @@
+
+
+
+
+
+
+ Accordion
+
+
+
+
+
+
+
+
+
+
+
+
+
+ First Accordion
+
+
+ First Content
+
+
+
+
+ Second Accordion
+
+
+ Second Content
+
+
+
+
+ Third Accordion
+
+
+ Third Content
+
+
+
+
+ First Content
+
+
+
+
+ Second Accordion
+
+
+ Second Content
+
+
+
+
+ Third Accordion
+
+
+ Third Content
+
+
+
+```
diff --git a/static/usage/v7/accordion/basic/react.md b/static/usage/v7/accordion/basic/react.md
new file mode 100644
index 00000000000..7c140853638
--- /dev/null
+++ b/static/usage/v7/accordion/basic/react.md
@@ -0,0 +1,40 @@
+```tsx
+import React from 'react';
+import {
+ IonAccordion,
+ IonAccordionGroup,
+ IonItem,
+ IonLabel
+} from '@ionic/react';
+function Example() {
+ return (
+
+
+
+ First Accordion
+
+
+ First Content
+
+
+
+
+ Second Accordion
+
+
+ Second Content
+
+
+
+
+ Third Accordion
+
+
+ Third Content
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/accordion/basic/vue.md b/static/usage/v7/accordion/basic/vue.md
new file mode 100644
index 00000000000..f11e704e83a
--- /dev/null
+++ b/static/usage/v7/accordion/basic/vue.md
@@ -0,0 +1,49 @@
+```html
+
+
+
+
+ First Accordion
+
+
+ First Content
+
+
+
+
+ Second Accordion
+
+
+ Second Content
+
+
+
+
+ Third Accordion
+
+
+ Third Content
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/accordion/customization/advanced-expansion-styles/angular/example_component_css.md b/static/usage/v7/accordion/customization/advanced-expansion-styles/angular/example_component_css.md
new file mode 100644
index 00000000000..21189b83ce7
--- /dev/null
+++ b/static/usage/v7/accordion/customization/advanced-expansion-styles/angular/example_component_css.md
@@ -0,0 +1,24 @@
+```css
+ion-accordion {
+ margin: 0 auto;
+}
+
+ion-accordion.accordion-expanding,
+ion-accordion.accordion-expanded {
+ width: calc(100% - 32px);
+
+ margin: 16px auto;
+}
+
+ion-accordion.accordion-collapsing ion-item[slot="header"],
+ion-accordion.accordion-collapsed ion-item[slot="header"] {
+ --background: var(--ion-color-light);
+ --color: var(--ion-color-light-contrast);
+}
+
+ion-accordion.accordion-expanding ion-item[slot="header"],
+ion-accordion.accordion-expanded ion-item[slot="header"] {
+ --background: var(--ion-color-primary);
+ --color: var(--ion-color-primary-contrast);
+}
+```
\ No newline at end of file
diff --git a/static/usage/v7/accordion/customization/advanced-expansion-styles/angular/example_component_html.md b/static/usage/v7/accordion/customization/advanced-expansion-styles/angular/example_component_html.md
new file mode 100644
index 00000000000..c0da98e5ee8
--- /dev/null
+++ b/static/usage/v7/accordion/customization/advanced-expansion-styles/angular/example_component_html.md
@@ -0,0 +1,28 @@
+```html
+
+
+
+ First Accordion
+
+
+ First Content
+
+
+
+
+ Second Accordion
+
+
+ Second Content
+
+
+
+
+ Third Accordion
+
+
+ Third Content
+
+
+
+```
diff --git a/static/usage/v7/accordion/customization/advanced-expansion-styles/angular/example_component_ts.md b/static/usage/v7/accordion/customization/advanced-expansion-styles/angular/example_component_ts.md
new file mode 100644
index 00000000000..4db53a836a9
--- /dev/null
+++ b/static/usage/v7/accordion/customization/advanced-expansion-styles/angular/example_component_ts.md
@@ -0,0 +1,10 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/accordion/customization/advanced-expansion-styles/demo.html b/static/usage/v7/accordion/customization/advanced-expansion-styles/demo.html
new file mode 100644
index 00000000000..2e78783b984
--- /dev/null
+++ b/static/usage/v7/accordion/customization/advanced-expansion-styles/demo.html
@@ -0,0 +1,82 @@
+
+
+
+
+
+
+ Accordion
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ First Accordion
+
+
+ First Content
+
+
+
+
+ Second Accordion
+
+
+ Second Content
+
+
+
+
+ Third Accordion
+
+
+ Third Content
+
+
+
+
+ First Content
+
+
+
+
+ Second Accordion
+
+
+ Second Content
+
+
+
+
+ Third Accordion
+
+
+ Third Content
+
+
+
+
+
+```
diff --git a/static/usage/v7/accordion/customization/advanced-expansion-styles/react/main_css.md b/static/usage/v7/accordion/customization/advanced-expansion-styles/react/main_css.md
new file mode 100644
index 00000000000..21189b83ce7
--- /dev/null
+++ b/static/usage/v7/accordion/customization/advanced-expansion-styles/react/main_css.md
@@ -0,0 +1,24 @@
+```css
+ion-accordion {
+ margin: 0 auto;
+}
+
+ion-accordion.accordion-expanding,
+ion-accordion.accordion-expanded {
+ width: calc(100% - 32px);
+
+ margin: 16px auto;
+}
+
+ion-accordion.accordion-collapsing ion-item[slot="header"],
+ion-accordion.accordion-collapsed ion-item[slot="header"] {
+ --background: var(--ion-color-light);
+ --color: var(--ion-color-light-contrast);
+}
+
+ion-accordion.accordion-expanding ion-item[slot="header"],
+ion-accordion.accordion-expanded ion-item[slot="header"] {
+ --background: var(--ion-color-primary);
+ --color: var(--ion-color-primary-contrast);
+}
+```
\ No newline at end of file
diff --git a/static/usage/v7/accordion/customization/advanced-expansion-styles/react/main_tsx.md b/static/usage/v7/accordion/customization/advanced-expansion-styles/react/main_tsx.md
new file mode 100644
index 00000000000..01cd873445d
--- /dev/null
+++ b/static/usage/v7/accordion/customization/advanced-expansion-styles/react/main_tsx.md
@@ -0,0 +1,38 @@
+```tsx
+import React from 'react';
+import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+
+
+
+ First Accordion
+
+
+ First Content
+
+
+
+
+ Second Accordion
+
+
+ Second Content
+
+
+
+
+ Third Accordion
+
+
+ Third Content
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/accordion/customization/advanced-expansion-styles/vue.md b/static/usage/v7/accordion/customization/advanced-expansion-styles/vue.md
new file mode 100644
index 00000000000..738797ba44f
--- /dev/null
+++ b/static/usage/v7/accordion/customization/advanced-expansion-styles/vue.md
@@ -0,0 +1,74 @@
+```html
+
+
+
+
+ First Accordion
+
+
+ First Content
+
+
+
+
+ Second Accordion
+
+
+ Second Content
+
+
+
+
+ Third Accordion
+
+
+ Third Content
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/accordion/customization/expansion-styles/angular.md b/static/usage/v7/accordion/customization/expansion-styles/angular.md
new file mode 100644
index 00000000000..39a3f97b6be
--- /dev/null
+++ b/static/usage/v7/accordion/customization/expansion-styles/angular.md
@@ -0,0 +1,28 @@
+```html
+
+
+
+ First Accordion
+
+
+ First Content
+
+
+
+
+ Second Accordion
+
+
+ Second Content
+
+
+
+
+ Third Accordion
+
+
+ Third Content
+
+
+
+```
diff --git a/static/usage/v7/accordion/customization/expansion-styles/demo.html b/static/usage/v7/accordion/customization/expansion-styles/demo.html
new file mode 100644
index 00000000000..f445c54ac11
--- /dev/null
+++ b/static/usage/v7/accordion/customization/expansion-styles/demo.html
@@ -0,0 +1,49 @@
+
+
+
+
+
+
+ Accordion
+
+
+
+
+
+
+
+
+
+
+
+
+
+ First Accordion
+
+
+ First Content
+
+
+
+
+ Second Accordion
+
+
+ Second Content
+
+
+
+
+ Third Accordion
+
+
+ Third Content
+
+
+
+
+ First Content
+
+
+
+
+ Second Accordion
+
+
+ Second Content
+
+
+
+
+ Third Accordion
+
+
+ Third Content
+
+
+
+```
diff --git a/static/usage/v7/accordion/customization/expansion-styles/react.md b/static/usage/v7/accordion/customization/expansion-styles/react.md
new file mode 100644
index 00000000000..1067c80acb7
--- /dev/null
+++ b/static/usage/v7/accordion/customization/expansion-styles/react.md
@@ -0,0 +1,40 @@
+```tsx
+import React from 'react';
+import {
+ IonAccordion,
+ IonAccordionGroup,
+ IonItem,
+ IonLabel
+} from '@ionic/react';
+function Example() {
+ return (
+
+
+
+ First Accordion
+
+
+ First Content
+
+
+
+
+ Second Accordion
+
+
+ Second Content
+
+
+
+
+ Third Accordion
+
+
+ Third Content
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/accordion/customization/expansion-styles/vue.md b/static/usage/v7/accordion/customization/expansion-styles/vue.md
new file mode 100644
index 00000000000..a6bcdcbde5e
--- /dev/null
+++ b/static/usage/v7/accordion/customization/expansion-styles/vue.md
@@ -0,0 +1,49 @@
+```html
+
+
+
+
+ First Accordion
+
+
+ First Content
+
+
+
+
+ Second Accordion
+
+
+ Second Content
+
+
+
+
+ Third Accordion
+
+
+ Third Content
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/accordion/customization/icons/angular.md b/static/usage/v7/accordion/customization/icons/angular.md
new file mode 100644
index 00000000000..2899aeacac6
--- /dev/null
+++ b/static/usage/v7/accordion/customization/icons/angular.md
@@ -0,0 +1,22 @@
+```html
+
+
+
+ First Accordion
+
+ First Content
+
+
+
+ Second Accordion
+
+ Second Content
+
+
+
+ Third Accordion
+
+ Third Content
+
+
+```
diff --git a/static/usage/v7/accordion/customization/icons/demo.html b/static/usage/v7/accordion/customization/icons/demo.html
new file mode 100644
index 00000000000..b4f7385876a
--- /dev/null
+++ b/static/usage/v7/accordion/customization/icons/demo.html
@@ -0,0 +1,49 @@
+
+
+
+
+
+
+ Accordion
+
+
+
+
+
+
+
+
+
+
+
+
+
+ First Accordion
+
+
+ First Content
+
+
+
+
+ Second Accordion
+
+
+ Second Content
+
+
+
+
+ Third Accordion
+
+
+ Third Content
+
+
+
+
+ First Content
+
+
+
+
+ Second Accordion
+
+
+ Second Content
+
+
+
+
+ Third Accordion
+
+
+ Third Content
+
+
+
+```
diff --git a/static/usage/v7/accordion/customization/icons/react.md b/static/usage/v7/accordion/customization/icons/react.md
new file mode 100644
index 00000000000..cca6fbf0af1
--- /dev/null
+++ b/static/usage/v7/accordion/customization/icons/react.md
@@ -0,0 +1,42 @@
+```tsx
+import React from 'react';
+import {
+ IonAccordion,
+ IonAccordionGroup,
+ IonItem,
+ IonLabel
+} from '@ionic/react';
+import { caretDownCircle } from 'ionicons/icons';
+
+function Example() {
+ return (
+
+
+
+ First Accordion
+
+
+ First Content
+
+
+
+
+ Second Accordion
+
+
+ Second Content
+
+
+
+
+ Third Accordion
+
+
+ Third Content
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/accordion/customization/icons/vue.md b/static/usage/v7/accordion/customization/icons/vue.md
new file mode 100644
index 00000000000..760bab7520b
--- /dev/null
+++ b/static/usage/v7/accordion/customization/icons/vue.md
@@ -0,0 +1,53 @@
+```html
+
+
+
+
+ First Accordion
+
+
+ First Content
+
+
+
+
+ Second Accordion
+
+
+ Second Content
+
+
+
+
+ Third Accordion
+
+
+ Third Content
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/accordion/customization/theming/angular/example_component_html.md b/static/usage/v7/accordion/customization/theming/angular/example_component_html.md
new file mode 100644
index 00000000000..9af8534259c
--- /dev/null
+++ b/static/usage/v7/accordion/customization/theming/angular/example_component_html.md
@@ -0,0 +1,28 @@
+```html
+
+
+
+ First Accordion
+
+
+ First Content
+
+
+
+
+ Second Accordion
+
+
+ Second Content
+
+
+
+
+ Third Accordion
+
+
+ Third Content
+
+
+
+```
diff --git a/static/usage/v7/accordion/customization/theming/angular/global_css.md b/static/usage/v7/accordion/customization/theming/angular/global_css.md
new file mode 100644
index 00000000000..6054219017a
--- /dev/null
+++ b/static/usage/v7/accordion/customization/theming/angular/global_css.md
@@ -0,0 +1,23 @@
+```css
+:root {
+ --ion-color-rose: #fecdd3;
+ --ion-color-rose-rgb: 254,205,211;
+ --ion-color-rose-contrast: #000000;
+ --ion-color-rose-contrast-rgb: 0,0,0;
+ --ion-color-rose-shade: #e0b4ba;
+ --ion-color-rose-tint: #fed2d7;
+}
+
+.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);
+}
+
+div[slot="content"] {
+ background: rgba(var(--ion-color-rose-rgb), 0.25)
+}
+```
\ No newline at end of file
diff --git a/static/usage/v7/accordion/customization/theming/demo.html b/static/usage/v7/accordion/customization/theming/demo.html
new file mode 100644
index 00000000000..9b771545a49
--- /dev/null
+++ b/static/usage/v7/accordion/customization/theming/demo.html
@@ -0,0 +1,72 @@
+
+
+
+
+
+
+ Accordion
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ First Accordion
+
+
+ First Content
+
+
+
+
+ Second Accordion
+
+
+ Second Content
+
+
+
+
+ Third Accordion
+
+
+ Third Content
+
+
+
+
+ First Content
+
+
+
+
+ Second Accordion
+
+
+ Second Content
+
+
+
+
+ Third Accordion
+
+
+ Third Content
+
+
+
+
+
+```
diff --git a/static/usage/v7/accordion/customization/theming/react/main_css.md b/static/usage/v7/accordion/customization/theming/react/main_css.md
new file mode 100644
index 00000000000..6054219017a
--- /dev/null
+++ b/static/usage/v7/accordion/customization/theming/react/main_css.md
@@ -0,0 +1,23 @@
+```css
+:root {
+ --ion-color-rose: #fecdd3;
+ --ion-color-rose-rgb: 254,205,211;
+ --ion-color-rose-contrast: #000000;
+ --ion-color-rose-contrast-rgb: 0,0,0;
+ --ion-color-rose-shade: #e0b4ba;
+ --ion-color-rose-tint: #fed2d7;
+}
+
+.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);
+}
+
+div[slot="content"] {
+ background: rgba(var(--ion-color-rose-rgb), 0.25)
+}
+```
\ No newline at end of file
diff --git a/static/usage/v7/accordion/customization/theming/react/main_tsx.md b/static/usage/v7/accordion/customization/theming/react/main_tsx.md
new file mode 100644
index 00000000000..348576ae0fe
--- /dev/null
+++ b/static/usage/v7/accordion/customization/theming/react/main_tsx.md
@@ -0,0 +1,43 @@
+```tsx
+import React from 'react';
+import {
+ IonAccordion,
+ IonAccordionGroup,
+ IonItem,
+ IonLabel
+} from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+
+
+
+ First Accordion
+
+
+ First Content
+
+
+
+
+ Second Accordion
+
+
+ Second Content
+
+
+
+
+ Third Accordion
+
+
+ Third Content
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/accordion/customization/theming/vue.md b/static/usage/v7/accordion/customization/theming/vue.md
new file mode 100644
index 00000000000..cf55542e739
--- /dev/null
+++ b/static/usage/v7/accordion/customization/theming/vue.md
@@ -0,0 +1,77 @@
+```html
+
+
+
+
+ First Accordion
+
+
+ First Content
+
+
+
+
+ Second Accordion
+
+
+ Second Content
+
+
+
+
+ Third Accordion
+
+
+ Third Content
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/accordion/disable-group/angular.md b/static/usage/v7/accordion/disable-group/angular.md
new file mode 100644
index 00000000000..5c4cf3b51b3
--- /dev/null
+++ b/static/usage/v7/accordion/disable-group/angular.md
@@ -0,0 +1,22 @@
+```html
+
+
+
+ First Accordion
+
+ First Content
+
+
+
+ Second Accordion
+
+ Second Content
+
+
+
+ Third Accordion
+
+ Third Content
+
+
+```
diff --git a/static/usage/v7/accordion/disable-group/demo.html b/static/usage/v7/accordion/disable-group/demo.html
new file mode 100644
index 00000000000..bbe38628365
--- /dev/null
+++ b/static/usage/v7/accordion/disable-group/demo.html
@@ -0,0 +1,49 @@
+
+
+
+
+
+
+ Button
+
+
+
+
+
+
+
+
+
+
+
+
+
+ First Accordion
+
+
+ First Content
+
+
+
+
+ Second Accordion
+
+
+ Second Content
+
+
+
+
+ Third Accordion
+
+
+ Third Content
+
+
+
+
First Content
+
+
+
+ Second Accordion
+
+ Second Content
+
+
+
+ Third Accordion
+
+ Third Content
+
+
+```
diff --git a/static/usage/v7/accordion/disable-group/react.md b/static/usage/v7/accordion/disable-group/react.md
new file mode 100644
index 00000000000..b2ff09b5fe4
--- /dev/null
+++ b/static/usage/v7/accordion/disable-group/react.md
@@ -0,0 +1,35 @@
+```tsx
+import React from 'react';
+import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react';
+function Example() {
+ return (
+
+
+
+ First Accordion
+
+
+ First Content
+
+
+
+
+ Second Accordion
+
+
+ Second Content
+
+
+
+
+ Third Accordion
+
+
+ Third Content
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/accordion/disable-group/vue.md b/static/usage/v7/accordion/disable-group/vue.md
new file mode 100644
index 00000000000..6c9e3567845
--- /dev/null
+++ b/static/usage/v7/accordion/disable-group/vue.md
@@ -0,0 +1,37 @@
+```html
+
+
+
+
+ First Accordion
+
+ First Content
+
+
+
+ Second Accordion
+
+ Second Content
+
+
+
+ Third Accordion
+
+ Third Content
+
+
+
+
+
+```
diff --git a/static/usage/v7/accordion/disable/group/angular.md b/static/usage/v7/accordion/disable/group/angular.md
new file mode 100644
index 00000000000..5c4cf3b51b3
--- /dev/null
+++ b/static/usage/v7/accordion/disable/group/angular.md
@@ -0,0 +1,22 @@
+```html
+
+
+
+ First Accordion
+
+ First Content
+
+
+
+ Second Accordion
+
+ Second Content
+
+
+
+ Third Accordion
+
+ Third Content
+
+
+```
diff --git a/static/usage/v7/accordion/disable/group/demo.html b/static/usage/v7/accordion/disable/group/demo.html
new file mode 100644
index 00000000000..357470c9cb2
--- /dev/null
+++ b/static/usage/v7/accordion/disable/group/demo.html
@@ -0,0 +1,49 @@
+
+
+
+
+
+
+ Button
+
+
+
+
+
+
+
+
+
+
+
+
+
+ First Accordion
+
+
+ First Content
+
+
+
+
+ Second Accordion
+
+
+ Second Content
+
+
+
+
+ Third Accordion
+
+
+ Third Content
+
+
+
+
First Content
+
+
+
+ Second Accordion
+
+ Second Content
+
+
+
+ Third Accordion
+
+ Third Content
+
+
+```
diff --git a/static/usage/v7/accordion/disable/group/react.md b/static/usage/v7/accordion/disable/group/react.md
new file mode 100644
index 00000000000..b2ff09b5fe4
--- /dev/null
+++ b/static/usage/v7/accordion/disable/group/react.md
@@ -0,0 +1,35 @@
+```tsx
+import React from 'react';
+import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react';
+function Example() {
+ return (
+
+
+
+ First Accordion
+
+
+ First Content
+
+
+
+
+ Second Accordion
+
+
+ Second Content
+
+
+
+
+ Third Accordion
+
+
+ Third Content
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/accordion/disable/group/vue.md b/static/usage/v7/accordion/disable/group/vue.md
new file mode 100644
index 00000000000..6c9e3567845
--- /dev/null
+++ b/static/usage/v7/accordion/disable/group/vue.md
@@ -0,0 +1,37 @@
+```html
+
+
+
+
+ First Accordion
+
+ First Content
+
+
+
+ Second Accordion
+
+ Second Content
+
+
+
+ Third Accordion
+
+ Third Content
+
+
+
+
+
+```
diff --git a/static/usage/v7/accordion/disable/individual/angular.md b/static/usage/v7/accordion/disable/individual/angular.md
new file mode 100644
index 00000000000..56ac780e987
--- /dev/null
+++ b/static/usage/v7/accordion/disable/individual/angular.md
@@ -0,0 +1,22 @@
+```html
+
+
+
+ First Accordion
+
+ First Content
+
+
+
+ Second Accordion (Disabled)
+
+ Second Content
+
+
+
+ Third Accordion
+
+ Third Content
+
+
+```
diff --git a/static/usage/v7/accordion/disable/individual/demo.html b/static/usage/v7/accordion/disable/individual/demo.html
new file mode 100644
index 00000000000..33d7caf6f65
--- /dev/null
+++ b/static/usage/v7/accordion/disable/individual/demo.html
@@ -0,0 +1,49 @@
+
+
+
+
+
+
+ Accordion
+
+
+
+
+
+
+
+
+
+
+
+
+
+ First Accordion
+
+
+ First Content
+
+
+
+
+ Second Accordion (Disabled)
+
+
+ Second Content
+
+
+
+
+ Third Accordion
+
+
+ Third Content
+
+
+
+
First Content
+
+
+
+ Second Accordion (Disabled)
+
+ Second Content
+
+
+
+ Third Accordion
+
+ Third Content
+
+
+```
diff --git a/static/usage/v7/accordion/disable/individual/react.md b/static/usage/v7/accordion/disable/individual/react.md
new file mode 100644
index 00000000000..e133354999a
--- /dev/null
+++ b/static/usage/v7/accordion/disable/individual/react.md
@@ -0,0 +1,35 @@
+```tsx
+import React from 'react';
+import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react';
+function Example() {
+ return (
+
+
+
+ First Accordion
+
+
+ First Content
+
+
+
+
+ Second Accordion
+
+
+ Second Content
+
+
+
+
+ Third Accordion
+
+
+ Third Content
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/accordion/disable/individual/vue.md b/static/usage/v7/accordion/disable/individual/vue.md
new file mode 100644
index 00000000000..dc26bc3b11f
--- /dev/null
+++ b/static/usage/v7/accordion/disable/individual/vue.md
@@ -0,0 +1,37 @@
+```html
+
+
+
+
+ First Accordion
+
+ First Content
+
+
+
+ Second Accordion
+
+ Second Content
+
+
+
+ Third Accordion
+
+ Third Content
+
+
+
+
+
+```
diff --git a/static/usage/v7/accordion/listen-changes/angular/example_component_html.md b/static/usage/v7/accordion/listen-changes/angular/example_component_html.md
new file mode 100644
index 00000000000..a70ad5e3be6
--- /dev/null
+++ b/static/usage/v7/accordion/listen-changes/angular/example_component_html.md
@@ -0,0 +1,24 @@
+```html
+
+
+
+ First Accordion
+
+ First Content
+
+
+
+ Second Accordion
+
+ Second Content
+
+
+
+ Third Accordion
+
+ Third Content
+
+
+
+
+```
diff --git a/static/usage/v7/accordion/listen-changes/angular/example_component_ts.md b/static/usage/v7/accordion/listen-changes/angular/example_component_ts.md
new file mode 100644
index 00000000000..c14734aba72
--- /dev/null
+++ b/static/usage/v7/accordion/listen-changes/angular/example_component_ts.md
@@ -0,0 +1,27 @@
+```ts
+import { Component, ElementRef, ViewChild } from '@angular/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ @ViewChild('listenerOut', { static: true }) listenerOut: ElementRef;
+ private values: string[] = ['first', 'second', 'third'];
+
+ accordionGroupChange = (ev: any) => {
+ const nativeEl = this.listenerOut.nativeElement;
+ if (!nativeEl) {
+ return;
+ }
+
+ const collapsedItems = this.values.filter((value) => value !== ev.detail.value);
+ const selectedValue = ev.detail.value;
+
+ nativeEl.innerText = `
+ Expanded: ${selectedValue === undefined ? 'None' : ev.detail.value}
+ Collapsed: ${collapsedItems.join(', ')}
+ `;
+ };
+}
+```
diff --git a/static/usage/v7/accordion/listen-changes/demo.html b/static/usage/v7/accordion/listen-changes/demo.html
new file mode 100644
index 00000000000..986aba59eb6
--- /dev/null
+++ b/static/usage/v7/accordion/listen-changes/demo.html
@@ -0,0 +1,73 @@
+
+
+
+
+
+
+ Accordion
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ First Accordion
+
+
+ First Content
+
+
+
+
+ Second Accordion
+
+
+ Second Content
+
+
+
+
+ Third Accordion
+
+
+ Third Content
+
+
+
+
+
+
+
First Content
+
+
+
+ Second Accordion
+
+ Second Content
+
+
+
+ Third Accordion
+
+ Third Content
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/accordion/listen-changes/react.md b/static/usage/v7/accordion/listen-changes/react.md
new file mode 100644
index 00000000000..eb76312b62a
--- /dev/null
+++ b/static/usage/v7/accordion/listen-changes/react.md
@@ -0,0 +1,55 @@
+```tsx
+import React, { useRef } from 'react';
+import { IonAccordion, IonAccordionGroup, IonItem, IonLabel, AccordionGroupCustomEvent } from '@ionic/react';
+function Example() {
+ const listenerOut = useRef(null);
+ const values = ['first', 'second', 'third'];
+ const accordionGroupChange = (ev: AccordionGroupCustomEvent) => {
+ const nativeEl = listenerOut.current;
+ if (!nativeEl) {
+ return;
+ }
+
+ const collapsedItems = values.filter((value) => value !== ev.detail.value);
+ const selectedValue = ev.detail.value;
+
+ nativeEl.innerText = `
+ Expanded: ${selectedValue === undefined ? 'None' : ev.detail.value}
+ Collapsed: ${collapsedItems.join(', ')}
+ `;
+ };
+
+ return (
+ <>
+
+
+
+ First Accordion
+
+
+ First Content
+
+
+
+
+ Second Accordion
+
+
+ Second Content
+
+
+
+
+ Third Accordion
+
+
+ Third Content
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/accordion/listen-changes/vue.md b/static/usage/v7/accordion/listen-changes/vue.md
new file mode 100644
index 00000000000..0086a788ac0
--- /dev/null
+++ b/static/usage/v7/accordion/listen-changes/vue.md
@@ -0,0 +1,58 @@
+```html
+
+
+
+
+ First Accordion
+
+ First Content
+
+
+
+ Second Accordion
+
+ Second Content
+
+
+
+ Third Accordion
+
+ Third Content
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/accordion/multiple/angular.md b/static/usage/v7/accordion/multiple/angular.md
new file mode 100644
index 00000000000..238f000c458
--- /dev/null
+++ b/static/usage/v7/accordion/multiple/angular.md
@@ -0,0 +1,22 @@
+```html
+
+
+
+ First Accordion
+
+ First Content
+
+
+
+ Second Accordion
+
+ Second Content
+
+
+
+ Third Accordion
+
+ Third Content
+
+
+```
diff --git a/static/usage/v7/accordion/multiple/demo.html b/static/usage/v7/accordion/multiple/demo.html
new file mode 100644
index 00000000000..d7dbbfae658
--- /dev/null
+++ b/static/usage/v7/accordion/multiple/demo.html
@@ -0,0 +1,54 @@
+
+
+
+
+
+
+ Accordion
+
+
+
+
+
+
+
+
+
+
+
+
+
+ First Accordion
+
+
+ First Content
+
+
+
+
+ Second Accordion
+
+
+ Second Content
+
+
+
+
+ Third Accordion
+
+
+ Third Content
+
+
+
+
First Content
+
+
+
+ Second Accordion
+
+ Second Content
+
+
+
+ Third Accordion
+
+ Third Content
+
+
+
+
+```
diff --git a/static/usage/v7/accordion/multiple/react.md b/static/usage/v7/accordion/multiple/react.md
new file mode 100644
index 00000000000..2bdbb0b365a
--- /dev/null
+++ b/static/usage/v7/accordion/multiple/react.md
@@ -0,0 +1,45 @@
+```tsx
+import React, { useRef, useEffect } from 'react';
+import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react';
+function Example() {
+ const accordionGroup = useRef(null);
+
+ useEffect(() => {
+ if (!accordionGroup.current) {
+ return;
+ }
+
+ accordionGroup.current.value = ['first', 'third'];
+ }, []);
+
+ return (
+
+
+
+ First Accordion
+
+
+ First Content
+
+
+
+
+ Second Accordion
+
+
+ Second Content
+
+
+
+
+ Third Accordion
+
+
+ Third Content
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/accordion/multiple/vue.md b/static/usage/v7/accordion/multiple/vue.md
new file mode 100644
index 00000000000..dcf86fbd7d4
--- /dev/null
+++ b/static/usage/v7/accordion/multiple/vue.md
@@ -0,0 +1,38 @@
+```html
+
+
+
+
+ First Accordion
+
+ First Content
+
+
+
+ Second Accordion
+
+ Second Content
+
+
+
+ Third Accordion
+
+ Third Content
+
+
+
+
+
+```
diff --git a/static/usage/v7/accordion/readonly/group/angular.md b/static/usage/v7/accordion/readonly/group/angular.md
new file mode 100644
index 00000000000..99c084f8064
--- /dev/null
+++ b/static/usage/v7/accordion/readonly/group/angular.md
@@ -0,0 +1,28 @@
+```html
+
+
+
+ First Accordion
+
+
+ First Content
+
+
+
+
+ Second Accordion
+
+
+ Second Content
+
+
+
+
+ Third Accordion
+
+
+ Third Content
+
+
+
+```
diff --git a/static/usage/v7/accordion/readonly/group/demo.html b/static/usage/v7/accordion/readonly/group/demo.html
new file mode 100644
index 00000000000..7b67c1ce83c
--- /dev/null
+++ b/static/usage/v7/accordion/readonly/group/demo.html
@@ -0,0 +1,49 @@
+
+
+
+
+
+
+ Accordion
+
+
+
+
+
+
+
+
+
+
+
+
+
+ First Accordion
+
+
+ First Content
+
+
+
+
+ Second Accordion
+
+
+ Second Content
+
+
+
+
+ Third Accordion
+
+
+ Third Content
+
+
+
+
+ First Content
+
+
+
+
+ Second Accordion
+
+
+ Second Content
+
+
+
+
+ Third Accordion
+
+
+ Third Content
+
+
+
+```
diff --git a/static/usage/v7/accordion/readonly/group/react.md b/static/usage/v7/accordion/readonly/group/react.md
new file mode 100644
index 00000000000..5383b732d96
--- /dev/null
+++ b/static/usage/v7/accordion/readonly/group/react.md
@@ -0,0 +1,40 @@
+```tsx
+import React from 'react';
+import {
+ IonAccordion,
+ IonAccordionGroup,
+ IonItem,
+ IonLabel
+} from '@ionic/react';
+function Example() {
+ return (
+
+
+
+ First Accordion
+
+
+ First Content
+
+
+
+
+ Second Accordion
+
+
+ Second Content
+
+
+
+
+ Third Accordion
+
+
+ Third Content
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/accordion/readonly/group/vue.md b/static/usage/v7/accordion/readonly/group/vue.md
new file mode 100644
index 00000000000..aa6a662a802
--- /dev/null
+++ b/static/usage/v7/accordion/readonly/group/vue.md
@@ -0,0 +1,49 @@
+```html
+
+
+
+
+ First Accordion
+
+
+ First Content
+
+
+
+
+ Second Accordion
+
+
+ Second Content
+
+
+
+
+ Third Accordion
+
+
+ Third Content
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/accordion/readonly/individual/angular.md b/static/usage/v7/accordion/readonly/individual/angular.md
new file mode 100644
index 00000000000..7f9f8f5bb2e
--- /dev/null
+++ b/static/usage/v7/accordion/readonly/individual/angular.md
@@ -0,0 +1,28 @@
+```html
+
+
+
+ First Accordion
+
+
+ First Content
+
+
+
+
+ Second Accordion (Readonly)
+
+
+ Second Content
+
+
+
+
+ Third Accordion
+
+
+ Third Content
+
+
+
+```
diff --git a/static/usage/v7/accordion/readonly/individual/demo.html b/static/usage/v7/accordion/readonly/individual/demo.html
new file mode 100644
index 00000000000..65b7efbc355
--- /dev/null
+++ b/static/usage/v7/accordion/readonly/individual/demo.html
@@ -0,0 +1,49 @@
+
+
+
+
+
+
+ Accordion
+
+
+
+
+
+
+
+
+
+
+
+
+
+ First Accordion
+
+
+ First Content
+
+
+
+
+ Second Accordion (Readonly)
+
+
+ Second Content
+
+
+
+
+ Third Accordion
+
+
+ Third Content
+
+
+
+
+ First Content
+
+
+
+
+ Second Accordion (Readonly)
+
+
+ Second Content
+
+
+
+
+ Third Accordion
+
+
+ Third Content
+
+
+
+```
diff --git a/static/usage/v7/accordion/readonly/individual/react.md b/static/usage/v7/accordion/readonly/individual/react.md
new file mode 100644
index 00000000000..7e94d274b32
--- /dev/null
+++ b/static/usage/v7/accordion/readonly/individual/react.md
@@ -0,0 +1,40 @@
+```tsx
+import React from 'react';
+import {
+ IonAccordion,
+ IonAccordionGroup,
+ IonItem,
+ IonLabel
+} from '@ionic/react';
+function Example() {
+ return (
+
+
+
+ First Accordion
+
+
+ First Content
+
+
+
+
+ Second Accordion (Readonly)
+
+
+ Second Content
+
+
+
+
+ Third Accordion
+
+
+ Third Content
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/accordion/readonly/individual/vue.md b/static/usage/v7/accordion/readonly/individual/vue.md
new file mode 100644
index 00000000000..2e02ebd3679
--- /dev/null
+++ b/static/usage/v7/accordion/readonly/individual/vue.md
@@ -0,0 +1,49 @@
+```html
+
+
+
+
+ First Accordion
+
+
+ First Content
+
+
+
+
+ Second Accordion (Readonly)
+
+
+ Second Content
+
+
+
+
+ Third Accordion
+
+
+ Third Content
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/accordion/toggle/angular/example_component_html.md b/static/usage/v7/accordion/toggle/angular/example_component_html.md
new file mode 100644
index 00000000000..6af0af8516a
--- /dev/null
+++ b/static/usage/v7/accordion/toggle/angular/example_component_html.md
@@ -0,0 +1,24 @@
+```html
+
+
+
+ First Accordion
+
+ First Content
+
+
+
+ Second Accordion
+
+ Second Content
+
+
+
+ Third Accordion
+
+ Third Content
+
+
+
+Toggle Second Accordion
+```
diff --git a/static/usage/v7/accordion/toggle/angular/example_component_ts.md b/static/usage/v7/accordion/toggle/angular/example_component_ts.md
new file mode 100644
index 00000000000..bdcac1d862f
--- /dev/null
+++ b/static/usage/v7/accordion/toggle/angular/example_component_ts.md
@@ -0,0 +1,21 @@
+```ts
+import { Component, ViewChild } from '@angular/core';
+import { IonAccordionGroup } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ @ViewChild('accordionGroup', { static: true }) accordionGroup: IonAccordionGroup;
+
+ toggleAccordion = () => {
+ const nativeEl = this.accordionGroup;
+ if (nativeEl.value === 'second') {
+ nativeEl.value = undefined;
+ } else {
+ nativeEl.value = 'second';
+ }
+ };
+}
+```
diff --git a/static/usage/v7/accordion/toggle/demo.html b/static/usage/v7/accordion/toggle/demo.html
new file mode 100644
index 00000000000..d230e1e35e0
--- /dev/null
+++ b/static/usage/v7/accordion/toggle/demo.html
@@ -0,0 +1,69 @@
+
+
+
+
+
+
+ Accordion
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ First Accordion
+
+
+ First Content
+
+
+
+
+ Second Accordion
+
+
+ Second Content
+
+
+
+
+ Third Accordion
+
+
+ Third Content
+
+
+
+
+
+
+
Toggle Second Accordion
+
First Content
+
+
+
+ Second Accordion
+
+ Second Content
+
+
+
+ Third Accordion
+
+ Third Content
+
+
+
+Toggle Second Accordion
+
+
+```
diff --git a/static/usage/v7/accordion/toggle/react.md b/static/usage/v7/accordion/toggle/react.md
new file mode 100644
index 00000000000..8d20c6bb18e
--- /dev/null
+++ b/static/usage/v7/accordion/toggle/react.md
@@ -0,0 +1,51 @@
+```tsx
+import React, { useRef } from 'react';
+import { IonAccordion, IonAccordionGroup, IonButton, IonItem, IonLabel } from '@ionic/react';
+function Example() {
+ const accordionGroup = useRef(null);
+ const toggleAccordion = () => {
+ if (!accordionGroup.current) {
+ return;
+ }
+ const nativeEl = accordionGroup.current;
+
+ if (nativeEl.value === 'second') {
+ nativeEl.value = undefined;
+ } else {
+ nativeEl.value = 'second';
+ }
+ };
+ return (
+ <>
+
+
+
+ First Accordion
+
+
+ First Content
+
+
+
+
+ Second Accordion
+
+
+ Second Content
+
+
+
+
+ Third Accordion
+
+
+ Third Content
+
+
+
+ Toggle Second Accordion
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/accordion/toggle/vue.md b/static/usage/v7/accordion/toggle/vue.md
new file mode 100644
index 00000000000..c9fa11c0e9c
--- /dev/null
+++ b/static/usage/v7/accordion/toggle/vue.md
@@ -0,0 +1,58 @@
+```html
+
+
+
+
+ First Accordion
+
+ First Content
+
+
+
+ Second Accordion
+
+ Second Content
+
+
+
+ Third Accordion
+
+ Third Content
+
+
+
+ Toggle Second Accordion
+
+
+
+```
diff --git a/static/usage/v7/action-sheet/controller/angular/example_component_html.md b/static/usage/v7/action-sheet/controller/angular/example_component_html.md
new file mode 100644
index 00000000000..2cc044fbee1
--- /dev/null
+++ b/static/usage/v7/action-sheet/controller/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+Open
+```
diff --git a/static/usage/v7/action-sheet/controller/angular/example_component_ts.md b/static/usage/v7/action-sheet/controller/angular/example_component_ts.md
new file mode 100644
index 00000000000..c7ecc272663
--- /dev/null
+++ b/static/usage/v7/action-sheet/controller/angular/example_component_ts.md
@@ -0,0 +1,43 @@
+```ts
+import { Component } from '@angular/core';
+
+import { ActionSheetController } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ constructor(private actionSheetCtrl: ActionSheetController) {}
+
+ async presentActionSheet() {
+ const actionSheet = await this.actionSheetCtrl.create({
+ header: 'Actions',
+ buttons: [
+ {
+ text: 'Delete',
+ role: 'destructive',
+ data: {
+ action: 'delete',
+ },
+ },
+ {
+ text: 'Share',
+ data: {
+ action: 'share',
+ },
+ },
+ {
+ text: 'Cancel',
+ role: 'cancel',
+ data: {
+ action: 'cancel',
+ },
+ },
+ ],
+ });
+
+ await actionSheet.present();
+ }
+}
+```
diff --git a/static/usage/v7/action-sheet/controller/demo.html b/static/usage/v7/action-sheet/controller/demo.html
new file mode 100644
index 00000000000..c3e407fa1f9
--- /dev/null
+++ b/static/usage/v7/action-sheet/controller/demo.html
@@ -0,0 +1,53 @@
+
+
+
+
+
+
+ Action Sheet
+
+
+
+
+
+
+
+
+
+
+ Open
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/action-sheet/controller/index.md b/static/usage/v7/action-sheet/controller/index.md
new file mode 100644
index 00000000000..f761b958240
--- /dev/null
+++ b/static/usage/v7/action-sheet/controller/index.md
@@ -0,0 +1,27 @@
+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_example_component_ts from './angular/example_component_ts.md';
+import angular_example_component_html from './angular/example_component_html.md';
+
+
diff --git a/static/usage/v7/action-sheet/controller/javascript.md b/static/usage/v7/action-sheet/controller/javascript.md
new file mode 100644
index 00000000000..e4c32b54f09
--- /dev/null
+++ b/static/usage/v7/action-sheet/controller/javascript.md
@@ -0,0 +1,35 @@
+```html
+Open
+
+
+```
diff --git a/static/usage/v7/action-sheet/controller/react.md b/static/usage/v7/action-sheet/controller/react.md
new file mode 100644
index 00000000000..0fb6f90cbf7
--- /dev/null
+++ b/static/usage/v7/action-sheet/controller/react.md
@@ -0,0 +1,43 @@
+```tsx
+import React from 'react';
+import { IonButton, useIonActionSheet } from '@ionic/react';
+
+function Example() {
+ const [present] = useIonActionSheet();
+
+ return (
+
+ present({
+ header: 'Actions',
+ buttons: [
+ {
+ text: 'Delete',
+ role: 'destructive',
+ data: {
+ action: 'delete',
+ },
+ },
+ {
+ text: 'Share',
+ data: {
+ action: 'share',
+ },
+ },
+ {
+ text: 'Cancel',
+ role: 'cancel',
+ data: {
+ action: 'cancel',
+ },
+ },
+ ],
+ })
+ }
+ >
+ Open
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/action-sheet/controller/vue.md b/static/usage/v7/action-sheet/controller/vue.md
new file mode 100644
index 00000000000..8e98e65e36a
--- /dev/null
+++ b/static/usage/v7/action-sheet/controller/vue.md
@@ -0,0 +1,46 @@
+```html
+
+ Open
+
+
+
+```
diff --git a/static/usage/v7/action-sheet/inline/isOpen/angular/example_component_html.md b/static/usage/v7/action-sheet/inline/isOpen/angular/example_component_html.md
new file mode 100644
index 00000000000..a2af98772fd
--- /dev/null
+++ b/static/usage/v7/action-sheet/inline/isOpen/angular/example_component_html.md
@@ -0,0 +1,9 @@
+```html
+Open
+
+```
diff --git a/static/usage/v7/action-sheet/inline/isOpen/angular/example_component_ts.md b/static/usage/v7/action-sheet/inline/isOpen/angular/example_component_ts.md
new file mode 100644
index 00000000000..381691b1f0c
--- /dev/null
+++ b/static/usage/v7/action-sheet/inline/isOpen/angular/example_component_ts.md
@@ -0,0 +1,37 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ isActionSheetOpen = false;
+ public actionSheetButtons = [
+ {
+ text: 'Delete',
+ role: 'destructive',
+ data: {
+ action: 'delete'
+ }
+ },
+ {
+ text: 'Share',
+ data: {
+ action: 'share'
+ }
+ },
+ {
+ text: 'Cancel',
+ role: 'cancel',
+ data: {
+ action: 'cancel'
+ }
+ }
+ ];
+
+ setOpen(isOpen: boolean) {
+ this.isActionSheetOpen = isOpen;
+ }
+}
+```
diff --git a/static/usage/v7/action-sheet/inline/isOpen/demo.html b/static/usage/v7/action-sheet/inline/isOpen/demo.html
new file mode 100644
index 00000000000..6bfbc3ebb9e
--- /dev/null
+++ b/static/usage/v7/action-sheet/inline/isOpen/demo.html
@@ -0,0 +1,55 @@
+
+
+
+
+
+
+ Action Sheet
+
+
+
+
+
+
+
+
+
+
+ Open
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/action-sheet/inline/isOpen/index.md b/static/usage/v7/action-sheet/inline/isOpen/index.md
new file mode 100644
index 00000000000..86cf87ab2cd
--- /dev/null
+++ b/static/usage/v7/action-sheet/inline/isOpen/index.md
@@ -0,0 +1,27 @@
+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_example_component_ts from './angular/example_component_ts.md';
+import angular_example_component_html from './angular/example_component_html.md';
+
+
diff --git a/static/usage/v7/action-sheet/inline/isOpen/javascript.md b/static/usage/v7/action-sheet/inline/isOpen/javascript.md
new file mode 100644
index 00000000000..6557f4f4c50
--- /dev/null
+++ b/static/usage/v7/action-sheet/inline/isOpen/javascript.md
@@ -0,0 +1,35 @@
+```html
+Open
+
+
+
+```
diff --git a/static/usage/v7/action-sheet/inline/isOpen/react.md b/static/usage/v7/action-sheet/inline/isOpen/react.md
new file mode 100644
index 00000000000..5497ad7b574
--- /dev/null
+++ b/static/usage/v7/action-sheet/inline/isOpen/react.md
@@ -0,0 +1,42 @@
+```tsx
+import React, { useState } from 'react';
+import { IonActionSheet, IonButton } from '@ionic/react';
+
+function Example() {
+ const [isOpen, setIsOpen] = useState(false);
+
+ return (
+ <>
+ setIsOpen(true)}>Open
+ setIsOpen(false)}
+ >
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/action-sheet/inline/isOpen/vue.md b/static/usage/v7/action-sheet/inline/isOpen/vue.md
new file mode 100644
index 00000000000..a3131033fff
--- /dev/null
+++ b/static/usage/v7/action-sheet/inline/isOpen/vue.md
@@ -0,0 +1,55 @@
+```html
+
+ Open
+
+
+
+
+```
diff --git a/static/usage/v7/action-sheet/inline/trigger/angular/example_component_html.md b/static/usage/v7/action-sheet/inline/trigger/angular/example_component_html.md
new file mode 100644
index 00000000000..bf4d4580341
--- /dev/null
+++ b/static/usage/v7/action-sheet/inline/trigger/angular/example_component_html.md
@@ -0,0 +1,8 @@
+```html
+Open
+
+```
diff --git a/static/usage/v7/action-sheet/inline/trigger/angular/example_component_ts.md b/static/usage/v7/action-sheet/inline/trigger/angular/example_component_ts.md
new file mode 100644
index 00000000000..2834f65e3e3
--- /dev/null
+++ b/static/usage/v7/action-sheet/inline/trigger/angular/example_component_ts.md
@@ -0,0 +1,32 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ public actionSheetButtons = [
+ {
+ text: 'Delete',
+ role: 'destructive',
+ data: {
+ action: 'delete'
+ }
+ },
+ {
+ text: 'Share',
+ data: {
+ action: 'share'
+ }
+ },
+ {
+ text: 'Cancel',
+ role: 'cancel',
+ data: {
+ action: 'cancel'
+ }
+ }
+ ];
+}
+```
diff --git a/static/usage/v7/action-sheet/inline/trigger/demo.html b/static/usage/v7/action-sheet/inline/trigger/demo.html
new file mode 100644
index 00000000000..6c6b6c0b91c
--- /dev/null
+++ b/static/usage/v7/action-sheet/inline/trigger/demo.html
@@ -0,0 +1,54 @@
+
+
+
+
+
+
+ Action Sheet
+
+
+
+
+
+
+
+
+
+
+ Open
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/action-sheet/inline/trigger/index.md b/static/usage/v7/action-sheet/inline/trigger/index.md
new file mode 100644
index 00000000000..b35cd485cbe
--- /dev/null
+++ b/static/usage/v7/action-sheet/inline/trigger/index.md
@@ -0,0 +1,27 @@
+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_example_component_ts from './angular/example_component_ts.md';
+import angular_example_component_html from './angular/example_component_html.md';
+
+
diff --git a/static/usage/v7/action-sheet/inline/trigger/javascript.md b/static/usage/v7/action-sheet/inline/trigger/javascript.md
new file mode 100644
index 00000000000..8e769fe0ed1
--- /dev/null
+++ b/static/usage/v7/action-sheet/inline/trigger/javascript.md
@@ -0,0 +1,34 @@
+```html
+Open
+
+
+
+```
diff --git a/static/usage/v7/action-sheet/inline/trigger/react.md b/static/usage/v7/action-sheet/inline/trigger/react.md
new file mode 100644
index 00000000000..6890d0be7a8
--- /dev/null
+++ b/static/usage/v7/action-sheet/inline/trigger/react.md
@@ -0,0 +1,39 @@
+```tsx
+import React from 'react';
+import { IonActionSheet, IonButton } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+ Open
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/action-sheet/inline/trigger/vue.md b/static/usage/v7/action-sheet/inline/trigger/vue.md
new file mode 100644
index 00000000000..4c681af50b6
--- /dev/null
+++ b/static/usage/v7/action-sheet/inline/trigger/vue.md
@@ -0,0 +1,44 @@
+```html
+
+ Open
+
+
+
+
+```
diff --git a/static/usage/v7/action-sheet/role-info-on-dismiss/angular/example_component_css.md b/static/usage/v7/action-sheet/role-info-on-dismiss/angular/example_component_css.md
new file mode 100644
index 00000000000..5058c1b3377
--- /dev/null
+++ b/static/usage/v7/action-sheet/role-info-on-dismiss/angular/example_component_css.md
@@ -0,0 +1,13 @@
+```css
+.container {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ height: 100%;
+}
+
+code {
+ white-space: pre-wrap;
+}
+```
diff --git a/static/usage/v7/action-sheet/role-info-on-dismiss/angular/example_component_html.md b/static/usage/v7/action-sheet/role-info-on-dismiss/angular/example_component_html.md
new file mode 100644
index 00000000000..6a1d54531f9
--- /dev/null
+++ b/static/usage/v7/action-sheet/role-info-on-dismiss/angular/example_component_html.md
@@ -0,0 +1,14 @@
+```html
+
+ Open
+
+
+ {{ result }}
+
+```
diff --git a/static/usage/v7/action-sheet/role-info-on-dismiss/angular/example_component_ts.md b/static/usage/v7/action-sheet/role-info-on-dismiss/angular/example_component_ts.md
new file mode 100644
index 00000000000..146729f88db
--- /dev/null
+++ b/static/usage/v7/action-sheet/role-info-on-dismiss/angular/example_component_ts.md
@@ -0,0 +1,40 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['./example.component.css'],
+})
+export class ExampleComponent {
+ result: string;
+ public actionSheetButtons = [
+ {
+ text: 'Delete',
+ role: 'destructive',
+ data: {
+ action: 'delete'
+ }
+ },
+ {
+ text: 'Share',
+ data: {
+ action: 'share'
+ }
+ },
+ {
+ text: 'Cancel',
+ role: 'cancel',
+ data: {
+ action: 'cancel'
+ }
+ }
+ ];
+
+ constructor() {}
+
+ setResult(ev) {
+ this.result = JSON.stringify(ev.detail, null, 2);
+ }
+}
+```
diff --git a/static/usage/v7/action-sheet/role-info-on-dismiss/demo.html b/static/usage/v7/action-sheet/role-info-on-dismiss/demo.html
new file mode 100644
index 00000000000..ec13be6f6a5
--- /dev/null
+++ b/static/usage/v7/action-sheet/role-info-on-dismiss/demo.html
@@ -0,0 +1,72 @@
+
+
+
+
+
+
+ Action Sheet
+
+
+
+
+
+
+
+
+
+
+
+
+ Open
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/action-sheet/role-info-on-dismiss/index.md b/static/usage/v7/action-sheet/role-info-on-dismiss/index.md
new file mode 100644
index 00000000000..5554f51a928
--- /dev/null
+++ b/static/usage/v7/action-sheet/role-info-on-dismiss/index.md
@@ -0,0 +1,35 @@
+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_ts from './angular/example_component_ts.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/action-sheet/role-info-on-dismiss/javascript.md b/static/usage/v7/action-sheet/role-info-on-dismiss/javascript.md
new file mode 100644
index 00000000000..7b1cbb0bdb4
--- /dev/null
+++ b/static/usage/v7/action-sheet/role-info-on-dismiss/javascript.md
@@ -0,0 +1,58 @@
+```html
+
+
+
+ Open
+
+
+
+
+
+```
diff --git a/static/usage/v7/action-sheet/role-info-on-dismiss/react/main_css.md b/static/usage/v7/action-sheet/role-info-on-dismiss/react/main_css.md
new file mode 100644
index 00000000000..5058c1b3377
--- /dev/null
+++ b/static/usage/v7/action-sheet/role-info-on-dismiss/react/main_css.md
@@ -0,0 +1,13 @@
+```css
+.container {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ height: 100%;
+}
+
+code {
+ white-space: pre-wrap;
+}
+```
diff --git a/static/usage/v7/action-sheet/role-info-on-dismiss/react/main_tsx.md b/static/usage/v7/action-sheet/role-info-on-dismiss/react/main_tsx.md
new file mode 100644
index 00000000000..bbddaaece4e
--- /dev/null
+++ b/static/usage/v7/action-sheet/role-info-on-dismiss/react/main_tsx.md
@@ -0,0 +1,48 @@
+```tsx
+import React, { useState } from 'react';
+import { IonActionSheet, IonButton } from '@ionic/react';
+import type { OverlayEventDetail } from '@ionic/core';
+
+import './main.css';
+
+function Example() {
+ const [result, setResult] = useState();
+
+ return (
+
+ Open
+ setResult(detail)}
+ >
+
+ {result && {JSON.stringify(result, null, 2)}}
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/action-sheet/role-info-on-dismiss/vue.md b/static/usage/v7/action-sheet/role-info-on-dismiss/vue.md
new file mode 100644
index 00000000000..dbc6b2923ed
--- /dev/null
+++ b/static/usage/v7/action-sheet/role-info-on-dismiss/vue.md
@@ -0,0 +1,74 @@
+```html
+
+
+
+
+ Open
+
+
+ {{ result }}
+
+
+
+
+```
diff --git a/static/usage/v7/action-sheet/theming/css-properties/angular/example_component_html.md b/static/usage/v7/action-sheet/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..0aa27e460f6
--- /dev/null
+++ b/static/usage/v7/action-sheet/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,10 @@
+```html
+Open
+
+```
diff --git a/static/usage/v7/action-sheet/theming/css-properties/angular/example_component_ts.md b/static/usage/v7/action-sheet/theming/css-properties/angular/example_component_ts.md
new file mode 100644
index 00000000000..a23a02b2aca
--- /dev/null
+++ b/static/usage/v7/action-sheet/theming/css-properties/angular/example_component_ts.md
@@ -0,0 +1,35 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['./example.component.css'],
+})
+export class ExampleComponent {
+ public actionSheetButtons = [
+ {
+ text: 'Delete',
+ role: 'destructive',
+ data: {
+ action: 'delete'
+ }
+ },
+ {
+ text: 'Share',
+ data: {
+ action: 'share'
+ }
+ },
+ {
+ text: 'Cancel',
+ role: 'cancel',
+ data: {
+ action: 'cancel'
+ }
+ }
+ ];
+
+ constructor() {}
+}
+```
diff --git a/static/usage/v7/action-sheet/theming/css-properties/angular/global_css.md b/static/usage/v7/action-sheet/theming/css-properties/angular/global_css.md
new file mode 100644
index 00000000000..2d9e22b3163
--- /dev/null
+++ b/static/usage/v7/action-sheet/theming/css-properties/angular/global_css.md
@@ -0,0 +1,12 @@
+```css
+/* Note: These styles should be located in your global stylesheet */
+ion-action-sheet.my-custom-class {
+ --background: #f58840;
+ --backdrop-opacity: 0.6;
+ --button-background-selected: #e97223;
+ --button-color: #000000;
+ --color: #fff;
+ /* role: "destructive" button iOS styling override */
+ --ion-color-danger: #000000;
+}
+```
diff --git a/static/usage/v7/action-sheet/theming/css-properties/demo.html b/static/usage/v7/action-sheet/theming/css-properties/demo.html
new file mode 100644
index 00000000000..7d4f02e92e6
--- /dev/null
+++ b/static/usage/v7/action-sheet/theming/css-properties/demo.html
@@ -0,0 +1,68 @@
+
+
+
+
+
+
+ Action Sheet
+
+
+
+
+
+
+
+
+
+
+
+
+ Open
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/action-sheet/theming/css-properties/index.md b/static/usage/v7/action-sheet/theming/css-properties/index.md
new file mode 100644
index 00000000000..37faf47f9f9
--- /dev/null
+++ b/static/usage/v7/action-sheet/theming/css-properties/index.md
@@ -0,0 +1,35 @@
+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_ts from './angular/example_component_ts.md';
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_global_css from './angular/global_css.md';
+
+
diff --git a/static/usage/v7/action-sheet/theming/css-properties/javascript.md b/static/usage/v7/action-sheet/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..792697d267d
--- /dev/null
+++ b/static/usage/v7/action-sheet/theming/css-properties/javascript.md
@@ -0,0 +1,48 @@
+```html
+
+
+Open
+
+
+
+```
diff --git a/static/usage/v7/action-sheet/theming/css-properties/react/main_css.md b/static/usage/v7/action-sheet/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..63809ed75c7
--- /dev/null
+++ b/static/usage/v7/action-sheet/theming/css-properties/react/main_css.md
@@ -0,0 +1,11 @@
+```css
+ion-action-sheet.my-custom-class {
+ --background: #f58840;
+ --backdrop-opacity: 0.6;
+ --button-background-selected: #e97223;
+ --button-color: #000000;
+ --color: #fff;
+ /* role: "destructive" button iOS styling override */
+ --ion-color-danger: #000000;
+}
+```
diff --git a/static/usage/v7/action-sheet/theming/css-properties/react/main_tsx.md b/static/usage/v7/action-sheet/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..d66211df842
--- /dev/null
+++ b/static/usage/v7/action-sheet/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,43 @@
+```tsx
+import React from 'react';
+import { IonActionSheet, IonButton } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+ Open
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/action-sheet/theming/css-properties/vue.md b/static/usage/v7/action-sheet/theming/css-properties/vue.md
new file mode 100644
index 00000000000..2f8cc168f58
--- /dev/null
+++ b/static/usage/v7/action-sheet/theming/css-properties/vue.md
@@ -0,0 +1,58 @@
+```html
+
+
+
+ Open
+
+
+
+
+```
diff --git a/static/usage/v7/action-sheet/theming/styling/angular/example_component_html.md b/static/usage/v7/action-sheet/theming/styling/angular/example_component_html.md
new file mode 100644
index 00000000000..0aa27e460f6
--- /dev/null
+++ b/static/usage/v7/action-sheet/theming/styling/angular/example_component_html.md
@@ -0,0 +1,10 @@
+```html
+Open
+
+```
diff --git a/static/usage/v7/action-sheet/theming/styling/angular/example_component_ts.md b/static/usage/v7/action-sheet/theming/styling/angular/example_component_ts.md
new file mode 100644
index 00000000000..a23a02b2aca
--- /dev/null
+++ b/static/usage/v7/action-sheet/theming/styling/angular/example_component_ts.md
@@ -0,0 +1,35 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['./example.component.css'],
+})
+export class ExampleComponent {
+ public actionSheetButtons = [
+ {
+ text: 'Delete',
+ role: 'destructive',
+ data: {
+ action: 'delete'
+ }
+ },
+ {
+ text: 'Share',
+ data: {
+ action: 'share'
+ }
+ },
+ {
+ text: 'Cancel',
+ role: 'cancel',
+ data: {
+ action: 'cancel'
+ }
+ }
+ ];
+
+ constructor() {}
+}
+```
diff --git a/static/usage/v7/action-sheet/theming/styling/angular/global_css.md b/static/usage/v7/action-sheet/theming/styling/angular/global_css.md
new file mode 100644
index 00000000000..46999a97921
--- /dev/null
+++ b/static/usage/v7/action-sheet/theming/styling/angular/global_css.md
@@ -0,0 +1,29 @@
+```css
+/* Note: These styles should be located in your global stylesheet */
+ion-action-sheet.my-custom-class .action-sheet-group {
+ background: #f58840;
+}
+
+ion-action-sheet.my-custom-class .action-sheet-title {
+ color: #fff;
+}
+
+ion-action-sheet.my-custom-class .action-sheet-cancel::after {
+ background: #e97223;
+}
+
+ion-action-sheet.my-custom-class .action-sheet-button,
+ion-action-sheet.my-custom-class .action-sheet-button.ion-focused {
+ color: #000000;
+}
+
+@media (any-hover: hover) {
+ ion-action-sheet.my-custom-class .action-sheet-button:hover {
+ color: #000000;
+ }
+}
+
+ion-action-sheet.my-custom-class ion-backdrop {
+ opacity: 0.6;
+}
+```
diff --git a/static/usage/v7/action-sheet/theming/styling/demo.html b/static/usage/v7/action-sheet/theming/styling/demo.html
new file mode 100644
index 00000000000..f67bf3b8906
--- /dev/null
+++ b/static/usage/v7/action-sheet/theming/styling/demo.html
@@ -0,0 +1,81 @@
+
+
+
+
+
+
+ Action Sheet
+
+
+
+
+
+
+
+
+
+
+
+
+ Open
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/action-sheet/theming/styling/index.md b/static/usage/v7/action-sheet/theming/styling/index.md
new file mode 100644
index 00000000000..67a346b3318
--- /dev/null
+++ b/static/usage/v7/action-sheet/theming/styling/index.md
@@ -0,0 +1,35 @@
+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_ts from './angular/example_component_ts.md';
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_global_css from './angular/global_css.md';
+
+
diff --git a/static/usage/v7/action-sheet/theming/styling/javascript.md b/static/usage/v7/action-sheet/theming/styling/javascript.md
new file mode 100644
index 00000000000..8d578dbb51e
--- /dev/null
+++ b/static/usage/v7/action-sheet/theming/styling/javascript.md
@@ -0,0 +1,65 @@
+```html
+
+
+Open
+
+
+
+```
diff --git a/static/usage/v7/action-sheet/theming/styling/react/main_css.md b/static/usage/v7/action-sheet/theming/styling/react/main_css.md
new file mode 100644
index 00000000000..cff22cfd41e
--- /dev/null
+++ b/static/usage/v7/action-sheet/theming/styling/react/main_css.md
@@ -0,0 +1,28 @@
+```css
+ion-action-sheet.my-custom-class .action-sheet-group {
+ background: #f58840;
+}
+
+ion-action-sheet.my-custom-class .action-sheet-title {
+ color: #fff;
+}
+
+ion-action-sheet.my-custom-class .action-sheet-cancel::after {
+ background: #e97223;
+}
+
+ion-action-sheet.my-custom-class .action-sheet-button,
+ion-action-sheet.my-custom-class .action-sheet-button.ion-focused {
+ color: #000000;
+}
+
+@media (any-hover: hover) {
+ ion-action-sheet.my-custom-class .action-sheet-button:hover {
+ color: #000000;
+ }
+}
+
+ion-action-sheet.my-custom-class ion-backdrop {
+ opacity: 0.6;
+}
+```
diff --git a/static/usage/v7/action-sheet/theming/styling/react/main_tsx.md b/static/usage/v7/action-sheet/theming/styling/react/main_tsx.md
new file mode 100644
index 00000000000..d66211df842
--- /dev/null
+++ b/static/usage/v7/action-sheet/theming/styling/react/main_tsx.md
@@ -0,0 +1,43 @@
+```tsx
+import React from 'react';
+import { IonActionSheet, IonButton } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+ Open
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/action-sheet/theming/styling/vue.md b/static/usage/v7/action-sheet/theming/styling/vue.md
new file mode 100644
index 00000000000..c46ae0bcbd3
--- /dev/null
+++ b/static/usage/v7/action-sheet/theming/styling/vue.md
@@ -0,0 +1,75 @@
+```html
+
+
+
+ Open
+
+
+
+
+```
diff --git a/static/usage/v7/alert/buttons/angular/example_component_html.md b/static/usage/v7/alert/buttons/angular/example_component_html.md
new file mode 100644
index 00000000000..bd9fb37882c
--- /dev/null
+++ b/static/usage/v7/alert/buttons/angular/example_component_html.md
@@ -0,0 +1,11 @@
+```html
+Click Me
+
+{{ handlerMessage }}
+{{ roleMessage }}
+```
\ No newline at end of file
diff --git a/static/usage/v7/alert/buttons/angular/example_component_ts.md b/static/usage/v7/alert/buttons/angular/example_component_ts.md
new file mode 100644
index 00000000000..89b76aaed6a
--- /dev/null
+++ b/static/usage/v7/alert/buttons/angular/example_component_ts.md
@@ -0,0 +1,29 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ handlerMessage = '';
+ roleMessage = '';
+
+ public alertButtons = [
+ {
+ text: 'Cancel',
+ role: 'cancel',
+ handler: () => { this.handlerMessage = 'Alert canceled'; }
+ },
+ {
+ text: 'OK',
+ role: 'confirm',
+ handler: () => { this.handlerMessage = 'Alert confirmed'; }
+ }
+ ];
+
+ setResult(ev) {
+ this.roleMessage = `Dismissed with role: ${ev.detail.role}`;
+ }
+}
+```
diff --git a/static/usage/v7/alert/buttons/demo.html b/static/usage/v7/alert/buttons/demo.html
new file mode 100644
index 00000000000..8d60d9d2324
--- /dev/null
+++ b/static/usage/v7/alert/buttons/demo.html
@@ -0,0 +1,60 @@
+
+
+
+
+
+
+ Alert
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/alert/buttons/index.md b/static/usage/v7/alert/buttons/index.md
new file mode 100644
index 00000000000..0da89f1f7bd
--- /dev/null
+++ b/static/usage/v7/alert/buttons/index.md
@@ -0,0 +1,25 @@
+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_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/v7/alert/buttons/javascript.md b/static/usage/v7/alert/buttons/javascript.md
new file mode 100644
index 00000000000..6f70843e204
--- /dev/null
+++ b/static/usage/v7/alert/buttons/javascript.md
@@ -0,0 +1,29 @@
+```html
+Click Me
+
+
+
+
+
+```
diff --git a/static/usage/v7/alert/buttons/react.md b/static/usage/v7/alert/buttons/react.md
new file mode 100644
index 00000000000..5512021adca
--- /dev/null
+++ b/static/usage/v7/alert/buttons/react.md
@@ -0,0 +1,39 @@
+```tsx
+import React, { useState } from 'react';
+import { IonAlert, IonButton } from '@ionic/react';
+
+function Example() {
+ const [handlerMessage, setHandlerMessage] = useState('');
+ const [roleMessage, setRoleMessage] = useState('');
+
+ return (
+ <>
+ Click Me
+ {
+ setHandlerMessage('Alert canceled');
+ },
+ },
+ {
+ text: 'OK',
+ role: 'confirm',
+ handler: () => {
+ setHandlerMessage('Alert confirmed');
+ },
+ },
+ ]}
+ onDidDismiss={({ detail }) => setRoleMessage(`Dismissed with role: ${detail.role}`)}
+ >
+ {handlerMessage}
+ {roleMessage}
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/alert/buttons/vue.md b/static/usage/v7/alert/buttons/vue.md
new file mode 100644
index 00000000000..50cf42bb5a3
--- /dev/null
+++ b/static/usage/v7/alert/buttons/vue.md
@@ -0,0 +1,54 @@
+```html
+
+ Click Me
+
+ {{ handlerMessage }}
+ {{ roleMessage }}
+
+
+
+```
diff --git a/static/usage/v7/alert/customization/angular/example_component_html.md b/static/usage/v7/alert/customization/angular/example_component_html.md
new file mode 100644
index 00000000000..0da962b2489
--- /dev/null
+++ b/static/usage/v7/alert/customization/angular/example_component_html.md
@@ -0,0 +1,9 @@
+```html
+Click Me
+
+```
diff --git a/static/usage/v7/alert/customization/angular/example_component_ts.md b/static/usage/v7/alert/customization/angular/example_component_ts.md
new file mode 100644
index 00000000000..51552ff9852
--- /dev/null
+++ b/static/usage/v7/alert/customization/angular/example_component_ts.md
@@ -0,0 +1,20 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ public alertButtons = [
+ {
+ text: 'No',
+ cssClass: 'alert-button-cancel',
+ },
+ {
+ text: 'Yes',
+ cssClass: 'alert-button-confirm',
+ },
+ ];
+}
+```
diff --git a/static/usage/v7/alert/customization/angular/global_css.md b/static/usage/v7/alert/customization/angular/global_css.md
new file mode 100644
index 00000000000..c4d1f859c34
--- /dev/null
+++ b/static/usage/v7/alert/customization/angular/global_css.md
@@ -0,0 +1,33 @@
+```css
+ion-alert.custom-alert {
+ --backdrop-opacity: 0.7;
+}
+
+.custom-alert .alert-button-group {
+ padding: 8px;
+}
+
+button.alert-button.alert-button-confirm {
+ background-color: var(--ion-color-success);
+ color: var(--ion-color-success-contrast);
+}
+
+.md button.alert-button.alert-button-confirm {
+ border-radius: 4px;
+}
+
+.ios .custom-alert button.alert-button {
+ border: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2)
+}
+
+.ios button.alert-button.alert-button-cancel {
+ border-right: 0;
+ border-bottom-left-radius: 13px;
+ border-top-left-radius: 13px;
+}
+
+.ios button.alert-button.alert-button-confirm {
+ border-bottom-right-radius: 13px;
+ border-top-right-radius: 13px;
+}
+```
\ No newline at end of file
diff --git a/static/usage/v7/alert/customization/demo.html b/static/usage/v7/alert/customization/demo.html
new file mode 100644
index 00000000000..78ab38ce7b3
--- /dev/null
+++ b/static/usage/v7/alert/customization/demo.html
@@ -0,0 +1,74 @@
+
+
+
+
+
+
+ Alert
+
+
+
+
+
+
+
+
+
+
+
+
+ Click Me
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/alert/customization/index.md b/static/usage/v7/alert/customization/index.md
new file mode 100644
index 00000000000..59bc30dd589
--- /dev/null
+++ b/static/usage/v7/alert/customization/index.md
@@ -0,0 +1,34 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_global_css from './angular/global_css.md';
+
+
diff --git a/static/usage/v7/alert/customization/javascript.md b/static/usage/v7/alert/customization/javascript.md
new file mode 100644
index 00000000000..f57e9958bfb
--- /dev/null
+++ b/static/usage/v7/alert/customization/javascript.md
@@ -0,0 +1,53 @@
+```html
+Click Me
+
+
+
+
+
+```
diff --git a/static/usage/v7/alert/customization/react/main_css.md b/static/usage/v7/alert/customization/react/main_css.md
new file mode 100644
index 00000000000..c4d1f859c34
--- /dev/null
+++ b/static/usage/v7/alert/customization/react/main_css.md
@@ -0,0 +1,33 @@
+```css
+ion-alert.custom-alert {
+ --backdrop-opacity: 0.7;
+}
+
+.custom-alert .alert-button-group {
+ padding: 8px;
+}
+
+button.alert-button.alert-button-confirm {
+ background-color: var(--ion-color-success);
+ color: var(--ion-color-success-contrast);
+}
+
+.md button.alert-button.alert-button-confirm {
+ border-radius: 4px;
+}
+
+.ios .custom-alert button.alert-button {
+ border: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2)
+}
+
+.ios button.alert-button.alert-button-cancel {
+ border-right: 0;
+ border-bottom-left-radius: 13px;
+ border-top-left-radius: 13px;
+}
+
+.ios button.alert-button.alert-button-confirm {
+ border-bottom-right-radius: 13px;
+ border-top-right-radius: 13px;
+}
+```
\ No newline at end of file
diff --git a/static/usage/v7/alert/customization/react/main_tsx.md b/static/usage/v7/alert/customization/react/main_tsx.md
new file mode 100644
index 00000000000..b32663d5339
--- /dev/null
+++ b/static/usage/v7/alert/customization/react/main_tsx.md
@@ -0,0 +1,30 @@
+```tsx
+import React from 'react';
+import { IonAlert, IonButton } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+ Click Me
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/alert/customization/vue.md b/static/usage/v7/alert/customization/vue.md
new file mode 100644
index 00000000000..7bd279bd0c1
--- /dev/null
+++ b/static/usage/v7/alert/customization/vue.md
@@ -0,0 +1,67 @@
+```html
+
+ Click Me
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/alert/inputs/radios/angular/example_component_html.md b/static/usage/v7/alert/inputs/radios/angular/example_component_html.md
new file mode 100644
index 00000000000..6d70c3bd2c1
--- /dev/null
+++ b/static/usage/v7/alert/inputs/radios/angular/example_component_html.md
@@ -0,0 +1,9 @@
+```html
+Click Me
+
+```
\ No newline at end of file
diff --git a/static/usage/v7/alert/inputs/radios/angular/example_component_ts.md b/static/usage/v7/alert/inputs/radios/angular/example_component_ts.md
new file mode 100644
index 00000000000..34f44b288da
--- /dev/null
+++ b/static/usage/v7/alert/inputs/radios/angular/example_component_ts.md
@@ -0,0 +1,28 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ public alertButtons = ['OK'];
+ public alertInputs = [
+ {
+ label: 'Red',
+ type: 'radio',
+ value: 'red',
+ },
+ {
+ label: 'Blue',
+ type: 'radio',
+ value: 'blue',
+ },
+ {
+ label: 'Green',
+ type: 'radio',
+ value: 'green',
+ },
+ ];
+}
+```
diff --git a/static/usage/v7/alert/inputs/radios/demo.html b/static/usage/v7/alert/inputs/radios/demo.html
new file mode 100644
index 00000000000..0428ce98f22
--- /dev/null
+++ b/static/usage/v7/alert/inputs/radios/demo.html
@@ -0,0 +1,48 @@
+
+
+
+
+
+
+ Alert
+
+
+
+
+
+
+
+
+
+
+ Click Me
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/alert/inputs/radios/index.md b/static/usage/v7/alert/inputs/radios/index.md
new file mode 100644
index 00000000000..8ec9fc1bddd
--- /dev/null
+++ b/static/usage/v7/alert/inputs/radios/index.md
@@ -0,0 +1,25 @@
+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_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/v7/alert/inputs/radios/javascript.md b/static/usage/v7/alert/inputs/radios/javascript.md
new file mode 100644
index 00000000000..217b8c89054
--- /dev/null
+++ b/static/usage/v7/alert/inputs/radios/javascript.md
@@ -0,0 +1,27 @@
+```html
+Click Me
+
+
+
+```
diff --git a/static/usage/v7/alert/inputs/radios/react.md b/static/usage/v7/alert/inputs/radios/react.md
new file mode 100644
index 00000000000..13518c02aa4
--- /dev/null
+++ b/static/usage/v7/alert/inputs/radios/react.md
@@ -0,0 +1,35 @@
+```tsx
+import React from 'react';
+import { IonAlert, IonButton } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+ Click Me
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/alert/inputs/radios/vue.md b/static/usage/v7/alert/inputs/radios/vue.md
new file mode 100644
index 00000000000..994496c025e
--- /dev/null
+++ b/static/usage/v7/alert/inputs/radios/vue.md
@@ -0,0 +1,41 @@
+```html
+
+ Click Me
+
+
+
+
+```
diff --git a/static/usage/v7/alert/inputs/text-inputs/angular/example_component_html.md b/static/usage/v7/alert/inputs/text-inputs/angular/example_component_html.md
new file mode 100644
index 00000000000..fec220f8ecc
--- /dev/null
+++ b/static/usage/v7/alert/inputs/text-inputs/angular/example_component_html.md
@@ -0,0 +1,9 @@
+```html
+Click Me
+
+```
\ No newline at end of file
diff --git a/static/usage/v7/alert/inputs/text-inputs/angular/example_component_ts.md b/static/usage/v7/alert/inputs/text-inputs/angular/example_component_ts.md
new file mode 100644
index 00000000000..713dc9067fa
--- /dev/null
+++ b/static/usage/v7/alert/inputs/text-inputs/angular/example_component_ts.md
@@ -0,0 +1,32 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ public alertButtons = ['OK'];
+ public alertInputs = [
+ {
+ placeholder: 'Name',
+ },
+ {
+ placeholder: 'Nickname (max 8 characters)',
+ attributes: {
+ maxlength: 8,
+ },
+ },
+ {
+ type: 'number',
+ placeholder: 'Age',
+ min: 1,
+ max: 100,
+ },
+ {
+ type: 'textarea',
+ placeholder: 'A little about yourself',
+ },
+ ];
+}
+```
diff --git a/static/usage/v7/alert/inputs/text-inputs/demo.html b/static/usage/v7/alert/inputs/text-inputs/demo.html
new file mode 100644
index 00000000000..f60e3f2e887
--- /dev/null
+++ b/static/usage/v7/alert/inputs/text-inputs/demo.html
@@ -0,0 +1,52 @@
+
+
+
+
+
+
+ Alert
+
+
+
+
+
+
+
+
+
+
+ Click Me
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/alert/inputs/text-inputs/index.md b/static/usage/v7/alert/inputs/text-inputs/index.md
new file mode 100644
index 00000000000..6c56317816e
--- /dev/null
+++ b/static/usage/v7/alert/inputs/text-inputs/index.md
@@ -0,0 +1,25 @@
+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_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/v7/alert/inputs/text-inputs/javascript.md b/static/usage/v7/alert/inputs/text-inputs/javascript.md
new file mode 100644
index 00000000000..c75afba0a15
--- /dev/null
+++ b/static/usage/v7/alert/inputs/text-inputs/javascript.md
@@ -0,0 +1,31 @@
+```html
+Click Me
+
+
+
+```
diff --git a/static/usage/v7/alert/inputs/text-inputs/react.md b/static/usage/v7/alert/inputs/text-inputs/react.md
new file mode 100644
index 00000000000..fbea607f2b3
--- /dev/null
+++ b/static/usage/v7/alert/inputs/text-inputs/react.md
@@ -0,0 +1,39 @@
+```tsx
+import React from 'react';
+import { IonAlert, IonButton } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+ Click Me
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/alert/inputs/text-inputs/vue.md b/static/usage/v7/alert/inputs/text-inputs/vue.md
new file mode 100644
index 00000000000..98a2b138607
--- /dev/null
+++ b/static/usage/v7/alert/inputs/text-inputs/vue.md
@@ -0,0 +1,45 @@
+```html
+
+ Click Me
+
+
+
+
+```
diff --git a/static/usage/v7/alert/presenting/controller/angular/example_component_html.md b/static/usage/v7/alert/presenting/controller/angular/example_component_html.md
new file mode 100644
index 00000000000..e484d6c912d
--- /dev/null
+++ b/static/usage/v7/alert/presenting/controller/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+Click Me
+```
\ No newline at end of file
diff --git a/static/usage/v7/alert/presenting/controller/angular/example_component_ts.md b/static/usage/v7/alert/presenting/controller/angular/example_component_ts.md
new file mode 100644
index 00000000000..32583600432
--- /dev/null
+++ b/static/usage/v7/alert/presenting/controller/angular/example_component_ts.md
@@ -0,0 +1,23 @@
+```ts
+import { Component } from '@angular/core';
+import { AlertController } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ constructor(private alertController: AlertController) {}
+
+ async presentAlert() {
+ const alert = await this.alertController.create({
+ header: 'Alert',
+ subHeader: 'Important message',
+ message: 'This is an alert!',
+ buttons: ['OK'],
+ });
+
+ await alert.present();
+ }
+}
+```
diff --git a/static/usage/v7/alert/presenting/controller/demo.html b/static/usage/v7/alert/presenting/controller/demo.html
new file mode 100644
index 00000000000..fed8c84f369
--- /dev/null
+++ b/static/usage/v7/alert/presenting/controller/demo.html
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+ Alert
+
+
+
+
+
+
+
+
+
+
+ Click Me
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/alert/presenting/controller/index.md b/static/usage/v7/alert/presenting/controller/index.md
new file mode 100644
index 00000000000..5a01edce2a0
--- /dev/null
+++ b/static/usage/v7/alert/presenting/controller/index.md
@@ -0,0 +1,25 @@
+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_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/v7/alert/presenting/controller/javascript.md b/static/usage/v7/alert/presenting/controller/javascript.md
new file mode 100644
index 00000000000..b9159bf2fde
--- /dev/null
+++ b/static/usage/v7/alert/presenting/controller/javascript.md
@@ -0,0 +1,16 @@
+```html
+Click Me
+
+
+```
diff --git a/static/usage/v7/alert/presenting/controller/react.md b/static/usage/v7/alert/presenting/controller/react.md
new file mode 100644
index 00000000000..4e59124b155
--- /dev/null
+++ b/static/usage/v7/alert/presenting/controller/react.md
@@ -0,0 +1,24 @@
+```tsx
+import React from 'react';
+import { IonButton, useIonAlert } from '@ionic/react';
+
+function Example() {
+ const [presentAlert] = useIonAlert();
+
+ return (
+
+ presentAlert({
+ header: 'Alert',
+ subHeader: 'Important message',
+ message: 'This is an alert!',
+ buttons: ['OK'],
+ })
+ }
+ >
+ Click Me
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/alert/presenting/controller/vue.md b/static/usage/v7/alert/presenting/controller/vue.md
new file mode 100644
index 00000000000..6ec781a6bf2
--- /dev/null
+++ b/static/usage/v7/alert/presenting/controller/vue.md
@@ -0,0 +1,27 @@
+```html
+
+ Click Me
+
+
+
+```
diff --git a/static/usage/v7/alert/presenting/isOpen/angular/example_component_html.md b/static/usage/v7/alert/presenting/isOpen/angular/example_component_html.md
new file mode 100644
index 00000000000..6e4c36ec85b
--- /dev/null
+++ b/static/usage/v7/alert/presenting/isOpen/angular/example_component_html.md
@@ -0,0 +1,11 @@
+```html
+Click Me
+
+```
\ No newline at end of file
diff --git a/static/usage/v7/alert/presenting/isOpen/angular/example_component_ts.md b/static/usage/v7/alert/presenting/isOpen/angular/example_component_ts.md
new file mode 100644
index 00000000000..789679a2ccc
--- /dev/null
+++ b/static/usage/v7/alert/presenting/isOpen/angular/example_component_ts.md
@@ -0,0 +1,16 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ isAlertOpen = false;
+ public alertButtons = ['OK'];
+
+ setOpen(isOpen: boolean) {
+ this.isAlertOpen = isOpen;
+ }
+}
+```
diff --git a/static/usage/v7/alert/presenting/isOpen/demo.html b/static/usage/v7/alert/presenting/isOpen/demo.html
new file mode 100644
index 00000000000..a995ff78e35
--- /dev/null
+++ b/static/usage/v7/alert/presenting/isOpen/demo.html
@@ -0,0 +1,38 @@
+
+
+
+
+
+
+ Alert
+
+
+
+
+
+
+
+
+
+
+ Click Me
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/alert/presenting/isOpen/index.md b/static/usage/v7/alert/presenting/isOpen/index.md
new file mode 100644
index 00000000000..e00b0e96f07
--- /dev/null
+++ b/static/usage/v7/alert/presenting/isOpen/index.md
@@ -0,0 +1,25 @@
+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_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/v7/alert/presenting/isOpen/javascript.md b/static/usage/v7/alert/presenting/isOpen/javascript.md
new file mode 100644
index 00000000000..f48b512c452
--- /dev/null
+++ b/static/usage/v7/alert/presenting/isOpen/javascript.md
@@ -0,0 +1,17 @@
+```html
+Click Me
+
+
+
+```
diff --git a/static/usage/v7/alert/presenting/isOpen/react.md b/static/usage/v7/alert/presenting/isOpen/react.md
new file mode 100644
index 00000000000..5ce08ffe1d0
--- /dev/null
+++ b/static/usage/v7/alert/presenting/isOpen/react.md
@@ -0,0 +1,23 @@
+```tsx
+import React, { useState } from 'react';
+import { IonAlert, IonButton } from '@ionic/react';
+
+function Example() {
+ const [isOpen, setIsOpen] = useState(false);
+
+ return (
+ <>
+ setIsOpen(true)}>Click Me
+ setIsOpen(false)}
+ >
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/alert/presenting/isOpen/vue.md b/static/usage/v7/alert/presenting/isOpen/vue.md
new file mode 100644
index 00000000000..57b8ccc217a
--- /dev/null
+++ b/static/usage/v7/alert/presenting/isOpen/vue.md
@@ -0,0 +1,32 @@
+```html
+
+ Click Me
+
+
+
+
+```
diff --git a/static/usage/v7/alert/presenting/trigger/angular/example_component_html.md b/static/usage/v7/alert/presenting/trigger/angular/example_component_html.md
new file mode 100644
index 00000000000..4d0cf868890
--- /dev/null
+++ b/static/usage/v7/alert/presenting/trigger/angular/example_component_html.md
@@ -0,0 +1,10 @@
+```html
+Click Me
+
+```
\ No newline at end of file
diff --git a/static/usage/v7/alert/presenting/trigger/angular/example_component_ts.md b/static/usage/v7/alert/presenting/trigger/angular/example_component_ts.md
new file mode 100644
index 00000000000..c63ce5858e4
--- /dev/null
+++ b/static/usage/v7/alert/presenting/trigger/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ public alertButtons = ['OK'];
+}
+```
diff --git a/static/usage/v7/alert/presenting/trigger/demo.html b/static/usage/v7/alert/presenting/trigger/demo.html
new file mode 100644
index 00000000000..a19fd9514f3
--- /dev/null
+++ b/static/usage/v7/alert/presenting/trigger/demo.html
@@ -0,0 +1,35 @@
+
+
+
+
+
+
+ Alert
+
+
+
+
+
+
+
+
+
+
+ Click Me
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/alert/presenting/trigger/index.md b/static/usage/v7/alert/presenting/trigger/index.md
new file mode 100644
index 00000000000..1a45a1c51d4
--- /dev/null
+++ b/static/usage/v7/alert/presenting/trigger/index.md
@@ -0,0 +1,25 @@
+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_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/v7/alert/presenting/trigger/javascript.md b/static/usage/v7/alert/presenting/trigger/javascript.md
new file mode 100644
index 00000000000..82d43db4267
--- /dev/null
+++ b/static/usage/v7/alert/presenting/trigger/javascript.md
@@ -0,0 +1,14 @@
+```html
+Click Me
+
+
+
+```
diff --git a/static/usage/v7/alert/presenting/trigger/react.md b/static/usage/v7/alert/presenting/trigger/react.md
new file mode 100644
index 00000000000..d096665527b
--- /dev/null
+++ b/static/usage/v7/alert/presenting/trigger/react.md
@@ -0,0 +1,20 @@
+```tsx
+import React from 'react';
+import { IonAlert, IonButton } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+ Click Me
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/alert/presenting/trigger/vue.md b/static/usage/v7/alert/presenting/trigger/vue.md
new file mode 100644
index 00000000000..86e93aaac1f
--- /dev/null
+++ b/static/usage/v7/alert/presenting/trigger/vue.md
@@ -0,0 +1,25 @@
+```html
+
+ Click Me
+
+
+
+
+```
diff --git a/static/usage/v7/avatar/basic/angular.md b/static/usage/v7/avatar/basic/angular.md
new file mode 100644
index 00000000000..a74cea822be
--- /dev/null
+++ b/static/usage/v7/avatar/basic/angular.md
@@ -0,0 +1,5 @@
+```html
+
+
+
+```
diff --git a/static/usage/v7/avatar/basic/demo.html b/static/usage/v7/avatar/basic/demo.html
new file mode 100644
index 00000000000..46fbedfd2d3
--- /dev/null
+++ b/static/usage/v7/avatar/basic/demo.html
@@ -0,0 +1,27 @@
+
+
+
+
+
+
+ Avatar
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Chip Avatar
+
+
+
+
+
+
+ Item Avatar
+
+
+
+
+
+
Page One
+ Navigate to the next page to see the back button.
+
+ Navigate
+
+
+ `,
+})
+export class PageOneComponent {
+ component = PageTwoComponent;
+}
+```
diff --git a/static/usage/v7/back-button/basic/angular/page_two_component_ts.md b/static/usage/v7/back-button/basic/angular/page_two_component_ts.md
new file mode 100644
index 00000000000..3c39508e72c
--- /dev/null
+++ b/static/usage/v7/back-button/basic/angular/page_two_component_ts.md
@@ -0,0 +1,24 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-page-two',
+ template: `
+
+
+
+
+
+ Back Button
+
+
+
+ Page Two
+ Use the back button to navigate to the previous page.
+
+ `,
+})
+export class PageTwoComponent {
+
+}
+```
diff --git a/static/usage/v7/back-button/basic/demo.html b/static/usage/v7/back-button/basic/demo.html
new file mode 100644
index 00000000000..d2eb786b4b8
--- /dev/null
+++ b/static/usage/v7/back-button/basic/demo.html
@@ -0,0 +1,64 @@
+
+
+
+
+
+
+ Back Button
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v7/back-button/basic/index.md b/static/usage/v7/back-button/basic/index.md
new file mode 100644
index 00000000000..27c7d6b0c0c
--- /dev/null
+++ b/static/usage/v7/back-button/basic/index.md
@@ -0,0 +1,50 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import angular_app_module_ts from './angular/app_module_ts.md';
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_page_one_component_ts from './angular/page_one_component_ts.md';
+import angular_page_two_component_ts from './angular/page_two_component_ts.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_page_one_tsx from './react/page_one_tsx.md';
+import react_page_two_tsx from './react/page_two_tsx.md';
+
+import vue_example from './vue/example_vue.md';
+import vue_page_one from './vue/page_one_vue.md';
+import vue_page_two from './vue/page_two_vue.md';
+
+
diff --git a/static/usage/v7/back-button/basic/javascript.md b/static/usage/v7/back-button/basic/javascript.md
new file mode 100644
index 00000000000..5a8817ab291
--- /dev/null
+++ b/static/usage/v7/back-button/basic/javascript.md
@@ -0,0 +1,48 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v7/back-button/basic/react/main_tsx.md b/static/usage/v7/back-button/basic/react/main_tsx.md
new file mode 100644
index 00000000000..f6196a362e9
--- /dev/null
+++ b/static/usage/v7/back-button/basic/react/main_tsx.md
@@ -0,0 +1,11 @@
+```tsx
+import React from 'react';
+import { IonNav } from '@ionic/react';
+
+import PageOne from './page-one';
+
+function Example() {
+ return }>;
+}
+export default Example;
+```
diff --git a/static/usage/v7/back-button/basic/react/page_one_tsx.md b/static/usage/v7/back-button/basic/react/page_one_tsx.md
new file mode 100644
index 00000000000..b4e9f017c39
--- /dev/null
+++ b/static/usage/v7/back-button/basic/react/page_one_tsx.md
@@ -0,0 +1,27 @@
+```tsx
+import React from 'react';
+import { IonButton, IonHeader, IonContent, IonNavLink, IonToolbar, IonTitle } from '@ionic/react';
+
+import PageTwo from './page-two';
+
+function PageOne() {
+ return (
+ <>
+
+
+ Back Button
+
+
+
+ Page One
+ Navigate to the next page to see the back button.
+ }>
+ Navigate
+
+
+
+ );
+}
+
+export default PageOne;
+```
diff --git a/static/usage/v7/back-button/basic/react/page_two_tsx.md b/static/usage/v7/back-button/basic/react/page_two_tsx.md
new file mode 100644
index 00000000000..dcfbd7ca20b
--- /dev/null
+++ b/static/usage/v7/back-button/basic/react/page_two_tsx.md
@@ -0,0 +1,25 @@
+```tsx
+import React from 'react';
+import { IonBackButton, IonButtons, IonHeader, IonContent, IonToolbar, IonTitle } from '@ionic/react';
+
+function PageTwo() {
+ return (
+ <>
+
+
+
+
+
+ Back Button
+
+
+
+ Page Two
+ Use the back button to navigate to the previous page.
+
+
+ );
+}
+
+export default PageTwo;
+```
diff --git a/static/usage/v7/back-button/basic/vue/example_vue.md b/static/usage/v7/back-button/basic/vue/example_vue.md
new file mode 100644
index 00000000000..ec054a80749
--- /dev/null
+++ b/static/usage/v7/back-button/basic/vue/example_vue.md
@@ -0,0 +1,19 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v7/back-button/basic/vue/page_one_vue.md b/static/usage/v7/back-button/basic/vue/page_one_vue.md
new file mode 100644
index 00000000000..337a6877548
--- /dev/null
+++ b/static/usage/v7/back-button/basic/vue/page_one_vue.md
@@ -0,0 +1,30 @@
+```html
+
+
+
+ Back Button
+
+
+
+ Page One
+ Navigate to the next page to see the back button.
+
+ Navigate
+
+
+
+
+
+```
diff --git a/static/usage/v7/back-button/basic/vue/page_two_vue.md b/static/usage/v7/back-button/basic/vue/page_two_vue.md
new file mode 100644
index 00000000000..1192ca2936c
--- /dev/null
+++ b/static/usage/v7/back-button/basic/vue/page_two_vue.md
@@ -0,0 +1,24 @@
+```html
+
+
+
+
+
+
+ Back Button
+
+
+
+ Page Two
+ Use the back button to navigate to the previous page.
+
+
+
+
+```
diff --git a/static/usage/v7/back-button/custom/angular/app_module_ts.md b/static/usage/v7/back-button/custom/angular/app_module_ts.md
new file mode 100644
index 00000000000..3c20b511446
--- /dev/null
+++ b/static/usage/v7/back-button/custom/angular/app_module_ts.md
@@ -0,0 +1,20 @@
+```ts
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+
+import { AppComponent } from './app.component';
+import { ExampleComponent } from './example.component';
+
+import { PageOneComponent } from './page-one.component';
+import { PageTwoComponent } from './page-two.component';
+
+@NgModule({
+ imports: [BrowserModule, RouterModule.forRoot([]), IonicModule.forRoot({})],
+ declarations: [AppComponent, ExampleComponent, PageOneComponent, PageTwoComponent],
+ bootstrap: [AppComponent],
+})
+export class AppModule {}
+```
diff --git a/static/usage/v7/back-button/custom/angular/example_component_html.md b/static/usage/v7/back-button/custom/angular/example_component_html.md
new file mode 100644
index 00000000000..1534ea3a6ec
--- /dev/null
+++ b/static/usage/v7/back-button/custom/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v7/back-button/custom/angular/example_component_ts.md b/static/usage/v7/back-button/custom/angular/example_component_ts.md
new file mode 100644
index 00000000000..b123a4858ce
--- /dev/null
+++ b/static/usage/v7/back-button/custom/angular/example_component_ts.md
@@ -0,0 +1,13 @@
+```ts
+import { Component } from '@angular/core';
+
+import { PageOneComponent } from './page-one.component';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ component = PageOneComponent;
+}
+```
diff --git a/static/usage/v7/back-button/custom/angular/page_one_component_ts.md b/static/usage/v7/back-button/custom/angular/page_one_component_ts.md
new file mode 100644
index 00000000000..d181c5a5268
--- /dev/null
+++ b/static/usage/v7/back-button/custom/angular/page_one_component_ts.md
@@ -0,0 +1,26 @@
+```ts
+import { Component } from '@angular/core';
+
+import { PageTwoComponent } from './page-two.component';
+
+@Component({
+ selector: 'app-page-one',
+ template: `
+
+
+ Back Button
+
+
+
+ Page One
+ Navigate to the next page to see the back button.
+
+ Navigate
+
+
+ `,
+})
+export class PageOneComponent {
+ component = PageTwoComponent;
+}
+```
diff --git a/static/usage/v7/back-button/custom/angular/page_two_component_ts.md b/static/usage/v7/back-button/custom/angular/page_two_component_ts.md
new file mode 100644
index 00000000000..31f76ac219a
--- /dev/null
+++ b/static/usage/v7/back-button/custom/angular/page_two_component_ts.md
@@ -0,0 +1,24 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-page-two',
+ template: `
+
+
+
+
+
+ Back Button
+
+
+
+ Page Two
+ Use the back button to navigate to the previous page.
+
+ `,
+})
+export class PageTwoComponent {
+
+}
+```
diff --git a/static/usage/v7/back-button/custom/demo.html b/static/usage/v7/back-button/custom/demo.html
new file mode 100644
index 00000000000..c2c7c6ce8f2
--- /dev/null
+++ b/static/usage/v7/back-button/custom/demo.html
@@ -0,0 +1,64 @@
+
+
+
+
+
+
+ Back Button
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v7/back-button/custom/index.md b/static/usage/v7/back-button/custom/index.md
new file mode 100644
index 00000000000..d90a901513f
--- /dev/null
+++ b/static/usage/v7/back-button/custom/index.md
@@ -0,0 +1,50 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import angular_app_module_ts from './angular/app_module_ts.md';
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_page_one_component_ts from './angular/page_one_component_ts.md';
+import angular_page_two_component_ts from './angular/page_two_component_ts.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_page_one_tsx from './react/page_one_tsx.md';
+import react_page_two_tsx from './react/page_two_tsx.md';
+
+import vue_example from './vue/example_vue.md';
+import vue_page_one from './vue/page_one_vue.md';
+import vue_page_two from './vue/page_two_vue.md';
+
+
diff --git a/static/usage/v7/back-button/custom/javascript.md b/static/usage/v7/back-button/custom/javascript.md
new file mode 100644
index 00000000000..1558cb48ad5
--- /dev/null
+++ b/static/usage/v7/back-button/custom/javascript.md
@@ -0,0 +1,48 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v7/back-button/custom/react/main_tsx.md b/static/usage/v7/back-button/custom/react/main_tsx.md
new file mode 100644
index 00000000000..f6196a362e9
--- /dev/null
+++ b/static/usage/v7/back-button/custom/react/main_tsx.md
@@ -0,0 +1,11 @@
+```tsx
+import React from 'react';
+import { IonNav } from '@ionic/react';
+
+import PageOne from './page-one';
+
+function Example() {
+ return }>;
+}
+export default Example;
+```
diff --git a/static/usage/v7/back-button/custom/react/page_one_tsx.md b/static/usage/v7/back-button/custom/react/page_one_tsx.md
new file mode 100644
index 00000000000..b4e9f017c39
--- /dev/null
+++ b/static/usage/v7/back-button/custom/react/page_one_tsx.md
@@ -0,0 +1,27 @@
+```tsx
+import React from 'react';
+import { IonButton, IonHeader, IonContent, IonNavLink, IonToolbar, IonTitle } from '@ionic/react';
+
+import PageTwo from './page-two';
+
+function PageOne() {
+ return (
+ <>
+
+
+ Back Button
+
+
+
+ Page One
+ Navigate to the next page to see the back button.
+ }>
+ Navigate
+
+
+
+ );
+}
+
+export default PageOne;
+```
diff --git a/static/usage/v7/back-button/custom/react/page_two_tsx.md b/static/usage/v7/back-button/custom/react/page_two_tsx.md
new file mode 100644
index 00000000000..34d30119913
--- /dev/null
+++ b/static/usage/v7/back-button/custom/react/page_two_tsx.md
@@ -0,0 +1,26 @@
+```tsx
+import React from 'react';
+import { IonBackButton, IonButtons, IonHeader, IonContent, IonToolbar, IonTitle } from '@ionic/react';
+import { caretBack } from 'ionicons/icons';
+
+function PageTwo() {
+ return (
+ <>
+
+
+
+
+
+ Back Button
+
+
+
+ Page Two
+ Use the back button to navigate to the previous page.
+
+
+ );
+}
+
+export default PageTwo;
+```
diff --git a/static/usage/v7/back-button/custom/vue/example_vue.md b/static/usage/v7/back-button/custom/vue/example_vue.md
new file mode 100644
index 00000000000..ec054a80749
--- /dev/null
+++ b/static/usage/v7/back-button/custom/vue/example_vue.md
@@ -0,0 +1,19 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v7/back-button/custom/vue/page_one_vue.md b/static/usage/v7/back-button/custom/vue/page_one_vue.md
new file mode 100644
index 00000000000..2702c543f5c
--- /dev/null
+++ b/static/usage/v7/back-button/custom/vue/page_one_vue.md
@@ -0,0 +1,30 @@
+```html
+
+
+
+ Back Button
+
+
+
+ Page One
+ Navigate to the next page to see the back button.
+
+ Navigate
+
+
+
+
+
+```
diff --git a/static/usage/v7/back-button/custom/vue/page_two_vue.md b/static/usage/v7/back-button/custom/vue/page_two_vue.md
new file mode 100644
index 00000000000..05de62654cb
--- /dev/null
+++ b/static/usage/v7/back-button/custom/vue/page_two_vue.md
@@ -0,0 +1,28 @@
+```html
+
+
+
+
+
+
+ Back Button
+
+
+
+ Page Two
+ Use the back button to navigate to the previous page.
+
+
+
+
+```
diff --git a/static/usage/v7/backdrop/basic/angular.md b/static/usage/v7/backdrop/basic/angular.md
new file mode 100644
index 00000000000..c98b5316ebb
--- /dev/null
+++ b/static/usage/v7/backdrop/basic/angular.md
@@ -0,0 +1,17 @@
+```html
+
+
+
+
+ Backdrop
+
+
+
+
+
+ Checkbox
+
+ Button
+
+
+```
diff --git a/static/usage/v7/backdrop/basic/demo.html b/static/usage/v7/backdrop/basic/demo.html
new file mode 100644
index 00000000000..ed5a79768e8
--- /dev/null
+++ b/static/usage/v7/backdrop/basic/demo.html
@@ -0,0 +1,35 @@
+
+
+
+
+
+
+ Backdrop
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Backdrop
+
+
+
+
+
+ Checkbox
+
+ Button
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/backdrop/basic/index.md b/static/usage/v7/backdrop/basic/index.md
new file mode 100644
index 00000000000..adf0b9d8d5e
--- /dev/null
+++ b/static/usage/v7/backdrop/basic/index.md
@@ -0,0 +1,13 @@
+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/backdrop/basic/javascript.md b/static/usage/v7/backdrop/basic/javascript.md
new file mode 100644
index 00000000000..1a9d09c2da3
--- /dev/null
+++ b/static/usage/v7/backdrop/basic/javascript.md
@@ -0,0 +1,17 @@
+```html
+
+
+
+
+ Backdrop
+
+
+
+
+
+ Checkbox
+
+ Button
+
+
+```
diff --git a/static/usage/v7/backdrop/basic/react.md b/static/usage/v7/backdrop/basic/react.md
new file mode 100644
index 00000000000..9d6529c0cac
--- /dev/null
+++ b/static/usage/v7/backdrop/basic/react.md
@@ -0,0 +1,37 @@
+```tsx
+import React from 'react';
+import {
+ IonBackdrop,
+ IonHeader,
+ IonToolbar,
+ IonTitle,
+ IonContent,
+ IonItem,
+ IonCheckbox,
+ IonLabel,
+ IonButton,
+} from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+
+
+ Backdrop
+
+
+
+
+
+ Checkbox
+
+ Button
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/backdrop/basic/vue.md b/static/usage/v7/backdrop/basic/vue.md
new file mode 100644
index 00000000000..a42da95a2e8
--- /dev/null
+++ b/static/usage/v7/backdrop/basic/vue.md
@@ -0,0 +1,37 @@
+```html
+
+
+
+
+
+ Backdrop
+
+
+
+
+
+ Checkbox
+
+ Button
+
+
+
+
+```
diff --git a/static/usage/v7/backdrop/styling/angular/example_component_css.md b/static/usage/v7/backdrop/styling/angular/example_component_css.md
new file mode 100644
index 00000000000..01a079a9d8c
--- /dev/null
+++ b/static/usage/v7/backdrop/styling/angular/example_component_css.md
@@ -0,0 +1,21 @@
+```css
+ion-backdrop {
+ opacity: 0.9;
+ background: var(--ion-color-primary);
+}
+
+#box {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translateY(-50%) translateX(-50%);
+ z-index: 100;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: var(--ion-background-color, #fff);
+ width: 90%;
+ height: 100px;
+ border-radius: 10px;
+}
+```
diff --git a/static/usage/v7/backdrop/styling/angular/example_component_html.md b/static/usage/v7/backdrop/styling/angular/example_component_html.md
new file mode 100644
index 00000000000..3c951690078
--- /dev/null
+++ b/static/usage/v7/backdrop/styling/angular/example_component_html.md
@@ -0,0 +1,21 @@
+```html
+
+
+
+
+ Backdrop
+
+
+
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse, cum aspernatur cupiditate nesciunt totam
+ perspiciatis delectus soluta laboriosam, ullam impedit porro eaque laborum optio natus sed nostrum, provident
+ expedita vero!
+
+
+
+
+ Clickable
+
+```
diff --git a/static/usage/v7/backdrop/styling/demo.html b/static/usage/v7/backdrop/styling/demo.html
new file mode 100644
index 00000000000..8b28987c937
--- /dev/null
+++ b/static/usage/v7/backdrop/styling/demo.html
@@ -0,0 +1,57 @@
+
+
+
+
+
+
+ Backdrop
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Backdrop
+
+
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse, cum aspernatur cupiditate nesciunt totam
+ perspiciatis delectus soluta laboriosam, ullam impedit porro eaque laborum optio natus sed nostrum, provident
+ expedita vero!
+
+
+
+ Clickable
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/backdrop/styling/index.md b/static/usage/v7/backdrop/styling/index.md
new file mode 100644
index 00000000000..a7861a18ed7
--- /dev/null
+++ b/static/usage/v7/backdrop/styling/index.md
@@ -0,0 +1,33 @@
+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_css from './angular/example_component_css.md';
+import angular_example_component_html from './angular/example_component_html.md';
+
+
diff --git a/static/usage/v7/backdrop/styling/javascript.md b/static/usage/v7/backdrop/styling/javascript.md
new file mode 100644
index 00000000000..6c30f0c5c90
--- /dev/null
+++ b/static/usage/v7/backdrop/styling/javascript.md
@@ -0,0 +1,43 @@
+```html
+
+
+
+
+
+
+ Backdrop
+
+
+
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse, cum aspernatur cupiditate nesciunt totam
+ perspiciatis delectus soluta laboriosam, ullam impedit porro eaque laborum optio natus sed nostrum, provident
+ expedita vero!
+
+
+
+
+ Clickable
+
+```
diff --git a/static/usage/v7/backdrop/styling/react/main_css.md b/static/usage/v7/backdrop/styling/react/main_css.md
new file mode 100644
index 00000000000..01a079a9d8c
--- /dev/null
+++ b/static/usage/v7/backdrop/styling/react/main_css.md
@@ -0,0 +1,21 @@
+```css
+ion-backdrop {
+ opacity: 0.9;
+ background: var(--ion-color-primary);
+}
+
+#box {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translateY(-50%) translateX(-50%);
+ z-index: 100;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: var(--ion-background-color, #fff);
+ width: 90%;
+ height: 100px;
+ border-radius: 10px;
+}
+```
diff --git a/static/usage/v7/backdrop/styling/react/main_tsx.md b/static/usage/v7/backdrop/styling/react/main_tsx.md
new file mode 100644
index 00000000000..978b47ce750
--- /dev/null
+++ b/static/usage/v7/backdrop/styling/react/main_tsx.md
@@ -0,0 +1,35 @@
+```tsx
+import React from 'react';
+import { IonBackdrop, IonHeader, IonToolbar, IonTitle, IonContent, IonCheckbox, IonButton } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+
+
+
+
+ Backdrop
+
+
+
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse, cum aspernatur cupiditate nesciunt totam
+ perspiciatis delectus soluta laboriosam, ullam impedit porro eaque laborum optio natus sed nostrum,
+ provident expedita vero!
+
+
+
+
+
+ Clickable
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/backdrop/styling/vue.md b/static/usage/v7/backdrop/styling/vue.md
new file mode 100644
index 00000000000..7e884eb2fb4
--- /dev/null
+++ b/static/usage/v7/backdrop/styling/vue.md
@@ -0,0 +1,53 @@
+```html
+
+
+
+
+
+
+
+ Backdrop
+
+
+
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse, cum aspernatur cupiditate nesciunt totam
+ perspiciatis delectus soluta laboriosam, ullam impedit porro eaque laborum optio natus sed nostrum, provident
+ expedita vero!
+
+
+
+
+ Clickable
+
+
+
+```
diff --git a/static/usage/v7/badge/basic/angular.md b/static/usage/v7/badge/basic/angular.md
new file mode 100644
index 00000000000..9f8de1ff7eb
--- /dev/null
+++ b/static/usage/v7/badge/basic/angular.md
@@ -0,0 +1,12 @@
+```html
+
+
+ 11
+ Badge in start slot
+
+
+ 22
+ Badge in end slot
+
+
+```
diff --git a/static/usage/v7/badge/basic/demo.html b/static/usage/v7/badge/basic/demo.html
new file mode 100644
index 00000000000..a560f74b87b
--- /dev/null
+++ b/static/usage/v7/badge/basic/demo.html
@@ -0,0 +1,39 @@
+
+
+
+
+
+
+ Badge
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 11
+ Badge in start slot
+
+
+ 22
+ Badge in end slot
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/badge/basic/index.md b/static/usage/v7/badge/basic/index.md
new file mode 100644
index 00000000000..843c4a046cf
--- /dev/null
+++ b/static/usage/v7/badge/basic/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/badge/basic/javascript.md b/static/usage/v7/badge/basic/javascript.md
new file mode 100644
index 00000000000..9f8de1ff7eb
--- /dev/null
+++ b/static/usage/v7/badge/basic/javascript.md
@@ -0,0 +1,12 @@
+```html
+
+
+ 11
+ Badge in start slot
+
+
+ 22
+ Badge in end slot
+
+
+```
diff --git a/static/usage/v7/badge/basic/react.md b/static/usage/v7/badge/basic/react.md
new file mode 100644
index 00000000000..4d569dbbd02
--- /dev/null
+++ b/static/usage/v7/badge/basic/react.md
@@ -0,0 +1,19 @@
+```tsx
+import React from 'react';
+import { IonBadge, IonItem, IonLabel, IonList } from '@ionic/react';
+function Example() {
+ return (
+
+
+ 11
+ Badge in start slot
+
+
+ 22
+ Badge in end slot
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/badge/basic/vue.md b/static/usage/v7/badge/basic/vue.md
new file mode 100644
index 00000000000..e02b9c552e3
--- /dev/null
+++ b/static/usage/v7/badge/basic/vue.md
@@ -0,0 +1,23 @@
+```html
+
+
+
+ 11
+ Badge in start slot
+
+
+ 22
+ Badge in end slot
+
+
+
+
+
+```
diff --git a/static/usage/v7/badge/theming/colors/angular.md b/static/usage/v7/badge/theming/colors/angular.md
new file mode 100644
index 00000000000..bad750b1bfc
--- /dev/null
+++ b/static/usage/v7/badge/theming/colors/angular.md
@@ -0,0 +1,28 @@
+```html
+
+
+ Followers
+ 22k
+
+
+ Likes
+ 118k
+
+
+ Stars
+ 34k
+
+
+ Completed
+ 80
+
+
+ Warnings
+ 70
+
+
+ Notifications
+ 1000
+
+
+```
diff --git a/static/usage/v7/badge/theming/colors/demo.html b/static/usage/v7/badge/theming/colors/demo.html
new file mode 100644
index 00000000000..a81103de32b
--- /dev/null
+++ b/static/usage/v7/badge/theming/colors/demo.html
@@ -0,0 +1,55 @@
+
+
+
+
+
+
+ Badge
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Followers
+ 22k
+
+
+ Likes
+ 118k
+
+
+ Stars
+ 34k
+
+
+ Completed
+ 80
+
+
+ Warnings
+ 70
+
+
+ Notifications
+ 1000
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/badge/theming/colors/index.md b/static/usage/v7/badge/theming/colors/index.md
new file mode 100644
index 00000000000..1b640d0675b
--- /dev/null
+++ b/static/usage/v7/badge/theming/colors/index.md
@@ -0,0 +1,13 @@
+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/badge/theming/colors/javascript.md b/static/usage/v7/badge/theming/colors/javascript.md
new file mode 100644
index 00000000000..bad750b1bfc
--- /dev/null
+++ b/static/usage/v7/badge/theming/colors/javascript.md
@@ -0,0 +1,28 @@
+```html
+
+
+ Followers
+ 22k
+
+
+ Likes
+ 118k
+
+
+ Stars
+ 34k
+
+
+ Completed
+ 80
+
+
+ Warnings
+ 70
+
+
+ Notifications
+ 1000
+
+
+```
diff --git a/static/usage/v7/badge/theming/colors/react.md b/static/usage/v7/badge/theming/colors/react.md
new file mode 100644
index 00000000000..ad53c54274a
--- /dev/null
+++ b/static/usage/v7/badge/theming/colors/react.md
@@ -0,0 +1,35 @@
+```tsx
+import React from 'react';
+import { IonBadge, IonItem, IonLabel, IonList } from '@ionic/react';
+function Example() {
+ return (
+
+
+ Followers
+ 22k
+
+
+ Likes
+ 118k
+
+
+ Stars
+ 34k
+
+
+ Completed
+ 80
+
+
+ Warnings
+ 70
+
+
+ Notifications
+ 1000
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/badge/theming/colors/vue.md b/static/usage/v7/badge/theming/colors/vue.md
new file mode 100644
index 00000000000..77e5c1a9e97
--- /dev/null
+++ b/static/usage/v7/badge/theming/colors/vue.md
@@ -0,0 +1,39 @@
+```html
+
+
+
+ Followers
+ 22k
+
+
+ Likes
+ 118k
+
+
+ Stars
+ 34k
+
+
+ Completed
+ 80
+
+
+ Warnings
+ 70
+
+
+ Notifications
+ 1000
+
+
+
+
+
+```
diff --git a/static/usage/v7/badge/theming/css-properties/angular/example_component_css.md b/static/usage/v7/badge/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..950e96b4e80
--- /dev/null
+++ b/static/usage/v7/badge/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,8 @@
+```css
+ion-badge {
+ --background: purple;
+ --color: white;
+ --padding-end: 20px;
+ --padding-start: 20px;
+}
+```
\ No newline at end of file
diff --git a/static/usage/v7/badge/theming/css-properties/angular/example_component_html.md b/static/usage/v7/badge/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..92df32f60de
--- /dev/null
+++ b/static/usage/v7/badge/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,8 @@
+```html
+
+
+ Badges styled
+ 1
+
+
+```
diff --git a/static/usage/v7/badge/theming/css-properties/demo.html b/static/usage/v7/badge/theming/css-properties/demo.html
new file mode 100644
index 00000000000..f942c2d83e6
--- /dev/null
+++ b/static/usage/v7/badge/theming/css-properties/demo.html
@@ -0,0 +1,42 @@
+
+
+
+
+
+
+ Select - Styling the Select
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Badges styled
+ 1
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/badge/theming/css-properties/index.md b/static/usage/v7/badge/theming/css-properties/index.md
new file mode 100644
index 00000000000..3fdf7e333a1
--- /dev/null
+++ b/static/usage/v7/badge/theming/css-properties/index.md
@@ -0,0 +1,32 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.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/badge/theming/css-properties/javascript.md b/static/usage/v7/badge/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..6dedc97ba4d
--- /dev/null
+++ b/static/usage/v7/badge/theming/css-properties/javascript.md
@@ -0,0 +1,17 @@
+```html
+
+
+ Badges styled
+ 1
+
+
+
+
+```
diff --git a/static/usage/v7/badge/theming/css-properties/react/main_css.md b/static/usage/v7/badge/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..950e96b4e80
--- /dev/null
+++ b/static/usage/v7/badge/theming/css-properties/react/main_css.md
@@ -0,0 +1,8 @@
+```css
+ion-badge {
+ --background: purple;
+ --color: white;
+ --padding-end: 20px;
+ --padding-start: 20px;
+}
+```
\ No newline at end of file
diff --git a/static/usage/v7/badge/theming/css-properties/react/main_tsx.md b/static/usage/v7/badge/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..fea8b34191e
--- /dev/null
+++ b/static/usage/v7/badge/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,18 @@
+```tsx
+import React from 'react';
+import { IonBadge, IonItem, IonLabel, IonList } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+
+
+ Badges styled
+ 1
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/badge/theming/css-properties/vue.md b/static/usage/v7/badge/theming/css-properties/vue.md
new file mode 100644
index 00000000000..08a5d88d81e
--- /dev/null
+++ b/static/usage/v7/badge/theming/css-properties/vue.md
@@ -0,0 +1,28 @@
+```html
+
+
+
+ Badges styled
+ 1
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/breadcrumbs/basic/angular.md b/static/usage/v7/breadcrumbs/basic/angular.md
new file mode 100644
index 00000000000..9683fbe6792
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/basic/angular.md
@@ -0,0 +1,8 @@
+```html
+
+ Home
+ Electronics
+ Cameras
+ Film
+
+```
diff --git a/static/usage/v7/breadcrumbs/basic/demo.html b/static/usage/v7/breadcrumbs/basic/demo.html
new file mode 100644
index 00000000000..f230752bad0
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/basic/demo.html
@@ -0,0 +1,29 @@
+
+
+
+
+
+
+ Breadcrumbs
+
+
+
+
+
+
+
+
+
+
+
+ Home
+ Electronics
+ Cameras
+ Film
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/breadcrumbs/basic/index.md b/static/usage/v7/breadcrumbs/basic/index.md
new file mode 100644
index 00000000000..0159e5aa44f
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/basic/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/breadcrumbs/basic/javascript.md b/static/usage/v7/breadcrumbs/basic/javascript.md
new file mode 100644
index 00000000000..9683fbe6792
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/basic/javascript.md
@@ -0,0 +1,8 @@
+```html
+
+ Home
+ Electronics
+ Cameras
+ Film
+
+```
diff --git a/static/usage/v7/breadcrumbs/basic/react.md b/static/usage/v7/breadcrumbs/basic/react.md
new file mode 100644
index 00000000000..602a5174490
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/basic/react.md
@@ -0,0 +1,15 @@
+```tsx
+import React from 'react';
+import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/react';
+function Example() {
+ return (
+
+ Home
+ Electronics
+ Cameras
+ Film
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/breadcrumbs/basic/vue.md b/static/usage/v7/breadcrumbs/basic/vue.md
new file mode 100644
index 00000000000..f665b4cb686
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/basic/vue.md
@@ -0,0 +1,19 @@
+```html
+
+
+ Home
+ Electronics
+ Cameras
+ Film
+
+
+
+
+```
diff --git a/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_html.md b/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_html.md
new file mode 100644
index 00000000000..76a545d6a8e
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_html.md
@@ -0,0 +1,10 @@
+```html
+
+ Home
+ Electronics
+ Photography
+ Cameras
+ Film
+ 35 mm
+
+```
\ No newline at end of file
diff --git a/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_ts.md b/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_ts.md
new file mode 100644
index 00000000000..8ae69af72a5
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_ts.md
@@ -0,0 +1,15 @@
+```ts
+import { Component, ViewChild } from '@angular/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ maxBreadcrumbs = 4;
+
+ expandBreadcrumbs() {
+ this.maxBreadcrumbs = undefined;
+ }
+}
+```
diff --git a/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/demo.html b/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/demo.html
new file mode 100644
index 00000000000..a6977cb29bf
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/demo.html
@@ -0,0 +1,39 @@
+
+
+
+
+
+
+ Popover
+
+
+
+
+
+
+
+
+
+
+
+ Home
+ Electronics
+ Photography
+ Cameras
+ Film
+ 35 mm
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/index.md b/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/index.md
new file mode 100644
index 00000000000..c6f75cb1155
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/index.md
@@ -0,0 +1,24 @@
+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_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/javascript.md b/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/javascript.md
new file mode 100644
index 00000000000..6e720c27d3c
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/javascript.md
@@ -0,0 +1,18 @@
+```html
+
+ Home
+ Electronics
+ Photography
+ Cameras
+ Film
+ 35 mm
+
+
+
+```
diff --git a/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/react.md b/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/react.md
new file mode 100644
index 00000000000..b4933d4cf8f
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/react.md
@@ -0,0 +1,20 @@
+```tsx
+import React, { useState } from 'react';
+import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/react';
+
+function Example() {
+ const [maxBreadcrumbs, setMaxBreadcrumbs] = useState(4);
+
+ return (
+ setMaxBreadcrumbs(undefined)}>
+ Home
+ Electronics
+ Photography
+ Cameras
+ Film
+ 35 mm
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/vue.md b/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/vue.md
new file mode 100644
index 00000000000..f88b8a6e322
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/vue.md
@@ -0,0 +1,31 @@
+```html
+
+
+ Home
+ Electronics
+ Photography
+ Cameras
+ Film
+ 35 mm
+
+
+
+
+```
diff --git a/static/usage/v7/breadcrumbs/collapsing-items/items-before-after/angular.md b/static/usage/v7/breadcrumbs/collapsing-items/items-before-after/angular.md
new file mode 100644
index 00000000000..d7571e2ebce
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/collapsing-items/items-before-after/angular.md
@@ -0,0 +1,41 @@
+```html
+Before Collapse = 2
+
+ Home
+ Electronics
+ Photography
+ Cameras
+ Film
+ 35 mm
+
+
+Before Collapse = 0
+
+ Home
+ Electronics
+ Photography
+ Cameras
+ Film
+ 35 mm
+
+
+After Collapse = 2
+
+ Home
+ Electronics
+ Photography
+ Cameras
+ Film
+ 35 mm
+
+
+Before Collapse = 2, After Collapse = 2
+
+ Home
+ Electronics
+ Photography
+ Cameras
+ Film
+ 35 mm
+
+```
diff --git a/static/usage/v7/breadcrumbs/collapsing-items/items-before-after/demo.html b/static/usage/v7/breadcrumbs/collapsing-items/items-before-after/demo.html
new file mode 100644
index 00000000000..96d8ae72cd0
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/collapsing-items/items-before-after/demo.html
@@ -0,0 +1,68 @@
+
+
+
+
+
+
+ Breadcrumbs
+
+
+
+
+
+
+
+
+
+
+
+
+
Before Collapse = 2
+
+ Home
+ Electronics
+ Photography
+ Cameras
+ Film
+ 35 mm
+
+
+
Before Collapse = 0
+
+ Home
+ Electronics
+ Photography
+ Cameras
+ Film
+ 35 mm
+
+
+
After Collapse = 2
+
+ Home
+ Electronics
+ Photography
+ Cameras
+ Film
+ 35 mm
+
+
+
Before Collapse = 2, After Collapse = 2
+
+ Home
+ Electronics
+ Photography
+ Cameras
+ Film
+ 35 mm
+
+
Before Collapse = 2
+
+ Home
+ Electronics
+ Photography
+ Cameras
+ Film
+ 35 mm
+
+
+Before Collapse = 0
+
+ Home
+ Electronics
+ Photography
+ Cameras
+ Film
+ 35 mm
+
+
+After Collapse = 2
+
+ Home
+ Electronics
+ Photography
+ Cameras
+ Film
+ 35 mm
+
+
+Before Collapse = 2, After Collapse = 2
+
+ Home
+ Electronics
+ Photography
+ Cameras
+ Film
+ 35 mm
+
+```
diff --git a/static/usage/v7/breadcrumbs/collapsing-items/items-before-after/react.md b/static/usage/v7/breadcrumbs/collapsing-items/items-before-after/react.md
new file mode 100644
index 00000000000..e54c8676f4e
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/collapsing-items/items-before-after/react.md
@@ -0,0 +1,50 @@
+```tsx
+import React from 'react';
+import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/react';
+function Example() {
+ return (
+ <>
+ Before Collapse = 2
+
+ Home
+ Electronics
+ Photography
+ Cameras
+ Film
+ 35 mm
+
+
+ Before Collapse = 0
+
+ Home
+ Electronics
+ Photography
+ Cameras
+ Film
+ 35 mm
+
+
+ After Collapse = 2
+
+ Home
+ Electronics
+ Photography
+ Cameras
+ Film
+ 35 mm
+
+
+ Before Collapse = 2, After Collapse = 2
+
+ Home
+ Electronics
+ Photography
+ Cameras
+ Film
+ 35 mm
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/breadcrumbs/collapsing-items/items-before-after/vue.md b/static/usage/v7/breadcrumbs/collapsing-items/items-before-after/vue.md
new file mode 100644
index 00000000000..61dbebde1d7
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/collapsing-items/items-before-after/vue.md
@@ -0,0 +1,52 @@
+```html
+
+ Before Collapse = 2
+
+ Home
+ Electronics
+ Photography
+ Cameras
+ Film
+ 35 mm
+
+
+ Before Collapse = 0
+
+ Home
+ Electronics
+ Photography
+ Cameras
+ Film
+ 35 mm
+
+
+ After Collapse = 2
+
+ Home
+ Electronics
+ Photography
+ Cameras
+ Film
+ 35 mm
+
+
+ Before Collapse = 2, After Collapse = 2
+
+ Home
+ Electronics
+ Photography
+ Cameras
+ Film
+ 35 mm
+
+
+
+
+```
diff --git a/static/usage/v7/breadcrumbs/collapsing-items/max-items/angular.md b/static/usage/v7/breadcrumbs/collapsing-items/max-items/angular.md
new file mode 100644
index 00000000000..e77f5ec2d16
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/collapsing-items/max-items/angular.md
@@ -0,0 +1,10 @@
+```html
+
+ Home
+ Electronics
+ Photography
+ Cameras
+ Film
+ 35 mm
+
+```
diff --git a/static/usage/v7/breadcrumbs/collapsing-items/max-items/demo.html b/static/usage/v7/breadcrumbs/collapsing-items/max-items/demo.html
new file mode 100644
index 00000000000..6b2ac36c51c
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/collapsing-items/max-items/demo.html
@@ -0,0 +1,31 @@
+
+
+
+
+
+
+ Breadcrumbs
+
+
+
+
+
+
+
+
+
+
+
+ Home
+ Electronics
+ Photography
+ Cameras
+ Film
+ 35 mm
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/breadcrumbs/collapsing-items/max-items/index.md b/static/usage/v7/breadcrumbs/collapsing-items/max-items/index.md
new file mode 100644
index 00000000000..48e8a4ed82f
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/collapsing-items/max-items/index.md
@@ -0,0 +1,12 @@
+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/breadcrumbs/collapsing-items/max-items/javascript.md b/static/usage/v7/breadcrumbs/collapsing-items/max-items/javascript.md
new file mode 100644
index 00000000000..a5529d20b23
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/collapsing-items/max-items/javascript.md
@@ -0,0 +1,10 @@
+```html
+
+ Home
+ Electronics
+ Photography
+ Cameras
+ Film
+ 35 mm
+
+```
diff --git a/static/usage/v7/breadcrumbs/collapsing-items/max-items/react.md b/static/usage/v7/breadcrumbs/collapsing-items/max-items/react.md
new file mode 100644
index 00000000000..c92c6a41ffe
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/collapsing-items/max-items/react.md
@@ -0,0 +1,17 @@
+```tsx
+import React from 'react';
+import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/react';
+function Example() {
+ return (
+
+ Home
+ Electronics
+ Photography
+ Cameras
+ Film
+ 35 mm
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/breadcrumbs/collapsing-items/max-items/vue.md b/static/usage/v7/breadcrumbs/collapsing-items/max-items/vue.md
new file mode 100644
index 00000000000..a9804c52f33
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/collapsing-items/max-items/vue.md
@@ -0,0 +1,21 @@
+```html
+
+
+ Home
+ Electronics
+ Photography
+ Cameras
+ Film
+ 35 mm
+
+
+
+
+```
diff --git a/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_html.md b/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_html.md
new file mode 100644
index 00000000000..2c5ee51a9b7
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_html.md
@@ -0,0 +1,25 @@
+```html
+
+ Home
+ Electronics
+ Photography
+ Cameras
+ Film
+ 35 mm
+
+
+
+
+
+
+ {{ breadcrumb.textContent }}
+
+
+
+
+
+```
\ No newline at end of file
diff --git a/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_ts.md b/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_ts.md
new file mode 100644
index 00000000000..aabfb29a821
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_ts.md
@@ -0,0 +1,20 @@
+```ts
+import { Component, ViewChild } from '@angular/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ @ViewChild('popover') popover;
+
+ isOpen = false;
+ collapsedBreadcrumbs: HTMLIonBreadcrumbElement[] = [];
+
+ async presentPopover(e: Event) {
+ this.collapsedBreadcrumbs = (e as CustomEvent).detail.collapsedBreadcrumbs;
+ this.popover.event = e;
+ this.isOpen = true;
+ }
+}
+```
diff --git a/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/demo.html b/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/demo.html
new file mode 100644
index 00000000000..fdeba83b336
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/demo.html
@@ -0,0 +1,62 @@
+
+
+
+
+
+
+ Popover
+
+
+
+
+
+
+
+
+
+
+
+ Home
+ Electronics
+ Photography
+ Cameras
+ Film
+ 35 mm
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/index.md b/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/index.md
new file mode 100644
index 00000000000..2e2ca803c4a
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/index.md
@@ -0,0 +1,25 @@
+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_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/javascript.md b/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/javascript.md
new file mode 100644
index 00000000000..007fb9a4a1e
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/javascript.md
@@ -0,0 +1,41 @@
+```html
+
+ Home
+ Electronics
+ Photography
+ Cameras
+ Film
+ 35 mm
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/react.md b/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/react.md
new file mode 100644
index 00000000000..72cc6520e3c
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/react.md
@@ -0,0 +1,44 @@
+```tsx
+import React, { useRef, useState } from 'react';
+import { IonBreadcrumb, IonBreadcrumbs, IonContent, IonItem, IonLabel, IonList, IonPopover } from '@ionic/react';
+
+function Example() {
+ const popover = useRef(null);
+ const [collapsedBreadcrumbs, setCollapsedBreadcrumbs] = useState([]);
+ const [popoverOpen, setPopoverOpen] = useState(false);
+
+ const openPopover = (e: Event) => {
+ setCollapsedBreadcrumbs((e as CustomEvent).detail.collapsedBreadcrumbs);
+ popover.current!.event = e;
+ setPopoverOpen(true);
+ };
+
+ return (
+ <>
+
+ Home
+ Electronics
+ Photography
+ Cameras
+ Film
+ 35 mm
+
+ setPopoverOpen(false)}>
+
+
+ {collapsedBreadcrumbs.map((breadcrumb, i) => (
+
+ {breadcrumb.textContent}
+
+ ))}
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/vue.md b/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/vue.md
new file mode 100644
index 00000000000..318f64f8547
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/vue.md
@@ -0,0 +1,48 @@
+```html
+
+
+ Home
+ Electronics
+ Photography
+ Cameras
+ Film
+ 35 mm
+
+
+
+
+
+ {{ breadcrumb.textContent }}
+
+
+
+
+
+
+
+```
\ No newline at end of file
diff --git a/static/usage/v7/breadcrumbs/icons/custom-separators/angular.md b/static/usage/v7/breadcrumbs/icons/custom-separators/angular.md
new file mode 100644
index 00000000000..e6f7fee4653
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/icons/custom-separators/angular.md
@@ -0,0 +1,20 @@
+```html
+
+
+ Home
+
+
+
+ Electronics
+
+
+
+ Cameras
+
+
+
+ Film
+
+
+
+```
diff --git a/static/usage/v7/breadcrumbs/icons/custom-separators/demo.html b/static/usage/v7/breadcrumbs/icons/custom-separators/demo.html
new file mode 100644
index 00000000000..a6db3ad12c6
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/icons/custom-separators/demo.html
@@ -0,0 +1,41 @@
+
+
+
+
+
+
+ Breadcrumbs
+
+
+
+
+
+
+
+
+
+
+
+
+ Home
+
+
+
+ Electronics
+
+
+
+ Cameras
+
+
+
+ Film
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/breadcrumbs/icons/custom-separators/index.md b/static/usage/v7/breadcrumbs/icons/custom-separators/index.md
new file mode 100644
index 00000000000..4b42e7b7e40
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/icons/custom-separators/index.md
@@ -0,0 +1,12 @@
+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/breadcrumbs/icons/custom-separators/javascript.md b/static/usage/v7/breadcrumbs/icons/custom-separators/javascript.md
new file mode 100644
index 00000000000..e6f7fee4653
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/icons/custom-separators/javascript.md
@@ -0,0 +1,20 @@
+```html
+
+
+ Home
+
+
+
+ Electronics
+
+
+
+ Cameras
+
+
+
+ Film
+
+
+
+```
diff --git a/static/usage/v7/breadcrumbs/icons/custom-separators/react.md b/static/usage/v7/breadcrumbs/icons/custom-separators/react.md
new file mode 100644
index 00000000000..de824d91cf5
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/icons/custom-separators/react.md
@@ -0,0 +1,29 @@
+```tsx
+import React from 'react';
+import { IonBreadcrumb, IonBreadcrumbs, IonIcon } from '@ionic/react';
+import { arrowForwardCircle } from 'ionicons/icons';
+
+function Example() {
+ return (
+
+
+ Home
+
+
+
+ Electronics
+
+
+
+ Cameras
+
+
+
+ Film
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/breadcrumbs/icons/custom-separators/vue.md b/static/usage/v7/breadcrumbs/icons/custom-separators/vue.md
new file mode 100644
index 00000000000..f836a85455f
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/icons/custom-separators/vue.md
@@ -0,0 +1,35 @@
+```html
+
+
+
+ Home
+
+
+
+ Electronics
+
+
+
+ Cameras
+
+
+
+ Film
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/breadcrumbs/icons/icons-on-items/angular.md b/static/usage/v7/breadcrumbs/icons/icons-on-items/angular.md
new file mode 100644
index 00000000000..a31d718242d
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/icons/icons-on-items/angular.md
@@ -0,0 +1,41 @@
+```html
+Icons at Start
+
+
+
+ Home
+
+
+
+ Electronics
+
+
+
+ Cameras
+
+
+
+ Film
+
+
+
+Icons at End
+
+
+ Home
+
+
+
+ Electronics
+
+
+
+ Cameras
+
+
+
+ Film
+
+
+
+```
diff --git a/static/usage/v7/breadcrumbs/icons/icons-on-items/demo.html b/static/usage/v7/breadcrumbs/icons/icons-on-items/demo.html
new file mode 100644
index 00000000000..1a1a9adbe3f
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/icons/icons-on-items/demo.html
@@ -0,0 +1,68 @@
+
+
+
+
+
+
+ Breadcrumbs
+
+
+
+
+
+
+
+
+
+
+
+
+ Icons at Start
+
+
+
+ Home
+
+
+
+ Electronics
+
+
+
+ Cameras
+
+
+
+ Film
+
+
+
+ Icons at End
+
+
+ Home
+
+
+
+ Electronics
+
+
+
+ Cameras
+
+
+
+ Film
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/breadcrumbs/icons/icons-on-items/index.md b/static/usage/v7/breadcrumbs/icons/icons-on-items/index.md
new file mode 100644
index 00000000000..387f0c12e55
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/icons/icons-on-items/index.md
@@ -0,0 +1,13 @@
+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/breadcrumbs/icons/icons-on-items/javascript.md b/static/usage/v7/breadcrumbs/icons/icons-on-items/javascript.md
new file mode 100644
index 00000000000..a31d718242d
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/icons/icons-on-items/javascript.md
@@ -0,0 +1,41 @@
+```html
+Icons at Start
+
+
+
+ Home
+
+
+
+ Electronics
+
+
+
+ Cameras
+
+
+
+ Film
+
+
+
+Icons at End
+
+
+ Home
+
+
+
+ Electronics
+
+
+
+ Cameras
+
+
+
+ Film
+
+
+
+```
diff --git a/static/usage/v7/breadcrumbs/icons/icons-on-items/react.md b/static/usage/v7/breadcrumbs/icons/icons-on-items/react.md
new file mode 100644
index 00000000000..e042ff5aa05
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/icons/icons-on-items/react.md
@@ -0,0 +1,52 @@
+```tsx
+import React from 'react';
+import { IonBreadcrumb, IonBreadcrumbs, IonIcon, IonLabel } from '@ionic/react';
+import { camera, film, flash, home } from 'ionicons/icons';
+
+function Example() {
+ return (
+ <>
+ Icons at Start
+
+
+
+ Home
+
+
+
+ Electronics
+
+
+
+ Cameras
+
+
+
+ Film
+
+
+
+ Icons at End
+
+
+ Home
+
+
+
+ Electronics
+
+
+
+ Cameras
+
+
+
+ Film
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/breadcrumbs/icons/icons-on-items/vue.md b/static/usage/v7/breadcrumbs/icons/icons-on-items/vue.md
new file mode 100644
index 00000000000..2e1634143f6
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/icons/icons-on-items/vue.md
@@ -0,0 +1,56 @@
+```html
+
+ Icons at Start
+
+
+
+ Home
+
+
+
+ Electronics
+
+
+
+ Cameras
+
+
+
+ Film
+
+
+
+ Icons at End
+
+
+ Home
+
+
+
+ Electronics
+
+
+
+ Cameras
+
+
+
+ Film
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/breadcrumbs/theming/colors/angular.md b/static/usage/v7/breadcrumbs/theming/colors/angular.md
new file mode 100644
index 00000000000..610c4af5c89
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/theming/colors/angular.md
@@ -0,0 +1,8 @@
+```html
+
+ Home
+ Electronics
+ Cameras
+ Film
+
+```
diff --git a/static/usage/v7/breadcrumbs/theming/colors/demo.html b/static/usage/v7/breadcrumbs/theming/colors/demo.html
new file mode 100644
index 00000000000..3746b4ad79d
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/theming/colors/demo.html
@@ -0,0 +1,29 @@
+
+
+
+
+
+
+ Breadcrumbs
+
+
+
+
+
+
+
+
+
+
+
+ Home
+ Electronics
+ Cameras
+ Film
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/breadcrumbs/theming/colors/index.md b/static/usage/v7/breadcrumbs/theming/colors/index.md
new file mode 100644
index 00000000000..c100fffe65d
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/theming/colors/index.md
@@ -0,0 +1,12 @@
+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/breadcrumbs/theming/colors/javascript.md b/static/usage/v7/breadcrumbs/theming/colors/javascript.md
new file mode 100644
index 00000000000..610c4af5c89
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/theming/colors/javascript.md
@@ -0,0 +1,8 @@
+```html
+
+ Home
+ Electronics
+ Cameras
+ Film
+
+```
diff --git a/static/usage/v7/breadcrumbs/theming/colors/react.md b/static/usage/v7/breadcrumbs/theming/colors/react.md
new file mode 100644
index 00000000000..22cae85dd8f
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/theming/colors/react.md
@@ -0,0 +1,15 @@
+```tsx
+import React from 'react';
+import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/react';
+function Example() {
+ return (
+
+ Home
+ Electronics
+ Cameras
+ Film
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/breadcrumbs/theming/colors/vue.md b/static/usage/v7/breadcrumbs/theming/colors/vue.md
new file mode 100644
index 00000000000..5d29a975608
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/theming/colors/vue.md
@@ -0,0 +1,19 @@
+```html
+
+
+ Home
+ Electronics
+ Cameras
+ Film
+
+
+
+
+```
diff --git a/static/usage/v7/breadcrumbs/theming/css-properties/angular/example_component_css.md b/static/usage/v7/breadcrumbs/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..338babc9c79
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,7 @@
+```css
+ion-breadcrumb {
+ --color: rgb(81, 155, 198);
+ --color-active: rgb(150, 112, 220);
+ --color-hover: rgb(103, 61, 180);
+}
+```
\ No newline at end of file
diff --git a/static/usage/v7/breadcrumbs/theming/css-properties/angular/example_component_html.md b/static/usage/v7/breadcrumbs/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..9683fbe6792
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,8 @@
+```html
+
+ Home
+ Electronics
+ Cameras
+ Film
+
+```
diff --git a/static/usage/v7/breadcrumbs/theming/css-properties/demo.html b/static/usage/v7/breadcrumbs/theming/css-properties/demo.html
new file mode 100644
index 00000000000..9c888d5344d
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/theming/css-properties/demo.html
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+ Breadcrumbs
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Home
+ Electronics
+ Cameras
+ Film
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/breadcrumbs/theming/css-properties/index.md b/static/usage/v7/breadcrumbs/theming/css-properties/index.md
new file mode 100644
index 00000000000..d808d24927b
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/theming/css-properties/index.md
@@ -0,0 +1,31 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.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/breadcrumbs/theming/css-properties/javascript.md b/static/usage/v7/breadcrumbs/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..49e5c6688ff
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/theming/css-properties/javascript.md
@@ -0,0 +1,16 @@
+```html
+
+ Home
+ Electronics
+ Cameras
+ Film
+
+
+
+```
diff --git a/static/usage/v7/breadcrumbs/theming/css-properties/react/main_css.md b/static/usage/v7/breadcrumbs/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..338babc9c79
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/theming/css-properties/react/main_css.md
@@ -0,0 +1,7 @@
+```css
+ion-breadcrumb {
+ --color: rgb(81, 155, 198);
+ --color-active: rgb(150, 112, 220);
+ --color-hover: rgb(103, 61, 180);
+}
+```
\ No newline at end of file
diff --git a/static/usage/v7/breadcrumbs/theming/css-properties/react/main_tsx.md b/static/usage/v7/breadcrumbs/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..7d168beeb60
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,18 @@
+```tsx
+import React from 'react';
+import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+
+ Home
+ Electronics
+ Cameras
+ Film
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/breadcrumbs/theming/css-properties/vue.md b/static/usage/v7/breadcrumbs/theming/css-properties/vue.md
new file mode 100644
index 00000000000..119ed6e5a0a
--- /dev/null
+++ b/static/usage/v7/breadcrumbs/theming/css-properties/vue.md
@@ -0,0 +1,27 @@
+```html
+
+
+ Home
+ Electronics
+ Cameras
+ Film
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/button/basic/angular.md b/static/usage/v7/button/basic/angular.md
new file mode 100644
index 00000000000..44ba5831426
--- /dev/null
+++ b/static/usage/v7/button/basic/angular.md
@@ -0,0 +1,4 @@
+```html
+Default
+Disabled
+```
diff --git a/static/usage/v7/button/basic/demo.html b/static/usage/v7/button/basic/demo.html
new file mode 100644
index 00000000000..2302dbff2ba
--- /dev/null
+++ b/static/usage/v7/button/basic/demo.html
@@ -0,0 +1,26 @@
+
+
+
+
+
+
+ Button
+
+
+
+
+
+
+
+
+
+
+
+ Default
+ Disabled
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/button/basic/index.md b/static/usage/v7/button/basic/index.md
new file mode 100644
index 00000000000..5113cbb4106
--- /dev/null
+++ b/static/usage/v7/button/basic/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/button/basic/javascript.md b/static/usage/v7/button/basic/javascript.md
new file mode 100644
index 00000000000..8296ef7f42a
--- /dev/null
+++ b/static/usage/v7/button/basic/javascript.md
@@ -0,0 +1,4 @@
+```html
+Default
+Disabled
+```
diff --git a/static/usage/v7/button/basic/react.md b/static/usage/v7/button/basic/react.md
new file mode 100644
index 00000000000..8393e9cf2b7
--- /dev/null
+++ b/static/usage/v7/button/basic/react.md
@@ -0,0 +1,14 @@
+```tsx
+import React from 'react';
+import { IonButton } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+ Default
+ Disabled
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/button/basic/vue.md b/static/usage/v7/button/basic/vue.md
new file mode 100644
index 00000000000..dbd787691fb
--- /dev/null
+++ b/static/usage/v7/button/basic/vue.md
@@ -0,0 +1,15 @@
+```html
+
+ Default
+ Disabled
+
+
+
+```
diff --git a/static/usage/v7/button/expand/angular.md b/static/usage/v7/button/expand/angular.md
new file mode 100644
index 00000000000..ca3f5093b84
--- /dev/null
+++ b/static/usage/v7/button/expand/angular.md
@@ -0,0 +1,4 @@
+```html
+Block
+Full
+```
diff --git a/static/usage/v7/button/expand/demo.html b/static/usage/v7/button/expand/demo.html
new file mode 100644
index 00000000000..90421eefaf3
--- /dev/null
+++ b/static/usage/v7/button/expand/demo.html
@@ -0,0 +1,32 @@
+
+
+
+
+
+
+ Button
+
+
+
+
+
+
+
+
+
+
+
+
+ Block
+ Full
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/button/expand/index.md b/static/usage/v7/button/expand/index.md
new file mode 100644
index 00000000000..6bf7c9907f6
--- /dev/null
+++ b/static/usage/v7/button/expand/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/button/expand/javascript.md b/static/usage/v7/button/expand/javascript.md
new file mode 100644
index 00000000000..ca3f5093b84
--- /dev/null
+++ b/static/usage/v7/button/expand/javascript.md
@@ -0,0 +1,4 @@
+```html
+Block
+Full
+```
diff --git a/static/usage/v7/button/expand/react.md b/static/usage/v7/button/expand/react.md
new file mode 100644
index 00000000000..424d8e1494b
--- /dev/null
+++ b/static/usage/v7/button/expand/react.md
@@ -0,0 +1,14 @@
+```tsx
+import React from 'react';
+import { IonButton } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+ Block
+ Full
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/button/expand/vue.md b/static/usage/v7/button/expand/vue.md
new file mode 100644
index 00000000000..f67d93ecdef
--- /dev/null
+++ b/static/usage/v7/button/expand/vue.md
@@ -0,0 +1,15 @@
+```html
+
+ Block
+ Full
+
+
+
+```
diff --git a/static/usage/v7/button/fill/angular.md b/static/usage/v7/button/fill/angular.md
new file mode 100644
index 00000000000..390ae848201
--- /dev/null
+++ b/static/usage/v7/button/fill/angular.md
@@ -0,0 +1,6 @@
+```html
+Default
+Clear
+Outline
+Solid
+```
diff --git a/static/usage/v7/button/fill/demo.html b/static/usage/v7/button/fill/demo.html
new file mode 100644
index 00000000000..6e405f68b24
--- /dev/null
+++ b/static/usage/v7/button/fill/demo.html
@@ -0,0 +1,28 @@
+
+
+
+
+
+
+ Button
+
+
+
+
+
+
+
+
+
+
+
+ Default
+ Clear
+ Outline
+ Solid
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/button/fill/index.md b/static/usage/v7/button/fill/index.md
new file mode 100644
index 00000000000..db05b92b344
--- /dev/null
+++ b/static/usage/v7/button/fill/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/button/fill/javascript.md b/static/usage/v7/button/fill/javascript.md
new file mode 100644
index 00000000000..390ae848201
--- /dev/null
+++ b/static/usage/v7/button/fill/javascript.md
@@ -0,0 +1,6 @@
+```html
+Default
+Clear
+Outline
+Solid
+```
diff --git a/static/usage/v7/button/fill/react.md b/static/usage/v7/button/fill/react.md
new file mode 100644
index 00000000000..5a32a7d992d
--- /dev/null
+++ b/static/usage/v7/button/fill/react.md
@@ -0,0 +1,16 @@
+```tsx
+import React from 'react';
+import { IonButton } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+ Default
+ Clear
+ Outline
+ Solid
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/button/fill/vue.md b/static/usage/v7/button/fill/vue.md
new file mode 100644
index 00000000000..4b965ed3582
--- /dev/null
+++ b/static/usage/v7/button/fill/vue.md
@@ -0,0 +1,17 @@
+```html
+
+ Default
+ Clear
+ Outline
+ Solid
+
+
+
+```
diff --git a/static/usage/v7/button/icons/angular.md b/static/usage/v7/button/icons/angular.md
new file mode 100644
index 00000000000..89d74ad2e17
--- /dev/null
+++ b/static/usage/v7/button/icons/angular.md
@@ -0,0 +1,15 @@
+```html
+
+
+ Left Icon
+
+
+
+ Right Icon
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/button/icons/demo.html b/static/usage/v7/button/icons/demo.html
new file mode 100644
index 00000000000..e3594ca1f83
--- /dev/null
+++ b/static/usage/v7/button/icons/demo.html
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+ Button
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Left Icon
+
+
+
+ Right Icon
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/button/icons/index.md b/static/usage/v7/button/icons/index.md
new file mode 100644
index 00000000000..1c5d7c9da22
--- /dev/null
+++ b/static/usage/v7/button/icons/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/button/icons/javascript.md b/static/usage/v7/button/icons/javascript.md
new file mode 100644
index 00000000000..89d74ad2e17
--- /dev/null
+++ b/static/usage/v7/button/icons/javascript.md
@@ -0,0 +1,15 @@
+```html
+
+
+ Left Icon
+
+
+
+ Right Icon
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/button/icons/react.md b/static/usage/v7/button/icons/react.md
new file mode 100644
index 00000000000..09df368e950
--- /dev/null
+++ b/static/usage/v7/button/icons/react.md
@@ -0,0 +1,26 @@
+```tsx
+import React from 'react';
+import { IonButton, IonIcon } from '@ionic/react';
+import { star } from 'ionicons/icons';
+
+function Example() {
+ return (
+ <>
+
+
+ Left Icon
+
+
+
+ Right Icon
+
+
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/button/icons/vue.md b/static/usage/v7/button/icons/vue.md
new file mode 100644
index 00000000000..356fc5617dc
--- /dev/null
+++ b/static/usage/v7/button/icons/vue.md
@@ -0,0 +1,30 @@
+```html
+
+
+
+ Left Icon
+
+
+
+ Right Icon
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/button/shape/angular.md b/static/usage/v7/button/shape/angular.md
new file mode 100644
index 00000000000..97ed756261a
--- /dev/null
+++ b/static/usage/v7/button/shape/angular.md
@@ -0,0 +1,4 @@
+```html
+Default
+Round
+```
diff --git a/static/usage/v7/button/shape/demo.html b/static/usage/v7/button/shape/demo.html
new file mode 100644
index 00000000000..7cedc61e4c7
--- /dev/null
+++ b/static/usage/v7/button/shape/demo.html
@@ -0,0 +1,26 @@
+
+
+
+
+
+
+ Button
+
+
+
+
+
+
+
+
+
+
+
+ Default
+ Round
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/button/shape/index.md b/static/usage/v7/button/shape/index.md
new file mode 100644
index 00000000000..cc5417f8d56
--- /dev/null
+++ b/static/usage/v7/button/shape/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/button/shape/javascript.md b/static/usage/v7/button/shape/javascript.md
new file mode 100644
index 00000000000..97ed756261a
--- /dev/null
+++ b/static/usage/v7/button/shape/javascript.md
@@ -0,0 +1,4 @@
+```html
+Default
+Round
+```
diff --git a/static/usage/v7/button/shape/react.md b/static/usage/v7/button/shape/react.md
new file mode 100644
index 00000000000..df52c3f8985
--- /dev/null
+++ b/static/usage/v7/button/shape/react.md
@@ -0,0 +1,14 @@
+```tsx
+import React from 'react';
+import { IonButton } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+ Default
+ Round
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/button/shape/vue.md b/static/usage/v7/button/shape/vue.md
new file mode 100644
index 00000000000..6db047c9532
--- /dev/null
+++ b/static/usage/v7/button/shape/vue.md
@@ -0,0 +1,15 @@
+```html
+
+ Default
+ Round
+
+
+
+```
diff --git a/static/usage/v7/button/size/angular.md b/static/usage/v7/button/size/angular.md
new file mode 100644
index 00000000000..a24809c2d61
--- /dev/null
+++ b/static/usage/v7/button/size/angular.md
@@ -0,0 +1,5 @@
+```html
+Small
+Default
+Large
+```
diff --git a/static/usage/v7/button/size/demo.html b/static/usage/v7/button/size/demo.html
new file mode 100644
index 00000000000..4aba9947d6e
--- /dev/null
+++ b/static/usage/v7/button/size/demo.html
@@ -0,0 +1,27 @@
+
+
+
+
+
+
+ Button
+
+
+
+
+
+
+
+
+
+
+
+ Small
+ Default
+ Large
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/button/size/index.md b/static/usage/v7/button/size/index.md
new file mode 100644
index 00000000000..e59a99edb6a
--- /dev/null
+++ b/static/usage/v7/button/size/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/button/size/javascript.md b/static/usage/v7/button/size/javascript.md
new file mode 100644
index 00000000000..a24809c2d61
--- /dev/null
+++ b/static/usage/v7/button/size/javascript.md
@@ -0,0 +1,5 @@
+```html
+Small
+Default
+Large
+```
diff --git a/static/usage/v7/button/size/react.md b/static/usage/v7/button/size/react.md
new file mode 100644
index 00000000000..8deb283a9d4
--- /dev/null
+++ b/static/usage/v7/button/size/react.md
@@ -0,0 +1,15 @@
+```tsx
+import React from 'react';
+import { IonButton } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+ Small
+ Default
+ Large
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/button/size/vue.md b/static/usage/v7/button/size/vue.md
new file mode 100644
index 00000000000..02a27f22d1d
--- /dev/null
+++ b/static/usage/v7/button/size/vue.md
@@ -0,0 +1,16 @@
+```html
+
+ Small
+ Default
+ Large
+
+
+
+```
diff --git a/static/usage/v7/button/theming/colors/angular.md b/static/usage/v7/button/theming/colors/angular.md
new file mode 100644
index 00000000000..fed23e8442d
--- /dev/null
+++ b/static/usage/v7/button/theming/colors/angular.md
@@ -0,0 +1,12 @@
+```html
+Default
+Primary
+Secondary
+Tertiary
+Success
+Warning
+Danger
+Light
+Medium
+Dark
+```
diff --git a/static/usage/v7/button/theming/colors/demo.html b/static/usage/v7/button/theming/colors/demo.html
new file mode 100644
index 00000000000..9be8d6d0f8b
--- /dev/null
+++ b/static/usage/v7/button/theming/colors/demo.html
@@ -0,0 +1,41 @@
+
+
+
+
+
+
+ Button
+
+
+
+
+
+
+
+
+
+
+
+
+ Default
+ Primary
+ Secondary
+ Tertiary
+ Success
+ Warning
+ Danger
+ Light
+ Medium
+ Dark
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/button/theming/colors/index.md b/static/usage/v7/button/theming/colors/index.md
new file mode 100644
index 00000000000..88cb6539a81
--- /dev/null
+++ b/static/usage/v7/button/theming/colors/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/button/theming/colors/javascript.md b/static/usage/v7/button/theming/colors/javascript.md
new file mode 100644
index 00000000000..fed23e8442d
--- /dev/null
+++ b/static/usage/v7/button/theming/colors/javascript.md
@@ -0,0 +1,12 @@
+```html
+Default
+Primary
+Secondary
+Tertiary
+Success
+Warning
+Danger
+Light
+Medium
+Dark
+```
diff --git a/static/usage/v7/button/theming/colors/react.md b/static/usage/v7/button/theming/colors/react.md
new file mode 100644
index 00000000000..066aaa06f59
--- /dev/null
+++ b/static/usage/v7/button/theming/colors/react.md
@@ -0,0 +1,22 @@
+```tsx
+import React from 'react';
+import { IonButton } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+ Default
+ Primary
+ Secondary
+ Tertiary
+ Success
+ Warning
+ Danger
+ Light
+ Medium
+ Dark
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/button/theming/colors/vue.md b/static/usage/v7/button/theming/colors/vue.md
new file mode 100644
index 00000000000..7fee983d696
--- /dev/null
+++ b/static/usage/v7/button/theming/colors/vue.md
@@ -0,0 +1,23 @@
+```html
+
+ Default
+ Primary
+ Secondary
+ Tertiary
+ Success
+ Warning
+ Danger
+ Light
+ Medium
+ Dark
+
+
+
+```
diff --git a/static/usage/v7/button/theming/css-properties/angular/example_component_css.md b/static/usage/v7/button/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..fa985cbe82f
--- /dev/null
+++ b/static/usage/v7/button/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,22 @@
+```css
+ion-button {
+ --background: #93e9be;
+ --background-hover: #9ce0be;
+ --background-activated: #88f4be;
+ --background-focused: #88f4be;
+
+ --color: blue;
+
+ --border-radius: 0;
+ --border-color: #000;
+ --border-style: solid;
+ --border-width: 1px;
+
+ --box-shadow: 0 2px 6px 0 rgb(0, 0, 0, 0.25);
+
+ --ripple-color: deeppink;
+
+ --padding-top: 10px;
+ --padding-bottom: 10px;
+}
+```
diff --git a/static/usage/v7/button/theming/css-properties/angular/example_component_html.md b/static/usage/v7/button/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..678df6cde1b
--- /dev/null
+++ b/static/usage/v7/button/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+Custom Button
+```
diff --git a/static/usage/v7/button/theming/css-properties/demo.html b/static/usage/v7/button/theming/css-properties/demo.html
new file mode 100644
index 00000000000..9fd0e65c096
--- /dev/null
+++ b/static/usage/v7/button/theming/css-properties/demo.html
@@ -0,0 +1,47 @@
+
+
+
+
+
+
+ Button
+
+
+
+
+
+
+
+
+
+
+
+
+ Custom Button
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/button/theming/css-properties/index.md b/static/usage/v7/button/theming/css-properties/index.md
new file mode 100644
index 00000000000..32f67b6f002
--- /dev/null
+++ b/static/usage/v7/button/theming/css-properties/index.md
@@ -0,0 +1,33 @@
+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/button/theming/css-properties/javascript.md b/static/usage/v7/button/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..8bca67a3206
--- /dev/null
+++ b/static/usage/v7/button/theming/css-properties/javascript.md
@@ -0,0 +1,26 @@
+```html
+
+
+Custom Button
+```
diff --git a/static/usage/v7/button/theming/css-properties/react/main_css.md b/static/usage/v7/button/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..1fba4c49972
--- /dev/null
+++ b/static/usage/v7/button/theming/css-properties/react/main_css.md
@@ -0,0 +1,23 @@
+
+```css
+ion-button {
+ --background: #93e9be;
+ --background-hover: #9ce0be;
+ --background-activated: #88f4be;
+ --background-focused: #88f4be;
+
+ --color: blue;
+
+ --border-radius: 0;
+ --border-color: #000;
+ --border-style: solid;
+ --border-width: 1px;
+
+ --box-shadow: 0 2px 6px 0 rgb(0, 0, 0, 0.25);
+
+ --ripple-color: deeppink;
+
+ --padding-top: 10px;
+ --padding-bottom: 10px;
+}
+```
diff --git a/static/usage/v7/button/theming/css-properties/react/main_tsx.md b/static/usage/v7/button/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..6e0cddd9709
--- /dev/null
+++ b/static/usage/v7/button/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,13 @@
+```tsx
+import React from 'react';
+import { IonButton } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+ Custom Button
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/button/theming/css-properties/vue.md b/static/usage/v7/button/theming/css-properties/vue.md
new file mode 100644
index 00000000000..0243821d67f
--- /dev/null
+++ b/static/usage/v7/button/theming/css-properties/vue.md
@@ -0,0 +1,37 @@
+```html
+
+ Custom Button
+
+
+
+
+
+```
diff --git a/static/usage/v7/buttons/basic/angular.md b/static/usage/v7/buttons/basic/angular.md
new file mode 100644
index 00000000000..901587bfef1
--- /dev/null
+++ b/static/usage/v7/buttons/basic/angular.md
@@ -0,0 +1,8 @@
+```html
+
+
+ Button
+
+ Default Buttons
+
+```
diff --git a/static/usage/v7/buttons/basic/demo.html b/static/usage/v7/buttons/basic/demo.html
new file mode 100644
index 00000000000..f74d9eb0eca
--- /dev/null
+++ b/static/usage/v7/buttons/basic/demo.html
@@ -0,0 +1,29 @@
+
+
+
+
+
+
+ Buttons
+
+
+
+
+
+
+
+
+
+
+
+
+ Button
+
+ Default Buttons
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/buttons/basic/index.md b/static/usage/v7/buttons/basic/index.md
new file mode 100644
index 00000000000..f9c82463e84
--- /dev/null
+++ b/static/usage/v7/buttons/basic/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/buttons/basic/javascript.md b/static/usage/v7/buttons/basic/javascript.md
new file mode 100644
index 00000000000..901587bfef1
--- /dev/null
+++ b/static/usage/v7/buttons/basic/javascript.md
@@ -0,0 +1,8 @@
+```html
+
+
+ Button
+
+ Default Buttons
+
+```
diff --git a/static/usage/v7/buttons/basic/react.md b/static/usage/v7/buttons/basic/react.md
new file mode 100644
index 00000000000..4a73e0d4958
--- /dev/null
+++ b/static/usage/v7/buttons/basic/react.md
@@ -0,0 +1,16 @@
+```tsx
+import React from 'react';
+import { IonButton, IonButtons, IonTitle, IonToolbar } from '@ionic/react';
+
+function Example() {
+ return (
+
+
+ Button
+
+ Default Buttons
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/buttons/basic/vue.md b/static/usage/v7/buttons/basic/vue.md
new file mode 100644
index 00000000000..3da668fcb20
--- /dev/null
+++ b/static/usage/v7/buttons/basic/vue.md
@@ -0,0 +1,19 @@
+```html
+
+
+
+ Button
+
+ Default Buttons
+
+
+
+
+```
diff --git a/static/usage/v7/buttons/placement/angular.md b/static/usage/v7/buttons/placement/angular.md
new file mode 100644
index 00000000000..8273655ad49
--- /dev/null
+++ b/static/usage/v7/buttons/placement/angular.md
@@ -0,0 +1,21 @@
+```html
+
+
+ Start
+
+ Buttons
+
+ End
+
+
+
+
+
+ Secondary
+
+ Buttons
+
+ Primary
+
+
+```
diff --git a/static/usage/v7/buttons/placement/demo.html b/static/usage/v7/buttons/placement/demo.html
new file mode 100644
index 00000000000..2c51099331c
--- /dev/null
+++ b/static/usage/v7/buttons/placement/demo.html
@@ -0,0 +1,49 @@
+
+
+
+
+
+
+ Buttons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Start
+
+ Buttons
+
+ End
+
+
+
+
+
+ Secondary
+
+ Buttons
+
+ Primary
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/buttons/placement/index.md b/static/usage/v7/buttons/placement/index.md
new file mode 100644
index 00000000000..9d2fd3dcfec
--- /dev/null
+++ b/static/usage/v7/buttons/placement/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/buttons/placement/javascript.md b/static/usage/v7/buttons/placement/javascript.md
new file mode 100644
index 00000000000..8273655ad49
--- /dev/null
+++ b/static/usage/v7/buttons/placement/javascript.md
@@ -0,0 +1,21 @@
+```html
+
+
+ Start
+
+ Buttons
+
+ End
+
+
+
+
+
+ Secondary
+
+ Buttons
+
+ Primary
+
+
+```
diff --git a/static/usage/v7/buttons/placement/react.md b/static/usage/v7/buttons/placement/react.md
new file mode 100644
index 00000000000..27d6b54d4ba
--- /dev/null
+++ b/static/usage/v7/buttons/placement/react.md
@@ -0,0 +1,31 @@
+```tsx
+import React from 'react';
+import { IonButton, IonButtons, IonTitle, IonToolbar } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+ Start
+
+ Buttons
+
+ End
+
+
+
+
+
+ Secondary
+
+ Buttons
+
+ Primary
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/buttons/placement/vue.md b/static/usage/v7/buttons/placement/vue.md
new file mode 100644
index 00000000000..dc0217fc146
--- /dev/null
+++ b/static/usage/v7/buttons/placement/vue.md
@@ -0,0 +1,32 @@
+```html
+
+
+
+ Start
+
+ Buttons
+
+ End
+
+
+
+
+
+ Secondary
+
+ Buttons
+
+ Primary
+
+
+
+
+
+```
diff --git a/static/usage/v7/buttons/types/angular.md b/static/usage/v7/buttons/types/angular.md
new file mode 100644
index 00000000000..183c70105b1
--- /dev/null
+++ b/static/usage/v7/buttons/types/angular.md
@@ -0,0 +1,78 @@
+```html
+
+
+
+ Favorite
+
+
+ Default Buttons
+
+
+ Delete
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Icon Buttons
+
+
+
+
+
+
+ Contact
+
+
+
+
+ Help
+
+
+
+ Solid Buttons
+
+
+
+
+
+
+ Star
+
+
+
+
+ Edit
+
+
+
+ Outline Buttons
+
+
+
+
+
+
+ Back Button
+
+
+
+
+
+
+ Menu Button
+
+```
diff --git a/static/usage/v7/buttons/types/demo.html b/static/usage/v7/buttons/types/demo.html
new file mode 100644
index 00000000000..46288e45f1a
--- /dev/null
+++ b/static/usage/v7/buttons/types/demo.html
@@ -0,0 +1,106 @@
+
+
+
+
+
+
+ Buttons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Favorite
+
+
+ Default Buttons
+
+
+ Delete
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Icon Buttons
+
+
+
+
+
+
+ Contact
+
+
+
+
+ Help
+
+
+
+ Solid Buttons
+
+
+
+
+
+
+ Star
+
+
+
+
+ Edit
+
+
+
+ Outline Buttons
+
+
+
+
+
+
+ Back Button
+
+
+
+
+
+
+ Menu Button
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/buttons/types/index.md b/static/usage/v7/buttons/types/index.md
new file mode 100644
index 00000000000..1427b4536f6
--- /dev/null
+++ b/static/usage/v7/buttons/types/index.md
@@ -0,0 +1,13 @@
+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/buttons/types/javascript.md b/static/usage/v7/buttons/types/javascript.md
new file mode 100644
index 00000000000..183c70105b1
--- /dev/null
+++ b/static/usage/v7/buttons/types/javascript.md
@@ -0,0 +1,78 @@
+```html
+
+
+
+ Favorite
+
+
+ Default Buttons
+
+
+ Delete
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Icon Buttons
+
+
+
+
+
+
+ Contact
+
+
+
+
+ Help
+
+
+
+ Solid Buttons
+
+
+
+
+
+
+ Star
+
+
+
+
+ Edit
+
+
+
+ Outline Buttons
+
+
+
+
+
+
+ Back Button
+
+
+
+
+
+
+ Menu Button
+
+```
diff --git a/static/usage/v7/buttons/types/react.md b/static/usage/v7/buttons/types/react.md
new file mode 100644
index 00000000000..8d3b3edfe9e
--- /dev/null
+++ b/static/usage/v7/buttons/types/react.md
@@ -0,0 +1,90 @@
+```tsx
+import React from 'react';
+import { IonBackButton, IonButton, IonButtons, IonIcon, IonMenuButton, IonTitle, IonToolbar } from '@ionic/react';
+import { create, ellipsisHorizontal, ellipsisVertical, helpCircle, personCircle, search, star } from 'ionicons/icons';
+
+function Example() {
+ return (
+ <>
+
+
+
+ Favorite
+
+
+ Default Buttons
+
+
+ Delete
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Icon Buttons
+
+
+
+
+
+
+ Contact
+
+
+
+
+ Help
+
+
+
+ Solid Buttons
+
+
+
+
+
+
+ Star
+
+
+
+
+ Edit
+
+
+
+ Outline Buttons
+
+
+
+
+
+
+ Back Button
+
+
+
+
+
+
+ Menu Button
+
+
+ );
+}
+export default Example;
+
+```
diff --git a/static/usage/v7/buttons/types/vue.md b/static/usage/v7/buttons/types/vue.md
new file mode 100644
index 00000000000..9a101caa402
--- /dev/null
+++ b/static/usage/v7/buttons/types/vue.md
@@ -0,0 +1,93 @@
+```html
+
+
+
+
+ Favorite
+
+
+ Default Buttons
+
+
+ Delete
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Icon Buttons
+
+
+
+
+
+
+ Contact
+
+
+
+
+ Help
+
+
+
+ Solid Buttons
+
+
+
+
+
+
+ Star
+
+
+
+
+ Edit
+
+
+
+ Outline Buttons
+
+
+
+
+
+
+ Back Button
+
+
+
+
+
+
+ Menu Button
+
+
+
+
+```
diff --git a/static/usage/v7/card/basic/angular.md b/static/usage/v7/card/basic/angular.md
new file mode 100644
index 00000000000..d489fbc5e26
--- /dev/null
+++ b/static/usage/v7/card/basic/angular.md
@@ -0,0 +1,12 @@
+```html
+
+
+ Card Title
+ Card Subtitle
+
+
+
+ Here's a small text description for the card content. Nothing more, nothing less.
+
+
+```
diff --git a/static/usage/v7/card/basic/demo.html b/static/usage/v7/card/basic/demo.html
new file mode 100644
index 00000000000..329c4a3ce34
--- /dev/null
+++ b/static/usage/v7/card/basic/demo.html
@@ -0,0 +1,40 @@
+
+
+
+
+
+
+ Card
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Card Title
+ Card Subtitle
+
+
+
+ Here's a small text description for the card content. Nothing more, nothing less.
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/card/basic/index.md b/static/usage/v7/card/basic/index.md
new file mode 100644
index 00000000000..41354dffa34
--- /dev/null
+++ b/static/usage/v7/card/basic/index.md
@@ -0,0 +1,12 @@
+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/card/basic/javascript.md b/static/usage/v7/card/basic/javascript.md
new file mode 100644
index 00000000000..d489fbc5e26
--- /dev/null
+++ b/static/usage/v7/card/basic/javascript.md
@@ -0,0 +1,12 @@
+```html
+
+
+ Card Title
+ Card Subtitle
+
+
+
+ Here's a small text description for the card content. Nothing more, nothing less.
+
+
+```
diff --git a/static/usage/v7/card/basic/react.md b/static/usage/v7/card/basic/react.md
new file mode 100644
index 00000000000..e3f400dc659
--- /dev/null
+++ b/static/usage/v7/card/basic/react.md
@@ -0,0 +1,20 @@
+```tsx
+import React from 'react';
+import { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle } from '@ionic/react';
+
+function Example() {
+ return (
+
+
+ Card Title
+ Card Subtitle
+
+
+
+ Here's a small text description for the card content. Nothing more, nothing less.
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/card/basic/vue.md b/static/usage/v7/card/basic/vue.md
new file mode 100644
index 00000000000..aa44d9f0931
--- /dev/null
+++ b/static/usage/v7/card/basic/vue.md
@@ -0,0 +1,23 @@
+```html
+
+
+
+ Card Title
+ Card Subtitle
+
+
+
+ Here's a small text description for the card content. Nothing more, nothing less.
+
+
+
+
+
+```
diff --git a/static/usage/v7/card/buttons/angular.md b/static/usage/v7/card/buttons/angular.md
new file mode 100644
index 00000000000..c597c1dca7a
--- /dev/null
+++ b/static/usage/v7/card/buttons/angular.md
@@ -0,0 +1,15 @@
+```html
+
+
+ Card Title
+ Card Subtitle
+
+
+
+ Here's a small text description for the card content. Nothing more, nothing less.
+
+
+ Action 1
+ Action 2
+
+```
diff --git a/static/usage/v7/card/buttons/demo.html b/static/usage/v7/card/buttons/demo.html
new file mode 100644
index 00000000000..0e5d5317575
--- /dev/null
+++ b/static/usage/v7/card/buttons/demo.html
@@ -0,0 +1,43 @@
+
+
+
+
+
+
+ Card
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Card Title
+ Card Subtitle
+
+
+
+ Here's a small text description for the card content. Nothing more, nothing less.
+
+
+ Action 1
+ Action 2
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/card/buttons/index.md b/static/usage/v7/card/buttons/index.md
new file mode 100644
index 00000000000..f0a1001a6cc
--- /dev/null
+++ b/static/usage/v7/card/buttons/index.md
@@ -0,0 +1,13 @@
+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/card/buttons/javascript.md b/static/usage/v7/card/buttons/javascript.md
new file mode 100644
index 00000000000..c597c1dca7a
--- /dev/null
+++ b/static/usage/v7/card/buttons/javascript.md
@@ -0,0 +1,15 @@
+```html
+
+
+ Card Title
+ Card Subtitle
+
+
+
+ Here's a small text description for the card content. Nothing more, nothing less.
+
+
+ Action 1
+ Action 2
+
+```
diff --git a/static/usage/v7/card/buttons/react.md b/static/usage/v7/card/buttons/react.md
new file mode 100644
index 00000000000..f90ab0d3cbb
--- /dev/null
+++ b/static/usage/v7/card/buttons/react.md
@@ -0,0 +1,23 @@
+```tsx
+import React from 'react';
+import { IonButton, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle } from '@ionic/react';
+
+function Example() {
+ return (
+
+
+ Card Title
+ Card Subtitle
+
+
+
+ Here's a small text description for the card content. Nothing more, nothing less.
+
+
+ Action 1
+ Action 2
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/card/buttons/vue.md b/static/usage/v7/card/buttons/vue.md
new file mode 100644
index 00000000000..2266589135f
--- /dev/null
+++ b/static/usage/v7/card/buttons/vue.md
@@ -0,0 +1,26 @@
+```html
+
+
+
+ Card Title
+ Card Subtitle
+
+
+
+ Here's a small text description for the card content. Nothing more, nothing less.
+
+
+ Action 1
+ Action 2
+
+
+
+
+```
diff --git a/static/usage/v7/card/list/angular/example_component_css.md b/static/usage/v7/card/list/angular/example_component_css.md
new file mode 100644
index 00000000000..1e82c58ad8c
--- /dev/null
+++ b/static/usage/v7/card/list/angular/example_component_css.md
@@ -0,0 +1,5 @@
+```css
+ion-item {
+ --padding-start: 0;
+}
+```
diff --git a/static/usage/v7/card/list/angular/example_component_html.md b/static/usage/v7/card/list/angular/example_component_html.md
new file mode 100644
index 00000000000..850c62ec942
--- /dev/null
+++ b/static/usage/v7/card/list/angular/example_component_html.md
@@ -0,0 +1,39 @@
+```html
+
+
+ Card Title
+ Card Subtitle
+
+
+
+
+
+
+
+ Item
+
+
+
+
+
+
+ Item
+
+
+
+
+
+
+ Item
+
+
+
+
+
+
+ Item
+
+
+
+
+```
diff --git a/static/usage/v7/card/list/demo.html b/static/usage/v7/card/list/demo.html
new file mode 100644
index 00000000000..a74d6923707
--- /dev/null
+++ b/static/usage/v7/card/list/demo.html
@@ -0,0 +1,75 @@
+
+
+
+
+
+
+ Card
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/card/list/index.md b/static/usage/v7/card/list/index.md
new file mode 100644
index 00000000000..3cc353476b8
--- /dev/null
+++ b/static/usage/v7/card/list/index.md
@@ -0,0 +1,33 @@
+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/card/list/javascript.md b/static/usage/v7/card/list/javascript.md
new file mode 100644
index 00000000000..e640c5e9966
--- /dev/null
+++ b/static/usage/v7/card/list/javascript.md
@@ -0,0 +1,45 @@
+```html
+
+
+ Card Title
+ Card Subtitle
+
+
+
+
+
+
+
+ Item
+
+
+
+
+
+
+ Item
+
+
+
+
+
+
+ Item
+
+
+
+
+
+
+ Item
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/card/list/react/main_css.md b/static/usage/v7/card/list/react/main_css.md
new file mode 100644
index 00000000000..1e82c58ad8c
--- /dev/null
+++ b/static/usage/v7/card/list/react/main_css.md
@@ -0,0 +1,5 @@
+```css
+ion-item {
+ --padding-start: 0;
+}
+```
diff --git a/static/usage/v7/card/list/react/main_tsx.md b/static/usage/v7/card/list/react/main_tsx.md
new file mode 100644
index 00000000000..9bb30e92c92
--- /dev/null
+++ b/static/usage/v7/card/list/react/main_tsx.md
@@ -0,0 +1,49 @@
+```tsx
+import React from 'react';
+import { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonItem, IonLabel, IonList, IonThumbnail } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+
+
+ Card Title
+ Card Subtitle
+
+
+
+
+
+
+
+ Item
+
+
+
+
+
+
+ Item
+
+
+
+
+
+
+ Item
+
+
+
+
+
+
+ Item
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/card/list/vue.md b/static/usage/v7/card/list/vue.md
new file mode 100644
index 00000000000..1a565483588
--- /dev/null
+++ b/static/usage/v7/card/list/vue.md
@@ -0,0 +1,56 @@
+```html
+
+
+
+ Card Title
+ Card Subtitle
+
+
+
+
+
+
+
+ Item
+
+
+
+
+
+
+ Item
+
+
+
+
+
+
+ Item
+
+
+
+
+
+
+ Item
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/card/media/angular.md b/static/usage/v7/card/media/angular.md
new file mode 100644
index 00000000000..2e074cd5c6d
--- /dev/null
+++ b/static/usage/v7/card/media/angular.md
@@ -0,0 +1,13 @@
+```html
+
+ 
+
+ Card Title
+ Card Subtitle
+
+
+
+ Here's a small text description for the card content. Nothing more, nothing less.
+
+
+```
diff --git a/static/usage/v7/card/media/demo.html b/static/usage/v7/card/media/demo.html
new file mode 100644
index 00000000000..3af6c687963
--- /dev/null
+++ b/static/usage/v7/card/media/demo.html
@@ -0,0 +1,41 @@
+
+
+
+
+
+
+ Card
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Card Title
+ Card Subtitle
+
+
+
+ Here's a small text description for the card content. Nothing more, nothing less.
+
+
+
+
+
+ Card Title
+ Card Subtitle
+
+
+
+ Card Content
+
+
+
+
+
+ Card Title
+ Card Subtitle
+
+
+
+ Card Content
+
+
+
+
+
+ Card Title
+ Card Subtitle
+
+
+
+ Card Content
+
+
+
+
+
+ Card Title
+ Card Subtitle
+
+
+
+ Card Content
+
+
+
+
+
+ Card Title
+ Card Subtitle
+
+
+
+ Card Content
+
+
+
+
+
+ Card Title
+ Card Subtitle
+
+
+
+ Card Content
+
+
+
+
+
+ Card Title
+ Card Subtitle
+
+
+
+ Card Content
+
+
+
+
+
+ Card Title
+ Card Subtitle
+
+
+
+ Card Content
+
+
+
+
+
+ Card Title
+ Card Subtitle
+
+
+
+ Card Content
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/card/theming/colors/index.md b/static/usage/v7/card/theming/colors/index.md
new file mode 100644
index 00000000000..30ce310e99c
--- /dev/null
+++ b/static/usage/v7/card/theming/colors/index.md
@@ -0,0 +1,13 @@
+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/card/theming/colors/javascript.md b/static/usage/v7/card/theming/colors/javascript.md
new file mode 100644
index 00000000000..bda4dbfe1dc
--- /dev/null
+++ b/static/usage/v7/card/theming/colors/javascript.md
@@ -0,0 +1,100 @@
+```html
+
+
+ Card Title
+ Card Subtitle
+
+
+
+ Card Content
+
+
+
+
+
+ Card Title
+ Card Subtitle
+
+
+
+ Card Content
+
+
+
+
+
+ Card Title
+ Card Subtitle
+
+
+
+ Card Content
+
+
+
+
+
+ Card Title
+ Card Subtitle
+
+
+
+ Card Content
+
+
+
+
+
+ Card Title
+ Card Subtitle
+
+
+
+ Card Content
+
+
+
+
+
+ Card Title
+ Card Subtitle
+
+
+
+ Card Content
+
+
+
+
+
+ Card Title
+ Card Subtitle
+
+
+
+ Card Content
+
+
+
+
+
+ Card Title
+ Card Subtitle
+
+
+
+ Card Content
+
+
+
+
+
+ Card Title
+ Card Subtitle
+
+
+
+ Card Content
+
+
+```
diff --git a/static/usage/v7/card/theming/colors/react.md b/static/usage/v7/card/theming/colors/react.md
new file mode 100644
index 00000000000..cc2f4623a3a
--- /dev/null
+++ b/static/usage/v7/card/theming/colors/react.md
@@ -0,0 +1,110 @@
+```tsx
+import React from 'react';
+import { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+ Card Title
+ Card Subtitle
+
+
+
+ Card Content
+
+
+
+
+
+ Card Title
+ Card Subtitle
+
+
+
+ Card Content
+
+
+
+
+
+ Card Title
+ Card Subtitle
+
+
+
+ Card Content
+
+
+
+
+
+ Card Title
+ Card Subtitle
+
+
+
+ Card Content
+
+
+
+
+
+ Card Title
+ Card Subtitle
+
+
+
+ Card Content
+
+
+
+
+
+ Card Title
+ Card Subtitle
+
+
+
+ Card Content
+
+
+
+
+
+ Card Title
+ Card Subtitle
+
+
+
+ Card Content
+
+
+
+
+
+ Card Title
+ Card Subtitle
+
+
+
+ Card Content
+
+
+
+
+
+ Card Title
+ Card Subtitle
+
+
+
+ Card Content
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/card/theming/colors/vue.md b/static/usage/v7/card/theming/colors/vue.md
new file mode 100644
index 00000000000..337df235251
--- /dev/null
+++ b/static/usage/v7/card/theming/colors/vue.md
@@ -0,0 +1,111 @@
+```html
+
+
+
+ Card Title
+ Card Subtitle
+
+
+
+ Card Content
+
+
+
+
+
+ Card Title
+ Card Subtitle
+
+
+
+ Card Content
+
+
+
+
+
+ Card Title
+ Card Subtitle
+
+
+
+ Card Content
+
+
+
+
+
+ Card Title
+ Card Subtitle
+
+
+
+ Card Content
+
+
+
+
+
+ Card Title
+ Card Subtitle
+
+
+
+ Card Content
+
+
+
+
+
+ Card Title
+ Card Subtitle
+
+
+
+ Card Content
+
+
+
+
+
+ Card Title
+ Card Subtitle
+
+
+
+ Card Content
+
+
+
+
+
+ Card Title
+ Card Subtitle
+
+
+
+ Card Content
+
+
+
+
+
+ Card Title
+ Card Subtitle
+
+
+
+ Card Content
+
+
+
+
+
+```
diff --git a/static/usage/v7/card/theming/css-properties/angular/example_component_css.md b/static/usage/v7/card/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..9e5b40683ac
--- /dev/null
+++ b/static/usage/v7/card/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,14 @@
+```css
+ion-card {
+ --background: #000;
+ --color: #9efff0;
+}
+
+ion-card-title {
+ --color: #52ffe4;
+}
+
+ion-card-subtitle {
+ --color: #d1fff8;
+}
+```
diff --git a/static/usage/v7/card/theming/css-properties/angular/example_component_html.md b/static/usage/v7/card/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..d489fbc5e26
--- /dev/null
+++ b/static/usage/v7/card/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,12 @@
+```html
+
+
+ Card Title
+ Card Subtitle
+
+
+
+ Here's a small text description for the card content. Nothing more, nothing less.
+
+
+```
diff --git a/static/usage/v7/card/theming/css-properties/demo.html b/static/usage/v7/card/theming/css-properties/demo.html
new file mode 100644
index 00000000000..140ca8f1e1c
--- /dev/null
+++ b/static/usage/v7/card/theming/css-properties/demo.html
@@ -0,0 +1,53 @@
+
+
+
+
+
+
+ Card
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Card Title
+ Card Subtitle
+
+
+
+ Here's a small text description for the card content. Nothing more, nothing less.
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/card/theming/css-properties/index.md b/static/usage/v7/card/theming/css-properties/index.md
new file mode 100644
index 00000000000..cc473c03d32
--- /dev/null
+++ b/static/usage/v7/card/theming/css-properties/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/card/theming/css-properties/javascript.md b/static/usage/v7/card/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..b8b50748719
--- /dev/null
+++ b/static/usage/v7/card/theming/css-properties/javascript.md
@@ -0,0 +1,27 @@
+```html
+
+
+ Card Title
+ Card Subtitle
+
+
+
+ Here's a small text description for the card content. Nothing more, nothing less.
+
+
+
+
+```
diff --git a/static/usage/v7/card/theming/css-properties/react/main_css.md b/static/usage/v7/card/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..9e5b40683ac
--- /dev/null
+++ b/static/usage/v7/card/theming/css-properties/react/main_css.md
@@ -0,0 +1,14 @@
+```css
+ion-card {
+ --background: #000;
+ --color: #9efff0;
+}
+
+ion-card-title {
+ --color: #52ffe4;
+}
+
+ion-card-subtitle {
+ --color: #d1fff8;
+}
+```
diff --git a/static/usage/v7/card/theming/css-properties/react/main_tsx.md b/static/usage/v7/card/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..251b18ce24d
--- /dev/null
+++ b/static/usage/v7/card/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,22 @@
+```tsx
+import React from 'react';
+import { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+
+
+ Card Title
+ Card Subtitle
+
+
+
+ Here's a small text description for the card content. Nothing more, nothing less.
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/card/theming/css-properties/vue.md b/static/usage/v7/card/theming/css-properties/vue.md
new file mode 100644
index 00000000000..e2db7992d85
--- /dev/null
+++ b/static/usage/v7/card/theming/css-properties/vue.md
@@ -0,0 +1,38 @@
+```html
+
+
+
+ Card Title
+ Card Subtitle
+
+
+
+ Here's a small text description for the card content. Nothing more, nothing less.
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/checkbox/basic/angular.md b/static/usage/v7/checkbox/basic/angular.md
new file mode 100644
index 00000000000..985ef4cdc1e
--- /dev/null
+++ b/static/usage/v7/checkbox/basic/angular.md
@@ -0,0 +1,3 @@
+```html
+I agree to the terms and conditions
+```
diff --git a/static/usage/v7/checkbox/basic/demo.html b/static/usage/v7/checkbox/basic/demo.html
new file mode 100644
index 00000000000..a32e3504db1
--- /dev/null
+++ b/static/usage/v7/checkbox/basic/demo.html
@@ -0,0 +1,24 @@
+
+
+
+
+
+
+ Checkbox
+
+
+
+
+
+
+
+
+
+
+ I agree to the terms and conditions
+
+
+
+
+
+
diff --git a/static/usage/v7/checkbox/basic/index.md b/static/usage/v7/checkbox/basic/index.md
new file mode 100644
index 00000000000..e238ae9c63f
--- /dev/null
+++ b/static/usage/v7/checkbox/basic/index.md
@@ -0,0 +1,17 @@
+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/checkbox/basic/javascript.md b/static/usage/v7/checkbox/basic/javascript.md
new file mode 100644
index 00000000000..985ef4cdc1e
--- /dev/null
+++ b/static/usage/v7/checkbox/basic/javascript.md
@@ -0,0 +1,3 @@
+```html
+I agree to the terms and conditions
+```
diff --git a/static/usage/v7/checkbox/basic/react.md b/static/usage/v7/checkbox/basic/react.md
new file mode 100644
index 00000000000..2d4159efbb2
--- /dev/null
+++ b/static/usage/v7/checkbox/basic/react.md
@@ -0,0 +1,11 @@
+```tsx
+import React from 'react';
+import { IonCheckbox } from '@ionic/react';
+
+function Example() {
+ return (
+ I agree to the terms and conditions
+ );
+}
+export default Example;
+```
\ No newline at end of file
diff --git a/static/usage/v7/checkbox/basic/vue.md b/static/usage/v7/checkbox/basic/vue.md
new file mode 100644
index 00000000000..9bc17fdb9ea
--- /dev/null
+++ b/static/usage/v7/checkbox/basic/vue.md
@@ -0,0 +1,14 @@
+```html
+
+ I agree to the terms and conditions
+
+
+
+```
diff --git a/static/usage/v7/checkbox/indeterminate/angular.md b/static/usage/v7/checkbox/indeterminate/angular.md
new file mode 100644
index 00000000000..1ae617e7558
--- /dev/null
+++ b/static/usage/v7/checkbox/indeterminate/angular.md
@@ -0,0 +1,3 @@
+```html
+Indeterminate checkbox
+```
diff --git a/static/usage/v7/checkbox/indeterminate/demo.html b/static/usage/v7/checkbox/indeterminate/demo.html
new file mode 100644
index 00000000000..84c30d8d9aa
--- /dev/null
+++ b/static/usage/v7/checkbox/indeterminate/demo.html
@@ -0,0 +1,24 @@
+
+
+
+
+
+
+ Checkbox
+
+
+
+
+
+
+
+
+
+
+ Indeterminate checkbox
+
+
+
+
+
+
diff --git a/static/usage/v7/checkbox/indeterminate/index.md b/static/usage/v7/checkbox/indeterminate/index.md
new file mode 100644
index 00000000000..bcc02a761e7
--- /dev/null
+++ b/static/usage/v7/checkbox/indeterminate/index.md
@@ -0,0 +1,17 @@
+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/checkbox/indeterminate/javascript.md b/static/usage/v7/checkbox/indeterminate/javascript.md
new file mode 100644
index 00000000000..ee9fb8c422a
--- /dev/null
+++ b/static/usage/v7/checkbox/indeterminate/javascript.md
@@ -0,0 +1,3 @@
+```html
+Indeterminate checkbox
+```
diff --git a/static/usage/v7/checkbox/indeterminate/react.md b/static/usage/v7/checkbox/indeterminate/react.md
new file mode 100644
index 00000000000..117af56bc35
--- /dev/null
+++ b/static/usage/v7/checkbox/indeterminate/react.md
@@ -0,0 +1,11 @@
+```tsx
+import React from 'react';
+import { IonCheckbox } from '@ionic/react';
+
+function Example() {
+ return (
+ Indeterminate checkbox
+ );
+}
+export default Example;
+```
\ No newline at end of file
diff --git a/static/usage/v7/checkbox/indeterminate/vue.md b/static/usage/v7/checkbox/indeterminate/vue.md
new file mode 100644
index 00000000000..5d08480d9a3
--- /dev/null
+++ b/static/usage/v7/checkbox/indeterminate/vue.md
@@ -0,0 +1,14 @@
+```html
+
+ Indeterminate checkbox
+
+
+
+```
diff --git a/static/usage/v7/checkbox/justify/angular.md b/static/usage/v7/checkbox/justify/angular.md
new file mode 100644
index 00000000000..f253722afec
--- /dev/null
+++ b/static/usage/v7/checkbox/justify/angular.md
@@ -0,0 +1,15 @@
+```html
+
+
+ Packed at the Start of Line
+
+
+
+ Packed at the End of Line
+
+
+
+ Space Between Label and Control
+
+
+```
diff --git a/static/usage/v7/checkbox/justify/demo.html b/static/usage/v7/checkbox/justify/demo.html
new file mode 100644
index 00000000000..7ebeb15fdf4
--- /dev/null
+++ b/static/usage/v7/checkbox/justify/demo.html
@@ -0,0 +1,40 @@
+
+
+
+
+
+
+ Checkbox
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Packed at the Start of Line
+
+
+
+ Packed at the End of Line
+
+
+
+ Space Between Label and Control
+
+
+
+
+
+
+
diff --git a/static/usage/v7/checkbox/justify/index.md b/static/usage/v7/checkbox/justify/index.md
new file mode 100644
index 00000000000..1128d74a9f6
--- /dev/null
+++ b/static/usage/v7/checkbox/justify/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/checkbox/justify/javascript.md b/static/usage/v7/checkbox/justify/javascript.md
new file mode 100644
index 00000000000..f253722afec
--- /dev/null
+++ b/static/usage/v7/checkbox/justify/javascript.md
@@ -0,0 +1,15 @@
+```html
+
+
+ Packed at the Start of Line
+
+
+
+ Packed at the End of Line
+
+
+
+ Space Between Label and Control
+
+
+```
diff --git a/static/usage/v7/checkbox/justify/react.md b/static/usage/v7/checkbox/justify/react.md
new file mode 100644
index 00000000000..fd92e9f1fa0
--- /dev/null
+++ b/static/usage/v7/checkbox/justify/react.md
@@ -0,0 +1,23 @@
+```tsx
+import React from 'react';
+import { IonCheckbox, IonItem, IonList } from '@ionic/react';
+
+function Example() {
+ return (
+
+
+ Packed at the Start of Line
+
+
+
+ Packed at the End of Line
+
+
+
+ Space Between Label and Control
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/checkbox/justify/vue.md b/static/usage/v7/checkbox/justify/vue.md
new file mode 100644
index 00000000000..5659a826bc6
--- /dev/null
+++ b/static/usage/v7/checkbox/justify/vue.md
@@ -0,0 +1,26 @@
+```html
+
+
+
+ Packed at the Start of Line
+
+
+
+ Packed at the End of Line
+
+
+
+ Space Between Label and Control
+
+
+
+
+
+```
diff --git a/static/usage/v7/checkbox/label-placement/angular.md b/static/usage/v7/checkbox/label-placement/angular.md
new file mode 100644
index 00000000000..f2cb87d8171
--- /dev/null
+++ b/static/usage/v7/checkbox/label-placement/angular.md
@@ -0,0 +1,11 @@
+```html
+Label at the Start
+
+
+
+Label at the End
+
+
+
+Fixed Width Label
+```
diff --git a/static/usage/v7/checkbox/label-placement/demo.html b/static/usage/v7/checkbox/label-placement/demo.html
new file mode 100644
index 00000000000..2adee164de5
--- /dev/null
+++ b/static/usage/v7/checkbox/label-placement/demo.html
@@ -0,0 +1,34 @@
+
+
+
+
+
+
+ Checkbox
+
+
+
+
+
+
+
+
+
+
+
+ Label at the Start
+
+
+
+ Label at the End
+
+
+
+ Fixed Width Label
+
+
+
+Label at the End
+
+
+
+Fixed Width Label
+```
diff --git a/static/usage/v7/checkbox/label-placement/react.md b/static/usage/v7/checkbox/label-placement/react.md
new file mode 100644
index 00000000000..42520178b60
--- /dev/null
+++ b/static/usage/v7/checkbox/label-placement/react.md
@@ -0,0 +1,21 @@
+```tsx
+import React from 'react';
+import { IonCheckbox } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+ Label at the Start
+
+
+
+ Label at the End
+
+
+
+ Fixed Width Label
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/checkbox/label-placement/vue.md b/static/usage/v7/checkbox/label-placement/vue.md
new file mode 100644
index 00000000000..31697dd3694
--- /dev/null
+++ b/static/usage/v7/checkbox/label-placement/vue.md
@@ -0,0 +1,22 @@
+```html
+
+ Label at the Start
+
+
+
+ Label at the End
+
+
+
+ Fixed Width Label
+
+
+
+```
diff --git a/static/usage/v7/checkbox/migration/index.md b/static/usage/v7/checkbox/migration/index.md
new file mode 100644
index 00000000000..acf77957566
--- /dev/null
+++ b/static/usage/v7/checkbox/migration/index.md
@@ -0,0 +1,188 @@
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+````mdx-code-block
+
+
+
+```html
+
+
+
+
+ Checkbox Label
+
+
+
+
+
+ Checkbox Label
+
+
+
+
+
+
+ Checkbox Label
+
+
+
+
+
+ Checkbox Label
+
+
+
+
+
+
+ Checkbox Label
+
+
+
+
+
+ Checkbox Label
+
+```
+
+
+
+```html
+
+
+
+
+ Checkbox Label
+
+
+
+
+
+ Checkbox Label
+
+
+
+
+
+
+ Checkbox Label
+
+
+
+
+
+ Checkbox Label
+
+
+
+
+
+
+ Checkbox Label
+
+
+
+
+
+ Checkbox Label
+
+```
+
+
+
+```tsx
+{/* Basic */}
+
+{/* Before */}
+
+ Checkbox Label
+
+
+
+{/* After */}
+
+ Checkbox Label
+
+
+{/* Fixed Labels */}
+
+{/* Before */}
+
+ Checkbox Label
+
+
+
+{/* After */}
+
+ Checkbox Label
+
+
+{/* Checkbox at the start of line, Label at the end of line */}
+
+{/* Before */}
+
+ Checkbox Label
+
+
+
+{/* After */}
+
+ Checkbox Label
+
+```
+
+
+
+```html
+
+
+
+
+ Checkbox Label
+
+
+
+
+
+ Checkbox Label
+
+
+
+
+
+
+ Checkbox Label
+
+
+
+
+
+ Checkbox Label
+
+
+
+
+
+
+ Checkbox Label
+
+
+
+
+
+ Checkbox Label
+
+```
+
+
+````
diff --git a/static/usage/v7/checkbox/theming/css-properties/angular/example_component_css.md b/static/usage/v7/checkbox/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..f5f63bf8c22
--- /dev/null
+++ b/static/usage/v7/checkbox/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,11 @@
+```css
+ion-checkbox {
+ --size: 32px;
+ --checkbox-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/v7/checkbox/theming/css-properties/angular/example_component_html.md b/static/usage/v7/checkbox/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..29d3d419b61
--- /dev/null
+++ b/static/usage/v7/checkbox/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+Themed checkbox
+```
\ No newline at end of file
diff --git a/static/usage/v7/checkbox/theming/css-properties/demo.html b/static/usage/v7/checkbox/theming/css-properties/demo.html
new file mode 100644
index 00000000000..706088a1d31
--- /dev/null
+++ b/static/usage/v7/checkbox/theming/css-properties/demo.html
@@ -0,0 +1,35 @@
+
+
+
+
+
+
+ Checkbox
+
+
+
+
+
+
+
+
+
+
+
+ Themed checkbox
+
+
+
+
+
+
diff --git a/static/usage/v7/checkbox/theming/css-properties/index.md b/static/usage/v7/checkbox/theming/css-properties/index.md
new file mode 100644
index 00000000000..51d619f8ccf
--- /dev/null
+++ b/static/usage/v7/checkbox/theming/css-properties/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/checkbox/theming/css-properties/javascript.md b/static/usage/v7/checkbox/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..a247dee9a04
--- /dev/null
+++ b/static/usage/v7/checkbox/theming/css-properties/javascript.md
@@ -0,0 +1,15 @@
+```html
+Themed checkbox
+
+
+```
diff --git a/static/usage/v7/checkbox/theming/css-properties/react/main_css.md b/static/usage/v7/checkbox/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..f5f63bf8c22
--- /dev/null
+++ b/static/usage/v7/checkbox/theming/css-properties/react/main_css.md
@@ -0,0 +1,11 @@
+```css
+ion-checkbox {
+ --size: 32px;
+ --checkbox-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/v7/checkbox/theming/css-properties/react/main_tsx.md b/static/usage/v7/checkbox/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..2fb46fb7ba5
--- /dev/null
+++ b/static/usage/v7/checkbox/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,13 @@
+```tsx
+import React from 'react';
+import { IonCheckbox } 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/v7/checkbox/theming/css-properties/vue.md b/static/usage/v7/checkbox/theming/css-properties/vue.md
new file mode 100644
index 00000000000..7c4f5fd698b
--- /dev/null
+++ b/static/usage/v7/checkbox/theming/css-properties/vue.md
@@ -0,0 +1,26 @@
+```html
+
+ Themed checkbox
+
+
+
+
+
+```
diff --git a/static/usage/v7/chip/basic/angular.md b/static/usage/v7/chip/basic/angular.md
new file mode 100644
index 00000000000..0e9440b7ea8
--- /dev/null
+++ b/static/usage/v7/chip/basic/angular.md
@@ -0,0 +1,5 @@
+```html
+Default
+Disabled
+Outline
+```
diff --git a/static/usage/v7/chip/basic/demo.html b/static/usage/v7/chip/basic/demo.html
new file mode 100644
index 00000000000..df4c6569a13
--- /dev/null
+++ b/static/usage/v7/chip/basic/demo.html
@@ -0,0 +1,27 @@
+
+
+
+
+
+
+ Chip
+
+
+
+
+
+
+
+
+
+
+
+ Default
+ Disabled
+ Outline
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/chip/basic/index.md b/static/usage/v7/chip/basic/index.md
new file mode 100644
index 00000000000..e605cabed8e
--- /dev/null
+++ b/static/usage/v7/chip/basic/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/chip/basic/javascript.md b/static/usage/v7/chip/basic/javascript.md
new file mode 100644
index 00000000000..fb494e84571
--- /dev/null
+++ b/static/usage/v7/chip/basic/javascript.md
@@ -0,0 +1,5 @@
+```html
+Default
+Disabled
+Outline
+```
diff --git a/static/usage/v7/chip/basic/react.md b/static/usage/v7/chip/basic/react.md
new file mode 100644
index 00000000000..cc1989f2d03
--- /dev/null
+++ b/static/usage/v7/chip/basic/react.md
@@ -0,0 +1,14 @@
+```tsx
+import React from 'react';
+import { IonChip } from '@ionic/react';
+function Example() {
+ return (
+ <>
+ Default
+ Disabled
+ Outline
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/chip/basic/vue.md b/static/usage/v7/chip/basic/vue.md
new file mode 100644
index 00000000000..69634b44d3e
--- /dev/null
+++ b/static/usage/v7/chip/basic/vue.md
@@ -0,0 +1,16 @@
+```html
+
+ Default
+ Disabled
+ Outline
+
+
+
+```
diff --git a/static/usage/v7/chip/slots/angular.md b/static/usage/v7/chip/slots/angular.md
new file mode 100644
index 00000000000..75f2e24dd8d
--- /dev/null
+++ b/static/usage/v7/chip/slots/angular.md
@@ -0,0 +1,15 @@
+```html
+
+
+
+
+ Avatar Chip
+
+
+
+
+
+ Icon Chip
+
+
+```
diff --git a/static/usage/v7/chip/slots/demo.html b/static/usage/v7/chip/slots/demo.html
new file mode 100644
index 00000000000..bbf70b2e82f
--- /dev/null
+++ b/static/usage/v7/chip/slots/demo.html
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+ Chip
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Avatar Chip
+
+
+
+
+
+ Icon Chip
+
+
+
+
+ Default
+ Primary
+ Secondary
+ Tertiary
+ Success
+ Warning
+ Danger
+ Light
+ Medium
+ Dark
+
+
+ Default
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/chip/theming/css-properties/index.md b/static/usage/v7/chip/theming/css-properties/index.md
new file mode 100644
index 00000000000..2ce8f542f9c
--- /dev/null
+++ b/static/usage/v7/chip/theming/css-properties/index.md
@@ -0,0 +1,32 @@
+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/chip/theming/css-properties/javascript.md b/static/usage/v7/chip/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..b40912d73a2
--- /dev/null
+++ b/static/usage/v7/chip/theming/css-properties/javascript.md
@@ -0,0 +1,10 @@
+```html
+
+
+Default
+```
diff --git a/static/usage/v7/chip/theming/css-properties/react/main_css.md b/static/usage/v7/chip/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..60dc62c6417
--- /dev/null
+++ b/static/usage/v7/chip/theming/css-properties/react/main_css.md
@@ -0,0 +1,6 @@
+```css
+ion-chip {
+ --background: #00213f;
+ --color: #adefd1;
+}
+```
diff --git a/static/usage/v7/chip/theming/css-properties/react/main_tsx.md b/static/usage/v7/chip/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..b4fc5f12cae
--- /dev/null
+++ b/static/usage/v7/chip/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,11 @@
+```tsx
+import React from 'react';
+import { IonChip } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return Default;
+}
+export default Example;
+```
diff --git a/static/usage/v7/chip/theming/css-properties/vue.md b/static/usage/v7/chip/theming/css-properties/vue.md
new file mode 100644
index 00000000000..7195787bd52
--- /dev/null
+++ b/static/usage/v7/chip/theming/css-properties/vue.md
@@ -0,0 +1,21 @@
+```html
+
+
+
+ Default
+
+
+
+```
diff --git a/static/usage/v7/content/basic/angular.md b/static/usage/v7/content/basic/angular.md
new file mode 100644
index 00000000000..31d6c7b092c
--- /dev/null
+++ b/static/usage/v7/content/basic/angular.md
@@ -0,0 +1,12 @@
+```html
+
+ Heading 1
+ Heading 2
+ Heading 3
+ Heading 4
+ Heading 5
+ Heading 6
+
+ Here's a small text description for the content. Nothing more, nothing less.
+
+```
diff --git a/static/usage/v7/content/basic/demo.html b/static/usage/v7/content/basic/demo.html
new file mode 100644
index 00000000000..14dbe3f5e7d
--- /dev/null
+++ b/static/usage/v7/content/basic/demo.html
@@ -0,0 +1,29 @@
+
+
+
+
+
+
+ Content
+
+
+
+
+
+
+
+
+
+ Heading 1
+ Heading 2
+ Heading 3
+ Heading 4
+ Heading 5
+ Heading 6
+
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/content/basic/index.md b/static/usage/v7/content/basic/index.md
new file mode 100644
index 00000000000..2e49772c97d
--- /dev/null
+++ b/static/usage/v7/content/basic/index.md
@@ -0,0 +1,14 @@
+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/content/basic/javascript.md b/static/usage/v7/content/basic/javascript.md
new file mode 100644
index 00000000000..31d6c7b092c
--- /dev/null
+++ b/static/usage/v7/content/basic/javascript.md
@@ -0,0 +1,12 @@
+```html
+
+ Heading 1
+ Heading 2
+ Heading 3
+ Heading 4
+ Heading 5
+ Heading 6
+
+ Here's a small text description for the content. Nothing more, nothing less.
+
+```
diff --git a/static/usage/v7/content/basic/react.md b/static/usage/v7/content/basic/react.md
new file mode 100644
index 00000000000..2ece824eea4
--- /dev/null
+++ b/static/usage/v7/content/basic/react.md
@@ -0,0 +1,20 @@
+```tsx
+import React from 'react';
+import { IonContent } from '@ionic/react';
+
+function Example() {
+ return (
+
+ Heading 1
+ Heading 2
+ Heading 3
+ Heading 4
+ Heading 5
+ Heading 6
+
+ Here's a small text description for the content. Nothing more, nothing less.
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/content/basic/vue.md b/static/usage/v7/content/basic/vue.md
new file mode 100644
index 00000000000..84e2e35470e
--- /dev/null
+++ b/static/usage/v7/content/basic/vue.md
@@ -0,0 +1,23 @@
+```html
+
+
+ Heading 1
+ Heading 2
+ Heading 3
+ Heading 4
+ Heading 5
+ Heading 6
+
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+
+
+```
diff --git a/static/usage/v7/content/fixed/angular.md b/static/usage/v7/content/fixed/angular.md
new file mode 100644
index 00000000000..178d8338f25
--- /dev/null
+++ b/static/usage/v7/content/fixed/angular.md
@@ -0,0 +1,14 @@
+```html
+
+ Scroll the content and notice that the fixed button does not scroll.
+
+ Normal Button
+ Fixed Button
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.
+ Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique maximus.
+ Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae turpis.
+ Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris condimentum fermentum rutrum.
+ Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.
+
+```
diff --git a/static/usage/v7/content/fixed/angular/example_component_css.md b/static/usage/v7/content/fixed/angular/example_component_css.md
new file mode 100644
index 00000000000..e5931e4d94f
--- /dev/null
+++ b/static/usage/v7/content/fixed/angular/example_component_css.md
@@ -0,0 +1,6 @@
+```css
+ion-button[slot="fixed"] {
+ top: 50%;
+ right: 20px;
+}
+```
diff --git a/static/usage/v7/content/fixed/angular/example_component_html.md b/static/usage/v7/content/fixed/angular/example_component_html.md
new file mode 100644
index 00000000000..178d8338f25
--- /dev/null
+++ b/static/usage/v7/content/fixed/angular/example_component_html.md
@@ -0,0 +1,14 @@
+```html
+
+ Scroll the content and notice that the fixed button does not scroll.
+
+ Normal Button
+ Fixed Button
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.
+ Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique maximus.
+ Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae turpis.
+ Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris condimentum fermentum rutrum.
+ Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.
+
+```
diff --git a/static/usage/v7/content/fixed/demo.html b/static/usage/v7/content/fixed/demo.html
new file mode 100644
index 00000000000..9ea56f755e2
--- /dev/null
+++ b/static/usage/v7/content/fixed/demo.html
@@ -0,0 +1,68 @@
+
+
+
+
+
+
+ Content
+
+
+
+
+
+
+
+
+
+
+
+ Scroll the content and notice that the fixed button does not scroll.
+
+ Normal Button
+ Fixed Button
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim
+ fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce
+ augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada
+ mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris
+ quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam
+ varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet
+ consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit
+ amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus,
+ vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.
+ Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus.
+ Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero
+ odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est,
+ vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in
+ odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor.
+ Etiam lobortis tristique maximus.
+ Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo
+ tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum
+ et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue
+ faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis
+ venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean
+ sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id
+ molestie sed, pretium vitae turpis.
+ Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et
+ sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit
+ amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus.
+ Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum
+ vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus
+ at. Mauris condimentum fermentum rutrum.
+ Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce
+ mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim
+ enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo
+ orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero
+ cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed
+ vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl,
+ egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/content/fixed/index.md b/static/usage/v7/content/fixed/index.md
new file mode 100644
index 00000000000..6ff6db1f65e
--- /dev/null
+++ b/static/usage/v7/content/fixed/index.md
@@ -0,0 +1,34 @@
+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/content/fixed/javascript.md b/static/usage/v7/content/fixed/javascript.md
new file mode 100644
index 00000000000..2a577f1d76a
--- /dev/null
+++ b/static/usage/v7/content/fixed/javascript.md
@@ -0,0 +1,21 @@
+```html
+
+ Scroll the content and notice that the fixed button does not scroll.
+
+ Normal Button
+ Fixed Button
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.
+ Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique maximus.
+ Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae turpis.
+ Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris condimentum fermentum rutrum.
+ Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.
+
+
+
+```
diff --git a/static/usage/v7/content/fixed/react.md b/static/usage/v7/content/fixed/react.md
new file mode 100644
index 00000000000..d8e115e5491
--- /dev/null
+++ b/static/usage/v7/content/fixed/react.md
@@ -0,0 +1,22 @@
+```tsx
+import React from 'react';
+import { IonButton, IonContent } from '@ionic/react';
+
+function Example() {
+ return (
+
+ Scroll the content and notice that the fixed button does not scroll.
+
+ Normal Button
+ Fixed Button
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.
+ Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique maximus.
+ Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae turpis.
+ Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris condimentum fermentum rutrum.
+ Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/content/fixed/react/main_css.md b/static/usage/v7/content/fixed/react/main_css.md
new file mode 100644
index 00000000000..e5931e4d94f
--- /dev/null
+++ b/static/usage/v7/content/fixed/react/main_css.md
@@ -0,0 +1,6 @@
+```css
+ion-button[slot="fixed"] {
+ top: 50%;
+ right: 20px;
+}
+```
diff --git a/static/usage/v7/content/fixed/react/main_tsx.md b/static/usage/v7/content/fixed/react/main_tsx.md
new file mode 100644
index 00000000000..542f79deeb8
--- /dev/null
+++ b/static/usage/v7/content/fixed/react/main_tsx.md
@@ -0,0 +1,24 @@
+```tsx
+import React from 'react';
+import { IonButton, IonContent } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+
+ Scroll the content and notice that the fixed button does not scroll.
+
+ Normal Button
+ Fixed Button
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.
+ Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique maximus.
+ Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae turpis.
+ Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris condimentum fermentum rutrum.
+ Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/content/fixed/vue.md b/static/usage/v7/content/fixed/vue.md
new file mode 100644
index 00000000000..2c44fd0b289
--- /dev/null
+++ b/static/usage/v7/content/fixed/vue.md
@@ -0,0 +1,32 @@
+```html
+
+
+ Scroll the content and notice that the fixed button does not scroll.
+
+ Normal Button
+ Fixed Button
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.
+ Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique maximus.
+ Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae turpis.
+ Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris condimentum fermentum rutrum.
+ Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/content/fullscreen/angular/example_component_css.md b/static/usage/v7/content/fullscreen/angular/example_component_css.md
new file mode 100644
index 00000000000..a62d625ae0a
--- /dev/null
+++ b/static/usage/v7/content/fullscreen/angular/example_component_css.md
@@ -0,0 +1,5 @@
+```css
+ion-toolbar {
+ --opacity: .5
+}
+```
diff --git a/static/usage/v7/content/fullscreen/angular/example_component_html.md b/static/usage/v7/content/fullscreen/angular/example_component_html.md
new file mode 100644
index 00000000000..c5cf5a10dd9
--- /dev/null
+++ b/static/usage/v7/content/fullscreen/angular/example_component_html.md
@@ -0,0 +1,25 @@
+```html
+
+
+
+ Header
+
+
+
+
+ Scroll the content and notice that the text goes behind the header and footer.
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.
+ Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique maximus.
+ Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae turpis.
+ Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris condimentum fermentum rutrum.
+ Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.
+
+
+
+
+ Footer
+
+
+
+```
diff --git a/static/usage/v7/content/fullscreen/demo.html b/static/usage/v7/content/fullscreen/demo.html
new file mode 100644
index 00000000000..9bf752950d5
--- /dev/null
+++ b/static/usage/v7/content/fullscreen/demo.html
@@ -0,0 +1,78 @@
+
+
+
+
+
+
+ Content
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Header
+
+
+
+
+ Scroll the content and notice that the text goes behind the header and footer.
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim
+ fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce
+ augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada
+ mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris
+ quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam
+ varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet
+ consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit
+ amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus,
+ vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.
+ Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus.
+ Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero
+ odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est,
+ vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in
+ odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor.
+ Etiam lobortis tristique maximus.
+ Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo
+ tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum
+ et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue
+ faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis
+ venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean
+ sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id
+ molestie sed, pretium vitae turpis.
+ Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et
+ sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit
+ amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus.
+ Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum
+ vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus
+ at. Mauris condimentum fermentum rutrum.
+ Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce
+ mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim
+ enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo
+ orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero
+ cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed
+ vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl,
+ egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.
+
+
+
+
+ Footer
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/content/fullscreen/index.md b/static/usage/v7/content/fullscreen/index.md
new file mode 100644
index 00000000000..cc20ddf5070
--- /dev/null
+++ b/static/usage/v7/content/fullscreen/index.md
@@ -0,0 +1,34 @@
+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/content/fullscreen/javascript.md b/static/usage/v7/content/fullscreen/javascript.md
new file mode 100644
index 00000000000..f6011fa9b88
--- /dev/null
+++ b/static/usage/v7/content/fullscreen/javascript.md
@@ -0,0 +1,31 @@
+```html
+
+
+
+ Header
+
+
+
+
+ Scroll the content and notice that the text goes behind the header and footer.
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.
+ Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique maximus.
+ Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae turpis.
+ Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris condimentum fermentum rutrum.
+ Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.
+
+
+
+
+ Footer
+
+
+
+
+
+```
diff --git a/static/usage/v7/content/fullscreen/react/main_css.md b/static/usage/v7/content/fullscreen/react/main_css.md
new file mode 100644
index 00000000000..a62d625ae0a
--- /dev/null
+++ b/static/usage/v7/content/fullscreen/react/main_css.md
@@ -0,0 +1,5 @@
+```css
+ion-toolbar {
+ --opacity: .5
+}
+```
diff --git a/static/usage/v7/content/fullscreen/react/main_tsx.md b/static/usage/v7/content/fullscreen/react/main_tsx.md
new file mode 100644
index 00000000000..ca324631897
--- /dev/null
+++ b/static/usage/v7/content/fullscreen/react/main_tsx.md
@@ -0,0 +1,37 @@
+```tsx
+import React from 'react';
+import { IonContent, IonFooter, IonHeader, IonTitle, IonToolbar } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+
+
+
+ Header
+
+
+
+
+ Scroll the content and notice that the text goes behind the header and footer.
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.
+ Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique maximus.
+ Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae turpis.
+ Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris condimentum fermentum rutrum.
+ Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.
+
+
+
+
+ Footer
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/content/fullscreen/vue.md b/static/usage/v7/content/fullscreen/vue.md
new file mode 100644
index 00000000000..e4bd0c3a59f
--- /dev/null
+++ b/static/usage/v7/content/fullscreen/vue.md
@@ -0,0 +1,42 @@
+```html
+
+
+
+
+ Header
+
+
+
+
+ Scroll the content and notice that the text goes behind the header and footer.
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.
+ Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique maximus.
+ Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae turpis.
+ Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris condimentum fermentum rutrum.
+ Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.
+
+
+
+
+ Footer
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/content/header-footer/angular.md b/static/usage/v7/content/header-footer/angular.md
new file mode 100644
index 00000000000..4a177d1d58f
--- /dev/null
+++ b/static/usage/v7/content/header-footer/angular.md
@@ -0,0 +1,26 @@
+```html
+
+
+
+ Header
+
+
+
+
+ Heading 1
+ Heading 2
+ Heading 3
+ Heading 4
+ Heading 5
+ Heading 6
+
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+
+
+ Footer
+
+
+
+```
diff --git a/static/usage/v7/content/header-footer/demo.html b/static/usage/v7/content/header-footer/demo.html
new file mode 100644
index 00000000000..0a39f7a5fa8
--- /dev/null
+++ b/static/usage/v7/content/header-footer/demo.html
@@ -0,0 +1,43 @@
+
+
+
+
+
+
+ Content
+
+
+
+
+
+
+
+
+
+
+
+ Header
+
+
+
+
+ Heading 1
+ Heading 2
+ Heading 3
+ Heading 4
+ Heading 5
+ Heading 6
+
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+
+
+ Footer
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/content/header-footer/index.md b/static/usage/v7/content/header-footer/index.md
new file mode 100644
index 00000000000..d045cac7fa7
--- /dev/null
+++ b/static/usage/v7/content/header-footer/index.md
@@ -0,0 +1,14 @@
+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/content/header-footer/javascript.md b/static/usage/v7/content/header-footer/javascript.md
new file mode 100644
index 00000000000..4a177d1d58f
--- /dev/null
+++ b/static/usage/v7/content/header-footer/javascript.md
@@ -0,0 +1,26 @@
+```html
+
+
+
+ Header
+
+
+
+
+ Heading 1
+ Heading 2
+ Heading 3
+ Heading 4
+ Heading 5
+ Heading 6
+
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+
+
+ Footer
+
+
+
+```
diff --git a/static/usage/v7/content/header-footer/react.md b/static/usage/v7/content/header-footer/react.md
new file mode 100644
index 00000000000..4ffff834f2a
--- /dev/null
+++ b/static/usage/v7/content/header-footer/react.md
@@ -0,0 +1,36 @@
+```tsx
+import React from 'react';
+import { IonContent, IonFooter, IonHeader, IonTitle, IonToolbar } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+
+ Header
+
+
+
+
+ Heading 1
+ Heading 2
+ Heading 3
+ Heading 4
+ Heading 5
+ Heading 6
+
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+
+
+ Footer
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/content/header-footer/vue.md b/static/usage/v7/content/header-footer/vue.md
new file mode 100644
index 00000000000..8bd052a6460
--- /dev/null
+++ b/static/usage/v7/content/header-footer/vue.md
@@ -0,0 +1,37 @@
+```html
+
+
+
+
+ Header
+
+
+
+
+ Heading 1
+ Heading 2
+ Heading 3
+ Heading 4
+ Heading 5
+ Heading 6
+
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+
+
+ Footer
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/content/scroll-events/angular/example_component_html.md b/static/usage/v7/content/scroll-events/angular/example_component_html.md
new file mode 100644
index 00000000000..a1c3aac558f
--- /dev/null
+++ b/static/usage/v7/content/scroll-events/angular/example_component_html.md
@@ -0,0 +1,18 @@
+```html
+
+
+
+ Scroll to fire the scroll events and view them in the console.
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.
+ Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique maximus.
+ Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae turpis.
+ Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris condimentum fermentum rutrum.
+ Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.
+
+```
diff --git a/static/usage/v7/content/scroll-events/angular/example_component_ts.md b/static/usage/v7/content/scroll-events/angular/example_component_ts.md
new file mode 100644
index 00000000000..7e3f7625f57
--- /dev/null
+++ b/static/usage/v7/content/scroll-events/angular/example_component_ts.md
@@ -0,0 +1,22 @@
+```ts
+import { Component } from '@angular/core';
+import { ScrollDetail } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ handleScrollStart() {
+ console.log('scroll start');
+ }
+
+ handleScroll(ev: CustomEvent) {
+ console.log('scroll', ev.detail);
+ }
+
+ handleScrollEnd() {
+ console.log('scroll end');
+ }
+}
+```
diff --git a/static/usage/v7/content/scroll-events/demo.html b/static/usage/v7/content/scroll-events/demo.html
new file mode 100644
index 00000000000..1db71ff8972
--- /dev/null
+++ b/static/usage/v7/content/scroll-events/demo.html
@@ -0,0 +1,69 @@
+
+
+
+
+
+
+ Content
+
+
+
+
+
+
+
+
+
+ Scroll to fire the scroll events and view them in the console.
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim
+ fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce
+ augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada
+ mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris
+ quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam
+ varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet
+ consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit
+ amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus,
+ vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.
+ Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus.
+ Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero
+ odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est,
+ vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in
+ odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor.
+ Etiam lobortis tristique maximus.
+ Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo
+ tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum
+ et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue
+ faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis
+ venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean
+ sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id
+ molestie sed, pretium vitae turpis.
+ Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et
+ sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit
+ amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus.
+ Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum
+ vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus
+ at. Mauris condimentum fermentum rutrum.
+ Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce
+ mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim
+ enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo
+ orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero
+ cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed
+ vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl,
+ egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/content/scroll-events/index.md b/static/usage/v7/content/scroll-events/index.md
new file mode 100644
index 00000000000..d908468b2f5
--- /dev/null
+++ b/static/usage/v7/content/scroll-events/index.md
@@ -0,0 +1,26 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+import react from './react.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/v7/content/scroll-events/javascript.md b/static/usage/v7/content/scroll-events/javascript.md
new file mode 100644
index 00000000000..5cc4e537dd6
--- /dev/null
+++ b/static/usage/v7/content/scroll-events/javascript.md
@@ -0,0 +1,22 @@
+```html
+
+ Scroll to fire the scroll events and view them in the console.
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.
+ Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique maximus.
+ Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae turpis.
+ Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris condimentum fermentum rutrum.
+ Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.
+
+
+
+```
diff --git a/static/usage/v7/content/scroll-events/react.md b/static/usage/v7/content/scroll-events/react.md
new file mode 100644
index 00000000000..ce8ced69807
--- /dev/null
+++ b/static/usage/v7/content/scroll-events/react.md
@@ -0,0 +1,37 @@
+```tsx
+import React from 'react';
+import { IonContent, ScrollDetail } from '@ionic/react';
+
+function Example() {
+ function handleScrollStart() {
+ console.log('scroll start');
+ }
+
+ function handleScroll(ev: CustomEvent) {
+ console.log('scroll', ev.detail);
+ }
+
+ function handleScrollEnd() {
+ console.log('scroll end');
+ }
+
+ return (
+ // Scroll events are disabled by default for content for performance reasons, enable them to listen to them
+
+ Scroll to fire the scroll events and view them in the console.
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.
+ Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique maximus.
+ Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae turpis.
+ Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris condimentum fermentum rutrum.
+ Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/content/scroll-events/vue.md b/static/usage/v7/content/scroll-events/vue.md
new file mode 100644
index 00000000000..2afdcf26682
--- /dev/null
+++ b/static/usage/v7/content/scroll-events/vue.md
@@ -0,0 +1,39 @@
+```html
+
+
+
+ Scroll to fire the scroll events and view them in the console.
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.
+ Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique maximus.
+ Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae turpis.
+ Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris condimentum fermentum rutrum.
+ Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.
+
+
+
+
+```
diff --git a/static/usage/v7/content/scroll-methods/angular/example_component_html.md b/static/usage/v7/content/scroll-methods/angular/example_component_html.md
new file mode 100644
index 00000000000..ffa8c913e3e
--- /dev/null
+++ b/static/usage/v7/content/scroll-methods/angular/example_component_html.md
@@ -0,0 +1,15 @@
+```html
+
+ Click on the buttons to scroll the content.
+
+ Scroll to Bottom
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.
+ Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique maximus.
+ Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae turpis.
+ Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris condimentum fermentum rutrum.
+ Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.
+
+ Scroll to Top
+
+```
diff --git a/static/usage/v7/content/scroll-methods/angular/example_component_ts.md b/static/usage/v7/content/scroll-methods/angular/example_component_ts.md
new file mode 100644
index 00000000000..1975fe3b341
--- /dev/null
+++ b/static/usage/v7/content/scroll-methods/angular/example_component_ts.md
@@ -0,0 +1,24 @@
+```ts
+import { Component, ViewChild } from '@angular/core';
+import { IonContent } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ @ViewChild(IonContent) content: IonContent;
+
+ scrollToBottom() {
+ // Passing a duration to the method makes it so the scroll slowly
+ // goes to the bottom instead of instantly
+ this.content.scrollToBottom(500);
+ }
+
+ scrollToTop() {
+ // Passing a duration to the method makes it so the scroll slowly
+ // goes to the top instead of instantly
+ this.content.scrollToTop(500);
+ }
+}
+```
diff --git a/static/usage/v7/content/scroll-methods/demo.html b/static/usage/v7/content/scroll-methods/demo.html
new file mode 100644
index 00000000000..c72c5300ff5
--- /dev/null
+++ b/static/usage/v7/content/scroll-methods/demo.html
@@ -0,0 +1,78 @@
+
+
+
+
+
+
+ Content
+
+
+
+
+
+
+
+
+
+ Click on the buttons to scroll the content.
+
+ Scroll to Bottom
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim
+ fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce
+ augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada
+ mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris
+ quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam
+ varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet
+ consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit
+ amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus,
+ vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.
+ Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus.
+ Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero
+ odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est,
+ vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in
+ odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor.
+ Etiam lobortis tristique maximus.
+ Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo
+ tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum
+ et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue
+ faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis
+ venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean
+ sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id
+ molestie sed, pretium vitae turpis.
+ Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et
+ sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit
+ amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus.
+ Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum
+ vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus
+ at. Mauris condimentum fermentum rutrum.
+ Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce
+ mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim
+ enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo
+ orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero
+ cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed
+ vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl,
+ egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.
+
+ Scroll to Top
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/content/scroll-methods/index.md b/static/usage/v7/content/scroll-methods/index.md
new file mode 100644
index 00000000000..97e328a25cc
--- /dev/null
+++ b/static/usage/v7/content/scroll-methods/index.md
@@ -0,0 +1,26 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+import react from './react.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/v7/content/scroll-methods/javascript.md b/static/usage/v7/content/scroll-methods/javascript.md
new file mode 100644
index 00000000000..b8f3bb1e13e
--- /dev/null
+++ b/static/usage/v7/content/scroll-methods/javascript.md
@@ -0,0 +1,31 @@
+```html
+
+ Click on the buttons to scroll the content.
+
+ Scroll to Bottom
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.
+ Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique maximus.
+ Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae turpis.
+ Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris condimentum fermentum rutrum.
+ Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.
+
+ Scroll to Top
+
+
+
+```
diff --git a/static/usage/v7/content/scroll-methods/react.md b/static/usage/v7/content/scroll-methods/react.md
new file mode 100644
index 00000000000..9526a8884a4
--- /dev/null
+++ b/static/usage/v7/content/scroll-methods/react.md
@@ -0,0 +1,37 @@
+```tsx
+import React, { createRef } from 'react';
+import { IonButton, IonContent } from '@ionic/react';
+
+function Example() {
+ const contentRef = createRef();
+
+ function scrollToBottom() {
+ // Passing a duration to the method makes it so the scroll slowly
+ // goes to the bottom instead of instantly
+ contentRef.current?.scrollToBottom(500);
+ }
+
+ function scrollToTop() {
+ // Passing a duration to the method makes it so the scroll slowly
+ // goes to the top instead of instantly
+ contentRef.current?.scrollToTop(500);
+ }
+
+ return (
+
+ Click on the buttons to scroll the content.
+
+ Scroll to Bottom
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.
+ Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique maximus.
+ Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae turpis.
+ Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris condimentum fermentum rutrum.
+ Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.
+
+ Scroll to Top
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/content/scroll-methods/vue.md b/static/usage/v7/content/scroll-methods/vue.md
new file mode 100644
index 00000000000..c3e63abb721
--- /dev/null
+++ b/static/usage/v7/content/scroll-methods/vue.md
@@ -0,0 +1,38 @@
+```html
+
+
+ Click on the buttons to scroll the content.
+
+ Scroll to Bottom
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.
+ Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique maximus.
+ Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae turpis.
+ Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris condimentum fermentum rutrum.
+ Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.
+
+ Scroll to Top
+
+
+
+
+```
diff --git a/static/usage/v7/content/theming/colors/angular.md b/static/usage/v7/content/theming/colors/angular.md
new file mode 100644
index 00000000000..4b2489b6dae
--- /dev/null
+++ b/static/usage/v7/content/theming/colors/angular.md
@@ -0,0 +1,38 @@
+```html
+
+ Primary content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+ Secondary content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+ Tertiary content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+ Success content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+ Warning content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+ Danger content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+ Light content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+ Medium content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+ Dark content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+```
diff --git a/static/usage/v7/content/theming/colors/demo.html b/static/usage/v7/content/theming/colors/demo.html
new file mode 100644
index 00000000000..7e9409ec13e
--- /dev/null
+++ b/static/usage/v7/content/theming/colors/demo.html
@@ -0,0 +1,69 @@
+
+
+
+
+
+
+ Content
+
+
+
+
+
+
+
+
+
+
+
+
+ Primary content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+ Secondary content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+ Tertiary content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+ Success content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+ Warning content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+ Danger content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+ Light content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+ Medium content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+ Dark content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
Primary content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+ Secondary content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+ Tertiary content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+ Success content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+ Warning content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+ Danger content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+ Light content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+ Medium content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+ Dark content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+```
diff --git a/static/usage/v7/content/theming/colors/react.md b/static/usage/v7/content/theming/colors/react.md
new file mode 100644
index 00000000000..5a24d44a829
--- /dev/null
+++ b/static/usage/v7/content/theming/colors/react.md
@@ -0,0 +1,48 @@
+```tsx
+import React from 'react';
+import { IonContent } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+ Primary content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+ Secondary content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+ Tertiary content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+ Success content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+ Warning content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+ Danger content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+ Light content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+ Medium content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+ Dark content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/content/theming/colors/vue.md b/static/usage/v7/content/theming/colors/vue.md
new file mode 100644
index 00000000000..1bbcc99834e
--- /dev/null
+++ b/static/usage/v7/content/theming/colors/vue.md
@@ -0,0 +1,49 @@
+```html
+
+
+ Primary content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+ Secondary content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+ Tertiary content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+ Success content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+ Warning content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+ Danger content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+ Light content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+ Medium content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+ Dark content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+
+
+```
diff --git a/static/usage/v7/content/theming/css-properties/angular/example_component_css.md b/static/usage/v7/content/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..be9b9d8063c
--- /dev/null
+++ b/static/usage/v7/content/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,6 @@
+```css
+ion-content {
+ --background: #d31373;
+ --color: #fff;
+}
+```
diff --git a/static/usage/v7/content/theming/css-properties/angular/example_component_html.md b/static/usage/v7/content/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..31d6c7b092c
--- /dev/null
+++ b/static/usage/v7/content/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,12 @@
+```html
+
+ Heading 1
+ Heading 2
+ Heading 3
+ Heading 4
+ Heading 5
+ Heading 6
+
+ Here's a small text description for the content. Nothing more, nothing less.
+
+```
diff --git a/static/usage/v7/content/theming/css-properties/demo.html b/static/usage/v7/content/theming/css-properties/demo.html
new file mode 100644
index 00000000000..aeab8bee49b
--- /dev/null
+++ b/static/usage/v7/content/theming/css-properties/demo.html
@@ -0,0 +1,36 @@
+
+
+
+
+
+
+ Content
+
+
+
+
+
+
+
+
+
+
+
+ Heading 1
+ Heading 2
+ Heading 3
+ Heading 4
+ Heading 5
+ Heading 6
+
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/content/theming/css-properties/index.md b/static/usage/v7/content/theming/css-properties/index.md
new file mode 100644
index 00000000000..54c7fe12094
--- /dev/null
+++ b/static/usage/v7/content/theming/css-properties/index.md
@@ -0,0 +1,34 @@
+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/content/theming/css-properties/javascript.md b/static/usage/v7/content/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..2ad2211af87
--- /dev/null
+++ b/static/usage/v7/content/theming/css-properties/javascript.md
@@ -0,0 +1,19 @@
+```html
+
+ Heading 1
+ Heading 2
+ Heading 3
+ Heading 4
+ Heading 5
+ Heading 6
+
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+
+```
diff --git a/static/usage/v7/content/theming/css-properties/react/main_css.md b/static/usage/v7/content/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..be9b9d8063c
--- /dev/null
+++ b/static/usage/v7/content/theming/css-properties/react/main_css.md
@@ -0,0 +1,6 @@
+```css
+ion-content {
+ --background: #d31373;
+ --color: #fff;
+}
+```
diff --git a/static/usage/v7/content/theming/css-properties/react/main_tsx.md b/static/usage/v7/content/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..33f0e53433b
--- /dev/null
+++ b/static/usage/v7/content/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,22 @@
+```tsx
+import React from 'react';
+import { IonContent } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+
+ Heading 1
+ Heading 2
+ Heading 3
+ Heading 4
+ Heading 5
+ Heading 6
+
+ Here's a small text description for the content. Nothing more, nothing less.
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/content/theming/css-properties/vue.md b/static/usage/v7/content/theming/css-properties/vue.md
new file mode 100644
index 00000000000..09322711dfd
--- /dev/null
+++ b/static/usage/v7/content/theming/css-properties/vue.md
@@ -0,0 +1,30 @@
+```html
+
+
+ Heading 1
+ Heading 2
+ Heading 3
+ Heading 4
+ Heading 5
+ Heading 6
+
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/content/theming/css-shadow-parts/angular/example_component_css.md b/static/usage/v7/content/theming/css-shadow-parts/angular/example_component_css.md
new file mode 100644
index 00000000000..29c3d353879
--- /dev/null
+++ b/static/usage/v7/content/theming/css-shadow-parts/angular/example_component_css.md
@@ -0,0 +1,9 @@
+```css
+ion-content::part(background) {
+ background: #d31373;
+}
+
+ion-content::part(scroll) {
+ color: #fff;
+}
+```
diff --git a/static/usage/v7/content/theming/css-shadow-parts/angular/example_component_html.md b/static/usage/v7/content/theming/css-shadow-parts/angular/example_component_html.md
new file mode 100644
index 00000000000..31d6c7b092c
--- /dev/null
+++ b/static/usage/v7/content/theming/css-shadow-parts/angular/example_component_html.md
@@ -0,0 +1,12 @@
+```html
+
+ Heading 1
+ Heading 2
+ Heading 3
+ Heading 4
+ Heading 5
+ Heading 6
+
+ Here's a small text description for the content. Nothing more, nothing less.
+
+```
diff --git a/static/usage/v7/content/theming/css-shadow-parts/demo.html b/static/usage/v7/content/theming/css-shadow-parts/demo.html
new file mode 100644
index 00000000000..9b15b01757d
--- /dev/null
+++ b/static/usage/v7/content/theming/css-shadow-parts/demo.html
@@ -0,0 +1,39 @@
+
+
+
+
+
+
+ Content
+
+
+
+
+
+
+
+
+
+
+
+ Heading 1
+ Heading 2
+ Heading 3
+ Heading 4
+ Heading 5
+ Heading 6
+
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/content/theming/css-shadow-parts/index.md b/static/usage/v7/content/theming/css-shadow-parts/index.md
new file mode 100644
index 00000000000..ce8ccc6ed3f
--- /dev/null
+++ b/static/usage/v7/content/theming/css-shadow-parts/index.md
@@ -0,0 +1,34 @@
+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/content/theming/css-shadow-parts/javascript.md b/static/usage/v7/content/theming/css-shadow-parts/javascript.md
new file mode 100644
index 00000000000..74124e4fdb3
--- /dev/null
+++ b/static/usage/v7/content/theming/css-shadow-parts/javascript.md
@@ -0,0 +1,22 @@
+```html
+
+ Heading 1
+ Heading 2
+ Heading 3
+ Heading 4
+ Heading 5
+ Heading 6
+
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+
+```
diff --git a/static/usage/v7/content/theming/css-shadow-parts/react/main_css.md b/static/usage/v7/content/theming/css-shadow-parts/react/main_css.md
new file mode 100644
index 00000000000..29c3d353879
--- /dev/null
+++ b/static/usage/v7/content/theming/css-shadow-parts/react/main_css.md
@@ -0,0 +1,9 @@
+```css
+ion-content::part(background) {
+ background: #d31373;
+}
+
+ion-content::part(scroll) {
+ color: #fff;
+}
+```
diff --git a/static/usage/v7/content/theming/css-shadow-parts/react/main_tsx.md b/static/usage/v7/content/theming/css-shadow-parts/react/main_tsx.md
new file mode 100644
index 00000000000..33f0e53433b
--- /dev/null
+++ b/static/usage/v7/content/theming/css-shadow-parts/react/main_tsx.md
@@ -0,0 +1,22 @@
+```tsx
+import React from 'react';
+import { IonContent } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+
+ Heading 1
+ Heading 2
+ Heading 3
+ Heading 4
+ Heading 5
+ Heading 6
+
+ Here's a small text description for the content. Nothing more, nothing less.
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/content/theming/css-shadow-parts/vue.md b/static/usage/v7/content/theming/css-shadow-parts/vue.md
new file mode 100644
index 00000000000..129f3ec615a
--- /dev/null
+++ b/static/usage/v7/content/theming/css-shadow-parts/vue.md
@@ -0,0 +1,33 @@
+```html
+
+
+ Heading 1
+ Heading 2
+ Heading 3
+ Heading 4
+ Heading 5
+ Heading 6
+
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/datetime-button/basic/angular.md b/static/usage/v7/datetime-button/basic/angular.md
new file mode 100644
index 00000000000..80a6ffe3724
--- /dev/null
+++ b/static/usage/v7/datetime-button/basic/angular.md
@@ -0,0 +1,9 @@
+```html
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/datetime-button/basic/demo.html b/static/usage/v7/datetime-button/basic/demo.html
new file mode 100644
index 00000000000..73f3f9b1ab7
--- /dev/null
+++ b/static/usage/v7/datetime-button/basic/demo.html
@@ -0,0 +1,33 @@
+
+
+
+
+
+
+ Datetime
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/datetime-button/basic/index.md b/static/usage/v7/datetime-button/basic/index.md
new file mode 100644
index 00000000000..a55a9640c0f
--- /dev/null
+++ b/static/usage/v7/datetime-button/basic/index.md
@@ -0,0 +1,13 @@
+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/datetime-button/basic/javascript.md b/static/usage/v7/datetime-button/basic/javascript.md
new file mode 100644
index 00000000000..3b39203bb90
--- /dev/null
+++ b/static/usage/v7/datetime-button/basic/javascript.md
@@ -0,0 +1,7 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v7/datetime-button/basic/react.md b/static/usage/v7/datetime-button/basic/react.md
new file mode 100644
index 00000000000..90eaaba82af
--- /dev/null
+++ b/static/usage/v7/datetime-button/basic/react.md
@@ -0,0 +1,16 @@
+```tsx
+import React from 'react';
+import { IonDatetime, IonDatetimeButton, IonModal } from '@ionic/react';
+function Example() {
+ return (
+ <>
+
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/datetime-button/basic/vue.md b/static/usage/v7/datetime-button/basic/vue.md
new file mode 100644
index 00000000000..1272d768b88
--- /dev/null
+++ b/static/usage/v7/datetime-button/basic/vue.md
@@ -0,0 +1,18 @@
+```html
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/datetime/basic/angular.md b/static/usage/v7/datetime/basic/angular.md
new file mode 100644
index 00000000000..676d4c61c18
--- /dev/null
+++ b/static/usage/v7/datetime/basic/angular.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v7/datetime/basic/demo.html b/static/usage/v7/datetime/basic/demo.html
new file mode 100644
index 00000000000..1e12e6d24fb
--- /dev/null
+++ b/static/usage/v7/datetime/basic/demo.html
@@ -0,0 +1,33 @@
+
+
+
+
+
+
+ Datetime
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v7/datetime/basic/index.md b/static/usage/v7/datetime/basic/index.md
new file mode 100644
index 00000000000..99e893af493
--- /dev/null
+++ b/static/usage/v7/datetime/basic/index.md
@@ -0,0 +1,13 @@
+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/datetime/basic/javascript.md b/static/usage/v7/datetime/basic/javascript.md
new file mode 100644
index 00000000000..676d4c61c18
--- /dev/null
+++ b/static/usage/v7/datetime/basic/javascript.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v7/datetime/basic/react.md b/static/usage/v7/datetime/basic/react.md
new file mode 100644
index 00000000000..fe17ddda39b
--- /dev/null
+++ b/static/usage/v7/datetime/basic/react.md
@@ -0,0 +1,8 @@
+```tsx
+import React from 'react';
+import { IonDatetime } from '@ionic/react';
+function Example() {
+ return ;
+}
+export default Example;
+```
diff --git a/static/usage/v7/datetime/basic/vue.md b/static/usage/v7/datetime/basic/vue.md
new file mode 100644
index 00000000000..cc68b9ab44a
--- /dev/null
+++ b/static/usage/v7/datetime/basic/vue.md
@@ -0,0 +1,14 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v7/datetime/buttons/customizing-button-texts/angular.md b/static/usage/v7/datetime/buttons/customizing-button-texts/angular.md
new file mode 100644
index 00000000000..f4dd937826d
--- /dev/null
+++ b/static/usage/v7/datetime/buttons/customizing-button-texts/angular.md
@@ -0,0 +1,8 @@
+```html
+
+
+```
diff --git a/static/usage/v7/datetime/buttons/customizing-button-texts/demo.html b/static/usage/v7/datetime/buttons/customizing-button-texts/demo.html
new file mode 100644
index 00000000000..44074047aca
--- /dev/null
+++ b/static/usage/v7/datetime/buttons/customizing-button-texts/demo.html
@@ -0,0 +1,30 @@
+
+
+
+
+
+
+ Datetime
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/datetime/buttons/customizing-button-texts/index.md b/static/usage/v7/datetime/buttons/customizing-button-texts/index.md
new file mode 100644
index 00000000000..7b03b2ff8f7
--- /dev/null
+++ b/static/usage/v7/datetime/buttons/customizing-button-texts/index.md
@@ -0,0 +1,13 @@
+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/datetime/buttons/customizing-button-texts/javascript.md b/static/usage/v7/datetime/buttons/customizing-button-texts/javascript.md
new file mode 100644
index 00000000000..de572d57a2f
--- /dev/null
+++ b/static/usage/v7/datetime/buttons/customizing-button-texts/javascript.md
@@ -0,0 +1,7 @@
+```html
+
+```
diff --git a/static/usage/v7/datetime/buttons/customizing-button-texts/react.md b/static/usage/v7/datetime/buttons/customizing-button-texts/react.md
new file mode 100644
index 00000000000..25a59a34170
--- /dev/null
+++ b/static/usage/v7/datetime/buttons/customizing-button-texts/react.md
@@ -0,0 +1,15 @@
+```tsx
+import React, { useRef } from 'react';
+import { IonDatetime } from '@ionic/react';
+function Example() {
+ return (
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/datetime/buttons/customizing-button-texts/vue.md b/static/usage/v7/datetime/buttons/customizing-button-texts/vue.md
new file mode 100644
index 00000000000..2afdb6fe9a8
--- /dev/null
+++ b/static/usage/v7/datetime/buttons/customizing-button-texts/vue.md
@@ -0,0 +1,18 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v7/datetime/buttons/customizing-buttons/angular.md b/static/usage/v7/datetime/buttons/customizing-buttons/angular.md
new file mode 100644
index 00000000000..c5f1c5d8b9f
--- /dev/null
+++ b/static/usage/v7/datetime/buttons/customizing-buttons/angular.md
@@ -0,0 +1,9 @@
+```html
+
+
+ Reset
+ Never mind
+ All Set
+
+
+```
diff --git a/static/usage/v7/datetime/buttons/customizing-buttons/demo.html b/static/usage/v7/datetime/buttons/customizing-buttons/demo.html
new file mode 100644
index 00000000000..d0ce780da3d
--- /dev/null
+++ b/static/usage/v7/datetime/buttons/customizing-buttons/demo.html
@@ -0,0 +1,40 @@
+
+
+
+
+
+
+ Datetime
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Reset
+ Never mind
+ All Set
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/datetime/buttons/customizing-buttons/index.md b/static/usage/v7/datetime/buttons/customizing-buttons/index.md
new file mode 100644
index 00000000000..4224357f528
--- /dev/null
+++ b/static/usage/v7/datetime/buttons/customizing-buttons/index.md
@@ -0,0 +1,13 @@
+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/datetime/buttons/customizing-buttons/javascript.md b/static/usage/v7/datetime/buttons/customizing-buttons/javascript.md
new file mode 100644
index 00000000000..06ad3d83291
--- /dev/null
+++ b/static/usage/v7/datetime/buttons/customizing-buttons/javascript.md
@@ -0,0 +1,13 @@
+```html
+
+
+ Reset
+ Never mind
+ All Set
+
+
+
+
+```
diff --git a/static/usage/v7/datetime/buttons/customizing-buttons/react.md b/static/usage/v7/datetime/buttons/customizing-buttons/react.md
new file mode 100644
index 00000000000..6c47f3d800c
--- /dev/null
+++ b/static/usage/v7/datetime/buttons/customizing-buttons/react.md
@@ -0,0 +1,26 @@
+```tsx
+import React, { useRef } from 'react';
+import { IonButtons, IonButton, IonDatetime } from '@ionic/react';
+function Example() {
+ const datetime = useRef(null);
+ const reset = () => {
+ datetime.current?.reset();
+ }
+ const cancel = () => {
+ datetime.current?.cancel();
+ }
+ const confirm = () => {
+ datetime.current?.confirm();
+ }
+ return (
+
+
+ Reset
+ Never mind
+ All Set
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/datetime/buttons/customizing-buttons/vue.md b/static/usage/v7/datetime/buttons/customizing-buttons/vue.md
new file mode 100644
index 00000000000..87d19a3754b
--- /dev/null
+++ b/static/usage/v7/datetime/buttons/customizing-buttons/vue.md
@@ -0,0 +1,27 @@
+```html
+
+
+
+ Reset
+ Never mind
+ All Set
+
+
+
+
+
+```
diff --git a/static/usage/v7/datetime/buttons/showing-confirmation-buttons/angular.md b/static/usage/v7/datetime/buttons/showing-confirmation-buttons/angular.md
new file mode 100644
index 00000000000..bf3bb712166
--- /dev/null
+++ b/static/usage/v7/datetime/buttons/showing-confirmation-buttons/angular.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v7/datetime/buttons/showing-confirmation-buttons/demo.html b/static/usage/v7/datetime/buttons/showing-confirmation-buttons/demo.html
new file mode 100644
index 00000000000..54b26b53f90
--- /dev/null
+++ b/static/usage/v7/datetime/buttons/showing-confirmation-buttons/demo.html
@@ -0,0 +1,30 @@
+
+
+
+
+
+
+ Datetime
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/datetime/buttons/showing-confirmation-buttons/index.md b/static/usage/v7/datetime/buttons/showing-confirmation-buttons/index.md
new file mode 100644
index 00000000000..2510a15e899
--- /dev/null
+++ b/static/usage/v7/datetime/buttons/showing-confirmation-buttons/index.md
@@ -0,0 +1,13 @@
+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/datetime/buttons/showing-confirmation-buttons/javascript.md b/static/usage/v7/datetime/buttons/showing-confirmation-buttons/javascript.md
new file mode 100644
index 00000000000..0c8a20f6672
--- /dev/null
+++ b/static/usage/v7/datetime/buttons/showing-confirmation-buttons/javascript.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v7/datetime/buttons/showing-confirmation-buttons/react.md b/static/usage/v7/datetime/buttons/showing-confirmation-buttons/react.md
new file mode 100644
index 00000000000..4faa415f624
--- /dev/null
+++ b/static/usage/v7/datetime/buttons/showing-confirmation-buttons/react.md
@@ -0,0 +1,10 @@
+```tsx
+import React from 'react';
+import { IonDatetime } from '@ionic/react';
+function Example() {
+ return (
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/datetime/buttons/showing-confirmation-buttons/vue.md b/static/usage/v7/datetime/buttons/showing-confirmation-buttons/vue.md
new file mode 100644
index 00000000000..196d89fbf4d
--- /dev/null
+++ b/static/usage/v7/datetime/buttons/showing-confirmation-buttons/vue.md
@@ -0,0 +1,14 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v7/datetime/date-constraints/advanced/angular/example_component_html.md b/static/usage/v7/datetime/date-constraints/advanced/angular/example_component_html.md
new file mode 100644
index 00000000000..3ceed6383ae
--- /dev/null
+++ b/static/usage/v7/datetime/date-constraints/advanced/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v7/datetime/date-constraints/advanced/angular/example_component_ts.md b/static/usage/v7/datetime/date-constraints/advanced/angular/example_component_ts.md
new file mode 100644
index 00000000000..3021390e188
--- /dev/null
+++ b/static/usage/v7/datetime/date-constraints/advanced/angular/example_component_ts.md
@@ -0,0 +1,20 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ isWeekday = (dateString: string) => {
+ const date = new Date(dateString);
+ const utcDay = date.getUTCDay();
+
+ /**
+ * Date will be enabled if it is not
+ * Sunday or Saturday
+ */
+ return utcDay !== 0 && utcDay !== 6;
+ };
+}
+```
diff --git a/static/usage/v7/datetime/date-constraints/advanced/demo.html b/static/usage/v7/datetime/date-constraints/advanced/demo.html
new file mode 100644
index 00000000000..b7650f3740d
--- /dev/null
+++ b/static/usage/v7/datetime/date-constraints/advanced/demo.html
@@ -0,0 +1,43 @@
+
+
+
+
+
+
+ Datetime
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/datetime/date-constraints/advanced/index.md b/static/usage/v7/datetime/date-constraints/advanced/index.md
new file mode 100644
index 00000000000..4e3dba9ca14
--- /dev/null
+++ b/static/usage/v7/datetime/date-constraints/advanced/index.md
@@ -0,0 +1,25 @@
+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_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/v7/datetime/date-constraints/advanced/javascript.md b/static/usage/v7/datetime/date-constraints/advanced/javascript.md
new file mode 100644
index 00000000000..b14ba47ffbe
--- /dev/null
+++ b/static/usage/v7/datetime/date-constraints/advanced/javascript.md
@@ -0,0 +1,17 @@
+```html
+
+
+
+```
diff --git a/static/usage/v7/datetime/date-constraints/advanced/react.md b/static/usage/v7/datetime/date-constraints/advanced/react.md
new file mode 100644
index 00000000000..925f97f34cc
--- /dev/null
+++ b/static/usage/v7/datetime/date-constraints/advanced/react.md
@@ -0,0 +1,21 @@
+```tsx
+import React from 'react';
+import { IonDatetime } from '@ionic/react';
+function Example() {
+ const isWeekday = (dateString: string) => {
+ const date = new Date(dateString);
+ const utcDay = date.getUTCDay();
+
+ /**
+ * Date will be enabled if it is not
+ * Sunday or Saturday
+ */
+ return utcDay !== 0 && utcDay !== 6;
+ }
+
+ return (
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/datetime/date-constraints/advanced/vue.md b/static/usage/v7/datetime/date-constraints/advanced/vue.md
new file mode 100644
index 00000000000..3dd1a8dc526
--- /dev/null
+++ b/static/usage/v7/datetime/date-constraints/advanced/vue.md
@@ -0,0 +1,28 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v7/datetime/date-constraints/max-min/angular.md b/static/usage/v7/datetime/date-constraints/max-min/angular.md
new file mode 100644
index 00000000000..58583fe712d
--- /dev/null
+++ b/static/usage/v7/datetime/date-constraints/max-min/angular.md
@@ -0,0 +1,7 @@
+```html
+
+```
diff --git a/static/usage/v7/datetime/date-constraints/max-min/demo.html b/static/usage/v7/datetime/date-constraints/max-min/demo.html
new file mode 100644
index 00000000000..b1f9e57810d
--- /dev/null
+++ b/static/usage/v7/datetime/date-constraints/max-min/demo.html
@@ -0,0 +1,29 @@
+
+
+
+
+
+
+ Datetime
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/datetime/date-constraints/max-min/index.md b/static/usage/v7/datetime/date-constraints/max-min/index.md
new file mode 100644
index 00000000000..808fa7bf756
--- /dev/null
+++ b/static/usage/v7/datetime/date-constraints/max-min/index.md
@@ -0,0 +1,13 @@
+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/datetime/date-constraints/max-min/javascript.md b/static/usage/v7/datetime/date-constraints/max-min/javascript.md
new file mode 100644
index 00000000000..58583fe712d
--- /dev/null
+++ b/static/usage/v7/datetime/date-constraints/max-min/javascript.md
@@ -0,0 +1,7 @@
+```html
+
+```
diff --git a/static/usage/v7/datetime/date-constraints/max-min/react.md b/static/usage/v7/datetime/date-constraints/max-min/react.md
new file mode 100644
index 00000000000..356cf7b117a
--- /dev/null
+++ b/static/usage/v7/datetime/date-constraints/max-min/react.md
@@ -0,0 +1,14 @@
+```tsx
+import React from 'react';
+import { IonDatetime } from '@ionic/react';
+function Example() {
+ return (
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/datetime/date-constraints/max-min/vue.md b/static/usage/v7/datetime/date-constraints/max-min/vue.md
new file mode 100644
index 00000000000..a0d236a8604
--- /dev/null
+++ b/static/usage/v7/datetime/date-constraints/max-min/vue.md
@@ -0,0 +1,18 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v7/datetime/date-constraints/values/angular.md b/static/usage/v7/datetime/date-constraints/values/angular.md
new file mode 100644
index 00000000000..de86842994a
--- /dev/null
+++ b/static/usage/v7/datetime/date-constraints/values/angular.md
@@ -0,0 +1,6 @@
+```html
+
+```
diff --git a/static/usage/v7/datetime/date-constraints/values/demo.html b/static/usage/v7/datetime/date-constraints/values/demo.html
new file mode 100644
index 00000000000..ba560da4969
--- /dev/null
+++ b/static/usage/v7/datetime/date-constraints/values/demo.html
@@ -0,0 +1,29 @@
+
+
+
+
+
+
+ Datetime
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/datetime/date-constraints/values/index.md b/static/usage/v7/datetime/date-constraints/values/index.md
new file mode 100644
index 00000000000..dc33ed9ac87
--- /dev/null
+++ b/static/usage/v7/datetime/date-constraints/values/index.md
@@ -0,0 +1,13 @@
+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/datetime/date-constraints/values/javascript.md b/static/usage/v7/datetime/date-constraints/values/javascript.md
new file mode 100644
index 00000000000..5081a44f6f5
--- /dev/null
+++ b/static/usage/v7/datetime/date-constraints/values/javascript.md
@@ -0,0 +1,6 @@
+```html
+
+```
diff --git a/static/usage/v7/datetime/date-constraints/values/react.md b/static/usage/v7/datetime/date-constraints/values/react.md
new file mode 100644
index 00000000000..38328d17045
--- /dev/null
+++ b/static/usage/v7/datetime/date-constraints/values/react.md
@@ -0,0 +1,13 @@
+```tsx
+import React from 'react';
+import { IonDatetime } from '@ionic/react';
+function Example() {
+ return (
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/datetime/date-constraints/values/vue.md b/static/usage/v7/datetime/date-constraints/values/vue.md
new file mode 100644
index 00000000000..743cbb9e541
--- /dev/null
+++ b/static/usage/v7/datetime/date-constraints/values/vue.md
@@ -0,0 +1,17 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v7/datetime/highlightedDates/array/angular/example_component_html.md b/static/usage/v7/datetime/highlightedDates/array/angular/example_component_html.md
new file mode 100644
index 00000000000..46de9b8c9a6
--- /dev/null
+++ b/static/usage/v7/datetime/highlightedDates/array/angular/example_component_html.md
@@ -0,0 +1,7 @@
+```html
+
+```
diff --git a/static/usage/v7/datetime/highlightedDates/array/angular/example_component_ts.md b/static/usage/v7/datetime/highlightedDates/array/angular/example_component_ts.md
new file mode 100644
index 00000000000..4b46ab4c705
--- /dev/null
+++ b/static/usage/v7/datetime/highlightedDates/array/angular/example_component_ts.md
@@ -0,0 +1,32 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ highlightedDates = [
+ {
+ date: '2023-01-05',
+ textColor: '#800080',
+ backgroundColor: '#ffc0cb',
+ },
+ {
+ date: '2023-01-10',
+ textColor: '#09721b',
+ backgroundColor: '#c8e5d0',
+ },
+ {
+ date: '2023-01-20',
+ textColor: 'var(--ion-color-secondary-contrast)',
+ backgroundColor: 'var(--ion-color-secondary)',
+ },
+ {
+ date: '2023-01-23',
+ textColor: 'rgb(68, 10, 184)',
+ backgroundColor: 'rgb(211, 200, 229)'
+ }
+ ];
+}
+```
diff --git a/static/usage/v7/datetime/highlightedDates/array/demo.html b/static/usage/v7/datetime/highlightedDates/array/demo.html
new file mode 100644
index 00000000000..d8faeba5b8b
--- /dev/null
+++ b/static/usage/v7/datetime/highlightedDates/array/demo.html
@@ -0,0 +1,55 @@
+
+
+
+
+
+
+ Datetime
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/datetime/highlightedDates/array/index.md b/static/usage/v7/datetime/highlightedDates/array/index.md
new file mode 100644
index 00000000000..6438d84fcf3
--- /dev/null
+++ b/static/usage/v7/datetime/highlightedDates/array/index.md
@@ -0,0 +1,25 @@
+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_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/v7/datetime/highlightedDates/array/javascript.md b/static/usage/v7/datetime/highlightedDates/array/javascript.md
new file mode 100644
index 00000000000..5a702fbfab1
--- /dev/null
+++ b/static/usage/v7/datetime/highlightedDates/array/javascript.md
@@ -0,0 +1,29 @@
+```html
+
+
+
+```
diff --git a/static/usage/v7/datetime/highlightedDates/array/react.md b/static/usage/v7/datetime/highlightedDates/array/react.md
new file mode 100644
index 00000000000..a9ef5c776d9
--- /dev/null
+++ b/static/usage/v7/datetime/highlightedDates/array/react.md
@@ -0,0 +1,35 @@
+```tsx
+import React from 'react';
+import { IonDatetime } from '@ionic/react';
+function Example() {
+ return (
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/datetime/highlightedDates/array/vue.md b/static/usage/v7/datetime/highlightedDates/array/vue.md
new file mode 100644
index 00000000000..62dbec39055
--- /dev/null
+++ b/static/usage/v7/datetime/highlightedDates/array/vue.md
@@ -0,0 +1,44 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v7/datetime/highlightedDates/callback/angular/example_component_html.md b/static/usage/v7/datetime/highlightedDates/callback/angular/example_component_html.md
new file mode 100644
index 00000000000..634090ab0ab
--- /dev/null
+++ b/static/usage/v7/datetime/highlightedDates/callback/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v7/datetime/highlightedDates/callback/angular/example_component_ts.md b/static/usage/v7/datetime/highlightedDates/callback/angular/example_component_ts.md
new file mode 100644
index 00000000000..7186ae3cc64
--- /dev/null
+++ b/static/usage/v7/datetime/highlightedDates/callback/angular/example_component_ts.md
@@ -0,0 +1,30 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ highlightedDates = (isoString) => {
+ const date = new Date(isoString);
+ const utcDay = date.getUTCDate();
+
+ if(utcDay % 5 === 0) {
+ return {
+ textColor: '#800080',
+ backgroundColor: '#ffc0cb',
+ };
+ }
+
+ if(utcDay % 3 === 0) {
+ return {
+ textColor: 'var(--ion-color-secondary-contrast)',
+ backgroundColor: 'var(--ion-color-secondary)',
+ };
+ }
+
+ return undefined;
+ };
+}
+```
diff --git a/static/usage/v7/datetime/highlightedDates/callback/demo.html b/static/usage/v7/datetime/highlightedDates/callback/demo.html
new file mode 100644
index 00000000000..50c62e09c5f
--- /dev/null
+++ b/static/usage/v7/datetime/highlightedDates/callback/demo.html
@@ -0,0 +1,53 @@
+
+
+
+
+
+
+ Datetime
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/datetime/highlightedDates/callback/index.md b/static/usage/v7/datetime/highlightedDates/callback/index.md
new file mode 100644
index 00000000000..106f90210cf
--- /dev/null
+++ b/static/usage/v7/datetime/highlightedDates/callback/index.md
@@ -0,0 +1,25 @@
+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_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/v7/datetime/highlightedDates/callback/javascript.md b/static/usage/v7/datetime/highlightedDates/callback/javascript.md
new file mode 100644
index 00000000000..270967cccd8
--- /dev/null
+++ b/static/usage/v7/datetime/highlightedDates/callback/javascript.md
@@ -0,0 +1,27 @@
+```html
+
+
+
+```
diff --git a/static/usage/v7/datetime/highlightedDates/callback/react.md b/static/usage/v7/datetime/highlightedDates/callback/react.md
new file mode 100644
index 00000000000..6830e55eeff
--- /dev/null
+++ b/static/usage/v7/datetime/highlightedDates/callback/react.md
@@ -0,0 +1,32 @@
+```tsx
+import React from 'react';
+import { IonDatetime } from '@ionic/react';
+function Example() {
+ return (
+ {
+ const date = new Date(isoString);
+ const utcDay = date.getUTCDate();
+
+ if(utcDay % 5 === 0) {
+ return {
+ textColor: '#800080',
+ backgroundColor: '#ffc0cb',
+ };
+ }
+
+ if(utcDay % 3 === 0) {
+ return {
+ textColor: 'var(--ion-color-secondary-contrast)',
+ backgroundColor: 'var(--ion-color-secondary)',
+ };
+ }
+
+ return undefined;
+ }}
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/datetime/highlightedDates/callback/vue.md b/static/usage/v7/datetime/highlightedDates/callback/vue.md
new file mode 100644
index 00000000000..54873e03eaa
--- /dev/null
+++ b/static/usage/v7/datetime/highlightedDates/callback/vue.md
@@ -0,0 +1,38 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v7/datetime/localization/custom-locale/angular.md b/static/usage/v7/datetime/localization/custom-locale/angular.md
new file mode 100644
index 00000000000..c3697585c67
--- /dev/null
+++ b/static/usage/v7/datetime/localization/custom-locale/angular.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v7/datetime/localization/custom-locale/demo.html b/static/usage/v7/datetime/localization/custom-locale/demo.html
new file mode 100644
index 00000000000..70e266f3402
--- /dev/null
+++ b/static/usage/v7/datetime/localization/custom-locale/demo.html
@@ -0,0 +1,29 @@
+
+
+
+
+
+
+ Datetime
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/datetime/localization/custom-locale/index.md b/static/usage/v7/datetime/localization/custom-locale/index.md
new file mode 100644
index 00000000000..566363cc089
--- /dev/null
+++ b/static/usage/v7/datetime/localization/custom-locale/index.md
@@ -0,0 +1,13 @@
+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/datetime/localization/custom-locale/javascript.md b/static/usage/v7/datetime/localization/custom-locale/javascript.md
new file mode 100644
index 00000000000..c3697585c67
--- /dev/null
+++ b/static/usage/v7/datetime/localization/custom-locale/javascript.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v7/datetime/localization/custom-locale/react.md b/static/usage/v7/datetime/localization/custom-locale/react.md
new file mode 100644
index 00000000000..729e42be9b8
--- /dev/null
+++ b/static/usage/v7/datetime/localization/custom-locale/react.md
@@ -0,0 +1,10 @@
+```tsx
+import React from 'react';
+import { IonDatetime } from '@ionic/react';
+function Example() {
+ return (
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/datetime/localization/custom-locale/vue.md b/static/usage/v7/datetime/localization/custom-locale/vue.md
new file mode 100644
index 00000000000..8a3712a255e
--- /dev/null
+++ b/static/usage/v7/datetime/localization/custom-locale/vue.md
@@ -0,0 +1,14 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v7/datetime/localization/first-day-of-week/angular.md b/static/usage/v7/datetime/localization/first-day-of-week/angular.md
new file mode 100644
index 00000000000..2281060074e
--- /dev/null
+++ b/static/usage/v7/datetime/localization/first-day-of-week/angular.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v7/datetime/localization/first-day-of-week/demo.html b/static/usage/v7/datetime/localization/first-day-of-week/demo.html
new file mode 100644
index 00000000000..ce555ed4b74
--- /dev/null
+++ b/static/usage/v7/datetime/localization/first-day-of-week/demo.html
@@ -0,0 +1,29 @@
+
+
+
+
+
+
+ Datetime
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/datetime/localization/first-day-of-week/index.md b/static/usage/v7/datetime/localization/first-day-of-week/index.md
new file mode 100644
index 00000000000..389010b4302
--- /dev/null
+++ b/static/usage/v7/datetime/localization/first-day-of-week/index.md
@@ -0,0 +1,13 @@
+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/datetime/localization/first-day-of-week/javascript.md b/static/usage/v7/datetime/localization/first-day-of-week/javascript.md
new file mode 100644
index 00000000000..420402e2d9c
--- /dev/null
+++ b/static/usage/v7/datetime/localization/first-day-of-week/javascript.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v7/datetime/localization/first-day-of-week/react.md b/static/usage/v7/datetime/localization/first-day-of-week/react.md
new file mode 100644
index 00000000000..d15a99abb10
--- /dev/null
+++ b/static/usage/v7/datetime/localization/first-day-of-week/react.md
@@ -0,0 +1,10 @@
+```tsx
+import React from 'react';
+import { IonDatetime } from '@ionic/react';
+function Example() {
+ return (
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/datetime/localization/first-day-of-week/vue.md b/static/usage/v7/datetime/localization/first-day-of-week/vue.md
new file mode 100644
index 00000000000..71c24fd72be
--- /dev/null
+++ b/static/usage/v7/datetime/localization/first-day-of-week/vue.md
@@ -0,0 +1,14 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v7/datetime/localization/hour-cycle/angular.md b/static/usage/v7/datetime/localization/hour-cycle/angular.md
new file mode 100644
index 00000000000..aeb27d6152b
--- /dev/null
+++ b/static/usage/v7/datetime/localization/hour-cycle/angular.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v7/datetime/localization/hour-cycle/demo.html b/static/usage/v7/datetime/localization/hour-cycle/demo.html
new file mode 100644
index 00000000000..db65b072c82
--- /dev/null
+++ b/static/usage/v7/datetime/localization/hour-cycle/demo.html
@@ -0,0 +1,29 @@
+
+
+
+
+
+
+ Datetime
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/datetime/localization/hour-cycle/index.md b/static/usage/v7/datetime/localization/hour-cycle/index.md
new file mode 100644
index 00000000000..5ffaf29bb41
--- /dev/null
+++ b/static/usage/v7/datetime/localization/hour-cycle/index.md
@@ -0,0 +1,13 @@
+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/datetime/localization/hour-cycle/javascript.md b/static/usage/v7/datetime/localization/hour-cycle/javascript.md
new file mode 100644
index 00000000000..5f3638f13aa
--- /dev/null
+++ b/static/usage/v7/datetime/localization/hour-cycle/javascript.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v7/datetime/localization/hour-cycle/react.md b/static/usage/v7/datetime/localization/hour-cycle/react.md
new file mode 100644
index 00000000000..fc2887e67f8
--- /dev/null
+++ b/static/usage/v7/datetime/localization/hour-cycle/react.md
@@ -0,0 +1,10 @@
+```tsx
+import React from 'react';
+import { IonDatetime } from '@ionic/react';
+function Example() {
+ return (
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/datetime/localization/hour-cycle/vue.md b/static/usage/v7/datetime/localization/hour-cycle/vue.md
new file mode 100644
index 00000000000..b8767c6c2db
--- /dev/null
+++ b/static/usage/v7/datetime/localization/hour-cycle/vue.md
@@ -0,0 +1,14 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v7/datetime/localization/locale-extension-tags/angular.md b/static/usage/v7/datetime/localization/locale-extension-tags/angular.md
new file mode 100644
index 00000000000..828f85eeb0a
--- /dev/null
+++ b/static/usage/v7/datetime/localization/locale-extension-tags/angular.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v7/datetime/localization/locale-extension-tags/demo.html b/static/usage/v7/datetime/localization/locale-extension-tags/demo.html
new file mode 100644
index 00000000000..6d7328eddf6
--- /dev/null
+++ b/static/usage/v7/datetime/localization/locale-extension-tags/demo.html
@@ -0,0 +1,29 @@
+
+
+
+
+
+
+ Datetime
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/datetime/localization/locale-extension-tags/index.md b/static/usage/v7/datetime/localization/locale-extension-tags/index.md
new file mode 100644
index 00000000000..33c92262f9e
--- /dev/null
+++ b/static/usage/v7/datetime/localization/locale-extension-tags/index.md
@@ -0,0 +1,13 @@
+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/datetime/localization/locale-extension-tags/javascript.md b/static/usage/v7/datetime/localization/locale-extension-tags/javascript.md
new file mode 100644
index 00000000000..828f85eeb0a
--- /dev/null
+++ b/static/usage/v7/datetime/localization/locale-extension-tags/javascript.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v7/datetime/localization/locale-extension-tags/react.md b/static/usage/v7/datetime/localization/locale-extension-tags/react.md
new file mode 100644
index 00000000000..227a0261434
--- /dev/null
+++ b/static/usage/v7/datetime/localization/locale-extension-tags/react.md
@@ -0,0 +1,10 @@
+```tsx
+import React from 'react';
+import { IonDatetime } from '@ionic/react';
+function Example() {
+ return (
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/datetime/localization/locale-extension-tags/vue.md b/static/usage/v7/datetime/localization/locale-extension-tags/vue.md
new file mode 100644
index 00000000000..a0181dc8e2d
--- /dev/null
+++ b/static/usage/v7/datetime/localization/locale-extension-tags/vue.md
@@ -0,0 +1,14 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v7/datetime/localization/time-label/angular.md b/static/usage/v7/datetime/localization/time-label/angular.md
new file mode 100644
index 00000000000..38f0e697d3a
--- /dev/null
+++ b/static/usage/v7/datetime/localization/time-label/angular.md
@@ -0,0 +1,5 @@
+```html
+
+ Tiempo
+
+```
diff --git a/static/usage/v7/datetime/localization/time-label/demo.html b/static/usage/v7/datetime/localization/time-label/demo.html
new file mode 100644
index 00000000000..8ad93461f78
--- /dev/null
+++ b/static/usage/v7/datetime/localization/time-label/demo.html
@@ -0,0 +1,31 @@
+
+
+
+
+
+
+ Datetime
+
+
+
+
+
+
+
+
+
+
+
+
+ Tiempo
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/datetime/localization/time-label/index.md b/static/usage/v7/datetime/localization/time-label/index.md
new file mode 100644
index 00000000000..e35108abac4
--- /dev/null
+++ b/static/usage/v7/datetime/localization/time-label/index.md
@@ -0,0 +1,13 @@
+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/datetime/localization/time-label/javascript.md b/static/usage/v7/datetime/localization/time-label/javascript.md
new file mode 100644
index 00000000000..38f0e697d3a
--- /dev/null
+++ b/static/usage/v7/datetime/localization/time-label/javascript.md
@@ -0,0 +1,5 @@
+```html
+
+ Tiempo
+
+```
diff --git a/static/usage/v7/datetime/localization/time-label/react.md b/static/usage/v7/datetime/localization/time-label/react.md
new file mode 100644
index 00000000000..ba81f8743a8
--- /dev/null
+++ b/static/usage/v7/datetime/localization/time-label/react.md
@@ -0,0 +1,12 @@
+```tsx
+import React from 'react';
+import { IonDatetime } from '@ionic/react';
+function Example() {
+ return (
+
+ Tiempo
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/datetime/localization/time-label/vue.md b/static/usage/v7/datetime/localization/time-label/vue.md
new file mode 100644
index 00000000000..37af973ee32
--- /dev/null
+++ b/static/usage/v7/datetime/localization/time-label/vue.md
@@ -0,0 +1,16 @@
+```html
+
+
+ Tiempo
+
+
+
+
+```
diff --git a/static/usage/v7/datetime/multiple/angular.md b/static/usage/v7/datetime/multiple/angular.md
new file mode 100644
index 00000000000..673f5b03e59
--- /dev/null
+++ b/static/usage/v7/datetime/multiple/angular.md
@@ -0,0 +1,7 @@
+```html
+
+```
diff --git a/static/usage/v7/datetime/multiple/demo.html b/static/usage/v7/datetime/multiple/demo.html
new file mode 100644
index 00000000000..43edb188016
--- /dev/null
+++ b/static/usage/v7/datetime/multiple/demo.html
@@ -0,0 +1,34 @@
+
+
+
+
+
+
+ Datetime
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/datetime/multiple/index.md b/static/usage/v7/datetime/multiple/index.md
new file mode 100644
index 00000000000..84405fb740f
--- /dev/null
+++ b/static/usage/v7/datetime/multiple/index.md
@@ -0,0 +1,13 @@
+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/datetime/multiple/javascript.md b/static/usage/v7/datetime/multiple/javascript.md
new file mode 100644
index 00000000000..10455808ab2
--- /dev/null
+++ b/static/usage/v7/datetime/multiple/javascript.md
@@ -0,0 +1,8 @@
+```html
+
+
+
+```
diff --git a/static/usage/v7/datetime/multiple/react.md b/static/usage/v7/datetime/multiple/react.md
new file mode 100644
index 00000000000..edcf933f530
--- /dev/null
+++ b/static/usage/v7/datetime/multiple/react.md
@@ -0,0 +1,20 @@
+```tsx
+import React, { useRef, useEffect } from 'react';
+import { IonDatetime } from '@ionic/react';
+
+function Example() {
+ const datetime = useRef(null);
+
+ useEffect(() => {
+ if(!datetime.current) return;
+ datetime.current.value = ['2022-06-03', '2022-06-13', '2022-06-29'];
+ }, []);
+
+ return ;
+}
+export default Example;
+```
diff --git a/static/usage/v7/datetime/multiple/vue.md b/static/usage/v7/datetime/multiple/vue.md
new file mode 100644
index 00000000000..163831a3d81
--- /dev/null
+++ b/static/usage/v7/datetime/multiple/vue.md
@@ -0,0 +1,18 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v7/datetime/presentation/date/angular.md b/static/usage/v7/datetime/presentation/date/angular.md
new file mode 100644
index 00000000000..8694e723b1a
--- /dev/null
+++ b/static/usage/v7/datetime/presentation/date/angular.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v7/datetime/presentation/date/demo.html b/static/usage/v7/datetime/presentation/date/demo.html
new file mode 100644
index 00000000000..ca76bcec306
--- /dev/null
+++ b/static/usage/v7/datetime/presentation/date/demo.html
@@ -0,0 +1,29 @@
+
+
+
+
+
+
+ Datetime
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/datetime/presentation/date/index.md b/static/usage/v7/datetime/presentation/date/index.md
new file mode 100644
index 00000000000..97780827260
--- /dev/null
+++ b/static/usage/v7/datetime/presentation/date/index.md
@@ -0,0 +1,13 @@
+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/datetime/presentation/date/javascript.md b/static/usage/v7/datetime/presentation/date/javascript.md
new file mode 100644
index 00000000000..8694e723b1a
--- /dev/null
+++ b/static/usage/v7/datetime/presentation/date/javascript.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v7/datetime/presentation/date/react.md b/static/usage/v7/datetime/presentation/date/react.md
new file mode 100644
index 00000000000..333aadfb58d
--- /dev/null
+++ b/static/usage/v7/datetime/presentation/date/react.md
@@ -0,0 +1,10 @@
+```tsx
+import React from 'react';
+import { IonDatetime } from '@ionic/react';
+function Example() {
+ return (
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/datetime/presentation/date/vue.md b/static/usage/v7/datetime/presentation/date/vue.md
new file mode 100644
index 00000000000..b686297a867
--- /dev/null
+++ b/static/usage/v7/datetime/presentation/date/vue.md
@@ -0,0 +1,14 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v7/datetime/presentation/month-and-year/angular.md b/static/usage/v7/datetime/presentation/month-and-year/angular.md
new file mode 100644
index 00000000000..fee755e147f
--- /dev/null
+++ b/static/usage/v7/datetime/presentation/month-and-year/angular.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v7/datetime/presentation/month-and-year/demo.html b/static/usage/v7/datetime/presentation/month-and-year/demo.html
new file mode 100644
index 00000000000..58fa960c863
--- /dev/null
+++ b/static/usage/v7/datetime/presentation/month-and-year/demo.html
@@ -0,0 +1,29 @@
+
+
+
+
+
+
+ Datetime
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/datetime/presentation/month-and-year/index.md b/static/usage/v7/datetime/presentation/month-and-year/index.md
new file mode 100644
index 00000000000..524545fb033
--- /dev/null
+++ b/static/usage/v7/datetime/presentation/month-and-year/index.md
@@ -0,0 +1,13 @@
+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/datetime/presentation/month-and-year/javascript.md b/static/usage/v7/datetime/presentation/month-and-year/javascript.md
new file mode 100644
index 00000000000..fee755e147f
--- /dev/null
+++ b/static/usage/v7/datetime/presentation/month-and-year/javascript.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v7/datetime/presentation/month-and-year/react.md b/static/usage/v7/datetime/presentation/month-and-year/react.md
new file mode 100644
index 00000000000..346ad116b68
--- /dev/null
+++ b/static/usage/v7/datetime/presentation/month-and-year/react.md
@@ -0,0 +1,10 @@
+```tsx
+import React from 'react';
+import { IonDatetime } from '@ionic/react';
+function Example() {
+ return (
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/datetime/presentation/month-and-year/vue.md b/static/usage/v7/datetime/presentation/month-and-year/vue.md
new file mode 100644
index 00000000000..01744a290fe
--- /dev/null
+++ b/static/usage/v7/datetime/presentation/month-and-year/vue.md
@@ -0,0 +1,14 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v7/datetime/presentation/time/angular.md b/static/usage/v7/datetime/presentation/time/angular.md
new file mode 100644
index 00000000000..d54dd466706
--- /dev/null
+++ b/static/usage/v7/datetime/presentation/time/angular.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v7/datetime/presentation/time/demo.html b/static/usage/v7/datetime/presentation/time/demo.html
new file mode 100644
index 00000000000..7ea21d3f4d5
--- /dev/null
+++ b/static/usage/v7/datetime/presentation/time/demo.html
@@ -0,0 +1,29 @@
+
+
+
+
+
+
+ Datetime
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/datetime/presentation/time/index.md b/static/usage/v7/datetime/presentation/time/index.md
new file mode 100644
index 00000000000..9423cfba0f9
--- /dev/null
+++ b/static/usage/v7/datetime/presentation/time/index.md
@@ -0,0 +1,12 @@
+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/datetime/presentation/time/javascript.md b/static/usage/v7/datetime/presentation/time/javascript.md
new file mode 100644
index 00000000000..d54dd466706
--- /dev/null
+++ b/static/usage/v7/datetime/presentation/time/javascript.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v7/datetime/presentation/time/react.md b/static/usage/v7/datetime/presentation/time/react.md
new file mode 100644
index 00000000000..934c3221112
--- /dev/null
+++ b/static/usage/v7/datetime/presentation/time/react.md
@@ -0,0 +1,10 @@
+```tsx
+import React from 'react';
+import { IonDatetime } from '@ionic/react';
+function Example() {
+ return (
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/datetime/presentation/time/vue.md b/static/usage/v7/datetime/presentation/time/vue.md
new file mode 100644
index 00000000000..7e01bc7d730
--- /dev/null
+++ b/static/usage/v7/datetime/presentation/time/vue.md
@@ -0,0 +1,14 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v7/datetime/presentation/wheel/angular.md b/static/usage/v7/datetime/presentation/wheel/angular.md
new file mode 100644
index 00000000000..f98877053c3
--- /dev/null
+++ b/static/usage/v7/datetime/presentation/wheel/angular.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v7/datetime/presentation/wheel/demo.html b/static/usage/v7/datetime/presentation/wheel/demo.html
new file mode 100644
index 00000000000..5b2028d4a6b
--- /dev/null
+++ b/static/usage/v7/datetime/presentation/wheel/demo.html
@@ -0,0 +1,29 @@
+
+
+
+
+
+
+ Datetime
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/datetime/presentation/wheel/index.md b/static/usage/v7/datetime/presentation/wheel/index.md
new file mode 100644
index 00000000000..47e4923bba6
--- /dev/null
+++ b/static/usage/v7/datetime/presentation/wheel/index.md
@@ -0,0 +1,13 @@
+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/datetime/presentation/wheel/javascript.md b/static/usage/v7/datetime/presentation/wheel/javascript.md
new file mode 100644
index 00000000000..83f43a87d61
--- /dev/null
+++ b/static/usage/v7/datetime/presentation/wheel/javascript.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v7/datetime/presentation/wheel/react.md b/static/usage/v7/datetime/presentation/wheel/react.md
new file mode 100644
index 00000000000..49f231b6966
--- /dev/null
+++ b/static/usage/v7/datetime/presentation/wheel/react.md
@@ -0,0 +1,10 @@
+```tsx
+import React from 'react';
+import { IonDatetime } from '@ionic/react';
+function Example() {
+ return (
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/datetime/presentation/wheel/vue.md b/static/usage/v7/datetime/presentation/wheel/vue.md
new file mode 100644
index 00000000000..c1055e8cfb7
--- /dev/null
+++ b/static/usage/v7/datetime/presentation/wheel/vue.md
@@ -0,0 +1,14 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v7/datetime/theming/angular/example_component_html.md b/static/usage/v7/datetime/theming/angular/example_component_html.md
new file mode 100644
index 00000000000..0a38b1bc5b6
--- /dev/null
+++ b/static/usage/v7/datetime/theming/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v7/datetime/theming/angular/global_css.md b/static/usage/v7/datetime/theming/angular/global_css.md
new file mode 100644
index 00000000000..4ec3d3ecdf9
--- /dev/null
+++ b/static/usage/v7/datetime/theming/angular/global_css.md
@@ -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;
+}
+```
diff --git a/static/usage/v7/datetime/theming/demo.html b/static/usage/v7/datetime/theming/demo.html
new file mode 100644
index 00000000000..e50a5576c63
--- /dev/null
+++ b/static/usage/v7/datetime/theming/demo.html
@@ -0,0 +1,78 @@
+
+
+
+
+
+
+ Datetime
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/datetime/theming/index.md b/static/usage/v7/datetime/theming/index.md
new file mode 100644
index 00000000000..f45d3c0e7c6
--- /dev/null
+++ b/static/usage/v7/datetime/theming/index.md
@@ -0,0 +1,33 @@
+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';
+
+
diff --git a/static/usage/v7/datetime/theming/javascript.md b/static/usage/v7/datetime/theming/javascript.md
new file mode 100644
index 00000000000..b01585db44e
--- /dev/null
+++ b/static/usage/v7/datetime/theming/javascript.md
@@ -0,0 +1,54 @@
+```html
+
+
+
+```
diff --git a/static/usage/datetime/theming/react-css.md b/static/usage/v7/datetime/theming/react/main_css.md
similarity index 100%
rename from static/usage/datetime/theming/react-css.md
rename to static/usage/v7/datetime/theming/react/main_css.md
diff --git a/static/usage/v7/datetime/theming/react/main_tsx.md b/static/usage/v7/datetime/theming/react/main_tsx.md
new file mode 100644
index 00000000000..37e658cdcd1
--- /dev/null
+++ b/static/usage/v7/datetime/theming/react/main_tsx.md
@@ -0,0 +1,11 @@
+```tsx
+import React from 'react';
+import { IonDatetime } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return ;
+}
+export default Example;
+```
diff --git a/static/usage/v7/datetime/theming/vue.md b/static/usage/v7/datetime/theming/vue.md
new file mode 100644
index 00000000000..0ba14641daa
--- /dev/null
+++ b/static/usage/v7/datetime/theming/vue.md
@@ -0,0 +1,65 @@
+```html
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/datetime/title/customizing-title/angular.md b/static/usage/v7/datetime/title/customizing-title/angular.md
new file mode 100644
index 00000000000..5f0ded69fbc
--- /dev/null
+++ b/static/usage/v7/datetime/title/customizing-title/angular.md
@@ -0,0 +1,5 @@
+```html
+
+ Select a Reservation Date
+
+```
diff --git a/static/usage/v7/datetime/title/customizing-title/demo.html b/static/usage/v7/datetime/title/customizing-title/demo.html
new file mode 100644
index 00000000000..ab7ead5aca6
--- /dev/null
+++ b/static/usage/v7/datetime/title/customizing-title/demo.html
@@ -0,0 +1,31 @@
+
+
+
+
+
+
+ Datetime
+
+
+
+
+
+
+
+
+
+
+
+
+ Select a Reservation Date
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/datetime/title/customizing-title/index.md b/static/usage/v7/datetime/title/customizing-title/index.md
new file mode 100644
index 00000000000..82a2b46e45b
--- /dev/null
+++ b/static/usage/v7/datetime/title/customizing-title/index.md
@@ -0,0 +1,13 @@
+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/datetime/title/customizing-title/javascript.md b/static/usage/v7/datetime/title/customizing-title/javascript.md
new file mode 100644
index 00000000000..5f0ded69fbc
--- /dev/null
+++ b/static/usage/v7/datetime/title/customizing-title/javascript.md
@@ -0,0 +1,5 @@
+```html
+
+ Select a Reservation Date
+
+```
diff --git a/static/usage/v7/datetime/title/customizing-title/react.md b/static/usage/v7/datetime/title/customizing-title/react.md
new file mode 100644
index 00000000000..ae4fec002d5
--- /dev/null
+++ b/static/usage/v7/datetime/title/customizing-title/react.md
@@ -0,0 +1,12 @@
+```tsx
+import React from 'react';
+import { IonDatetime } from '@ionic/react';
+function Example() {
+ return (
+
+ Select a Reservation Date
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/datetime/title/customizing-title/vue.md b/static/usage/v7/datetime/title/customizing-title/vue.md
new file mode 100644
index 00000000000..cb633931dba
--- /dev/null
+++ b/static/usage/v7/datetime/title/customizing-title/vue.md
@@ -0,0 +1,16 @@
+```html
+
+
+ Select a Reservation Date
+
+
+
+
+```
diff --git a/static/usage/v7/datetime/title/showing-default-title/angular.md b/static/usage/v7/datetime/title/showing-default-title/angular.md
new file mode 100644
index 00000000000..c67e022da04
--- /dev/null
+++ b/static/usage/v7/datetime/title/showing-default-title/angular.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v7/datetime/title/showing-default-title/demo.html b/static/usage/v7/datetime/title/showing-default-title/demo.html
new file mode 100644
index 00000000000..3d725f9eb92
--- /dev/null
+++ b/static/usage/v7/datetime/title/showing-default-title/demo.html
@@ -0,0 +1,29 @@
+
+
+
+
+
+
+ Datetime
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/datetime/title/showing-default-title/index.md b/static/usage/v7/datetime/title/showing-default-title/index.md
new file mode 100644
index 00000000000..c0efd60dc18
--- /dev/null
+++ b/static/usage/v7/datetime/title/showing-default-title/index.md
@@ -0,0 +1,13 @@
+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/datetime/title/showing-default-title/javascript.md b/static/usage/v7/datetime/title/showing-default-title/javascript.md
new file mode 100644
index 00000000000..6786deb32cf
--- /dev/null
+++ b/static/usage/v7/datetime/title/showing-default-title/javascript.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v7/datetime/title/showing-default-title/react.md b/static/usage/v7/datetime/title/showing-default-title/react.md
new file mode 100644
index 00000000000..f5a7c681c22
--- /dev/null
+++ b/static/usage/v7/datetime/title/showing-default-title/react.md
@@ -0,0 +1,10 @@
+```tsx
+import React from 'react';
+import { IonDatetime } from '@ionic/react';
+function Example() {
+ return (
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/datetime/title/showing-default-title/vue.md b/static/usage/v7/datetime/title/showing-default-title/vue.md
new file mode 100644
index 00000000000..7a6e48f7214
--- /dev/null
+++ b/static/usage/v7/datetime/title/showing-default-title/vue.md
@@ -0,0 +1,14 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v7/fab/basic/angular.md b/static/usage/v7/fab/basic/angular.md
new file mode 100644
index 00000000000..b8394f90ed6
--- /dev/null
+++ b/static/usage/v7/fab/basic/angular.md
@@ -0,0 +1,7 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v7/fab/basic/demo.html b/static/usage/v7/fab/basic/demo.html
new file mode 100644
index 00000000000..bf3ddf18220
--- /dev/null
+++ b/static/usage/v7/fab/basic/demo.html
@@ -0,0 +1,29 @@
+
+
+
+
+
+
+ Fab
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/fab/basic/index.md b/static/usage/v7/fab/basic/index.md
new file mode 100644
index 00000000000..d1172ccc7c7
--- /dev/null
+++ b/static/usage/v7/fab/basic/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/fab/basic/javascript.md b/static/usage/v7/fab/basic/javascript.md
new file mode 100644
index 00000000000..b8394f90ed6
--- /dev/null
+++ b/static/usage/v7/fab/basic/javascript.md
@@ -0,0 +1,7 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v7/fab/basic/react.md b/static/usage/v7/fab/basic/react.md
new file mode 100644
index 00000000000..f1df86581d6
--- /dev/null
+++ b/static/usage/v7/fab/basic/react.md
@@ -0,0 +1,16 @@
+```tsx
+import React from 'react';
+import { IonFab, IonFabButton, IonIcon } from '@ionic/react';
+import { add } from 'ionicons/icons';
+
+function Example() {
+ return (
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/fab/basic/vue.md b/static/usage/v7/fab/basic/vue.md
new file mode 100644
index 00000000000..e6b99476bd0
--- /dev/null
+++ b/static/usage/v7/fab/basic/vue.md
@@ -0,0 +1,22 @@
+```html
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/fab/button-sizing/angular.md b/static/usage/v7/fab/button-sizing/angular.md
new file mode 100644
index 00000000000..31bd1874625
--- /dev/null
+++ b/static/usage/v7/fab/button-sizing/angular.md
@@ -0,0 +1,18 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/fab/button-sizing/demo.html b/static/usage/v7/fab/button-sizing/demo.html
new file mode 100644
index 00000000000..e3595399219
--- /dev/null
+++ b/static/usage/v7/fab/button-sizing/demo.html
@@ -0,0 +1,40 @@
+
+
+
+
+
+
+ Fab
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/fab/button-sizing/index.md b/static/usage/v7/fab/button-sizing/index.md
new file mode 100644
index 00000000000..4c0eeba8100
--- /dev/null
+++ b/static/usage/v7/fab/button-sizing/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/fab/button-sizing/javascript.md b/static/usage/v7/fab/button-sizing/javascript.md
new file mode 100644
index 00000000000..31bd1874625
--- /dev/null
+++ b/static/usage/v7/fab/button-sizing/javascript.md
@@ -0,0 +1,18 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/fab/button-sizing/react.md b/static/usage/v7/fab/button-sizing/react.md
new file mode 100644
index 00000000000..c6837284e08
--- /dev/null
+++ b/static/usage/v7/fab/button-sizing/react.md
@@ -0,0 +1,27 @@
+```tsx
+import React from 'react';
+import { IonFab, IonFabButton, IonFabList, IonIcon } from '@ionic/react';
+import { add, colorPalette, document, globe } from 'ionicons/icons';
+
+function Example() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/fab/button-sizing/vue.md b/static/usage/v7/fab/button-sizing/vue.md
new file mode 100644
index 00000000000..bf292433d7e
--- /dev/null
+++ b/static/usage/v7/fab/button-sizing/vue.md
@@ -0,0 +1,33 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/fab/list-side/angular.md b/static/usage/v7/fab/list-side/angular.md
new file mode 100644
index 00000000000..17f7d1818c0
--- /dev/null
+++ b/static/usage/v7/fab/list-side/angular.md
@@ -0,0 +1,33 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/fab/list-side/demo.html b/static/usage/v7/fab/list-side/demo.html
new file mode 100644
index 00000000000..2b24622135a
--- /dev/null
+++ b/static/usage/v7/fab/list-side/demo.html
@@ -0,0 +1,55 @@
+
+
+
+
+
+
+ Fab
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/fab/list-side/index.md b/static/usage/v7/fab/list-side/index.md
new file mode 100644
index 00000000000..23d2789fe3b
--- /dev/null
+++ b/static/usage/v7/fab/list-side/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/fab/list-side/javascript.md b/static/usage/v7/fab/list-side/javascript.md
new file mode 100644
index 00000000000..17f7d1818c0
--- /dev/null
+++ b/static/usage/v7/fab/list-side/javascript.md
@@ -0,0 +1,33 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/fab/list-side/react.md b/static/usage/v7/fab/list-side/react.md
new file mode 100644
index 00000000000..b461d8c94eb
--- /dev/null
+++ b/static/usage/v7/fab/list-side/react.md
@@ -0,0 +1,42 @@
+```tsx
+import React from 'react';
+import { IonFab, IonFabButton, IonFabList, IonIcon } from '@ionic/react';
+import { add, chevronBack, chevronDown, chevronForward, chevronUp } from 'ionicons/icons';
+
+function Example() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/fab/list-side/vue.md b/static/usage/v7/fab/list-side/vue.md
new file mode 100644
index 00000000000..2c42562587c
--- /dev/null
+++ b/static/usage/v7/fab/list-side/vue.md
@@ -0,0 +1,48 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/fab/positioning/angular.md b/static/usage/v7/fab/positioning/angular.md
new file mode 100644
index 00000000000..e28150bea57
--- /dev/null
+++ b/static/usage/v7/fab/positioning/angular.md
@@ -0,0 +1,59 @@
+```html
+
+
+ Fab Buttons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/fab/positioning/demo.html b/static/usage/v7/fab/positioning/demo.html
new file mode 100644
index 00000000000..bb00b1cfdc4
--- /dev/null
+++ b/static/usage/v7/fab/positioning/demo.html
@@ -0,0 +1,77 @@
+
+
+
+
+
+
+ Fab
+
+
+
+
+
+
+
+
+
+
+
+ Fab Buttons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/fab/positioning/index.md b/static/usage/v7/fab/positioning/index.md
new file mode 100644
index 00000000000..deb0474e9a5
--- /dev/null
+++ b/static/usage/v7/fab/positioning/index.md
@@ -0,0 +1,14 @@
+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/fab/positioning/javascript.md b/static/usage/v7/fab/positioning/javascript.md
new file mode 100644
index 00000000000..27dec2c07b8
--- /dev/null
+++ b/static/usage/v7/fab/positioning/javascript.md
@@ -0,0 +1,59 @@
+```html
+
+
+ Fab Buttons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/fab/positioning/react.md b/static/usage/v7/fab/positioning/react.md
new file mode 100644
index 00000000000..c8eb95d0166
--- /dev/null
+++ b/static/usage/v7/fab/positioning/react.md
@@ -0,0 +1,70 @@
+```tsx
+import React from 'react';
+import { IonContent, IonFab, IonFabButton, IonFabList, IonHeader, IonIcon, IonTitle, IonToolbar } from '@ionic/react';
+import { chevronDownCircle, chevronForwardCircle, chevronUpCircle, colorPalette, document, globe } from 'ionicons/icons';
+
+function Example() {
+ return (
+ <>
+
+
+ Fab Buttons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/fab/positioning/vue.md b/static/usage/v7/fab/positioning/vue.md
new file mode 100644
index 00000000000..f3421f2b2ea
--- /dev/null
+++ b/static/usage/v7/fab/positioning/vue.md
@@ -0,0 +1,74 @@
+```html
+
+
+
+ Fab Buttons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/fab/theming/colors/angular.md b/static/usage/v7/fab/theming/colors/angular.md
new file mode 100644
index 00000000000..66d4db84a0f
--- /dev/null
+++ b/static/usage/v7/fab/theming/colors/angular.md
@@ -0,0 +1,33 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/fab/theming/colors/demo.html b/static/usage/v7/fab/theming/colors/demo.html
new file mode 100644
index 00000000000..7f1b059484c
--- /dev/null
+++ b/static/usage/v7/fab/theming/colors/demo.html
@@ -0,0 +1,55 @@
+
+
+
+
+
+
+ Fab
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/fab/theming/colors/index.md b/static/usage/v7/fab/theming/colors/index.md
new file mode 100644
index 00000000000..93571b0084c
--- /dev/null
+++ b/static/usage/v7/fab/theming/colors/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/fab/theming/colors/javascript.md b/static/usage/v7/fab/theming/colors/javascript.md
new file mode 100644
index 00000000000..66d4db84a0f
--- /dev/null
+++ b/static/usage/v7/fab/theming/colors/javascript.md
@@ -0,0 +1,33 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/fab/theming/colors/react.md b/static/usage/v7/fab/theming/colors/react.md
new file mode 100644
index 00000000000..c600aaca898
--- /dev/null
+++ b/static/usage/v7/fab/theming/colors/react.md
@@ -0,0 +1,42 @@
+```tsx
+import React from 'react';
+import { IonFab, IonFabButton, IonFabList, IonIcon } from '@ionic/react';
+import { add, chevronBack, chevronDown, chevronForward, chevronUp } from 'ionicons/icons';
+
+function Example() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/fab/theming/colors/vue.md b/static/usage/v7/fab/theming/colors/vue.md
new file mode 100644
index 00000000000..44968e6cb4c
--- /dev/null
+++ b/static/usage/v7/fab/theming/colors/vue.md
@@ -0,0 +1,48 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/fab/theming/css-custom-properties/angular/example_component_css.md b/static/usage/v7/fab/theming/css-custom-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..2e8c0c2bb93
--- /dev/null
+++ b/static/usage/v7/fab/theming/css-custom-properties/angular/example_component_css.md
@@ -0,0 +1,10 @@
+```css
+ion-fab-button {
+ --background: #b7f399;
+ --background-activated: #87d361;
+ --background-hover: #a3e681;
+ --border-radius: 15px;
+ --box-shadow: 0px 1px 2px 0px rgba(0,0,0,.3), 0px 1px 3px 1px rgba(0,0,0,.15);
+ --color: black;
+}
+```
\ No newline at end of file
diff --git a/static/usage/v7/fab/theming/css-custom-properties/angular/example_component_html.md b/static/usage/v7/fab/theming/css-custom-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..4db1e796e3a
--- /dev/null
+++ b/static/usage/v7/fab/theming/css-custom-properties/angular/example_component_html.md
@@ -0,0 +1,18 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/fab/theming/css-custom-properties/demo.html b/static/usage/v7/fab/theming/css-custom-properties/demo.html
new file mode 100644
index 00000000000..90b398450b3
--- /dev/null
+++ b/static/usage/v7/fab/theming/css-custom-properties/demo.html
@@ -0,0 +1,50 @@
+
+
+
+
+
+
+ Fab
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/fab/theming/css-custom-properties/index.md b/static/usage/v7/fab/theming/css-custom-properties/index.md
new file mode 100644
index 00000000000..94ebf3e223c
--- /dev/null
+++ b/static/usage/v7/fab/theming/css-custom-properties/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/fab/theming/css-custom-properties/javascript.md b/static/usage/v7/fab/theming/css-custom-properties/javascript.md
new file mode 100644
index 00000000000..45d5f5e1243
--- /dev/null
+++ b/static/usage/v7/fab/theming/css-custom-properties/javascript.md
@@ -0,0 +1,29 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/fab/theming/css-custom-properties/react/main_css.md b/static/usage/v7/fab/theming/css-custom-properties/react/main_css.md
new file mode 100644
index 00000000000..2e8c0c2bb93
--- /dev/null
+++ b/static/usage/v7/fab/theming/css-custom-properties/react/main_css.md
@@ -0,0 +1,10 @@
+```css
+ion-fab-button {
+ --background: #b7f399;
+ --background-activated: #87d361;
+ --background-hover: #a3e681;
+ --border-radius: 15px;
+ --box-shadow: 0px 1px 2px 0px rgba(0,0,0,.3), 0px 1px 3px 1px rgba(0,0,0,.15);
+ --color: black;
+}
+```
\ No newline at end of file
diff --git a/static/usage/v7/fab/theming/css-custom-properties/react/main_tsx.md b/static/usage/v7/fab/theming/css-custom-properties/react/main_tsx.md
new file mode 100644
index 00000000000..8a1371c77ec
--- /dev/null
+++ b/static/usage/v7/fab/theming/css-custom-properties/react/main_tsx.md
@@ -0,0 +1,29 @@
+```tsx
+import React from 'react';
+import { IonFab, IonFabButton, IonFabList, IonIcon } from '@ionic/react';
+import { add, colorPalette, document, globe } from 'ionicons/icons';
+
+import './main.css';
+
+function Example() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/fab/theming/css-custom-properties/vue.md b/static/usage/v7/fab/theming/css-custom-properties/vue.md
new file mode 100644
index 00000000000..373d97cb6ec
--- /dev/null
+++ b/static/usage/v7/fab/theming/css-custom-properties/vue.md
@@ -0,0 +1,44 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/fab/theming/css-shadow-parts/angular/example_component_css.md b/static/usage/v7/fab/theming/css-shadow-parts/angular/example_component_css.md
new file mode 100644
index 00000000000..b480b0cc455
--- /dev/null
+++ b/static/usage/v7/fab/theming/css-shadow-parts/angular/example_component_css.md
@@ -0,0 +1,16 @@
+```css
+ion-fab-button::part(native) {
+ background-color: #b7f399;
+ border-radius: 15px;
+ box-shadow: 0px 1px 2px 0px rgba(0,0,0,.3), 0px 1px 3px 1px rgba(0,0,0,.15);
+ color: black;
+}
+
+ion-fab-button::part(native):hover::after {
+ background-color: #a3e681;
+}
+
+ion-fab-button::part(native):active::after {
+ background-color: #87d361;
+}
+```
\ No newline at end of file
diff --git a/static/usage/v7/fab/theming/css-shadow-parts/angular/example_component_html.md b/static/usage/v7/fab/theming/css-shadow-parts/angular/example_component_html.md
new file mode 100644
index 00000000000..4db1e796e3a
--- /dev/null
+++ b/static/usage/v7/fab/theming/css-shadow-parts/angular/example_component_html.md
@@ -0,0 +1,18 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/fab/theming/css-shadow-parts/demo.html b/static/usage/v7/fab/theming/css-shadow-parts/demo.html
new file mode 100644
index 00000000000..40c416ab32c
--- /dev/null
+++ b/static/usage/v7/fab/theming/css-shadow-parts/demo.html
@@ -0,0 +1,56 @@
+
+
+
+
+
+
+ Fab
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/fab/theming/css-shadow-parts/index.md b/static/usage/v7/fab/theming/css-shadow-parts/index.md
new file mode 100644
index 00000000000..8f9b56738ae
--- /dev/null
+++ b/static/usage/v7/fab/theming/css-shadow-parts/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/fab/theming/css-shadow-parts/javascript.md b/static/usage/v7/fab/theming/css-shadow-parts/javascript.md
new file mode 100644
index 00000000000..9ca1aa39119
--- /dev/null
+++ b/static/usage/v7/fab/theming/css-shadow-parts/javascript.md
@@ -0,0 +1,35 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/fab/theming/css-shadow-parts/react/main_css.md b/static/usage/v7/fab/theming/css-shadow-parts/react/main_css.md
new file mode 100644
index 00000000000..b480b0cc455
--- /dev/null
+++ b/static/usage/v7/fab/theming/css-shadow-parts/react/main_css.md
@@ -0,0 +1,16 @@
+```css
+ion-fab-button::part(native) {
+ background-color: #b7f399;
+ border-radius: 15px;
+ box-shadow: 0px 1px 2px 0px rgba(0,0,0,.3), 0px 1px 3px 1px rgba(0,0,0,.15);
+ color: black;
+}
+
+ion-fab-button::part(native):hover::after {
+ background-color: #a3e681;
+}
+
+ion-fab-button::part(native):active::after {
+ background-color: #87d361;
+}
+```
\ No newline at end of file
diff --git a/static/usage/v7/fab/theming/css-shadow-parts/react/main_tsx.md b/static/usage/v7/fab/theming/css-shadow-parts/react/main_tsx.md
new file mode 100644
index 00000000000..8a1371c77ec
--- /dev/null
+++ b/static/usage/v7/fab/theming/css-shadow-parts/react/main_tsx.md
@@ -0,0 +1,29 @@
+```tsx
+import React from 'react';
+import { IonFab, IonFabButton, IonFabList, IonIcon } from '@ionic/react';
+import { add, colorPalette, document, globe } from 'ionicons/icons';
+
+import './main.css';
+
+function Example() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/fab/theming/css-shadow-parts/vue.md b/static/usage/v7/fab/theming/css-shadow-parts/vue.md
new file mode 100644
index 00000000000..9c9f1559805
--- /dev/null
+++ b/static/usage/v7/fab/theming/css-shadow-parts/vue.md
@@ -0,0 +1,50 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/footer/basic/angular.md b/static/usage/v7/footer/basic/angular.md
new file mode 100644
index 00000000000..b0506781582
--- /dev/null
+++ b/static/usage/v7/footer/basic/angular.md
@@ -0,0 +1,10 @@
+```html
+
+ Content
+
+
+
+ Footer
+
+
+```
diff --git a/static/usage/v7/footer/basic/demo.html b/static/usage/v7/footer/basic/demo.html
new file mode 100644
index 00000000000..205a6543d4b
--- /dev/null
+++ b/static/usage/v7/footer/basic/demo.html
@@ -0,0 +1,28 @@
+
+
+
+
+
+
+ Footer
+
+
+
+
+
+
+
+
+
+
+ Content
+
+
+
+ Footer
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/footer/basic/index.md b/static/usage/v7/footer/basic/index.md
new file mode 100644
index 00000000000..d9abf47d787
--- /dev/null
+++ b/static/usage/v7/footer/basic/index.md
@@ -0,0 +1,14 @@
+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/footer/basic/javascript.md b/static/usage/v7/footer/basic/javascript.md
new file mode 100644
index 00000000000..b0506781582
--- /dev/null
+++ b/static/usage/v7/footer/basic/javascript.md
@@ -0,0 +1,10 @@
+```html
+
+ Content
+
+
+
+ Footer
+
+
+```
diff --git a/static/usage/v7/footer/basic/react.md b/static/usage/v7/footer/basic/react.md
new file mode 100644
index 00000000000..6d7119f0f3f
--- /dev/null
+++ b/static/usage/v7/footer/basic/react.md
@@ -0,0 +1,20 @@
+```tsx
+import React from 'react';
+import { IonContent, IonFooter, IonTitle, IonToolbar } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+ Content
+
+
+
+ Footer
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/footer/basic/vue.md b/static/usage/v7/footer/basic/vue.md
new file mode 100644
index 00000000000..ed20057150d
--- /dev/null
+++ b/static/usage/v7/footer/basic/vue.md
@@ -0,0 +1,21 @@
+```html
+
+
+ Content
+
+
+
+ Footer
+
+
+
+
+
+```
diff --git a/static/usage/v7/footer/custom-scroll-target/angular/example_component_css.md b/static/usage/v7/footer/custom-scroll-target/angular/example_component_css.md
new file mode 100644
index 00000000000..4db169a0e16
--- /dev/null
+++ b/static/usage/v7/footer/custom-scroll-target/angular/example_component_css.md
@@ -0,0 +1,11 @@
+```css
+.ion-content-scroll-host {
+ position: absolute;
+ top: 0;
+ left: 0;
+
+ height: 100%;
+ width: 100%;
+ overflow-y: auto;
+}
+```
diff --git a/static/usage/v7/footer/custom-scroll-target/angular/example_component_html.md b/static/usage/v7/footer/custom-scroll-target/angular/example_component_html.md
new file mode 100644
index 00000000000..db8f0f30a0e
--- /dev/null
+++ b/static/usage/v7/footer/custom-scroll-target/angular/example_component_html.md
@@ -0,0 +1,32 @@
+```html
+
+
+
Animal Facts
+
+
Rhinoceros
+
+
The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the Greek words rhino meaning ânoseâ and ceros meaning âhorn.â The number of horns that a rhino has varies on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while the Javan rhino and one-horned rhino have one horn.
+
+
Sea Turtle
+
+
Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for swimming, so they are vulnerable while on land.
+
+
Giraffe
+
+
Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the giraffe a âcamel-leopard.â Thatâs where the giraffeâs species name âcamelopardalisâ comes from.
+
+
Elephant
+
+
Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephantsâ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up water for drinking or bathing.
+
+
Dolphin
+
+
Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+
Animal Facts
+
+
Rhinoceros
+
+
The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from
+ the Greek words rhino meaning ânoseâ and ceros meaning âhorn.â The number of horns that a rhino has varies on
+ the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two
+ horns, while the Javan rhino and one-horned rhino have one horn.
+
+
Sea Turtle
+
+
Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other
+ turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are
+ adapted for swimming, so they are vulnerable while on land.
+
+
Giraffe
+
+
Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and
+ have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people
+ called the giraffe a âcamel-leopard.â Thatâs where the giraffeâs species name âcamelopardalisâ comes from.
+
+
Elephant
+
+
Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephantsâ
+ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or
+ suck up water for drinking or bathing.
+
+
Dolphin
+
+
Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown,
+ gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with
+ about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap
+ that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+
Animal Facts
+
+
Rhinoceros
+
+
The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the Greek words rhino meaning ânoseâ and ceros meaning âhorn.â The number of horns that a rhino has varies on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while the Javan rhino and one-horned rhino have one horn.
+
+
Sea Turtle
+
+
Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for swimming, so they are vulnerable while on land.
+
+
Giraffe
+
+
Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the giraffe a âcamel-leopard.â Thatâs where the giraffeâs species name âcamelopardalisâ comes from.
+
+
Elephant
+
+
Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephantsâ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up water for drinking or bathing.
+
+
Dolphin
+
+
Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+
Animal Facts
+
+
Rhinoceros
+
+
The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the Greek words rhino meaning ânoseâ and ceros meaning âhorn.â The number of horns that a rhino has varies on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while the Javan rhino and one-horned rhino have one horn.
+
+
Sea Turtle
+
+
Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for swimming, so they are vulnerable while on land.
+
+
Giraffe
+
+
Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the giraffe a âcamel-leopard.â Thatâs where the giraffeâs species name âcamelopardalisâ comes from.
+
+
Elephant
+
+
Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephantsâ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up water for drinking or bathing.
+
+
Dolphin
+
+
Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+
Animal Facts
+
+
Rhinoceros
+
+
The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the Greek words rhino meaning ânoseâ and ceros meaning âhorn.â The number of horns that a rhino has varies on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while the Javan rhino and one-horned rhino have one horn.
+
+
Sea Turtle
+
+
Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for swimming, so they are vulnerable while on land.
+
+
Giraffe
+
+
Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the giraffe a âcamel-leopard.â Thatâs where the giraffeâs species name âcamelopardalisâ comes from.
+
+
Elephant
+
+
Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephantsâ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up water for drinking or bathing.
+
+
Dolphin
+
+
Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
Animal Facts
+
+ Rhinoceros
+
+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the Greek words rhino meaning ânoseâ and ceros meaning âhorn.â The number of horns that a rhino has varies on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while the Javan rhino and one-horned rhino have one horn.
+
+ Sea Turtle
+
+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for swimming, so they are vulnerable while on land.
+
+ Giraffe
+
+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the giraffe a âcamel-leopard.â Thatâs where the giraffeâs species name âcamelopardalisâ comes from.
+
+ Elephant
+
+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephantsâ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up water for drinking or bathing.
+
+ Dolphin
+
+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+
+
+ Footer
+
+
+```
diff --git a/static/usage/v7/footer/fade/demo.html b/static/usage/v7/footer/fade/demo.html
new file mode 100644
index 00000000000..75ed07ea1bf
--- /dev/null
+++ b/static/usage/v7/footer/fade/demo.html
@@ -0,0 +1,65 @@
+
+
+
+
+
+
+ Footer
+
+
+
+
+
+
+
+
+
+
+ Animal Facts
+
+ Rhinoceros
+
+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from
+ the Greek words rhino meaning ânoseâ and ceros meaning âhorn.â The number of horns that a rhino has varies on
+ the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two
+ horns, while the Javan rhino and one-horned rhino have one horn.
+
+ Sea Turtle
+
+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other
+ turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are
+ adapted for swimming, so they are vulnerable while on land.
+
+ Giraffe
+
+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have
+ a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called
+ the giraffe a âcamel-leopard.â Thatâs where the giraffeâs species name âcamelopardalisâ comes from.
+
+ Elephant
+
+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephantsâ
+ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or
+ suck up water for drinking or bathing.
+
+ Dolphin
+
+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray,
+ blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about
+ 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens
+ to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+
+
+ Footer
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/footer/fade/index.md b/static/usage/v7/footer/fade/index.md
new file mode 100644
index 00000000000..47248b6f35f
--- /dev/null
+++ b/static/usage/v7/footer/fade/index.md
@@ -0,0 +1,15 @@
+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/footer/fade/javascript.md b/static/usage/v7/footer/fade/javascript.md
new file mode 100644
index 00000000000..cff7f1a7531
--- /dev/null
+++ b/static/usage/v7/footer/fade/javascript.md
@@ -0,0 +1,30 @@
+```html
+
+ Animal Facts
+
+ Rhinoceros
+
+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the Greek words rhino meaning ânoseâ and ceros meaning âhorn.â The number of horns that a rhino has varies on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while the Javan rhino and one-horned rhino have one horn.
+
+ Sea Turtle
+
+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for swimming, so they are vulnerable while on land.
+
+ Giraffe
+
+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the giraffe a âcamel-leopard.â Thatâs where the giraffeâs species name âcamelopardalisâ comes from.
+
+ Elephant
+
+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephantsâ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up water for drinking or bathing.
+
+ Dolphin
+
+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+
+
+ Footer
+
+
+```
diff --git a/static/usage/v7/footer/fade/react.md b/static/usage/v7/footer/fade/react.md
new file mode 100644
index 00000000000..858ea06635c
--- /dev/null
+++ b/static/usage/v7/footer/fade/react.md
@@ -0,0 +1,40 @@
+```tsx
+import React from 'react';
+import { IonContent, IonFooter, IonTitle, IonToolbar } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+ Animal Facts
+
+ Rhinoceros
+
+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the Greek words rhino meaning ânoseâ and ceros meaning âhorn.â The number of horns that a rhino has varies on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while the Javan rhino and one-horned rhino have one horn.
+
+ Sea Turtle
+
+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for swimming, so they are vulnerable while on land.
+
+ Giraffe
+
+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the giraffe a âcamel-leopard.â Thatâs where the giraffeâs species name âcamelopardalisâ comes from.
+
+ Elephant
+
+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephantsâ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up water for drinking or bathing.
+
+ Dolphin
+
+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+
+
+ Footer
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/footer/fade/vue.md b/static/usage/v7/footer/fade/vue.md
new file mode 100644
index 00000000000..8814012da11
--- /dev/null
+++ b/static/usage/v7/footer/fade/vue.md
@@ -0,0 +1,41 @@
+```html
+
+
+ Animal Facts
+
+ Rhinoceros
+
+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the Greek words rhino meaning ânoseâ and ceros meaning âhorn.â The number of horns that a rhino has varies on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while the Javan rhino and one-horned rhino have one horn.
+
+ Sea Turtle
+
+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for swimming, so they are vulnerable while on land.
+
+ Giraffe
+
+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the giraffe a âcamel-leopard.â Thatâs where the giraffeâs species name âcamelopardalisâ comes from.
+
+ Elephant
+
+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephantsâ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up water for drinking or bathing.
+
+ Dolphin
+
+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+
+
+ Footer
+
+
+
+
+
+```
diff --git a/static/usage/v7/footer/no-border/angular.md b/static/usage/v7/footer/no-border/angular.md
new file mode 100644
index 00000000000..6b31b329d96
--- /dev/null
+++ b/static/usage/v7/footer/no-border/angular.md
@@ -0,0 +1,10 @@
+```html
+
+ Content
+
+
+
+ Footer
+
+
+```
diff --git a/static/usage/v7/footer/no-border/demo.html b/static/usage/v7/footer/no-border/demo.html
new file mode 100644
index 00000000000..8050b2a7bcd
--- /dev/null
+++ b/static/usage/v7/footer/no-border/demo.html
@@ -0,0 +1,28 @@
+
+
+
+
+
+
+ Footer
+
+
+
+
+
+
+
+
+
+
+ Content
+
+
+
+ Footer
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/footer/no-border/index.md b/static/usage/v7/footer/no-border/index.md
new file mode 100644
index 00000000000..61152f09bf8
--- /dev/null
+++ b/static/usage/v7/footer/no-border/index.md
@@ -0,0 +1,14 @@
+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/footer/no-border/javascript.md b/static/usage/v7/footer/no-border/javascript.md
new file mode 100644
index 00000000000..6b31b329d96
--- /dev/null
+++ b/static/usage/v7/footer/no-border/javascript.md
@@ -0,0 +1,10 @@
+```html
+
+ Content
+
+
+
+ Footer
+
+
+```
diff --git a/static/usage/v7/footer/no-border/react.md b/static/usage/v7/footer/no-border/react.md
new file mode 100644
index 00000000000..2c58e513063
--- /dev/null
+++ b/static/usage/v7/footer/no-border/react.md
@@ -0,0 +1,20 @@
+```tsx
+import React from 'react';
+import { IonContent, IonFooter, IonTitle, IonToolbar } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+ Content
+
+
+
+ Footer
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/footer/no-border/vue.md b/static/usage/v7/footer/no-border/vue.md
new file mode 100644
index 00000000000..9a3eccff15a
--- /dev/null
+++ b/static/usage/v7/footer/no-border/vue.md
@@ -0,0 +1,21 @@
+```html
+
+
+ Content
+
+
+
+ Footer
+
+
+
+
+
+```
diff --git a/static/usage/v7/footer/translucent/angular.md b/static/usage/v7/footer/translucent/angular.md
new file mode 100644
index 00000000000..3d8f6098b38
--- /dev/null
+++ b/static/usage/v7/footer/translucent/angular.md
@@ -0,0 +1,30 @@
+```html
+
+ Animal Facts
+
+ Rhinoceros
+
+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the Greek words rhino meaning ânoseâ and ceros meaning âhorn.â The number of horns that a rhino has varies on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while the Javan rhino and one-horned rhino have one horn.
+
+ Sea Turtle
+
+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for swimming, so they are vulnerable while on land.
+
+ Giraffe
+
+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the giraffe a âcamel-leopard.â Thatâs where the giraffeâs species name âcamelopardalisâ comes from.
+
+ Elephant
+
+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephantsâ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up water for drinking or bathing.
+
+ Dolphin
+
+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+
+
+ Footer
+
+
+```
diff --git a/static/usage/v7/footer/translucent/demo.html b/static/usage/v7/footer/translucent/demo.html
new file mode 100644
index 00000000000..b04fd24bddc
--- /dev/null
+++ b/static/usage/v7/footer/translucent/demo.html
@@ -0,0 +1,65 @@
+
+
+
+
+
+
+ Footer
+
+
+
+
+
+
+
+
+
+
+ Animal Facts
+
+ Rhinoceros
+
+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from
+ the Greek words rhino meaning ânoseâ and ceros meaning âhorn.â The number of horns that a rhino has varies on
+ the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two
+ horns, while the Javan rhino and one-horned rhino have one horn.
+
+ Sea Turtle
+
+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other
+ turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are
+ adapted for swimming, so they are vulnerable while on land.
+
+ Giraffe
+
+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have
+ a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called
+ the giraffe a âcamel-leopard.â Thatâs where the giraffeâs species name âcamelopardalisâ comes from.
+
+ Elephant
+
+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephantsâ
+ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or
+ suck up water for drinking or bathing.
+
+ Dolphin
+
+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray,
+ blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about
+ 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens
+ to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+
+
+ Footer
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/footer/translucent/index.md b/static/usage/v7/footer/translucent/index.md
new file mode 100644
index 00000000000..51e731fe97e
--- /dev/null
+++ b/static/usage/v7/footer/translucent/index.md
@@ -0,0 +1,15 @@
+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/footer/translucent/javascript.md b/static/usage/v7/footer/translucent/javascript.md
new file mode 100644
index 00000000000..029b08984c3
--- /dev/null
+++ b/static/usage/v7/footer/translucent/javascript.md
@@ -0,0 +1,30 @@
+```html
+
+ Animal Facts
+
+ Rhinoceros
+
+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the Greek words rhino meaning ânoseâ and ceros meaning âhorn.â The number of horns that a rhino has varies on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while the Javan rhino and one-horned rhino have one horn.
+
+ Sea Turtle
+
+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for swimming, so they are vulnerable while on land.
+
+ Giraffe
+
+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the giraffe a âcamel-leopard.â Thatâs where the giraffeâs species name âcamelopardalisâ comes from.
+
+ Elephant
+
+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephantsâ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up water for drinking or bathing.
+
+ Dolphin
+
+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+
+
+ Footer
+
+
+```
diff --git a/static/usage/v7/footer/translucent/react.md b/static/usage/v7/footer/translucent/react.md
new file mode 100644
index 00000000000..0a3884fb0cd
--- /dev/null
+++ b/static/usage/v7/footer/translucent/react.md
@@ -0,0 +1,40 @@
+```tsx
+import React from 'react';
+import { IonContent, IonFooter, IonTitle, IonToolbar } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+ Animal Facts
+
+ Rhinoceros
+
+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the Greek words rhino meaning ânoseâ and ceros meaning âhorn.â The number of horns that a rhino has varies on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while the Javan rhino and one-horned rhino have one horn.
+
+ Sea Turtle
+
+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for swimming, so they are vulnerable while on land.
+
+ Giraffe
+
+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the giraffe a âcamel-leopard.â Thatâs where the giraffeâs species name âcamelopardalisâ comes from.
+
+ Elephant
+
+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephantsâ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up water for drinking or bathing.
+
+ Dolphin
+
+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+
+
+ Footer
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/footer/translucent/vue.md b/static/usage/v7/footer/translucent/vue.md
new file mode 100644
index 00000000000..cd64be6bc88
--- /dev/null
+++ b/static/usage/v7/footer/translucent/vue.md
@@ -0,0 +1,41 @@
+```html
+
+
+ Animal Facts
+
+ Rhinoceros
+
+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the Greek words rhino meaning ânoseâ and ceros meaning âhorn.â The number of horns that a rhino has varies on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while the Javan rhino and one-horned rhino have one horn.
+
+ Sea Turtle
+
+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for swimming, so they are vulnerable while on land.
+
+ Giraffe
+
+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the giraffe a âcamel-leopard.â Thatâs where the giraffeâs species name âcamelopardalisâ comes from.
+
+ Elephant
+
+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephantsâ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up water for drinking or bathing.
+
+ Dolphin
+
+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+
+
+ Footer
+
+
+
+
+
+```
diff --git a/static/usage/v7/grid/basic/angular/example_component_css.md b/static/usage/v7/grid/basic/angular/example_component_css.md
new file mode 100644
index 00000000000..3aae3216f34
--- /dev/null
+++ b/static/usage/v7/grid/basic/angular/example_component_css.md
@@ -0,0 +1,8 @@
+```css
+ion-col {
+ background-color: #135d54;
+ border: solid 1px #fff;
+ color: #fff;
+ text-align: center;
+}
+```
diff --git a/static/usage/v7/grid/basic/angular/example_component_html.md b/static/usage/v7/grid/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..daa37c1e31f
--- /dev/null
+++ b/static/usage/v7/grid/basic/angular/example_component_html.md
@@ -0,0 +1,37 @@
+```html
+
+
+ 1
+ 2
+ 3
+
+
+
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+
+
+
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+ 7
+ 8
+ 9
+ 10
+ 11
+ 12
+
+
+```
diff --git a/static/usage/v7/grid/basic/demo.html b/static/usage/v7/grid/basic/demo.html
new file mode 100644
index 00000000000..36ef496f817
--- /dev/null
+++ b/static/usage/v7/grid/basic/demo.html
@@ -0,0 +1,77 @@
+
+
+
+
+
+
+ Grid
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 1
+ 2
+ 3
+
+
+
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+
+
+
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+ 7
+ 8
+ 9
+ 10
+ 11
+ 12
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/grid/basic/index.md b/static/usage/v7/grid/basic/index.md
new file mode 100644
index 00000000000..6945d9ba91b
--- /dev/null
+++ b/static/usage/v7/grid/basic/index.md
@@ -0,0 +1,33 @@
+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/grid/basic/javascript.md b/static/usage/v7/grid/basic/javascript.md
new file mode 100644
index 00000000000..53e0dd4f8c9
--- /dev/null
+++ b/static/usage/v7/grid/basic/javascript.md
@@ -0,0 +1,46 @@
+```html
+
+
+ 1
+ 2
+ 3
+
+
+
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+
+
+
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+ 7
+ 8
+ 9
+ 10
+ 11
+ 12
+
+
+
+
+```
diff --git a/static/usage/v7/grid/basic/react/main_css.md b/static/usage/v7/grid/basic/react/main_css.md
new file mode 100644
index 00000000000..3aae3216f34
--- /dev/null
+++ b/static/usage/v7/grid/basic/react/main_css.md
@@ -0,0 +1,8 @@
+```css
+ion-col {
+ background-color: #135d54;
+ border: solid 1px #fff;
+ color: #fff;
+ text-align: center;
+}
+```
diff --git a/static/usage/v7/grid/basic/react/main_tsx.md b/static/usage/v7/grid/basic/react/main_tsx.md
new file mode 100644
index 00000000000..9fb9652e4ce
--- /dev/null
+++ b/static/usage/v7/grid/basic/react/main_tsx.md
@@ -0,0 +1,49 @@
+```tsx
+import React from 'react';
+import { IonCol, IonGrid, IonRow } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+
+
+ 1
+ 2
+ 3
+
+
+
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+
+
+
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+ 7
+ 8
+ 9
+ 10
+ 11
+ 12
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/grid/basic/vue.md b/static/usage/v7/grid/basic/vue.md
new file mode 100644
index 00000000000..d693fc8510d
--- /dev/null
+++ b/static/usage/v7/grid/basic/vue.md
@@ -0,0 +1,57 @@
+```html
+
+
+
+ 1
+ 2
+ 3
+
+
+
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+
+
+
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+ 7
+ 8
+ 9
+ 10
+ 11
+ 12
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/grid/customizing/column-number/angular/example_component_css.md b/static/usage/v7/grid/customizing/column-number/angular/example_component_css.md
new file mode 100644
index 00000000000..ceadac1c05c
--- /dev/null
+++ b/static/usage/v7/grid/customizing/column-number/angular/example_component_css.md
@@ -0,0 +1,12 @@
+```css
+ion-grid {
+ --ion-grid-columns: 6;
+}
+
+ion-col {
+ background-color: #135d54;
+ border: solid 1px #fff;
+ color: #fff;
+ text-align: center;
+}
+```
diff --git a/static/usage/v7/grid/customizing/column-number/angular/example_component_html.md b/static/usage/v7/grid/customizing/column-number/angular/example_component_html.md
new file mode 100644
index 00000000000..6e9b744b161
--- /dev/null
+++ b/static/usage/v7/grid/customizing/column-number/angular/example_component_html.md
@@ -0,0 +1,11 @@
+```html
+Total number of columns is set to 6, column size is set to 1
+
+
+ 1
+ 2
+ 3
+ 4
+
+
+```
diff --git a/static/usage/v7/grid/customizing/column-number/demo.html b/static/usage/v7/grid/customizing/column-number/demo.html
new file mode 100644
index 00000000000..ee0550437e5
--- /dev/null
+++ b/static/usage/v7/grid/customizing/column-number/demo.html
@@ -0,0 +1,53 @@
+
+
+
+
+
+
+ Grid
+
+
+
+
+
+
+
+
+
+
+
+
+ Total number of columns is set to 6, column size is set to 1
+
+
+ 1
+ 2
+ 3
+ 4
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/grid/customizing/column-number/index.md b/static/usage/v7/grid/customizing/column-number/index.md
new file mode 100644
index 00000000000..eed737ae21f
--- /dev/null
+++ b/static/usage/v7/grid/customizing/column-number/index.md
@@ -0,0 +1,33 @@
+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/grid/customizing/column-number/javascript.md b/static/usage/v7/grid/customizing/column-number/javascript.md
new file mode 100644
index 00000000000..5c4c6edf166
--- /dev/null
+++ b/static/usage/v7/grid/customizing/column-number/javascript.md
@@ -0,0 +1,24 @@
+```html
+Total number of columns is set to 6, column size is set to 1
+
+
+ 1
+ 2
+ 3
+ 4
+
+
+
+
+```
diff --git a/static/usage/v7/grid/customizing/column-number/react/main_css.md b/static/usage/v7/grid/customizing/column-number/react/main_css.md
new file mode 100644
index 00000000000..ceadac1c05c
--- /dev/null
+++ b/static/usage/v7/grid/customizing/column-number/react/main_css.md
@@ -0,0 +1,12 @@
+```css
+ion-grid {
+ --ion-grid-columns: 6;
+}
+
+ion-col {
+ background-color: #135d54;
+ border: solid 1px #fff;
+ color: #fff;
+ text-align: center;
+}
+```
diff --git a/static/usage/v7/grid/customizing/column-number/react/main_tsx.md b/static/usage/v7/grid/customizing/column-number/react/main_tsx.md
new file mode 100644
index 00000000000..f911fdef9b4
--- /dev/null
+++ b/static/usage/v7/grid/customizing/column-number/react/main_tsx.md
@@ -0,0 +1,23 @@
+```tsx
+import React from 'react';
+import { IonCol, IonGrid, IonRow } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+ Total number of columns is set to 6, column size is set to 1
+
+
+ 1
+ 2
+ 3
+ 4
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/grid/customizing/column-number/vue.md b/static/usage/v7/grid/customizing/column-number/vue.md
new file mode 100644
index 00000000000..1af3143593f
--- /dev/null
+++ b/static/usage/v7/grid/customizing/column-number/vue.md
@@ -0,0 +1,35 @@
+```html
+
+ Total number of columns is set to 6, column size is set to 1
+
+
+ 1
+ 2
+ 3
+ 4
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/grid/customizing/padding/angular/example_component_css.md b/static/usage/v7/grid/customizing/padding/angular/example_component_css.md
new file mode 100644
index 00000000000..c7d165d3b75
--- /dev/null
+++ b/static/usage/v7/grid/customizing/padding/angular/example_component_css.md
@@ -0,0 +1,26 @@
+```css
+ion-grid {
+ --ion-grid-padding: 20px;
+
+ --ion-grid-padding-xs: 20px;
+ --ion-grid-padding-sm: 20px;
+ --ion-grid-padding-md: 20px;
+ --ion-grid-padding-lg: 20px;
+ --ion-grid-padding-xl: 20px;
+
+ --ion-grid-column-padding: 30px;
+
+ --ion-grid-column-padding-xs: 30px;
+ --ion-grid-column-padding-sm: 30px;
+ --ion-grid-column-padding-md: 30px;
+ --ion-grid-column-padding-lg: 30px;
+ --ion-grid-column-padding-xl: 30px;
+}
+
+ion-col {
+ background-color: #135d54;
+ border: solid 1px #fff;
+ color: #fff;
+ text-align: center;
+}
+```
diff --git a/static/usage/v7/grid/customizing/padding/angular/example_component_html.md b/static/usage/v7/grid/customizing/padding/angular/example_component_html.md
new file mode 100644
index 00000000000..74811052b30
--- /dev/null
+++ b/static/usage/v7/grid/customizing/padding/angular/example_component_html.md
@@ -0,0 +1,9 @@
+```html
+
+
+ 1
+ 2
+ 3
+
+
+```
diff --git a/static/usage/v7/grid/customizing/padding/demo.html b/static/usage/v7/grid/customizing/padding/demo.html
new file mode 100644
index 00000000000..38dae06af73
--- /dev/null
+++ b/static/usage/v7/grid/customizing/padding/demo.html
@@ -0,0 +1,65 @@
+
+
+
+
+
+
+ Grid
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 1
+ 2
+ 3
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/grid/customizing/padding/index.md b/static/usage/v7/grid/customizing/padding/index.md
new file mode 100644
index 00000000000..ea5280cc8f1
--- /dev/null
+++ b/static/usage/v7/grid/customizing/padding/index.md
@@ -0,0 +1,33 @@
+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/grid/customizing/padding/javascript.md b/static/usage/v7/grid/customizing/padding/javascript.md
new file mode 100644
index 00000000000..fea0d256a72
--- /dev/null
+++ b/static/usage/v7/grid/customizing/padding/javascript.md
@@ -0,0 +1,36 @@
+```html
+
+
+ 1
+ 2
+ 3
+
+
+
+
+```
diff --git a/static/usage/v7/grid/customizing/padding/react/main_css.md b/static/usage/v7/grid/customizing/padding/react/main_css.md
new file mode 100644
index 00000000000..c7d165d3b75
--- /dev/null
+++ b/static/usage/v7/grid/customizing/padding/react/main_css.md
@@ -0,0 +1,26 @@
+```css
+ion-grid {
+ --ion-grid-padding: 20px;
+
+ --ion-grid-padding-xs: 20px;
+ --ion-grid-padding-sm: 20px;
+ --ion-grid-padding-md: 20px;
+ --ion-grid-padding-lg: 20px;
+ --ion-grid-padding-xl: 20px;
+
+ --ion-grid-column-padding: 30px;
+
+ --ion-grid-column-padding-xs: 30px;
+ --ion-grid-column-padding-sm: 30px;
+ --ion-grid-column-padding-md: 30px;
+ --ion-grid-column-padding-lg: 30px;
+ --ion-grid-column-padding-xl: 30px;
+}
+
+ion-col {
+ background-color: #135d54;
+ border: solid 1px #fff;
+ color: #fff;
+ text-align: center;
+}
+```
diff --git a/static/usage/v7/grid/customizing/padding/react/main_tsx.md b/static/usage/v7/grid/customizing/padding/react/main_tsx.md
new file mode 100644
index 00000000000..4faf0a3cac1
--- /dev/null
+++ b/static/usage/v7/grid/customizing/padding/react/main_tsx.md
@@ -0,0 +1,21 @@
+```tsx
+import React from 'react';
+import { IonCol, IonGrid, IonRow } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+
+
+ 1
+ 2
+ 3
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/grid/customizing/padding/vue.md b/static/usage/v7/grid/customizing/padding/vue.md
new file mode 100644
index 00000000000..343511e231d
--- /dev/null
+++ b/static/usage/v7/grid/customizing/padding/vue.md
@@ -0,0 +1,47 @@
+```html
+
+
+
+ 1
+ 2
+ 3
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/grid/customizing/width/angular/example_component_css.md b/static/usage/v7/grid/customizing/width/angular/example_component_css.md
new file mode 100644
index 00000000000..bbb8f04519a
--- /dev/null
+++ b/static/usage/v7/grid/customizing/width/angular/example_component_css.md
@@ -0,0 +1,18 @@
+```css
+ion-grid {
+ --ion-grid-width: 50%;
+
+ --ion-grid-width-xs: 50%;
+ --ion-grid-width-sm: 288px;
+ --ion-grid-width-md: 384px;
+ --ion-grid-width-lg: 480px;
+ --ion-grid-width-xl: 570px;
+}
+
+ion-col {
+ background-color: #135d54;
+ border: solid 1px #fff;
+ color: #fff;
+ text-align: center;
+}
+```
diff --git a/static/usage/v7/grid/customizing/width/angular/example_component_html.md b/static/usage/v7/grid/customizing/width/angular/example_component_html.md
new file mode 100644
index 00000000000..0688212c247
--- /dev/null
+++ b/static/usage/v7/grid/customizing/width/angular/example_component_html.md
@@ -0,0 +1,9 @@
+```html
+
+
+ 1
+ 2
+ 3
+
+
+```
diff --git a/static/usage/v7/grid/customizing/width/demo.html b/static/usage/v7/grid/customizing/width/demo.html
new file mode 100644
index 00000000000..09527dca430
--- /dev/null
+++ b/static/usage/v7/grid/customizing/width/demo.html
@@ -0,0 +1,56 @@
+
+
+
+
+
+
+ Grid
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 1
+ 2
+ 3
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/grid/customizing/width/index.md b/static/usage/v7/grid/customizing/width/index.md
new file mode 100644
index 00000000000..99ea8710f85
--- /dev/null
+++ b/static/usage/v7/grid/customizing/width/index.md
@@ -0,0 +1,33 @@
+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/grid/customizing/width/javascript.md b/static/usage/v7/grid/customizing/width/javascript.md
new file mode 100644
index 00000000000..2ff36295b70
--- /dev/null
+++ b/static/usage/v7/grid/customizing/width/javascript.md
@@ -0,0 +1,28 @@
+```html
+
+
+ 1
+ 2
+ 3
+
+
+
+
+```
diff --git a/static/usage/v7/grid/customizing/width/react/main_css.md b/static/usage/v7/grid/customizing/width/react/main_css.md
new file mode 100644
index 00000000000..bbb8f04519a
--- /dev/null
+++ b/static/usage/v7/grid/customizing/width/react/main_css.md
@@ -0,0 +1,18 @@
+```css
+ion-grid {
+ --ion-grid-width: 50%;
+
+ --ion-grid-width-xs: 50%;
+ --ion-grid-width-sm: 288px;
+ --ion-grid-width-md: 384px;
+ --ion-grid-width-lg: 480px;
+ --ion-grid-width-xl: 570px;
+}
+
+ion-col {
+ background-color: #135d54;
+ border: solid 1px #fff;
+ color: #fff;
+ text-align: center;
+}
+```
diff --git a/static/usage/v7/grid/customizing/width/react/main_tsx.md b/static/usage/v7/grid/customizing/width/react/main_tsx.md
new file mode 100644
index 00000000000..73ccebd0606
--- /dev/null
+++ b/static/usage/v7/grid/customizing/width/react/main_tsx.md
@@ -0,0 +1,19 @@
+```tsx
+import React from 'react';
+import { IonCol, IonGrid, IonRow } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+
+
+ 1
+ 2
+ 3
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/grid/customizing/width/vue.md b/static/usage/v7/grid/customizing/width/vue.md
new file mode 100644
index 00000000000..40b0002e822
--- /dev/null
+++ b/static/usage/v7/grid/customizing/width/vue.md
@@ -0,0 +1,39 @@
+```html
+
+
+
+ 1
+ 2
+ 3
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/grid/fixed/angular/example_component_css.md b/static/usage/v7/grid/fixed/angular/example_component_css.md
new file mode 100644
index 00000000000..3aae3216f34
--- /dev/null
+++ b/static/usage/v7/grid/fixed/angular/example_component_css.md
@@ -0,0 +1,8 @@
+```css
+ion-col {
+ background-color: #135d54;
+ border: solid 1px #fff;
+ color: #fff;
+ text-align: center;
+}
+```
diff --git a/static/usage/v7/grid/fixed/angular/example_component_html.md b/static/usage/v7/grid/fixed/angular/example_component_html.md
new file mode 100644
index 00000000000..0688212c247
--- /dev/null
+++ b/static/usage/v7/grid/fixed/angular/example_component_html.md
@@ -0,0 +1,9 @@
+```html
+
+
+ 1
+ 2
+ 3
+
+
+```
diff --git a/static/usage/v7/grid/fixed/demo.html b/static/usage/v7/grid/fixed/demo.html
new file mode 100644
index 00000000000..9dcc3781d7c
--- /dev/null
+++ b/static/usage/v7/grid/fixed/demo.html
@@ -0,0 +1,48 @@
+
+
+
+
+
+
+ Grid
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 1
+ 2
+ 3
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/grid/fixed/index.md b/static/usage/v7/grid/fixed/index.md
new file mode 100644
index 00000000000..bede2ed6bc7
--- /dev/null
+++ b/static/usage/v7/grid/fixed/index.md
@@ -0,0 +1,33 @@
+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/grid/fixed/javascript.md b/static/usage/v7/grid/fixed/javascript.md
new file mode 100644
index 00000000000..5fa9672a8ab
--- /dev/null
+++ b/static/usage/v7/grid/fixed/javascript.md
@@ -0,0 +1,18 @@
+```html
+
+
+ 1
+ 2
+ 3
+
+
+
+
+```
diff --git a/static/usage/v7/grid/fixed/react/main_css.md b/static/usage/v7/grid/fixed/react/main_css.md
new file mode 100644
index 00000000000..3aae3216f34
--- /dev/null
+++ b/static/usage/v7/grid/fixed/react/main_css.md
@@ -0,0 +1,8 @@
+```css
+ion-col {
+ background-color: #135d54;
+ border: solid 1px #fff;
+ color: #fff;
+ text-align: center;
+}
+```
diff --git a/static/usage/v7/grid/fixed/react/main_tsx.md b/static/usage/v7/grid/fixed/react/main_tsx.md
new file mode 100644
index 00000000000..73ccebd0606
--- /dev/null
+++ b/static/usage/v7/grid/fixed/react/main_tsx.md
@@ -0,0 +1,19 @@
+```tsx
+import React from 'react';
+import { IonCol, IonGrid, IonRow } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+
+
+ 1
+ 2
+ 3
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/grid/fixed/vue.md b/static/usage/v7/grid/fixed/vue.md
new file mode 100644
index 00000000000..fbaa7118bbd
--- /dev/null
+++ b/static/usage/v7/grid/fixed/vue.md
@@ -0,0 +1,29 @@
+```html
+
+
+
+ 1
+ 2
+ 3
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/grid/horizontal-alignment/angular/example_component_css.md b/static/usage/v7/grid/horizontal-alignment/angular/example_component_css.md
new file mode 100644
index 00000000000..3aae3216f34
--- /dev/null
+++ b/static/usage/v7/grid/horizontal-alignment/angular/example_component_css.md
@@ -0,0 +1,8 @@
+```css
+ion-col {
+ background-color: #135d54;
+ border: solid 1px #fff;
+ color: #fff;
+ text-align: center;
+}
+```
diff --git a/static/usage/v7/grid/horizontal-alignment/angular/example_component_html.md b/static/usage/v7/grid/horizontal-alignment/angular/example_component_html.md
new file mode 100644
index 00000000000..63a33b6361e
--- /dev/null
+++ b/static/usage/v7/grid/horizontal-alignment/angular/example_component_html.md
@@ -0,0 +1,61 @@
+```html
+Columns aligned at the start
+
+
+
+ 1
+
+
+ 2
+
+
+
+
+Columns aligned at the center
+
+
+
+ 1
+
+
+ 2
+
+
+
+
+Columns aligned at the end
+
+
+
+ 1
+
+
+ 2
+
+
+
+
+Columns aligned with space around
+
+
+
+ 1
+
+
+ 2
+
+
+
+
+Columns aligned with space between
+
+
+
+ 1
+
+
+ 2
+
+
+
+```
diff --git a/static/usage/v7/grid/horizontal-alignment/demo.html b/static/usage/v7/grid/horizontal-alignment/demo.html
new file mode 100644
index 00000000000..2960357e81e
--- /dev/null
+++ b/static/usage/v7/grid/horizontal-alignment/demo.html
@@ -0,0 +1,100 @@
+
+
+
+
+
+
+ Grid
+
+
+
+
+
+
+
+
+
+
+
+
+
Columns aligned at the start
+
+
+
+ 1
+
+
+ 2
+
+
+
+
+
Columns aligned at the center
+
+
+
+ 1
+
+
+ 2
+
+
+
+
+
Columns aligned at the end
+
+
+
+ 1
+
+
+ 2
+
+
+
+
+
Columns aligned with space around
+
+
+
+ 1
+
+
+ 2
+
+
+
+
+
Columns aligned with space between
+
+
+
+ 1
+
+
+ 2
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/grid/horizontal-alignment/index.md b/static/usage/v7/grid/horizontal-alignment/index.md
new file mode 100644
index 00000000000..aa44db5ad2d
--- /dev/null
+++ b/static/usage/v7/grid/horizontal-alignment/index.md
@@ -0,0 +1,33 @@
+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/grid/horizontal-alignment/javascript.md b/static/usage/v7/grid/horizontal-alignment/javascript.md
new file mode 100644
index 00000000000..79a8e723d8e
--- /dev/null
+++ b/static/usage/v7/grid/horizontal-alignment/javascript.md
@@ -0,0 +1,70 @@
+```html
+
Columns aligned at the start
+
+
+
+ 1
+
+
+ 2
+
+
+
+
+
Columns aligned at the center
+
+
+
+ 1
+
+
+ 2
+
+
+
+
+
Columns aligned at the end
+
+
+
+ 1
+
+
+ 2
+
+
+
+
+
Columns aligned with space around
+
+
+
+ 1
+
+
+ 2
+
+
+
+
+
Columns aligned with space between
+
+
+
+ 1
+
+
+ 2
+
+
+
+
+
+```
diff --git a/static/usage/v7/grid/horizontal-alignment/react/main_css.md b/static/usage/v7/grid/horizontal-alignment/react/main_css.md
new file mode 100644
index 00000000000..3aae3216f34
--- /dev/null
+++ b/static/usage/v7/grid/horizontal-alignment/react/main_css.md
@@ -0,0 +1,8 @@
+```css
+ion-col {
+ background-color: #135d54;
+ border: solid 1px #fff;
+ color: #fff;
+ text-align: center;
+}
+```
diff --git a/static/usage/v7/grid/horizontal-alignment/react/main_tsx.md b/static/usage/v7/grid/horizontal-alignment/react/main_tsx.md
new file mode 100644
index 00000000000..320fb74063c
--- /dev/null
+++ b/static/usage/v7/grid/horizontal-alignment/react/main_tsx.md
@@ -0,0 +1,73 @@
+```tsx
+import React from 'react';
+import { IonCol, IonGrid, IonRow } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+
Columns aligned at the start
+
+
+
+ 1
+
+
+ 2
+
+
+
+
+
Columns aligned at the center
+
+
+
+ 1
+
+
+ 2
+
+
+
+
+
Columns aligned at the end
+
+
+
+ 1
+
+
+ 2
+
+
+
+
+
Columns aligned with space around
+
+
+
+ 1
+
+
+ 2
+
+
+
+
+
Columns aligned with space between
+
+
+
+ 1
+
+
+ 2
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/grid/horizontal-alignment/vue.md b/static/usage/v7/grid/horizontal-alignment/vue.md
new file mode 100644
index 00000000000..4cb3c1bcefd
--- /dev/null
+++ b/static/usage/v7/grid/horizontal-alignment/vue.md
@@ -0,0 +1,81 @@
+```html
+
+ Columns aligned at the start
+
+
+
+ 1
+
+
+ 2
+
+
+
+
+ Columns aligned at the center
+
+
+
+ 1
+
+
+ 2
+
+
+
+
+ Columns aligned at the end
+
+
+
+ 1
+
+
+ 2
+
+
+
+
+ Columns aligned with space around
+
+
+
+ 1
+
+
+ 2
+
+
+
+
+ Columns aligned with space between
+
+
+
+ 1
+
+
+ 2
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/grid/offset-responsive/angular/example_component_css.md b/static/usage/v7/grid/offset-responsive/angular/example_component_css.md
new file mode 100644
index 00000000000..3aae3216f34
--- /dev/null
+++ b/static/usage/v7/grid/offset-responsive/angular/example_component_css.md
@@ -0,0 +1,8 @@
+```css
+ion-col {
+ background-color: #135d54;
+ border: solid 1px #fff;
+ color: #fff;
+ text-align: center;
+}
+```
diff --git a/static/usage/v7/grid/offset-responsive/angular/example_component_html.md b/static/usage/v7/grid/offset-responsive/angular/example_component_html.md
new file mode 100644
index 00000000000..09088adcd03
--- /dev/null
+++ b/static/usage/v7/grid/offset-responsive/angular/example_component_html.md
@@ -0,0 +1,30 @@
+```html
+
No offset for xs breakpoint, offset 1st column for sm and up
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+
+
+
+
No offset for xs breakpoint, offset last 3 columns for md and up
+
+
+ 1
+ 2
+ 3
+ 4
+
+
+
+
Offset all columns by 6 for xs breakpoint, offset by 4 for md, offset by 2 for lg and up
+
+
+ 1
+ 2
+
+
+```
diff --git a/static/usage/v7/grid/offset-responsive/demo.html b/static/usage/v7/grid/offset-responsive/demo.html
new file mode 100644
index 00000000000..07c5cdca37b
--- /dev/null
+++ b/static/usage/v7/grid/offset-responsive/demo.html
@@ -0,0 +1,70 @@
+
+
+
+
+
+
+
Grid
+
+
+
+
+
+
+
+
+
+
+
+
+ No offset for xs breakpoint, offset 1st column for sm and up
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+
+
+
+ No offset for xs breakpoint, offset last 3 columns for md and up
+
+
+ 1
+ 2
+ 3
+ 4
+
+
+
+ Offset all columns by 6 for xs breakpoint, offset by 4 for md, offset by 2 for lg and up
+
+
+ 1
+ 2
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/grid/offset-responsive/index.md b/static/usage/v7/grid/offset-responsive/index.md
new file mode 100644
index 00000000000..8ed07e871b5
--- /dev/null
+++ b/static/usage/v7/grid/offset-responsive/index.md
@@ -0,0 +1,33 @@
+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/grid/offset-responsive/javascript.md b/static/usage/v7/grid/offset-responsive/javascript.md
new file mode 100644
index 00000000000..f380aa503c0
--- /dev/null
+++ b/static/usage/v7/grid/offset-responsive/javascript.md
@@ -0,0 +1,39 @@
+```html
+
No offset for xs breakpoint, offset 1st column for sm and up
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+
+
+
+
No offset for xs breakpoint, offset last 3 columns for md and up
+
+
+ 1
+ 2
+ 3
+ 4
+
+
+
+
Offset all columns by 6 for xs breakpoint, offset by 4 for md, offset by 2 for lg and up
+
+
+ 1
+ 2
+
+
+
+
+```
diff --git a/static/usage/v7/grid/offset-responsive/react/main_css.md b/static/usage/v7/grid/offset-responsive/react/main_css.md
new file mode 100644
index 00000000000..3aae3216f34
--- /dev/null
+++ b/static/usage/v7/grid/offset-responsive/react/main_css.md
@@ -0,0 +1,8 @@
+```css
+ion-col {
+ background-color: #135d54;
+ border: solid 1px #fff;
+ color: #fff;
+ text-align: center;
+}
+```
diff --git a/static/usage/v7/grid/offset-responsive/react/main_tsx.md b/static/usage/v7/grid/offset-responsive/react/main_tsx.md
new file mode 100644
index 00000000000..482f957cde8
--- /dev/null
+++ b/static/usage/v7/grid/offset-responsive/react/main_tsx.md
@@ -0,0 +1,42 @@
+```tsx
+import React from 'react';
+import { IonCol, IonGrid, IonRow } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+
No offset for xs breakpoint, offset 1st column for sm and up
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+
+
+
+
No offset for xs breakpoint, offset last 3 columns for md and up
+
+
+ 1
+ 2
+ 3
+ 4
+
+
+
+
Offset all columns by 6 for xs breakpoint, offset by 4 for md, offset by 2 for lg and up
+
+
+ 1
+ 2
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/grid/offset-responsive/vue.md b/static/usage/v7/grid/offset-responsive/vue.md
new file mode 100644
index 00000000000..ca540bee471
--- /dev/null
+++ b/static/usage/v7/grid/offset-responsive/vue.md
@@ -0,0 +1,50 @@
+```html
+
+ No offset for xs breakpoint, offset 1st column for sm and up
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+
+
+
+ No offset for xs breakpoint, offset last 3 columns for md and up
+
+
+ 1
+ 2
+ 3
+ 4
+
+
+
+ Offset all columns by 6 for xs breakpoint, offset by 4 for md, offset by 2 for lg and up
+
+
+ 1
+ 2
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/grid/offset/angular/example_component_css.md b/static/usage/v7/grid/offset/angular/example_component_css.md
new file mode 100644
index 00000000000..3aae3216f34
--- /dev/null
+++ b/static/usage/v7/grid/offset/angular/example_component_css.md
@@ -0,0 +1,8 @@
+```css
+ion-col {
+ background-color: #135d54;
+ border: solid 1px #fff;
+ color: #fff;
+ text-align: center;
+}
+```
diff --git a/static/usage/v7/grid/offset/angular/example_component_html.md b/static/usage/v7/grid/offset/angular/example_component_html.md
new file mode 100644
index 00000000000..66e044507a8
--- /dev/null
+++ b/static/usage/v7/grid/offset/angular/example_component_html.md
@@ -0,0 +1,29 @@
+```html
+
Column 2 has offset set to "3"
+
+
+ 1
+ 2
+ 3
+
+
+
+
Column 5 has offset set to "2"
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+
+
+
+
Column 1 has offset set to "4"
+
+
+ 1
+ 2
+
+
+```
diff --git a/static/usage/v7/grid/offset/demo.html b/static/usage/v7/grid/offset/demo.html
new file mode 100644
index 00000000000..876e4f9acf1
--- /dev/null
+++ b/static/usage/v7/grid/offset/demo.html
@@ -0,0 +1,69 @@
+
+
+
+
+
+
+
Grid
+
+
+
+
+
+
+
+
+
+
+
+
+ Column 2 has offset set to "3"
+
+
+ 1
+ 2
+ 3
+
+
+
+ Column 5 has offset set to "2"
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+
+
+
+ Column 1 has offset set to "4"
+
+
+ 1
+ 2
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/grid/offset/index.md b/static/usage/v7/grid/offset/index.md
new file mode 100644
index 00000000000..27a55412d53
--- /dev/null
+++ b/static/usage/v7/grid/offset/index.md
@@ -0,0 +1,33 @@
+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/grid/offset/javascript.md b/static/usage/v7/grid/offset/javascript.md
new file mode 100644
index 00000000000..dcb717dd8d2
--- /dev/null
+++ b/static/usage/v7/grid/offset/javascript.md
@@ -0,0 +1,38 @@
+```html
+
Column 2 has offset set to "3"
+
+
+ 1
+ 2
+ 3
+
+
+
+
Column 5 has offset set to "2"
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+
+
+
+
Column 1 has offset set to "4"
+
+
+ 1
+ 2
+
+
+
+
+```
diff --git a/static/usage/v7/grid/offset/react/main_css.md b/static/usage/v7/grid/offset/react/main_css.md
new file mode 100644
index 00000000000..3aae3216f34
--- /dev/null
+++ b/static/usage/v7/grid/offset/react/main_css.md
@@ -0,0 +1,8 @@
+```css
+ion-col {
+ background-color: #135d54;
+ border: solid 1px #fff;
+ color: #fff;
+ text-align: center;
+}
+```
diff --git a/static/usage/v7/grid/offset/react/main_tsx.md b/static/usage/v7/grid/offset/react/main_tsx.md
new file mode 100644
index 00000000000..99add2f8a44
--- /dev/null
+++ b/static/usage/v7/grid/offset/react/main_tsx.md
@@ -0,0 +1,41 @@
+```tsx
+import React from 'react';
+import { IonCol, IonGrid, IonRow } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+
Column 2 has offset set to "3"
+
+
+ 1
+ 2
+ 3
+
+
+
+
Column 5 has offset set to "2"
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+
+
+
+
Column 1 has offset set to "4"
+
+
+ 1
+ 2
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/grid/offset/vue.md b/static/usage/v7/grid/offset/vue.md
new file mode 100644
index 00000000000..1a69ea6e061
--- /dev/null
+++ b/static/usage/v7/grid/offset/vue.md
@@ -0,0 +1,49 @@
+```html
+
+ Column 2 has offset set to "3"
+
+
+ 1
+ 2
+ 3
+
+
+
+ Column 5 has offset set to "2"
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+
+
+
+ Column 1 has offset set to "4"
+
+
+ 1
+ 2
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/grid/push-pull-responsive/angular/example_component_css.md b/static/usage/v7/grid/push-pull-responsive/angular/example_component_css.md
new file mode 100644
index 00000000000..3aae3216f34
--- /dev/null
+++ b/static/usage/v7/grid/push-pull-responsive/angular/example_component_css.md
@@ -0,0 +1,8 @@
+```css
+ion-col {
+ background-color: #135d54;
+ border: solid 1px #fff;
+ color: #fff;
+ text-align: center;
+}
+```
diff --git a/static/usage/v7/grid/push-pull-responsive/angular/example_component_html.md b/static/usage/v7/grid/push-pull-responsive/angular/example_component_html.md
new file mode 100644
index 00000000000..4e67838643e
--- /dev/null
+++ b/static/usage/v7/grid/push-pull-responsive/angular/example_component_html.md
@@ -0,0 +1,31 @@
+```html
+
No change for xs breakpoint, push 1st column & pull 2nd column for sm and up
+
+
+ 1
+ 2
+
+
+
+
No change for xs breakpoint, push middle columns & pull last column for md and up
+
+
+ 1
+ 2
+ 3
+ 4
+
+
+
+
Switch first and last 3 columns for xs breakpoints, reverse columns for lg and up
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+
+
+```
diff --git a/static/usage/v7/grid/push-pull-responsive/demo.html b/static/usage/v7/grid/push-pull-responsive/demo.html
new file mode 100644
index 00000000000..aa956b2c1b0
--- /dev/null
+++ b/static/usage/v7/grid/push-pull-responsive/demo.html
@@ -0,0 +1,71 @@
+
+
+
+
+
+
+
Grid
+
+
+
+
+
+
+
+
+
+
+
+
+ No change for xs breakpoint, push 1st column & pull 2nd column for sm and up
+
+
+ 1
+ 2
+
+
+
+ No change for xs breakpoint, push middle columns & pull last column for md and up
+
+
+ 1
+ 2
+ 3
+ 4
+
+
+
+ Switch first and last 3 columns for xs breakpoints, reverse columns for lg and up
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/grid/push-pull-responsive/index.md b/static/usage/v7/grid/push-pull-responsive/index.md
new file mode 100644
index 00000000000..cd608eaae70
--- /dev/null
+++ b/static/usage/v7/grid/push-pull-responsive/index.md
@@ -0,0 +1,33 @@
+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/grid/push-pull-responsive/javascript.md b/static/usage/v7/grid/push-pull-responsive/javascript.md
new file mode 100644
index 00000000000..05c03f1def8
--- /dev/null
+++ b/static/usage/v7/grid/push-pull-responsive/javascript.md
@@ -0,0 +1,40 @@
+```html
+
No change for xs breakpoint, push 1st column & pull 2nd column for sm and up
+
+
+ 1
+ 2
+
+
+
+
No change for xs breakpoint, push middle columns & pull last column for md and up
+
+
+ 1
+ 2
+ 3
+ 4
+
+
+
+
Switch first and last 3 columns for xs breakpoints, reverse columns for lg and up
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+
+
+
+
+```
diff --git a/static/usage/v7/grid/push-pull-responsive/react/main_css.md b/static/usage/v7/grid/push-pull-responsive/react/main_css.md
new file mode 100644
index 00000000000..3aae3216f34
--- /dev/null
+++ b/static/usage/v7/grid/push-pull-responsive/react/main_css.md
@@ -0,0 +1,8 @@
+```css
+ion-col {
+ background-color: #135d54;
+ border: solid 1px #fff;
+ color: #fff;
+ text-align: center;
+}
+```
diff --git a/static/usage/v7/grid/push-pull-responsive/react/main_tsx.md b/static/usage/v7/grid/push-pull-responsive/react/main_tsx.md
new file mode 100644
index 00000000000..3f6e2879e08
--- /dev/null
+++ b/static/usage/v7/grid/push-pull-responsive/react/main_tsx.md
@@ -0,0 +1,43 @@
+```tsx
+import React from 'react';
+import { IonCol, IonGrid, IonRow } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+
No change for xs breakpoint, push 1st column & pull 2nd column for sm and up
+
+
+ 1
+ 2
+
+
+
+
No change for xs breakpoint, push middle columns & pull last column for md and up
+
+
+ 1
+ 2
+ 3
+ 4
+
+
+
+
Switch first and last 3 columns for xs breakpoints, reverse columns for lg and up
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/grid/push-pull-responsive/vue.md b/static/usage/v7/grid/push-pull-responsive/vue.md
new file mode 100644
index 00000000000..82015e52758
--- /dev/null
+++ b/static/usage/v7/grid/push-pull-responsive/vue.md
@@ -0,0 +1,51 @@
+```html
+
+ No change for xs breakpoint, push 1st column & pull 2nd column for sm and up
+
+
+ 1
+ 2
+
+
+
+ No change for xs breakpoint, push middle columns & pull last column for md and up
+
+
+ 1
+ 2
+ 3
+ 4
+
+
+
+ Switch first and last 3 columns for xs breakpoints, reverse columns for lg and up
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/grid/push-pull/angular/example_component_css.md b/static/usage/v7/grid/push-pull/angular/example_component_css.md
new file mode 100644
index 00000000000..3aae3216f34
--- /dev/null
+++ b/static/usage/v7/grid/push-pull/angular/example_component_css.md
@@ -0,0 +1,8 @@
+```css
+ion-col {
+ background-color: #135d54;
+ border: solid 1px #fff;
+ color: #fff;
+ text-align: center;
+}
+```
diff --git a/static/usage/v7/grid/push-pull/angular/example_component_html.md b/static/usage/v7/grid/push-pull/angular/example_component_html.md
new file mode 100644
index 00000000000..cb8190ef9e9
--- /dev/null
+++ b/static/usage/v7/grid/push-pull/angular/example_component_html.md
@@ -0,0 +1,30 @@
+```html
+
Column 1 has push set to "4" and column 2 has pull set to "4"
+
+
+ 1
+ 2
+ 3
+
+
+
+
Column 2 has push set to "4" and column 3 & 4 have pull set to "2"
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+
+
+
+
Column 1 has push set to "3" and column 2 has pull set to "9"
+
+
+ 1
+ 2
+
+
+```
diff --git a/static/usage/v7/grid/push-pull/demo.html b/static/usage/v7/grid/push-pull/demo.html
new file mode 100644
index 00000000000..b34be1bb39d
--- /dev/null
+++ b/static/usage/v7/grid/push-pull/demo.html
@@ -0,0 +1,73 @@
+
+
+
+
+
+
+
Grid
+
+
+
+
+
+
+
+
+
+
+
+
+ Column 1 has push set to "4" and column 2 has pull set to
+ "4"
+
+
+ 1
+ 2
+ 3
+
+
+
+ Column 2 has push set to "4" and column 3 & 4 have pull set to
+ "2"
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+
+
+
+ Column 1 has push set to "3" and column 2 has pull set to
+ "9"
+
+
+ 1
+ 2
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/grid/push-pull/index.md b/static/usage/v7/grid/push-pull/index.md
new file mode 100644
index 00000000000..a723dfd08f1
--- /dev/null
+++ b/static/usage/v7/grid/push-pull/index.md
@@ -0,0 +1,33 @@
+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/grid/push-pull/javascript.md b/static/usage/v7/grid/push-pull/javascript.md
new file mode 100644
index 00000000000..6dca0e83ec4
--- /dev/null
+++ b/static/usage/v7/grid/push-pull/javascript.md
@@ -0,0 +1,39 @@
+```html
+
Column 1 has push set to "4" and column 2 has pull set to "4"
+
+
+ 1
+ 2
+ 3
+
+
+
+
Column 2 has push set to "4" and column 3 & 4 have pull set to "2"
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+
+
+
+
Column 1 has push set to "3" and column 2 has pull set to "9"
+
+
+ 1
+ 2
+
+
+
+
+```
diff --git a/static/usage/v7/grid/push-pull/react/main_css.md b/static/usage/v7/grid/push-pull/react/main_css.md
new file mode 100644
index 00000000000..3aae3216f34
--- /dev/null
+++ b/static/usage/v7/grid/push-pull/react/main_css.md
@@ -0,0 +1,8 @@
+```css
+ion-col {
+ background-color: #135d54;
+ border: solid 1px #fff;
+ color: #fff;
+ text-align: center;
+}
+```
diff --git a/static/usage/v7/grid/push-pull/react/main_tsx.md b/static/usage/v7/grid/push-pull/react/main_tsx.md
new file mode 100644
index 00000000000..6b087b72b77
--- /dev/null
+++ b/static/usage/v7/grid/push-pull/react/main_tsx.md
@@ -0,0 +1,42 @@
+```tsx
+import React from 'react';
+import { IonCol, IonGrid, IonRow } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+
Column 1 has push set to "4" and column 2 has pull set to "4"
+
+
+ 1
+ 2
+ 3
+
+
+
+
Column 2 has push set to "4" and column 3 & 4 have pull set to "2"
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+
+
+
+
Column 1 has push set to "3" and column 2 has pull set to "9"
+
+
+ 1
+ 2
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/grid/push-pull/vue.md b/static/usage/v7/grid/push-pull/vue.md
new file mode 100644
index 00000000000..2775067f7a7
--- /dev/null
+++ b/static/usage/v7/grid/push-pull/vue.md
@@ -0,0 +1,50 @@
+```html
+
+ Column 1 has push set to "4" and column 2 has pull set to "4"
+
+
+ 1
+ 2
+ 3
+
+
+
+ Column 2 has push set to "4" and column 3 & 4 have pull set to "2"
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+
+
+
+ Column 1 has push set to "3" and column 2 has pull set to "9"
+
+
+ 1
+ 2
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/grid/size-auto/angular/example_component_css.md b/static/usage/v7/grid/size-auto/angular/example_component_css.md
new file mode 100644
index 00000000000..be364843a89
--- /dev/null
+++ b/static/usage/v7/grid/size-auto/angular/example_component_css.md
@@ -0,0 +1,12 @@
+```css
+ion-col {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+
+ background-color: #135d54;
+ border: solid 1px #fff;
+ color: #fff;
+}
+```
diff --git a/static/usage/v7/grid/size-auto/angular/example_component_html.md b/static/usage/v7/grid/size-auto/angular/example_component_html.md
new file mode 100644
index 00000000000..fc4515ea984
--- /dev/null
+++ b/static/usage/v7/grid/size-auto/angular/example_component_html.md
@@ -0,0 +1,34 @@
+```html
+
Column 1 has size set to "auto"
+
+
+ 1
+ 2
+ 3
+
+
+
+
Column 3 contains an input and has size set to "auto"
+
+
+ 1
+ 2
+
+
+
+ 4
+ 5
+ 6
+
+
+
+
Column 2 has size set to "auto" and a defined width
+
+
+ 1
+
+ 2
+
+
+
+```
diff --git a/static/usage/v7/grid/size-auto/demo.html b/static/usage/v7/grid/size-auto/demo.html
new file mode 100644
index 00000000000..364d5db3c9a
--- /dev/null
+++ b/static/usage/v7/grid/size-auto/demo.html
@@ -0,0 +1,78 @@
+
+
+
+
+
+
+
Grid
+
+
+
+
+
+
+
+
+
+
+
+
+
Column 1 has size set to "auto"
+
+
+ 1
+ 2
+ 3
+
+
+
+
Column 3 contains an input and has size set to "auto"
+
+
+ 1
+ 2
+
+
+
+ 4
+ 5
+ 6
+
+
+
+
Column 2 has size set to "auto" and a defined width
+
+
+ 1
+
+ 2
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/grid/size-auto/index.md b/static/usage/v7/grid/size-auto/index.md
new file mode 100644
index 00000000000..2da3611d3be
--- /dev/null
+++ b/static/usage/v7/grid/size-auto/index.md
@@ -0,0 +1,33 @@
+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/grid/size-auto/javascript.md b/static/usage/v7/grid/size-auto/javascript.md
new file mode 100644
index 00000000000..7f6619df1f5
--- /dev/null
+++ b/static/usage/v7/grid/size-auto/javascript.md
@@ -0,0 +1,47 @@
+```html
+
Column 1 has size set to "auto"
+
+
+ 1
+ 2
+ 3
+
+
+
+
Column 3 contains an input and has size set to "auto"
+
+
+ 1
+ 2
+
+
+
+ 4
+ 5
+ 6
+
+
+
+
Column 2 has size set to "auto" and a defined width
+
+
+ 1
+
+ 2
+
+
+
+
+
+```
diff --git a/static/usage/v7/grid/size-auto/react/main_css.md b/static/usage/v7/grid/size-auto/react/main_css.md
new file mode 100644
index 00000000000..be364843a89
--- /dev/null
+++ b/static/usage/v7/grid/size-auto/react/main_css.md
@@ -0,0 +1,12 @@
+```css
+ion-col {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+
+ background-color: #135d54;
+ border: solid 1px #fff;
+ color: #fff;
+}
+```
diff --git a/static/usage/v7/grid/size-auto/react/main_tsx.md b/static/usage/v7/grid/size-auto/react/main_tsx.md
new file mode 100644
index 00000000000..15a19d04abe
--- /dev/null
+++ b/static/usage/v7/grid/size-auto/react/main_tsx.md
@@ -0,0 +1,46 @@
+```tsx
+import React from 'react';
+import { IonCol, IonGrid, IonInput, IonRow } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+
Column 1 has size set to "auto"
+
+
+ 1
+ 2
+ 3
+
+
+
+
Column 3 contains an input and has size set to "auto"
+
+
+ 1
+ 2
+
+
+
+ 4
+ 5
+ 6
+
+
+
+
Column 2 has size set to "auto" and a defined width
+
+
+ 1
+
+ 2
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/grid/size-auto/vue.md b/static/usage/v7/grid/size-auto/vue.md
new file mode 100644
index 00000000000..f410272730d
--- /dev/null
+++ b/static/usage/v7/grid/size-auto/vue.md
@@ -0,0 +1,58 @@
+```html
+
+ Column 1 has size set to "auto"
+
+
+ 1
+ 2
+ 3
+
+
+
+ Column 3 contains an input and has size set to "auto"
+
+
+ 1
+ 2
+
+
+
+ 4
+ 5
+ 6
+
+
+
+ Column 2 has size set to "auto" and a defined width
+
+
+ 1
+
+ 2
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/grid/size-responsive/angular/example_component_css.md b/static/usage/v7/grid/size-responsive/angular/example_component_css.md
new file mode 100644
index 00000000000..3aae3216f34
--- /dev/null
+++ b/static/usage/v7/grid/size-responsive/angular/example_component_css.md
@@ -0,0 +1,8 @@
+```css
+ion-col {
+ background-color: #135d54;
+ border: solid 1px #fff;
+ color: #fff;
+ text-align: center;
+}
+```
diff --git a/static/usage/v7/grid/size-responsive/angular/example_component_html.md b/static/usage/v7/grid/size-responsive/angular/example_component_html.md
new file mode 100644
index 00000000000..62f96cb5800
--- /dev/null
+++ b/static/usage/v7/grid/size-responsive/angular/example_component_html.md
@@ -0,0 +1,32 @@
+```html
+
Stacked for xs breakpoint, equal width for sm and up
+
+
+ 1
+ 2
+ 3
+ 4
+
+
+
+
Equal width until md breakpoint, last column takes full width for md and up
+
+
+ 1
+ 2
+ 3
+
+
+
+
2 per row until md breakpoint, 3 per row for md, equal width for lg and up
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+
+
+```
diff --git a/static/usage/v7/grid/size-responsive/demo.html b/static/usage/v7/grid/size-responsive/demo.html
new file mode 100644
index 00000000000..9176b7070a6
--- /dev/null
+++ b/static/usage/v7/grid/size-responsive/demo.html
@@ -0,0 +1,72 @@
+
+
+
+
+
+
+
Grid
+
+
+
+
+
+
+
+
+
+
+
+
+ Stacked for xs breakpoint, equal width for sm and up
+
+
+ 1
+ 2
+ 3
+ 4
+
+
+
+ Equal width until md breakpoint, last column takes full width for md and up
+
+
+ 1
+ 2
+ 3
+
+
+
+ 2 per row until md breakpoint, 3 per row for md, equal width for lg and up
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/grid/size-responsive/index.md b/static/usage/v7/grid/size-responsive/index.md
new file mode 100644
index 00000000000..3c46f6ab5de
--- /dev/null
+++ b/static/usage/v7/grid/size-responsive/index.md
@@ -0,0 +1,33 @@
+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/grid/size-responsive/javascript.md b/static/usage/v7/grid/size-responsive/javascript.md
new file mode 100644
index 00000000000..1b10d349bf4
--- /dev/null
+++ b/static/usage/v7/grid/size-responsive/javascript.md
@@ -0,0 +1,41 @@
+```html
+
Stacked for xs breakpoint, equal width for sm and up
+
+
+ 1
+ 2
+ 3
+ 4
+
+
+
+
Equal width until md breakpoint, last column takes full width for md and up
+
+
+ 1
+ 2
+ 3
+
+
+
+
2 per row until md breakpoint, 3 per row for md, equal width for lg and up
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+
+
+
+
+```
diff --git a/static/usage/v7/grid/size-responsive/react/main_css.md b/static/usage/v7/grid/size-responsive/react/main_css.md
new file mode 100644
index 00000000000..3aae3216f34
--- /dev/null
+++ b/static/usage/v7/grid/size-responsive/react/main_css.md
@@ -0,0 +1,8 @@
+```css
+ion-col {
+ background-color: #135d54;
+ border: solid 1px #fff;
+ color: #fff;
+ text-align: center;
+}
+```
diff --git a/static/usage/v7/grid/size-responsive/react/main_tsx.md b/static/usage/v7/grid/size-responsive/react/main_tsx.md
new file mode 100644
index 00000000000..c27242fcf87
--- /dev/null
+++ b/static/usage/v7/grid/size-responsive/react/main_tsx.md
@@ -0,0 +1,44 @@
+```tsx
+import React from 'react';
+import { IonCol, IonGrid, IonRow } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+
Stacked for xs breakpoint, equal width for sm and up
+
+
+ 1
+ 2
+ 3
+ 4
+
+
+
+
Equal width until md breakpoint, last column takes full width for md and up
+
+
+ 1
+ 2
+ 3
+
+
+
+
2 per row until md breakpoint, 3 per row for md, equal width for lg and up
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/grid/size-responsive/vue.md b/static/usage/v7/grid/size-responsive/vue.md
new file mode 100644
index 00000000000..2762e9c4774
--- /dev/null
+++ b/static/usage/v7/grid/size-responsive/vue.md
@@ -0,0 +1,52 @@
+```html
+
+ Stacked for xs breakpoint, equal width for sm and up
+
+
+ 1
+ 2
+ 3
+ 4
+
+
+
+ Equal width until md breakpoint, last column takes full width for md and up
+
+
+ 1
+ 2
+ 3
+
+
+
+ 2 per row until md breakpoint, 3 per row for md, equal width for lg and up
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/grid/size/angular/example_component_css.md b/static/usage/v7/grid/size/angular/example_component_css.md
new file mode 100644
index 00000000000..3aae3216f34
--- /dev/null
+++ b/static/usage/v7/grid/size/angular/example_component_css.md
@@ -0,0 +1,8 @@
+```css
+ion-col {
+ background-color: #135d54;
+ border: solid 1px #fff;
+ color: #fff;
+ text-align: center;
+}
+```
diff --git a/static/usage/v7/grid/size/angular/example_component_html.md b/static/usage/v7/grid/size/angular/example_component_html.md
new file mode 100644
index 00000000000..dc47b3de0dd
--- /dev/null
+++ b/static/usage/v7/grid/size/angular/example_component_html.md
@@ -0,0 +1,30 @@
+```html
+
Column 2 has size set to "8"
+
+
+ 1
+ 2
+ 3
+
+
+
+
Columns 3 & 4 have size set to "3"
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+
+
+
+
Columns 1 & 2 have size set to "4"
+
+
+ 1
+ 2
+
+
+```
diff --git a/static/usage/v7/grid/size/demo.html b/static/usage/v7/grid/size/demo.html
new file mode 100644
index 00000000000..4d16f74065e
--- /dev/null
+++ b/static/usage/v7/grid/size/demo.html
@@ -0,0 +1,70 @@
+
+
+
+
+
+
+
Grid
+
+
+
+
+
+
+
+
+
+
+
+
+ Column 2 has size set to "8"
+
+
+ 1
+ 2
+ 3
+
+
+
+ Columns 3 & 4 have size set to "3"
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+
+
+
+ Columns 1 & 2 have size set to "4"
+
+
+ 1
+ 2
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/grid/size/index.md b/static/usage/v7/grid/size/index.md
new file mode 100644
index 00000000000..132f75c639a
--- /dev/null
+++ b/static/usage/v7/grid/size/index.md
@@ -0,0 +1,33 @@
+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/grid/size/javascript.md b/static/usage/v7/grid/size/javascript.md
new file mode 100644
index 00000000000..576234e746e
--- /dev/null
+++ b/static/usage/v7/grid/size/javascript.md
@@ -0,0 +1,39 @@
+```html
+
Column 2 has size set to "8"
+
+
+ 1
+ 2
+ 3
+
+
+
+
Columns 3 & 4 have size set to "3"
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+
+
+
+
Columns 1 & 2 have size set to "4"
+
+
+ 1
+ 2
+
+
+
+
+```
diff --git a/static/usage/v7/grid/size/react/main_css.md b/static/usage/v7/grid/size/react/main_css.md
new file mode 100644
index 00000000000..3aae3216f34
--- /dev/null
+++ b/static/usage/v7/grid/size/react/main_css.md
@@ -0,0 +1,8 @@
+```css
+ion-col {
+ background-color: #135d54;
+ border: solid 1px #fff;
+ color: #fff;
+ text-align: center;
+}
+```
diff --git a/static/usage/v7/grid/size/react/main_tsx.md b/static/usage/v7/grid/size/react/main_tsx.md
new file mode 100644
index 00000000000..3669d57806d
--- /dev/null
+++ b/static/usage/v7/grid/size/react/main_tsx.md
@@ -0,0 +1,42 @@
+```tsx
+import React from 'react';
+import { IonCol, IonGrid, IonRow } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+
Column 2 has size set to "8"
+
+
+ 1
+ 2
+ 3
+
+
+
+
Columns 3 & 4 have size set to "3"
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+
+
+
+
Columns 1 & 2 have size set to "4"
+
+
+ 1
+ 2
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/grid/size/vue.md b/static/usage/v7/grid/size/vue.md
new file mode 100644
index 00000000000..14baef9e1c4
--- /dev/null
+++ b/static/usage/v7/grid/size/vue.md
@@ -0,0 +1,50 @@
+```html
+
+ Column 2 has size set to "8"
+
+
+ 1
+ 2
+ 3
+
+
+
+ Columns 3 & 4 have size set to "3"
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+
+
+
+ Columns 1 & 2 have size set to "4"
+
+
+ 1
+ 2
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/grid/vertical-alignment/angular/example_component_css.md b/static/usage/v7/grid/vertical-alignment/angular/example_component_css.md
new file mode 100644
index 00000000000..3aae3216f34
--- /dev/null
+++ b/static/usage/v7/grid/vertical-alignment/angular/example_component_css.md
@@ -0,0 +1,8 @@
+```css
+ion-col {
+ background-color: #135d54;
+ border: solid 1px #fff;
+ color: #fff;
+ text-align: center;
+}
+```
diff --git a/static/usage/v7/grid/vertical-alignment/angular/example_component_html.md b/static/usage/v7/grid/vertical-alignment/angular/example_component_html.md
new file mode 100644
index 00000000000..2b4e1b42106
--- /dev/null
+++ b/static/usage/v7/grid/vertical-alignment/angular/example_component_html.md
@@ -0,0 +1,64 @@
+```html
+
Columns aligned at the top
+
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ 4
+ #
+ #
+ #
+
+
+
+
+
Columns aligned at the center
+
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ 4
+ #
+ #
+ #
+
+
+
+
+
Columns aligned at the bottom
+
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ 4
+ #
+ #
+ #
+
+
+
+```
diff --git a/static/usage/v7/grid/vertical-alignment/demo.html b/static/usage/v7/grid/vertical-alignment/demo.html
new file mode 100644
index 00000000000..dd1388fcdbf
--- /dev/null
+++ b/static/usage/v7/grid/vertical-alignment/demo.html
@@ -0,0 +1,103 @@
+
+
+
+
+
+
+
Grid
+
+
+
+
+
+
+
+
+
+
+
+
+
Columns aligned at the top
+
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ 4
+ #
+ #
+ #
+
+
+
+
+
Columns aligned at the center
+
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ 4
+ #
+ #
+ #
+
+
+
+
+
Columns aligned at the bottom
+
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ 4
+ #
+ #
+ #
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/grid/vertical-alignment/index.md b/static/usage/v7/grid/vertical-alignment/index.md
new file mode 100644
index 00000000000..74d347e49a5
--- /dev/null
+++ b/static/usage/v7/grid/vertical-alignment/index.md
@@ -0,0 +1,33 @@
+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/grid/vertical-alignment/javascript.md b/static/usage/v7/grid/vertical-alignment/javascript.md
new file mode 100644
index 00000000000..9e7573ebbc6
--- /dev/null
+++ b/static/usage/v7/grid/vertical-alignment/javascript.md
@@ -0,0 +1,73 @@
+```html
+
Columns aligned at the top
+
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ 4
+ #
+ #
+ #
+
+
+
+
+
Columns aligned at the center
+
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ 4
+ #
+ #
+ #
+
+
+
+
+
Columns aligned at the bottom
+
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ 4
+ #
+ #
+ #
+
+
+
+
+
+```
diff --git a/static/usage/v7/grid/vertical-alignment/react/main_css.md b/static/usage/v7/grid/vertical-alignment/react/main_css.md
new file mode 100644
index 00000000000..3aae3216f34
--- /dev/null
+++ b/static/usage/v7/grid/vertical-alignment/react/main_css.md
@@ -0,0 +1,8 @@
+```css
+ion-col {
+ background-color: #135d54;
+ border: solid 1px #fff;
+ color: #fff;
+ text-align: center;
+}
+```
diff --git a/static/usage/v7/grid/vertical-alignment/react/main_tsx.md b/static/usage/v7/grid/vertical-alignment/react/main_tsx.md
new file mode 100644
index 00000000000..d1dad060701
--- /dev/null
+++ b/static/usage/v7/grid/vertical-alignment/react/main_tsx.md
@@ -0,0 +1,76 @@
+```tsx
+import React from 'react';
+import { IonCol, IonGrid, IonRow } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+
Columns aligned at the top
+
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ 4
+ #
+ #
+ #
+
+
+
+
+
Columns aligned at the center
+
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ 4
+ #
+ #
+ #
+
+
+
+
+
Columns aligned at the bottom
+
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ 4
+ #
+ #
+ #
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/grid/vertical-alignment/vue.md b/static/usage/v7/grid/vertical-alignment/vue.md
new file mode 100644
index 00000000000..f150f908eec
--- /dev/null
+++ b/static/usage/v7/grid/vertical-alignment/vue.md
@@ -0,0 +1,84 @@
+```html
+
+ Columns aligned at the top
+
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ 4
+ #
+ #
+ #
+
+
+
+
+ Columns aligned at the center
+
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ 4
+ #
+ #
+ #
+
+
+
+
+ Columns aligned at the bottom
+
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ 4
+ #
+ #
+ #
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/header/basic/angular.md b/static/usage/v7/header/basic/angular.md
new file mode 100644
index 00000000000..9edf1a22f27
--- /dev/null
+++ b/static/usage/v7/header/basic/angular.md
@@ -0,0 +1,10 @@
+```html
+
+
+ Header
+
+
+
+ Content
+
+```
diff --git a/static/usage/v7/header/basic/demo.html b/static/usage/v7/header/basic/demo.html
new file mode 100644
index 00000000000..a6752caddb9
--- /dev/null
+++ b/static/usage/v7/header/basic/demo.html
@@ -0,0 +1,28 @@
+
+
+
+
+
+
+
Header
+
+
+
+
+
+
+
+
+
+
+
+ Header
+
+
+
+ Content
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/header/basic/index.md b/static/usage/v7/header/basic/index.md
new file mode 100644
index 00000000000..1058c42ba41
--- /dev/null
+++ b/static/usage/v7/header/basic/index.md
@@ -0,0 +1,14 @@
+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/header/basic/javascript.md b/static/usage/v7/header/basic/javascript.md
new file mode 100644
index 00000000000..9edf1a22f27
--- /dev/null
+++ b/static/usage/v7/header/basic/javascript.md
@@ -0,0 +1,10 @@
+```html
+
+
+ Header
+
+
+
+ Content
+
+```
diff --git a/static/usage/v7/header/basic/react.md b/static/usage/v7/header/basic/react.md
new file mode 100644
index 00000000000..0dd2df0474d
--- /dev/null
+++ b/static/usage/v7/header/basic/react.md
@@ -0,0 +1,20 @@
+```tsx
+import React from 'react';
+import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+ Header
+
+
+
+ Content
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/header/basic/vue.md b/static/usage/v7/header/basic/vue.md
new file mode 100644
index 00000000000..1bba4fdee2b
--- /dev/null
+++ b/static/usage/v7/header/basic/vue.md
@@ -0,0 +1,21 @@
+```html
+
+
+
+ Header
+
+
+
+ Content
+
+
+
+
+```
diff --git a/static/usage/v7/header/condense/angular.md b/static/usage/v7/header/condense/angular.md
new file mode 100644
index 00000000000..46ac7fac8ea
--- /dev/null
+++ b/static/usage/v7/header/condense/angular.md
@@ -0,0 +1,38 @@
+```html
+
+
+ Header
+
+
+
+
+
+ Header
+
+
+
+
+
Animal Facts
+
+
Rhinoceros
+
+
The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the Greek words rhino meaning ânoseâ and ceros meaning âhorn.â The number of horns that a rhino has varies on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while the Javan rhino and one-horned rhino have one horn.
+
+
Sea Turtle
+
+
Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for swimming, so they are vulnerable while on land.
+
+
Giraffe
+
+
Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the giraffe a âcamel-leopard.â Thatâs where the giraffeâs species name âcamelopardalisâ comes from.
+
+
Elephant
+
+
Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephantsâ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up water for drinking or bathing.
+
+
Dolphin
+
+
Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+```
diff --git a/static/usage/v7/header/condense/demo.html b/static/usage/v7/header/condense/demo.html
new file mode 100644
index 00000000000..caed21b4dcd
--- /dev/null
+++ b/static/usage/v7/header/condense/demo.html
@@ -0,0 +1,73 @@
+
+
+
+
+
+
+
Header
+
+
+
+
+
+
+
+
+
+
+
+ Header
+
+
+
+
+
+ Header
+
+
+
+
+
Animal Facts
+
+
Rhinoceros
+
+
The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from
+ the Greek words rhino meaning ânoseâ and ceros meaning âhorn.â The number of horns that a rhino has varies on
+ the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two
+ horns, while the Javan rhino and one-horned rhino have one horn.
+
+
Sea Turtle
+
+
Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other
+ turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are
+ adapted for swimming, so they are vulnerable while on land.
+
+
Giraffe
+
+
Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and
+ have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people
+ called the giraffe a âcamel-leopard.â Thatâs where the giraffeâs species name âcamelopardalisâ comes from.
+
+
Elephant
+
+
Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephantsâ
+ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or
+ suck up water for drinking or bathing.
+
+
Dolphin
+
+
Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown,
+ gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with
+ about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap
+ that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/header/condense/index.md b/static/usage/v7/header/condense/index.md
new file mode 100644
index 00000000000..5ae68be3af9
--- /dev/null
+++ b/static/usage/v7/header/condense/index.md
@@ -0,0 +1,15 @@
+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/header/condense/javascript.md b/static/usage/v7/header/condense/javascript.md
new file mode 100644
index 00000000000..95ac5731c47
--- /dev/null
+++ b/static/usage/v7/header/condense/javascript.md
@@ -0,0 +1,38 @@
+```html
+
+
+ Header
+
+
+
+
+
+ Header
+
+
+
+
+
Animal Facts
+
+
Rhinoceros
+
+
The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the Greek words rhino meaning ânoseâ and ceros meaning âhorn.â The number of horns that a rhino has varies on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while the Javan rhino and one-horned rhino have one horn.
+
+
Sea Turtle
+
+
Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for swimming, so they are vulnerable while on land.
+
+
Giraffe
+
+
Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the giraffe a âcamel-leopard.â Thatâs where the giraffeâs species name âcamelopardalisâ comes from.
+
+
Elephant
+
+
Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephantsâ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up water for drinking or bathing.
+
+
Dolphin
+
+
Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+```
diff --git a/static/usage/v7/header/condense/react.md b/static/usage/v7/header/condense/react.md
new file mode 100644
index 00000000000..0f68407aff0
--- /dev/null
+++ b/static/usage/v7/header/condense/react.md
@@ -0,0 +1,48 @@
+```tsx
+import React from 'react';
+import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+ Header
+
+
+
+
+
+ Header
+
+
+
+
+
Animal Facts
+
+
Rhinoceros
+
+
The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the Greek words rhino meaning ânoseâ and ceros meaning âhorn.â The number of horns that a rhino has varies on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while the Javan rhino and one-horned rhino have one horn.
+
+
Sea Turtle
+
+
Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for swimming, so they are vulnerable while on land.
+
+
Giraffe
+
+
Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the giraffe a âcamel-leopard.â Thatâs where the giraffeâs species name âcamelopardalisâ comes from.
+
+
Elephant
+
+
Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephantsâ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up water for drinking or bathing.
+
+
Dolphin
+
+
Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/header/condense/vue.md b/static/usage/v7/header/condense/vue.md
new file mode 100644
index 00000000000..c3f354d010f
--- /dev/null
+++ b/static/usage/v7/header/condense/vue.md
@@ -0,0 +1,49 @@
+```html
+
+
+
+ Header
+
+
+
+
+
+ Header
+
+
+
+
+
Animal Facts
+
+
Rhinoceros
+
+
The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the Greek words rhino meaning ânoseâ and ceros meaning âhorn.â The number of horns that a rhino has varies on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while the Javan rhino and one-horned rhino have one horn.
+
+
Sea Turtle
+
+
Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for swimming, so they are vulnerable while on land.
+
+
Giraffe
+
+
Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the giraffe a âcamel-leopard.â Thatâs where the giraffeâs species name âcamelopardalisâ comes from.
+
+
Elephant
+
+
Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephantsâ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up water for drinking or bathing.
+
+
Dolphin
+
+
Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+
+
+```
diff --git a/static/usage/v7/header/custom-scroll-target/angular/example_component_css.md b/static/usage/v7/header/custom-scroll-target/angular/example_component_css.md
new file mode 100644
index 00000000000..5fe74c95f50
--- /dev/null
+++ b/static/usage/v7/header/custom-scroll-target/angular/example_component_css.md
@@ -0,0 +1,10 @@
+```css
+.ion-content-scroll-host {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 100%;
+ width: 100%;
+ overflow-y: auto;
+}
+```
diff --git a/static/usage/v7/header/custom-scroll-target/angular/example_component_html.md b/static/usage/v7/header/custom-scroll-target/angular/example_component_html.md
new file mode 100644
index 00000000000..b54ba9d2afa
--- /dev/null
+++ b/static/usage/v7/header/custom-scroll-target/angular/example_component_html.md
@@ -0,0 +1,32 @@
+```html
+
+
+ Header
+
+
+
+
+
Animal Facts
+
+
Rhinoceros
+
+
The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the Greek words rhino meaning ânoseâ and ceros meaning âhorn.â The number of horns that a rhino has varies on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while the Javan rhino and one-horned rhino have one horn.
+
+
Sea Turtle
+
+
Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for swimming, so they are vulnerable while on land.
+
+
Giraffe
+
+
Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the giraffe a âcamel-leopard.â Thatâs where the giraffeâs species name âcamelopardalisâ comes from.
+
+
Elephant
+
+
Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephantsâ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up water for drinking or bathing.
+
+
Dolphin
+
+
Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+```
diff --git a/static/usage/v7/header/custom-scroll-target/demo.html b/static/usage/v7/header/custom-scroll-target/demo.html
new file mode 100644
index 00000000000..337bd2ece48
--- /dev/null
+++ b/static/usage/v7/header/custom-scroll-target/demo.html
@@ -0,0 +1,78 @@
+
+
+
+
+
+
+
Header
+
+
+
+
+
+
+
+
+
+
+
+
+ Header
+
+
+
+
+
Animal Facts
+
+
Rhinoceros
+
+
The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from
+ the Greek words rhino meaning ânoseâ and ceros meaning âhorn.â The number of horns that a rhino has varies on
+ the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two
+ horns, while the Javan rhino and one-horned rhino have one horn.
+
+
Sea Turtle
+
+
Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other
+ turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are
+ adapted for swimming, so they are vulnerable while on land.
+
+
Giraffe
+
+
Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and
+ have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people
+ called the giraffe a âcamel-leopard.â Thatâs where the giraffeâs species name âcamelopardalisâ comes from.
+
+
Elephant
+
+
Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephantsâ
+ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or
+ suck up water for drinking or bathing.
+
+
Dolphin
+
+
Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown,
+ gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with
+ about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap
+ that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/header/custom-scroll-target/index.md b/static/usage/v7/header/custom-scroll-target/index.md
new file mode 100644
index 00000000000..cf5ad71dd63
--- /dev/null
+++ b/static/usage/v7/header/custom-scroll-target/index.md
@@ -0,0 +1,35 @@
+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/header/custom-scroll-target/javascript.md b/static/usage/v7/header/custom-scroll-target/javascript.md
new file mode 100644
index 00000000000..64077515677
--- /dev/null
+++ b/static/usage/v7/header/custom-scroll-target/javascript.md
@@ -0,0 +1,43 @@
+```html
+
+
+ Header
+
+
+
+
+
Animal Facts
+
+
Rhinoceros
+
+
The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the Greek words rhino meaning ânoseâ and ceros meaning âhorn.â The number of horns that a rhino has varies on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while the Javan rhino and one-horned rhino have one horn.
+
+
Sea Turtle
+
+
Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for swimming, so they are vulnerable while on land.
+
+
Giraffe
+
+
Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the giraffe a âcamel-leopard.â Thatâs where the giraffeâs species name âcamelopardalisâ comes from.
+
+
Elephant
+
+
Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephantsâ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up water for drinking or bathing.
+
+
Dolphin
+
+
Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+
+
+```
diff --git a/static/usage/v7/header/custom-scroll-target/react/main_css.md b/static/usage/v7/header/custom-scroll-target/react/main_css.md
new file mode 100644
index 00000000000..5fe74c95f50
--- /dev/null
+++ b/static/usage/v7/header/custom-scroll-target/react/main_css.md
@@ -0,0 +1,10 @@
+```css
+.ion-content-scroll-host {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 100%;
+ width: 100%;
+ overflow-y: auto;
+}
+```
diff --git a/static/usage/v7/header/custom-scroll-target/react/main_tsx.md b/static/usage/v7/header/custom-scroll-target/react/main_tsx.md
new file mode 100644
index 00000000000..bf6d13f26ec
--- /dev/null
+++ b/static/usage/v7/header/custom-scroll-target/react/main_tsx.md
@@ -0,0 +1,44 @@
+```tsx
+import React from 'react';
+import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+
+
+ Header
+
+
+
+
+
Animal Facts
+
+
Rhinoceros
+
+
The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the Greek words rhino meaning ânoseâ and ceros meaning âhorn.â The number of horns that a rhino has varies on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while the Javan rhino and one-horned rhino have one horn.
+
+
Sea Turtle
+
+
Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for swimming, so they are vulnerable while on land.
+
+
Giraffe
+
+
Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the giraffe a âcamel-leopard.â Thatâs where the giraffeâs species name âcamelopardalisâ comes from.
+
+
Elephant
+
+
Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephantsâ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up water for drinking or bathing.
+
+
Dolphin
+
+
Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/header/custom-scroll-target/vue.md b/static/usage/v7/header/custom-scroll-target/vue.md
new file mode 100644
index 00000000000..73565d9ab18
--- /dev/null
+++ b/static/usage/v7/header/custom-scroll-target/vue.md
@@ -0,0 +1,55 @@
+```html
+
+
+
+ Header
+
+
+
+
+
Animal Facts
+
+
Rhinoceros
+
+
The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the Greek words rhino meaning ânoseâ and ceros meaning âhorn.â The number of horns that a rhino has varies on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while the Javan rhino and one-horned rhino have one horn.
+
+
Sea Turtle
+
+
Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for swimming, so they are vulnerable while on land.
+
+
Giraffe
+
+
Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the giraffe a âcamel-leopard.â Thatâs where the giraffeâs species name âcamelopardalisâ comes from.
+
+
Elephant
+
+
Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephantsâ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up water for drinking or bathing.
+
+
Dolphin
+
+
Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+
+
+
+
+```
diff --git a/static/usage/v7/header/fade/angular.md b/static/usage/v7/header/fade/angular.md
new file mode 100644
index 00000000000..72e55ffc58c
--- /dev/null
+++ b/static/usage/v7/header/fade/angular.md
@@ -0,0 +1,30 @@
+```html
+
+
+ Header
+
+
+
+ Animal Facts
+
+ Rhinoceros
+
+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the Greek words rhino meaning ânoseâ and ceros meaning âhorn.â The number of horns that a rhino has varies on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while the Javan rhino and one-horned rhino have one horn.
+
+ Sea Turtle
+
+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for swimming, so they are vulnerable while on land.
+
+ Giraffe
+
+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the giraffe a âcamel-leopard.â Thatâs where the giraffeâs species name âcamelopardalisâ comes from.
+
+ Elephant
+
+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephantsâ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up water for drinking or bathing.
+
+ Dolphin
+
+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+```
diff --git a/static/usage/v7/header/fade/demo.html b/static/usage/v7/header/fade/demo.html
new file mode 100644
index 00000000000..06b24cc2eb4
--- /dev/null
+++ b/static/usage/v7/header/fade/demo.html
@@ -0,0 +1,65 @@
+
+
+
+
+
+
+
Header
+
+
+
+
+
+
+
+
+
+
+
+ Header
+
+
+
+ Animal Facts
+
+ Rhinoceros
+
+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from
+ the Greek words rhino meaning ânoseâ and ceros meaning âhorn.â The number of horns that a rhino has varies on
+ the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two
+ horns, while the Javan rhino and one-horned rhino have one horn.
+
+ Sea Turtle
+
+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other
+ turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are
+ adapted for swimming, so they are vulnerable while on land.
+
+ Giraffe
+
+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have
+ a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called
+ the giraffe a âcamel-leopard.â Thatâs where the giraffeâs species name âcamelopardalisâ comes from.
+
+ Elephant
+
+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephantsâ
+ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or
+ suck up water for drinking or bathing.
+
+ Dolphin
+
+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray,
+ blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about
+ 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens
+ to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/header/fade/index.md b/static/usage/v7/header/fade/index.md
new file mode 100644
index 00000000000..328ba025ada
--- /dev/null
+++ b/static/usage/v7/header/fade/index.md
@@ -0,0 +1,15 @@
+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/header/fade/javascript.md b/static/usage/v7/header/fade/javascript.md
new file mode 100644
index 00000000000..72e55ffc58c
--- /dev/null
+++ b/static/usage/v7/header/fade/javascript.md
@@ -0,0 +1,30 @@
+```html
+
+
+ Header
+
+
+
+ Animal Facts
+
+ Rhinoceros
+
+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the Greek words rhino meaning ânoseâ and ceros meaning âhorn.â The number of horns that a rhino has varies on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while the Javan rhino and one-horned rhino have one horn.
+
+ Sea Turtle
+
+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for swimming, so they are vulnerable while on land.
+
+ Giraffe
+
+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the giraffe a âcamel-leopard.â Thatâs where the giraffeâs species name âcamelopardalisâ comes from.
+
+ Elephant
+
+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephantsâ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up water for drinking or bathing.
+
+ Dolphin
+
+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+```
diff --git a/static/usage/v7/header/fade/react.md b/static/usage/v7/header/fade/react.md
new file mode 100644
index 00000000000..453f32c4db4
--- /dev/null
+++ b/static/usage/v7/header/fade/react.md
@@ -0,0 +1,40 @@
+```tsx
+import React from 'react';
+import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+ Header
+
+
+
+ Animal Facts
+
+ Rhinoceros
+
+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the Greek words rhino meaning ânoseâ and ceros meaning âhorn.â The number of horns that a rhino has varies on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while the Javan rhino and one-horned rhino have one horn.
+
+ Sea Turtle
+
+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for swimming, so they are vulnerable while on land.
+
+ Giraffe
+
+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the giraffe a âcamel-leopard.â Thatâs where the giraffeâs species name âcamelopardalisâ comes from.
+
+ Elephant
+
+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephantsâ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up water for drinking or bathing.
+
+ Dolphin
+
+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/header/fade/vue.md b/static/usage/v7/header/fade/vue.md
new file mode 100644
index 00000000000..44327bf809c
--- /dev/null
+++ b/static/usage/v7/header/fade/vue.md
@@ -0,0 +1,41 @@
+```html
+
+
+
+ Header
+
+
+
+ Animal Facts
+
+ Rhinoceros
+
+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the Greek words rhino meaning ânoseâ and ceros meaning âhorn.â The number of horns that a rhino has varies on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while the Javan rhino and one-horned rhino have one horn.
+
+ Sea Turtle
+
+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for swimming, so they are vulnerable while on land.
+
+ Giraffe
+
+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the giraffe a âcamel-leopard.â Thatâs where the giraffeâs species name âcamelopardalisâ comes from.
+
+ Elephant
+
+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephantsâ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up water for drinking or bathing.
+
+ Dolphin
+
+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+
+
+
+```
diff --git a/static/usage/v7/header/no-border/angular.md b/static/usage/v7/header/no-border/angular.md
new file mode 100644
index 00000000000..064fa753744
--- /dev/null
+++ b/static/usage/v7/header/no-border/angular.md
@@ -0,0 +1,10 @@
+```html
+
+
+ Header
+
+
+
+ Content
+
+```
diff --git a/static/usage/v7/header/no-border/demo.html b/static/usage/v7/header/no-border/demo.html
new file mode 100644
index 00000000000..9e8356fe253
--- /dev/null
+++ b/static/usage/v7/header/no-border/demo.html
@@ -0,0 +1,28 @@
+
+
+
+
+
+
+
Header
+
+
+
+
+
+
+
+
+
+
+
+ Header
+
+
+
+ Content
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/header/no-border/index.md b/static/usage/v7/header/no-border/index.md
new file mode 100644
index 00000000000..e7300fb2610
--- /dev/null
+++ b/static/usage/v7/header/no-border/index.md
@@ -0,0 +1,14 @@
+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/header/no-border/javascript.md b/static/usage/v7/header/no-border/javascript.md
new file mode 100644
index 00000000000..064fa753744
--- /dev/null
+++ b/static/usage/v7/header/no-border/javascript.md
@@ -0,0 +1,10 @@
+```html
+
+
+ Header
+
+
+
+ Content
+
+```
diff --git a/static/usage/v7/header/no-border/react.md b/static/usage/v7/header/no-border/react.md
new file mode 100644
index 00000000000..2eb14f6882f
--- /dev/null
+++ b/static/usage/v7/header/no-border/react.md
@@ -0,0 +1,20 @@
+```tsx
+import React from 'react';
+import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+ Header
+
+
+
+ Content
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/header/no-border/vue.md b/static/usage/v7/header/no-border/vue.md
new file mode 100644
index 00000000000..a5583fb06d1
--- /dev/null
+++ b/static/usage/v7/header/no-border/vue.md
@@ -0,0 +1,21 @@
+```html
+
+
+
+ Header
+
+
+
+ Content
+
+
+
+
+```
diff --git a/static/usage/v7/header/translucent/angular.md b/static/usage/v7/header/translucent/angular.md
new file mode 100644
index 00000000000..f2779c7d5c9
--- /dev/null
+++ b/static/usage/v7/header/translucent/angular.md
@@ -0,0 +1,30 @@
+```html
+
+
+ Header
+
+
+
+ Animal Facts
+
+ Rhinoceros
+
+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the Greek words rhino meaning ânoseâ and ceros meaning âhorn.â The number of horns that a rhino has varies on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while the Javan rhino and one-horned rhino have one horn.
+
+ Sea Turtle
+
+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for swimming, so they are vulnerable while on land.
+
+ Giraffe
+
+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the giraffe a âcamel-leopard.â Thatâs where the giraffeâs species name âcamelopardalisâ comes from.
+
+ Elephant
+
+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephantsâ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up water for drinking or bathing.
+
+ Dolphin
+
+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+```
diff --git a/static/usage/v7/header/translucent/demo.html b/static/usage/v7/header/translucent/demo.html
new file mode 100644
index 00000000000..bea9d3ecba1
--- /dev/null
+++ b/static/usage/v7/header/translucent/demo.html
@@ -0,0 +1,65 @@
+
+
+
+
+
+
+
Header
+
+
+
+
+
+
+
+
+
+
+
+ Header
+
+
+
+ Animal Facts
+
+ Rhinoceros
+
+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from
+ the Greek words rhino meaning ânoseâ and ceros meaning âhorn.â The number of horns that a rhino has varies on
+ the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two
+ horns, while the Javan rhino and one-horned rhino have one horn.
+
+ Sea Turtle
+
+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other
+ turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are
+ adapted for swimming, so they are vulnerable while on land.
+
+ Giraffe
+
+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have
+ a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called
+ the giraffe a âcamel-leopard.â Thatâs where the giraffeâs species name âcamelopardalisâ comes from.
+
+ Elephant
+
+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephantsâ
+ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or
+ suck up water for drinking or bathing.
+
+ Dolphin
+
+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray,
+ blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about
+ 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens
+ to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/header/translucent/index.md b/static/usage/v7/header/translucent/index.md
new file mode 100644
index 00000000000..fe8e8b04a8e
--- /dev/null
+++ b/static/usage/v7/header/translucent/index.md
@@ -0,0 +1,15 @@
+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/header/translucent/javascript.md b/static/usage/v7/header/translucent/javascript.md
new file mode 100644
index 00000000000..e03deeda2a5
--- /dev/null
+++ b/static/usage/v7/header/translucent/javascript.md
@@ -0,0 +1,30 @@
+```html
+
+
+ Header
+
+
+
+ Animal Facts
+
+ Rhinoceros
+
+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the Greek words rhino meaning ânoseâ and ceros meaning âhorn.â The number of horns that a rhino has varies on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while the Javan rhino and one-horned rhino have one horn.
+
+ Sea Turtle
+
+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for swimming, so they are vulnerable while on land.
+
+ Giraffe
+
+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the giraffe a âcamel-leopard.â Thatâs where the giraffeâs species name âcamelopardalisâ comes from.
+
+ Elephant
+
+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephantsâ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up water for drinking or bathing.
+
+ Dolphin
+
+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+```
diff --git a/static/usage/v7/header/translucent/react.md b/static/usage/v7/header/translucent/react.md
new file mode 100644
index 00000000000..862211d839b
--- /dev/null
+++ b/static/usage/v7/header/translucent/react.md
@@ -0,0 +1,40 @@
+```tsx
+import React from 'react';
+import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+ Header
+
+
+
+ Animal Facts
+
+ Rhinoceros
+
+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the Greek words rhino meaning ânoseâ and ceros meaning âhorn.â The number of horns that a rhino has varies on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while the Javan rhino and one-horned rhino have one horn.
+
+ Sea Turtle
+
+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for swimming, so they are vulnerable while on land.
+
+ Giraffe
+
+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the giraffe a âcamel-leopard.â Thatâs where the giraffeâs species name âcamelopardalisâ comes from.
+
+ Elephant
+
+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephantsâ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up water for drinking or bathing.
+
+ Dolphin
+
+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/header/translucent/vue.md b/static/usage/v7/header/translucent/vue.md
new file mode 100644
index 00000000000..34a4c740014
--- /dev/null
+++ b/static/usage/v7/header/translucent/vue.md
@@ -0,0 +1,41 @@
+```html
+
+
+
+ Header
+
+
+
+ Animal Facts
+
+ Rhinoceros
+
+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the Greek words rhino meaning ânoseâ and ceros meaning âhorn.â The number of horns that a rhino has varies on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while the Javan rhino and one-horned rhino have one horn.
+
+ Sea Turtle
+
+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for swimming, so they are vulnerable while on land.
+
+ Giraffe
+
+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the giraffe a âcamel-leopard.â Thatâs where the giraffeâs species name âcamelopardalisâ comes from.
+
+ Elephant
+
+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephantsâ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up water for drinking or bathing.
+
+ Dolphin
+
+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+
+
+
+```
diff --git a/static/usage/v7/icon/basic/angular.md b/static/usage/v7/icon/basic/angular.md
new file mode 100644
index 00000000000..7dba86b2634
--- /dev/null
+++ b/static/usage/v7/icon/basic/angular.md
@@ -0,0 +1,6 @@
+```html
+
+
+
+
+```
diff --git a/static/usage/v7/icon/basic/demo.html b/static/usage/v7/icon/basic/demo.html
new file mode 100644
index 00000000000..f2284770ab9
--- /dev/null
+++ b/static/usage/v7/icon/basic/demo.html
@@ -0,0 +1,28 @@
+
+
+
+
+
+
+
Icon
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/icon/basic/index.md b/static/usage/v7/icon/basic/index.md
new file mode 100644
index 00000000000..c26fa6e35ac
--- /dev/null
+++ b/static/usage/v7/icon/basic/index.md
@@ -0,0 +1,13 @@
+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/icon/basic/javascript.md b/static/usage/v7/icon/basic/javascript.md
new file mode 100644
index 00000000000..7dba86b2634
--- /dev/null
+++ b/static/usage/v7/icon/basic/javascript.md
@@ -0,0 +1,6 @@
+```html
+
+
+
+
+```
diff --git a/static/usage/v7/icon/basic/react.md b/static/usage/v7/icon/basic/react.md
new file mode 100644
index 00000000000..57383875130
--- /dev/null
+++ b/static/usage/v7/icon/basic/react.md
@@ -0,0 +1,17 @@
+```tsx
+import React from 'react';
+import { IonIcon } from '@ionic/react';
+import { logoIonic } from 'ionicons/icons';
+
+function Example() {
+ return (
+ <>
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/icon/basic/vue.md b/static/usage/v7/icon/basic/vue.md
new file mode 100644
index 00000000000..c78d79fb041
--- /dev/null
+++ b/static/usage/v7/icon/basic/vue.md
@@ -0,0 +1,21 @@
+```html
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/img/basic/angular.md b/static/usage/v7/img/basic/angular.md
new file mode 100644
index 00000000000..ce4d3d19e0d
--- /dev/null
+++ b/static/usage/v7/img/basic/angular.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v7/img/basic/demo.html b/static/usage/v7/img/basic/demo.html
new file mode 100644
index 00000000000..63f7703963c
--- /dev/null
+++ b/static/usage/v7/img/basic/demo.html
@@ -0,0 +1,31 @@
+
+
+
+
+
+
+
Image
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/img/basic/index.md b/static/usage/v7/img/basic/index.md
new file mode 100644
index 00000000000..97f57f40ec2
--- /dev/null
+++ b/static/usage/v7/img/basic/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/img/basic/javascript.md b/static/usage/v7/img/basic/javascript.md
new file mode 100644
index 00000000000..ce4d3d19e0d
--- /dev/null
+++ b/static/usage/v7/img/basic/javascript.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v7/img/basic/react.md b/static/usage/v7/img/basic/react.md
new file mode 100644
index 00000000000..04c4c086b15
--- /dev/null
+++ b/static/usage/v7/img/basic/react.md
@@ -0,0 +1,11 @@
+```tsx
+import React from 'react';
+import { IonImg } from '@ionic/react';
+
+function Example() {
+ return (
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/img/basic/vue.md b/static/usage/v7/img/basic/vue.md
new file mode 100644
index 00000000000..d8cb2cd2d7f
--- /dev/null
+++ b/static/usage/v7/img/basic/vue.md
@@ -0,0 +1,14 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v7/infinite-scroll/basic/angular/example_component_html.md b/static/usage/v7/infinite-scroll/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..55469ab3c5a
--- /dev/null
+++ b/static/usage/v7/infinite-scroll/basic/angular/example_component_html.md
@@ -0,0 +1,15 @@
+```html
+
+
+
+
+ ![avatar]()
+
+ {{ item }}
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/infinite-scroll/basic/angular/example_component_ts.md b/static/usage/v7/infinite-scroll/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..390ba6b75f1
--- /dev/null
+++ b/static/usage/v7/infinite-scroll/basic/angular/example_component_ts.md
@@ -0,0 +1,32 @@
+```tsx
+import { Component, OnInit } from '@angular/core';
+
+import { InfiniteScrollCustomEvent } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.scss'],
+})
+export class ExampleComponent implements OnInit {
+ items = [];
+
+ ngOnInit() {
+ this.generateItems();
+ }
+
+ private generateItems() {
+ const count = this.items.length + 1;
+ for (let i = 0; i < 50; i++) {
+ this.items.push(`Item ${count + i}`);
+ }
+ }
+
+ onIonInfinite(ev) {
+ this.generateItems();
+ setTimeout(() => {
+ (ev as InfiniteScrollCustomEvent).target.complete();
+ }, 500);
+ }
+}
+```
diff --git a/static/usage/v7/infinite-scroll/basic/demo.html b/static/usage/v7/infinite-scroll/basic/demo.html
new file mode 100644
index 00000000000..ea12f54b686
--- /dev/null
+++ b/static/usage/v7/infinite-scroll/basic/demo.html
@@ -0,0 +1,63 @@
+
+
+
+
+
+
+
Infinite Scroll
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/infinite-scroll/basic/index.md b/static/usage/v7/infinite-scroll/basic/index.md
new file mode 100644
index 00000000000..5ed57c31892
--- /dev/null
+++ b/static/usage/v7/infinite-scroll/basic/index.md
@@ -0,0 +1,24 @@
+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_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/v7/infinite-scroll/basic/javascript.md b/static/usage/v7/infinite-scroll/basic/javascript.md
new file mode 100644
index 00000000000..b61db4c6ae3
--- /dev/null
+++ b/static/usage/v7/infinite-scroll/basic/javascript.md
@@ -0,0 +1,46 @@
+```html
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/infinite-scroll/basic/react.md b/static/usage/v7/infinite-scroll/basic/react.md
new file mode 100644
index 00000000000..c12032a6540
--- /dev/null
+++ b/static/usage/v7/infinite-scroll/basic/react.md
@@ -0,0 +1,53 @@
+```tsx
+import React, { useState, useEffect } from 'react';
+import {
+ IonContent,
+ IonInfiniteScroll,
+ IonInfiniteScrollContent,
+ IonList,
+ IonItem,
+ IonAvatar,
+ IonLabel,
+} from '@ionic/react';
+
+function Example() {
+ const [items, setItems] = useState
([]);
+
+ const generateItems = () => {
+ const newItems = [];
+ for (let i = 0; i < 50; i++) {
+ newItems.push(`Item ${1 + items.length + i}`);
+ }
+ setItems([...items, ...newItems]);
+ };
+
+ useEffect(() => {
+ generateItems();
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+
+ return (
+
+
+ {items.map((item, index) => (
+
+
+
+
+ {item}
+
+ ))}
+
+ {
+ generateItems();
+ setTimeout(() => ev.target.complete(), 500);
+ }}
+ >
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/infinite-scroll/basic/vue.md b/static/usage/v7/infinite-scroll/basic/vue.md
new file mode 100644
index 00000000000..856c421b23b
--- /dev/null
+++ b/static/usage/v7/infinite-scroll/basic/vue.md
@@ -0,0 +1,65 @@
+```html
+
+
+
+
+
+ ![avatar]()
+
+ {{ item }}
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/angular/example_component_css.md b/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/angular/example_component_css.md
new file mode 100644
index 00000000000..9f14adbc405
--- /dev/null
+++ b/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/angular/example_component_css.md
@@ -0,0 +1,12 @@
+```css
+svg {
+ width: 20px;
+ height: 20px;
+ display: inline-block;
+}
+
+.infinite-scroll-content {
+ text-align: center;
+ padding: 20px 0;
+}
+```
diff --git a/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/angular/example_component_html.md b/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/angular/example_component_html.md
new file mode 100644
index 00000000000..60c02b86ea0
--- /dev/null
+++ b/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/angular/example_component_html.md
@@ -0,0 +1,68 @@
+```html
+
+
+
+
+ ![avatar]()
+
+ {{ item }}
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/angular/example_component_ts.md b/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/angular/example_component_ts.md
new file mode 100644
index 00000000000..415ed5dba8b
--- /dev/null
+++ b/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/angular/example_component_ts.md
@@ -0,0 +1,20 @@
+```tsx
+import { Component, OnInit } from '@angular/core';
+
+import { InfiniteScrollCustomEvent } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.scss'],
+})
+export class ExampleComponent implements OnInit {
+ items = [];
+
+ ngOnInit() {
+ for (let i = 1; i < 51; i++) {
+ this.items.push(`Item ${i}`);
+ }
+ }
+}
+```
diff --git a/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/demo.html b/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/demo.html
new file mode 100644
index 00000000000..b56e952cfe7
--- /dev/null
+++ b/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/demo.html
@@ -0,0 +1,82 @@
+
+
+
+
+
+
+ Infinite Scroll
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/index.md b/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/index.md
new file mode 100644
index 00000000000..2fb457deb95
--- /dev/null
+++ b/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/index.md
@@ -0,0 +1,34 @@
+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_ts from './angular/example_component_ts.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+
diff --git a/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/javascript.md b/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/javascript.md
new file mode 100644
index 00000000000..721eb0c0ad4
--- /dev/null
+++ b/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/javascript.md
@@ -0,0 +1,104 @@
+```html
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/react/main_css.md b/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/react/main_css.md
new file mode 100644
index 00000000000..9f14adbc405
--- /dev/null
+++ b/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/react/main_css.md
@@ -0,0 +1,12 @@
+```css
+svg {
+ width: 20px;
+ height: 20px;
+ display: inline-block;
+}
+
+.infinite-scroll-content {
+ text-align: center;
+ padding: 20px 0;
+}
+```
diff --git a/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/react/main_tsx.md b/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/react/main_tsx.md
new file mode 100644
index 00000000000..1139f55920d
--- /dev/null
+++ b/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/react/main_tsx.md
@@ -0,0 +1,89 @@
+```tsx
+import React, { useState, useEffect } from 'react';
+import { IonContent, IonInfiniteScroll, IonList, IonItem, IonAvatar, IonLabel } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ const [items, setItems] = useState([]);
+
+ useEffect(() => {
+ const newItems = [];
+ for (let i = 1; i < 51; i++) {
+ newItems.push(`Item ${items.length + i}`);
+ }
+ setItems([...items, ...newItems]);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+
+ return (
+
+
+ {items.map((item, index) => (
+
+
+
+
+ {item}
+
+ ))}
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/vue.md b/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/vue.md
new file mode 100644
index 00000000000..a86fa6ed062
--- /dev/null
+++ b/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/vue.md
@@ -0,0 +1,121 @@
+```html
+
+
+
+
+
+
+
+ ![avatar]()
+
+ {{ item }}
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/infinite-scroll/infinite-scroll-content/angular/example_component_html.md b/static/usage/v7/infinite-scroll/infinite-scroll-content/angular/example_component_html.md
new file mode 100644
index 00000000000..2e23e359257
--- /dev/null
+++ b/static/usage/v7/infinite-scroll/infinite-scroll-content/angular/example_component_html.md
@@ -0,0 +1,15 @@
+```html
+
+
+
+
+ ![avatar]()
+
+ {{ item }}
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/infinite-scroll/infinite-scroll-content/angular/example_component_ts.md b/static/usage/v7/infinite-scroll/infinite-scroll-content/angular/example_component_ts.md
new file mode 100644
index 00000000000..415ed5dba8b
--- /dev/null
+++ b/static/usage/v7/infinite-scroll/infinite-scroll-content/angular/example_component_ts.md
@@ -0,0 +1,20 @@
+```tsx
+import { Component, OnInit } from '@angular/core';
+
+import { InfiniteScrollCustomEvent } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.scss'],
+})
+export class ExampleComponent implements OnInit {
+ items = [];
+
+ ngOnInit() {
+ for (let i = 1; i < 51; i++) {
+ this.items.push(`Item ${i}`);
+ }
+ }
+}
+```
diff --git a/static/usage/v7/infinite-scroll/infinite-scroll-content/demo.html b/static/usage/v7/infinite-scroll/infinite-scroll-content/demo.html
new file mode 100644
index 00000000000..46016207432
--- /dev/null
+++ b/static/usage/v7/infinite-scroll/infinite-scroll-content/demo.html
@@ -0,0 +1,56 @@
+
+
+
+
+
+
+ Infinite Scroll
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/infinite-scroll/infinite-scroll-content/index.md b/static/usage/v7/infinite-scroll/infinite-scroll-content/index.md
new file mode 100644
index 00000000000..e053e5d2d97
--- /dev/null
+++ b/static/usage/v7/infinite-scroll/infinite-scroll-content/index.md
@@ -0,0 +1,24 @@
+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_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/v7/infinite-scroll/infinite-scroll-content/javascript.md b/static/usage/v7/infinite-scroll/infinite-scroll-content/javascript.md
new file mode 100644
index 00000000000..6b2a9bb409f
--- /dev/null
+++ b/static/usage/v7/infinite-scroll/infinite-scroll-content/javascript.md
@@ -0,0 +1,38 @@
+```html
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/infinite-scroll/infinite-scroll-content/react.md b/static/usage/v7/infinite-scroll/infinite-scroll-content/react.md
new file mode 100644
index 00000000000..2c2b5f77b8a
--- /dev/null
+++ b/static/usage/v7/infinite-scroll/infinite-scroll-content/react.md
@@ -0,0 +1,44 @@
+```tsx
+import React, { useState, useEffect } from 'react';
+import {
+ IonContent,
+ IonInfiniteScroll,
+ IonInfiniteScrollContent,
+ IonList,
+ IonItem,
+ IonAvatar,
+ IonLabel,
+} from '@ionic/react';
+
+function Example() {
+ const [items, setItems] = useState([]);
+
+ useEffect(() => {
+ const newItems = [];
+ for (let i = 1; i < 51; i++) {
+ newItems.push(`Item ${items.length + i}`);
+ }
+ setItems([...items, ...newItems]);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+
+ return (
+
+
+ {items.map((item, index) => (
+
+
+
+
+ {item}
+
+ ))}
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/infinite-scroll/infinite-scroll-content/vue.md b/static/usage/v7/infinite-scroll/infinite-scroll-content/vue.md
new file mode 100644
index 00000000000..9b7d22436ee
--- /dev/null
+++ b/static/usage/v7/infinite-scroll/infinite-scroll-content/vue.md
@@ -0,0 +1,58 @@
+```html
+
+
+
+
+
+ ![avatar]()
+
+ {{ item }}
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/input/basic/angular.md b/static/usage/v7/input/basic/angular.md
new file mode 100644
index 00000000000..a8678178aa6
--- /dev/null
+++ b/static/usage/v7/input/basic/angular.md
@@ -0,0 +1,23 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/input/basic/demo.html b/static/usage/v7/input/basic/demo.html
new file mode 100644
index 00000000000..c510bdbe5f5
--- /dev/null
+++ b/static/usage/v7/input/basic/demo.html
@@ -0,0 +1,50 @@
+
+
+
+
+
+
+ Input
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v7/input/basic/index.md b/static/usage/v7/input/basic/index.md
new file mode 100644
index 00000000000..ed54a843667
--- /dev/null
+++ b/static/usage/v7/input/basic/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/input/basic/javascript.md b/static/usage/v7/input/basic/javascript.md
new file mode 100644
index 00000000000..75e521fa3b6
--- /dev/null
+++ b/static/usage/v7/input/basic/javascript.md
@@ -0,0 +1,23 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/input/basic/react.md b/static/usage/v7/input/basic/react.md
new file mode 100644
index 00000000000..ff799a11f62
--- /dev/null
+++ b/static/usage/v7/input/basic/react.md
@@ -0,0 +1,31 @@
+```tsx
+import React from 'react';
+import { IonInput, IonItem, IonList } from '@ionic/react';
+
+function Example() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/input/basic/vue.md b/static/usage/v7/input/basic/vue.md
new file mode 100644
index 00000000000..cfdca09244a
--- /dev/null
+++ b/static/usage/v7/input/basic/vue.md
@@ -0,0 +1,34 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/input/clear/angular.md b/static/usage/v7/input/clear/angular.md
new file mode 100644
index 00000000000..9c6af49b21d
--- /dev/null
+++ b/static/usage/v7/input/clear/angular.md
@@ -0,0 +1,18 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/input/clear/demo.html b/static/usage/v7/input/clear/demo.html
new file mode 100644
index 00000000000..59d730c0e5c
--- /dev/null
+++ b/static/usage/v7/input/clear/demo.html
@@ -0,0 +1,48 @@
+
+
+
+
+
+
+ Input
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v7/input/clear/index.md b/static/usage/v7/input/clear/index.md
new file mode 100644
index 00000000000..eecea0ba6cf
--- /dev/null
+++ b/static/usage/v7/input/clear/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/input/clear/javascript.md b/static/usage/v7/input/clear/javascript.md
new file mode 100644
index 00000000000..79ffd9d9f47
--- /dev/null
+++ b/static/usage/v7/input/clear/javascript.md
@@ -0,0 +1,18 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/input/clear/react.md b/static/usage/v7/input/clear/react.md
new file mode 100644
index 00000000000..5ac087eed19
--- /dev/null
+++ b/static/usage/v7/input/clear/react.md
@@ -0,0 +1,23 @@
+```tsx
+import React from 'react';
+import { IonInput, IonItem, IonList } from '@ionic/react';
+
+function Example() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/input/clear/vue.md b/static/usage/v7/input/clear/vue.md
new file mode 100644
index 00000000000..15095b0cc91
--- /dev/null
+++ b/static/usage/v7/input/clear/vue.md
@@ -0,0 +1,29 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/input/counter/angular/example_component_html.md b/static/usage/v7/input/counter/angular/example_component_html.md
new file mode 100644
index 00000000000..e9f3d7dcaac
--- /dev/null
+++ b/static/usage/v7/input/counter/angular/example_component_html.md
@@ -0,0 +1,5 @@
+```html
+
+
+
+```
diff --git a/static/usage/v7/input/counter/angular/example_component_ts.md b/static/usage/v7/input/counter/angular/example_component_ts.md
new file mode 100644
index 00000000000..2c08dc06fc2
--- /dev/null
+++ b/static/usage/v7/input/counter/angular/example_component_ts.md
@@ -0,0 +1,13 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ customCounterFormatter(inputLength: number, maxLength: number) {
+ return `${maxLength - inputLength} characters remaining`;
+ }
+}
+```
diff --git a/static/usage/v7/input/counter/demo.html b/static/usage/v7/input/counter/demo.html
new file mode 100644
index 00000000000..33a28913204
--- /dev/null
+++ b/static/usage/v7/input/counter/demo.html
@@ -0,0 +1,41 @@
+
+
+
+
+
+
+ Item
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v7/input/counter/index.md b/static/usage/v7/input/counter/index.md
new file mode 100644
index 00000000000..72587aebe74
--- /dev/null
+++ b/static/usage/v7/input/counter/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+import react from './react.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/v7/input/counter/javascript.md b/static/usage/v7/input/counter/javascript.md
new file mode 100644
index 00000000000..ce15cf6f7a1
--- /dev/null
+++ b/static/usage/v7/input/counter/javascript.md
@@ -0,0 +1,10 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v7/input/counter/react.md b/static/usage/v7/input/counter/react.md
new file mode 100644
index 00000000000..f0b8f6e2344
--- /dev/null
+++ b/static/usage/v7/input/counter/react.md
@@ -0,0 +1,15 @@
+```tsx
+import React from 'react';
+import { IonInput } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+ `${maxLength - inputLength} characters remaining`}>
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/input/counter/vue.md b/static/usage/v7/input/counter/vue.md
new file mode 100644
index 00000000000..2cca8bf2f03
--- /dev/null
+++ b/static/usage/v7/input/counter/vue.md
@@ -0,0 +1,21 @@
+```html
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/input/fill/angular.md b/static/usage/v7/input/fill/angular.md
new file mode 100644
index 00000000000..60af531cd45
--- /dev/null
+++ b/static/usage/v7/input/fill/angular.md
@@ -0,0 +1,7 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v7/input/fill/demo.html b/static/usage/v7/input/fill/demo.html
new file mode 100644
index 00000000000..ff6c1d146bf
--- /dev/null
+++ b/static/usage/v7/input/fill/demo.html
@@ -0,0 +1,36 @@
+
+
+
+
+
+
+ Input
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v7/input/fill/index.md b/static/usage/v7/input/fill/index.md
new file mode 100644
index 00000000000..10fcef1cb28
--- /dev/null
+++ b/static/usage/v7/input/fill/index.md
@@ -0,0 +1,14 @@
+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/input/fill/javascript.md b/static/usage/v7/input/fill/javascript.md
new file mode 100644
index 00000000000..60af531cd45
--- /dev/null
+++ b/static/usage/v7/input/fill/javascript.md
@@ -0,0 +1,7 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v7/input/fill/react.md b/static/usage/v7/input/fill/react.md
new file mode 100644
index 00000000000..834ca7f96ea
--- /dev/null
+++ b/static/usage/v7/input/fill/react.md
@@ -0,0 +1,17 @@
+```tsx
+import React from 'react';
+import { IonInput } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/input/fill/vue.md b/static/usage/v7/input/fill/vue.md
new file mode 100644
index 00000000000..f17fd6e151d
--- /dev/null
+++ b/static/usage/v7/input/fill/vue.md
@@ -0,0 +1,18 @@
+```html
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/input/filtering/angular/example_component_html.md b/static/usage/v7/input/filtering/angular/example_component_html.md
new file mode 100644
index 00000000000..da2f4776bd2
--- /dev/null
+++ b/static/usage/v7/input/filtering/angular/example_component_html.md
@@ -0,0 +1,12 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v7/input/filtering/angular/example_component_ts.md b/static/usage/v7/input/filtering/angular/example_component_ts.md
new file mode 100644
index 00000000000..03f71066cc3
--- /dev/null
+++ b/static/usage/v7/input/filtering/angular/example_component_ts.md
@@ -0,0 +1,27 @@
+```ts
+import { Component, ViewChild } from '@angular/core';
+import type { IonInput } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ inputModel = '';
+
+ @ViewChild('ionInputEl', { static: true }) ionInputEl!: IonInput;
+
+ onInput(ev) {
+ const value = ev.target!.value;
+
+ // Removes non alphanumeric characters
+ const filteredValue = value.replace(/[^a-zA-Z0-9]+/g,'');
+
+ /**
+ * Update both the state variable and
+ * the component to keep them in sync.
+ */
+ this.ionInputEl.value = this.inputModel = filteredValue;
+ }
+}
+```
diff --git a/static/usage/v7/input/filtering/demo.html b/static/usage/v7/input/filtering/demo.html
new file mode 100644
index 00000000000..f7a4c1b3aa7
--- /dev/null
+++ b/static/usage/v7/input/filtering/demo.html
@@ -0,0 +1,38 @@
+
+
+
+
+
+
+ Input
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v7/input/filtering/index.md b/static/usage/v7/input/filtering/index.md
new file mode 100644
index 00000000000..f5f4019cf97
--- /dev/null
+++ b/static/usage/v7/input/filtering/index.md
@@ -0,0 +1,20 @@
+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_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/v7/input/filtering/javascript.md b/static/usage/v7/input/filtering/javascript.md
new file mode 100644
index 00000000000..b70d42c6dd1
--- /dev/null
+++ b/static/usage/v7/input/filtering/javascript.md
@@ -0,0 +1,16 @@
+```html
+
+
+
+
+
+
+
+```
\ No newline at end of file
diff --git a/static/usage/v7/input/filtering/react.md b/static/usage/v7/input/filtering/react.md
new file mode 100644
index 00000000000..7218199a3d2
--- /dev/null
+++ b/static/usage/v7/input/filtering/react.md
@@ -0,0 +1,41 @@
+```tsx
+import React, { useState, useRef } from 'react';
+import { IonInput, IonItem, IonList } from '@ionic/react';
+
+function Example() {
+ const [inputModel, setInputModel ] = useState('');
+ const ionInputEl = useRef(null);
+
+ const onInput = (ev: Event) => {
+ const value = (ev.target as HTMLIonInputElement).value as string;
+
+ // Removes non alphanumeric characters
+ const filteredValue = value.replace(/[^a-zA-Z0-9]+/g,'');
+
+ /**
+ * Update both the state variable and
+ * the component to keep them in sync.
+ */
+ setInputModel(filteredValue);
+
+ const inputCmp = ionInputEl.current;
+ if (inputCmp !== null) {
+ inputCmp.value = filteredValue;
+ }
+ }
+
+ return (
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/input/filtering/vue.md b/static/usage/v7/input/filtering/vue.md
new file mode 100644
index 00000000000..dd93e9bb2c7
--- /dev/null
+++ b/static/usage/v7/input/filtering/vue.md
@@ -0,0 +1,46 @@
+```html
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/input/helper-error/angular.md b/static/usage/v7/input/helper-error/angular.md
new file mode 100644
index 00000000000..9f75f6b070f
--- /dev/null
+++ b/static/usage/v7/input/helper-error/angular.md
@@ -0,0 +1,12 @@
+```html
+
+```
diff --git a/static/usage/v7/input/helper-error/demo.html b/static/usage/v7/input/helper-error/demo.html
new file mode 100644
index 00000000000..1a5bf5440d3
--- /dev/null
+++ b/static/usage/v7/input/helper-error/demo.html
@@ -0,0 +1,56 @@
+
+
+
+
+
+
+ Input
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v7/input/helper-error/index.md b/static/usage/v7/input/helper-error/index.md
new file mode 100644
index 00000000000..03393f19b24
--- /dev/null
+++ b/static/usage/v7/input/helper-error/index.md
@@ -0,0 +1,18 @@
+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/input/helper-error/javascript.md b/static/usage/v7/input/helper-error/javascript.md
new file mode 100644
index 00000000000..16cd161715d
--- /dev/null
+++ b/static/usage/v7/input/helper-error/javascript.md
@@ -0,0 +1,36 @@
+```html
+
+
+
+```
diff --git a/static/usage/v7/input/helper-error/react.md b/static/usage/v7/input/helper-error/react.md
new file mode 100644
index 00000000000..0067c90dac9
--- /dev/null
+++ b/static/usage/v7/input/helper-error/react.md
@@ -0,0 +1,44 @@
+```tsx
+import React, { useState } from 'react';
+import { IonInput } from '@ionic/react';
+
+function Example() {
+ const [isTouched, setIsTouched] = useState(false);
+ const [isValid, setIsValid] = useState();
+
+ const validateEmail = (email: string) => {
+ return email.match(
+ /^(?=.{1,254}$)(?=.{1,64}@)[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/
+ );
+ };
+
+ const validate = (ev: Event) => {
+ const value = (ev.target as HTMLInputElement).value;
+
+ setIsValid(undefined);
+
+ if (value === '') return;
+
+ validateEmail(value) !== null ? setIsValid(true) : setIsValid(false);
+ };
+
+ const markTouched = () => {
+ setIsTouched(true);
+ };
+
+ return (
+ validate(event)}
+ onIonBlur={() => markTouched()}
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/input/helper-error/vue.md b/static/usage/v7/input/helper-error/vue.md
new file mode 100644
index 00000000000..33934b31ae2
--- /dev/null
+++ b/static/usage/v7/input/helper-error/vue.md
@@ -0,0 +1,46 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v7/input/label-placement/angular.md b/static/usage/v7/input/label-placement/angular.md
new file mode 100644
index 00000000000..1257ff9c641
--- /dev/null
+++ b/static/usage/v7/input/label-placement/angular.md
@@ -0,0 +1,19 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/input/label-placement/demo.html b/static/usage/v7/input/label-placement/demo.html
new file mode 100644
index 00000000000..fae6d6ff849
--- /dev/null
+++ b/static/usage/v7/input/label-placement/demo.html
@@ -0,0 +1,46 @@
+
+
+
+
+
+
+ Input
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v7/input/label-placement/index.md b/static/usage/v7/input/label-placement/index.md
new file mode 100644
index 00000000000..ffc814dbec5
--- /dev/null
+++ b/static/usage/v7/input/label-placement/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/input/label-placement/javascript.md b/static/usage/v7/input/label-placement/javascript.md
new file mode 100644
index 00000000000..e08cf249e14
--- /dev/null
+++ b/static/usage/v7/input/label-placement/javascript.md
@@ -0,0 +1,19 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/input/label-placement/react.md b/static/usage/v7/input/label-placement/react.md
new file mode 100644
index 00000000000..59a819eaab4
--- /dev/null
+++ b/static/usage/v7/input/label-placement/react.md
@@ -0,0 +1,27 @@
+```tsx
+import React from 'react';
+import { IonInput, IonItem, IonList } from '@ionic/react';
+
+function Example() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/input/label-placement/vue.md b/static/usage/v7/input/label-placement/vue.md
new file mode 100644
index 00000000000..782e77971c6
--- /dev/null
+++ b/static/usage/v7/input/label-placement/vue.md
@@ -0,0 +1,30 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/input/migration/index.md b/static/usage/v7/input/migration/index.md
new file mode 100644
index 00000000000..6423ae78f24
--- /dev/null
+++ b/static/usage/v7/input/migration/index.md
@@ -0,0 +1,224 @@
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+````mdx-code-block
+
+
+
+```html
+
+
+
+
+ Email:
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Email:
+
+
+
+
+
+
+
+
+
+
+
+
+ Email:
+
+ Enter an email
+ Please enter a valid email
+
+
+
+
+
+
+```
+
+
+
+```html
+
+
+
+
+ Email:
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Email:
+
+
+
+
+
+
+
+
+
+
+
+
+ Email:
+
+ Enter an email
+ Please enter a valid email
+
+
+
+
+
+
+```
+
+
+
+```tsx
+{/* Label and Label Position */}
+
+{/* Before */}
+
+ Email:
+
+
+
+{/* After */}
+
+
+
+
+
+{/* Fill */}
+
+{/* Before */}
+
+ Email:
+
+
+
+{/* After */}
+
+{/* Inputs using `fill` should not be placed in IonItem */}
+
+
+{/* Input-specific features on IonItem */}
+
+{/* Before */}
+
+ Email:
+
+ Enter an email
+ Please enter a valid email
+
+
+{/* After */}
+
+
+
+```
+
+
+
+```html
+
+
+
+
+ Email:
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Email:
+
+
+
+
+
+
+
+
+
+
+
+
+ Email:
+
+ Enter an email
+ Please enter a valid email
+
+
+
+
+
+
+```
+
+
+````
\ No newline at end of file
diff --git a/static/usage/v7/input/theming/colors/angular.md b/static/usage/v7/input/theming/colors/angular.md
new file mode 100644
index 00000000000..88a63e9a102
--- /dev/null
+++ b/static/usage/v7/input/theming/colors/angular.md
@@ -0,0 +1,11 @@
+```html
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/input/theming/colors/demo.html b/static/usage/v7/input/theming/colors/demo.html
new file mode 100644
index 00000000000..379dbae3746
--- /dev/null
+++ b/static/usage/v7/input/theming/colors/demo.html
@@ -0,0 +1,44 @@
+
+
+
+
+
+
+ Input
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v7/input/theming/colors/index.md b/static/usage/v7/input/theming/colors/index.md
new file mode 100644
index 00000000000..17c29f994c3
--- /dev/null
+++ b/static/usage/v7/input/theming/colors/index.md
@@ -0,0 +1,13 @@
+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/input/theming/colors/javascript.md b/static/usage/v7/input/theming/colors/javascript.md
new file mode 100644
index 00000000000..88a63e9a102
--- /dev/null
+++ b/static/usage/v7/input/theming/colors/javascript.md
@@ -0,0 +1,11 @@
+```html
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/input/theming/colors/react.md b/static/usage/v7/input/theming/colors/react.md
new file mode 100644
index 00000000000..7242cd393d6
--- /dev/null
+++ b/static/usage/v7/input/theming/colors/react.md
@@ -0,0 +1,21 @@
+```tsx
+import React from 'react';
+import { IonInput } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/input/theming/colors/vue.md b/static/usage/v7/input/theming/colors/vue.md
new file mode 100644
index 00000000000..e9d3a4e0ef4
--- /dev/null
+++ b/static/usage/v7/input/theming/colors/vue.md
@@ -0,0 +1,22 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/input/theming/css-properties/angular/example_component_css.md b/static/usage/v7/input/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..154e20ad0cc
--- /dev/null
+++ b/static/usage/v7/input/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,18 @@
+```css
+ion-input.custom {
+ --background: #373737;
+ --color: #fff;
+ --placeholder-color: #ddd;
+ --placeholder-opacity: .8;
+
+ --padding-bottom: 10px;
+ --padding-end: 10px;
+ --padding-start: 10px;
+ --padding-top: 10px;
+}
+
+ion-input.custom .helper-text,
+ion-input.custom .counter {
+ color: var(--ion-color-step-700, #373737);
+}
+```
diff --git a/static/usage/v7/input/theming/css-properties/angular/example_component_html.md b/static/usage/v7/input/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..c3ffd4077fe
--- /dev/null
+++ b/static/usage/v7/input/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,10 @@
+```html
+
+```
diff --git a/static/usage/v7/input/theming/css-properties/demo.html b/static/usage/v7/input/theming/css-properties/demo.html
new file mode 100644
index 00000000000..f8e8df8f8fa
--- /dev/null
+++ b/static/usage/v7/input/theming/css-properties/demo.html
@@ -0,0 +1,55 @@
+
+
+
+
+
+
+ Input
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v7/input/theming/css-properties/index.md b/static/usage/v7/input/theming/css-properties/index.md
new file mode 100644
index 00000000000..db7ffd5f993
--- /dev/null
+++ b/static/usage/v7/input/theming/css-properties/index.md
@@ -0,0 +1,33 @@
+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/input/theming/css-properties/javascript.md b/static/usage/v7/input/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..4cbd6339c3f
--- /dev/null
+++ b/static/usage/v7/input/theming/css-properties/javascript.md
@@ -0,0 +1,29 @@
+```html
+
+
+
+```
diff --git a/static/usage/v7/input/theming/css-properties/react/main_css.md b/static/usage/v7/input/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..c83de40d5f0
--- /dev/null
+++ b/static/usage/v7/input/theming/css-properties/react/main_css.md
@@ -0,0 +1,18 @@
+```css
+ion-input.custom {
+ --background: #373737;
+ --color: #fff;
+ --placeholder-color: #ddd;
+ --placeholder-opacity: .8;
+
+ --padding-bottom: 10px;
+ --padding-end: 10px;
+ --padding-start: 10px;
+ --padding-top: 10px;
+}
+
+ion-input.custom .helper-text,
+ion-input.custom .counter {
+ color: #373737;
+}
+```
diff --git a/static/usage/v7/input/theming/css-properties/react/main_tsx.md b/static/usage/v7/input/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..b1e91327713
--- /dev/null
+++ b/static/usage/v7/input/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,20 @@
+```tsx
+import React from 'react';
+import { IonInput } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/input/theming/css-properties/vue.md b/static/usage/v7/input/theming/css-properties/vue.md
new file mode 100644
index 00000000000..8a7bd9d898e
--- /dev/null
+++ b/static/usage/v7/input/theming/css-properties/vue.md
@@ -0,0 +1,40 @@
+```html
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/input/types/angular.md b/static/usage/v7/input/types/angular.md
new file mode 100644
index 00000000000..6506b2ca271
--- /dev/null
+++ b/static/usage/v7/input/types/angular.md
@@ -0,0 +1,25 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/input/types/demo.html b/static/usage/v7/input/types/demo.html
new file mode 100644
index 00000000000..e38f604302d
--- /dev/null
+++ b/static/usage/v7/input/types/demo.html
@@ -0,0 +1,50 @@
+
+
+
+
+
+
+ Input
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v7/input/types/index.md b/static/usage/v7/input/types/index.md
new file mode 100644
index 00000000000..7640d15d59d
--- /dev/null
+++ b/static/usage/v7/input/types/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/input/types/javascript.md b/static/usage/v7/input/types/javascript.md
new file mode 100644
index 00000000000..6506b2ca271
--- /dev/null
+++ b/static/usage/v7/input/types/javascript.md
@@ -0,0 +1,25 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/input/types/react.md b/static/usage/v7/input/types/react.md
new file mode 100644
index 00000000000..7a90e30e81a
--- /dev/null
+++ b/static/usage/v7/input/types/react.md
@@ -0,0 +1,31 @@
+```tsx
+import React from 'react';
+import { IonInput, IonItem, IonList } from '@ionic/react';
+
+function Example() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/input/types/vue.md b/static/usage/v7/input/types/vue.md
new file mode 100644
index 00000000000..2415bc71ea5
--- /dev/null
+++ b/static/usage/v7/input/types/vue.md
@@ -0,0 +1,34 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/item-divider/basic/angular.md b/static/usage/v7/item-divider/basic/angular.md
new file mode 100644
index 00000000000..d74e5b05549
--- /dev/null
+++ b/static/usage/v7/item-divider/basic/angular.md
@@ -0,0 +1,39 @@
+```html
+
+
+
+
+ Section A
+
+
+
+
+ A1
+
+
+ A2
+
+
+ A3
+
+
+
+
+
+
+ Section B
+
+
+
+
+ B1
+
+
+ B2
+
+
+ B3
+
+
+
+```
diff --git a/static/usage/v7/item-divider/basic/demo.html b/static/usage/v7/item-divider/basic/demo.html
new file mode 100644
index 00000000000..d99c52d65af
--- /dev/null
+++ b/static/usage/v7/item-divider/basic/demo.html
@@ -0,0 +1,66 @@
+
+
+
+
+
+
+ Item Divider
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Section A
+
+
+
+
+ A1
+
+
+ A2
+
+
+ A3
+
+
+
+
+
+
+ Section B
+
+
+
+
+ B1
+
+
+ B2
+
+
+ B3
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/item-divider/basic/index.md b/static/usage/v7/item-divider/basic/index.md
new file mode 100644
index 00000000000..9c8a9e292be
--- /dev/null
+++ b/static/usage/v7/item-divider/basic/index.md
@@ -0,0 +1,13 @@
+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/item-divider/basic/javascript.md b/static/usage/v7/item-divider/basic/javascript.md
new file mode 100644
index 00000000000..d74e5b05549
--- /dev/null
+++ b/static/usage/v7/item-divider/basic/javascript.md
@@ -0,0 +1,39 @@
+```html
+
+
+
+
+ Section A
+
+
+
+
+ A1
+
+
+ A2
+
+
+ A3
+
+
+
+
+
+
+ Section B
+
+
+
+
+ B1
+
+
+ B2
+
+
+ B3
+
+
+
+```
diff --git a/static/usage/v7/item-divider/basic/react.md b/static/usage/v7/item-divider/basic/react.md
new file mode 100644
index 00000000000..289f1727c8d
--- /dev/null
+++ b/static/usage/v7/item-divider/basic/react.md
@@ -0,0 +1,47 @@
+```tsx
+import React from 'react';
+import { IonItem, IonItemDivider, IonItemGroup, IonLabel, IonList } from '@ionic/react';
+
+function Example() {
+ return (
+
+
+
+
+ Section A
+
+
+
+
+ A1
+
+
+ A2
+
+
+ A3
+
+
+
+
+
+
+ Section B
+
+
+
+
+ B1
+
+
+ B2
+
+
+ B3
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/item-divider/basic/vue.md b/static/usage/v7/item-divider/basic/vue.md
new file mode 100644
index 00000000000..95f26ebc027
--- /dev/null
+++ b/static/usage/v7/item-divider/basic/vue.md
@@ -0,0 +1,50 @@
+```html
+
+
+
+
+
+ Section A
+
+
+
+
+ A1
+
+
+ A2
+
+
+ A3
+
+
+
+
+
+
+ Section B
+
+
+
+
+ B1
+
+
+ B2
+
+
+ B3
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/item-divider/theming/colors/angular.md b/static/usage/v7/item-divider/theming/colors/angular.md
new file mode 100644
index 00000000000..e23070ec5a0
--- /dev/null
+++ b/static/usage/v7/item-divider/theming/colors/angular.md
@@ -0,0 +1,32 @@
+```html
+
+ Default
+
+
+ Primary
+
+
+ Secondary
+
+
+ Tertiary
+
+
+ Success
+
+
+ Warning
+
+
+ Danger
+
+
+ Light
+
+
+ Medium
+
+
+ Dark
+
+```
diff --git a/static/usage/v7/item-divider/theming/colors/demo.html b/static/usage/v7/item-divider/theming/colors/demo.html
new file mode 100644
index 00000000000..354ab9096e8
--- /dev/null
+++ b/static/usage/v7/item-divider/theming/colors/demo.html
@@ -0,0 +1,59 @@
+
+
+
+
+
+
+ Item Divider
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Default
+
+
+ Primary
+
+
+ Secondary
+
+
+ Tertiary
+
+
+ Success
+
+
+ Warning
+
+
+ Danger
+
+
+ Light
+
+
+ Medium
+
+
+ Dark
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/item-divider/theming/colors/index.md b/static/usage/v7/item-divider/theming/colors/index.md
new file mode 100644
index 00000000000..a728b84c5db
--- /dev/null
+++ b/static/usage/v7/item-divider/theming/colors/index.md
@@ -0,0 +1,13 @@
+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/item-divider/theming/colors/javascript.md b/static/usage/v7/item-divider/theming/colors/javascript.md
new file mode 100644
index 00000000000..e23070ec5a0
--- /dev/null
+++ b/static/usage/v7/item-divider/theming/colors/javascript.md
@@ -0,0 +1,32 @@
+```html
+
+ Default
+
+
+ Primary
+
+
+ Secondary
+
+
+ Tertiary
+
+
+ Success
+
+
+ Warning
+
+
+ Danger
+
+
+ Light
+
+
+ Medium
+
+
+ Dark
+
+```
diff --git a/static/usage/v7/item-divider/theming/colors/react.md b/static/usage/v7/item-divider/theming/colors/react.md
new file mode 100644
index 00000000000..7bf4cd2193f
--- /dev/null
+++ b/static/usage/v7/item-divider/theming/colors/react.md
@@ -0,0 +1,42 @@
+```tsx
+import React from 'react';
+import { IonItemDivider, IonLabel } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+ Default
+
+
+ Primary
+
+
+ Secondary
+
+
+ Tertiary
+
+
+ Success
+
+
+ Warning
+
+
+ Danger
+
+
+ Light
+
+
+ Medium
+
+
+ Dark
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/item-divider/theming/colors/vue.md b/static/usage/v7/item-divider/theming/colors/vue.md
new file mode 100644
index 00000000000..981f99a09da
--- /dev/null
+++ b/static/usage/v7/item-divider/theming/colors/vue.md
@@ -0,0 +1,43 @@
+```html
+
+
+ Default
+
+
+ Primary
+
+
+ Secondary
+
+
+ Tertiary
+
+
+ Success
+
+
+ Warning
+
+
+ Danger
+
+
+ Light
+
+
+ Medium
+
+
+ Dark
+
+
+
+
+```
diff --git a/static/usage/v7/item-divider/theming/css-properties/angular/example_component_css.md b/static/usage/v7/item-divider/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..7c29ebdd846
--- /dev/null
+++ b/static/usage/v7/item-divider/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,11 @@
+```css
+ion-item-divider {
+ --background: #19422d;
+ --color: #fff;
+
+ --padding-top: 10px;
+ --padding-bottom: 10px;
+ --padding-start: 20px;
+ --padding-end: 20px;
+}
+```
diff --git a/static/usage/v7/item-divider/theming/css-properties/angular/example_component_html.md b/static/usage/v7/item-divider/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..b3b1bb4da25
--- /dev/null
+++ b/static/usage/v7/item-divider/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,7 @@
+```html
+
+
+ Item Divider
+
+
+```
diff --git a/static/usage/v7/item-divider/theming/css-properties/demo.html b/static/usage/v7/item-divider/theming/css-properties/demo.html
new file mode 100644
index 00000000000..9223767446d
--- /dev/null
+++ b/static/usage/v7/item-divider/theming/css-properties/demo.html
@@ -0,0 +1,40 @@
+
+
+
+
+
+
+ Item Divider
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Item Divider
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/item-divider/theming/css-properties/index.md b/static/usage/v7/item-divider/theming/css-properties/index.md
new file mode 100644
index 00000000000..f425706d75d
--- /dev/null
+++ b/static/usage/v7/item-divider/theming/css-properties/index.md
@@ -0,0 +1,33 @@
+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/item-divider/theming/css-properties/javascript.md b/static/usage/v7/item-divider/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..6622b6d7e3f
--- /dev/null
+++ b/static/usage/v7/item-divider/theming/css-properties/javascript.md
@@ -0,0 +1,19 @@
+```html
+
+
+
+
+ Item Divider
+
+
+```
diff --git a/static/usage/v7/item-divider/theming/css-properties/react/main_css.md b/static/usage/v7/item-divider/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..7c29ebdd846
--- /dev/null
+++ b/static/usage/v7/item-divider/theming/css-properties/react/main_css.md
@@ -0,0 +1,11 @@
+```css
+ion-item-divider {
+ --background: #19422d;
+ --color: #fff;
+
+ --padding-top: 10px;
+ --padding-bottom: 10px;
+ --padding-start: 20px;
+ --padding-end: 20px;
+}
+```
diff --git a/static/usage/v7/item-divider/theming/css-properties/react/main_tsx.md b/static/usage/v7/item-divider/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..6cd8d464d7e
--- /dev/null
+++ b/static/usage/v7/item-divider/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,18 @@
+
+```tsx
+import React from 'react';
+import { IonItemDivider, IonLabel } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+
+
+ Item Divider
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/item-divider/theming/css-properties/vue.md b/static/usage/v7/item-divider/theming/css-properties/vue.md
new file mode 100644
index 00000000000..3589bcc7cd4
--- /dev/null
+++ b/static/usage/v7/item-divider/theming/css-properties/vue.md
@@ -0,0 +1,30 @@
+```html
+
+
+
+ Item Divider
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/item-group/basic/angular.md b/static/usage/v7/item-group/basic/angular.md
new file mode 100644
index 00000000000..8ea0ff7cef9
--- /dev/null
+++ b/static/usage/v7/item-group/basic/angular.md
@@ -0,0 +1,33 @@
+```html
+
+
+ A
+
+
+
+ Angola
+
+
+ Argentina
+
+
+ Armenia
+
+
+
+
+
+ B
+
+
+
+ Bangladesh
+
+
+ Belarus
+
+
+ Belgium
+
+
+```
diff --git a/static/usage/v7/item-group/basic/demo.html b/static/usage/v7/item-group/basic/demo.html
new file mode 100644
index 00000000000..eaf062c371d
--- /dev/null
+++ b/static/usage/v7/item-group/basic/demo.html
@@ -0,0 +1,60 @@
+
+
+
+
+
+
+ Item Group
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ A
+
+
+
+ Angola
+
+
+ Argentina
+
+
+ Armenia
+
+
+
+
+
+ B
+
+
+
+ Bangladesh
+
+
+ Belarus
+
+
+ Belgium
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/item-group/basic/index.md b/static/usage/v7/item-group/basic/index.md
new file mode 100644
index 00000000000..a752ec62278
--- /dev/null
+++ b/static/usage/v7/item-group/basic/index.md
@@ -0,0 +1,13 @@
+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/item-group/basic/javascript.md b/static/usage/v7/item-group/basic/javascript.md
new file mode 100644
index 00000000000..8ea0ff7cef9
--- /dev/null
+++ b/static/usage/v7/item-group/basic/javascript.md
@@ -0,0 +1,33 @@
+```html
+
+
+ A
+
+
+
+ Angola
+
+
+ Argentina
+
+
+ Armenia
+
+
+
+
+
+ B
+
+
+
+ Bangladesh
+
+
+ Belarus
+
+
+ Belgium
+
+
+```
diff --git a/static/usage/v7/item-group/basic/react.md b/static/usage/v7/item-group/basic/react.md
new file mode 100644
index 00000000000..ddb3f381230
--- /dev/null
+++ b/static/usage/v7/item-group/basic/react.md
@@ -0,0 +1,43 @@
+```tsx
+import React from 'react';
+import { IonItem, IonItemDivider, IonItemGroup, IonLabel } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+ A
+
+
+
+ Angola
+
+
+ Argentina
+
+
+ Armenia
+
+
+
+
+
+ B
+
+
+
+ Bangladesh
+
+
+ Belarus
+
+
+ Belgium
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/item-group/basic/vue.md b/static/usage/v7/item-group/basic/vue.md
new file mode 100644
index 00000000000..edba72f0e69
--- /dev/null
+++ b/static/usage/v7/item-group/basic/vue.md
@@ -0,0 +1,44 @@
+```html
+
+
+
+ A
+
+
+
+ Angola
+
+
+ Argentina
+
+
+ Armenia
+
+
+
+
+
+ B
+
+
+
+ Bangladesh
+
+
+ Belarus
+
+
+ Belgium
+
+
+
+
+
+```
diff --git a/static/usage/v7/item-group/sliding-items/angular.md b/static/usage/v7/item-group/sliding-items/angular.md
new file mode 100644
index 00000000000..a451b58c9c4
--- /dev/null
+++ b/static/usage/v7/item-group/sliding-items/angular.md
@@ -0,0 +1,95 @@
+```html
+
+
+
+ Fruits
+
+
+
+
+
+
+ Grapes
+
+
+
+
+ Favorite
+
+
+
+
+
+
+
+ Apples
+
+
+
+
+ Favorite
+
+
+
+
+
+
+
+ Bananas
+
+
+
+
+ Favorite
+
+
+
+
+
+
+
+
+ Vegetables
+
+
+
+
+
+
+ Carrots
+
+
+
+
+ Favorite
+
+
+
+
+
+
+
+ Broccoli
+
+
+
+
+ Favorite
+
+
+
+
+
+
+
+ Celery
+
+
+
+
+ Favorite
+
+
+
+
+```
diff --git a/static/usage/v7/item-group/sliding-items/demo.html b/static/usage/v7/item-group/sliding-items/demo.html
new file mode 100644
index 00000000000..87c87870df4
--- /dev/null
+++ b/static/usage/v7/item-group/sliding-items/demo.html
@@ -0,0 +1,122 @@
+
+
+
+
+
+
+ Item Group
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Fruits
+
+
+
+
+
+
+ Grapes
+
+
+
+
+ Favorite
+
+
+
+
+
+
+
+ Apples
+
+
+
+
+ Favorite
+
+
+
+
+
+
+
+ Bananas
+
+
+
+
+ Favorite
+
+
+
+
+
+
+
+
+ Vegetables
+
+
+
+
+
+
+ Carrots
+
+
+
+
+ Favorite
+
+
+
+
+
+
+
+ Broccoli
+
+
+
+
+ Favorite
+
+
+
+
+
+
+
+ Celery
+
+
+
+
+ Favorite
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/item-group/sliding-items/index.md b/static/usage/v7/item-group/sliding-items/index.md
new file mode 100644
index 00000000000..39983e2a9bc
--- /dev/null
+++ b/static/usage/v7/item-group/sliding-items/index.md
@@ -0,0 +1,13 @@
+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/item-group/sliding-items/javascript.md b/static/usage/v7/item-group/sliding-items/javascript.md
new file mode 100644
index 00000000000..a451b58c9c4
--- /dev/null
+++ b/static/usage/v7/item-group/sliding-items/javascript.md
@@ -0,0 +1,95 @@
+```html
+
+
+
+ Fruits
+
+
+
+
+
+
+ Grapes
+
+
+
+
+ Favorite
+
+
+
+
+
+
+
+ Apples
+
+
+
+
+ Favorite
+
+
+
+
+
+
+
+ Bananas
+
+
+
+
+ Favorite
+
+
+
+
+
+
+
+
+ Vegetables
+
+
+
+
+
+
+ Carrots
+
+
+
+
+ Favorite
+
+
+
+
+
+
+
+ Broccoli
+
+
+
+
+ Favorite
+
+
+
+
+
+
+
+ Celery
+
+
+
+
+ Favorite
+
+
+
+
+```
diff --git a/static/usage/v7/item-group/sliding-items/react.md b/static/usage/v7/item-group/sliding-items/react.md
new file mode 100644
index 00000000000..2ca4d7ca380
--- /dev/null
+++ b/static/usage/v7/item-group/sliding-items/react.md
@@ -0,0 +1,105 @@
+```tsx
+import React from 'react';
+import { IonItem, IonItemDivider, IonItemGroup, IonItemOption, IonItemOptions, IonItemSliding, IonLabel } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+
+ Fruits
+
+
+
+
+
+
+ Grapes
+
+
+
+
+ Favorite
+
+
+
+
+
+
+
+ Apples
+
+
+
+
+ Favorite
+
+
+
+
+
+
+
+ Bananas
+
+
+
+
+ Favorite
+
+
+
+
+
+
+
+
+ Vegetables
+
+
+
+
+
+
+ Carrots
+
+
+
+
+ Favorite
+
+
+
+
+
+
+
+ Broccoli
+
+
+
+
+ Favorite
+
+
+
+
+
+
+
+ Celery
+
+
+
+
+ Favorite
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/item-group/sliding-items/vue.md b/static/usage/v7/item-group/sliding-items/vue.md
new file mode 100644
index 00000000000..5110ba1abed
--- /dev/null
+++ b/static/usage/v7/item-group/sliding-items/vue.md
@@ -0,0 +1,106 @@
+```html
+
+
+
+
+ Fruits
+
+
+
+
+
+
+ Grapes
+
+
+
+
+ Favorite
+
+
+
+
+
+
+
+ Apples
+
+
+
+
+ Favorite
+
+
+
+
+
+
+
+ Bananas
+
+
+
+
+ Favorite
+
+
+
+
+
+
+
+
+ Vegetables
+
+
+
+
+
+
+ Carrots
+
+
+
+
+ Favorite
+
+
+
+
+
+
+
+ Broccoli
+
+
+
+
+ Favorite
+
+
+
+
+
+
+
+ Celery
+
+
+
+
+ Favorite
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/item-sliding/basic/angular.md b/static/usage/v7/item-sliding/basic/angular.md
new file mode 100644
index 00000000000..a5404da4cb4
--- /dev/null
+++ b/static/usage/v7/item-sliding/basic/angular.md
@@ -0,0 +1,39 @@
+```html
+
+
+
+ Sliding Item with End Options
+
+
+
+ Favorite
+ Delete
+
+
+
+
+
+ Archive
+
+
+
+ Sliding Item with Start Options
+
+
+
+
+
+ Archive
+
+
+
+ Sliding Item with Options on Both Sides
+
+
+
+ Favorite
+ Delete
+
+
+
+```
diff --git a/static/usage/v7/item-sliding/basic/demo.html b/static/usage/v7/item-sliding/basic/demo.html
new file mode 100644
index 00000000000..00e4bc82f99
--- /dev/null
+++ b/static/usage/v7/item-sliding/basic/demo.html
@@ -0,0 +1,66 @@
+
+
+
+
+
+
+ Item Sliding
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Sliding Item with End Options
+
+
+
+ Favorite
+ Delete
+
+
+
+
+
+ Archive
+
+
+
+ Sliding Item with Start Options
+
+
+
+
+
+ Archive
+
+
+
+ Sliding Item with Options on Both Sides
+
+
+
+ Favorite
+ Delete
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/item-sliding/basic/index.md b/static/usage/v7/item-sliding/basic/index.md
new file mode 100644
index 00000000000..a75eff57b64
--- /dev/null
+++ b/static/usage/v7/item-sliding/basic/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/item-sliding/basic/javascript.md b/static/usage/v7/item-sliding/basic/javascript.md
new file mode 100644
index 00000000000..a5404da4cb4
--- /dev/null
+++ b/static/usage/v7/item-sliding/basic/javascript.md
@@ -0,0 +1,39 @@
+```html
+
+
+
+ Sliding Item with End Options
+
+
+
+ Favorite
+ Delete
+
+
+
+
+
+ Archive
+
+
+
+ Sliding Item with Start Options
+
+
+
+
+
+ Archive
+
+
+
+ Sliding Item with Options on Both Sides
+
+
+
+ Favorite
+ Delete
+
+
+
+```
diff --git a/static/usage/v7/item-sliding/basic/react.md b/static/usage/v7/item-sliding/basic/react.md
new file mode 100644
index 00000000000..d9b45125574
--- /dev/null
+++ b/static/usage/v7/item-sliding/basic/react.md
@@ -0,0 +1,47 @@
+```tsx
+import React from 'react';
+import { IonItem, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList } from '@ionic/react';
+
+function Example() {
+ return (
+
+
+
+ Sliding Item with End Options
+
+
+
+ Favorite
+ Delete
+
+
+
+
+
+ Archive
+
+
+
+ Sliding Item with Start Options
+
+
+
+
+
+ Archive
+
+
+
+ Sliding Item with Options on Both Sides
+
+
+
+ Favorite
+ Delete
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/item-sliding/basic/vue.md b/static/usage/v7/item-sliding/basic/vue.md
new file mode 100644
index 00000000000..f6f8631a2bd
--- /dev/null
+++ b/static/usage/v7/item-sliding/basic/vue.md
@@ -0,0 +1,50 @@
+```html
+
+
+
+
+ Sliding Item with End Options
+
+
+
+ Favorite
+ Delete
+
+
+
+
+
+ Archive
+
+
+
+ Sliding Item with Start Options
+
+
+
+
+
+ Archive
+
+
+
+ Sliding Item with Options on Both Sides
+
+
+
+ Favorite
+ Delete
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/item-sliding/expandable/angular.md b/static/usage/v7/item-sliding/expandable/angular.md
new file mode 100644
index 00000000000..b7e37fa57c7
--- /dev/null
+++ b/static/usage/v7/item-sliding/expandable/angular.md
@@ -0,0 +1,18 @@
+```html
+
+
+
+ Archive
+
+
+
+ Sliding Item with Expandable Options
+
+
+
+ Favorite
+ Delete
+
+
+
+```
diff --git a/static/usage/v7/item-sliding/expandable/demo.html b/static/usage/v7/item-sliding/expandable/demo.html
new file mode 100644
index 00000000000..bfdb1ef5884
--- /dev/null
+++ b/static/usage/v7/item-sliding/expandable/demo.html
@@ -0,0 +1,45 @@
+
+
+
+
+
+
+ Item Sliding
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Archive
+
+
+
+ Sliding Item with Expandable Options
+
+
+
+ Favorite
+ Delete
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/item-sliding/expandable/index.md b/static/usage/v7/item-sliding/expandable/index.md
new file mode 100644
index 00000000000..f794264ce0f
--- /dev/null
+++ b/static/usage/v7/item-sliding/expandable/index.md
@@ -0,0 +1,13 @@
+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/item-sliding/expandable/javascript.md b/static/usage/v7/item-sliding/expandable/javascript.md
new file mode 100644
index 00000000000..b7e37fa57c7
--- /dev/null
+++ b/static/usage/v7/item-sliding/expandable/javascript.md
@@ -0,0 +1,18 @@
+```html
+
+
+
+ Archive
+
+
+
+ Sliding Item with Expandable Options
+
+
+
+ Favorite
+ Delete
+
+
+
+```
diff --git a/static/usage/v7/item-sliding/expandable/react.md b/static/usage/v7/item-sliding/expandable/react.md
new file mode 100644
index 00000000000..3cb039d08ba
--- /dev/null
+++ b/static/usage/v7/item-sliding/expandable/react.md
@@ -0,0 +1,26 @@
+```tsx
+import React from 'react';
+import { IonItem, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList } from '@ionic/react';
+
+function Example() {
+ return (
+
+
+
+ Archive
+
+
+
+ Sliding Item with Expandable Options
+
+
+
+ Favorite
+ Delete
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/item-sliding/expandable/vue.md b/static/usage/v7/item-sliding/expandable/vue.md
new file mode 100644
index 00000000000..fc9ee8c25ca
--- /dev/null
+++ b/static/usage/v7/item-sliding/expandable/vue.md
@@ -0,0 +1,29 @@
+```html
+
+
+
+
+ Archive
+
+
+
+ Sliding Item with Expandable Options
+
+
+
+ Favorite
+ Delete
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/item-sliding/icons/angular.md b/static/usage/v7/item-sliding/icons/angular.md
new file mode 100644
index 00000000000..2ea983f2056
--- /dev/null
+++ b/static/usage/v7/item-sliding/icons/angular.md
@@ -0,0 +1,128 @@
+```html
+
+
+
+
+
+
+
+
+
+ Sliding Item with Icons Only
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Archive
+
+
+
+
+
+ Sliding Item with Start Icons
+
+
+
+
+
+
+ Favorite
+
+
+
+ Delete
+
+
+
+
+
+
+
+
+ Archive
+
+
+
+
+
+ Sliding Item with End Icons
+
+
+
+
+
+
+ Favorite
+
+
+
+ Delete
+
+
+
+
+
+
+
+
+ Archive
+
+
+
+
+
+ Sliding Item with Top Icons
+
+
+
+
+
+
+ Favorite
+
+
+
+ Delete
+
+
+
+
+
+
+
+
+ Archive
+
+
+
+
+
+ Sliding Item with Bottom Icons
+
+
+
+
+
+
+ Favorite
+
+
+
+ Delete
+
+
+
+
+```
diff --git a/static/usage/v7/item-sliding/icons/demo.html b/static/usage/v7/item-sliding/icons/demo.html
new file mode 100644
index 00000000000..6bc01e42837
--- /dev/null
+++ b/static/usage/v7/item-sliding/icons/demo.html
@@ -0,0 +1,156 @@
+
+
+
+
+
+
+ Item Sliding
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Sliding Item with Icons Only
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Archive
+
+
+
+
+
+ Sliding Item with Start Icons
+
+
+
+
+
+
+ Favorite
+
+
+
+ Delete
+
+
+
+
+
+
+
+
+ Archive
+
+
+
+
+
+ Sliding Item with End Icons
+
+
+
+
+
+
+ Favorite
+
+
+
+ Delete
+
+
+
+
+
+
+
+
+ Archive
+
+
+
+
+
+ Sliding Item with Top Icons
+
+
+
+
+
+
+ Favorite
+
+
+
+ Delete
+
+
+
+
+
+
+
+
+ Archive
+
+
+
+
+
+ Sliding Item with Bottom Icons
+
+
+
+
+
+
+ Favorite
+
+
+
+ Delete
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/item-sliding/icons/index.md b/static/usage/v7/item-sliding/icons/index.md
new file mode 100644
index 00000000000..9b6b42564b7
--- /dev/null
+++ b/static/usage/v7/item-sliding/icons/index.md
@@ -0,0 +1,13 @@
+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/item-sliding/icons/javascript.md b/static/usage/v7/item-sliding/icons/javascript.md
new file mode 100644
index 00000000000..2ea983f2056
--- /dev/null
+++ b/static/usage/v7/item-sliding/icons/javascript.md
@@ -0,0 +1,128 @@
+```html
+
+
+
+
+
+
+
+
+
+ Sliding Item with Icons Only
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Archive
+
+
+
+
+
+ Sliding Item with Start Icons
+
+
+
+
+
+
+ Favorite
+
+
+
+ Delete
+
+
+
+
+
+
+
+
+ Archive
+
+
+
+
+
+ Sliding Item with End Icons
+
+
+
+
+
+
+ Favorite
+
+
+
+ Delete
+
+
+
+
+
+
+
+
+ Archive
+
+
+
+
+
+ Sliding Item with Top Icons
+
+
+
+
+
+
+ Favorite
+
+
+
+ Delete
+
+
+
+
+
+
+
+
+ Archive
+
+
+
+
+
+ Sliding Item with Bottom Icons
+
+
+
+
+
+
+ Favorite
+
+
+
+ Delete
+
+
+
+
+```
diff --git a/static/usage/v7/item-sliding/icons/react.md b/static/usage/v7/item-sliding/icons/react.md
new file mode 100644
index 00000000000..be291c017e4
--- /dev/null
+++ b/static/usage/v7/item-sliding/icons/react.md
@@ -0,0 +1,137 @@
+```tsx
+import React from 'react';
+import { IonIcon, IonItem, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList } from '@ionic/react';
+import { archive, heart, trash } from 'ionicons/icons';
+
+function Example() {
+ return (
+
+
+
+
+
+
+
+
+
+ Sliding Item with Icons Only
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Archive
+
+
+
+
+
+ Sliding Item with Start Icons
+
+
+
+
+
+
+ Favorite
+
+
+
+ Delete
+
+
+
+
+
+
+
+
+ Archive
+
+
+
+
+
+ Sliding Item with End Icons
+
+
+
+
+
+
+ Favorite
+
+
+
+ Delete
+
+
+
+
+
+
+
+
+ Archive
+
+
+
+
+
+ Sliding Item with Top Icons
+
+
+
+
+
+
+ Favorite
+
+
+
+ Delete
+
+
+
+
+
+
+
+
+ Archive
+
+
+
+
+
+ Sliding Item with Bottom Icons
+
+
+
+
+
+
+ Favorite
+
+
+
+ Delete
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/item-sliding/icons/vue.md b/static/usage/v7/item-sliding/icons/vue.md
new file mode 100644
index 00000000000..6b456c9882e
--- /dev/null
+++ b/static/usage/v7/item-sliding/icons/vue.md
@@ -0,0 +1,143 @@
+```html
+
+
+
+
+
+
+
+
+
+
+ Sliding Item with Icons Only
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Archive
+
+
+
+
+
+ Sliding Item with Start Icons
+
+
+
+
+
+
+ Favorite
+
+
+
+ Delete
+
+
+
+
+
+
+
+
+ Archive
+
+
+
+
+
+ Sliding Item with End Icons
+
+
+
+
+
+
+ Favorite
+
+
+
+ Delete
+
+
+
+
+
+
+
+
+ Archive
+
+
+
+
+
+ Sliding Item with Top Icons
+
+
+
+
+
+
+ Favorite
+
+
+
+ Delete
+
+
+
+
+
+
+
+
+ Archive
+
+
+
+
+
+ Sliding Item with Bottom Icons
+
+
+
+
+
+
+ Favorite
+
+
+
+ Delete
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/item/basic/angular.md b/static/usage/v7/item/basic/angular.md
new file mode 100644
index 00000000000..f0b13250493
--- /dev/null
+++ b/static/usage/v7/item/basic/angular.md
@@ -0,0 +1,42 @@
+```html
+
+ Basic Item
+
+
+
+
+ Multi-line text that should ellipsis when it is too long
+ to fit on one line. Lorem ipsum dolor sit amet,
+ consectetur adipiscing elit.
+
+
+
+
+
+ Multi-line text that should wrap when it is too long
+ to fit on one line. Lorem ipsum dolor sit amet,
+ consectetur adipiscing elit.
+
+
+
+
+
+ H1 Heading
+ Paragraph
+
+
+
+
+
+ H2 Heading
+ Paragraph
+
+
+
+
+
+ H3 Heading
+ Paragraph
+
+
+```
diff --git a/static/usage/v7/item/basic/demo.html b/static/usage/v7/item/basic/demo.html
new file mode 100644
index 00000000000..55e5fe17a30
--- /dev/null
+++ b/static/usage/v7/item/basic/demo.html
@@ -0,0 +1,69 @@
+
+
+
+
+
+
+ Item
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Basic Item
+
+
+
+
+ Multi-line text that should ellipsis when it is too long
+ to fit on one line. Lorem ipsum dolor sit amet,
+ consectetur adipiscing elit.
+
+
+
+
+
+ Multi-line text that should wrap when it is too long
+ to fit on one line. Lorem ipsum dolor sit amet,
+ consectetur adipiscing elit.
+
+
+
+
+
+ H1 Heading
+ Paragraph
+
+
+
+
+
+ H2 Heading
+ Paragraph
+
+
+
+
+
+ H3 Heading
+ Paragraph
+
+
+
H1 Heading
+ Paragraph
+
+
+
+
+
+ H2 Heading
+ Paragraph
+
+
+
+
+
+ H3 Heading
+ Paragraph
+
+
+```
diff --git a/static/usage/v7/item/basic/react.md b/static/usage/v7/item/basic/react.md
new file mode 100644
index 00000000000..dfed86af19e
--- /dev/null
+++ b/static/usage/v7/item/basic/react.md
@@ -0,0 +1,52 @@
+```tsx
+import React from 'react';
+import { IonItem, IonLabel } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+ Basic Item
+
+
+
+
+ Multi-line text that should ellipsis when it is too long
+ to fit on one line. Lorem ipsum dolor sit amet,
+ consectetur adipiscing elit.
+
+
+
+
+
+ Multi-line text that should wrap when it is too long
+ to fit on one line. Lorem ipsum dolor sit amet,
+ consectetur adipiscing elit.
+
+
+
+
+
+ H1 Heading
+ Paragraph
+
+
+
+
+
+ H2 Heading
+ Paragraph
+
+
+
+
+
+ H3 Heading
+ Paragraph
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/item/basic/vue.md b/static/usage/v7/item/basic/vue.md
new file mode 100644
index 00000000000..479e90196a4
--- /dev/null
+++ b/static/usage/v7/item/basic/vue.md
@@ -0,0 +1,53 @@
+```html
+
+
+ Basic Item
+
+
+
+
+ Multi-line text that should ellipsis when it is too long
+ to fit on one line. Lorem ipsum dolor sit amet,
+ consectetur adipiscing elit.
+
+
+
+
+
+ Multi-line text that should wrap when it is too long
+ to fit on one line. Lorem ipsum dolor sit amet,
+ consectetur adipiscing elit.
+
+
+
+
+
+ H1 Heading
+ Paragraph
+
+
+
+
+
+ H2 Heading
+ Paragraph
+
+
+
+
+
+ H3 Heading
+ Paragraph
+
+
+
+
+
+```
diff --git a/static/usage/v7/item/buttons/angular.md b/static/usage/v7/item/buttons/angular.md
new file mode 100644
index 00000000000..bf7069f48f7
--- /dev/null
+++ b/static/usage/v7/item/buttons/angular.md
@@ -0,0 +1,46 @@
+```html
+
+
+ Start
+
+ Default Buttons
+
+ End
+
+
+
+
+
+ Start
+
+
+ Buttons with Icons
+
+
+ End
+
+
+
+
+
+
+
+ Icon only Buttons
+
+
+
+
+
+
+ Button Sizes
+
+ Small
+
+
+ Default
+
+
+ Large
+
+
+```
diff --git a/static/usage/v7/item/buttons/demo.html b/static/usage/v7/item/buttons/demo.html
new file mode 100644
index 00000000000..08847fb4fff
--- /dev/null
+++ b/static/usage/v7/item/buttons/demo.html
@@ -0,0 +1,74 @@
+
+
+
+
+
+
+ Item
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Start
+
+ Default Buttons
+
+ End
+
+
+
+
+
+ Start
+
+
+ Buttons with Icons
+
+
+ End
+
+
+
+
+
+
+
+ Icon only Buttons
+
+
+
+
+
+
+ Button Sizes
+
+ Small
+
+
+ Default
+
+
+ Large
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/item/buttons/index.md b/static/usage/v7/item/buttons/index.md
new file mode 100644
index 00000000000..dc0db44f71d
--- /dev/null
+++ b/static/usage/v7/item/buttons/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/item/buttons/javascript.md b/static/usage/v7/item/buttons/javascript.md
new file mode 100644
index 00000000000..bf7069f48f7
--- /dev/null
+++ b/static/usage/v7/item/buttons/javascript.md
@@ -0,0 +1,46 @@
+```html
+
+
+ Start
+
+ Default Buttons
+
+ End
+
+
+
+
+
+ Start
+
+
+ Buttons with Icons
+
+
+ End
+
+
+
+
+
+
+
+ Icon only Buttons
+
+
+
+
+
+
+ Button Sizes
+
+ Small
+
+
+ Default
+
+
+ Large
+
+
+```
diff --git a/static/usage/v7/item/buttons/react.md b/static/usage/v7/item/buttons/react.md
new file mode 100644
index 00000000000..8776e5215fb
--- /dev/null
+++ b/static/usage/v7/item/buttons/react.md
@@ -0,0 +1,57 @@
+```tsx
+import React from 'react';
+import { IonButton, IonIcon, IonItem, IonLabel } from '@ionic/react';
+import { home, navigate, star } from 'ionicons/icons';
+
+function Example() {
+ return (
+ <>
+
+
+ Start
+
+ Default Buttons
+
+ End
+
+
+
+
+
+ Start
+
+
+ Buttons with Icons
+
+
+ End
+
+
+
+
+
+
+
+ Icon only Buttons
+
+
+
+
+
+
+ Button Sizes
+
+ Small
+
+
+ Default
+
+
+ Large
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/item/buttons/vue.md b/static/usage/v7/item/buttons/vue.md
new file mode 100644
index 00000000000..02de38e58ab
--- /dev/null
+++ b/static/usage/v7/item/buttons/vue.md
@@ -0,0 +1,61 @@
+```html
+
+
+
+ Start
+
+ Default Buttons
+
+ End
+
+
+
+
+
+ Start
+
+
+ Buttons with Icons
+
+
+ End
+
+
+
+
+
+
+
+ Icon only Buttons
+
+
+
+
+
+
+ Button Sizes
+
+ Small
+
+
+ Default
+
+
+ Large
+
+
+
+
+
+```
diff --git a/static/usage/v7/item/clickable/angular.md b/static/usage/v7/item/clickable/angular.md
new file mode 100644
index 00000000000..7e8ac266eb2
--- /dev/null
+++ b/static/usage/v7/item/clickable/angular.md
@@ -0,0 +1,17 @@
+```html
+
+ Anchor Item
+
+
+
+ Disabled Anchor Item
+
+
+
+ Button Item
+
+
+
+ Disabled Button Item
+
+```
diff --git a/static/usage/v7/item/clickable/demo.html b/static/usage/v7/item/clickable/demo.html
new file mode 100644
index 00000000000..189cbffbd35
--- /dev/null
+++ b/static/usage/v7/item/clickable/demo.html
@@ -0,0 +1,44 @@
+
+
+
+
+
+
+ Item
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Anchor Item
+
+
+
+ Disabled Anchor Item
+
+
+
+ Button Item
+
+
+
+ Disabled Button Item
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/item/clickable/index.md b/static/usage/v7/item/clickable/index.md
new file mode 100644
index 00000000000..11fe249d0c5
--- /dev/null
+++ b/static/usage/v7/item/clickable/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/item/clickable/javascript.md b/static/usage/v7/item/clickable/javascript.md
new file mode 100644
index 00000000000..7e8ac266eb2
--- /dev/null
+++ b/static/usage/v7/item/clickable/javascript.md
@@ -0,0 +1,17 @@
+```html
+
+ Anchor Item
+
+
+
+ Disabled Anchor Item
+
+
+
+ Button Item
+
+
+
+ Disabled Button Item
+
+```
diff --git a/static/usage/v7/item/clickable/react.md b/static/usage/v7/item/clickable/react.md
new file mode 100644
index 00000000000..c83845b65c7
--- /dev/null
+++ b/static/usage/v7/item/clickable/react.md
@@ -0,0 +1,27 @@
+```tsx
+import React from 'react';
+import { IonItem, IonLabel } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+ Anchor Item
+
+
+
+ Disabled Anchor Item
+
+
+
+ Button Item
+
+
+
+ Disabled Button Item
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/item/clickable/vue.md b/static/usage/v7/item/clickable/vue.md
new file mode 100644
index 00000000000..1af8f362758
--- /dev/null
+++ b/static/usage/v7/item/clickable/vue.md
@@ -0,0 +1,28 @@
+```html
+
+
+ Anchor Item
+
+
+
+ Disabled Anchor Item
+
+
+
+ Button Item
+
+
+
+ Disabled Button Item
+
+
+
+
+```
diff --git a/static/usage/v7/item/detail-arrows/angular.md b/static/usage/v7/item/detail-arrows/angular.md
new file mode 100644
index 00000000000..aa14eb9ec2d
--- /dev/null
+++ b/static/usage/v7/item/detail-arrows/angular.md
@@ -0,0 +1,37 @@
+```html
+
+
+ Text Item
+ Detail set to true - detail arrow displays on both modes
+
+
+
+
+
+ Button Item
+ Default detail - detail arrow displays on iOS only
+
+
+
+
+
+ Button Item
+ Detail set to true - detail arrow displays on both modes
+
+
+
+
+
+ Button Item
+ Detail set to false - detail arrow hidden on both modes
+
+
+
+
+
+ Button Item
+ Detail set to true - detail arrow displays on both modes
+ Detail icon set to caret-forward-outline
+
+
+```
diff --git a/static/usage/v7/item/detail-arrows/demo.html b/static/usage/v7/item/detail-arrows/demo.html
new file mode 100644
index 00000000000..1cc1c907045
--- /dev/null
+++ b/static/usage/v7/item/detail-arrows/demo.html
@@ -0,0 +1,64 @@
+
+
+
+
+
+
+ Item
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Text Item
+ Detail set to true - detail arrow displays on both modes
+
+
+
+
+
+ Button Item
+ Default detail - detail arrow displays on iOS only
+
+
+
+
+
+ Button Item
+ Detail set to true - detail arrow displays on both modes
+
+
+
+
+
+ Button Item
+ Detail set to false - detail arrow hidden on both modes
+
+
+
+
+
+ Button Item
+ Detail set to true - detail arrow displays on both modes
+ Detail icon set to caret-forward-outline
+
+
+
Text Item
+ Detail set to true - detail arrow displays on both modes
+
+
+
+
+
+ Button Item
+ Default detail - detail arrow displays on iOS only
+
+
+
+
+
+ Button Item
+ Detail set to true - detail arrow displays on both modes
+
+
+
+
+
+ Button Item
+ Detail set to false - detail arrow hidden on both modes
+
+
+
+
+
+ Button Item
+ Detail set to true - detail arrow displays on both modes
+ Detail icon set to caret-forward-outline
+
+
+```
diff --git a/static/usage/v7/item/detail-arrows/react.md b/static/usage/v7/item/detail-arrows/react.md
new file mode 100644
index 00000000000..de16b10fde6
--- /dev/null
+++ b/static/usage/v7/item/detail-arrows/react.md
@@ -0,0 +1,48 @@
+```tsx
+import React from 'react';
+import { IonItem, IonLabel } from '@ionic/react';
+import { caretForwardOutline } from 'ionicons/icons';
+
+function Example() {
+ return (
+ <>
+
+
+ Text Item
+ Detail set to true - detail arrow displays on both modes
+
+
+
+
+
+ Button Item
+ Default detail - detail arrow displays on iOS only
+
+
+
+
+
+ Button Item
+ Detail set to true - detail arrow displays on both modes
+
+
+
+
+
+ Button Item
+ Detail set to false - detail arrow hidden on both modes
+
+
+
+
+
+ Button Item
+ Detail set to true - detail arrow displays on both modes
+ Detail icon set to caret-forward-outline
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/item/detail-arrows/vue.md b/static/usage/v7/item/detail-arrows/vue.md
new file mode 100644
index 00000000000..d341c004f15
--- /dev/null
+++ b/static/usage/v7/item/detail-arrows/vue.md
@@ -0,0 +1,53 @@
+```html
+
+
+
+ Text Item
+ Detail set to true - detail arrow displays on both modes
+
+
+
+
+
+ Button Item
+ Default detail - detail arrow displays on iOS only
+
+
+
+
+
+ Button Item
+ Detail set to true - detail arrow displays on both modes
+
+
+
+
+
+ Button Item
+ Detail set to false - detail arrow hidden on both modes
+
+
+
+
+
+ Button Item
+ Detail set to true - detail arrow displays on both modes
+ Detail icon set to caret-forward-outline
+
+
+
+
+
diff --git a/static/usage/v7/item/icons/angular.md b/static/usage/v7/item/icons/angular.md
new file mode 100644
index 00000000000..49a1cc707e3
--- /dev/null
+++ b/static/usage/v7/item/icons/angular.md
@@ -0,0 +1,29 @@
+```html
+
+
+ Default Icon
+
+
+
+
+
+
+ Large Icon
+
+
+
+
+
+
+ Small Icon
+
+
+
+
+
+
+
+ Default Icon
+
+
+```
diff --git a/static/usage/v7/item/icons/demo.html b/static/usage/v7/item/icons/demo.html
new file mode 100644
index 00000000000..6cbd9d1b2a9
--- /dev/null
+++ b/static/usage/v7/item/icons/demo.html
@@ -0,0 +1,56 @@
+
+
+
+
+
+
+ Item
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Default Icon
+
+
+
+
+
+
+ Large Icon
+
+
+
+
+
+
+ Small Icon
+
+
+
+
+
+
+
+ Default Icon
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/item/icons/index.md b/static/usage/v7/item/icons/index.md
new file mode 100644
index 00000000000..69563c44023
--- /dev/null
+++ b/static/usage/v7/item/icons/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/item/icons/javascript.md b/static/usage/v7/item/icons/javascript.md
new file mode 100644
index 00000000000..49a1cc707e3
--- /dev/null
+++ b/static/usage/v7/item/icons/javascript.md
@@ -0,0 +1,29 @@
+```html
+
+
+ Default Icon
+
+
+
+
+
+
+ Large Icon
+
+
+
+
+
+
+ Small Icon
+
+
+
+
+
+
+
+ Default Icon
+
+
+```
diff --git a/static/usage/v7/item/icons/react.md b/static/usage/v7/item/icons/react.md
new file mode 100644
index 00000000000..a5fc0ae6629
--- /dev/null
+++ b/static/usage/v7/item/icons/react.md
@@ -0,0 +1,40 @@
+```tsx
+import React from 'react';
+import { IonIcon, IonItem, IonLabel } from '@ionic/react';
+import { informationCircle, star } from 'ionicons/icons';
+
+function Example() {
+ return (
+ <>
+
+
+ Default Icon
+
+
+
+
+
+
+ Large Icon
+
+
+
+
+
+
+ Small Icon
+
+
+
+
+
+
+
+ Default Icon
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/item/icons/vue.md b/static/usage/v7/item/icons/vue.md
new file mode 100644
index 00000000000..82e09004fbe
--- /dev/null
+++ b/static/usage/v7/item/icons/vue.md
@@ -0,0 +1,44 @@
+```html
+
+
+
+ Default Icon
+
+
+
+
+
+
+ Large Icon
+
+
+
+
+
+
+ Small Icon
+
+
+
+
+
+
+
+ Default Icon
+
+
+
+
+
+```
diff --git a/static/usage/v7/item/inputs/angular.md b/static/usage/v7/item/inputs/angular.md
new file mode 100644
index 00000000000..013e672ae99
--- /dev/null
+++ b/static/usage/v7/item/inputs/angular.md
@@ -0,0 +1,59 @@
+```html
+
+ Default Input
+
+
+
+
+ Fixed Input
+
+
+
+
+ Stacked Input
+
+
+
+
+ Floating Input
+
+
+
+
+ Floating Input: Outline (MD only)
+
+
+
+
+ Floating Input: Solid (MD only)
+
+
+
+
+ Select
+
+ No Game Console
+ NES
+ Nintendo64
+ PlayStation
+ Sega Genesis
+ Sega Saturn
+ SNES
+
+
+
+
+ Toggle
+
+
+
+
+ Checkbox
+
+
+
+
+ Range
+
+
+```
diff --git a/static/usage/v7/item/inputs/demo.html b/static/usage/v7/item/inputs/demo.html
new file mode 100644
index 00000000000..4ab92196b2e
--- /dev/null
+++ b/static/usage/v7/item/inputs/demo.html
@@ -0,0 +1,86 @@
+
+
+
+
+
+
+ Item
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Default Input
+
+
+
+
+ Fixed Input
+
+
+
+
+ Stacked Input
+
+
+
+
+ Floating Input
+
+
+
+
+ Floating Input: Outline (MD only)
+
+
+
+
+ Floating Input: Solid (MD only)
+
+
+
+
+ Select
+
+ No Game Console
+ NES
+ Nintendo64
+ PlayStation
+ Sega Genesis
+ Sega Saturn
+ SNES
+
+
+
+
+ Toggle
+
+
+
+
+ Checkbox
+
+
+
+
+ Range
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/item/inputs/index.md b/static/usage/v7/item/inputs/index.md
new file mode 100644
index 00000000000..1925824c43f
--- /dev/null
+++ b/static/usage/v7/item/inputs/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/item/inputs/javascript.md b/static/usage/v7/item/inputs/javascript.md
new file mode 100644
index 00000000000..013e672ae99
--- /dev/null
+++ b/static/usage/v7/item/inputs/javascript.md
@@ -0,0 +1,59 @@
+```html
+
+ Default Input
+
+
+
+
+ Fixed Input
+
+
+
+
+ Stacked Input
+
+
+
+
+ Floating Input
+
+
+
+
+ Floating Input: Outline (MD only)
+
+
+
+
+ Floating Input: Solid (MD only)
+
+
+
+
+ Select
+
+ No Game Console
+ NES
+ Nintendo64
+ PlayStation
+ Sega Genesis
+ Sega Saturn
+ SNES
+
+
+
+
+ Toggle
+
+
+
+
+ Checkbox
+
+
+
+
+ Range
+
+
+```
diff --git a/static/usage/v7/item/inputs/react.md b/static/usage/v7/item/inputs/react.md
new file mode 100644
index 00000000000..0cb6523f053
--- /dev/null
+++ b/static/usage/v7/item/inputs/react.md
@@ -0,0 +1,69 @@
+```tsx
+import React from 'react';
+import { IonCheckbox, IonInput, IonItem, IonLabel, IonRange, IonSelect, IonSelectOption, IonToggle } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+ Default Input
+
+
+
+
+ Fixed Input
+
+
+
+
+ Stacked Input
+
+
+
+
+ Floating Input
+
+
+
+
+ Floating Input: Outline (MD only)
+
+
+
+
+ Floating Input: Solid (MD only)
+
+
+
+
+ Select
+
+ No Game Console
+ NES
+ Nintendo64
+ PlayStation
+ Sega Genesis
+ Sega Saturn
+ SNES
+
+
+
+
+ Toggle
+
+
+
+
+ Checkbox
+
+
+
+
+ Range
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/item/inputs/vue.md b/static/usage/v7/item/inputs/vue.md
new file mode 100644
index 00000000000..7dc085a7a4d
--- /dev/null
+++ b/static/usage/v7/item/inputs/vue.md
@@ -0,0 +1,70 @@
+```html
+
+
+ Default Input
+
+
+
+
+ Fixed Input
+
+
+
+
+ Stacked Input
+
+
+
+
+ Floating Input
+
+
+
+
+ Floating Input: Outline (MD only)
+
+
+
+
+ Floating Input: Solid (MD only)
+
+
+
+
+ Select
+
+ No Game Console
+ NES
+ Nintendo64
+ PlayStation
+ Sega Genesis
+ Sega Saturn
+ SNES
+
+
+
+
+ Toggle
+
+
+
+
+ Checkbox
+
+
+
+
+ Range
+
+
+
+
+
+```
diff --git a/static/usage/v7/item/lines/angular.md b/static/usage/v7/item/lines/angular.md
new file mode 100644
index 00000000000..b0700ae1a1b
--- /dev/null
+++ b/static/usage/v7/item/lines/angular.md
@@ -0,0 +1,43 @@
+```html
+
+
+ Default Item Lines
+
+
+
+
+ Item Lines Inset
+
+
+
+ Item Lines Full
+
+
+
+ Item Lines None
+
+
+
+
+ Default Item Lines
+
+
+
+
+
+ Item Lines Inset
+
+
+
+
+
+ Item Lines Full
+
+
+
+
+
+ Item Lines None
+
+
+```
diff --git a/static/usage/v7/item/lines/demo.html b/static/usage/v7/item/lines/demo.html
new file mode 100644
index 00000000000..79cb3ce7933
--- /dev/null
+++ b/static/usage/v7/item/lines/demo.html
@@ -0,0 +1,70 @@
+
+
+
+
+
+
+ Item
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Default Item Lines
+
+
+
+
+ Item Lines Inset
+
+
+
+ Item Lines Full
+
+
+
+ Item Lines None
+
+
+
+
+ Default Item Lines
+
+
+
+
+
+ Item Lines Inset
+
+
+
+
+
+ Item Lines Full
+
+
+
+
+
+ Item Lines None
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/item/lines/index.md b/static/usage/v7/item/lines/index.md
new file mode 100644
index 00000000000..717465e6906
--- /dev/null
+++ b/static/usage/v7/item/lines/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/item/lines/javascript.md b/static/usage/v7/item/lines/javascript.md
new file mode 100644
index 00000000000..b0700ae1a1b
--- /dev/null
+++ b/static/usage/v7/item/lines/javascript.md
@@ -0,0 +1,43 @@
+```html
+
+
+ Default Item Lines
+
+
+
+
+ Item Lines Inset
+
+
+
+ Item Lines Full
+
+
+
+ Item Lines None
+
+
+
+
+ Default Item Lines
+
+
+
+
+
+ Item Lines Inset
+
+
+
+
+
+ Item Lines Full
+
+
+
+
+
+ Item Lines None
+
+
+```
diff --git a/static/usage/v7/item/lines/react.md b/static/usage/v7/item/lines/react.md
new file mode 100644
index 00000000000..c5e2cf3f55c
--- /dev/null
+++ b/static/usage/v7/item/lines/react.md
@@ -0,0 +1,54 @@
+```tsx
+import React from 'react';
+import { IonIcon, IonItem, IonLabel } from '@ionic/react';
+import { informationCircle, star } from 'ionicons/icons';
+
+function Example() {
+ return (
+ <>
+
+
+ Default Item Lines
+
+
+
+
+ Item Lines Inset
+
+
+
+ Item Lines Full
+
+
+
+ Item Lines None
+
+
+
+
+ Default Item Lines
+
+
+
+
+
+ Item Lines Inset
+
+
+
+
+
+ Item Lines Full
+
+
+
+
+
+ Item Lines None
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/item/lines/vue.md b/static/usage/v7/item/lines/vue.md
new file mode 100644
index 00000000000..37c6c432ca4
--- /dev/null
+++ b/static/usage/v7/item/lines/vue.md
@@ -0,0 +1,58 @@
+```html
+
+
+
+ Default Item Lines
+
+
+
+
+ Item Lines Inset
+
+
+
+ Item Lines Full
+
+
+
+ Item Lines None
+
+
+
+
+ Default Item Lines
+
+
+
+
+
+ Item Lines Inset
+
+
+
+
+
+ Item Lines Full
+
+
+
+
+
+ Item Lines None
+
+
+
+
+
+```
diff --git a/static/usage/v7/item/media/angular.md b/static/usage/v7/item/media/angular.md
new file mode 100644
index 00000000000..915969f127e
--- /dev/null
+++ b/static/usage/v7/item/media/angular.md
@@ -0,0 +1,19 @@
+```html
+
+
+
+
+
+ Avatar Item
+
+
+
+
+
+
+
+
+ Thumbnail Item
+
+
+```
diff --git a/static/usage/v7/item/media/demo.html b/static/usage/v7/item/media/demo.html
new file mode 100644
index 00000000000..451c5d6eaf1
--- /dev/null
+++ b/static/usage/v7/item/media/demo.html
@@ -0,0 +1,46 @@
+
+
+
+
+
+
+ Item
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Avatar Item
+
+
+
+
+
+
+
+
+ Thumbnail Item
+
+
+
+
+ Default Item
+
+
+ Primary Item
+
+
+ Secondary Item
+
+
+ Tertiary Item
+
+
+ Success Item
+
+
+ Warning Item
+
+
+ Danger Item
+
+
+ Light Item
+
+
+ Medium Item
+
+
+ Dark Item
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/item/theming/colors/index.md b/static/usage/v7/item/theming/colors/index.md
new file mode 100644
index 00000000000..9973f9daa33
--- /dev/null
+++ b/static/usage/v7/item/theming/colors/index.md
@@ -0,0 +1,13 @@
+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/item/theming/colors/javascript.md b/static/usage/v7/item/theming/colors/javascript.md
new file mode 100644
index 00000000000..f1b6dd45e0c
--- /dev/null
+++ b/static/usage/v7/item/theming/colors/javascript.md
@@ -0,0 +1,32 @@
+```html
+
+ Default Item
+
+
+ Primary Item
+
+
+ Secondary Item
+
+
+ Tertiary Item
+
+
+ Success Item
+
+
+ Warning Item
+
+
+ Danger Item
+
+
+ Light Item
+
+
+ Medium Item
+
+
+ Dark Item
+
+```
diff --git a/static/usage/v7/item/theming/colors/react.md b/static/usage/v7/item/theming/colors/react.md
new file mode 100644
index 00000000000..2efad83cba3
--- /dev/null
+++ b/static/usage/v7/item/theming/colors/react.md
@@ -0,0 +1,42 @@
+```tsx
+import React from 'react';
+import { IonItem, IonLabel } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+ Default Item
+
+
+ Primary Item
+
+
+ Secondary Item
+
+
+ Tertiary Item
+
+
+ Success Item
+
+
+ Warning Item
+
+
+ Danger Item
+
+
+ Light Item
+
+
+ Medium Item
+
+
+ Dark Item
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/item/theming/colors/vue.md b/static/usage/v7/item/theming/colors/vue.md
new file mode 100644
index 00000000000..b98f625e479
--- /dev/null
+++ b/static/usage/v7/item/theming/colors/vue.md
@@ -0,0 +1,43 @@
+```html
+
+
+ Default Item
+
+
+ Primary Item
+
+
+ Secondary Item
+
+
+ Tertiary Item
+
+
+ Success Item
+
+
+ Warning Item
+
+
+ Danger Item
+
+
+ Light Item
+
+
+ Medium Item
+
+
+ Dark Item
+
+
+
+
+```
diff --git a/static/usage/v7/item/theming/css-properties/angular/example_component_css.md b/static/usage/v7/item/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..8a8b6be7f5b
--- /dev/null
+++ b/static/usage/v7/item/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,18 @@
+```css
+ion-item {
+ --background: #19422d;
+ --color: #fff;
+
+ --border-color: #fff;
+ --border-style: dashed;
+ --border-width: 2px;
+
+ --border-radius: 20px;
+
+ --ripple-color: purple;
+
+ --detail-icon-color: white;
+ --detail-icon-opacity: 1;
+ --detail-icon-font-size: 20px;
+}
+```
diff --git a/static/usage/v7/item/theming/css-properties/angular/example_component_html.md b/static/usage/v7/item/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..4bc8310465a
--- /dev/null
+++ b/static/usage/v7/item/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,13 @@
+```html
+
+ Custom Item
+
+
+
+ Custom Item
+
+
+
+ Custom Item
+
+```
diff --git a/static/usage/v7/item/theming/css-properties/demo.html b/static/usage/v7/item/theming/css-properties/demo.html
new file mode 100644
index 00000000000..c255a677199
--- /dev/null
+++ b/static/usage/v7/item/theming/css-properties/demo.html
@@ -0,0 +1,57 @@
+
+
+
+
+
+
+ Item
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Custom Item
+
+
+
+ Custom Item
+
+
+
+ Custom Item
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/item/theming/css-properties/index.md b/static/usage/v7/item/theming/css-properties/index.md
new file mode 100644
index 00000000000..f3d49f6332b
--- /dev/null
+++ b/static/usage/v7/item/theming/css-properties/index.md
@@ -0,0 +1,32 @@
+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/css-properties/javascript.md b/static/usage/v7/item/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..d1ad4121c2d
--- /dev/null
+++ b/static/usage/v7/item/theming/css-properties/javascript.md
@@ -0,0 +1,32 @@
+```html
+
+ Custom Item
+
+
+
+ Custom Item
+
+
+
+ Custom Item
+
+
+
+```
diff --git a/static/usage/v7/item/theming/css-properties/react/main_css.md b/static/usage/v7/item/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..8a8b6be7f5b
--- /dev/null
+++ b/static/usage/v7/item/theming/css-properties/react/main_css.md
@@ -0,0 +1,18 @@
+```css
+ion-item {
+ --background: #19422d;
+ --color: #fff;
+
+ --border-color: #fff;
+ --border-style: dashed;
+ --border-width: 2px;
+
+ --border-radius: 20px;
+
+ --ripple-color: purple;
+
+ --detail-icon-color: white;
+ --detail-icon-opacity: 1;
+ --detail-icon-font-size: 20px;
+}
+```
diff --git a/static/usage/v7/item/theming/css-properties/react/main_tsx.md b/static/usage/v7/item/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..0d8329f134a
--- /dev/null
+++ b/static/usage/v7/item/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,25 @@
+```tsx
+import React from 'react';
+import { IonItem, IonLabel } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+
+ Custom Item
+
+
+
+ Custom Item
+
+
+
+ Custom Item
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/item/theming/css-properties/vue.md b/static/usage/v7/item/theming/css-properties/vue.md
new file mode 100644
index 00000000000..305102b811b
--- /dev/null
+++ b/static/usage/v7/item/theming/css-properties/vue.md
@@ -0,0 +1,43 @@
+```html
+
+
+ Custom Item
+
+
+
+ Custom Item
+
+
+
+ Custom Item
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/item/theming/css-shadow-parts/angular/example_component_css.md b/static/usage/v7/item/theming/css-shadow-parts/angular/example_component_css.md
new file mode 100644
index 00000000000..0c5e9969494
--- /dev/null
+++ b/static/usage/v7/item/theming/css-shadow-parts/angular/example_component_css.md
@@ -0,0 +1,18 @@
+```css
+ion-item::part(native) {
+ background: #19422d;
+ color: #fff;
+
+ border-color: #fff;
+ border-style: dashed;
+ border-width: 2px;
+
+ border-radius: 20px;
+}
+
+ion-item::part(detail-icon) {
+ color: white;
+ opacity: 1;
+ font-size: 20px;
+}
+```
diff --git a/static/usage/v7/item/theming/css-shadow-parts/angular/example_component_html.md b/static/usage/v7/item/theming/css-shadow-parts/angular/example_component_html.md
new file mode 100644
index 00000000000..4bc8310465a
--- /dev/null
+++ b/static/usage/v7/item/theming/css-shadow-parts/angular/example_component_html.md
@@ -0,0 +1,13 @@
+```html
+
+ Custom Item
+
+
+
+ Custom Item
+
+
+
+ Custom Item
+
+```
diff --git a/static/usage/v7/item/theming/css-shadow-parts/demo.html b/static/usage/v7/item/theming/css-shadow-parts/demo.html
new file mode 100644
index 00000000000..132c0900cb8
--- /dev/null
+++ b/static/usage/v7/item/theming/css-shadow-parts/demo.html
@@ -0,0 +1,57 @@
+
+
+
+
+
+
+ Item
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Custom Item
+
+
+
+ Custom Item
+
+
+
+ Custom Item
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/item/theming/css-shadow-parts/index.md b/static/usage/v7/item/theming/css-shadow-parts/index.md
new file mode 100644
index 00000000000..10f1bfc6ba6
--- /dev/null
+++ b/static/usage/v7/item/theming/css-shadow-parts/index.md
@@ -0,0 +1,32 @@
+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/css-shadow-parts/javascript.md b/static/usage/v7/item/theming/css-shadow-parts/javascript.md
new file mode 100644
index 00000000000..1991ad6c139
--- /dev/null
+++ b/static/usage/v7/item/theming/css-shadow-parts/javascript.md
@@ -0,0 +1,32 @@
+```html
+
+ Custom Item
+
+
+
+ Custom Item
+
+
+
+ Custom Item
+
+
+
+```
diff --git a/static/usage/v7/item/theming/css-shadow-parts/react/main_css.md b/static/usage/v7/item/theming/css-shadow-parts/react/main_css.md
new file mode 100644
index 00000000000..0c5e9969494
--- /dev/null
+++ b/static/usage/v7/item/theming/css-shadow-parts/react/main_css.md
@@ -0,0 +1,18 @@
+```css
+ion-item::part(native) {
+ background: #19422d;
+ color: #fff;
+
+ border-color: #fff;
+ border-style: dashed;
+ border-width: 2px;
+
+ border-radius: 20px;
+}
+
+ion-item::part(detail-icon) {
+ color: white;
+ opacity: 1;
+ font-size: 20px;
+}
+```
diff --git a/static/usage/v7/item/theming/css-shadow-parts/react/main_tsx.md b/static/usage/v7/item/theming/css-shadow-parts/react/main_tsx.md
new file mode 100644
index 00000000000..0d8329f134a
--- /dev/null
+++ b/static/usage/v7/item/theming/css-shadow-parts/react/main_tsx.md
@@ -0,0 +1,25 @@
+```tsx
+import React from 'react';
+import { IonItem, IonLabel } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+
+ Custom Item
+
+
+
+ Custom Item
+
+
+
+ Custom Item
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/item/theming/css-shadow-parts/vue.md b/static/usage/v7/item/theming/css-shadow-parts/vue.md
new file mode 100644
index 00000000000..b0ebb030693
--- /dev/null
+++ b/static/usage/v7/item/theming/css-shadow-parts/vue.md
@@ -0,0 +1,43 @@
+```html
+
+
+ Custom Item
+
+
+
+ Custom Item
+
+
+
+ Custom Item
+
+
+
+
+
+
+```
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..2094539141e
--- /dev/null
+++ b/static/usage/v7/item/theming/input-highlight/demo.html
@@ -0,0 +1,50 @@
+
+
+
+
+
+
+ Item
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Custom Input Highlight: Focused
+
+
+
+
+ Custom Input Highlight: Focused & Valid
+
+
+
+
+ Custom Input Highlight: Focused & Invalid
+
+
+
+
+
+
+
+
\ No newline at end of file
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..52713eb0ca5
--- /dev/null
+++ b/static/usage/v7/item/theming/input-highlight/vue.md
@@ -0,0 +1,36 @@
+```html
+
+
+ Custom Input Highlight: Focused
+
+
+
+
+ Custom Input Highlight: Focused & Valid
+
+
+
+
+ Custom Input Highlight: Focused & Invalid
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/label/basic/angular.md b/static/usage/v7/label/basic/angular.md
new file mode 100644
index 00000000000..c3125f70b5f
--- /dev/null
+++ b/static/usage/v7/label/basic/angular.md
@@ -0,0 +1,3 @@
+```html
+Label
+```
diff --git a/static/usage/v7/label/basic/demo.html b/static/usage/v7/label/basic/demo.html
new file mode 100644
index 00000000000..a6bad98959e
--- /dev/null
+++ b/static/usage/v7/label/basic/demo.html
@@ -0,0 +1,24 @@
+
+
+
+
+
+
+ Label
+
+
+
+
+
+
+
+
+
+
+ Label
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/label/basic/index.md b/static/usage/v7/label/basic/index.md
new file mode 100644
index 00000000000..b9365587f5c
--- /dev/null
+++ b/static/usage/v7/label/basic/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/basic/javascript.md b/static/usage/v7/label/basic/javascript.md
new file mode 100644
index 00000000000..c3125f70b5f
--- /dev/null
+++ b/static/usage/v7/label/basic/javascript.md
@@ -0,0 +1,3 @@
+```html
+Label
+```
diff --git a/static/usage/v7/label/basic/react.md b/static/usage/v7/label/basic/react.md
new file mode 100644
index 00000000000..8eb985452c0
--- /dev/null
+++ b/static/usage/v7/label/basic/react.md
@@ -0,0 +1,13 @@
+```tsx
+import React from 'react';
+import { IonLabel } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+ Label
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/label/basic/vue.md b/static/usage/v7/label/basic/vue.md
new file mode 100644
index 00000000000..87f46b68110
--- /dev/null
+++ b/static/usage/v7/label/basic/vue.md
@@ -0,0 +1,14 @@
+```html
+
+ Label
+
+
+
+```
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..d43bb5ba712
--- /dev/null
+++ b/static/usage/v7/label/input/demo.html
@@ -0,0 +1,59 @@
+
+
+
+
+
+
+ Label
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Default Label
+
+
+
+
+ Fixed Label
+
+
+
+
+ Floating Label
+
+
+
+
+ Stacked Label
+
+
+
+
+ Toggle
+
+
+
+
+
+ Checkbox
+
+
+
+
+
+
+
\ No newline at end of file
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..cd05ef82b44
--- /dev/null
+++ b/static/usage/v7/label/input/vue.md
@@ -0,0 +1,42 @@
+```html
+
+
+ Default Label
+
+
+
+
+ Fixed Label
+
+
+
+
+ Floating Label
+
+
+
+
+ Stacked Label
+
+
+
+
+ Toggle
+
+
+
+
+
+ Checkbox
+
+
+
+
+```
diff --git a/static/usage/v7/label/item/angular.md b/static/usage/v7/label/item/angular.md
new file mode 100644
index 00000000000..be252b899a0
--- /dev/null
+++ b/static/usage/v7/label/item/angular.md
@@ -0,0 +1,28 @@
+```html
+
+ Default Label
+
+
+
+
+ Multi-line text that should ellipsis when it is too long
+ to fit on one line. Lorem ipsum dolor sit amet,
+ consectetur adipiscing elit.
+
+
+
+
+
+ Multi-line text that should wrap when it is too long
+ to fit on one line. Lorem ipsum dolor sit amet,
+ consectetur adipiscing elit.
+
+
+
+
+
+ Heading
+ Paragraph
+
+
+```
diff --git a/static/usage/v7/label/item/demo.html b/static/usage/v7/label/item/demo.html
new file mode 100644
index 00000000000..67dbf234345
--- /dev/null
+++ b/static/usage/v7/label/item/demo.html
@@ -0,0 +1,56 @@
+
+
+
+
+
+
+ Label
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Default Label
+
+
+
+
+ Multi-line text that should ellipsis when it is too long
+ to fit on one line. Lorem ipsum dolor sit amet,
+ consectetur adipiscing elit.
+
+
+
+
+
+ Multi-line text that should wrap when it is too long
+ to fit on one line. Lorem ipsum dolor sit amet,
+ consectetur adipiscing elit.
+
+
+
+
+
+ Heading
+ Paragraph
+
+
+
Heading
+ Paragraph
+
+
+```
diff --git a/static/usage/v7/label/item/react.md b/static/usage/v7/label/item/react.md
new file mode 100644
index 00000000000..88e4f904deb
--- /dev/null
+++ b/static/usage/v7/label/item/react.md
@@ -0,0 +1,38 @@
+```tsx
+import React from 'react';
+import { IonItem, IonLabel } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+ Default Label
+
+
+
+
+ Multi-line text that should ellipsis when it is too long
+ to fit on one line. Lorem ipsum dolor sit amet,
+ consectetur adipiscing elit.
+
+
+
+
+
+ Multi-line text that should wrap when it is too long
+ to fit on one line. Lorem ipsum dolor sit amet,
+ consectetur adipiscing elit.
+
+
+
+
+
+ Heading
+ Paragraph
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/label/item/vue.md b/static/usage/v7/label/item/vue.md
new file mode 100644
index 00000000000..99ec3ea3d40
--- /dev/null
+++ b/static/usage/v7/label/item/vue.md
@@ -0,0 +1,39 @@
+```html
+
+
+ Default Label
+
+
+
+
+ Multi-line text that should ellipsis when it is too long
+ to fit on one line. Lorem ipsum dolor sit amet,
+ consectetur adipiscing elit.
+
+
+
+
+
+ Multi-line text that should wrap when it is too long
+ to fit on one line. Lorem ipsum dolor sit amet,
+ consectetur adipiscing elit.
+
+
+
+
+
+ Heading
+ Paragraph
+
+
+
+
+
+```
diff --git a/static/usage/v7/label/theming/colors/angular.md b/static/usage/v7/label/theming/colors/angular.md
new file mode 100644
index 00000000000..1fbebb19888
--- /dev/null
+++ b/static/usage/v7/label/theming/colors/angular.md
@@ -0,0 +1,12 @@
+```html
+Default
+Primary
+Secondary
+Tertiary
+Success
+Warning
+Danger
+Light
+Medium
+Dark
+```
diff --git a/static/usage/v7/label/theming/colors/demo.html b/static/usage/v7/label/theming/colors/demo.html
new file mode 100644
index 00000000000..3444d3c2da9
--- /dev/null
+++ b/static/usage/v7/label/theming/colors/demo.html
@@ -0,0 +1,39 @@
+
+
+
+
+
+
+ Label
+
+
+
+
+
+
+
+
+
+
+
+
+ Default
+ Primary
+ Secondary
+ Tertiary
+ Success
+ Warning
+ Danger
+ Light
+ Medium
+ Dark
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/label/theming/colors/index.md b/static/usage/v7/label/theming/colors/index.md
new file mode 100644
index 00000000000..45363df63a4
--- /dev/null
+++ b/static/usage/v7/label/theming/colors/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/theming/colors/javascript.md b/static/usage/v7/label/theming/colors/javascript.md
new file mode 100644
index 00000000000..1fbebb19888
--- /dev/null
+++ b/static/usage/v7/label/theming/colors/javascript.md
@@ -0,0 +1,12 @@
+```html
+Default
+Primary
+Secondary
+Tertiary
+Success
+Warning
+Danger
+Light
+Medium
+Dark
+```
diff --git a/static/usage/v7/label/theming/colors/react.md b/static/usage/v7/label/theming/colors/react.md
new file mode 100644
index 00000000000..6680a644fb6
--- /dev/null
+++ b/static/usage/v7/label/theming/colors/react.md
@@ -0,0 +1,22 @@
+```tsx
+import React from 'react';
+import { IonLabel } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+ Default
+ Primary
+ Secondary
+ Tertiary
+ Success
+ Warning
+ Danger
+ Light
+ Medium
+ Dark
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/label/theming/colors/vue.md b/static/usage/v7/label/theming/colors/vue.md
new file mode 100644
index 00000000000..da18a00d4d1
--- /dev/null
+++ b/static/usage/v7/label/theming/colors/vue.md
@@ -0,0 +1,23 @@
+```html
+
+ Default
+ Primary
+ Secondary
+ Tertiary
+ Success
+ Warning
+ Danger
+ Light
+ Medium
+ Dark
+
+
+
+```
diff --git a/static/usage/v7/list-header/basic/angular.md b/static/usage/v7/list-header/basic/angular.md
new file mode 100644
index 00000000000..d2e2f3fb345
--- /dev/null
+++ b/static/usage/v7/list-header/basic/angular.md
@@ -0,0 +1,22 @@
+```html
+
+
+ Video Games
+
+
+ Pokémon Yellow
+
+
+ Mega Man X
+
+
+ The Legend of Zelda
+
+
+ Pac-Man
+
+
+ Super Mario World
+
+
+```
diff --git a/static/usage/v7/list-header/basic/demo.html b/static/usage/v7/list-header/basic/demo.html
new file mode 100644
index 00000000000..dae3477fac9
--- /dev/null
+++ b/static/usage/v7/list-header/basic/demo.html
@@ -0,0 +1,49 @@
+
+
+
+
+
+
+ List Header
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Video Games
+
+
+ Pokémon Yellow
+
+
+ Mega Man X
+
+
+ The Legend of Zelda
+
+
+ Pac-Man
+
+
+ Super Mario World
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/list-header/basic/index.md b/static/usage/v7/list-header/basic/index.md
new file mode 100644
index 00000000000..79b5b31a75f
--- /dev/null
+++ b/static/usage/v7/list-header/basic/index.md
@@ -0,0 +1,13 @@
+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/list-header/basic/javascript.md b/static/usage/v7/list-header/basic/javascript.md
new file mode 100644
index 00000000000..d2e2f3fb345
--- /dev/null
+++ b/static/usage/v7/list-header/basic/javascript.md
@@ -0,0 +1,22 @@
+```html
+
+
+ Video Games
+
+
+ Pokémon Yellow
+
+
+ Mega Man X
+
+
+ The Legend of Zelda
+
+
+ Pac-Man
+
+
+ Super Mario World
+
+
+```
diff --git a/static/usage/v7/list-header/basic/react.md b/static/usage/v7/list-header/basic/react.md
new file mode 100644
index 00000000000..b48a05b05da
--- /dev/null
+++ b/static/usage/v7/list-header/basic/react.md
@@ -0,0 +1,30 @@
+```tsx
+import React from 'react';
+import { IonItem, IonLabel, IonList, IonListHeader } from '@ionic/react';
+
+function Example() {
+ return (
+
+
+ Video Games
+
+
+ Pokémon Yellow
+
+
+ Mega Man X
+
+
+ The Legend of Zelda
+
+
+ Pac-Man
+
+
+ Super Mario World
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/list-header/basic/vue.md b/static/usage/v7/list-header/basic/vue.md
new file mode 100644
index 00000000000..b7d6980e400
--- /dev/null
+++ b/static/usage/v7/list-header/basic/vue.md
@@ -0,0 +1,33 @@
+```html
+
+
+
+ Video Games
+
+
+ Pokémon Yellow
+
+
+ Mega Man X
+
+
+ The Legend of Zelda
+
+
+ Pac-Man
+
+
+ Super Mario World
+
+
+
+
+
+```
diff --git a/static/usage/v7/list-header/buttons/angular.md b/static/usage/v7/list-header/buttons/angular.md
new file mode 100644
index 00000000000..7c24d9242a2
--- /dev/null
+++ b/static/usage/v7/list-header/buttons/angular.md
@@ -0,0 +1,23 @@
+```html
+
+
+ Video Games
+ See All
+
+
+ Pokémon Yellow
+
+
+ Mega Man X
+
+
+ The Legend of Zelda
+
+
+ Pac-Man
+
+
+ Super Mario World
+
+
+```
diff --git a/static/usage/v7/list-header/buttons/demo.html b/static/usage/v7/list-header/buttons/demo.html
new file mode 100644
index 00000000000..19ecb87a9a2
--- /dev/null
+++ b/static/usage/v7/list-header/buttons/demo.html
@@ -0,0 +1,50 @@
+
+
+
+
+
+
+ List Header
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Video Games
+ See All
+
+
+ Pokémon Yellow
+
+
+ Mega Man X
+
+
+ The Legend of Zelda
+
+
+ Pac-Man
+
+
+ Super Mario World
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/list-header/buttons/index.md b/static/usage/v7/list-header/buttons/index.md
new file mode 100644
index 00000000000..5c724b1a8f5
--- /dev/null
+++ b/static/usage/v7/list-header/buttons/index.md
@@ -0,0 +1,13 @@
+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/list-header/buttons/javascript.md b/static/usage/v7/list-header/buttons/javascript.md
new file mode 100644
index 00000000000..7c24d9242a2
--- /dev/null
+++ b/static/usage/v7/list-header/buttons/javascript.md
@@ -0,0 +1,23 @@
+```html
+
+
+ Video Games
+ See All
+
+
+ Pokémon Yellow
+
+
+ Mega Man X
+
+
+ The Legend of Zelda
+
+
+ Pac-Man
+
+
+ Super Mario World
+
+
+```
diff --git a/static/usage/v7/list-header/buttons/react.md b/static/usage/v7/list-header/buttons/react.md
new file mode 100644
index 00000000000..d5d45b36ab0
--- /dev/null
+++ b/static/usage/v7/list-header/buttons/react.md
@@ -0,0 +1,31 @@
+```tsx
+import React from 'react';
+import { IonButton, IonItem, IonLabel, IonList, IonListHeader } from '@ionic/react';
+
+function Example() {
+ return (
+
+
+ Video Games
+ See All
+
+
+ Pokémon Yellow
+
+
+ Mega Man X
+
+
+ The Legend of Zelda
+
+
+ Pac-Man
+
+
+ Super Mario World
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/list-header/buttons/vue.md b/static/usage/v7/list-header/buttons/vue.md
new file mode 100644
index 00000000000..704e94f057a
--- /dev/null
+++ b/static/usage/v7/list-header/buttons/vue.md
@@ -0,0 +1,34 @@
+```html
+
+
+
+ Video Games
+ See All
+
+
+ Pokémon Yellow
+
+
+ Mega Man X
+
+
+ The Legend of Zelda
+
+
+ Pac-Man
+
+
+ Super Mario World
+
+
+
+
+
+```
diff --git a/static/usage/v7/list-header/lines/angular.md b/static/usage/v7/list-header/lines/angular.md
new file mode 100644
index 00000000000..7feb30bd27d
--- /dev/null
+++ b/static/usage/v7/list-header/lines/angular.md
@@ -0,0 +1,37 @@
+```html
+
+
+ Default
+
+
+ Item
+
+
+ Item
+
+
+
+
+
+ Inset
+
+
+ Item
+
+
+ Item
+
+
+
+
+
+ Full
+
+
+ Item
+
+
+ Item
+
+
+```
diff --git a/static/usage/v7/list-header/lines/demo.html b/static/usage/v7/list-header/lines/demo.html
new file mode 100644
index 00000000000..dad3ebc17cb
--- /dev/null
+++ b/static/usage/v7/list-header/lines/demo.html
@@ -0,0 +1,64 @@
+
+
+
+
+
+
+ List Header
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Default
+
+
+ Item
+
+
+ Item
+
+
+
+
+
+ Inset
+
+
+ Item
+
+
+ Item
+
+
+
+
+
+ Full
+
+
+ Item
+
+
+ Item
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/list-header/lines/index.md b/static/usage/v7/list-header/lines/index.md
new file mode 100644
index 00000000000..a8e84eddf7f
--- /dev/null
+++ b/static/usage/v7/list-header/lines/index.md
@@ -0,0 +1,13 @@
+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/list-header/lines/javascript.md b/static/usage/v7/list-header/lines/javascript.md
new file mode 100644
index 00000000000..7feb30bd27d
--- /dev/null
+++ b/static/usage/v7/list-header/lines/javascript.md
@@ -0,0 +1,37 @@
+```html
+
+
+ Default
+
+
+ Item
+
+
+ Item
+
+
+
+
+
+ Inset
+
+
+ Item
+
+
+ Item
+
+
+
+
+
+ Full
+
+
+ Item
+
+
+ Item
+
+
+```
diff --git a/static/usage/v7/list-header/lines/react.md b/static/usage/v7/list-header/lines/react.md
new file mode 100644
index 00000000000..9ab1c69d35e
--- /dev/null
+++ b/static/usage/v7/list-header/lines/react.md
@@ -0,0 +1,47 @@
+```tsx
+import React from 'react';
+import { IonItem, IonLabel, IonList, IonListHeader } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+ Default
+
+
+ Item
+
+
+ Item
+
+
+
+
+
+ Inset
+
+
+ Item
+
+
+ Item
+
+
+
+
+
+ Full
+
+
+ Item
+
+
+ Item
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/list-header/lines/vue.md b/static/usage/v7/list-header/lines/vue.md
new file mode 100644
index 00000000000..6ec522dd8a4
--- /dev/null
+++ b/static/usage/v7/list-header/lines/vue.md
@@ -0,0 +1,48 @@
+```html
+
+
+
+ Default
+
+
+ Item
+
+
+ Item
+
+
+
+
+
+ Inset
+
+
+ Item
+
+
+ Item
+
+
+
+
+
+ Full
+
+
+ Item
+
+
+ Item
+
+
+
+
+
+```
diff --git a/static/usage/v7/list-header/theming/colors/angular.md b/static/usage/v7/list-header/theming/colors/angular.md
new file mode 100644
index 00000000000..88d5b12d912
--- /dev/null
+++ b/static/usage/v7/list-header/theming/colors/angular.md
@@ -0,0 +1,32 @@
+```html
+
+ Default
+
+
+ Primary
+
+
+ Secondary
+
+
+ Tertiary
+
+
+ Success
+
+
+ Warning
+
+
+ Danger
+
+
+ Light
+
+
+ Medium
+
+
+ Dark
+
+```
diff --git a/static/usage/v7/list-header/theming/colors/demo.html b/static/usage/v7/list-header/theming/colors/demo.html
new file mode 100644
index 00000000000..fa36d9b0a9a
--- /dev/null
+++ b/static/usage/v7/list-header/theming/colors/demo.html
@@ -0,0 +1,59 @@
+
+
+
+
+
+
+ List Header
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Default
+
+
+ Primary
+
+
+ Secondary
+
+
+ Tertiary
+
+
+ Success
+
+
+ Warning
+
+
+ Danger
+
+
+ Light
+
+
+ Medium
+
+
+ Dark
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/list-header/theming/colors/index.md b/static/usage/v7/list-header/theming/colors/index.md
new file mode 100644
index 00000000000..13af9007f88
--- /dev/null
+++ b/static/usage/v7/list-header/theming/colors/index.md
@@ -0,0 +1,13 @@
+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/list-header/theming/colors/javascript.md b/static/usage/v7/list-header/theming/colors/javascript.md
new file mode 100644
index 00000000000..88d5b12d912
--- /dev/null
+++ b/static/usage/v7/list-header/theming/colors/javascript.md
@@ -0,0 +1,32 @@
+```html
+
+ Default
+
+
+ Primary
+
+
+ Secondary
+
+
+ Tertiary
+
+
+ Success
+
+
+ Warning
+
+
+ Danger
+
+
+ Light
+
+
+ Medium
+
+
+ Dark
+
+```
diff --git a/static/usage/v7/list-header/theming/colors/react.md b/static/usage/v7/list-header/theming/colors/react.md
new file mode 100644
index 00000000000..f00ce7c16d1
--- /dev/null
+++ b/static/usage/v7/list-header/theming/colors/react.md
@@ -0,0 +1,42 @@
+```tsx
+import React from 'react';
+import { IonLabel, IonListHeader } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+ Default
+
+
+ Primary
+
+
+ Secondary
+
+
+ Tertiary
+
+
+ Success
+
+
+ Warning
+
+
+ Danger
+
+
+ Light
+
+
+ Medium
+
+
+ Dark
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/list-header/theming/colors/vue.md b/static/usage/v7/list-header/theming/colors/vue.md
new file mode 100644
index 00000000000..b20672dd78f
--- /dev/null
+++ b/static/usage/v7/list-header/theming/colors/vue.md
@@ -0,0 +1,43 @@
+```html
+
+
+ Default
+
+
+ Primary
+
+
+ Secondary
+
+
+ Tertiary
+
+
+ Success
+
+
+ Warning
+
+
+ Danger
+
+
+ Light
+
+
+ Medium
+
+
+ Dark
+
+
+
+
+```
diff --git a/static/usage/v7/list-header/theming/css-properties/angular/example_component_css.md b/static/usage/v7/list-header/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..9609437fd1d
--- /dev/null
+++ b/static/usage/v7/list-header/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,10 @@
+```css
+ion-list-header {
+ --background: #19422d;
+ --color: #fff;
+
+ --border-width: 0 0 4px 0;
+ --border-color: #f24aec;
+ --border-style: double;
+}
+```
diff --git a/static/usage/v7/list-header/theming/css-properties/angular/example_component_html.md b/static/usage/v7/list-header/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..0bf6d9fa3fe
--- /dev/null
+++ b/static/usage/v7/list-header/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,5 @@
+```html
+
+ Custom List Header
+
+```
diff --git a/static/usage/v7/list-header/theming/css-properties/demo.html b/static/usage/v7/list-header/theming/css-properties/demo.html
new file mode 100644
index 00000000000..133c2d8f994
--- /dev/null
+++ b/static/usage/v7/list-header/theming/css-properties/demo.html
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+ List Header
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Custom List Header
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/list-header/theming/css-properties/index.md b/static/usage/v7/list-header/theming/css-properties/index.md
new file mode 100644
index 00000000000..e273cdb2b91
--- /dev/null
+++ b/static/usage/v7/list-header/theming/css-properties/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/list-header/theming/css-properties/javascript.md b/static/usage/v7/list-header/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..5ac75dc4f0f
--- /dev/null
+++ b/static/usage/v7/list-header/theming/css-properties/javascript.md
@@ -0,0 +1,16 @@
+```html
+
+ Custom List Header
+
+
+
+```
diff --git a/static/usage/v7/list-header/theming/css-properties/react/main_css.md b/static/usage/v7/list-header/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..9609437fd1d
--- /dev/null
+++ b/static/usage/v7/list-header/theming/css-properties/react/main_css.md
@@ -0,0 +1,10 @@
+```css
+ion-list-header {
+ --background: #19422d;
+ --color: #fff;
+
+ --border-width: 0 0 4px 0;
+ --border-color: #f24aec;
+ --border-style: double;
+}
+```
diff --git a/static/usage/v7/list-header/theming/css-properties/react/main_tsx.md b/static/usage/v7/list-header/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..169485b3365
--- /dev/null
+++ b/static/usage/v7/list-header/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,15 @@
+```tsx
+import React from 'react';
+import { IonLabel, IonListHeader } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+
+ Custom List Header
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/list-header/theming/css-properties/vue.md b/static/usage/v7/list-header/theming/css-properties/vue.md
new file mode 100644
index 00000000000..c56d482c2a2
--- /dev/null
+++ b/static/usage/v7/list-header/theming/css-properties/vue.md
@@ -0,0 +1,27 @@
+```html
+
+
+ Custom List Header
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/list/basic/angular.md b/static/usage/v7/list/basic/angular.md
new file mode 100644
index 00000000000..f36481075e8
--- /dev/null
+++ b/static/usage/v7/list/basic/angular.md
@@ -0,0 +1,19 @@
+```html
+
+
+ Pokémon Yellow
+
+
+ Mega Man X
+
+
+ The Legend of Zelda
+
+
+ Pac-Man
+
+
+ Super Mario World
+
+
+```
diff --git a/static/usage/v7/list/basic/demo.html b/static/usage/v7/list/basic/demo.html
new file mode 100644
index 00000000000..86ed4981f63
--- /dev/null
+++ b/static/usage/v7/list/basic/demo.html
@@ -0,0 +1,46 @@
+
+
+
+
+
+
+ List
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Pokémon Yellow
+
+
+ Mega Man X
+
+
+ The Legend of Zelda
+
+
+ Pac-Man
+
+
+ Super Mario World
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/list/basic/index.md b/static/usage/v7/list/basic/index.md
new file mode 100644
index 00000000000..7569f140fb9
--- /dev/null
+++ b/static/usage/v7/list/basic/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/list/basic/javascript.md b/static/usage/v7/list/basic/javascript.md
new file mode 100644
index 00000000000..f36481075e8
--- /dev/null
+++ b/static/usage/v7/list/basic/javascript.md
@@ -0,0 +1,19 @@
+```html
+
+
+ Pokémon Yellow
+
+
+ Mega Man X
+
+
+ The Legend of Zelda
+
+
+ Pac-Man
+
+
+ Super Mario World
+
+
+```
diff --git a/static/usage/v7/list/basic/react.md b/static/usage/v7/list/basic/react.md
new file mode 100644
index 00000000000..51b30335ccd
--- /dev/null
+++ b/static/usage/v7/list/basic/react.md
@@ -0,0 +1,27 @@
+```tsx
+import React from 'react';
+import { IonItem, IonLabel, IonList } from '@ionic/react';
+
+function Example() {
+ return (
+
+
+ Pokémon Yellow
+
+
+ Mega Man X
+
+
+ The Legend of Zelda
+
+
+ Pac-Man
+
+
+ Super Mario World
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/list/basic/vue.md b/static/usage/v7/list/basic/vue.md
new file mode 100644
index 00000000000..4f3886c0719
--- /dev/null
+++ b/static/usage/v7/list/basic/vue.md
@@ -0,0 +1,30 @@
+```html
+
+
+
+ Pokémon Yellow
+
+
+ Mega Man X
+
+
+ The Legend of Zelda
+
+
+ Pac-Man
+
+
+ Super Mario World
+
+
+
+
+
+```
diff --git a/static/usage/v7/list/inset/angular.md b/static/usage/v7/list/inset/angular.md
new file mode 100644
index 00000000000..d88d56e77f1
--- /dev/null
+++ b/static/usage/v7/list/inset/angular.md
@@ -0,0 +1,19 @@
+```html
+
+
+ Pokémon Yellow
+
+
+ Mega Man X
+
+
+ The Legend of Zelda
+
+
+ Pac-Man
+
+
+ Super Mario World
+
+
+```
diff --git a/static/usage/v7/list/inset/demo.html b/static/usage/v7/list/inset/demo.html
new file mode 100644
index 00000000000..b2cbacc4e11
--- /dev/null
+++ b/static/usage/v7/list/inset/demo.html
@@ -0,0 +1,51 @@
+
+
+
+
+
+
+ List
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Pokémon Yellow
+
+
+ Mega Man X
+
+
+ The Legend of Zelda
+
+
+ Pac-Man
+
+
+ Super Mario World
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/list/inset/index.md b/static/usage/v7/list/inset/index.md
new file mode 100644
index 00000000000..90a7e7c6a64
--- /dev/null
+++ b/static/usage/v7/list/inset/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/list/inset/javascript.md b/static/usage/v7/list/inset/javascript.md
new file mode 100644
index 00000000000..a5c6e28dd38
--- /dev/null
+++ b/static/usage/v7/list/inset/javascript.md
@@ -0,0 +1,19 @@
+```html
+
+
+ Pokémon Yellow
+
+
+ Mega Man X
+
+
+ The Legend of Zelda
+
+
+ Pac-Man
+
+
+ Super Mario World
+
+
+```
diff --git a/static/usage/v7/list/inset/react.md b/static/usage/v7/list/inset/react.md
new file mode 100644
index 00000000000..d9f00d8a4f9
--- /dev/null
+++ b/static/usage/v7/list/inset/react.md
@@ -0,0 +1,27 @@
+```tsx
+import React from 'react';
+import { IonItem, IonLabel, IonList } from '@ionic/react';
+
+function Example() {
+ return (
+
+
+ Pokémon Yellow
+
+
+ Mega Man X
+
+
+ The Legend of Zelda
+
+
+ Pac-Man
+
+
+ Super Mario World
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/list/inset/vue.md b/static/usage/v7/list/inset/vue.md
new file mode 100644
index 00000000000..15d801c7eae
--- /dev/null
+++ b/static/usage/v7/list/inset/vue.md
@@ -0,0 +1,30 @@
+```html
+
+
+
+ Pokémon Yellow
+
+
+ Mega Man X
+
+
+ The Legend of Zelda
+
+
+ Pac-Man
+
+
+ Super Mario World
+
+
+
+
+
+```
diff --git a/static/usage/v7/list/lines/angular.md b/static/usage/v7/list/lines/angular.md
new file mode 100644
index 00000000000..b311cb8ad0a
--- /dev/null
+++ b/static/usage/v7/list/lines/angular.md
@@ -0,0 +1,37 @@
+```html
+
+
+ Full Lines
+
+
+ Full Lines
+
+
+ Full Lines
+
+
+
+
+
+ Inset Lines
+
+
+ Inset Lines
+
+
+ Inset Lines
+
+
+
+
+
+ No Lines
+
+
+ No Lines
+
+
+ No Lines
+
+
+```
diff --git a/static/usage/v7/list/lines/demo.html b/static/usage/v7/list/lines/demo.html
new file mode 100644
index 00000000000..259465266e1
--- /dev/null
+++ b/static/usage/v7/list/lines/demo.html
@@ -0,0 +1,66 @@
+
+
+
+
+
+
+ List
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Full Lines
+
+
+ Full Lines
+
+
+ Full Lines
+
+
+
+
+
+ Inset Lines
+
+
+ Inset Lines
+
+
+ Inset Lines
+
+
+
+
+
+ No Lines
+
+
+ No Lines
+
+
+ No Lines
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/list/lines/index.md b/static/usage/v7/list/lines/index.md
new file mode 100644
index 00000000000..bbf9d599ccd
--- /dev/null
+++ b/static/usage/v7/list/lines/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/list/lines/javascript.md b/static/usage/v7/list/lines/javascript.md
new file mode 100644
index 00000000000..b311cb8ad0a
--- /dev/null
+++ b/static/usage/v7/list/lines/javascript.md
@@ -0,0 +1,37 @@
+```html
+
+
+ Full Lines
+
+
+ Full Lines
+
+
+ Full Lines
+
+
+
+
+
+ Inset Lines
+
+
+ Inset Lines
+
+
+ Inset Lines
+
+
+
+
+
+ No Lines
+
+
+ No Lines
+
+
+ No Lines
+
+
+```
diff --git a/static/usage/v7/list/lines/react.md b/static/usage/v7/list/lines/react.md
new file mode 100644
index 00000000000..16754ad804b
--- /dev/null
+++ b/static/usage/v7/list/lines/react.md
@@ -0,0 +1,47 @@
+```tsx
+import React from 'react';
+import { IonItem, IonLabel, IonList } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+ Full Lines
+
+
+ Full Lines
+
+
+ Full Lines
+
+
+
+
+
+ Inset Lines
+
+
+ Inset Lines
+
+
+ Inset Lines
+
+
+
+
+
+ No Lines
+
+
+ No Lines
+
+
+ No Lines
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/list/lines/vue.md b/static/usage/v7/list/lines/vue.md
new file mode 100644
index 00000000000..914ba88d980
--- /dev/null
+++ b/static/usage/v7/list/lines/vue.md
@@ -0,0 +1,48 @@
+```html
+
+
+
+ Full Lines
+
+
+ Full Lines
+
+
+ Full Lines
+
+
+
+
+
+ Inset Lines
+
+
+ Inset Lines
+
+
+ Inset Lines
+
+
+
+
+
+ No Lines
+
+
+ No Lines
+
+
+ No Lines
+
+
+
+
+
+```
diff --git a/static/usage/v7/loading/controller/angular/example_component_html.md b/static/usage/v7/loading/controller/angular/example_component_html.md
new file mode 100644
index 00000000000..f4f3d701d2f
--- /dev/null
+++ b/static/usage/v7/loading/controller/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+Show Loading
+```
diff --git a/static/usage/v7/loading/controller/angular/example_component_ts.md b/static/usage/v7/loading/controller/angular/example_component_ts.md
new file mode 100644
index 00000000000..bd4b86eef29
--- /dev/null
+++ b/static/usage/v7/loading/controller/angular/example_component_ts.md
@@ -0,0 +1,22 @@
+```ts
+import { Component } from '@angular/core';
+
+import { LoadingController } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ constructor(private loadingCtrl: LoadingController) {}
+
+ async showLoading() {
+ const loading = await this.loadingCtrl.create({
+ message: 'Dismissing after 3 seconds...',
+ duration: 3000,
+ });
+
+ loading.present();
+ }
+}
+```
diff --git a/static/usage/v7/loading/controller/demo.html b/static/usage/v7/loading/controller/demo.html
new file mode 100644
index 00000000000..9a3385f7307
--- /dev/null
+++ b/static/usage/v7/loading/controller/demo.html
@@ -0,0 +1,39 @@
+
+
+
+
+
+
+ Datetime
+
+
+
+
+
+
+
+
+
+
+
+ Show Loading
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/loading/controller/index.md b/static/usage/v7/loading/controller/index.md
new file mode 100644
index 00000000000..0b953906d7d
--- /dev/null
+++ b/static/usage/v7/loading/controller/index.md
@@ -0,0 +1,24 @@
+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_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/v7/loading/controller/javascript.md b/static/usage/v7/loading/controller/javascript.md
new file mode 100644
index 00000000000..c5507d123af
--- /dev/null
+++ b/static/usage/v7/loading/controller/javascript.md
@@ -0,0 +1,14 @@
+```html
+Show Loading
+
+
+```
diff --git a/static/usage/v7/loading/controller/react.md b/static/usage/v7/loading/controller/react.md
new file mode 100644
index 00000000000..16280a1e91a
--- /dev/null
+++ b/static/usage/v7/loading/controller/react.md
@@ -0,0 +1,25 @@
+```tsx
+import React from 'react';
+import { IonButton, useIonLoading } from '@ionic/react';
+function Example() {
+
+ /**
+ * This example does not make use of the dismiss
+ * method returned from `useIonLoading`, but it can
+ * be used for more complex scenarios.
+ */
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
+ const [present, dismiss] = useIonLoading();
+ return (
+ {
+ present({
+ message: 'Dismissing after 3 seconds...',
+ duration: 3000
+ })
+ }}>
+ Show Loading
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/loading/controller/vue.md b/static/usage/v7/loading/controller/vue.md
new file mode 100644
index 00000000000..17b65b33af0
--- /dev/null
+++ b/static/usage/v7/loading/controller/vue.md
@@ -0,0 +1,26 @@
+```html
+
+ Show Loading
+
+
+
+```
diff --git a/static/usage/v7/loading/inline/angular.md b/static/usage/v7/loading/inline/angular.md
new file mode 100644
index 00000000000..d0a24c72f61
--- /dev/null
+++ b/static/usage/v7/loading/inline/angular.md
@@ -0,0 +1,4 @@
+```html
+Show Loading
+
+```
diff --git a/static/usage/v7/loading/inline/demo.html b/static/usage/v7/loading/inline/demo.html
new file mode 100644
index 00000000000..ca6869bf5cf
--- /dev/null
+++ b/static/usage/v7/loading/inline/demo.html
@@ -0,0 +1,26 @@
+
+
+
+
+
+
+ Loading
+
+
+
+
+
+
+
+
+
+
+ Show Loading
+
+
+
+
+
+
+
+
diff --git a/static/usage/v7/loading/inline/index.md b/static/usage/v7/loading/inline/index.md
new file mode 100644
index 00000000000..e4038ad027d
--- /dev/null
+++ b/static/usage/v7/loading/inline/index.md
@@ -0,0 +1,17 @@
+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/loading/inline/javascript.md b/static/usage/v7/loading/inline/javascript.md
new file mode 100644
index 00000000000..d0a24c72f61
--- /dev/null
+++ b/static/usage/v7/loading/inline/javascript.md
@@ -0,0 +1,4 @@
+```html
+Show Loading
+
+```
diff --git a/static/usage/v7/loading/inline/react.md b/static/usage/v7/loading/inline/react.md
new file mode 100644
index 00000000000..54ab6144881
--- /dev/null
+++ b/static/usage/v7/loading/inline/react.md
@@ -0,0 +1,13 @@
+```tsx
+import React from 'react';
+import { IonButton, IonLoading } from '@ionic/react';
+function Example() {
+ return (
+ <>
+ Show Loading
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/loading/inline/vue.md b/static/usage/v7/loading/inline/vue.md
new file mode 100644
index 00000000000..9c924108af8
--- /dev/null
+++ b/static/usage/v7/loading/inline/vue.md
@@ -0,0 +1,14 @@
+```html
+
+ Show Loading
+
+
+
+
+```
diff --git a/static/usage/v7/loading/spinners/angular.md b/static/usage/v7/loading/spinners/angular.md
new file mode 100644
index 00000000000..9f4eb5f13a0
--- /dev/null
+++ b/static/usage/v7/loading/spinners/angular.md
@@ -0,0 +1,4 @@
+```html
+Show Loading
+
+```
diff --git a/static/usage/v7/loading/spinners/demo.html b/static/usage/v7/loading/spinners/demo.html
new file mode 100644
index 00000000000..8bf40c93809
--- /dev/null
+++ b/static/usage/v7/loading/spinners/demo.html
@@ -0,0 +1,25 @@
+
+
+
+
+
+
+ Loading
+
+
+
+
+
+
+
+
+
+
+ Show Loading
+
+
+
+
+
+
+
diff --git a/static/usage/v7/loading/spinners/index.md b/static/usage/v7/loading/spinners/index.md
new file mode 100644
index 00000000000..c9aa963a5f1
--- /dev/null
+++ b/static/usage/v7/loading/spinners/index.md
@@ -0,0 +1,17 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import angular from './angular.md';
+import react from './react.md';
+import vue from './vue.md';
+
+
diff --git a/static/usage/v7/loading/spinners/javascript.md b/static/usage/v7/loading/spinners/javascript.md
new file mode 100644
index 00000000000..4e2105dcd5e
--- /dev/null
+++ b/static/usage/v7/loading/spinners/javascript.md
@@ -0,0 +1,4 @@
+```html
+Show Loading
+
+```
diff --git a/static/usage/v7/loading/spinners/react.md b/static/usage/v7/loading/spinners/react.md
new file mode 100644
index 00000000000..2bfa2eb4aa1
--- /dev/null
+++ b/static/usage/v7/loading/spinners/react.md
@@ -0,0 +1,13 @@
+```tsx
+import React from 'react';
+import { IonButton, useIonLoading } from '@ionic/react';
+function Example() {
+ return (
+ <>
+ Show Loading
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/loading/spinners/vue.md b/static/usage/v7/loading/spinners/vue.md
new file mode 100644
index 00000000000..5e3b62759ad
--- /dev/null
+++ b/static/usage/v7/loading/spinners/vue.md
@@ -0,0 +1,15 @@
+```html
+
+ Show Loading
+
+
+
+
+```
diff --git a/static/usage/v7/loading/theming/angular/example_component_html.md b/static/usage/v7/loading/theming/angular/example_component_html.md
new file mode 100644
index 00000000000..0696c7c4342
--- /dev/null
+++ b/static/usage/v7/loading/theming/angular/example_component_html.md
@@ -0,0 +1,4 @@
+```html
+Show Loading
+
+```
diff --git a/static/usage/v7/loading/theming/angular/global_css.md b/static/usage/v7/loading/theming/angular/global_css.md
new file mode 100644
index 00000000000..16bf7af3522
--- /dev/null
+++ b/static/usage/v7/loading/theming/angular/global_css.md
@@ -0,0 +1,8 @@
+```css
+ion-loading.custom-loading {
+ --background: #e3edff;
+ --spinner-color: #1c6dff;
+
+ color: #1c6dff;
+}
+```
\ No newline at end of file
diff --git a/static/usage/v7/loading/theming/demo.html b/static/usage/v7/loading/theming/demo.html
new file mode 100644
index 00000000000..8e8a1daa3fe
--- /dev/null
+++ b/static/usage/v7/loading/theming/demo.html
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+ Datetime
+
+
+
+
+
+
+
+
+
+
+
+
+ Show Loading
+
+
+
+
+
+
+
diff --git a/static/usage/v7/loading/theming/index.md b/static/usage/v7/loading/theming/index.md
new file mode 100644
index 00000000000..f0a5a379593
--- /dev/null
+++ b/static/usage/v7/loading/theming/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_global_css from './angular/global_css.md';
+
+
diff --git a/static/usage/v7/loading/theming/javascript.md b/static/usage/v7/loading/theming/javascript.md
new file mode 100644
index 00000000000..4fcaf2ff32d
--- /dev/null
+++ b/static/usage/v7/loading/theming/javascript.md
@@ -0,0 +1,13 @@
+```html
+Show Loading
+
+
+
+```
diff --git a/static/usage/v7/loading/theming/react/main_css.md b/static/usage/v7/loading/theming/react/main_css.md
new file mode 100644
index 00000000000..16bf7af3522
--- /dev/null
+++ b/static/usage/v7/loading/theming/react/main_css.md
@@ -0,0 +1,8 @@
+```css
+ion-loading.custom-loading {
+ --background: #e3edff;
+ --spinner-color: #1c6dff;
+
+ color: #1c6dff;
+}
+```
\ No newline at end of file
diff --git a/static/usage/v7/loading/theming/react/main_tsx.md b/static/usage/v7/loading/theming/react/main_tsx.md
new file mode 100644
index 00000000000..01a84ed7f30
--- /dev/null
+++ b/static/usage/v7/loading/theming/react/main_tsx.md
@@ -0,0 +1,16 @@
+```tsx
+import React from 'react';
+import { IonButton, IonLoading } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+ Show Loading
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/loading/theming/vue.md b/static/usage/v7/loading/theming/vue.md
new file mode 100644
index 00000000000..7f4538b7068
--- /dev/null
+++ b/static/usage/v7/loading/theming/vue.md
@@ -0,0 +1,23 @@
+```html
+
+ Show Loading
+
+
+
+
+
+```
diff --git a/static/usage/v7/menu/basic/angular.md b/static/usage/v7/menu/basic/angular.md
new file mode 100644
index 00000000000..c169f35f1f4
--- /dev/null
+++ b/static/usage/v7/menu/basic/angular.md
@@ -0,0 +1,23 @@
+```html
+
+
+
+ Menu Content
+
+
+ This is the menu content.
+
+
+
+
+
+
+
+ Menu
+
+
+
+ Tap the button in the toolbar to open the menu.
+
+
+```
diff --git a/static/usage/v7/menu/basic/demo.html b/static/usage/v7/menu/basic/demo.html
new file mode 100644
index 00000000000..83f3f3ac7c4
--- /dev/null
+++ b/static/usage/v7/menu/basic/demo.html
@@ -0,0 +1,40 @@
+
+
+
+
+
+
+ Menu
+
+
+
+
+
+
+
+
+
+
+
+ Menu Content
+
+
+ This is the menu content.
+
+
+
+
+
+
+
+ Menu
+
+
+
+ Tap the button in the toolbar to open the menu.
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/menu/basic/index.md b/static/usage/v7/menu/basic/index.md
new file mode 100644
index 00000000000..e682c266d64
--- /dev/null
+++ b/static/usage/v7/menu/basic/index.md
@@ -0,0 +1,18 @@
+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/menu/basic/javascript.md b/static/usage/v7/menu/basic/javascript.md
new file mode 100644
index 00000000000..570c03c9512
--- /dev/null
+++ b/static/usage/v7/menu/basic/javascript.md
@@ -0,0 +1,23 @@
+```html
+
+
+
+ Menu Content
+
+
+ This is the menu content.
+
+
+
+
+
+
+
+ Menu
+
+
+
+ Tap the button in the toolbar to open the menu.
+
+
+```
diff --git a/static/usage/v7/menu/basic/react.md b/static/usage/v7/menu/basic/react.md
new file mode 100644
index 00000000000..71abc258aef
--- /dev/null
+++ b/static/usage/v7/menu/basic/react.md
@@ -0,0 +1,41 @@
+```tsx
+import React from 'react';
+import {
+ IonButtons,
+ IonContent,
+ IonHeader,
+ IonMenu,
+ IonMenuButton,
+ IonPage,
+ IonTitle,
+ IonToolbar
+} from '@ionic/react';
+function Example() {
+ return (
+ <>
+
+
+
+ Menu Content
+
+
+ This is the menu content.
+
+
+
+
+
+
+
+ Menu
+
+
+
+ Tap the button in the toolbar to open the menu.
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/menu/basic/vue.md b/static/usage/v7/menu/basic/vue.md
new file mode 100644
index 00000000000..d6e3d73d648
--- /dev/null
+++ b/static/usage/v7/menu/basic/vue.md
@@ -0,0 +1,52 @@
+```html
+
+
+
+
+ Menu Content
+
+
+ This is the menu content.
+
+
+
+
+
+
+
+ Menu
+
+
+
+ Tap the button in the toolbar to open the menu.
+
+
+
+
+
+```
diff --git a/static/usage/v7/menu/theming/angular/example_component_css.md b/static/usage/v7/menu/theming/angular/example_component_css.md
new file mode 100644
index 00000000000..839c8f41df5
--- /dev/null
+++ b/static/usage/v7/menu/theming/angular/example_component_css.md
@@ -0,0 +1,11 @@
+```css
+ion-menu::part(backdrop) {
+ background-color: rgba(255, 0, 255, 0.5);
+}
+
+ion-menu::part(container) {
+ border-radius: 0 20px 20px 0;
+
+ box-shadow: 4px 0px 16px rgba(255, 0, 255, 0.18);
+}
+```
\ No newline at end of file
diff --git a/static/usage/v7/menu/theming/angular/example_component_html.md b/static/usage/v7/menu/theming/angular/example_component_html.md
new file mode 100644
index 00000000000..f630cf4c378
--- /dev/null
+++ b/static/usage/v7/menu/theming/angular/example_component_html.md
@@ -0,0 +1,25 @@
+```html
+
+
+
+
+ Menu Content
+
+
+ This is the menu content.
+
+
+
+
+
+
+
+ Menu
+
+
+
+ Tap the button in the toolbar to open the menu.
+
+
+
+```
diff --git a/static/usage/v7/menu/theming/demo.html b/static/usage/v7/menu/theming/demo.html
new file mode 100644
index 00000000000..e3d7c78a20f
--- /dev/null
+++ b/static/usage/v7/menu/theming/demo.html
@@ -0,0 +1,51 @@
+
+
+
+
+
+
+ Menu
+
+
+
+
+
+
+
+
+
+
+
+
+ Menu Content
+
+
+ This is the menu content.
+
+
+
+
+
+
+
+ Menu
+
+
+
+ Tap the button in the toolbar to open the menu.
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/menu/theming/index.md b/static/usage/v7/menu/theming/index.md
new file mode 100644
index 00000000000..83a016b19b7
--- /dev/null
+++ b/static/usage/v7/menu/theming/index.md
@@ -0,0 +1,33 @@
+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/menu/theming/javascript.md b/static/usage/v7/menu/theming/javascript.md
new file mode 100644
index 00000000000..a147ef68090
--- /dev/null
+++ b/static/usage/v7/menu/theming/javascript.md
@@ -0,0 +1,37 @@
+```html
+
+
+
+
+ Menu Content
+
+
+ This is the menu content.
+
+
+
+
+
+
+
+ Menu
+
+
+
+ Tap the button in the toolbar to open the menu.
+
+
+
+
+
+```
diff --git a/static/usage/v7/menu/theming/react/main_css.md b/static/usage/v7/menu/theming/react/main_css.md
new file mode 100644
index 00000000000..839c8f41df5
--- /dev/null
+++ b/static/usage/v7/menu/theming/react/main_css.md
@@ -0,0 +1,11 @@
+```css
+ion-menu::part(backdrop) {
+ background-color: rgba(255, 0, 255, 0.5);
+}
+
+ion-menu::part(container) {
+ border-radius: 0 20px 20px 0;
+
+ box-shadow: 4px 0px 16px rgba(255, 0, 255, 0.18);
+}
+```
\ No newline at end of file
diff --git a/static/usage/v7/menu/theming/react/main_tsx.md b/static/usage/v7/menu/theming/react/main_tsx.md
new file mode 100644
index 00000000000..c935fefb33f
--- /dev/null
+++ b/static/usage/v7/menu/theming/react/main_tsx.md
@@ -0,0 +1,44 @@
+```tsx
+import React from 'react';
+import {
+ IonButtons,
+ IonContent,
+ IonHeader,
+ IonMenu,
+ IonMenuButton,
+ IonPage,
+ IonTitle,
+ IonToolbar
+} from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+
+
+
+ Menu Content
+
+
+ This is the menu content.
+
+
+
+
+
+
+
+ Menu
+
+
+
+ Tap the button in the toolbar to open the menu.
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/menu/theming/vue.md b/static/usage/v7/menu/theming/vue.md
new file mode 100644
index 00000000000..b9d02e48b1f
--- /dev/null
+++ b/static/usage/v7/menu/theming/vue.md
@@ -0,0 +1,64 @@
+```html
+
+
+
+
+ Menu Content
+
+
+ This is the menu content.
+
+
+
+
+
+
+
+ Menu
+
+
+
+ Tap the button in the toolbar to open the menu.
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/menu/toggle/angular.md b/static/usage/v7/menu/toggle/angular.md
new file mode 100644
index 00000000000..d2ecafc7904
--- /dev/null
+++ b/static/usage/v7/menu/toggle/angular.md
@@ -0,0 +1,26 @@
+```html
+
+
+
+ Menu Content
+
+
+
+
+ Click to close the menu
+
+
+
+
+
+
+ Menu
+
+
+
+
+ Click to open the menu
+
+
+
+```
diff --git a/static/usage/v7/menu/toggle/demo.html b/static/usage/v7/menu/toggle/demo.html
new file mode 100644
index 00000000000..6a760b44aa3
--- /dev/null
+++ b/static/usage/v7/menu/toggle/demo.html
@@ -0,0 +1,43 @@
+
+
+
+
+
+
+ Menu - Toggle
+
+
+
+
+
+
+
+
+
+
+
+
+ Menu
+
+
+
+
+ Click to open the menu
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/menu/toggle/index.md b/static/usage/v7/menu/toggle/index.md
new file mode 100644
index 00000000000..df6df9fccbb
--- /dev/null
+++ b/static/usage/v7/menu/toggle/index.md
@@ -0,0 +1,18 @@
+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/menu/toggle/javascript.md b/static/usage/v7/menu/toggle/javascript.md
new file mode 100644
index 00000000000..660e0b4d1b6
--- /dev/null
+++ b/static/usage/v7/menu/toggle/javascript.md
@@ -0,0 +1,26 @@
+```html
+
+
+
+ Menu Content
+
+
+
+
+ Click to close the menu
+
+
+
+
+
+
+ Menu
+
+
+
+
+ Click to open the menu
+
+
+
+```
diff --git a/static/usage/v7/menu/toggle/react.md b/static/usage/v7/menu/toggle/react.md
new file mode 100644
index 00000000000..a940b83e4af
--- /dev/null
+++ b/static/usage/v7/menu/toggle/react.md
@@ -0,0 +1,44 @@
+```tsx
+import React from 'react';
+import {
+ IonButton,
+ IonContent,
+ IonHeader,
+ IonMenu,
+ IonMenuToggle,
+ IonPage,
+ IonTitle,
+ IonToolbar
+} from '@ionic/react';
+function Example() {
+ return (
+ <>
+
+
+
+ Menu Content
+
+
+
+
+ Click to close the menu
+
+
+
+
+
+
+ Menu
+
+
+
+
+ Click to open the menu
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/menu/toggle/vue.md b/static/usage/v7/menu/toggle/vue.md
new file mode 100644
index 00000000000..2cc4807109e
--- /dev/null
+++ b/static/usage/v7/menu/toggle/vue.md
@@ -0,0 +1,55 @@
+```html
+
+
+
+
+ Menu Content
+
+
+
+
+ Click to close the menu
+
+
+
+
+
+
+ Menu
+
+
+
+
+ Click to open the menu
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/menu/type/angular/example_component_html.md b/static/usage/v7/menu/type/angular/example_component_html.md
new file mode 100644
index 00000000000..7154c645660
--- /dev/null
+++ b/static/usage/v7/menu/type/angular/example_component_html.md
@@ -0,0 +1,48 @@
+```html
+
+
+
+ Menu Content
+
+
+
+
+ Click to close the menu
+
+
+
+
+
+
+
+ Menu
+
+
+
+ Select an overlay type:
+
+
+
+ overlay
+
+
+
+
+
+ reveal
+
+
+
+
+
+ push
+
+
+
+
+
+ Click to open the menu
+
+
+
+```
\ No newline at end of file
diff --git a/static/usage/v7/menu/type/angular/example_component_ts.md b/static/usage/v7/menu/type/angular/example_component_ts.md
new file mode 100644
index 00000000000..5f03ec13b76
--- /dev/null
+++ b/static/usage/v7/menu/type/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ menuType: string = 'overlay';
+}
+```
diff --git a/static/usage/v7/menu/type/demo.html b/static/usage/v7/menu/type/demo.html
new file mode 100644
index 00000000000..7dbfe39cffa
--- /dev/null
+++ b/static/usage/v7/menu/type/demo.html
@@ -0,0 +1,74 @@
+
+
+
+
+
+
+ Menu - Type
+
+
+
+
+
+
+
+
+
+
+
+ Menu Content
+
+
+
+
+ Click to close the menu
+
+
+
+
+
+
+
+ Menu
+
+
+
+ Select an overlay type:
+
+
+
+ overlay
+
+
+
+
+
+ reveal
+
+
+
+
+
+ push
+
+
+
+
+
+ Click to open the menu
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/menu/type/index.md b/static/usage/v7/menu/type/index.md
new file mode 100644
index 00000000000..d0fc312baa1
--- /dev/null
+++ b/static/usage/v7/menu/type/index.md
@@ -0,0 +1,25 @@
+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_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/v7/menu/type/javascript.md b/static/usage/v7/menu/type/javascript.md
new file mode 100644
index 00000000000..24dc49cf906
--- /dev/null
+++ b/static/usage/v7/menu/type/javascript.md
@@ -0,0 +1,57 @@
+```html
+
+
+
+ Menu Content
+
+
+
+
+ Click to close the menu
+
+
+
+
+
+
+
+ Menu
+
+
+
+ Select an overlay type:
+
+
+
+ overlay
+
+
+
+
+
+ reveal
+
+
+
+
+
+ push
+
+
+
+
+
+ Click to open the menu
+
+
+
+
+
+```
diff --git a/static/usage/v7/menu/type/react.md b/static/usage/v7/menu/type/react.md
new file mode 100644
index 00000000000..806e67e21a2
--- /dev/null
+++ b/static/usage/v7/menu/type/react.md
@@ -0,0 +1,78 @@
+```tsx
+import React, { useState } from 'react';
+import {
+ IonButton,
+ IonContent,
+ IonHeader,
+ IonItem,
+ IonLabel,
+ IonMenu,
+ IonMenuToggle,
+ IonPage,
+ IonRadio,
+ IonRadioGroup,
+ IonTitle,
+ IonToolbar
+} from '@ionic/react';
+import type { RadioGroupCustomEvent } from '@ionic/react';
+
+function Example() {
+ const [menuType, setMenuType] = useState('overlay');
+
+ return (
+ <>
+
+
+
+ Menu Content
+
+
+
+
+ Click to close the menu
+
+
+
+
+
+
+ Menu
+
+
+
+ Select an overlay type:
+ {
+ setMenuType(ev.detail.value);
+ }}
+ >
+
+
+ overlay
+
+
+
+
+
+ reveal
+
+
+
+
+
+ push
+
+
+
+
+
+ Click to open the menu
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/menu/type/vue.md b/static/usage/v7/menu/type/vue.md
new file mode 100644
index 00000000000..2abcb137577
--- /dev/null
+++ b/static/usage/v7/menu/type/vue.md
@@ -0,0 +1,90 @@
+```html
+
+
+
+
+ Menu Content
+
+
+
+
+ Click to close the menu
+
+
+
+
+
+
+
+ Menu
+
+
+
+ Select an overlay type:
+
+
+
+ overlay
+
+
+
+
+
+ reveal
+
+
+
+
+
+ push
+
+
+
+
+
+ Click to open the menu
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/modal/can-dismiss/boolean/angular/example_component_html.md b/static/usage/v7/modal/can-dismiss/boolean/angular/example_component_html.md
new file mode 100644
index 00000000000..60d566d3437
--- /dev/null
+++ b/static/usage/v7/modal/can-dismiss/boolean/angular/example_component_html.md
@@ -0,0 +1,31 @@
+```html
+
+
+
+ App
+
+
+
+ Open
+
+
+
+
+ Modal
+
+ Close
+
+
+
+
+ You must accept the terms and conditions to close this modal.
+
+ Do you accept the terms and conditions?
+
+
+
+
+
+
+
+
+
+ App
+
+
+
+ Open
+
+
+
+
+ Modal
+
+ Close
+
+
+
+
+ You must accept the terms and conditions to close this modal.
+
+ Do you accept the terms and conditions?
+
+
+
+
+
+
+
+
+ App
+
+
+
+ Open
+
+
+
+
+ Modal
+
+ Close
+
+
+
+
+ You must accept the terms and conditions to close this modal.
+
+ Do you accept the terms and conditions?
+
+
+
+
+
+
You must accept the terms and conditions to close this modal.
+
+
+ Do you accept the terms and conditions?
+
+ {
+ setCanDismiss(ev.detail.checked);
+ }}
+ >
+
+
+
+
+
+ );
+}
+
+export default Example;
+```
diff --git a/static/usage/v7/modal/can-dismiss/boolean/vue.md b/static/usage/v7/modal/can-dismiss/boolean/vue.md
new file mode 100644
index 00000000000..4aeded0aef7
--- /dev/null
+++ b/static/usage/v7/modal/can-dismiss/boolean/vue.md
@@ -0,0 +1,83 @@
+```html
+
+
+
+
+ App
+
+
+
+ Open
+
+
+
+
+ Modal
+
+ Close
+
+
+
+
+ You must accept the terms and conditions to close this modal.
+
+ Do you accept the terms and conditions?
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/modal/can-dismiss/function/angular/example_component_html.md b/static/usage/v7/modal/can-dismiss/function/angular/example_component_html.md
new file mode 100644
index 00000000000..fa9ea513674
--- /dev/null
+++ b/static/usage/v7/modal/can-dismiss/function/angular/example_component_html.md
@@ -0,0 +1,27 @@
+```html
+
+
+
+ App
+
+
+
+ Open
+
+
+
+
+ Modal
+
+ Close
+
+
+
+
+ You will be prompted when closing this modal.
+
+
+
+
+
+
+
+ App
+
+
+
+ Open
+
+
+
+
+ Modal
+
+ Close
+
+
+
+
+ You will be prompted when closing this modal.
+
+
+
+
+
+
+ App
+
+
+
+ Open
+
+
+
+
+ Modal
+
+ Close
+
+
+
+
+ You will be prompted when closing this modal.
+
+
+
+
You will be prompted when closing this modal.
+
+
+
+
+ );
+}
+
+export default Example;
+```
diff --git a/static/usage/v7/modal/can-dismiss/function/vue.md b/static/usage/v7/modal/can-dismiss/function/vue.md
new file mode 100644
index 00000000000..cdf51c892ac
--- /dev/null
+++ b/static/usage/v7/modal/can-dismiss/function/vue.md
@@ -0,0 +1,78 @@
+```html
+
+
+
+
+ App
+
+
+
+ Open
+
+
+
+
+ Modal
+
+ Close
+
+
+
+
+ You will be prompted when closing this modal.
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/modal/card/basic/angular/example_component_html.md b/static/usage/v7/modal/card/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..e292718e706
--- /dev/null
+++ b/static/usage/v7/modal/card/basic/angular/example_component_html.md
@@ -0,0 +1,65 @@
+```html
+
+
+
+ App
+
+
+
+ Open Card Modal
+
+
+
+
+
+ Modal
+
+ Close
+
+
+
+
+
+
+
+
+
+
+ Connor Smith
+ Sales Rep
+
+
+
+
+
+
+
+ Daniel Smith
+ Product Designer
+
+
+
+
+
+
+
+ Greg Smith
+ Director of Operations
+
+
+
+
+
+
+
+ Zoey Smith
+ CEO
+
+
+
+
+
+
+
+
+
+
+ App
+
+
+
+ Open Card Modal
+
+
+
+
+ Modal
+
+ Close
+
+
+
+
+
+
+
+
+
+
+ Connor Smith
+ Sales Rep
+
+
+
+
+
+
+
+ Daniel Smith
+ Product Designer
+
+
+
+
+
+
+
+ Greg Smith
+ Director of Operations
+
+
+
+
+
+
+
+ Zoey Smith
+ CEO
+
+
+
+
+
+
+
+
+
+ App
+
+
+
+ Open Card Modal
+
+
+
+
+ Modal
+
+ Close
+
+
+
+
+
+
+
+
+
+
+ Connor Smith
+ Sales Rep
+
+
+
+
+
+
+
+ Daniel Smith
+ Product Designer
+
+
+
+
+
+
+
+ Greg Smith
+ Director of Operations
+
+
+
+
+
+
+
+ Zoey Smith
+ CEO
+
+
+
+
+
+
+
Connor Smith
+ Sales Rep
+
+
+
+
+
+
+
+ Daniel Smith
+ Product Designer
+
+
+
+
+
+
+
+ Greg Smith
+ Director of Operations
+
+
+
+
+
+
+
+ Zoey Smith
+ CEO
+
+
+
+
+
+
+
+ );
+}
+
+export default Example;
+```
diff --git a/static/usage/v7/modal/card/basic/vue.md b/static/usage/v7/modal/card/basic/vue.md
new file mode 100644
index 00000000000..efd959cdd90
--- /dev/null
+++ b/static/usage/v7/modal/card/basic/vue.md
@@ -0,0 +1,115 @@
+```html
+
+
+
+
+ App
+
+
+
+ Open
+
+
+
+
+ Modal
+
+ Close
+
+
+
+
+
+
+
+
+
+
+ Connor Smith
+ Sales Rep
+
+
+
+
+
+
+
+ Daniel Smith
+ Product Designer
+
+
+
+
+
+
+
+ Greg Smith
+ Director of Operations
+
+
+
+
+
+
+
+ Zoey Smith
+ CEO
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/modal/controller/angular/app_module_ts.md b/static/usage/v7/modal/controller/angular/app_module_ts.md
new file mode 100644
index 00000000000..e9e4f00dff3
--- /dev/null
+++ b/static/usage/v7/modal/controller/angular/app_module_ts.md
@@ -0,0 +1,19 @@
+```ts
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { AppComponent } from './app.component';
+import { ExampleComponent } from './example.component';
+
+import { ModalExampleComponent } from './modal-example.component';
+
+@NgModule({
+ imports: [BrowserModule, FormsModule, IonicModule.forRoot({})],
+ declarations: [AppComponent, ExampleComponent, ModalExampleComponent],
+ bootstrap: [AppComponent],
+})
+export class AppModule {}
+```
diff --git a/static/usage/v7/modal/controller/angular/example_component_html.md b/static/usage/v7/modal/controller/angular/example_component_html.md
new file mode 100644
index 00000000000..1920bb7a4a0
--- /dev/null
+++ b/static/usage/v7/modal/controller/angular/example_component_html.md
@@ -0,0 +1,11 @@
+```html
+
+
+ Controller Modal
+
+
+
+ Open
+ {{ message }}
+
+```
diff --git a/static/usage/v7/modal/controller/angular/example_component_ts.md b/static/usage/v7/modal/controller/angular/example_component_ts.md
new file mode 100644
index 00000000000..920a2335257
--- /dev/null
+++ b/static/usage/v7/modal/controller/angular/example_component_ts.md
@@ -0,0 +1,29 @@
+```ts
+import { Component } from '@angular/core';
+
+import { ModalController } from '@ionic/angular';
+import { ModalExampleComponent } from './modal-example.component';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ message = 'This modal example uses the modalController to present and dismiss modals.';
+
+ constructor(private modalCtrl: ModalController) {}
+
+ async openModal() {
+ const modal = await this.modalCtrl.create({
+ component: ModalExampleComponent,
+ });
+ modal.present();
+
+ const { data, role } = await modal.onWillDismiss();
+
+ if (role === 'confirm') {
+ this.message = `Hello, ${data}!`;
+ }
+ }
+}
+```
diff --git a/static/usage/v7/modal/controller/angular/modal-example_component_html.md b/static/usage/v7/modal/controller/angular/modal-example_component_html.md
new file mode 100644
index 00000000000..34387a14d75
--- /dev/null
+++ b/static/usage/v7/modal/controller/angular/modal-example_component_html.md
@@ -0,0 +1,19 @@
+```html
+
+
+
+ Cancel
+
+ Welcome
+
+ Confirm
+
+
+
+
+
+ Your name
+
+
+
+```
diff --git a/static/usage/v7/modal/controller/angular/modal-example_component_ts.md b/static/usage/v7/modal/controller/angular/modal-example_component_ts.md
new file mode 100644
index 00000000000..621996015b4
--- /dev/null
+++ b/static/usage/v7/modal/controller/angular/modal-example_component_ts.md
@@ -0,0 +1,23 @@
+```ts
+import { Component } from '@angular/core';
+
+import { ModalController } from '@ionic/angular';
+
+@Component({
+ selector: 'app-modal-example',
+ templateUrl: 'modal-example.component.html',
+})
+export class ModalExampleComponent {
+ name: string;
+
+ constructor(private modalCtrl: ModalController) {}
+
+ cancel() {
+ return this.modalCtrl.dismiss(null, 'cancel');
+ }
+
+ confirm() {
+ return this.modalCtrl.dismiss(this.name, 'confirm');
+ }
+}
+```
diff --git a/static/usage/v7/modal/controller/demo.html b/static/usage/v7/modal/controller/demo.html
new file mode 100644
index 00000000000..67c8cd24fc6
--- /dev/null
+++ b/static/usage/v7/modal/controller/demo.html
@@ -0,0 +1,78 @@
+
+
+
+
+
+
+ Modal | Controller
+
+
+
+
+
+
+
+
+
+
+
+ Controller Modal
+
+
+
+ Open
+ This modal example uses the modalController to present and dismiss modals.
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/modal/controller/index.md b/static/usage/v7/modal/controller/index.md
new file mode 100644
index 00000000000..750bbe53efb
--- /dev/null
+++ b/static/usage/v7/modal/controller/index.md
@@ -0,0 +1,39 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+
+import vue_example from './vue/example_vue.md';
+import vue_modal from './vue/modal_vue.md';
+
+import angular_app_module_ts from './angular/app_module_ts.md';
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_modal_example_component_ts from './angular/modal-example_component_ts.md';
+import angular_modal_example_component_html from './angular/modal-example_component_html.md';
+
+
diff --git a/static/usage/v7/modal/controller/javascript.md b/static/usage/v7/modal/controller/javascript.md
new file mode 100644
index 00000000000..dc4786be8cf
--- /dev/null
+++ b/static/usage/v7/modal/controller/javascript.md
@@ -0,0 +1,57 @@
+```html
+
+
+ Controller Modal
+
+
+
+ Open
+ This modal example uses the modalController to present and dismiss modals.
+
+
+
+```
diff --git a/static/usage/v7/modal/controller/react.md b/static/usage/v7/modal/controller/react.md
new file mode 100644
index 00000000000..8af5d61f855
--- /dev/null
+++ b/static/usage/v7/modal/controller/react.md
@@ -0,0 +1,83 @@
+```tsx
+import React, { useState, useRef } from 'react';
+import {
+ IonButtons,
+ IonButton,
+ IonHeader,
+ IonContent,
+ IonToolbar,
+ IonTitle,
+ IonPage,
+ IonItem,
+ IonLabel,
+ IonInput,
+ useIonModal,
+} from '@ionic/react';
+import { OverlayEventDetail } from '@ionic/core/components';
+
+const ModalExample = ({
+ onDismiss,
+}: {
+ onDismiss: (data?: string | null | undefined | number, role?: string) => void;
+}) => {
+ const inputRef = useRef(null);
+ return (
+
+
+
+
+ onDismiss(null, 'cancel')}>
+ Cancel
+
+
+ Welcome
+
+ onDismiss(inputRef.current?.value, 'confirm')}>Confirm
+
+
+
+
+
+ Enter your name
+
+
+
+
+ );
+};
+
+function Example() {
+ const [present, dismiss] = useIonModal(ModalExample, {
+ onDismiss: (data: string, role: string) => dismiss(data, role),
+ });
+ const [message, setMessage] = useState('This modal example uses the modalController to present and dismiss modals.');
+
+ function openModal() {
+ present({
+ onWillDismiss: (ev: CustomEvent) => {
+ if (ev.detail.role === 'confirm') {
+ setMessage(`Hello, ${ev.detail.data}!`);
+ }
+ },
+ });
+ }
+
+ return (
+
+
+
+ Controller Modal
+
+
+
+ openModal()}>
+ Open
+
+ {message}
+
+
+ );
+}
+
+export default Example;
+```
diff --git a/static/usage/v7/modal/controller/vue/example_vue.md b/static/usage/v7/modal/controller/vue/example_vue.md
new file mode 100644
index 00000000000..1b98547ac47
--- /dev/null
+++ b/static/usage/v7/modal/controller/vue/example_vue.md
@@ -0,0 +1,43 @@
+```html
+
+
+
+
+ Controller Modal
+
+
+
+ Open Modal
+ {{ message }}
+
+
+
+
+
+```
diff --git a/static/usage/v7/modal/controller/vue/modal_vue.md b/static/usage/v7/modal/controller/vue/modal_vue.md
new file mode 100644
index 00000000000..fb25c458a6e
--- /dev/null
+++ b/static/usage/v7/modal/controller/vue/modal_vue.md
@@ -0,0 +1,50 @@
+```html
+
+
+
+
+ Cancel
+
+ Modal
+
+ Confirm
+
+
+
+
+
+ Your name
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/modal/custom-dialogs/angular/example_component_html.md b/static/usage/v7/modal/custom-dialogs/angular/example_component_html.md
new file mode 100644
index 00000000000..d8f43b4b55d
--- /dev/null
+++ b/static/usage/v7/modal/custom-dialogs/angular/example_component_html.md
@@ -0,0 +1,33 @@
+```html
+
+
+ App
+
+
+
+ Open Custom Dialog
+
+
+
+
+
Dialog header
+
+
+
+
+ Item 1
+
+
+
+ Item 2
+
+
+
+ Item 3
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/modal/custom-dialogs/angular/global_css.md b/static/usage/v7/modal/custom-dialogs/angular/global_css.md
new file mode 100644
index 00000000000..3edb76f1e97
--- /dev/null
+++ b/static/usage/v7/modal/custom-dialogs/angular/global_css.md
@@ -0,0 +1,28 @@
+```css
+ion-modal#example-modal {
+ --width: fit-content;
+ --min-width: 250px;
+ --height: fit-content;
+ --border-radius: 6px;
+ --box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);
+}
+
+ion-modal#example-modal h1 {
+ margin: 20px 20px 10px 20px;
+}
+
+ion-modal#example-modal ion-icon {
+ margin-right: 6px;
+
+ width: 48px;
+ height: 48px;
+
+ padding: 4px 0;
+
+ color: #aaaaaa;
+}
+
+ion-modal#example-modal .wrapper {
+ margin-bottom: 10px;
+}
+```
diff --git a/static/usage/v7/modal/custom-dialogs/demo.html b/static/usage/v7/modal/custom-dialogs/demo.html
new file mode 100644
index 00000000000..95149828ba7
--- /dev/null
+++ b/static/usage/v7/modal/custom-dialogs/demo.html
@@ -0,0 +1,83 @@
+
+
+
+
+
+
+ Modal | Custom Dialog
+
+
+
+
+
+
+
+
+
+
+
+ App
+
+
+
+ Open Custom Dialog
+
+
+
+
Dialog header
+
+
+
+
+ Item 1
+
+
+
+ Item 2
+
+
+
+ Item 3
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/modal/custom-dialogs/index.md b/static/usage/v7/modal/custom-dialogs/index.md
new file mode 100644
index 00000000000..2aec2d39f33
--- /dev/null
+++ b/static/usage/v7/modal/custom-dialogs/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import angular_global_css from './angular/global_css.md';
+import angular_example_component_html from './angular/example_component_html.md';
+
+
diff --git a/static/usage/v7/modal/custom-dialogs/javascript.md b/static/usage/v7/modal/custom-dialogs/javascript.md
new file mode 100644
index 00000000000..b465debd41b
--- /dev/null
+++ b/static/usage/v7/modal/custom-dialogs/javascript.md
@@ -0,0 +1,67 @@
+```html
+
+
+
+
+ App
+
+
+
+ Open Custom Dialog
+
+
+
+
Dialog header
+
+
+
+
+ Item 1
+
+
+
+ Item 2
+
+
+
+ Item 3
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/modal/custom-dialogs/react/main_css.md b/static/usage/v7/modal/custom-dialogs/react/main_css.md
new file mode 100644
index 00000000000..3edb76f1e97
--- /dev/null
+++ b/static/usage/v7/modal/custom-dialogs/react/main_css.md
@@ -0,0 +1,28 @@
+```css
+ion-modal#example-modal {
+ --width: fit-content;
+ --min-width: 250px;
+ --height: fit-content;
+ --border-radius: 6px;
+ --box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);
+}
+
+ion-modal#example-modal h1 {
+ margin: 20px 20px 10px 20px;
+}
+
+ion-modal#example-modal ion-icon {
+ margin-right: 6px;
+
+ width: 48px;
+ height: 48px;
+
+ padding: 4px 0;
+
+ color: #aaaaaa;
+}
+
+ion-modal#example-modal .wrapper {
+ margin-bottom: 10px;
+}
+```
diff --git a/static/usage/v7/modal/custom-dialogs/react/main_tsx.md b/static/usage/v7/modal/custom-dialogs/react/main_tsx.md
new file mode 100644
index 00000000000..b60d3f275ab
--- /dev/null
+++ b/static/usage/v7/modal/custom-dialogs/react/main_tsx.md
@@ -0,0 +1,64 @@
+```tsx
+import React, { useRef } from 'react';
+import {
+ IonButton,
+ IonModal,
+ IonHeader,
+ IonContent,
+ IonToolbar,
+ IonTitle,
+ IonPage,
+ IonList,
+ IonItem,
+ IonLabel,
+ IonIcon,
+} from '@ionic/react';
+import { personCircle } from 'ionicons/icons';
+
+import './main.css';
+
+function Example() {
+ const modal = useRef(null);
+
+ function dismiss() {
+ modal.current?.dismiss();
+ }
+
+ return (
+
+
+
+ App
+
+
+
+
+ Open Custom Dialog
+
+
+
+
Dialog header
+
+
+
+
+ Item 1
+
+
+
+ Item 2
+
+
+
+ Item 3
+
+
+
+
+
+
+ );
+}
+
+export default Example;
+```
diff --git a/static/usage/v7/modal/custom-dialogs/vue.md b/static/usage/v7/modal/custom-dialogs/vue.md
new file mode 100644
index 00000000000..f910bc061e4
--- /dev/null
+++ b/static/usage/v7/modal/custom-dialogs/vue.md
@@ -0,0 +1,102 @@
+```html
+
+
+
+
+
+ App
+
+
+
+ Open Custom Dialog
+
+
+
+
Dialog header
+
+
+
+
+ Item 1
+
+
+
+ Item 2
+
+
+
+ Item 3
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/modal/inline/basic/angular/example_component_html.md b/static/usage/v7/modal/inline/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..d89c7626f3d
--- /dev/null
+++ b/static/usage/v7/modal/inline/basic/angular/example_component_html.md
@@ -0,0 +1,32 @@
+```html
+
+
+ Inline Modal
+
+
+
+ Open
+ {{ message }}
+
+
+
+
+
+ Cancel
+
+ Welcome
+
+ Confirm
+
+
+
+
+
+ Enter your name
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/modal/inline/basic/angular/example_component_ts.md b/static/usage/v7/modal/inline/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..a21954ec5f1
--- /dev/null
+++ b/static/usage/v7/modal/inline/basic/angular/example_component_ts.md
@@ -0,0 +1,31 @@
+```ts
+import { Component, ViewChild } from '@angular/core';
+import { IonModal } from '@ionic/angular';
+import { OverlayEventDetail } from '@ionic/core/components';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ @ViewChild(IonModal) modal: IonModal;
+
+ message = 'This modal example uses triggers to automatically open a modal when the button is clicked.';
+ name: string;
+
+ cancel() {
+ this.modal.dismiss(null, 'cancel');
+ }
+
+ confirm() {
+ this.modal.dismiss(this.name, 'confirm');
+ }
+
+ onWillDismiss(event: Event) {
+ const ev = event as CustomEvent>;
+ if (ev.detail.role === 'confirm') {
+ this.message = `Hello, ${ev.detail.data}!`;
+ }
+ }
+}
+```
diff --git a/static/usage/v7/modal/inline/basic/demo.html b/static/usage/v7/modal/inline/basic/demo.html
new file mode 100644
index 00000000000..4007d9fc2be
--- /dev/null
+++ b/static/usage/v7/modal/inline/basic/demo.html
@@ -0,0 +1,67 @@
+
+
+
+
+
+
+ Modal | Inline
+
+
+
+
+
+
+
+
+
+
+ Inline Modal
+
+
+
+ Open
+ This modal example uses triggers to automatically open a modal when the button is clicked.
+
+
+
+
+ Cancel
+
+ Welcome
+
+ Confirm
+
+
+
+
+
+ Enter your name
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/modal/inline/basic/index.md b/static/usage/v7/modal/inline/basic/index.md
new file mode 100644
index 00000000000..1406cd29c09
--- /dev/null
+++ b/static/usage/v7/modal/inline/basic/index.md
@@ -0,0 +1,26 @@
+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_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/v7/modal/inline/basic/javascript.md b/static/usage/v7/modal/inline/basic/javascript.md
new file mode 100644
index 00000000000..cffa297eebd
--- /dev/null
+++ b/static/usage/v7/modal/inline/basic/javascript.md
@@ -0,0 +1,50 @@
+```html
+
+
+ Inline Modal
+
+
+
+ Open
+ This modal example uses triggers to automatically open a modal when the button is clicked.
+
+
+
+
+ Cancel
+
+ Welcome
+
+ Confirm
+
+
+
+
+
+ Enter your name
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/modal/inline/basic/react.md b/static/usage/v7/modal/inline/basic/react.md
new file mode 100644
index 00000000000..aa465052e4c
--- /dev/null
+++ b/static/usage/v7/modal/inline/basic/react.md
@@ -0,0 +1,75 @@
+```tsx
+import React, { useState, useRef } from 'react';
+import {
+ IonButtons,
+ IonButton,
+ IonModal,
+ IonHeader,
+ IonContent,
+ IonToolbar,
+ IonTitle,
+ IonPage,
+ IonItem,
+ IonLabel,
+ IonInput,
+} from '@ionic/react';
+import { OverlayEventDetail } from '@ionic/core/components';
+
+function Example() {
+ const modal = useRef(null);
+ const input = useRef(null);
+
+ const [message, setMessage] = useState(
+ 'This modal example uses triggers to automatically open a modal when the button is clicked.'
+ );
+
+ function confirm() {
+ modal.current?.dismiss(input.current?.value, 'confirm');
+ }
+
+ function onWillDismiss(ev: CustomEvent) {
+ if (ev.detail.role === 'confirm') {
+ setMessage(`Hello, ${ev.detail.data}!`);
+ }
+ }
+
+ return (
+
+
+
+ Inline Modal
+
+
+
+
+ Open
+
+ {message}
+ onWillDismiss(ev)}>
+
+
+
+ modal.current?.dismiss()}>Cancel
+
+ Welcome
+
+ confirm()}>
+ Confirm
+
+
+
+
+
+
+ Enter your name
+
+
+
+
+
+
+ );
+}
+
+export default Example;
+```
diff --git a/static/usage/v7/modal/inline/basic/vue.md b/static/usage/v7/modal/inline/basic/vue.md
new file mode 100644
index 00000000000..2e0b1c4746c
--- /dev/null
+++ b/static/usage/v7/modal/inline/basic/vue.md
@@ -0,0 +1,83 @@
+```html
+
+
+
+ Inline Modal
+
+
+
+ Open
+ {{ message }}
+
+
+
+
+ Cancel
+
+ Welcome
+
+ Confirm
+
+
+
+
+
+ Enter your name
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/modal/inline/is-open/angular/example_component_html.md b/static/usage/v7/modal/inline/is-open/angular/example_component_html.md
new file mode 100644
index 00000000000..b3be96215c3
--- /dev/null
+++ b/static/usage/v7/modal/inline/is-open/angular/example_component_html.md
@@ -0,0 +1,29 @@
+```html
+
+
+ Inline Modal
+
+
+
+ Open
+
+
+
+
+ Modal
+
+ Close
+
+
+
+
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni illum quidem recusandae ducimus quos
+ reprehenderit. Veniam, molestias quos, dolorum consequuntur nisi deserunt omnis id illo sit cum qui. Eaque,
+ dicta.
+
+
+
+
+
+```
diff --git a/static/usage/v7/modal/inline/is-open/angular/example_component_ts.md b/static/usage/v7/modal/inline/is-open/angular/example_component_ts.md
new file mode 100644
index 00000000000..321577939a9
--- /dev/null
+++ b/static/usage/v7/modal/inline/is-open/angular/example_component_ts.md
@@ -0,0 +1,15 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ isModalOpen = false;
+
+ setOpen(isOpen: boolean) {
+ this.isModalOpen = isOpen;
+ }
+}
+```
diff --git a/static/usage/v7/modal/inline/is-open/demo.html b/static/usage/v7/modal/inline/is-open/demo.html
new file mode 100644
index 00000000000..ed5f3494869
--- /dev/null
+++ b/static/usage/v7/modal/inline/is-open/demo.html
@@ -0,0 +1,46 @@
+
+
+
+
+
+
+ Modal | Inline
+
+
+
+
+
+
+
+
+
+
+ Inline Modal
+
+
+
+ Open
+
+
+
+ Modal
+
+ Close
+
+
+
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni illum quidem recusandae ducimus quos
+ reprehenderit. Veniam, molestias quos, dolorum consequuntur nisi deserunt omnis id illo sit cum qui. Eaque,
+ dicta.
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/modal/inline/is-open/index.md b/static/usage/v7/modal/inline/is-open/index.md
new file mode 100644
index 00000000000..b77d9dd8a7a
--- /dev/null
+++ b/static/usage/v7/modal/inline/is-open/index.md
@@ -0,0 +1,26 @@
+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_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/v7/modal/inline/is-open/javascript.md b/static/usage/v7/modal/inline/is-open/javascript.md
new file mode 100644
index 00000000000..1893f105d79
--- /dev/null
+++ b/static/usage/v7/modal/inline/is-open/javascript.md
@@ -0,0 +1,31 @@
+```html
+
+
+ Inline Modal
+
+
+
+ Open
+
+
+
+ Modal
+
+ Close
+
+
+
+
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni illum quidem recusandae ducimus quos
+ reprehenderit. Veniam, molestias quos, dolorum consequuntur nisi deserunt omnis id illo sit cum qui. Eaque,
+ dicta.
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/modal/inline/is-open/react.md b/static/usage/v7/modal/inline/is-open/react.md
new file mode 100644
index 00000000000..7b337e8f4cc
--- /dev/null
+++ b/static/usage/v7/modal/inline/is-open/react.md
@@ -0,0 +1,42 @@
+```tsx
+import React, { useState } from 'react';
+import { IonButtons, IonButton, IonModal, IonHeader, IonContent, IonToolbar, IonTitle, IonPage } from '@ionic/react';
+
+function Example() {
+ const [isOpen, setIsOpen] = useState(false);
+
+ return (
+
+
+
+ Inline Modal
+
+
+
+ setIsOpen(true)}>
+ Open
+
+
+
+
+ Modal
+
+ setIsOpen(false)}>Close
+
+
+
+
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni illum quidem recusandae ducimus quos
+ reprehenderit. Veniam, molestias quos, dolorum consequuntur nisi deserunt omnis id illo sit cum qui.
+ Eaque, dicta.
+
+
+
+
+
+ );
+}
+
+export default Example;
+```
diff --git a/static/usage/v7/modal/inline/is-open/vue.md b/static/usage/v7/modal/inline/is-open/vue.md
new file mode 100644
index 00000000000..c09025c1967
--- /dev/null
+++ b/static/usage/v7/modal/inline/is-open/vue.md
@@ -0,0 +1,49 @@
+```html
+
+
+
+ Inline Modal
+
+
+
+ Open
+
+
+
+
+ Modal
+
+ Close
+
+
+
+
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni illum quidem recusandae ducimus quos
+ reprehenderit. Veniam, molestias quos, dolorum consequuntur nisi deserunt omnis id illo sit cum qui. Eaque,
+ dicta.
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/modal/performance/mount/angular.md b/static/usage/v7/modal/performance/mount/angular.md
new file mode 100644
index 00000000000..3afd202d33b
--- /dev/null
+++ b/static/usage/v7/modal/performance/mount/angular.md
@@ -0,0 +1,25 @@
+```html
+
+
+ Example
+
+
+
+ Open Modal
+
+
+
+
+
+ Cancel
+
+ Modal
+
+
+
+ This content was mounted as soon as the modal was created.
+
+
+
+
+```
diff --git a/static/usage/v7/modal/performance/mount/demo.html b/static/usage/v7/modal/performance/mount/demo.html
new file mode 100644
index 00000000000..fa84100fda3
--- /dev/null
+++ b/static/usage/v7/modal/performance/mount/demo.html
@@ -0,0 +1,51 @@
+
+
+
+
+
+
+ Modal | Performance
+
+
+
+
+
+
+
+
+
+
+ Example
+
+
+
+ Open Modal
+
+
+
+
+ Close
+
+ Modal
+
+
+
+ This content was mounted as soon as the modal was created.
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/modal/performance/mount/index.md b/static/usage/v7/modal/performance/mount/index.md
new file mode 100644
index 00000000000..16018d41230
--- /dev/null
+++ b/static/usage/v7/modal/performance/mount/index.md
@@ -0,0 +1,19 @@
+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/modal/performance/mount/javascript.md b/static/usage/v7/modal/performance/mount/javascript.md
new file mode 100644
index 00000000000..a7dd685dad4
--- /dev/null
+++ b/static/usage/v7/modal/performance/mount/javascript.md
@@ -0,0 +1,32 @@
+```html
+
+
+ Example
+
+
+
+ Open Modal
+
+
+
+
+ Close
+
+ Modal
+
+
+ This content was mounted as soon as the modal was created.
+
+
+
+
+```
diff --git a/static/usage/v7/modal/performance/mount/react.md b/static/usage/v7/modal/performance/mount/react.md
new file mode 100644
index 00000000000..5b50612291b
--- /dev/null
+++ b/static/usage/v7/modal/performance/mount/react.md
@@ -0,0 +1,47 @@
+```tsx
+import React, { useRef } from 'react';
+import {
+ IonButtons,
+ IonButton,
+ IonModal,
+ IonHeader,
+ IonContent,
+ IonToolbar,
+ IonTitle,
+ IonPage,
+} from '@ionic/react';
+
+function Example() {
+ const modal = useRef(null);
+
+ return (
+
+
+
+ Example
+
+
+
+
+ Open Modal
+
+
+
+
+
+ modal.current?.dismiss()}>Close
+
+ Modal
+
+
+
+ This content was mounted as soon as the modal was created.
+
+
+
+
+ );
+}
+
+export default Example;
+```
diff --git a/static/usage/v7/modal/performance/mount/vue.md b/static/usage/v7/modal/performance/mount/vue.md
new file mode 100644
index 00000000000..515229dde25
--- /dev/null
+++ b/static/usage/v7/modal/performance/mount/vue.md
@@ -0,0 +1,55 @@
+```html
+
+
+
+ Example
+
+
+
+ Open Modal
+
+
+
+
+ Cancel
+
+ Modal
+
+
+
+ This content was mounted as soon as the modal was created.
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/modal/sheet/background-content/angular/example_component_css.md b/static/usage/v7/modal/sheet/background-content/angular/example_component_css.md
new file mode 100644
index 00000000000..8730cae2d21
--- /dev/null
+++ b/static/usage/v7/modal/sheet/background-content/angular/example_component_css.md
@@ -0,0 +1,7 @@
+```css
+.counter__section {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+```
diff --git a/static/usage/v7/modal/sheet/background-content/angular/example_component_html.md b/static/usage/v7/modal/sheet/background-content/angular/example_component_html.md
new file mode 100644
index 00000000000..286c8e66487
--- /dev/null
+++ b/static/usage/v7/modal/sheet/background-content/angular/example_component_html.md
@@ -0,0 +1,72 @@
+```html
+
+
+
+ App
+
+
+
+ You can interact with the +/- buttons until the sheet is fully expanded.
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Connor Smith
+ Sales Rep
+
+
+
+
+
+
+
+ Daniel Smith
+ Product Designer
+
+
+
+
+
+
+
+ Greg Smith
+ Director of Operations
+
+
+
+
+
+
+
+ Zoey Smith
+ CEO
+
+
+
+
+
+
+
+
You can interact with the +/- buttons until the sheet is fully expanded.
+
+
+
+
+
+
+
+
+
+
+
+
+ Connor Smith
+ Sales Rep
+
+
+
+
+
+
+
+ Daniel Smith
+ Product Designer
+
+
+
+
+
+
+
+ Greg Smith
+ Director of Operations
+
+
+
+
+
+
+
+ Zoey Smith
+ CEO
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/modal/sheet/background-content/index.md b/static/usage/v7/modal/sheet/background-content/index.md
new file mode 100644
index 00000000000..5cd5560d122
--- /dev/null
+++ b/static/usage/v7/modal/sheet/background-content/index.md
@@ -0,0 +1,28 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+import react from './react.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+
diff --git a/static/usage/v7/modal/sheet/background-content/javascript.md b/static/usage/v7/modal/sheet/background-content/javascript.md
new file mode 100644
index 00000000000..7d58104e6dd
--- /dev/null
+++ b/static/usage/v7/modal/sheet/background-content/javascript.md
@@ -0,0 +1,89 @@
+```html
+
+
+
+
+ App
+
+
+
+ You can interact with the +/- buttons until the sheet is fully expanded.
+
+
+
+
+
+
+
+
+
+
+
+
+ Connor Smith
+ Sales Rep
+
+
+
+
+
+
+
+ Daniel Smith
+ Product Designer
+
+
+
+
+
+
+
+ Greg Smith
+ Director of Operations
+
+
+
+
+
+
+
+ Zoey Smith
+ CEO
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/modal/sheet/background-content/react.md b/static/usage/v7/modal/sheet/background-content/react.md
new file mode 100644
index 00000000000..e6325909f99
--- /dev/null
+++ b/static/usage/v7/modal/sheet/background-content/react.md
@@ -0,0 +1,100 @@
+```tsx
+import React, { useRef, useState } from 'react';
+import {
+ IonButton,
+ IonModal,
+ IonHeader,
+ IonContent,
+ IonToolbar,
+ IonTitle,
+ IonPage,
+ IonList,
+ IonItem,
+ IonLabel,
+ IonAvatar,
+ IonImg,
+ IonSearchbar,
+} from '@ionic/react';
+
+function Example() {
+ const modal = useRef(null);
+ const [count, setCount] = useState(0);
+
+ return (
+
+
+
+ App
+
+
+
+ You can interact with the +/- buttons until the sheet is fully expanded.
+
+
setCount(count - 1)}>-
+
{count}
+
setCount(count + 1)}>+
+
Connor Smith
+ Sales Rep
+
+
+
+
+
+
+
+ Daniel Smith
+ Product Designer
+
+
+
+
+
+
+
+ Greg Smith
+ Director of Operations
+
+
+
+
+
+
+
+ Zoey Smith
+ CEO
+
+
+
+
+
+
+
+ );
+}
+
+export default Example;
+```
diff --git a/static/usage/v7/modal/sheet/background-content/vue.md b/static/usage/v7/modal/sheet/background-content/vue.md
new file mode 100644
index 00000000000..e2647c4902c
--- /dev/null
+++ b/static/usage/v7/modal/sheet/background-content/vue.md
@@ -0,0 +1,126 @@
+```html
+
+
+
+
+
+ App
+
+
+
+ You can interact with the +/- buttons until the sheet is fully expanded.
+
+
+
+
+
+
+
+
+
+
+
+
+ Connor Smith
+ Sales Rep
+
+
+
+
+
+
+
+ Daniel Smith
+ Product Designer
+
+
+
+
+
+
+
+ Greg Smith
+ Director of Operations
+
+
+
+
+
+
+
+ Zoey Smith
+ CEO
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/modal/sheet/basic/angular.md b/static/usage/v7/modal/sheet/basic/angular.md
new file mode 100644
index 00000000000..6561e311463
--- /dev/null
+++ b/static/usage/v7/modal/sheet/basic/angular.md
@@ -0,0 +1,56 @@
+```html
+
+
+ App
+
+
+
+ Open Sheet Modal
+
+
+
+
+
+
+
+
+
+
+
+ Connor Smith
+ Sales Rep
+
+
+
+
+
+
+
+ Daniel Smith
+ Product Designer
+
+
+
+
+
+
+
+ Greg Smith
+ Director of Operations
+
+
+
+
+
+
+
+ Zoey Smith
+ CEO
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/modal/sheet/basic/demo.html b/static/usage/v7/modal/sheet/basic/demo.html
new file mode 100644
index 00000000000..65be6a2ceab
--- /dev/null
+++ b/static/usage/v7/modal/sheet/basic/demo.html
@@ -0,0 +1,82 @@
+
+
+
+
+
+
+ Modal | Sheet
+
+
+
+
+
+
+
+
+
+
+ App
+
+
+
+ Open Sheet Modal
+
+
+
+
+
+
+
+
+
+
+ Connor Smith
+ Sales Rep
+
+
+
+
+
+
+
+ Daniel Smith
+ Product Designer
+
+
+
+
+
+
+
+ Greg Smith
+ Director of Operations
+
+
+
+
+
+
+
+ Zoey Smith
+ CEO
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/modal/sheet/basic/index.md b/static/usage/v7/modal/sheet/basic/index.md
new file mode 100644
index 00000000000..837a75b0494
--- /dev/null
+++ b/static/usage/v7/modal/sheet/basic/index.md
@@ -0,0 +1,19 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+import react from './react.md';
+import angular from './angular.md';
+
+
diff --git a/static/usage/v7/modal/sheet/basic/javascript.md b/static/usage/v7/modal/sheet/basic/javascript.md
new file mode 100644
index 00000000000..2fb52ea2242
--- /dev/null
+++ b/static/usage/v7/modal/sheet/basic/javascript.md
@@ -0,0 +1,65 @@
+```html
+
+
+ App
+
+
+
+ Open Sheet Modal
+
+
+
+
+
+
+
+
+
+
+ Connor Smith
+ Sales Rep
+
+
+
+
+
+
+
+ Daniel Smith
+ Product Designer
+
+
+
+
+
+
+
+ Greg Smith
+ Director of Operations
+
+
+
+
+
+
+
+ Zoey Smith
+ CEO
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/modal/sheet/basic/react.md b/static/usage/v7/modal/sheet/basic/react.md
new file mode 100644
index 00000000000..4d813d1783f
--- /dev/null
+++ b/static/usage/v7/modal/sheet/basic/react.md
@@ -0,0 +1,82 @@
+```tsx
+import React, { useRef } from 'react';
+import {
+ IonButton,
+ IonModal,
+ IonHeader,
+ IonContent,
+ IonToolbar,
+ IonTitle,
+ IonPage,
+ IonList,
+ IonItem,
+ IonLabel,
+ IonAvatar,
+ IonImg,
+ IonSearchbar,
+} from '@ionic/react';
+
+function Example() {
+ const modal = useRef(null);
+
+ return (
+
+
+
+ App
+
+
+
+
+ Open Sheet Modal
+
+
+
+ modal.current?.setCurrentBreakpoint(0.75)} placeholder="Search">
+
+
+
+
+
+
+ Connor Smith
+ Sales Rep
+
+
+
+
+
+
+
+ Daniel Smith
+ Product Designer
+
+
+
+
+
+
+
+ Greg Smith
+ Director of Operations
+
+
+
+
+
+
+
+ Zoey Smith
+ CEO
+
+
+
+
+
+
+
+ );
+}
+
+export default Example;
+```
diff --git a/static/usage/v7/modal/sheet/basic/vue.md b/static/usage/v7/modal/sheet/basic/vue.md
new file mode 100644
index 00000000000..69ac1179b2e
--- /dev/null
+++ b/static/usage/v7/modal/sheet/basic/vue.md
@@ -0,0 +1,91 @@
+```html
+
+
+
+ App
+
+
+
+ Open Sheet Modal
+
+
+
+
+
+
+
+
+
+
+ Connor Smith
+ Sales Rep
+
+
+
+
+
+
+
+ Daniel Smith
+ Product Designer
+
+
+
+
+
+
+
+ Greg Smith
+ Director of Operations
+
+
+
+
+
+
+
+ Zoey Smith
+ CEO
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/modal/sheet/handle-behavior/angular.md b/static/usage/v7/modal/sheet/handle-behavior/angular.md
new file mode 100644
index 00000000000..d6f30b1ca8f
--- /dev/null
+++ b/static/usage/v7/modal/sheet/handle-behavior/angular.md
@@ -0,0 +1,25 @@
+```html
+
+
+ App
+
+
+
+ Open Sheet Modal
+
+
+
+
+
+ Click the handle above to advance to the next breakpoint.
+
+
+
+
+
+```
diff --git a/static/usage/v7/modal/sheet/handle-behavior/demo.html b/static/usage/v7/modal/sheet/handle-behavior/demo.html
new file mode 100644
index 00000000000..c89417e7ecf
--- /dev/null
+++ b/static/usage/v7/modal/sheet/handle-behavior/demo.html
@@ -0,0 +1,41 @@
+
+
+
+
+
+
+ Modal | Sheet
+
+
+
+
+
+
+
+
+
+
+ App
+
+
+
+ Open Sheet Modal
+
+
+
+
+ Click the handle above to advance to the next breakpoint.
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/modal/sheet/handle-behavior/index.md b/static/usage/v7/modal/sheet/handle-behavior/index.md
new file mode 100644
index 00000000000..11ed9f04493
--- /dev/null
+++ b/static/usage/v7/modal/sheet/handle-behavior/index.md
@@ -0,0 +1,19 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+import react from './react.md';
+import angular from './angular.md';
+
+
diff --git a/static/usage/v7/modal/sheet/handle-behavior/javascript.md b/static/usage/v7/modal/sheet/handle-behavior/javascript.md
new file mode 100644
index 00000000000..8215dd69636
--- /dev/null
+++ b/static/usage/v7/modal/sheet/handle-behavior/javascript.md
@@ -0,0 +1,24 @@
+```html
+
+
+ App
+
+
+
+ Open Sheet Modal
+
+
+
+
+ Click the handle above to advance to the next breakpoint.
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/modal/sheet/handle-behavior/react.md b/static/usage/v7/modal/sheet/handle-behavior/react.md
new file mode 100644
index 00000000000..bb415ae6bb2
--- /dev/null
+++ b/static/usage/v7/modal/sheet/handle-behavior/react.md
@@ -0,0 +1,35 @@
+```tsx
+import React from 'react';
+import { IonButton, IonModal, IonHeader, IonContent, IonToolbar, IonTitle, IonPage, IonLabel } from '@ionic/react';
+
+function Example() {
+ return (
+
+
+
+ App
+
+
+
+
+ Open Sheet Modal
+
+
+
+
+ Click the handle above to advance to the next breakpoint.
+
+
+
+
+
+ );
+}
+
+export default Example;
+```
diff --git a/static/usage/v7/modal/sheet/handle-behavior/vue.md b/static/usage/v7/modal/sheet/handle-behavior/vue.md
new file mode 100644
index 00000000000..e40321f52b8
--- /dev/null
+++ b/static/usage/v7/modal/sheet/handle-behavior/vue.md
@@ -0,0 +1,42 @@
+```html
+
+
+
+ App
+
+
+
+ Open Sheet Modal
+
+
+
+
+ Click the handle above to advance to the next breakpoint.
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/modal/styling/animations/angular/example_component_html.md b/static/usage/v7/modal/styling/animations/angular/example_component_html.md
new file mode 100644
index 00000000000..befb0873d45
--- /dev/null
+++ b/static/usage/v7/modal/styling/animations/angular/example_component_html.md
@@ -0,0 +1,63 @@
+```html
+
+
+ App
+
+
+
+ Open Modal
+
+
+
+
+
+ Modal
+
+ Close
+
+
+
+
+
+
+
+
+
+
+ Connor Smith
+ Sales Rep
+
+
+
+
+
+
+
+ Daniel Smith
+ Product Designer
+
+
+
+
+
+
+
+ Greg Smith
+ Director of Operations
+
+
+
+
+
+
+
+ Zoey Smith
+ CEO
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/modal/styling/animations/angular/example_component_ts.md b/static/usage/v7/modal/styling/animations/angular/example_component_ts.md
new file mode 100644
index 00000000000..c4a743b2745
--- /dev/null
+++ b/static/usage/v7/modal/styling/animations/angular/example_component_ts.md
@@ -0,0 +1,40 @@
+```ts
+import { Component } from '@angular/core';
+import { AnimationController } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ constructor(private animationCtrl: AnimationController) {}
+
+ enterAnimation = (baseEl: HTMLElement) => {
+ const root = baseEl.shadowRoot;
+
+ const backdropAnimation = this.animationCtrl
+ .create()
+ .addElement(root.querySelector('ion-backdrop')!)
+ .fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
+
+ const wrapperAnimation = this.animationCtrl
+ .create()
+ .addElement(root.querySelector('.modal-wrapper')!)
+ .keyframes([
+ { offset: 0, opacity: '0', transform: 'scale(0)' },
+ { offset: 1, opacity: '0.99', transform: 'scale(1)' },
+ ]);
+
+ return this.animationCtrl
+ .create()
+ .addElement(baseEl)
+ .easing('ease-out')
+ .duration(500)
+ .addAnimation([backdropAnimation, wrapperAnimation]);
+ };
+
+ leaveAnimation = (baseEl: HTMLElement) => {
+ return this.enterAnimation(baseEl).direction('reverse');
+ };
+}
+```
diff --git a/static/usage/v7/modal/styling/animations/demo.html b/static/usage/v7/modal/styling/animations/demo.html
new file mode 100644
index 00000000000..555667996c4
--- /dev/null
+++ b/static/usage/v7/modal/styling/animations/demo.html
@@ -0,0 +1,117 @@
+
+
+
+
+
+
+ Modal | Animations
+
+
+
+
+
+
+
+
+
+
+
+
+ App
+
+
+
+ Open Modal
+
+
+
+
+ Modal
+
+ Close
+
+
+
+
+
+
+
+
+
+
+ Connor Smith
+ Sales Rep
+
+
+
+
+
+
+
+ Daniel Smith
+ Product Designer
+
+
+
+
+
+
+
+ Greg Smith
+ Director of Operations
+
+
+
+
+
+
+
+ Zoey Smith
+ CEO
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/modal/styling/animations/index.md b/static/usage/v7/modal/styling/animations/index.md
new file mode 100644
index 00000000000..71a8d6519dd
--- /dev/null
+++ b/static/usage/v7/modal/styling/animations/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import vue from './vue.md';
+import react from './react.md';
+
+import javascript_index_html from './javascript/index_html.md';
+import javascript_index_ts from './javascript/index_ts.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/v7/modal/styling/animations/javascript/index_html.md b/static/usage/v7/modal/styling/animations/javascript/index_html.md
new file mode 100644
index 00000000000..0eb4709069f
--- /dev/null
+++ b/static/usage/v7/modal/styling/animations/javascript/index_html.md
@@ -0,0 +1,106 @@
+```html
+
+
+
+
+
+
+
+
+
+
+ App
+
+
+
+ Open Modal
+
+
+
+
+ Modal
+
+ Close
+
+
+
+
+
+
+
+
+
+
+ Connor Smith
+ Sales Rep
+
+
+
+
+
+
+
+ Daniel Smith
+ Product Designer
+
+
+
+
+
+
+
+ Greg Smith
+ Director of Operations
+
+
+
+
+
+
+
+ Zoey Smith
+ CEO
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/modal/styling/animations/javascript/index_ts.md b/static/usage/v7/modal/styling/animations/javascript/index_ts.md
new file mode 100644
index 00000000000..c2f8d9eb485
--- /dev/null
+++ b/static/usage/v7/modal/styling/animations/javascript/index_ts.md
@@ -0,0 +1,9 @@
+```ts
+import { defineCustomElements } from '@ionic/core/loader';
+
+import { createAnimation } from '@ionic/core';
+
+defineCustomElements();
+
+(window as any).createAnimation = createAnimation;
+```
diff --git a/static/usage/v7/modal/styling/animations/react.md b/static/usage/v7/modal/styling/animations/react.md
new file mode 100644
index 00000000000..06dfa9d70ff
--- /dev/null
+++ b/static/usage/v7/modal/styling/animations/react.md
@@ -0,0 +1,123 @@
+```tsx
+import React, { useRef } from 'react';
+import {
+ createAnimation,
+ IonButtons,
+ IonButton,
+ IonModal,
+ IonHeader,
+ IonContent,
+ IonToolbar,
+ IonTitle,
+ IonPage,
+ IonList,
+ IonItem,
+ IonLabel,
+ IonAvatar,
+ IonImg,
+} from '@ionic/react';
+
+function Example() {
+ const modal = useRef(null);
+
+ function dismiss() {
+ modal.current?.dismiss();
+ }
+
+ const enterAnimation = (baseEl: HTMLElement) => {
+ const root = baseEl.shadowRoot;
+
+ const backdropAnimation = createAnimation()
+ .addElement(root?.querySelector('ion-backdrop')!)
+ .fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
+
+ const wrapperAnimation = createAnimation()
+ .addElement(root?.querySelector('.modal-wrapper')!)
+ .keyframes([
+ { offset: 0, opacity: '0', transform: 'scale(0)' },
+ { offset: 1, opacity: '0.99', transform: 'scale(1)' },
+ ]);
+
+ return createAnimation()
+ .addElement(baseEl)
+ .easing('ease-out')
+ .duration(500)
+ .addAnimation([backdropAnimation, wrapperAnimation]);
+ };
+
+ const leaveAnimation = (baseEl: HTMLElement) => {
+ return enterAnimation(baseEl).direction('reverse');
+ };
+
+ return (
+
+
+
+ App
+
+
+
+
+ Open Modal
+
+
+
+
+ Modal
+
+ dismiss()}>Close
+
+
+
+
+
+
+
+
+ Connor Smith
+ Sales Rep
+
+
+
+
+
+
+
+ Daniel Smith
+ Product Designer
+
+
+
+
+
+
+
+ Greg Smith
+ Director of Operations
+
+
+
+
+
+
+
+ Zoey Smith
+ CEO
+
+
+
+
+
+
+
+ );
+}
+
+export default Example;
+```
diff --git a/static/usage/v7/modal/styling/animations/vue.md b/static/usage/v7/modal/styling/animations/vue.md
new file mode 100644
index 00000000000..8a15e8444fc
--- /dev/null
+++ b/static/usage/v7/modal/styling/animations/vue.md
@@ -0,0 +1,129 @@
+```html
+
+
+
+ App
+
+
+
+ Open Modal
+
+
+
+
+ Modal
+
+ Close
+
+
+
+
+
+
+
+
+ Connor Smith
+ Sales Rep
+
+
+
+
+
+
+
+ Daniel Smith
+ Product Designer
+
+
+
+
+
+
+
+ Greg Smith
+ Director of Operations
+
+
+
+
+
+
+
+ Zoey Smith
+ CEO
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/modal/styling/theming/angular/example_component_html.md b/static/usage/v7/modal/styling/theming/angular/example_component_html.md
new file mode 100644
index 00000000000..2d18a6f26d9
--- /dev/null
+++ b/static/usage/v7/modal/styling/theming/angular/example_component_html.md
@@ -0,0 +1,61 @@
+```html
+
+
+ App
+
+
+
+ Open Modal
+
+
+
+
+
+ Modal
+
+ Close
+
+
+
+
+
+
+
+
+ Connor Smith
+ Sales Rep
+
+
+
+
+
+
+
+ Daniel Smith
+ Product Designer
+
+
+
+
+
+
+
+ Greg Smith
+ Director of Operations
+
+
+
+
+
+
+
+ Zoey Smith
+ CEO
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/modal/styling/theming/angular/global_css.md b/static/usage/v7/modal/styling/theming/angular/global_css.md
new file mode 100644
index 00000000000..00b7c80f86d
--- /dev/null
+++ b/static/usage/v7/modal/styling/theming/angular/global_css.md
@@ -0,0 +1,17 @@
+```css
+ion-modal {
+ --height: 50%;
+ --border-radius: 16px;
+ --box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+}
+
+ion-modal::part(backdrop) {
+ background: rgba(209, 213, 219);
+ opacity: 1;
+}
+
+ion-modal ion-toolbar {
+ --background: rgb(14 116 144);
+ --color: white;
+}
+```
diff --git a/static/usage/v7/modal/styling/theming/demo.html b/static/usage/v7/modal/styling/theming/demo.html
new file mode 100644
index 00000000000..f0c3f00bbe4
--- /dev/null
+++ b/static/usage/v7/modal/styling/theming/demo.html
@@ -0,0 +1,101 @@
+
+
+
+
+
+
+ Modal | Theming
+
+
+
+
+
+
+
+
+
+
+
+ App
+
+
+
+ Open Modal
+
+
+
+
+ Modal
+
+ Close
+
+
+
+
+
+
+
+
+ Connor Smith
+ Sales Rep
+
+
+
+
+
+
+
+ Daniel Smith
+ Product Designer
+
+
+
+
+
+
+
+ Greg Smith
+ Director of Operations
+
+
+
+
+
+
+
+ Zoey Smith
+ CEO
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/modal/styling/theming/index.md b/static/usage/v7/modal/styling/theming/index.md
new file mode 100644
index 00000000000..3d0ebd17096
--- /dev/null
+++ b/static/usage/v7/modal/styling/theming/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import angular_global_css from './angular/global_css.md';
+import angular_example_component_html from './angular/example_component_html.md';
+
+
diff --git a/static/usage/v7/modal/styling/theming/javascript.md b/static/usage/v7/modal/styling/theming/javascript.md
new file mode 100644
index 00000000000..cb63f145ad9
--- /dev/null
+++ b/static/usage/v7/modal/styling/theming/javascript.md
@@ -0,0 +1,87 @@
+```html
+
+
+
+
+
+ App
+
+
+
+ Open Modal
+
+
+
+
+ Modal
+
+ Close
+
+
+
+
+
+
+
+
+ Connor Smith
+ Sales Rep
+
+
+
+
+
+
+
+ Daniel Smith
+ Product Designer
+
+
+
+
+
+
+
+ Greg Smith
+ Director of Operations
+
+
+
+
+
+
+
+ Zoey Smith
+ CEO
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/modal/styling/theming/react/main_css.md b/static/usage/v7/modal/styling/theming/react/main_css.md
new file mode 100644
index 00000000000..c1d585b8f72
--- /dev/null
+++ b/static/usage/v7/modal/styling/theming/react/main_css.md
@@ -0,0 +1,17 @@
+```css
+ion-modal#example-modal {
+ --height: 50%;
+ --border-radius: 16px;
+ --box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+}
+
+ion-modal#example-modal::part(backdrop) {
+ background: rgba(209, 213, 219);
+ opacity: 1;
+}
+
+ion-modal#example-modal ion-toolbar {
+ --background: rgb(14 116 144);
+ --color: white;
+}
+```
diff --git a/static/usage/v7/modal/styling/theming/react/main_tsx.md b/static/usage/v7/modal/styling/theming/react/main_tsx.md
new file mode 100644
index 00000000000..7c8509879ab
--- /dev/null
+++ b/static/usage/v7/modal/styling/theming/react/main_tsx.md
@@ -0,0 +1,95 @@
+```tsx
+import React, { useRef } from 'react';
+import {
+ IonButtons,
+ IonButton,
+ IonModal,
+ IonHeader,
+ IonContent,
+ IonToolbar,
+ IonTitle,
+ IonPage,
+ IonList,
+ IonItem,
+ IonLabel,
+ IonAvatar,
+ IonImg,
+} from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ const modal = useRef(null);
+
+ function dismiss() {
+ modal.current?.dismiss();
+ }
+
+ return (
+
+
+
+ App
+
+
+
+
+ Open Modal
+
+
+
+
+ Modal
+
+ dismiss()}>
+ Close
+
+
+
+
+
+
+
+
+
+ Connor Smith
+ Sales Rep
+
+
+
+
+
+
+
+ Daniel Smith
+ Product Designer
+
+
+
+
+
+
+
+ Greg Smith
+ Director of Operations
+
+
+
+
+
+
+
+ Zoey Smith
+ CEO
+
+
+
+
+
+
+
+ );
+}
+
+export default Example;
+```
diff --git a/static/usage/v7/modal/styling/theming/vue.md b/static/usage/v7/modal/styling/theming/vue.md
new file mode 100644
index 00000000000..7dc80157056
--- /dev/null
+++ b/static/usage/v7/modal/styling/theming/vue.md
@@ -0,0 +1,119 @@
+```html
+
+
+
+
+
+ App
+
+
+
+ Open Modal
+
+
+
+
+ Modal
+
+ Close
+
+
+
+
+
+
+
+
+ Connor Smith
+ Sales Rep
+
+
+
+
+
+
+
+ Daniel Smith
+ Product Designer
+
+
+
+
+
+
+
+ Greg Smith
+ Director of Operations
+
+
+
+
+
+
+
+ Zoey Smith
+ CEO
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/nav/modal-navigation/angular/app_module_ts.md b/static/usage/v7/nav/modal-navigation/angular/app_module_ts.md
new file mode 100644
index 00000000000..d3b8b44f6ce
--- /dev/null
+++ b/static/usage/v7/nav/modal-navigation/angular/app_module_ts.md
@@ -0,0 +1,21 @@
+```ts
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+
+import { AppComponent } from './app.component';
+import { ExampleComponent } from './example.component';
+
+import { PageOneComponent } from './page-one.component';
+import { PageTwoComponent } from './page-two.component';
+import { PageThreeComponent } from './page-three.component';
+
+@NgModule({
+ imports: [BrowserModule, RouterModule.forRoot([]), IonicModule.forRoot({})],
+ declarations: [AppComponent, ExampleComponent, PageOneComponent, PageTwoComponent, PageThreeComponent],
+ bootstrap: [AppComponent],
+})
+export class AppModule {}
+```
diff --git a/static/usage/v7/nav/modal-navigation/angular/example_component_html.md b/static/usage/v7/nav/modal-navigation/angular/example_component_html.md
new file mode 100644
index 00000000000..06d46334df5
--- /dev/null
+++ b/static/usage/v7/nav/modal-navigation/angular/example_component_html.md
@@ -0,0 +1,25 @@
+```html
+
+
+ Modal Navigation
+
+
+
+ Open Modal
+
+
+
+
+ Modal
+
+ Close
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/nav/modal-navigation/angular/example_component_ts.md b/static/usage/v7/nav/modal-navigation/angular/example_component_ts.md
new file mode 100644
index 00000000000..366dc7e246d
--- /dev/null
+++ b/static/usage/v7/nav/modal-navigation/angular/example_component_ts.md
@@ -0,0 +1,18 @@
+```ts
+import { Component, ViewChild } from '@angular/core';
+import { IonNav } from '@ionic/angular';
+
+import { PageOneComponent } from './page-one.component';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ @ViewChild('nav') private nav: IonNav;
+
+ onWillPresent() {
+ this.nav.setRoot(PageOneComponent);
+ }
+}
+```
diff --git a/static/usage/v7/nav/modal-navigation/angular/page_one_component_ts.md b/static/usage/v7/nav/modal-navigation/angular/page_one_component_ts.md
new file mode 100644
index 00000000000..3c9ec863d04
--- /dev/null
+++ b/static/usage/v7/nav/modal-navigation/angular/page_one_component_ts.md
@@ -0,0 +1,23 @@
+```ts
+import { Component } from '@angular/core';
+import { IonNav } from '@ionic/angular';
+
+import { PageTwoComponent } from './page-two.component';
+
+@Component({
+ selector: 'app-page-one',
+ template: `
+
+ Page One
+ Go to Page Two
+
+ `,
+})
+export class PageOneComponent {
+ constructor(private nav: IonNav) {}
+
+ navigateToPageTwo() {
+ this.nav.push(PageTwoComponent);
+ }
+}
+```
diff --git a/static/usage/v7/nav/modal-navigation/angular/page_three_component_ts.md b/static/usage/v7/nav/modal-navigation/angular/page_three_component_ts.md
new file mode 100644
index 00000000000..5b1b70c3474
--- /dev/null
+++ b/static/usage/v7/nav/modal-navigation/angular/page_three_component_ts.md
@@ -0,0 +1,26 @@
+```ts
+import { Component } from '@angular/core';
+import { IonNav } from '@ionic/angular';
+
+@Component({
+ selector: 'app-page-one',
+ template: `
+
+ Page Three
+ Go Back
+ Go to Root
+
+ `,
+})
+export class PageThreeComponent {
+ constructor(private nav: IonNav) {}
+
+ navigateBack() {
+ this.nav.pop();
+ }
+
+ navigateToRoot() {
+ this.nav.popToRoot();
+ }
+}
+```
diff --git a/static/usage/v7/nav/modal-navigation/angular/page_two_component_ts.md b/static/usage/v7/nav/modal-navigation/angular/page_two_component_ts.md
new file mode 100644
index 00000000000..0cd5713c062
--- /dev/null
+++ b/static/usage/v7/nav/modal-navigation/angular/page_two_component_ts.md
@@ -0,0 +1,25 @@
+```ts
+import { Component } from '@angular/core';
+import { IonNav } from '@ionic/angular';
+
+import { PageThreeComponent } from './page-three.component';
+
+@Component({
+ selector: 'app-page-two',
+ template: `
+
+ Page Two
+ Go to Page Three
+
+ `,
+})
+export class PageTwoComponent {
+ component = PageThreeComponent;
+
+ constructor(private nav: IonNav) {}
+
+ navigateToPageThree() {
+ this.nav.push(PageThreeComponent);
+ }
+}
+```
diff --git a/static/usage/v7/nav/modal-navigation/demo.html b/static/usage/v7/nav/modal-navigation/demo.html
new file mode 100644
index 00000000000..0d099f1e3cc
--- /dev/null
+++ b/static/usage/v7/nav/modal-navigation/demo.html
@@ -0,0 +1,106 @@
+
+
+
+
+
+
+
+ Nav | Modal Navigation
+
+
+
+
+
+
+
+
+
+
+ Modal Navigation
+
+
+
+ Open Modal
+
+
+
+ Modal
+
+
+ Close
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/nav/modal-navigation/index.md b/static/usage/v7/nav/modal-navigation/index.md
new file mode 100644
index 00000000000..73ce3215f66
--- /dev/null
+++ b/static/usage/v7/nav/modal-navigation/index.md
@@ -0,0 +1,56 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import angular_app_module_ts from './angular/app_module_ts.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_page_one_component_ts from './angular/page_one_component_ts.md';
+import angular_page_two_component_ts from './angular/page_two_component_ts.md';
+import angular_page_three_component_ts from './angular/page_three_component_ts.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_page_one_tsx from './react/page_one_tsx.md';
+import react_page_two_tsx from './react/page_two_tsx.md';
+import react_page_three_tsx from './react/page_three_tsx.md';
+
+import vue_example from './vue/example_vue.md';
+import vue_page_one from './vue/page_one_vue.md';
+import vue_page_two from './vue/page_two_vue.md';
+import vue_page_three from './vue/page_three_vue.md';
+
+
diff --git a/static/usage/v7/nav/modal-navigation/javascript.md b/static/usage/v7/nav/modal-navigation/javascript.md
new file mode 100644
index 00000000000..5fd4e9ef13a
--- /dev/null
+++ b/static/usage/v7/nav/modal-navigation/javascript.md
@@ -0,0 +1,86 @@
+```html
+
+
+
+ Modal Navigation
+
+
+
+ Open Modal
+
+
+
+ Modal
+
+ Close
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/nav/modal-navigation/react/main_tsx.md b/static/usage/v7/nav/modal-navigation/react/main_tsx.md
new file mode 100644
index 00000000000..fc6901b3d6d
--- /dev/null
+++ b/static/usage/v7/nav/modal-navigation/react/main_tsx.md
@@ -0,0 +1,60 @@
+```tsx
+import React, { useRef } from 'react';
+import {
+ IonNav,
+ IonPage,
+ IonHeader,
+ IonToolbar,
+ IonTitle,
+ IonButton,
+ IonButtons,
+ IonContent,
+ IonModal,
+} from '@ionic/react';
+
+import PageOne from './page-one';
+
+function Example() {
+ const nav = useRef(null);
+ const modal = useRef(null);
+
+ const didPresent = () => {
+ if (nav.current) {
+ nav.current.setRoot(PageOne, { nav: nav.current });
+ }
+ };
+
+ const dismiss = () => {
+ if (modal.current) {
+ modal.current.dismiss();
+ }
+ };
+
+ return (
+
+
+
+ Modal Navigation
+
+
+
+ Open Modal
+
+
+
+ Modal
+
+ Close
+
+
+
+
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/nav/modal-navigation/react/page_one_tsx.md b/static/usage/v7/nav/modal-navigation/react/page_one_tsx.md
new file mode 100644
index 00000000000..ce5c266e21b
--- /dev/null
+++ b/static/usage/v7/nav/modal-navigation/react/page_one_tsx.md
@@ -0,0 +1,18 @@
+```tsx
+import React from 'react';
+import { IonButton, IonContent } from '@ionic/react';
+
+import PageTwo from './page-two';
+
+function PageOne({ nav }: { nav: HTMLIonNavElement }) {
+ const navigateToPageTwo = () => nav.push(PageTwo, { nav });
+ return (
+
+ Page One
+ Go to Page Two
+
+ );
+}
+
+export default PageOne;
+```
diff --git a/static/usage/v7/nav/modal-navigation/react/page_three_tsx.md b/static/usage/v7/nav/modal-navigation/react/page_three_tsx.md
new file mode 100644
index 00000000000..3613967edfd
--- /dev/null
+++ b/static/usage/v7/nav/modal-navigation/react/page_three_tsx.md
@@ -0,0 +1,19 @@
+```tsx
+import React from 'react';
+import { IonButton, IonContent } from '@ionic/react';
+
+function PageThree({ nav }: { nav: HTMLIonNavElement }) {
+ const navigateBack = () => nav.pop();
+ const navigateToRoot = () => nav.popToRoot();
+
+ return (
+
+ Page Three
+ Go Back
+ Go to Root
+
+ );
+}
+
+export default PageThree;
+```
diff --git a/static/usage/v7/nav/modal-navigation/react/page_two_tsx.md b/static/usage/v7/nav/modal-navigation/react/page_two_tsx.md
new file mode 100644
index 00000000000..48562bd23cd
--- /dev/null
+++ b/static/usage/v7/nav/modal-navigation/react/page_two_tsx.md
@@ -0,0 +1,19 @@
+```tsx
+import React from 'react';
+import { IonButton, IonContent } from '@ionic/react';
+
+import PageThree from './page-three';
+
+function PageTwo({ nav }: { nav: HTMLIonNavElement }) {
+ const navigateToPageThree = () => nav.push(PageThree, { nav });
+
+ return (
+
+ Page Two
+ Go to Page Three
+
+ );
+}
+
+export default PageTwo;
+```
diff --git a/static/usage/v7/nav/modal-navigation/vue/example_vue.md b/static/usage/v7/nav/modal-navigation/vue/example_vue.md
new file mode 100644
index 00000000000..ad5242e5c06
--- /dev/null
+++ b/static/usage/v7/nav/modal-navigation/vue/example_vue.md
@@ -0,0 +1,60 @@
+```html
+
+
+
+
+ Modal Navigation
+
+
+
+ Open Modal
+
+
+
+ Modal
+
+ Close
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/nav/modal-navigation/vue/page_one_vue.md b/static/usage/v7/nav/modal-navigation/vue/page_one_vue.md
new file mode 100644
index 00000000000..94613725139
--- /dev/null
+++ b/static/usage/v7/nav/modal-navigation/vue/page_one_vue.md
@@ -0,0 +1,24 @@
+```html
+
+
+ Page One
+ Go to Page Two
+
+
+
+
+```
diff --git a/static/usage/v7/nav/modal-navigation/vue/page_three_vue.md b/static/usage/v7/nav/modal-navigation/vue/page_three_vue.md
new file mode 100644
index 00000000000..9dde8817996
--- /dev/null
+++ b/static/usage/v7/nav/modal-navigation/vue/page_three_vue.md
@@ -0,0 +1,28 @@
+```html
+
+
+ Page Three
+ Go Back
+ Go to Root
+
+
+
+
+```
diff --git a/static/usage/v7/nav/modal-navigation/vue/page_two_vue.md b/static/usage/v7/nav/modal-navigation/vue/page_two_vue.md
new file mode 100644
index 00000000000..737fa71158b
--- /dev/null
+++ b/static/usage/v7/nav/modal-navigation/vue/page_two_vue.md
@@ -0,0 +1,24 @@
+```html
+
+
+ Page Two
+ Go to Page Three
+
+
+
+
+```
diff --git a/static/usage/v7/nav/nav-link/angular/app_module_ts.md b/static/usage/v7/nav/nav-link/angular/app_module_ts.md
new file mode 100644
index 00000000000..d3b8b44f6ce
--- /dev/null
+++ b/static/usage/v7/nav/nav-link/angular/app_module_ts.md
@@ -0,0 +1,21 @@
+```ts
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+
+import { AppComponent } from './app.component';
+import { ExampleComponent } from './example.component';
+
+import { PageOneComponent } from './page-one.component';
+import { PageTwoComponent } from './page-two.component';
+import { PageThreeComponent } from './page-three.component';
+
+@NgModule({
+ imports: [BrowserModule, RouterModule.forRoot([]), IonicModule.forRoot({})],
+ declarations: [AppComponent, ExampleComponent, PageOneComponent, PageTwoComponent, PageThreeComponent],
+ bootstrap: [AppComponent],
+})
+export class AppModule {}
+```
diff --git a/static/usage/v7/nav/nav-link/angular/example_component_html.md b/static/usage/v7/nav/nav-link/angular/example_component_html.md
new file mode 100644
index 00000000000..1534ea3a6ec
--- /dev/null
+++ b/static/usage/v7/nav/nav-link/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v7/nav/nav-link/angular/example_component_ts.md b/static/usage/v7/nav/nav-link/angular/example_component_ts.md
new file mode 100644
index 00000000000..b123a4858ce
--- /dev/null
+++ b/static/usage/v7/nav/nav-link/angular/example_component_ts.md
@@ -0,0 +1,13 @@
+```ts
+import { Component } from '@angular/core';
+
+import { PageOneComponent } from './page-one.component';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ component = PageOneComponent;
+}
+```
diff --git a/static/usage/v7/nav/nav-link/angular/page_one_component_ts.md b/static/usage/v7/nav/nav-link/angular/page_one_component_ts.md
new file mode 100644
index 00000000000..06c42b342cf
--- /dev/null
+++ b/static/usage/v7/nav/nav-link/angular/page_one_component_ts.md
@@ -0,0 +1,25 @@
+```ts
+import { Component } from '@angular/core';
+
+import { PageTwoComponent } from './page-two.component';
+
+@Component({
+ selector: 'app-page-one',
+ template: `
+
+
+ Page One
+
+
+
+ Page One
+
+ Go to Page Two
+
+
+ `,
+})
+export class PageOneComponent {
+ component = PageTwoComponent;
+}
+```
diff --git a/static/usage/v7/nav/nav-link/angular/page_three_component_ts.md b/static/usage/v7/nav/nav-link/angular/page_three_component_ts.md
new file mode 100644
index 00000000000..d9e95ed7218
--- /dev/null
+++ b/static/usage/v7/nav/nav-link/angular/page_three_component_ts.md
@@ -0,0 +1,21 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-page-one',
+ template: `
+
+
+
+
+
+ Page Three
+
+
+
+ Page Three
+
+ `,
+})
+export class PageThreeComponent {}
+```
diff --git a/static/usage/v7/nav/nav-link/angular/page_two_component_ts.md b/static/usage/v7/nav/nav-link/angular/page_two_component_ts.md
new file mode 100644
index 00000000000..d6edd90a593
--- /dev/null
+++ b/static/usage/v7/nav/nav-link/angular/page_two_component_ts.md
@@ -0,0 +1,30 @@
+```ts
+import { Component } from '@angular/core';
+
+import { PageThreeComponent } from './page-three.component';
+
+@Component({
+ selector: 'app-page-two',
+ template: `
+
+
+
+
+
+ Page Two
+
+
+
+ Page Two
+
+
+ Go to Page Three
+
+
+
+ `,
+})
+export class PageTwoComponent {
+ component = PageThreeComponent;
+}
+```
diff --git a/static/usage/v7/nav/nav-link/demo.html b/static/usage/v7/nav/nav-link/demo.html
new file mode 100644
index 00000000000..9d8aa06c58f
--- /dev/null
+++ b/static/usage/v7/nav/nav-link/demo.html
@@ -0,0 +1,84 @@
+
+
+
+
+
+
+
+ Nav | NavLink
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/nav/nav-link/index.md b/static/usage/v7/nav/nav-link/index.md
new file mode 100644
index 00000000000..de4e4e01562
--- /dev/null
+++ b/static/usage/v7/nav/nav-link/index.md
@@ -0,0 +1,55 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import angular_app_module_ts from './angular/app_module_ts.md';
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_page_one_component_ts from './angular/page_one_component_ts.md';
+import angular_page_two_component_ts from './angular/page_two_component_ts.md';
+import angular_page_three_component_ts from './angular/page_three_component_ts.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_page_one_tsx from './react/page_one_tsx.md';
+import react_page_two_tsx from './react/page_two_tsx.md';
+import react_page_three_tsx from './react/page_three_tsx.md';
+
+import vue_example from './vue/example_vue.md';
+import vue_page_one from './vue/page_one_vue.md';
+import vue_page_two from './vue/page_two_vue.md';
+import vue_page_three from './vue/page_three_vue.md';
+
+
diff --git a/static/usage/v7/nav/nav-link/javascript.md b/static/usage/v7/nav/nav-link/javascript.md
new file mode 100644
index 00000000000..faf19dc3ca7
--- /dev/null
+++ b/static/usage/v7/nav/nav-link/javascript.md
@@ -0,0 +1,67 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v7/nav/nav-link/react/main_tsx.md b/static/usage/v7/nav/nav-link/react/main_tsx.md
new file mode 100644
index 00000000000..f6196a362e9
--- /dev/null
+++ b/static/usage/v7/nav/nav-link/react/main_tsx.md
@@ -0,0 +1,11 @@
+```tsx
+import React from 'react';
+import { IonNav } from '@ionic/react';
+
+import PageOne from './page-one';
+
+function Example() {
+ return }>;
+}
+export default Example;
+```
diff --git a/static/usage/v7/nav/nav-link/react/page_one_tsx.md b/static/usage/v7/nav/nav-link/react/page_one_tsx.md
new file mode 100644
index 00000000000..303ad18547a
--- /dev/null
+++ b/static/usage/v7/nav/nav-link/react/page_one_tsx.md
@@ -0,0 +1,26 @@
+```tsx
+import React from 'react';
+import { IonButton, IonHeader, IonContent, IonNavLink, IonToolbar, IonTitle } from '@ionic/react';
+
+import PageTwo from './page-two';
+
+function PageOne() {
+ return (
+ <>
+
+
+ Page One
+
+
+
+ Page One
+ }>
+ Go to Page Two
+
+
+
+ );
+}
+
+export default PageOne;
+```
diff --git a/static/usage/v7/nav/nav-link/react/page_three_tsx.md b/static/usage/v7/nav/nav-link/react/page_three_tsx.md
new file mode 100644
index 00000000000..451d30db85d
--- /dev/null
+++ b/static/usage/v7/nav/nav-link/react/page_three_tsx.md
@@ -0,0 +1,24 @@
+```tsx
+import React from 'react';
+import { IonBackButton, IonButtons, IonHeader, IonContent, IonToolbar, IonTitle } from '@ionic/react';
+
+function PageThree() {
+ return (
+ <>
+
+
+
+
+
+ Page Three
+
+
+
+ Page Three
+
+
+ );
+}
+
+export default PageThree;
+```
diff --git a/static/usage/v7/nav/nav-link/react/page_two_tsx.md b/static/usage/v7/nav/nav-link/react/page_two_tsx.md
new file mode 100644
index 00000000000..fd3f8764873
--- /dev/null
+++ b/static/usage/v7/nav/nav-link/react/page_two_tsx.md
@@ -0,0 +1,38 @@
+```tsx
+import React from 'react';
+import {
+ IonBackButton,
+ IonButtons,
+ IonButton,
+ IonHeader,
+ IonContent,
+ IonNavLink,
+ IonToolbar,
+ IonTitle,
+} from '@ionic/react';
+
+import PageThree from './page-three';
+
+function PageTwo() {
+ return (
+ <>
+
+
+
+
+
+ Page Two
+
+
+
+ Page Two
+ }>
+ Go to Page Three
+
+
+
+ );
+}
+
+export default PageTwo;
+```
diff --git a/static/usage/v7/nav/nav-link/vue/example_vue.md b/static/usage/v7/nav/nav-link/vue/example_vue.md
new file mode 100644
index 00000000000..ec054a80749
--- /dev/null
+++ b/static/usage/v7/nav/nav-link/vue/example_vue.md
@@ -0,0 +1,19 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v7/nav/nav-link/vue/page_one_vue.md b/static/usage/v7/nav/nav-link/vue/page_one_vue.md
new file mode 100644
index 00000000000..f3635e1db37
--- /dev/null
+++ b/static/usage/v7/nav/nav-link/vue/page_one_vue.md
@@ -0,0 +1,29 @@
+```html
+
+
+
+ Page One
+
+
+
+ Page One
+
+ Go to Page Two
+
+
+
+
+
+```
diff --git a/static/usage/v7/nav/nav-link/vue/page_three_vue.md b/static/usage/v7/nav/nav-link/vue/page_three_vue.md
new file mode 100644
index 00000000000..54d6acf24c9
--- /dev/null
+++ b/static/usage/v7/nav/nav-link/vue/page_three_vue.md
@@ -0,0 +1,23 @@
+```html
+
+
+
+
+
+
+ Page Three
+
+
+
+ Page Three
+
+
+
+
+```
diff --git a/static/usage/v7/nav/nav-link/vue/page_two_vue.md b/static/usage/v7/nav/nav-link/vue/page_two_vue.md
new file mode 100644
index 00000000000..0d736d69c88
--- /dev/null
+++ b/static/usage/v7/nav/nav-link/vue/page_two_vue.md
@@ -0,0 +1,50 @@
+```html
+
+
+
+
+
+
+ Page Two
+
+
+
+ Page Two
+
+ Go to Page Three
+
+
+
+
+
+```
diff --git a/static/usage/v7/note/basic/angular.md b/static/usage/v7/note/basic/angular.md
new file mode 100644
index 00000000000..2c59ef63faa
--- /dev/null
+++ b/static/usage/v7/note/basic/angular.md
@@ -0,0 +1,3 @@
+```html
+Default Note
+```
diff --git a/static/usage/v7/note/basic/demo.html b/static/usage/v7/note/basic/demo.html
new file mode 100644
index 00000000000..ae5b7ce7f04
--- /dev/null
+++ b/static/usage/v7/note/basic/demo.html
@@ -0,0 +1,25 @@
+
+
+
+
+
+
+ Note
+
+
+
+
+
+
+
+
+
+
+
+ Default Note
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/note/basic/index.md b/static/usage/v7/note/basic/index.md
new file mode 100644
index 00000000000..c1ff54b6c74
--- /dev/null
+++ b/static/usage/v7/note/basic/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/note/basic/javascript.md b/static/usage/v7/note/basic/javascript.md
new file mode 100644
index 00000000000..2c59ef63faa
--- /dev/null
+++ b/static/usage/v7/note/basic/javascript.md
@@ -0,0 +1,3 @@
+```html
+Default Note
+```
diff --git a/static/usage/v7/note/basic/react.md b/static/usage/v7/note/basic/react.md
new file mode 100644
index 00000000000..9f1cdb45225
--- /dev/null
+++ b/static/usage/v7/note/basic/react.md
@@ -0,0 +1,13 @@
+```tsx
+import React from 'react';
+import { IonNote } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+ Default Note
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/note/basic/vue.md b/static/usage/v7/note/basic/vue.md
new file mode 100644
index 00000000000..dffb1348fc9
--- /dev/null
+++ b/static/usage/v7/note/basic/vue.md
@@ -0,0 +1,14 @@
+```html
+
+ Default Note
+
+
+
+```
diff --git a/static/usage/v7/note/item/angular.md b/static/usage/v7/note/item/angular.md
new file mode 100644
index 00000000000..0d26cf33b27
--- /dev/null
+++ b/static/usage/v7/note/item/angular.md
@@ -0,0 +1,11 @@
+```html
+
+ Label
+ Note (End)
+
+
+
+ Note (Start)
+ Label
+
+```
diff --git a/static/usage/v7/note/item/demo.html b/static/usage/v7/note/item/demo.html
new file mode 100644
index 00000000000..3aea8507aa8
--- /dev/null
+++ b/static/usage/v7/note/item/demo.html
@@ -0,0 +1,38 @@
+
+
+
+
+
+
+ Note
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Label
+ Note (End)
+
+
+
+ Note (Start)
+ Label
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/note/item/index.md b/static/usage/v7/note/item/index.md
new file mode 100644
index 00000000000..5c32457e008
--- /dev/null
+++ b/static/usage/v7/note/item/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/note/item/javascript.md b/static/usage/v7/note/item/javascript.md
new file mode 100644
index 00000000000..0d26cf33b27
--- /dev/null
+++ b/static/usage/v7/note/item/javascript.md
@@ -0,0 +1,11 @@
+```html
+
+ Label
+ Note (End)
+
+
+
+ Note (Start)
+ Label
+
+```
diff --git a/static/usage/v7/note/item/react.md b/static/usage/v7/note/item/react.md
new file mode 100644
index 00000000000..422ba6eff85
--- /dev/null
+++ b/static/usage/v7/note/item/react.md
@@ -0,0 +1,21 @@
+```tsx
+import React from 'react';
+import { IonItem, IonLabel, IonNote } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+ Label
+ Note (End)
+
+
+
+ Note (Start)
+ Label
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/note/item/vue.md b/static/usage/v7/note/item/vue.md
new file mode 100644
index 00000000000..24b7add1ed1
--- /dev/null
+++ b/static/usage/v7/note/item/vue.md
@@ -0,0 +1,22 @@
+```html
+
+
+ Label
+ Note (End)
+
+
+
+ Note (Start)
+ Label
+
+
+
+
+```
diff --git a/static/usage/v7/note/theming/colors/angular.md b/static/usage/v7/note/theming/colors/angular.md
new file mode 100644
index 00000000000..2740648d5ad
--- /dev/null
+++ b/static/usage/v7/note/theming/colors/angular.md
@@ -0,0 +1,12 @@
+```html
+Default Note
+Primary Note
+Secondary Note
+Tertiary Note
+Success Note
+Warning Note
+Danger Note
+Light Note
+Medium Note
+Dark Note
+```
diff --git a/static/usage/v7/note/theming/colors/demo.html b/static/usage/v7/note/theming/colors/demo.html
new file mode 100644
index 00000000000..2564a686b1a
--- /dev/null
+++ b/static/usage/v7/note/theming/colors/demo.html
@@ -0,0 +1,49 @@
+
+
+
+
+
+
+ Note
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Default Note
+ Primary Note
+ Secondary Note
+ Tertiary Note
+ Success Note
+ Warning Note
+ Danger Note
+ Light Note
+ Medium Note
+ Dark Note
+
+
+ Default Note
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/note/theming/css-properties/index.md b/static/usage/v7/note/theming/css-properties/index.md
new file mode 100644
index 00000000000..07c1802c04b
--- /dev/null
+++ b/static/usage/v7/note/theming/css-properties/index.md
@@ -0,0 +1,32 @@
+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/note/theming/css-properties/javascript.md b/static/usage/v7/note/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..cc1bdeec421
--- /dev/null
+++ b/static/usage/v7/note/theming/css-properties/javascript.md
@@ -0,0 +1,9 @@
+```html
+
+
+Default Note
+```
diff --git a/static/usage/v7/note/theming/css-properties/react/main_css.md b/static/usage/v7/note/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..5f39ab9c48f
--- /dev/null
+++ b/static/usage/v7/note/theming/css-properties/react/main_css.md
@@ -0,0 +1,5 @@
+```css
+ion-note {
+ --color: #54dc98;
+}
+```
diff --git a/static/usage/v7/note/theming/css-properties/react/main_tsx.md b/static/usage/v7/note/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..798b6ab90d1
--- /dev/null
+++ b/static/usage/v7/note/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,15 @@
+```tsx
+import React from 'react';
+import { IonNote } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+ Default Note
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/note/theming/css-properties/vue.md b/static/usage/v7/note/theming/css-properties/vue.md
new file mode 100644
index 00000000000..77e8b361f2c
--- /dev/null
+++ b/static/usage/v7/note/theming/css-properties/vue.md
@@ -0,0 +1,20 @@
+```html
+
+ Default Note
+
+
+
+
+
+```
diff --git a/static/usage/v7/picker/controller/angular/example_component_html.md b/static/usage/v7/picker/controller/angular/example_component_html.md
new file mode 100644
index 00000000000..1e25fa99c40
--- /dev/null
+++ b/static/usage/v7/picker/controller/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+Open
+```
diff --git a/static/usage/v7/picker/controller/angular/example_component_ts.md b/static/usage/v7/picker/controller/angular/example_component_ts.md
new file mode 100644
index 00000000000..849da3f0f16
--- /dev/null
+++ b/static/usage/v7/picker/controller/angular/example_component_ts.md
@@ -0,0 +1,54 @@
+```ts
+import { Component } from '@angular/core';
+import { PickerController } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ constructor(private pickerCtrl: PickerController) {}
+
+ async openPicker() {
+ const picker = await this.pickerCtrl.create({
+ columns: [
+ {
+ name: 'languages',
+ options: [
+ {
+ text: 'JavaScript',
+ value: 'javascript',
+ },
+ {
+ text: 'TypeScript',
+ value: 'typescript',
+ },
+ {
+ text: 'Rust',
+ value: 'rust',
+ },
+ {
+ text: 'C#',
+ value: 'c#',
+ },
+ ],
+ },
+ ],
+ buttons: [
+ {
+ text: 'Cancel',
+ role: 'cancel',
+ },
+ {
+ text: 'Confirm',
+ handler: (value) => {
+ window.alert(`You selected: ${value.languages.value}`);
+ },
+ },
+ ],
+ });
+
+ await picker.present();
+ }
+}
+```
diff --git a/static/usage/v7/picker/controller/demo.html b/static/usage/v7/picker/controller/demo.html
new file mode 100644
index 00000000000..25d3cfc5662
--- /dev/null
+++ b/static/usage/v7/picker/controller/demo.html
@@ -0,0 +1,65 @@
+
+
+
+
+
+
+ Picker | Controller
+
+
+
+
+
+
+
+
+
+
+
+ Open
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/picker/controller/index.md b/static/usage/v7/picker/controller/index.md
new file mode 100644
index 00000000000..890436259bb
--- /dev/null
+++ b/static/usage/v7/picker/controller/index.md
@@ -0,0 +1,25 @@
+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_example_component_ts from './angular/example_component_ts.md';
+import angular_example_component_html from './angular/example_component_html.md';
+
+
diff --git a/static/usage/v7/picker/controller/javascript.md b/static/usage/v7/picker/controller/javascript.md
new file mode 100644
index 00000000000..ca15ad55132
--- /dev/null
+++ b/static/usage/v7/picker/controller/javascript.md
@@ -0,0 +1,46 @@
+```html
+Open
+
+
+```
diff --git a/static/usage/v7/picker/controller/react.md b/static/usage/v7/picker/controller/react.md
new file mode 100644
index 00000000000..d0c351a9368
--- /dev/null
+++ b/static/usage/v7/picker/controller/react.md
@@ -0,0 +1,52 @@
+```tsx
+import React from 'react';
+import { IonButton, useIonPicker } from '@ionic/react';
+
+function Example() {
+ const [present] = useIonPicker();
+
+ const openPicker = async () => {
+ present({
+ columns: [
+ {
+ name: 'languages',
+ options: [
+ {
+ text: 'JavaScript',
+ value: 'javascript',
+ },
+ {
+ text: 'TypeScript',
+ value: 'typescript',
+ },
+ {
+ text: 'Rust',
+ value: 'rust',
+ },
+ {
+ text: 'C#',
+ value: 'c#',
+ },
+ ],
+ },
+ ],
+ buttons: [
+ {
+ text: 'Cancel',
+ role: 'cancel',
+ },
+ {
+ text: 'Confirm',
+ handler: (value) => {
+ window.alert(`You selected: ${value.languages.value}`);
+ },
+ },
+ ],
+ });
+ };
+
+ return Open;
+}
+
+export default Example;
+```
diff --git a/static/usage/v7/picker/controller/vue.md b/static/usage/v7/picker/controller/vue.md
new file mode 100644
index 00000000000..71660c96aeb
--- /dev/null
+++ b/static/usage/v7/picker/controller/vue.md
@@ -0,0 +1,61 @@
+```html
+
+ Open
+
+
+
+```
diff --git a/static/usage/v7/picker/inline/isOpen/angular/example_component_html.md b/static/usage/v7/picker/inline/isOpen/angular/example_component_html.md
new file mode 100644
index 00000000000..da4d9f1584d
--- /dev/null
+++ b/static/usage/v7/picker/inline/isOpen/angular/example_component_html.md
@@ -0,0 +1,9 @@
+```html
+Open
+
+```
diff --git a/static/usage/v7/picker/inline/isOpen/angular/example_component_ts.md b/static/usage/v7/picker/inline/isOpen/angular/example_component_ts.md
new file mode 100644
index 00000000000..1c0f482b98f
--- /dev/null
+++ b/static/usage/v7/picker/inline/isOpen/angular/example_component_ts.md
@@ -0,0 +1,47 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ isPickerOpen = false;
+
+ public pickerColumns = [{
+ name: 'languages',
+ options: [
+ {
+ text: 'JavaScript',
+ value: 'javascript'
+ }, {
+ text: 'TypeScript',
+ value: 'typescript'
+ }, {
+ text: 'Rust',
+ value: 'rust'
+ }, {
+ text: 'C#',
+ value: 'c#'
+ }
+ ]
+ }];
+
+ public pickerButtons = [
+ {
+ text: 'Cancel',
+ role: 'cancel'
+ },
+ {
+ text: 'Confirm',
+ handler: (value) => {
+ window.alert(`You selected: ${value.languages.value}`);
+ }
+ }
+ ];
+
+ setOpen(isOpen: boolean) {
+ this.isPickerOpen = isOpen;
+ }
+}
+```
diff --git a/static/usage/v7/picker/inline/isOpen/demo.html b/static/usage/v7/picker/inline/isOpen/demo.html
new file mode 100644
index 00000000000..4a787ce459b
--- /dev/null
+++ b/static/usage/v7/picker/inline/isOpen/demo.html
@@ -0,0 +1,64 @@
+
+
+
+
+
+
+ Picker | isOpen
+
+
+
+
+
+
+
+
+
+
+ Open
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/picker/inline/isOpen/index.md b/static/usage/v7/picker/inline/isOpen/index.md
new file mode 100644
index 00000000000..34a92521bad
--- /dev/null
+++ b/static/usage/v7/picker/inline/isOpen/index.md
@@ -0,0 +1,25 @@
+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_example_component_ts from './angular/example_component_ts.md';
+import angular_example_component_html from './angular/example_component_html.md';
+
+
diff --git a/static/usage/v7/picker/inline/isOpen/javascript.md b/static/usage/v7/picker/inline/isOpen/javascript.md
new file mode 100644
index 00000000000..c06d97cbf81
--- /dev/null
+++ b/static/usage/v7/picker/inline/isOpen/javascript.md
@@ -0,0 +1,44 @@
+```html
+Open
+
+
+
+```
diff --git a/static/usage/v7/picker/inline/isOpen/react.md b/static/usage/v7/picker/inline/isOpen/react.md
new file mode 100644
index 00000000000..0e4c82f84d9
--- /dev/null
+++ b/static/usage/v7/picker/inline/isOpen/react.md
@@ -0,0 +1,52 @@
+```tsx
+import React, { useState } from 'react';
+import { IonButton, IonPicker } from '@ionic/react';
+
+function Example() {
+ const [isOpen, setIsOpen] = useState(false);
+
+ return (
+ <>
+ setIsOpen(true)}>Open
+ setIsOpen(false)}
+ columns={
+ [{
+ name: 'languages',
+ options: [
+ {
+ text: 'JavaScript',
+ value: 'javascript'
+ }, {
+ text: 'TypeScript',
+ value: 'typescript'
+ }, {
+ text: 'Rust',
+ value: 'rust'
+ }, {
+ text: 'C#',
+ value: 'c#'
+ }
+ ]
+ }]
+ }
+ buttons={[
+ {
+ text: 'Cancel',
+ role: 'cancel'
+ },
+ {
+ text: 'Confirm',
+ handler: (value) => {
+ window.alert(`You selected: ${value.languages.value}`);
+ }
+ }
+ ]}
+ >
+
+ );
+}
+
+export default Example;
+```
diff --git a/static/usage/v7/picker/inline/isOpen/vue.md b/static/usage/v7/picker/inline/isOpen/vue.md
new file mode 100644
index 00000000000..d806c4cc42d
--- /dev/null
+++ b/static/usage/v7/picker/inline/isOpen/vue.md
@@ -0,0 +1,61 @@
+```html
+
+ Open
+
+
+
+
+```
diff --git a/static/usage/v7/picker/inline/trigger/angular/example_component_html.md b/static/usage/v7/picker/inline/trigger/angular/example_component_html.md
new file mode 100644
index 00000000000..af47368a129
--- /dev/null
+++ b/static/usage/v7/picker/inline/trigger/angular/example_component_html.md
@@ -0,0 +1,8 @@
+```html
+Open
+
+```
diff --git a/static/usage/v7/picker/inline/trigger/angular/example_component_ts.md b/static/usage/v7/picker/inline/trigger/angular/example_component_ts.md
new file mode 100644
index 00000000000..ebd914649f4
--- /dev/null
+++ b/static/usage/v7/picker/inline/trigger/angular/example_component_ts.md
@@ -0,0 +1,41 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ public pickerColumns = [{
+ name: 'languages',
+ options: [
+ {
+ text: 'JavaScript',
+ value: 'javascript'
+ }, {
+ text: 'TypeScript',
+ value: 'typescript'
+ }, {
+ text: 'Rust',
+ value: 'rust'
+ }, {
+ text: 'C#',
+ value: 'c#'
+ }
+ ]
+ }];
+
+ public pickerButtons = [
+ {
+ text: 'Cancel',
+ role: 'cancel'
+ },
+ {
+ text: 'Confirm',
+ handler: (value) => {
+ window.alert(`You selected: ${value.languages.value}`);
+ }
+ }
+ ];
+}
+```
diff --git a/static/usage/v7/picker/inline/trigger/demo.html b/static/usage/v7/picker/inline/trigger/demo.html
new file mode 100644
index 00000000000..7423fd338db
--- /dev/null
+++ b/static/usage/v7/picker/inline/trigger/demo.html
@@ -0,0 +1,60 @@
+
+
+
+
+
+
+ Picker | Trigger
+
+
+
+
+
+
+
+
+
+
+ Open
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/picker/inline/trigger/index.md b/static/usage/v7/picker/inline/trigger/index.md
new file mode 100644
index 00000000000..1bd0ab3950f
--- /dev/null
+++ b/static/usage/v7/picker/inline/trigger/index.md
@@ -0,0 +1,25 @@
+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_example_component_ts from './angular/example_component_ts.md';
+import angular_example_component_html from './angular/example_component_html.md';
+
+
diff --git a/static/usage/v7/picker/inline/trigger/javascript.md b/static/usage/v7/picker/inline/trigger/javascript.md
new file mode 100644
index 00000000000..2b7a20eb138
--- /dev/null
+++ b/static/usage/v7/picker/inline/trigger/javascript.md
@@ -0,0 +1,40 @@
+```html
+Open
+
+
+
+```
diff --git a/static/usage/v7/picker/inline/trigger/react.md b/static/usage/v7/picker/inline/trigger/react.md
new file mode 100644
index 00000000000..ec20daef156
--- /dev/null
+++ b/static/usage/v7/picker/inline/trigger/react.md
@@ -0,0 +1,49 @@
+```tsx
+import React from 'react';
+import { IonButton, IonPicker } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+ Open
+ {
+ window.alert(`You selected: ${value.languages.value}`);
+ }
+ }
+ ]}
+ >
+
+ );
+}
+
+export default Example;
+```
diff --git a/static/usage/v7/picker/inline/trigger/vue.md b/static/usage/v7/picker/inline/trigger/vue.md
new file mode 100644
index 00000000000..d4681ff66f6
--- /dev/null
+++ b/static/usage/v7/picker/inline/trigger/vue.md
@@ -0,0 +1,54 @@
+```html
+
+ Open
+
+
+
+
+```
diff --git a/static/usage/v7/picker/multiple-column/angular/example_component_html.md b/static/usage/v7/picker/multiple-column/angular/example_component_html.md
new file mode 100644
index 00000000000..af47368a129
--- /dev/null
+++ b/static/usage/v7/picker/multiple-column/angular/example_component_html.md
@@ -0,0 +1,8 @@
+```html
+Open
+
+```
diff --git a/static/usage/v7/picker/multiple-column/angular/example_component_ts.md b/static/usage/v7/picker/multiple-column/angular/example_component_ts.md
new file mode 100644
index 00000000000..11cd65eb0fc
--- /dev/null
+++ b/static/usage/v7/picker/multiple-column/angular/example_component_ts.md
@@ -0,0 +1,66 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ public pickerColumns = [{
+ name: 'meat',
+ options: [
+ {
+ text: 'Pepperoni',
+ value: 'pepperoni'
+ }, {
+ text: 'Smoked Ham',
+ value: 'smoked-ham'
+ }, {
+ text: 'Crispy Bacon',
+ value: 'bacon'
+ }
+ ]
+ }, {
+ name: 'veggies',
+ options: [
+ {
+ text: 'Red onion',
+ value: 'red-onion'
+ }, {
+ text: 'Peppers',
+ value: 'peppers'
+ }, {
+ text: 'Black olives',
+ value: 'black-olives'
+ }
+ ]
+ }, {
+ name: 'crust',
+ options: [
+ {
+ text: 'Pan style',
+ value: 'pan'
+ }, {
+ text: 'Hand tossed',
+ value: 'hand-tossed'
+ }, {
+ text: 'Stuffed crust',
+ value: 'stuffed-crust'
+ }
+ ]
+ }];
+
+ public pickerButtons = [
+ {
+ text: 'Cancel',
+ role: 'cancel'
+ },
+ {
+ text: 'Confirm',
+ handler: (value) => {
+ window.alert(`You selected a ${value.crust.text} pizza with ${value.meat.text} and ${value.veggies.text}`);
+ }
+ }
+ ];
+}
+```
diff --git a/static/usage/v7/picker/multiple-column/demo.html b/static/usage/v7/picker/multiple-column/demo.html
new file mode 100644
index 00000000000..a192ba97ae7
--- /dev/null
+++ b/static/usage/v7/picker/multiple-column/demo.html
@@ -0,0 +1,85 @@
+
+
+
+
+
+
+ Picker | Multiple Columns
+
+
+
+
+
+
+
+
+
+
+ Open
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/picker/multiple-column/index.md b/static/usage/v7/picker/multiple-column/index.md
new file mode 100644
index 00000000000..48a6d1202fa
--- /dev/null
+++ b/static/usage/v7/picker/multiple-column/index.md
@@ -0,0 +1,25 @@
+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_example_component_ts from './angular/example_component_ts.md';
+import angular_example_component_html from './angular/example_component_html.md';
+
+
diff --git a/static/usage/v7/picker/multiple-column/javascript.md b/static/usage/v7/picker/multiple-column/javascript.md
new file mode 100644
index 00000000000..ad8e838a8c0
--- /dev/null
+++ b/static/usage/v7/picker/multiple-column/javascript.md
@@ -0,0 +1,65 @@
+```html
+Open
+
+
+
+```
diff --git a/static/usage/v7/picker/multiple-column/react.md b/static/usage/v7/picker/multiple-column/react.md
new file mode 100644
index 00000000000..cfa6465169e
--- /dev/null
+++ b/static/usage/v7/picker/multiple-column/react.md
@@ -0,0 +1,74 @@
+```tsx
+import React from 'react';
+import { IonButton, IonPicker } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+ Open
+ {
+ window.alert(`You selected a ${value.crust.text} pizza with ${value.meat.text} and ${value.veggies.text}`);
+ }
+ }
+ ]}
+ >
+
+ );
+}
+
+export default Example;
+```
diff --git a/static/usage/v7/picker/multiple-column/vue.md b/static/usage/v7/picker/multiple-column/vue.md
new file mode 100644
index 00000000000..df54238bf66
--- /dev/null
+++ b/static/usage/v7/picker/multiple-column/vue.md
@@ -0,0 +1,79 @@
+```html
+
+ Open
+
+
+
+
+```
diff --git a/static/usage/v7/popover/customization/positioning/angular/example_component_css.md b/static/usage/v7/popover/customization/positioning/angular/example_component_css.md
new file mode 100644
index 00000000000..c92d80212a7
--- /dev/null
+++ b/static/usage/v7/popover/customization/positioning/angular/example_component_css.md
@@ -0,0 +1,12 @@
+```css
+ion-popover {
+ --width: 80px;
+}
+
+.container {
+ align-items: center;
+ display: flex;
+ flex-direction: column;
+ padding: 80px;
+}
+```
\ No newline at end of file
diff --git a/static/usage/v7/popover/customization/positioning/angular/example_component_html.md b/static/usage/v7/popover/customization/positioning/angular/example_component_html.md
new file mode 100644
index 00000000000..a0036bd9ef9
--- /dev/null
+++ b/static/usage/v7/popover/customization/positioning/angular/example_component_html.md
@@ -0,0 +1,31 @@
+```html
+
+ Side=Top, Alignment=Center
+
+
+ Hello World!
+
+
+
+ Side=Bottom, Alignment=Start
+
+
+ Hello World!
+
+
+
+ Side=Left, Alignment=Start
+
+
+ Hello World!
+
+
+
+ Side=Right, Alignment=End
+
+
+ Hello World!
+
+
+
+```
diff --git a/static/usage/v7/popover/customization/positioning/angular/example_component_ts.md b/static/usage/v7/popover/customization/positioning/angular/example_component_ts.md
new file mode 100644
index 00000000000..4db53a836a9
--- /dev/null
+++ b/static/usage/v7/popover/customization/positioning/angular/example_component_ts.md
@@ -0,0 +1,10 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/popover/customization/positioning/demo.html b/static/usage/v7/popover/customization/positioning/demo.html
new file mode 100644
index 00000000000..71a74fb45e9
--- /dev/null
+++ b/static/usage/v7/popover/customization/positioning/demo.html
@@ -0,0 +1,52 @@
+
+
+
+
+
+
+ Popover
+
+
+
+
+
+
+
+
+
+
+
+
+ Side=Top, Alignment=Center
+
+ Hello World!
+
+
+ Side=Bottom, Alignment=Start
+
+ Hello World!
+
+
+ Side=Left, Alignment=Start
+
+ Hello World!
+
+
+ Side=Right, Alignment=End
+
+ Hello World!
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/popover/customization/positioning/index.md b/static/usage/v7/popover/customization/positioning/index.md
new file mode 100644
index 00000000000..b39363d2a7f
--- /dev/null
+++ b/static/usage/v7/popover/customization/positioning/index.md
@@ -0,0 +1,34 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/v7/popover/customization/positioning/javascript.md b/static/usage/v7/popover/customization/positioning/javascript.md
new file mode 100644
index 00000000000..28ef3451cac
--- /dev/null
+++ b/static/usage/v7/popover/customization/positioning/javascript.md
@@ -0,0 +1,36 @@
+```html
+
+ Side=Top, Alignment=Center
+
+ Hello World!
+
+
+ Side=Bottom, Alignment=Start
+
+ Hello World!
+
+
+ Side=Left, Alignment=Start
+
+ Hello World!
+
+
+ Side=Right, Alignment=End
+
+ Hello World!
+
+
+
+
+```
diff --git a/static/usage/v7/popover/customization/positioning/react/main_css.md b/static/usage/v7/popover/customization/positioning/react/main_css.md
new file mode 100644
index 00000000000..c92d80212a7
--- /dev/null
+++ b/static/usage/v7/popover/customization/positioning/react/main_css.md
@@ -0,0 +1,12 @@
+```css
+ion-popover {
+ --width: 80px;
+}
+
+.container {
+ align-items: center;
+ display: flex;
+ flex-direction: column;
+ padding: 80px;
+}
+```
\ No newline at end of file
diff --git a/static/usage/v7/popover/customization/positioning/react/main_tsx.md b/static/usage/v7/popover/customization/positioning/react/main_tsx.md
new file mode 100644
index 00000000000..54235b0f593
--- /dev/null
+++ b/static/usage/v7/popover/customization/positioning/react/main_tsx.md
@@ -0,0 +1,33 @@
+```tsx
+import React from 'react';
+import { IonButton, IonContent, IonPopover } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+
+ Side=Top, Alignment=Center
+
+ Hello World!
+
+
+ Side=Bottom, Alignment=Start
+
+ Hello World!
+
+
+ Side=Left, Alignment=Start
+
+ Hello World!
+
+
+ Side=Right, Alignment=End
+
+ Hello World!
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/popover/customization/positioning/vue.md b/static/usage/v7/popover/customization/positioning/vue.md
new file mode 100644
index 00000000000..b658de342a4
--- /dev/null
+++ b/static/usage/v7/popover/customization/positioning/vue.md
@@ -0,0 +1,47 @@
+```html
+
+
+ Side=Top, Alignment=Center
+
+ Hello World!
+
+
+ Side=Bottom, Alignment=Start
+
+ Hello World!
+
+
+ Side=Left, Alignment=Start
+
+ Hello World!
+
+
+ Side=Right, Alignment=End
+
+ Hello World!
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/popover/customization/sizing/angular.md b/static/usage/v7/popover/customization/sizing/angular.md
new file mode 100644
index 00000000000..ca06883d451
--- /dev/null
+++ b/static/usage/v7/popover/customization/sizing/angular.md
@@ -0,0 +1,15 @@
+```html
+Size=Auto
+
+
+ Hello!
+
+
+
+Size=Cover
+
+
+ Hello!
+
+
+```
diff --git a/static/usage/v7/popover/customization/sizing/demo.html b/static/usage/v7/popover/customization/sizing/demo.html
new file mode 100644
index 00000000000..b85d71034f8
--- /dev/null
+++ b/static/usage/v7/popover/customization/sizing/demo.html
@@ -0,0 +1,32 @@
+
+
+
+
+
+
+ Popover
+
+
+
+
+
+
+
+
+
+
+ Size=Auto
+
+ Hello!
+
+
+ Size=Cover
+
+ Hello!
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/popover/customization/sizing/index.md b/static/usage/v7/popover/customization/sizing/index.md
new file mode 100644
index 00000000000..3eb127648dc
--- /dev/null
+++ b/static/usage/v7/popover/customization/sizing/index.md
@@ -0,0 +1,13 @@
+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/popover/customization/sizing/javascript.md b/static/usage/v7/popover/customization/sizing/javascript.md
new file mode 100644
index 00000000000..3b25241cd51
--- /dev/null
+++ b/static/usage/v7/popover/customization/sizing/javascript.md
@@ -0,0 +1,11 @@
+```html
+Size=Auto
+
+ Hello!
+
+
+Size=Cover
+
+ Hello!
+
+```
diff --git a/static/usage/v7/popover/customization/sizing/react.md b/static/usage/v7/popover/customization/sizing/react.md
new file mode 100644
index 00000000000..35b60534df6
--- /dev/null
+++ b/static/usage/v7/popover/customization/sizing/react.md
@@ -0,0 +1,20 @@
+```tsx
+import React from 'react';
+import { IonButton, IonContent, IonPopover } from '@ionic/react';
+function Example() {
+ return (
+ <>
+ Size=Auto
+
+ Hello!
+
+
+ Size=Cover
+
+ Hello!
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/popover/customization/sizing/vue.md b/static/usage/v7/popover/customization/sizing/vue.md
new file mode 100644
index 00000000000..72d20c9fa77
--- /dev/null
+++ b/static/usage/v7/popover/customization/sizing/vue.md
@@ -0,0 +1,22 @@
+```html
+
+ Size=Auto
+
+ Hello!
+
+
+ Size=Cover
+
+ Hello!
+
+
+
+
+```
diff --git a/static/usage/v7/popover/customization/styling/angular/example_component_html.md b/static/usage/v7/popover/customization/styling/angular/example_component_html.md
new file mode 100644
index 00000000000..03df30e973a
--- /dev/null
+++ b/static/usage/v7/popover/customization/styling/angular/example_component_html.md
@@ -0,0 +1,8 @@
+```html
+Click Me
+
+
+ Hello Styled World!
+
+
+```
diff --git a/static/usage/v7/popover/customization/styling/angular/global_css.md b/static/usage/v7/popover/customization/styling/angular/global_css.md
new file mode 100644
index 00000000000..25890b90538
--- /dev/null
+++ b/static/usage/v7/popover/customization/styling/angular/global_css.md
@@ -0,0 +1,17 @@
+```css
+ion-popover {
+ --background: rgba(40, 173, 218, 0.6);
+ --backdrop-opacity: 0.6;
+ --box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.6);
+ --color: white;
+ --width: 300px;
+}
+
+ion-popover ion-content {
+ --background: rgba(40, 173, 218, 0.6);
+}
+
+ion-popover::part(backdrop) {
+ background-color: rgb(6, 14, 106);
+}
+```
\ No newline at end of file
diff --git a/static/usage/v7/popover/customization/styling/demo.html b/static/usage/v7/popover/customization/styling/demo.html
new file mode 100644
index 00000000000..6d858b14659
--- /dev/null
+++ b/static/usage/v7/popover/customization/styling/demo.html
@@ -0,0 +1,45 @@
+
+
+
+
+
+
+ Popover
+
+
+
+
+
+
+
+
+
+
+
+
+ Click Me
+
+ Hello Styled World!
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/popover/customization/styling/index.md b/static/usage/v7/popover/customization/styling/index.md
new file mode 100644
index 00000000000..658ef72d45a
--- /dev/null
+++ b/static/usage/v7/popover/customization/styling/index.md
@@ -0,0 +1,32 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_global_css from './angular/global_css.md';
+
+
diff --git a/static/usage/v7/popover/customization/styling/javascript.md b/static/usage/v7/popover/customization/styling/javascript.md
new file mode 100644
index 00000000000..2666638cc1e
--- /dev/null
+++ b/static/usage/v7/popover/customization/styling/javascript.md
@@ -0,0 +1,24 @@
+```html
+Click Me
+
+ Hello Styled World!
+
+
+
+```
diff --git a/static/usage/v7/popover/customization/styling/react/main_css.md b/static/usage/v7/popover/customization/styling/react/main_css.md
new file mode 100644
index 00000000000..25890b90538
--- /dev/null
+++ b/static/usage/v7/popover/customization/styling/react/main_css.md
@@ -0,0 +1,17 @@
+```css
+ion-popover {
+ --background: rgba(40, 173, 218, 0.6);
+ --backdrop-opacity: 0.6;
+ --box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.6);
+ --color: white;
+ --width: 300px;
+}
+
+ion-popover ion-content {
+ --background: rgba(40, 173, 218, 0.6);
+}
+
+ion-popover::part(backdrop) {
+ background-color: rgb(6, 14, 106);
+}
+```
\ No newline at end of file
diff --git a/static/usage/v7/popover/customization/styling/react/main_tsx.md b/static/usage/v7/popover/customization/styling/react/main_tsx.md
new file mode 100644
index 00000000000..1a905f8056d
--- /dev/null
+++ b/static/usage/v7/popover/customization/styling/react/main_tsx.md
@@ -0,0 +1,18 @@
+```tsx
+import React from 'react';
+import { IonButton, IonContent, IonPopover } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+ Click Me
+
+ Hello Styled World!
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/popover/customization/styling/vue.md b/static/usage/v7/popover/customization/styling/vue.md
new file mode 100644
index 00000000000..964eeb09bfc
--- /dev/null
+++ b/static/usage/v7/popover/customization/styling/vue.md
@@ -0,0 +1,35 @@
+```html
+
+ Click Me
+
+ Hello Styled World!
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/popover/nested/angular.md b/static/usage/v7/popover/nested/angular.md
new file mode 100644
index 00000000000..cdbe68f341f
--- /dev/null
+++ b/static/usage/v7/popover/nested/angular.md
@@ -0,0 +1,24 @@
+```html
+Open Menu
+
+
+
+
+ Option 1
+ Option 2
+ More options...
+
+
+
+
+
+ Nested option
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/popover/nested/demo.html b/static/usage/v7/popover/nested/demo.html
new file mode 100644
index 00000000000..ab52c1d5540
--- /dev/null
+++ b/static/usage/v7/popover/nested/demo.html
@@ -0,0 +1,41 @@
+
+
+
+
+
+
+ Popover
+
+
+
+
+
+
+
+
+
+
+ Open Menu
+
+
+
+ Option 1
+ Option 2
+ More options...
+
+
+
+
+ Nested option
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/popover/nested/index.md b/static/usage/v7/popover/nested/index.md
new file mode 100644
index 00000000000..cb8a824edb0
--- /dev/null
+++ b/static/usage/v7/popover/nested/index.md
@@ -0,0 +1,13 @@
+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/popover/nested/javascript.md b/static/usage/v7/popover/nested/javascript.md
new file mode 100644
index 00000000000..6f3848538f5
--- /dev/null
+++ b/static/usage/v7/popover/nested/javascript.md
@@ -0,0 +1,20 @@
+```html
+Open Menu
+
+
+
+ Option 1
+ Option 2
+ More options...
+
+
+
+
+ Nested option
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/popover/nested/react.md b/static/usage/v7/popover/nested/react.md
new file mode 100644
index 00000000000..eb84d67effb
--- /dev/null
+++ b/static/usage/v7/popover/nested/react.md
@@ -0,0 +1,37 @@
+```tsx
+import React from 'react';
+import { IonButton, IonContent, IonItem, IonList, IonPopover } from '@ionic/react';
+function Example() {
+ return (
+ <>
+ Open Menu
+
+
+
+
+ Option 1
+
+
+ Option 2
+
+
+ More options...
+
+
+
+
+
+
+ Nested option
+
+
+
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/popover/nested/vue.md b/static/usage/v7/popover/nested/vue.md
new file mode 100644
index 00000000000..04a7b6d7e36
--- /dev/null
+++ b/static/usage/v7/popover/nested/vue.md
@@ -0,0 +1,31 @@
+```html
+
+ Open Menu
+
+
+
+ Option 1
+ Option 2
+ More options...
+
+
+
+
+ Nested option
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/popover/performance/mount/angular.md b/static/usage/v7/popover/performance/mount/angular.md
new file mode 100644
index 00000000000..b8a696ab948
--- /dev/null
+++ b/static/usage/v7/popover/performance/mount/angular.md
@@ -0,0 +1,8 @@
+```html
+Open Popover
+
+
+ This content was mounted as soon as the popover was created.
+
+
+```
diff --git a/static/usage/v7/popover/performance/mount/demo.html b/static/usage/v7/popover/performance/mount/demo.html
new file mode 100644
index 00000000000..053883d5e75
--- /dev/null
+++ b/static/usage/v7/popover/performance/mount/demo.html
@@ -0,0 +1,27 @@
+
+
+
+
+
+
+ Popover
+
+
+
+
+
+
+
+
+
+
+ Open Popover
+
+ This content was mounted as soon as the popover was created.
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/popover/performance/mount/index.md b/static/usage/v7/popover/performance/mount/index.md
new file mode 100644
index 00000000000..9c846cc784b
--- /dev/null
+++ b/static/usage/v7/popover/performance/mount/index.md
@@ -0,0 +1,18 @@
+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/popover/performance/mount/javascript.md b/static/usage/v7/popover/performance/mount/javascript.md
new file mode 100644
index 00000000000..5dd5f8a624e
--- /dev/null
+++ b/static/usage/v7/popover/performance/mount/javascript.md
@@ -0,0 +1,6 @@
+```html
+Open Popover
+
+ This content was mounted as soon as the popover was created.
+
+```
\ No newline at end of file
diff --git a/static/usage/v7/popover/performance/mount/react.md b/static/usage/v7/popover/performance/mount/react.md
new file mode 100644
index 00000000000..24e7230d966
--- /dev/null
+++ b/static/usage/v7/popover/performance/mount/react.md
@@ -0,0 +1,15 @@
+```tsx
+import React from 'react';
+import { IonButton, IonContent, IonPopover } from '@ionic/react';
+function Example() {
+ return (
+
+ Open Popover
+
+ This content was mounted as soon as the popover was created.
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/popover/performance/mount/vue.md b/static/usage/v7/popover/performance/mount/vue.md
new file mode 100644
index 00000000000..bc54f345bfe
--- /dev/null
+++ b/static/usage/v7/popover/performance/mount/vue.md
@@ -0,0 +1,19 @@
+```html
+
+
+ Open Popover
+
+ This content was mounted as soon as the popover was created.
+
+
+
+
+
+```
diff --git a/static/usage/v7/popover/presenting/controller/angular/app_module_ts.md b/static/usage/v7/popover/presenting/controller/angular/app_module_ts.md
new file mode 100644
index 00000000000..887ca3acf89
--- /dev/null
+++ b/static/usage/v7/popover/presenting/controller/angular/app_module_ts.md
@@ -0,0 +1,19 @@
+```ts
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { IonicModule } from '@ionic/angular';
+
+import { AppComponent } from './app.component';
+import { ExampleComponent } from './example.component';
+
+import { PopoverComponent } from './popover.component';
+
+@NgModule({
+ imports: [BrowserModule, FormsModule, IonicModule.forRoot({})],
+ declarations: [AppComponent, ExampleComponent, PopoverComponent],
+ bootstrap: [AppComponent],
+})
+export class AppModule {}
+```
diff --git a/static/usage/v7/popover/presenting/controller/angular/example_component_html.md b/static/usage/v7/popover/presenting/controller/angular/example_component_html.md
new file mode 100644
index 00000000000..da857f78745
--- /dev/null
+++ b/static/usage/v7/popover/presenting/controller/angular/example_component_html.md
@@ -0,0 +1,4 @@
+```html
+Click Me
+{{ roleMsg }}
+```
\ No newline at end of file
diff --git a/static/usage/v7/popover/presenting/controller/angular/example_component_ts.md b/static/usage/v7/popover/presenting/controller/angular/example_component_ts.md
new file mode 100644
index 00000000000..bf0e0165d78
--- /dev/null
+++ b/static/usage/v7/popover/presenting/controller/angular/example_component_ts.md
@@ -0,0 +1,29 @@
+```ts
+import { Component, ViewChild } from '@angular/core';
+
+import { PopoverController } from '@ionic/angular';
+
+import { PopoverComponent } from './popover.component';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ roleMsg = '';
+
+ constructor(public popoverController: PopoverController) {}
+
+ async presentPopover(e: Event) {
+ const popover = await this.popoverController.create({
+ component: PopoverComponent,
+ event: e,
+ });
+
+ await popover.present();
+
+ const { role } = await popover.onDidDismiss();
+ this.roleMsg = `Popover dismissed with role: ${role}`;
+ }
+}
+```
diff --git a/static/usage/v7/popover/presenting/controller/angular/popover_component_html.md b/static/usage/v7/popover/presenting/controller/angular/popover_component_html.md
new file mode 100644
index 00000000000..74cbf83fec4
--- /dev/null
+++ b/static/usage/v7/popover/presenting/controller/angular/popover_component_html.md
@@ -0,0 +1,3 @@
+```html
+Hello World!
+```
\ No newline at end of file
diff --git a/static/usage/v7/popover/presenting/controller/angular/popover_component_ts.md b/static/usage/v7/popover/presenting/controller/angular/popover_component_ts.md
new file mode 100644
index 00000000000..2900a32240c
--- /dev/null
+++ b/static/usage/v7/popover/presenting/controller/angular/popover_component_ts.md
@@ -0,0 +1,10 @@
+```ts
+import { Component } from '@angular/core';
+import { PopoverController } from '@ionic/angular';
+
+@Component({
+ selector: 'app-popover',
+ templateUrl: 'popover.component.html',
+})
+export class PopoverComponent {}
+```
diff --git a/static/usage/v7/popover/presenting/controller/demo.html b/static/usage/v7/popover/presenting/controller/demo.html
new file mode 100644
index 00000000000..0a235d3c41d
--- /dev/null
+++ b/static/usage/v7/popover/presenting/controller/demo.html
@@ -0,0 +1,63 @@
+
+
+
+
+
+
+ Popover
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/popover/presenting/controller/index.md b/static/usage/v7/popover/presenting/controller/index.md
new file mode 100644
index 00000000000..65764b052ff
--- /dev/null
+++ b/static/usage/v7/popover/presenting/controller/index.md
@@ -0,0 +1,38 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+
+import vue_example from './vue/example_vue.md';
+import vue_popover from './vue/popover_vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_popover_component_html from './angular/popover_component_html.md';
+import angular_popover_component_ts from './angular/popover_component_ts.md';
+import angular_app_module from './angular/app_module_ts.md';
+
+
diff --git a/static/usage/v7/popover/presenting/controller/javascript.md b/static/usage/v7/popover/presenting/controller/javascript.md
new file mode 100644
index 00000000000..896772b276b
--- /dev/null
+++ b/static/usage/v7/popover/presenting/controller/javascript.md
@@ -0,0 +1,36 @@
+```html
+Click Me
+
+
+
+```
diff --git a/static/usage/v7/popover/presenting/controller/react.md b/static/usage/v7/popover/presenting/controller/react.md
new file mode 100644
index 00000000000..8d772ca8ef6
--- /dev/null
+++ b/static/usage/v7/popover/presenting/controller/react.md
@@ -0,0 +1,30 @@
+```tsx
+import React, { useState } from 'react';
+import { IonButton, IonContent, useIonPopover } from '@ionic/react';
+
+const Popover = () => Hello World!;
+
+function Example() {
+ const [present, dismiss] = useIonPopover(Popover, {
+ onDismiss: (data: any, role: string) => dismiss(data, role),
+ });
+ const [roleMsg, setRoleMsg] = useState('');
+
+ return (
+ <>
+
+ present({
+ event: e,
+ onDidDismiss: (e: CustomEvent) => setRoleMsg(`Popover dismissed with role: ${e.detail.role}`),
+ })
+ }
+ >
+ Click Me
+
+ {roleMsg}
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/popover/presenting/controller/vue/example_vue.md b/static/usage/v7/popover/presenting/controller/vue/example_vue.md
new file mode 100644
index 00000000000..36e0e51d3d8
--- /dev/null
+++ b/static/usage/v7/popover/presenting/controller/vue/example_vue.md
@@ -0,0 +1,32 @@
+```html
+
+ Click Me
+ {{ roleMsg }}
+
+
+
+```
diff --git a/static/usage/v7/popover/presenting/controller/vue/popover_vue.md b/static/usage/v7/popover/presenting/controller/vue/popover_vue.md
new file mode 100644
index 00000000000..1bc5738c6ad
--- /dev/null
+++ b/static/usage/v7/popover/presenting/controller/vue/popover_vue.md
@@ -0,0 +1,15 @@
+```html
+
+ Hello World!
+
+
+
+```
\ No newline at end of file
diff --git a/static/usage/v7/popover/presenting/inline-isopen/angular/example_component_html.md b/static/usage/v7/popover/presenting/inline-isopen/angular/example_component_html.md
new file mode 100644
index 00000000000..80201dba3d2
--- /dev/null
+++ b/static/usage/v7/popover/presenting/inline-isopen/angular/example_component_html.md
@@ -0,0 +1,8 @@
+```html
+Click Me
+
+
+ Hello World!
+
+
+```
\ No newline at end of file
diff --git a/static/usage/v7/popover/presenting/inline-isopen/angular/example_component_ts.md b/static/usage/v7/popover/presenting/inline-isopen/angular/example_component_ts.md
new file mode 100644
index 00000000000..ef604e603d9
--- /dev/null
+++ b/static/usage/v7/popover/presenting/inline-isopen/angular/example_component_ts.md
@@ -0,0 +1,18 @@
+```ts
+import { Component, ViewChild } from '@angular/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ @ViewChild('popover') popover;
+
+ isOpen = false;
+
+ presentPopover(e: Event) {
+ this.popover.event = e;
+ this.isOpen = true;
+ }
+}
+```
diff --git a/static/usage/v7/popover/presenting/inline-isopen/demo.html b/static/usage/v7/popover/presenting/inline-isopen/demo.html
new file mode 100644
index 00000000000..4180760c005
--- /dev/null
+++ b/static/usage/v7/popover/presenting/inline-isopen/demo.html
@@ -0,0 +1,39 @@
+
+
+
+
+
+
+ Popover
+
+
+
+
+
+
+
+
+
+
+ Click Me
+
+ Hello World!
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/popover/presenting/inline-isopen/index.md b/static/usage/v7/popover/presenting/inline-isopen/index.md
new file mode 100644
index 00000000000..b03937849fb
--- /dev/null
+++ b/static/usage/v7/popover/presenting/inline-isopen/index.md
@@ -0,0 +1,25 @@
+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_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/v7/popover/presenting/inline-isopen/javascript.md b/static/usage/v7/popover/presenting/inline-isopen/javascript.md
new file mode 100644
index 00000000000..b780125ba1e
--- /dev/null
+++ b/static/usage/v7/popover/presenting/inline-isopen/javascript.md
@@ -0,0 +1,18 @@
+```html
+Click Me
+
+ Hello World!
+
+
+
+```
diff --git a/static/usage/v7/popover/presenting/inline-isopen/react.md b/static/usage/v7/popover/presenting/inline-isopen/react.md
new file mode 100644
index 00000000000..1d0b68fd1f5
--- /dev/null
+++ b/static/usage/v7/popover/presenting/inline-isopen/react.md
@@ -0,0 +1,24 @@
+```tsx
+import React, { useRef, useState } from 'react';
+import { IonButton, IonContent, IonPopover } from '@ionic/react';
+
+function Example() {
+ const popover = useRef(null);
+ const [popoverOpen, setPopoverOpen] = useState(false);
+
+ const openPopover = (e: any) => {
+ popover.current!.event = e;
+ setPopoverOpen(true);
+ };
+
+ return (
+ <>
+ Click Me
+ setPopoverOpen(false)}>
+ Hello World!
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/popover/presenting/inline-isopen/vue.md b/static/usage/v7/popover/presenting/inline-isopen/vue.md
new file mode 100644
index 00000000000..fbbaf065a17
--- /dev/null
+++ b/static/usage/v7/popover/presenting/inline-isopen/vue.md
@@ -0,0 +1,29 @@
+```html
+
+ Click Me
+
+ Hello World!
+
+
+
+
+```
diff --git a/static/usage/v7/popover/presenting/inline-trigger/angular.md b/static/usage/v7/popover/presenting/inline-trigger/angular.md
new file mode 100644
index 00000000000..de7f6d02a6f
--- /dev/null
+++ b/static/usage/v7/popover/presenting/inline-trigger/angular.md
@@ -0,0 +1,22 @@
+```html
+Left-Click Me
+
+
+ Hello World!
+
+
+
+
+
+
+ Hello World!
+
+
+
+Hover Over Me
+
+
+ Hello World!
+
+
+```
diff --git a/static/usage/v7/popover/presenting/inline-trigger/demo.html b/static/usage/v7/popover/presenting/inline-trigger/demo.html
new file mode 100644
index 00000000000..d1b2020e454
--- /dev/null
+++ b/static/usage/v7/popover/presenting/inline-trigger/demo.html
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+ Popover
+
+
+
+
+
+
+
+
+
+
+ Left-Click Me
+
+ Hello World!
+
+
+
+
+ Hello World!
+
+
+ Hover Over Me
+
+ Hello World!
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/popover/presenting/inline-trigger/index.md b/static/usage/v7/popover/presenting/inline-trigger/index.md
new file mode 100644
index 00000000000..ac99108a561
--- /dev/null
+++ b/static/usage/v7/popover/presenting/inline-trigger/index.md
@@ -0,0 +1,13 @@
+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/popover/presenting/inline-trigger/javascript.md b/static/usage/v7/popover/presenting/inline-trigger/javascript.md
new file mode 100644
index 00000000000..7f4559391e2
--- /dev/null
+++ b/static/usage/v7/popover/presenting/inline-trigger/javascript.md
@@ -0,0 +1,16 @@
+```html
+Left-Click Me
+
+ Hello World!
+
+
+
+
+ Hello World!
+
+
+Hover Over Me
+
+ Hello World!
+
+```
diff --git a/static/usage/v7/popover/presenting/inline-trigger/react.md b/static/usage/v7/popover/presenting/inline-trigger/react.md
new file mode 100644
index 00000000000..93ba97cbd7c
--- /dev/null
+++ b/static/usage/v7/popover/presenting/inline-trigger/react.md
@@ -0,0 +1,25 @@
+```tsx
+import React from 'react';
+import { IonButton, IonContent, IonPopover } from '@ionic/react';
+function Example() {
+ return (
+ <>
+ Left-Click Me
+
+ Hello World!
+
+
+
+
+ Hello World!
+
+
+ Hover Over Me
+
+ Hello World!
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/popover/presenting/inline-trigger/vue.md b/static/usage/v7/popover/presenting/inline-trigger/vue.md
new file mode 100644
index 00000000000..07f1f68a62f
--- /dev/null
+++ b/static/usage/v7/popover/presenting/inline-trigger/vue.md
@@ -0,0 +1,27 @@
+```html
+
+ Left-Click Me
+
+ Hello World!
+
+
+
+
+ Hello World!
+
+
+ Hover Over Me
+
+ Hello World!
+
+
+
+
+```
diff --git a/static/usage/v7/progress-bar/buffer/angular/example_component_html.md b/static/usage/v7/progress-bar/buffer/angular/example_component_html.md
new file mode 100644
index 00000000000..55dfda33a34
--- /dev/null
+++ b/static/usage/v7/progress-bar/buffer/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v7/progress-bar/buffer/angular/example_component_ts.md b/static/usage/v7/progress-bar/buffer/angular/example_component_ts.md
new file mode 100644
index 00000000000..56e3d3a3b09
--- /dev/null
+++ b/static/usage/v7/progress-bar/buffer/angular/example_component_ts.md
@@ -0,0 +1,29 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css']
+})
+export class ExampleComponent {
+ public buffer = 0.06;
+ public progress = 0;
+
+ constructor() {
+ setInterval(() => {
+ this.buffer += 0.06;
+ this.progress += 0.06;
+
+ // Reset the progress bar when it reaches 100%
+ // to continuously show the demo
+ if (this.progress > 1) {
+ setTimeout(() => {
+ this.buffer = 0.06;
+ this.progress = 0;
+ }, 1000);
+ }
+ }, 1000);
+ }
+}
+```
diff --git a/static/usage/v7/progress-bar/buffer/demo.html b/static/usage/v7/progress-bar/buffer/demo.html
new file mode 100644
index 00000000000..023c907ed39
--- /dev/null
+++ b/static/usage/v7/progress-bar/buffer/demo.html
@@ -0,0 +1,47 @@
+
+
+
+
+
+
+ Progress Bar
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/progress-bar/buffer/index.md b/static/usage/v7/progress-bar/buffer/index.md
new file mode 100644
index 00000000000..2108ac9ed43
--- /dev/null
+++ b/static/usage/v7/progress-bar/buffer/index.md
@@ -0,0 +1,25 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+
+import react from './react.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/v7/progress-bar/buffer/javascript.md b/static/usage/v7/progress-bar/buffer/javascript.md
new file mode 100644
index 00000000000..0938fb5fca1
--- /dev/null
+++ b/static/usage/v7/progress-bar/buffer/javascript.md
@@ -0,0 +1,25 @@
+```html
+
+
+
+```
diff --git a/static/usage/v7/progress-bar/buffer/react.md b/static/usage/v7/progress-bar/buffer/react.md
new file mode 100644
index 00000000000..1fa8208ac3a
--- /dev/null
+++ b/static/usage/v7/progress-bar/buffer/react.md
@@ -0,0 +1,30 @@
+```tsx
+import React, { useEffect, useState } from 'react';
+import { IonProgressBar } from '@ionic/react';
+
+function Example() {
+ const [buffer, setBuffer] = useState(0.06);
+ const [progress, setProgress] = useState(0);
+
+ useEffect(() => {
+ const interval = setInterval(() => {
+ setBuffer((prevBuffer) => prevBuffer + 0.06);
+ setProgress((prevProgress) => prevProgress + 0.06);
+ }, 1000);
+
+ return () => clearInterval(interval);
+ }, []);
+
+ if (progress > 1) {
+ setTimeout(() => {
+ setBuffer(0.06);
+ setProgress(0);
+ }, 1000);
+ }
+
+ return (
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/progress-bar/buffer/vue.md b/static/usage/v7/progress-bar/buffer/vue.md
new file mode 100644
index 00000000000..3edc59bdf6f
--- /dev/null
+++ b/static/usage/v7/progress-bar/buffer/vue.md
@@ -0,0 +1,38 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v7/progress-bar/determinate/angular/example_component_html.md b/static/usage/v7/progress-bar/determinate/angular/example_component_html.md
new file mode 100644
index 00000000000..95969f5d197
--- /dev/null
+++ b/static/usage/v7/progress-bar/determinate/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v7/progress-bar/determinate/angular/example_component_ts.md b/static/usage/v7/progress-bar/determinate/angular/example_component_ts.md
new file mode 100644
index 00000000000..d8f8b690fc9
--- /dev/null
+++ b/static/usage/v7/progress-bar/determinate/angular/example_component_ts.md
@@ -0,0 +1,26 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css']
+})
+export class ExampleComponent {
+ public progress = 0;
+
+ constructor() {
+ setInterval(() => {
+ this.progress += 0.01;
+
+ // Reset the progress bar when it reaches 100%
+ // to continuously show the demo
+ if (this.progress > 1) {
+ setTimeout(() => {
+ this.progress = 0;
+ }, 1000);
+ }
+ }, 50);
+ }
+}
+```
diff --git a/static/usage/v7/progress-bar/determinate/demo.html b/static/usage/v7/progress-bar/determinate/demo.html
new file mode 100644
index 00000000000..2f09a3ad5cd
--- /dev/null
+++ b/static/usage/v7/progress-bar/determinate/demo.html
@@ -0,0 +1,42 @@
+
+
+
+
+
+
+ Progress Bar
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/progress-bar/determinate/index.md b/static/usage/v7/progress-bar/determinate/index.md
new file mode 100644
index 00000000000..790b44766a8
--- /dev/null
+++ b/static/usage/v7/progress-bar/determinate/index.md
@@ -0,0 +1,25 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+
+import react from './react.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/v7/progress-bar/determinate/javascript.md b/static/usage/v7/progress-bar/determinate/javascript.md
new file mode 100644
index 00000000000..6adb7e43590
--- /dev/null
+++ b/static/usage/v7/progress-bar/determinate/javascript.md
@@ -0,0 +1,20 @@
+```html
+
+
+
+```
diff --git a/static/usage/v7/progress-bar/determinate/react.md b/static/usage/v7/progress-bar/determinate/react.md
new file mode 100644
index 00000000000..9622be87f95
--- /dev/null
+++ b/static/usage/v7/progress-bar/determinate/react.md
@@ -0,0 +1,27 @@
+```tsx
+import React, { useEffect, useState } from 'react';
+import { IonProgressBar } from '@ionic/react';
+
+function Example() {
+ const [progress, setProgress] = useState(0);
+
+ useEffect(() => {
+ const interval = setInterval(() => {
+ setProgress((prevProgress) => prevProgress + 0.01);
+ }, 50);
+
+ return () => clearInterval(interval);
+ }, []);
+
+ if (progress > 1) {
+ setTimeout(() => {
+ setProgress(0);
+ }, 1000);
+ }
+
+ return (
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/progress-bar/determinate/vue.md b/static/usage/v7/progress-bar/determinate/vue.md
new file mode 100644
index 00000000000..c22b3ead5d3
--- /dev/null
+++ b/static/usage/v7/progress-bar/determinate/vue.md
@@ -0,0 +1,34 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v7/progress-bar/indeterminate/angular.md b/static/usage/v7/progress-bar/indeterminate/angular.md
new file mode 100644
index 00000000000..f83f9173c39
--- /dev/null
+++ b/static/usage/v7/progress-bar/indeterminate/angular.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v7/progress-bar/indeterminate/demo.html b/static/usage/v7/progress-bar/indeterminate/demo.html
new file mode 100644
index 00000000000..46c9cdd7254
--- /dev/null
+++ b/static/usage/v7/progress-bar/indeterminate/demo.html
@@ -0,0 +1,25 @@
+
+
+
+
+
+
+ Progress Bar
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/progress-bar/indeterminate/index.md b/static/usage/v7/progress-bar/indeterminate/index.md
new file mode 100644
index 00000000000..db428ba5871
--- /dev/null
+++ b/static/usage/v7/progress-bar/indeterminate/index.md
@@ -0,0 +1,12 @@
+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/progress-bar/indeterminate/javascript.md b/static/usage/v7/progress-bar/indeterminate/javascript.md
new file mode 100644
index 00000000000..f83f9173c39
--- /dev/null
+++ b/static/usage/v7/progress-bar/indeterminate/javascript.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v7/progress-bar/indeterminate/react.md b/static/usage/v7/progress-bar/indeterminate/react.md
new file mode 100644
index 00000000000..45e74e79ce7
--- /dev/null
+++ b/static/usage/v7/progress-bar/indeterminate/react.md
@@ -0,0 +1,11 @@
+```tsx
+import React from 'react';
+import { IonProgressBar } from '@ionic/react';
+
+function Example() {
+ return (
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/progress-bar/indeterminate/vue.md b/static/usage/v7/progress-bar/indeterminate/vue.md
new file mode 100644
index 00000000000..b15c060bdcc
--- /dev/null
+++ b/static/usage/v7/progress-bar/indeterminate/vue.md
@@ -0,0 +1,14 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v7/progress-bar/theming/colors/angular.md b/static/usage/v7/progress-bar/theming/colors/angular.md
new file mode 100644
index 00000000000..71bc3675422
--- /dev/null
+++ b/static/usage/v7/progress-bar/theming/colors/angular.md
@@ -0,0 +1,11 @@
+```html
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/progress-bar/theming/colors/demo.html b/static/usage/v7/progress-bar/theming/colors/demo.html
new file mode 100644
index 00000000000..2ecac2e80fa
--- /dev/null
+++ b/static/usage/v7/progress-bar/theming/colors/demo.html
@@ -0,0 +1,39 @@
+
+
+
+
+
+
+ Progress Bar
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/progress-bar/theming/colors/index.md b/static/usage/v7/progress-bar/theming/colors/index.md
new file mode 100644
index 00000000000..7e6638a7e74
--- /dev/null
+++ b/static/usage/v7/progress-bar/theming/colors/index.md
@@ -0,0 +1,12 @@
+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/progress-bar/theming/colors/javascript.md b/static/usage/v7/progress-bar/theming/colors/javascript.md
new file mode 100644
index 00000000000..71bc3675422
--- /dev/null
+++ b/static/usage/v7/progress-bar/theming/colors/javascript.md
@@ -0,0 +1,11 @@
+```html
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/progress-bar/theming/colors/react.md b/static/usage/v7/progress-bar/theming/colors/react.md
new file mode 100644
index 00000000000..d40b838e65b
--- /dev/null
+++ b/static/usage/v7/progress-bar/theming/colors/react.md
@@ -0,0 +1,21 @@
+```tsx
+import React from 'react';
+import { IonProgressBar } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/progress-bar/theming/colors/vue.md b/static/usage/v7/progress-bar/theming/colors/vue.md
new file mode 100644
index 00000000000..6f42832e199
--- /dev/null
+++ b/static/usage/v7/progress-bar/theming/colors/vue.md
@@ -0,0 +1,22 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/progress-bar/theming/css-properties/angular/example_component_css.md b/static/usage/v7/progress-bar/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..7d5576bdeeb
--- /dev/null
+++ b/static/usage/v7/progress-bar/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,6 @@
+```css
+ion-progress-bar {
+ --background: #f3e895;
+ --progress-background: #09c567;
+}
+```
diff --git a/static/usage/v7/progress-bar/theming/css-properties/angular/example_component_html.md b/static/usage/v7/progress-bar/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..d2c997037ad
--- /dev/null
+++ b/static/usage/v7/progress-bar/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,4 @@
+```html
+
+
+```
diff --git a/static/usage/v7/progress-bar/theming/css-properties/demo.html b/static/usage/v7/progress-bar/theming/css-properties/demo.html
new file mode 100644
index 00000000000..5d60e67fbc5
--- /dev/null
+++ b/static/usage/v7/progress-bar/theming/css-properties/demo.html
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+ Progress Bar
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/progress-bar/theming/css-properties/index.md b/static/usage/v7/progress-bar/theming/css-properties/index.md
new file mode 100644
index 00000000000..5d6c694d104
--- /dev/null
+++ b/static/usage/v7/progress-bar/theming/css-properties/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/progress-bar/theming/css-properties/javascript.md b/static/usage/v7/progress-bar/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..f57e0166013
--- /dev/null
+++ b/static/usage/v7/progress-bar/theming/css-properties/javascript.md
@@ -0,0 +1,11 @@
+```html
+
+
+
+
+```
diff --git a/static/usage/v7/progress-bar/theming/css-properties/react/main_css.md b/static/usage/v7/progress-bar/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..7d5576bdeeb
--- /dev/null
+++ b/static/usage/v7/progress-bar/theming/css-properties/react/main_css.md
@@ -0,0 +1,6 @@
+```css
+ion-progress-bar {
+ --background: #f3e895;
+ --progress-background: #09c567;
+}
+```
diff --git a/static/usage/v7/progress-bar/theming/css-properties/react/main_tsx.md b/static/usage/v7/progress-bar/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..a4c5e382892
--- /dev/null
+++ b/static/usage/v7/progress-bar/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,17 @@
+
+```tsx
+import React from 'react';
+import { IonProgressBar } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/progress-bar/theming/css-properties/vue.md b/static/usage/v7/progress-bar/theming/css-properties/vue.md
new file mode 100644
index 00000000000..bfff4db7a1b
--- /dev/null
+++ b/static/usage/v7/progress-bar/theming/css-properties/vue.md
@@ -0,0 +1,22 @@
+```html
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/progress-bar/theming/css-shadow-parts/angular/example_component_css.md b/static/usage/v7/progress-bar/theming/css-shadow-parts/angular/example_component_css.md
new file mode 100644
index 00000000000..2ccf6f72dd8
--- /dev/null
+++ b/static/usage/v7/progress-bar/theming/css-shadow-parts/angular/example_component_css.md
@@ -0,0 +1,13 @@
+```css
+ion-progress-bar::part(track) {
+ background: #f3e895;
+}
+
+ion-progress-bar::part(progress) {
+ background: #09c567;
+}
+
+ion-progress-bar::part(stream) {
+ background-image: radial-gradient(ellipse at center, #e475f3 0%, #e475f3 30%, transparent 30%);
+}
+```
diff --git a/static/usage/v7/progress-bar/theming/css-shadow-parts/angular/example_component_html.md b/static/usage/v7/progress-bar/theming/css-shadow-parts/angular/example_component_html.md
new file mode 100644
index 00000000000..d2c997037ad
--- /dev/null
+++ b/static/usage/v7/progress-bar/theming/css-shadow-parts/angular/example_component_html.md
@@ -0,0 +1,4 @@
+```html
+
+
+```
diff --git a/static/usage/v7/progress-bar/theming/css-shadow-parts/demo.html b/static/usage/v7/progress-bar/theming/css-shadow-parts/demo.html
new file mode 100644
index 00000000000..7ccd266e946
--- /dev/null
+++ b/static/usage/v7/progress-bar/theming/css-shadow-parts/demo.html
@@ -0,0 +1,44 @@
+
+
+
+
+
+
+ Progress Bar
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/progress-bar/theming/css-shadow-parts/index.md b/static/usage/v7/progress-bar/theming/css-shadow-parts/index.md
new file mode 100644
index 00000000000..e289ac2035c
--- /dev/null
+++ b/static/usage/v7/progress-bar/theming/css-shadow-parts/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/progress-bar/theming/css-shadow-parts/javascript.md b/static/usage/v7/progress-bar/theming/css-shadow-parts/javascript.md
new file mode 100644
index 00000000000..52b5be57e5a
--- /dev/null
+++ b/static/usage/v7/progress-bar/theming/css-shadow-parts/javascript.md
@@ -0,0 +1,18 @@
+```html
+
+
+
+
+```
diff --git a/static/usage/v7/progress-bar/theming/css-shadow-parts/react/main_css.md b/static/usage/v7/progress-bar/theming/css-shadow-parts/react/main_css.md
new file mode 100644
index 00000000000..2ccf6f72dd8
--- /dev/null
+++ b/static/usage/v7/progress-bar/theming/css-shadow-parts/react/main_css.md
@@ -0,0 +1,13 @@
+```css
+ion-progress-bar::part(track) {
+ background: #f3e895;
+}
+
+ion-progress-bar::part(progress) {
+ background: #09c567;
+}
+
+ion-progress-bar::part(stream) {
+ background-image: radial-gradient(ellipse at center, #e475f3 0%, #e475f3 30%, transparent 30%);
+}
+```
diff --git a/static/usage/v7/progress-bar/theming/css-shadow-parts/react/main_tsx.md b/static/usage/v7/progress-bar/theming/css-shadow-parts/react/main_tsx.md
new file mode 100644
index 00000000000..a4c5e382892
--- /dev/null
+++ b/static/usage/v7/progress-bar/theming/css-shadow-parts/react/main_tsx.md
@@ -0,0 +1,17 @@
+
+```tsx
+import React from 'react';
+import { IonProgressBar } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/progress-bar/theming/css-shadow-parts/vue.md b/static/usage/v7/progress-bar/theming/css-shadow-parts/vue.md
new file mode 100644
index 00000000000..a9ca62b2c4f
--- /dev/null
+++ b/static/usage/v7/progress-bar/theming/css-shadow-parts/vue.md
@@ -0,0 +1,29 @@
+```html
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/radio/basic/angular.md b/static/usage/v7/radio/basic/angular.md
new file mode 100644
index 00000000000..47f36bcad0e
--- /dev/null
+++ b/static/usage/v7/radio/basic/angular.md
@@ -0,0 +1,8 @@
+```html
+
+ Grapes
+ Strawberries
+ Pineapple
+ Cherries
+
+```
diff --git a/static/usage/v7/radio/basic/demo.html b/static/usage/v7/radio/basic/demo.html
new file mode 100644
index 00000000000..7b8c23e8d4d
--- /dev/null
+++ b/static/usage/v7/radio/basic/demo.html
@@ -0,0 +1,35 @@
+
+
+
+
+
+
+ Radio
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Grapes
+ Strawberries
+ Pineapple
+ Cherries
+
+
+
+
+
+
+
diff --git a/static/usage/v7/radio/basic/index.md b/static/usage/v7/radio/basic/index.md
new file mode 100644
index 00000000000..25f829a31fe
--- /dev/null
+++ b/static/usage/v7/radio/basic/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/radio/basic/javascript.md b/static/usage/v7/radio/basic/javascript.md
new file mode 100644
index 00000000000..47f36bcad0e
--- /dev/null
+++ b/static/usage/v7/radio/basic/javascript.md
@@ -0,0 +1,8 @@
+```html
+
+ Grapes
+ Strawberries
+ Pineapple
+ Cherries
+
+```
diff --git a/static/usage/v7/radio/basic/react.md b/static/usage/v7/radio/basic/react.md
new file mode 100644
index 00000000000..f826499e307
--- /dev/null
+++ b/static/usage/v7/radio/basic/react.md
@@ -0,0 +1,16 @@
+```tsx
+import React from 'react';
+import { IonRadio, IonRadioGroup } from '@ionic/react';
+
+function Example() {
+ return (
+
+ Grapes
+ Strawberries
+ Pineapple
+ Cherries
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/radio/basic/vue.md b/static/usage/v7/radio/basic/vue.md
new file mode 100644
index 00000000000..cf4878155af
--- /dev/null
+++ b/static/usage/v7/radio/basic/vue.md
@@ -0,0 +1,19 @@
+```html
+
+
+ Grapes
+ Strawberries
+ Pineapple
+ Cherries
+
+
+
+
+```
diff --git a/static/usage/v7/radio/empty-selection/angular.md b/static/usage/v7/radio/empty-selection/angular.md
new file mode 100644
index 00000000000..61e5c0d4e4b
--- /dev/null
+++ b/static/usage/v7/radio/empty-selection/angular.md
@@ -0,0 +1,8 @@
+```html
+
+ Dogs
+ Cats
+ Turtles
+ Fish
+
+```
diff --git a/static/usage/v7/radio/empty-selection/demo.html b/static/usage/v7/radio/empty-selection/demo.html
new file mode 100644
index 00000000000..93daaeba65c
--- /dev/null
+++ b/static/usage/v7/radio/empty-selection/demo.html
@@ -0,0 +1,29 @@
+
+
+
+
+
+
+ Radio
+
+
+
+
+
+
+
+
+
+
+
+ Dogs
+ Cats
+ Turtles
+ Fish
+
+
+
+
+
+
+
diff --git a/static/usage/v7/radio/empty-selection/index.md b/static/usage/v7/radio/empty-selection/index.md
new file mode 100644
index 00000000000..e2f9b7a8613
--- /dev/null
+++ b/static/usage/v7/radio/empty-selection/index.md
@@ -0,0 +1,12 @@
+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/radio/empty-selection/javascript.md b/static/usage/v7/radio/empty-selection/javascript.md
new file mode 100644
index 00000000000..0a045fc9bb1
--- /dev/null
+++ b/static/usage/v7/radio/empty-selection/javascript.md
@@ -0,0 +1,8 @@
+```html
+
+ Dogs
+ Cats
+ Turtles
+ Fish
+
+```
diff --git a/static/usage/v7/radio/empty-selection/react.md b/static/usage/v7/radio/empty-selection/react.md
new file mode 100644
index 00000000000..a5509313782
--- /dev/null
+++ b/static/usage/v7/radio/empty-selection/react.md
@@ -0,0 +1,16 @@
+```tsx
+import React from 'react';
+import { IonRadio, IonRadioGroup } from '@ionic/react';
+
+function Example() {
+ return (
+
+ Dogs
+ Cats
+ Turtles
+ Fish
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/radio/empty-selection/vue.md b/static/usage/v7/radio/empty-selection/vue.md
new file mode 100644
index 00000000000..b80bac834b6
--- /dev/null
+++ b/static/usage/v7/radio/empty-selection/vue.md
@@ -0,0 +1,19 @@
+```html
+
+
+ Dogs
+ Cats
+ Turtles
+ Fish
+
+
+
+
+```
diff --git a/static/usage/v7/radio/justify/angular.md b/static/usage/v7/radio/justify/angular.md
new file mode 100644
index 00000000000..8ca8e3c568b
--- /dev/null
+++ b/static/usage/v7/radio/justify/angular.md
@@ -0,0 +1,21 @@
+```html
+
+
+
+ Packed at the Start of Line
+
+
+
+
+
+ Packed at the End of Line
+
+
+
+
+
+ Space Between Label and Control
+
+
+
+```
diff --git a/static/usage/v7/radio/justify/demo.html b/static/usage/v7/radio/justify/demo.html
new file mode 100644
index 00000000000..a7047195d20
--- /dev/null
+++ b/static/usage/v7/radio/justify/demo.html
@@ -0,0 +1,46 @@
+
+
+
+
+
+
+ Radio
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Packed at the Start of Line
+
+
+
+
+
+ Packed at the End of Line
+
+
+
+
+
+ Space Between Label and Control
+
+
+
+
+
+
+
+
diff --git a/static/usage/v7/radio/justify/index.md b/static/usage/v7/radio/justify/index.md
new file mode 100644
index 00000000000..3105943de6f
--- /dev/null
+++ b/static/usage/v7/radio/justify/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/radio/justify/javascript.md b/static/usage/v7/radio/justify/javascript.md
new file mode 100644
index 00000000000..8ca8e3c568b
--- /dev/null
+++ b/static/usage/v7/radio/justify/javascript.md
@@ -0,0 +1,21 @@
+```html
+
+
+
+ Packed at the Start of Line
+
+
+
+
+
+ Packed at the End of Line
+
+
+
+
+
+ Space Between Label and Control
+
+
+
+```
diff --git a/static/usage/v7/radio/justify/react.md b/static/usage/v7/radio/justify/react.md
new file mode 100644
index 00000000000..629c7d896ac
--- /dev/null
+++ b/static/usage/v7/radio/justify/react.md
@@ -0,0 +1,29 @@
+```tsx
+import React from 'react';
+import { IonItem, IonList, IonRadio, IonRadioGroup } from '@ionic/react';
+
+function Example() {
+ return (
+
+
+
+ Packed at the Start of Line
+
+
+
+
+
+ Packed at the End of Line
+
+
+
+
+
+ Space Between Label and Control
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/radio/justify/vue.md b/static/usage/v7/radio/justify/vue.md
new file mode 100644
index 00000000000..3921f552a39
--- /dev/null
+++ b/static/usage/v7/radio/justify/vue.md
@@ -0,0 +1,32 @@
+```html
+
+
+
+
+ Packed at the Start of Line
+
+
+
+
+
+ Packed at the End of Line
+
+
+
+
+
+ Space Between Label and Control
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/radio/label-placement/angular.md b/static/usage/v7/radio/label-placement/angular.md
new file mode 100644
index 00000000000..9caedfee363
--- /dev/null
+++ b/static/usage/v7/radio/label-placement/angular.md
@@ -0,0 +1,17 @@
+```html
+
+ Label at the Start
+
+
+
+
+
+ Label at the End
+
+
+
+
+
+ Fixed Width Label
+
+```
diff --git a/static/usage/v7/radio/label-placement/demo.html b/static/usage/v7/radio/label-placement/demo.html
new file mode 100644
index 00000000000..ebdfc5ae5c5
--- /dev/null
+++ b/static/usage/v7/radio/label-placement/demo.html
@@ -0,0 +1,40 @@
+
+
+
+
+
+
+ Radio
+
+
+
+
+
+
+
+
+
+
+
+
+ Label at the Start
+
+
+
+
+
+ Label at the End
+
+
+
+
+
+ Fixed Width Label
+
+
+
+
+
+ Label at the End
+
+
+
+
+
+ Fixed Width Label
+
+```
diff --git a/static/usage/v7/radio/label-placement/react.md b/static/usage/v7/radio/label-placement/react.md
new file mode 100644
index 00000000000..9771d026953
--- /dev/null
+++ b/static/usage/v7/radio/label-placement/react.md
@@ -0,0 +1,27 @@
+```tsx
+import React from 'react';
+import { IonRadio, IonRadioGroup } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+ Label at the Start
+
+
+
+
+
+ Label at the End
+
+
+
+
+
+ Fixed Width Label
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/radio/label-placement/vue.md b/static/usage/v7/radio/label-placement/vue.md
new file mode 100644
index 00000000000..02403f2fdd7
--- /dev/null
+++ b/static/usage/v7/radio/label-placement/vue.md
@@ -0,0 +1,28 @@
+```html
+
+
+ Label at the Start
+
+
+
+
+
+ Label at the End
+
+
+
+
+
+ Fixed Width Label
+
+
+
+
+```
diff --git a/static/usage/v7/radio/migration/index.md b/static/usage/v7/radio/migration/index.md
new file mode 100644
index 00000000000..4c0477f1e4a
--- /dev/null
+++ b/static/usage/v7/radio/migration/index.md
@@ -0,0 +1,188 @@
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+````mdx-code-block
+
+
+
+```html
+
+
+
+
+ Radio Label
+
+
+
+
+
+ Radio Label
+
+
+
+
+
+
+ Radio Label
+
+
+
+
+
+ Radio Label
+
+
+
+
+
+
+ Radio Label
+
+
+
+
+
+ Radio Label
+
+```
+
+
+
+```html
+
+
+
+
+ Radio Label
+
+
+
+
+
+ Radio Label
+
+
+
+
+
+
+ Radio Label
+
+
+
+
+
+ Radio Label
+
+
+
+
+
+
+ Radio Label
+
+
+
+
+
+ Radio Label
+
+```
+
+
+
+```tsx
+{/* Basic */}
+
+{/* Before */}
+
+ Radio Label
+
+
+
+{/* After */}
+
+ Radio Label
+
+
+{/* Fixed Labels */}
+
+{/* Before */}
+
+ Radio Label
+
+
+
+{/* After */}
+
+ Radio Label
+
+
+{/* Radio at the start of line, Label at the end of line */}
+
+{/* Before */}
+
+ Radio Label
+
+
+
+{/* After */}
+
+ Radio Label
+
+```
+
+
+
+```html
+
+
+
+
+ Radio Label
+
+
+
+
+
+ Radio Label
+
+
+
+
+
+
+ Radio Label
+
+
+
+
+
+ Radio Label
+
+
+
+
+
+
+ Radio Label
+
+
+
+
+
+ Radio Label
+
+```
+
+
+````
diff --git a/static/usage/v7/radio/theming/colors/angular.md b/static/usage/v7/radio/theming/colors/angular.md
new file mode 100644
index 00000000000..d3389196bfa
--- /dev/null
+++ b/static/usage/v7/radio/theming/colors/angular.md
@@ -0,0 +1,29 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/radio/theming/colors/demo.html b/static/usage/v7/radio/theming/colors/demo.html
new file mode 100644
index 00000000000..074f427ef1a
--- /dev/null
+++ b/static/usage/v7/radio/theming/colors/demo.html
@@ -0,0 +1,50 @@
+
+
+
+
+
+
+ Radio
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v7/radio/theming/colors/index.md b/static/usage/v7/radio/theming/colors/index.md
new file mode 100644
index 00000000000..3cd9a87cdb8
--- /dev/null
+++ b/static/usage/v7/radio/theming/colors/index.md
@@ -0,0 +1,13 @@
+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/radio/theming/colors/javascript.md b/static/usage/v7/radio/theming/colors/javascript.md
new file mode 100644
index 00000000000..d3389196bfa
--- /dev/null
+++ b/static/usage/v7/radio/theming/colors/javascript.md
@@ -0,0 +1,29 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/radio/theming/colors/react.md b/static/usage/v7/radio/theming/colors/react.md
new file mode 100644
index 00000000000..cccf60c87da
--- /dev/null
+++ b/static/usage/v7/radio/theming/colors/react.md
@@ -0,0 +1,39 @@
+```tsx
+import React from 'react';
+import { IonRadio, IonRadioGroup } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/radio/theming/colors/vue.md b/static/usage/v7/radio/theming/colors/vue.md
new file mode 100644
index 00000000000..74b8aa3a73e
--- /dev/null
+++ b/static/usage/v7/radio/theming/colors/vue.md
@@ -0,0 +1,40 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/radio/theming/css-properties/angular/example_component_css.md b/static/usage/v7/radio/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..fa96171282e
--- /dev/null
+++ b/static/usage/v7/radio/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,21 @@
+```css
+ion-radio {
+ --border-radius: 4px;
+ --inner-border-radius: 4px;
+
+ --color: #ddd;
+ --color-checked: #6815ec;
+}
+
+ion-radio.ios::part(container) {
+ width: 20px;
+ height: 20px;
+
+ border: 2px solid #ddd;
+ border-radius: 4px;
+}
+
+.radio-checked.ios::part(container) {
+ border-color: #6815ec;
+}
+```
diff --git a/static/usage/v7/radio/theming/css-properties/angular/example_component_html.md b/static/usage/v7/radio/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..31e21f3f19b
--- /dev/null
+++ b/static/usage/v7/radio/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,6 @@
+```html
+
+
+
+
+```
diff --git a/static/usage/v7/radio/theming/css-properties/demo.html b/static/usage/v7/radio/theming/css-properties/demo.html
new file mode 100644
index 00000000000..5a2d6781802
--- /dev/null
+++ b/static/usage/v7/radio/theming/css-properties/demo.html
@@ -0,0 +1,49 @@
+
+
+
+
+
+
+ Radio
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v7/radio/theming/css-properties/index.md b/static/usage/v7/radio/theming/css-properties/index.md
new file mode 100644
index 00000000000..032b2ee66c9
--- /dev/null
+++ b/static/usage/v7/radio/theming/css-properties/index.md
@@ -0,0 +1,33 @@
+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/radio/theming/css-properties/javascript.md b/static/usage/v7/radio/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..8fd97c95589
--- /dev/null
+++ b/static/usage/v7/radio/theming/css-properties/javascript.md
@@ -0,0 +1,28 @@
+```html
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/radio/theming/css-properties/react/main_css.md b/static/usage/v7/radio/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..fa96171282e
--- /dev/null
+++ b/static/usage/v7/radio/theming/css-properties/react/main_css.md
@@ -0,0 +1,21 @@
+```css
+ion-radio {
+ --border-radius: 4px;
+ --inner-border-radius: 4px;
+
+ --color: #ddd;
+ --color-checked: #6815ec;
+}
+
+ion-radio.ios::part(container) {
+ width: 20px;
+ height: 20px;
+
+ border: 2px solid #ddd;
+ border-radius: 4px;
+}
+
+.radio-checked.ios::part(container) {
+ border-color: #6815ec;
+}
+```
diff --git a/static/usage/v7/radio/theming/css-properties/react/main_tsx.md b/static/usage/v7/radio/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..2a0c72670a3
--- /dev/null
+++ b/static/usage/v7/radio/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,16 @@
+```tsx
+import React from 'react';
+import { IonRadio, IonRadioGroup } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/radio/theming/css-properties/vue.md b/static/usage/v7/radio/theming/css-properties/vue.md
new file mode 100644
index 00000000000..515876a8014
--- /dev/null
+++ b/static/usage/v7/radio/theming/css-properties/vue.md
@@ -0,0 +1,39 @@
+```html
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/radio/theming/css-shadow-parts/angular/example_component_css.md b/static/usage/v7/radio/theming/css-shadow-parts/angular/example_component_css.md
new file mode 100644
index 00000000000..ddc4bcc18ea
--- /dev/null
+++ b/static/usage/v7/radio/theming/css-shadow-parts/angular/example_component_css.md
@@ -0,0 +1,32 @@
+```css
+ion-radio::part(container) {
+ width: 30px;
+ height: 30px;
+
+ border-radius: 8px;
+ border: 2px solid #ddd;
+}
+
+ion-radio::part(mark) {
+ background: none;
+ transition: none;
+ transform: none;
+ border-radius: 0;
+}
+
+ion-radio.radio-checked::part(container) {
+ background: #6815ec;
+ border-color: transparent;
+}
+
+ion-radio.radio-checked::part(mark) {
+ width: 6px;
+ height: 10px;
+
+ border-width: 0px 2px 2px 0px;
+ border-style: solid;
+ border-color: #fff;
+
+ transform: rotate(45deg);
+}
+```
diff --git a/static/usage/v7/radio/theming/css-shadow-parts/angular/example_component_html.md b/static/usage/v7/radio/theming/css-shadow-parts/angular/example_component_html.md
new file mode 100644
index 00000000000..31e21f3f19b
--- /dev/null
+++ b/static/usage/v7/radio/theming/css-shadow-parts/angular/example_component_html.md
@@ -0,0 +1,6 @@
+```html
+
+
+
+
+```
diff --git a/static/usage/v7/radio/theming/css-shadow-parts/demo.html b/static/usage/v7/radio/theming/css-shadow-parts/demo.html
new file mode 100644
index 00000000000..218826c34b2
--- /dev/null
+++ b/static/usage/v7/radio/theming/css-shadow-parts/demo.html
@@ -0,0 +1,60 @@
+
+
+
+
+
+
+ Radio
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v7/radio/theming/css-shadow-parts/index.md b/static/usage/v7/radio/theming/css-shadow-parts/index.md
new file mode 100644
index 00000000000..92071383efc
--- /dev/null
+++ b/static/usage/v7/radio/theming/css-shadow-parts/index.md
@@ -0,0 +1,33 @@
+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/radio/theming/css-shadow-parts/javascript.md b/static/usage/v7/radio/theming/css-shadow-parts/javascript.md
new file mode 100644
index 00000000000..3a9f9c7ccc6
--- /dev/null
+++ b/static/usage/v7/radio/theming/css-shadow-parts/javascript.md
@@ -0,0 +1,39 @@
+```html
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/radio/theming/css-shadow-parts/react/main_css.md b/static/usage/v7/radio/theming/css-shadow-parts/react/main_css.md
new file mode 100644
index 00000000000..ddc4bcc18ea
--- /dev/null
+++ b/static/usage/v7/radio/theming/css-shadow-parts/react/main_css.md
@@ -0,0 +1,32 @@
+```css
+ion-radio::part(container) {
+ width: 30px;
+ height: 30px;
+
+ border-radius: 8px;
+ border: 2px solid #ddd;
+}
+
+ion-radio::part(mark) {
+ background: none;
+ transition: none;
+ transform: none;
+ border-radius: 0;
+}
+
+ion-radio.radio-checked::part(container) {
+ background: #6815ec;
+ border-color: transparent;
+}
+
+ion-radio.radio-checked::part(mark) {
+ width: 6px;
+ height: 10px;
+
+ border-width: 0px 2px 2px 0px;
+ border-style: solid;
+ border-color: #fff;
+
+ transform: rotate(45deg);
+}
+```
diff --git a/static/usage/v7/radio/theming/css-shadow-parts/react/main_tsx.md b/static/usage/v7/radio/theming/css-shadow-parts/react/main_tsx.md
new file mode 100644
index 00000000000..2a0c72670a3
--- /dev/null
+++ b/static/usage/v7/radio/theming/css-shadow-parts/react/main_tsx.md
@@ -0,0 +1,16 @@
+```tsx
+import React from 'react';
+import { IonRadio, IonRadioGroup } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/radio/theming/css-shadow-parts/vue.md b/static/usage/v7/radio/theming/css-shadow-parts/vue.md
new file mode 100644
index 00000000000..24326a92a94
--- /dev/null
+++ b/static/usage/v7/radio/theming/css-shadow-parts/vue.md
@@ -0,0 +1,50 @@
+```html
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/range/basic/angular.md b/static/usage/v7/range/basic/angular.md
new file mode 100644
index 00000000000..ea96f2e2dd3
--- /dev/null
+++ b/static/usage/v7/range/basic/angular.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v7/range/basic/demo.html b/static/usage/v7/range/basic/demo.html
new file mode 100644
index 00000000000..fa741aae84b
--- /dev/null
+++ b/static/usage/v7/range/basic/demo.html
@@ -0,0 +1,29 @@
+
+
+
+
+
+
+ Range
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v7/range/basic/index.md b/static/usage/v7/range/basic/index.md
new file mode 100644
index 00000000000..59922df7eda
--- /dev/null
+++ b/static/usage/v7/range/basic/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/range/basic/javascript.md b/static/usage/v7/range/basic/javascript.md
new file mode 100644
index 00000000000..ea96f2e2dd3
--- /dev/null
+++ b/static/usage/v7/range/basic/javascript.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v7/range/basic/react.md b/static/usage/v7/range/basic/react.md
new file mode 100644
index 00000000000..ed85af943b5
--- /dev/null
+++ b/static/usage/v7/range/basic/react.md
@@ -0,0 +1,8 @@
+```tsx
+import React from 'react';
+import { IonRange } from '@ionic/react';
+function Example() {
+ return ;
+}
+export default Example;
+```
diff --git a/static/usage/v7/range/basic/vue.md b/static/usage/v7/range/basic/vue.md
new file mode 100644
index 00000000000..421bea060e4
--- /dev/null
+++ b/static/usage/v7/range/basic/vue.md
@@ -0,0 +1,14 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v7/range/dual-knobs/angular.md b/static/usage/v7/range/dual-knobs/angular.md
new file mode 100644
index 00000000000..96eb2e59a0e
--- /dev/null
+++ b/static/usage/v7/range/dual-knobs/angular.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v7/range/dual-knobs/demo.html b/static/usage/v7/range/dual-knobs/demo.html
new file mode 100644
index 00000000000..0ca60d5ad13
--- /dev/null
+++ b/static/usage/v7/range/dual-knobs/demo.html
@@ -0,0 +1,36 @@
+
+
+
+
+
+
+ Range
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v7/range/dual-knobs/index.md b/static/usage/v7/range/dual-knobs/index.md
new file mode 100644
index 00000000000..ead42b93ad6
--- /dev/null
+++ b/static/usage/v7/range/dual-knobs/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/range/dual-knobs/javascript.md b/static/usage/v7/range/dual-knobs/javascript.md
new file mode 100644
index 00000000000..3c182c98e5b
--- /dev/null
+++ b/static/usage/v7/range/dual-knobs/javascript.md
@@ -0,0 +1,11 @@
+```html
+
+
+
+```
diff --git a/static/usage/v7/range/dual-knobs/react.md b/static/usage/v7/range/dual-knobs/react.md
new file mode 100644
index 00000000000..cdc8fb17534
--- /dev/null
+++ b/static/usage/v7/range/dual-knobs/react.md
@@ -0,0 +1,17 @@
+```tsx
+import React from 'react';
+import { IonRange } from '@ionic/react';
+function Example() {
+ return (
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/range/dual-knobs/vue.md b/static/usage/v7/range/dual-knobs/vue.md
new file mode 100644
index 00000000000..5e23079bfa7
--- /dev/null
+++ b/static/usage/v7/range/dual-knobs/vue.md
@@ -0,0 +1,14 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v7/range/ion-change-event/angular/example_component_html.md b/static/usage/v7/range/ion-change-event/angular/example_component_html.md
new file mode 100644
index 00000000000..12a736de8dd
--- /dev/null
+++ b/static/usage/v7/range/ion-change-event/angular/example_component_html.md
@@ -0,0 +1,4 @@
+```html
+
+ionChange emitted value: {{ lastEmittedValue }}
+```
diff --git a/static/usage/v7/range/ion-change-event/angular/example_component_ts.md b/static/usage/v7/range/ion-change-event/angular/example_component_ts.md
new file mode 100644
index 00000000000..b90eff62d29
--- /dev/null
+++ b/static/usage/v7/range/ion-change-event/angular/example_component_ts.md
@@ -0,0 +1,18 @@
+```ts
+import { Component } from '@angular/core';
+
+import { RangeCustomEvent } from '@ionic/angular';
+import { RangeValue } from '@ionic/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ lastEmittedValue: RangeValue;
+
+ onIonChange(ev: Event) {
+ this.lastEmittedValue = (ev as RangeCustomEvent).detail.value;
+ }
+}
+```
diff --git a/static/usage/v7/range/ion-change-event/demo.html b/static/usage/v7/range/ion-change-event/demo.html
new file mode 100644
index 00000000000..f8e16912269
--- /dev/null
+++ b/static/usage/v7/range/ion-change-event/demo.html
@@ -0,0 +1,40 @@
+
+
+
+
+
+
+ Range
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ionChange emitted value:
+
+
+
+
+
+
+
diff --git a/static/usage/v7/range/ion-change-event/index.md b/static/usage/v7/range/ion-change-event/index.md
new file mode 100644
index 00000000000..c35324b9448
--- /dev/null
+++ b/static/usage/v7/range/ion-change-event/index.md
@@ -0,0 +1,24 @@
+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_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/v7/range/ion-change-event/javascript.md b/static/usage/v7/range/ion-change-event/javascript.md
new file mode 100644
index 00000000000..4aebeb2defa
--- /dev/null
+++ b/static/usage/v7/range/ion-change-event/javascript.md
@@ -0,0 +1,13 @@
+```html
+
+
ionChange emitted value:
+
+
+```
diff --git a/static/usage/v7/range/ion-change-event/react.md b/static/usage/v7/range/ion-change-event/react.md
new file mode 100644
index 00000000000..ff1826a5a80
--- /dev/null
+++ b/static/usage/v7/range/ion-change-event/react.md
@@ -0,0 +1,15 @@
+```tsx
+import React, { useState } from 'react';
+import { IonLabel, IonRange } from '@ionic/react';
+import { RangeValue } from '@ionic/core';
+function Example() {
+ const [lastEmittedValue, setLastEmittedValue] = useState
();
+ return (
+ <>
+ setLastEmittedValue(detail.value)}>
+ ionChange emitted value: {lastEmittedValue as number}
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/range/ion-change-event/vue.md b/static/usage/v7/range/ion-change-event/vue.md
new file mode 100644
index 00000000000..306682ab7db
--- /dev/null
+++ b/static/usage/v7/range/ion-change-event/vue.md
@@ -0,0 +1,25 @@
+```html
+
+
+ ionChange emitted value: {{lastEmittedValue}}
+
+
+
+```
diff --git a/static/usage/v7/range/ion-knob-move-event/angular/example_component_html.md b/static/usage/v7/range/ion-knob-move-event/angular/example_component_html.md
new file mode 100644
index 00000000000..dba19f00874
--- /dev/null
+++ b/static/usage/v7/range/ion-knob-move-event/angular/example_component_html.md
@@ -0,0 +1,9 @@
+```html
+
+
+ ionKnobMoveStart: {{ moveStart }}
+
+
+ ionKnobMoveEnd: {{ moveEnd }}
+
+```
diff --git a/static/usage/v7/range/ion-knob-move-event/angular/example_component_ts.md b/static/usage/v7/range/ion-knob-move-event/angular/example_component_ts.md
new file mode 100644
index 00000000000..e4b331a10f2
--- /dev/null
+++ b/static/usage/v7/range/ion-knob-move-event/angular/example_component_ts.md
@@ -0,0 +1,23 @@
+```ts
+import { Component } from '@angular/core';
+
+import { RangeCustomEvent } from '@ionic/angular';
+import { RangeValue } from '@ionic/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ moveStart: RangeValue;
+ moveEnd: RangeValue;
+
+ onIonKnobMoveStart(ev: Event) {
+ this.moveStart = (ev as RangeCustomEvent).detail.value;
+ }
+
+ onIonKnobMoveEnd(ev: Event) {
+ this.moveEnd = (ev as RangeCustomEvent).detail.value;
+ }
+}
+```
diff --git a/static/usage/v7/range/ion-knob-move-event/demo.html b/static/usage/v7/range/ion-knob-move-event/demo.html
new file mode 100644
index 00000000000..bfa71670d30
--- /dev/null
+++ b/static/usage/v7/range/ion-knob-move-event/demo.html
@@ -0,0 +1,50 @@
+
+
+
+
+
+
+ Range
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ionKnobMoveStart:
+
+
+ ionKnobMoveEnd:
+
+
+
+
+
+
+
+
diff --git a/static/usage/v7/range/ion-knob-move-event/index.md b/static/usage/v7/range/ion-knob-move-event/index.md
new file mode 100644
index 00000000000..772cf127ed2
--- /dev/null
+++ b/static/usage/v7/range/ion-knob-move-event/index.md
@@ -0,0 +1,24 @@
+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_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/v7/range/ion-knob-move-event/javascript.md b/static/usage/v7/range/ion-knob-move-event/javascript.md
new file mode 100644
index 00000000000..aacaac60e37
--- /dev/null
+++ b/static/usage/v7/range/ion-knob-move-event/javascript.md
@@ -0,0 +1,23 @@
+```html
+
+
+ ionKnobMoveStart:
+
+
+ ionKnobMoveEnd:
+
+
+
+```
diff --git a/static/usage/v7/range/ion-knob-move-event/react.md b/static/usage/v7/range/ion-knob-move-event/react.md
new file mode 100644
index 00000000000..f7f20048349
--- /dev/null
+++ b/static/usage/v7/range/ion-knob-move-event/react.md
@@ -0,0 +1,25 @@
+```tsx
+import React, { useState } from 'react';
+import { IonLabel, IonRange } from '@ionic/react';
+import { RangeValue } from '@ionic/core';
+function Example() {
+ const [moveStartValue, setMoveStartValue] = useState
();
+ const [moveEndValue, setMoveEndValue] = useState();
+ return (
+ <>
+ setMoveStartValue(detail.value)}
+ onIonKnobMoveEnd={({ detail }) => setMoveEndValue(detail.value)}
+ >
+
+ ionKnobMoveStart: {moveStartValue as number}
+
+
+ ionKnobMoveEnd: {moveEndValue as number}
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/range/ion-knob-move-event/vue.md b/static/usage/v7/range/ion-knob-move-event/vue.md
new file mode 100644
index 00000000000..67edb3c7e91
--- /dev/null
+++ b/static/usage/v7/range/ion-knob-move-event/vue.md
@@ -0,0 +1,34 @@
+```html
+
+
+
+ ionKnobMoveStart: {{moveStart}}
+
+
+ onIonKnobMoveEnd: {{moveEnd}}
+
+
+
+
+```
diff --git a/static/usage/v7/range/labels/angular.md b/static/usage/v7/range/labels/angular.md
new file mode 100644
index 00000000000..54964fa0d0c
--- /dev/null
+++ b/static/usage/v7/range/labels/angular.md
@@ -0,0 +1,17 @@
+```html
+
+ Label at the Start
+
+
+
+
+
+ Label at the End
+
+
+
+
+
+ Fixed Width Label
+
+```
diff --git a/static/usage/v7/range/labels/demo.html b/static/usage/v7/range/labels/demo.html
new file mode 100644
index 00000000000..13ba10fc27a
--- /dev/null
+++ b/static/usage/v7/range/labels/demo.html
@@ -0,0 +1,45 @@
+
+
+
+
+
+
+ Range
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Label at the Start
+
+
+
+
+
+ Label at the End
+
+
+
+
+
+ Fixed Width Label
+
+
+
Label at the Start
+
+
+
+
+
+ Label at the End
+
+
+
+
+
+ Fixed Width Label
+
+```
diff --git a/static/usage/v7/range/labels/react.md b/static/usage/v7/range/labels/react.md
new file mode 100644
index 00000000000..30df6a33349
--- /dev/null
+++ b/static/usage/v7/range/labels/react.md
@@ -0,0 +1,26 @@
+```tsx
+import React from 'react';
+import { IonRange } from '@ionic/react';
+function Example() {
+ return (
+ <>
+
+ Label at the Start
+
+
+
+
+
+ Label at the End
+
+
+
+
+
+ Fixed Width Label
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/range/labels/vue.md b/static/usage/v7/range/labels/vue.md
new file mode 100644
index 00000000000..70d90e834d5
--- /dev/null
+++ b/static/usage/v7/range/labels/vue.md
@@ -0,0 +1,28 @@
+```html
+
+
+ Label at the Start
+
+
+
+
+
+ Label at the End
+
+
+
+
+
+ Fixed Width Label
+
+
+
+
+```
diff --git a/static/usage/v7/range/migration/index.md b/static/usage/v7/range/migration/index.md
new file mode 100644
index 00000000000..eb44f072a3f
--- /dev/null
+++ b/static/usage/v7/range/migration/index.md
@@ -0,0 +1,212 @@
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+````mdx-code-block
+
+
+
+```html
+
+
+
+
+ Notifications
+
+
+
+
+
+
+ Notifications
+
+
+
+
+
+
+
+ Notifications
+
+
+
+
+
+
+ Notifications
+
+
+
+
+
+
+
+ Notifications
+
+
+
+
+
+
+ Notifications
+
+
+```
+
+
+
+```html
+
+
+
+
+ Notifications
+
+
+
+
+
+
+ Notifications
+
+
+
+
+
+
+
+ Notifications
+
+
+
+
+
+
+ Notifications
+
+
+
+
+
+
+
+ Notifications
+
+
+
+
+
+
+ Notifications
+
+
+```
+
+
+
+```tsx
+{/* Basic */}
+
+{/* Before */}
+
+ Notifications
+
+
+
+{/* After */}
+
+
+ Notifications
+
+
+
+{/* Fixed Labels */}
+
+{/* Before */}
+
+ Notifications
+
+
+
+{/* After */}
+
+
+ Notifications
+
+
+
+{/* Range at the start of line, Label at the end of line */}
+
+{/* Before */}
+
+ Notifications
+
+
+
+{/* After */}
+
+
+ Notifications
+
+
+```
+
+
+
+```html
+
+
+
+
+ Notifications
+
+
+
+
+
+
+ Notifications
+
+
+
+
+
+
+
+ Notifications
+
+
+
+
+
+
+ Notifications
+
+
+
+
+
+
+
+ Notifications
+
+
+
+
+
+
+ Notifications
+
+
+```
+
+
+````
\ No newline at end of file
diff --git a/static/usage/v7/range/pins/angular/example_component_html.md b/static/usage/v7/range/pins/angular/example_component_html.md
new file mode 100644
index 00000000000..f27f095a636
--- /dev/null
+++ b/static/usage/v7/range/pins/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v7/range/pins/angular/example_component_ts.md b/static/usage/v7/range/pins/angular/example_component_ts.md
new file mode 100644
index 00000000000..8dc875e1bda
--- /dev/null
+++ b/static/usage/v7/range/pins/angular/example_component_ts.md
@@ -0,0 +1,13 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ pinFormatter(value: number) {
+ return `${value}%`;
+ }
+}
+```
diff --git a/static/usage/v7/range/pins/demo.html b/static/usage/v7/range/pins/demo.html
new file mode 100644
index 00000000000..be5fdfd5f75
--- /dev/null
+++ b/static/usage/v7/range/pins/demo.html
@@ -0,0 +1,35 @@
+
+
+
+
+
+
+ Range
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v7/range/pins/index.md b/static/usage/v7/range/pins/index.md
new file mode 100644
index 00000000000..2daa1c4e98b
--- /dev/null
+++ b/static/usage/v7/range/pins/index.md
@@ -0,0 +1,24 @@
+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_example_component_ts from './angular/example_component_ts.md';
+import angular_example_component_html from './angular/example_component_html.md';
+
+
diff --git a/static/usage/v7/range/pins/javascript.md b/static/usage/v7/range/pins/javascript.md
new file mode 100644
index 00000000000..494da8ff806
--- /dev/null
+++ b/static/usage/v7/range/pins/javascript.md
@@ -0,0 +1,10 @@
+```html
+
+
+
+```
diff --git a/static/usage/v7/range/pins/react.md b/static/usage/v7/range/pins/react.md
new file mode 100644
index 00000000000..478d3cd20ed
--- /dev/null
+++ b/static/usage/v7/range/pins/react.md
@@ -0,0 +1,8 @@
+```tsx
+import React from 'react';
+import { IonRange } from '@ionic/react';
+function Example() {
+ return `${value}%`}>;
+}
+export default Example;
+```
diff --git a/static/usage/v7/range/pins/vue.md b/static/usage/v7/range/pins/vue.md
new file mode 100644
index 00000000000..1fabf896c76
--- /dev/null
+++ b/static/usage/v7/range/pins/vue.md
@@ -0,0 +1,19 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v7/range/slots/angular.md b/static/usage/v7/range/slots/angular.md
new file mode 100644
index 00000000000..253663f6c6e
--- /dev/null
+++ b/static/usage/v7/range/slots/angular.md
@@ -0,0 +1,6 @@
+```html
+
+
+
+
+```
diff --git a/static/usage/v7/range/slots/demo.html b/static/usage/v7/range/slots/demo.html
new file mode 100644
index 00000000000..800f8cdc61d
--- /dev/null
+++ b/static/usage/v7/range/slots/demo.html
@@ -0,0 +1,32 @@
+
+
+
+
+
+
+ Range
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v7/range/slots/index.md b/static/usage/v7/range/slots/index.md
new file mode 100644
index 00000000000..511261e3678
--- /dev/null
+++ b/static/usage/v7/range/slots/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/range/slots/javascript.md b/static/usage/v7/range/slots/javascript.md
new file mode 100644
index 00000000000..253663f6c6e
--- /dev/null
+++ b/static/usage/v7/range/slots/javascript.md
@@ -0,0 +1,6 @@
+```html
+
+
+
+
+```
diff --git a/static/usage/v7/range/slots/react.md b/static/usage/v7/range/slots/react.md
new file mode 100644
index 00000000000..36a5228d0a1
--- /dev/null
+++ b/static/usage/v7/range/slots/react.md
@@ -0,0 +1,15 @@
+```tsx
+import React from 'react';
+import { IonRange, IonIcon } from '@ionic/react';
+import { snowOutline, sunnyOutline } from 'ionicons/icons';
+
+function Example() {
+ return (
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/range/slots/vue.md b/static/usage/v7/range/slots/vue.md
new file mode 100644
index 00000000000..57d8edeb2ca
--- /dev/null
+++ b/static/usage/v7/range/slots/vue.md
@@ -0,0 +1,24 @@
+```html
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/range/snapping-ticks/angular.md b/static/usage/v7/range/snapping-ticks/angular.md
new file mode 100644
index 00000000000..d52f5e4b119
--- /dev/null
+++ b/static/usage/v7/range/snapping-ticks/angular.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v7/range/snapping-ticks/demo.html b/static/usage/v7/range/snapping-ticks/demo.html
new file mode 100644
index 00000000000..a55b139a33c
--- /dev/null
+++ b/static/usage/v7/range/snapping-ticks/demo.html
@@ -0,0 +1,29 @@
+
+
+
+
+
+
+ Range
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v7/range/snapping-ticks/index.md b/static/usage/v7/range/snapping-ticks/index.md
new file mode 100644
index 00000000000..0fc7d22e2ec
--- /dev/null
+++ b/static/usage/v7/range/snapping-ticks/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/range/snapping-ticks/javascript.md b/static/usage/v7/range/snapping-ticks/javascript.md
new file mode 100644
index 00000000000..692bb3840a1
--- /dev/null
+++ b/static/usage/v7/range/snapping-ticks/javascript.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v7/range/snapping-ticks/react.md b/static/usage/v7/range/snapping-ticks/react.md
new file mode 100644
index 00000000000..aeeb784cfe6
--- /dev/null
+++ b/static/usage/v7/range/snapping-ticks/react.md
@@ -0,0 +1,8 @@
+```tsx
+import React from 'react';
+import { IonRange } from '@ionic/react';
+function Example() {
+ return ;
+}
+export default Example;
+```
diff --git a/static/usage/v7/range/snapping-ticks/vue.md b/static/usage/v7/range/snapping-ticks/vue.md
new file mode 100644
index 00000000000..69417e31d81
--- /dev/null
+++ b/static/usage/v7/range/snapping-ticks/vue.md
@@ -0,0 +1,14 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v7/range/theming/css-properties/angular/example_component_css.md b/static/usage/v7/range/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..bcc87bbf1b4
--- /dev/null
+++ b/static/usage/v7/range/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,12 @@
+```css
+ion-range {
+ --bar-background: #a2d2ff;
+ --bar-background-active: #bde0fe;
+ --bar-height: 8px;
+ --bar-border-radius: 8px;
+ --knob-background: #ffc8dd;
+ --knob-size: 40px;
+ --pin-background: #ffafcc;
+ --pin-color: #fff;
+}
+```
diff --git a/static/usage/v7/range/theming/css-properties/angular/example_component_html.md b/static/usage/v7/range/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..6c9011af30a
--- /dev/null
+++ b/static/usage/v7/range/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v7/range/theming/css-properties/demo.html b/static/usage/v7/range/theming/css-properties/demo.html
new file mode 100644
index 00000000000..af22e18133b
--- /dev/null
+++ b/static/usage/v7/range/theming/css-properties/demo.html
@@ -0,0 +1,38 @@
+
+
+
+
+
+
+ Range
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v7/range/theming/css-properties/index.md b/static/usage/v7/range/theming/css-properties/index.md
new file mode 100644
index 00000000000..380bd5204d7
--- /dev/null
+++ b/static/usage/v7/range/theming/css-properties/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/range/theming/css-properties/javascript.md b/static/usage/v7/range/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..790f13b53e2
--- /dev/null
+++ b/static/usage/v7/range/theming/css-properties/javascript.md
@@ -0,0 +1,16 @@
+```html
+
+
+
+```
diff --git a/static/usage/v7/range/theming/css-properties/react/main_css.md b/static/usage/v7/range/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..bcc87bbf1b4
--- /dev/null
+++ b/static/usage/v7/range/theming/css-properties/react/main_css.md
@@ -0,0 +1,12 @@
+```css
+ion-range {
+ --bar-background: #a2d2ff;
+ --bar-background-active: #bde0fe;
+ --bar-height: 8px;
+ --bar-border-radius: 8px;
+ --knob-background: #ffc8dd;
+ --knob-size: 40px;
+ --pin-background: #ffafcc;
+ --pin-color: #fff;
+}
+```
diff --git a/static/usage/v7/range/theming/css-properties/react/main_tsx.md b/static/usage/v7/range/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..958999027ab
--- /dev/null
+++ b/static/usage/v7/range/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,11 @@
+```tsx
+import React from 'react';
+import { IonRange } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return ;
+}
+export default Example;
+```
diff --git a/static/usage/v7/range/theming/css-properties/vue.md b/static/usage/v7/range/theming/css-properties/vue.md
new file mode 100644
index 00000000000..c6f7b058b7a
--- /dev/null
+++ b/static/usage/v7/range/theming/css-properties/vue.md
@@ -0,0 +1,27 @@
+```html
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/range/theming/css-shadow-parts/angular/example_component_css.md b/static/usage/v7/range/theming/css-shadow-parts/angular/example_component_css.md
new file mode 100644
index 00000000000..0092daad827
--- /dev/null
+++ b/static/usage/v7/range/theming/css-shadow-parts/angular/example_component_css.md
@@ -0,0 +1,43 @@
+```css
+ion-range::part(tick) {
+ background: #a2d2ff;
+}
+
+ion-range::part(tick-active) {
+ background: #bde0fe;
+}
+
+ion-range::part(pin) {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+
+ background: #ffafcc;
+ color: #fff;
+
+ border-radius: 50%;
+ transform: scale(1.01);
+
+ top: -20px;
+
+ min-width: 28px;
+ height: 28px;
+ transition: transform 120ms ease, background 120ms ease;
+}
+
+ion-range::part(pin)::before {
+ content: none;
+}
+
+ion-range::part(knob) {
+ background: #ffc8dd;
+}
+
+ion-range::part(bar) {
+ background: #a2d2ff;
+}
+
+ion-range::part(bar-active) {
+ background: #bde0fe;
+}
+```
diff --git a/static/usage/v7/range/theming/css-shadow-parts/angular/example_component_html.md b/static/usage/v7/range/theming/css-shadow-parts/angular/example_component_html.md
new file mode 100644
index 00000000000..5d41d25796b
--- /dev/null
+++ b/static/usage/v7/range/theming/css-shadow-parts/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v7/range/theming/css-shadow-parts/demo.html b/static/usage/v7/range/theming/css-shadow-parts/demo.html
new file mode 100644
index 00000000000..0f1af00c019
--- /dev/null
+++ b/static/usage/v7/range/theming/css-shadow-parts/demo.html
@@ -0,0 +1,71 @@
+
+
+
+
+
+
+ Range
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v7/range/theming/css-shadow-parts/index.md b/static/usage/v7/range/theming/css-shadow-parts/index.md
new file mode 100644
index 00000000000..4b384ac3d81
--- /dev/null
+++ b/static/usage/v7/range/theming/css-shadow-parts/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/range/theming/css-shadow-parts/javascript.md b/static/usage/v7/range/theming/css-shadow-parts/javascript.md
new file mode 100644
index 00000000000..87e968a80c8
--- /dev/null
+++ b/static/usage/v7/range/theming/css-shadow-parts/javascript.md
@@ -0,0 +1,47 @@
+```html
+
+
+
+```
diff --git a/static/usage/v7/range/theming/css-shadow-parts/react/main_css.md b/static/usage/v7/range/theming/css-shadow-parts/react/main_css.md
new file mode 100644
index 00000000000..0092daad827
--- /dev/null
+++ b/static/usage/v7/range/theming/css-shadow-parts/react/main_css.md
@@ -0,0 +1,43 @@
+```css
+ion-range::part(tick) {
+ background: #a2d2ff;
+}
+
+ion-range::part(tick-active) {
+ background: #bde0fe;
+}
+
+ion-range::part(pin) {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+
+ background: #ffafcc;
+ color: #fff;
+
+ border-radius: 50%;
+ transform: scale(1.01);
+
+ top: -20px;
+
+ min-width: 28px;
+ height: 28px;
+ transition: transform 120ms ease, background 120ms ease;
+}
+
+ion-range::part(pin)::before {
+ content: none;
+}
+
+ion-range::part(knob) {
+ background: #ffc8dd;
+}
+
+ion-range::part(bar) {
+ background: #a2d2ff;
+}
+
+ion-range::part(bar-active) {
+ background: #bde0fe;
+}
+```
diff --git a/static/usage/v7/range/theming/css-shadow-parts/react/main_tsx.md b/static/usage/v7/range/theming/css-shadow-parts/react/main_tsx.md
new file mode 100644
index 00000000000..c5a4905c59d
--- /dev/null
+++ b/static/usage/v7/range/theming/css-shadow-parts/react/main_tsx.md
@@ -0,0 +1,12 @@
+```tsx
+import React from 'react';
+import { IonRange } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return ;
+}
+
+export default Example;
+```
diff --git a/static/usage/v7/range/theming/css-shadow-parts/vue.md b/static/usage/v7/range/theming/css-shadow-parts/vue.md
new file mode 100644
index 00000000000..7c0c2247546
--- /dev/null
+++ b/static/usage/v7/range/theming/css-shadow-parts/vue.md
@@ -0,0 +1,58 @@
+```html
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/refresher/advanced/angular/example_component_css.md b/static/usage/v7/refresher/advanced/angular/example_component_css.md
new file mode 100644
index 00000000000..102c69d71f9
--- /dev/null
+++ b/static/usage/v7/refresher/advanced/angular/example_component_css.md
@@ -0,0 +1,11 @@
+```css
+ion-item {
+ --padding-start: 8px;
+}
+
+ion-icon {
+ font-size: 12px;
+ align-self: start;
+ margin: 15px 8px;
+}
+```
diff --git a/static/usage/v7/refresher/advanced/angular/example_component_html.md b/static/usage/v7/refresher/advanced/angular/example_component_html.md
new file mode 100644
index 00000000000..e724a1da71e
--- /dev/null
+++ b/static/usage/v7/refresher/advanced/angular/example_component_html.md
@@ -0,0 +1,23 @@
+```html
+
+
+ Pull to Refresh
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ item.name }}
+ New message from {{ item.name }}
+
+
+
+
+```
diff --git a/static/usage/v7/refresher/advanced/angular/example_component_ts.md b/static/usage/v7/refresher/advanced/angular/example_component_ts.md
new file mode 100644
index 00000000000..035069fc2a9
--- /dev/null
+++ b/static/usage/v7/refresher/advanced/angular/example_component_ts.md
@@ -0,0 +1,37 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['./example.component.css'],
+})
+export class ExampleComponent {
+ public names = ['Burt Bear', 'Charlie Cheetah', 'Donald Duck', 'Eva Eagle', 'Ellie Elephant', 'Gino Giraffe', 'Isabella Iguana', 'Karl Kitten', 'Lionel Lion', 'Molly Mouse', 'Paul Puppy', 'Rachel Rabbit', 'Ted Turtle'];
+ public items = [];
+
+ ngOnInit() {
+ this.addItems(5);
+ }
+
+ chooseRandomName() {
+ return this.names[Math.floor(Math.random() * this.names.length)];
+ }
+
+ addItems(count, unread = false) {
+ for (let i = 0; i < count; i++) {
+ this.items.unshift({
+ name: this.chooseRandomName(),
+ unread: unread
+ });
+ }
+ }
+
+ handleRefresh(event) {
+ setTimeout(() => {
+ this.addItems(3, true);
+ event.target.complete();
+ }, 2000);
+ };
+}
+```
diff --git a/static/usage/v7/refresher/advanced/demo.html b/static/usage/v7/refresher/advanced/demo.html
new file mode 100644
index 00000000000..8f0b2fbbe52
--- /dev/null
+++ b/static/usage/v7/refresher/advanced/demo.html
@@ -0,0 +1,99 @@
+
+
+
+
+
+
+ Refresher
+
+
+
+
+
+
+
+
+
+
+
+
+ Pull to Refresh
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/refresher/advanced/index.md b/static/usage/v7/refresher/advanced/index.md
new file mode 100644
index 00000000000..cfc19169444
--- /dev/null
+++ b/static/usage/v7/refresher/advanced/index.md
@@ -0,0 +1,36 @@
+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_ts from './angular/example_component_ts.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+
diff --git a/static/usage/v7/refresher/advanced/javascript.md b/static/usage/v7/refresher/advanced/javascript.md
new file mode 100644
index 00000000000..d05bed7cacf
--- /dev/null
+++ b/static/usage/v7/refresher/advanced/javascript.md
@@ -0,0 +1,68 @@
+```html
+
+
+ Pull to Refresh
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/refresher/advanced/react/main_css.md b/static/usage/v7/refresher/advanced/react/main_css.md
new file mode 100644
index 00000000000..102c69d71f9
--- /dev/null
+++ b/static/usage/v7/refresher/advanced/react/main_css.md
@@ -0,0 +1,11 @@
+```css
+ion-item {
+ --padding-start: 8px;
+}
+
+ion-icon {
+ font-size: 12px;
+ align-self: start;
+ margin: 15px 8px;
+}
+```
diff --git a/static/usage/v7/refresher/advanced/react/main_tsx.md b/static/usage/v7/refresher/advanced/react/main_tsx.md
new file mode 100644
index 00000000000..ab9596a2675
--- /dev/null
+++ b/static/usage/v7/refresher/advanced/react/main_tsx.md
@@ -0,0 +1,67 @@
+```tsx
+import React, { useEffect, useState } from 'react';
+import { IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonRefresher, IonRefresherContent, IonTitle, IonToolbar, RefresherEventDetail } from '@ionic/react';
+import { ellipse } from 'ionicons/icons';
+
+import './main.css';
+
+function Example() {
+ const names = ['Burt Bear', 'Charlie Cheetah', 'Donald Duck', 'Eva Eagle', 'Ellie Elephant', 'Gino Giraffe', 'Isabella Iguana', 'Karl Kitten', 'Lionel Lion', 'Molly Mouse', 'Paul Puppy', 'Rachel Rabbit', 'Ted Turtle'];
+ const [items, setItems] = useState<{name: string, unread: boolean}[]>([]);
+
+ let didInit = false;
+
+ useEffect(() => {
+ if (!didInit) {
+ didInit = true;
+ addItems(5);
+ }
+ }, []);
+
+ function handleRefresh(event: CustomEvent) {
+ setTimeout(() => {
+ addItems(3, true);
+ event.detail.complete();
+ }, 2000);
+ }
+
+ function chooseRandomName() {
+ return names[Math.floor(Math.random() * names.length)];
+ }
+
+ function addItems(count: number, unread = false) {
+ for (let i = 0; i < count; i++) {
+ setItems((current) => [{ name: chooseRandomName(), unread }, ...current]);
+ }
+ }
+
+ return (
+ <>
+
+
+ Pull to Refresh
+
+
+
+
+
+
+
+
+
+ { items.map((item) => (
+
+
+
+ { item.name }
+ New message from { item.name }
+
+
+ ))}
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/refresher/advanced/vue.md b/static/usage/v7/refresher/advanced/vue.md
new file mode 100644
index 00000000000..328bfcf00f1
--- /dev/null
+++ b/static/usage/v7/refresher/advanced/vue.md
@@ -0,0 +1,72 @@
+```html
+
+
+
+ Pull to Refresh
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ item.name }}
+ New message from {{ item.name }}
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/refresher/basic/angular/example_component_html.md b/static/usage/v7/refresher/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..f665c1c51a1
--- /dev/null
+++ b/static/usage/v7/refresher/basic/angular/example_component_html.md
@@ -0,0 +1,15 @@
+```html
+
+
+ Pull to Refresh
+
+
+
+
+
+
+
+
+ Pull this content down to trigger the refresh.
+
+```
diff --git a/static/usage/v7/refresher/basic/angular/example_component_ts.md b/static/usage/v7/refresher/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..efb168da9d4
--- /dev/null
+++ b/static/usage/v7/refresher/basic/angular/example_component_ts.md
@@ -0,0 +1,16 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ handleRefresh(event) {
+ setTimeout(() => {
+ // Any calls to load data go here
+ event.target.complete();
+ }, 2000);
+ };
+}
+```
diff --git a/static/usage/v7/refresher/basic/demo.html b/static/usage/v7/refresher/basic/demo.html
new file mode 100644
index 00000000000..9c378cad03e
--- /dev/null
+++ b/static/usage/v7/refresher/basic/demo.html
@@ -0,0 +1,43 @@
+
+
+
+
+
+
+ Refresher
+
+
+
+
+
+
+
+
+
+
+ Pull to Refresh
+
+
+
+
+
+
+
+
+ Pull this content down to trigger the refresh.
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/refresher/basic/index.md b/static/usage/v7/refresher/basic/index.md
new file mode 100644
index 00000000000..72a38f16267
--- /dev/null
+++ b/static/usage/v7/refresher/basic/index.md
@@ -0,0 +1,26 @@
+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_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/v7/refresher/basic/javascript.md b/static/usage/v7/refresher/basic/javascript.md
new file mode 100644
index 00000000000..565e1247624
--- /dev/null
+++ b/static/usage/v7/refresher/basic/javascript.md
@@ -0,0 +1,26 @@
+```html
+
+
+ Pull to Refresh
+
+
+
+
+
+
+
+
+ Pull this content down to trigger the refresh.
+
+
+
+```
diff --git a/static/usage/v7/refresher/basic/react.md b/static/usage/v7/refresher/basic/react.md
new file mode 100644
index 00000000000..8c828b090c7
--- /dev/null
+++ b/static/usage/v7/refresher/basic/react.md
@@ -0,0 +1,33 @@
+```tsx
+import React from 'react';
+import { IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar, RefresherEventDetail } from '@ionic/react';
+
+function Example() {
+
+ function handleRefresh(event: CustomEvent) {
+ setTimeout(() => {
+ // Any calls to load data go here
+ event.detail.complete();
+ }, 2000);
+ }
+
+ return (
+ <>
+
+
+ Pull to Refresh
+
+
+
+
+
+
+
+
+ Pull this content down to trigger the refresh.
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/refresher/basic/vue.md b/static/usage/v7/refresher/basic/vue.md
new file mode 100644
index 00000000000..870081dcfbf
--- /dev/null
+++ b/static/usage/v7/refresher/basic/vue.md
@@ -0,0 +1,36 @@
+```html
+
+
+
+ Pull to Refresh
+
+
+
+
+
+
+
+
+ Pull this content down to trigger the refresh.
+
+
+
+
+```
diff --git a/static/usage/v7/refresher/custom-content/angular/example_component_html.md b/static/usage/v7/refresher/custom-content/angular/example_component_html.md
new file mode 100644
index 00000000000..bca91e0a0d8
--- /dev/null
+++ b/static/usage/v7/refresher/custom-content/angular/example_component_html.md
@@ -0,0 +1,20 @@
+```html
+
+
+ Pull to Refresh
+
+
+
+
+
+
+
+
+
+ Pull this content down to trigger the refresh.
+
+```
diff --git a/static/usage/v7/refresher/custom-content/angular/example_component_ts.md b/static/usage/v7/refresher/custom-content/angular/example_component_ts.md
new file mode 100644
index 00000000000..efb168da9d4
--- /dev/null
+++ b/static/usage/v7/refresher/custom-content/angular/example_component_ts.md
@@ -0,0 +1,16 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ handleRefresh(event) {
+ setTimeout(() => {
+ // Any calls to load data go here
+ event.target.complete();
+ }, 2000);
+ };
+}
+```
diff --git a/static/usage/v7/refresher/custom-content/demo.html b/static/usage/v7/refresher/custom-content/demo.html
new file mode 100644
index 00000000000..084ad40e10d
--- /dev/null
+++ b/static/usage/v7/refresher/custom-content/demo.html
@@ -0,0 +1,45 @@
+
+
+
+
+
+
+ Refresher
+
+
+
+
+
+
+
+
+
+
+ Pull to Refresh
+
+
+
+
+
+
+
+
+
+ Pull this content down to trigger the refresh.
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/refresher/custom-content/index.md b/static/usage/v7/refresher/custom-content/index.md
new file mode 100644
index 00000000000..cd1bdf7e6bd
--- /dev/null
+++ b/static/usage/v7/refresher/custom-content/index.md
@@ -0,0 +1,26 @@
+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_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/v7/refresher/custom-content/javascript.md b/static/usage/v7/refresher/custom-content/javascript.md
new file mode 100644
index 00000000000..779bd97ed80
--- /dev/null
+++ b/static/usage/v7/refresher/custom-content/javascript.md
@@ -0,0 +1,31 @@
+```html
+
+
+ Pull to Refresh
+
+
+
+
+
+
+
+
+
+ Pull this content down to trigger the refresh.
+
+
+
+```
diff --git a/static/usage/v7/refresher/custom-content/react.md b/static/usage/v7/refresher/custom-content/react.md
new file mode 100644
index 00000000000..627f4981f56
--- /dev/null
+++ b/static/usage/v7/refresher/custom-content/react.md
@@ -0,0 +1,39 @@
+```tsx
+import React from 'react';
+import { IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar, RefresherEventDetail } from '@ionic/react';
+import { chevronDownCircleOutline } from 'ionicons/icons';
+
+function Example() {
+
+ function handleRefresh(event: CustomEvent) {
+ setTimeout(() => {
+ // Any calls to load data go here
+ event.detail.complete();
+ }, 2000);
+ }
+
+ return (
+ <>
+
+
+ Pull to Refresh
+
+
+
+
+
+
+
+
+
+ Pull this content down to trigger the refresh.
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/refresher/custom-content/vue.md b/static/usage/v7/refresher/custom-content/vue.md
new file mode 100644
index 00000000000..a5bb444fd91
--- /dev/null
+++ b/static/usage/v7/refresher/custom-content/vue.md
@@ -0,0 +1,42 @@
+```html
+
+
+
+ Pull to Refresh
+
+
+
+
+
+
+
+
+
+ Pull this content down to trigger the refresh.
+
+
+
+
+```
diff --git a/static/usage/v7/refresher/custom-scroll-target/angular/example_component_css.md b/static/usage/v7/refresher/custom-scroll-target/angular/example_component_css.md
new file mode 100644
index 00000000000..5fe74c95f50
--- /dev/null
+++ b/static/usage/v7/refresher/custom-scroll-target/angular/example_component_css.md
@@ -0,0 +1,10 @@
+```css
+.ion-content-scroll-host {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 100%;
+ width: 100%;
+ overflow-y: auto;
+}
+```
diff --git a/static/usage/v7/refresher/custom-scroll-target/angular/example_component_html.md b/static/usage/v7/refresher/custom-scroll-target/angular/example_component_html.md
new file mode 100644
index 00000000000..4c0e2cddc16
--- /dev/null
+++ b/static/usage/v7/refresher/custom-scroll-target/angular/example_component_html.md
@@ -0,0 +1,17 @@
+```html
+
+
+ Pull to Refresh
+
+
+
+
+
+
+
+
+
+
Pull this content down to trigger the refresh.
+
+
Pull this content down to trigger the refresh.
+
+
Pull this content down to trigger the refresh.
+
+
Pull this content down to trigger the refresh.
+
+
Pull this content down to trigger the refresh.
+
Pull this content down to trigger the refresh.
+
+```
diff --git a/static/usage/v7/refresher/pull-properties/angular/example_component_ts.md b/static/usage/v7/refresher/pull-properties/angular/example_component_ts.md
new file mode 100644
index 00000000000..efb168da9d4
--- /dev/null
+++ b/static/usage/v7/refresher/pull-properties/angular/example_component_ts.md
@@ -0,0 +1,16 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ handleRefresh(event) {
+ setTimeout(() => {
+ // Any calls to load data go here
+ event.target.complete();
+ }, 2000);
+ };
+}
+```
diff --git a/static/usage/v7/refresher/pull-properties/demo.html b/static/usage/v7/refresher/pull-properties/demo.html
new file mode 100644
index 00000000000..3d8e940a636
--- /dev/null
+++ b/static/usage/v7/refresher/pull-properties/demo.html
@@ -0,0 +1,43 @@
+
+
+
+
+
+
+ Refresher
+
+
+
+
+
+
+
+
+
+
+ Pull to Refresh
+
+
+
+
+
+
+
+
+ Pull this content down to trigger the refresh.
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/refresher/pull-properties/index.md b/static/usage/v7/refresher/pull-properties/index.md
new file mode 100644
index 00000000000..f4db4363d91
--- /dev/null
+++ b/static/usage/v7/refresher/pull-properties/index.md
@@ -0,0 +1,26 @@
+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_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/v7/refresher/pull-properties/javascript.md b/static/usage/v7/refresher/pull-properties/javascript.md
new file mode 100644
index 00000000000..8bc8b286566
--- /dev/null
+++ b/static/usage/v7/refresher/pull-properties/javascript.md
@@ -0,0 +1,26 @@
+```html
+
+
+ Pull to Refresh
+
+
+
+
+
+
+
+
+ Pull this content down to trigger the refresh.
+
+
+
+```
diff --git a/static/usage/v7/refresher/pull-properties/react.md b/static/usage/v7/refresher/pull-properties/react.md
new file mode 100644
index 00000000000..73f5a65b07a
--- /dev/null
+++ b/static/usage/v7/refresher/pull-properties/react.md
@@ -0,0 +1,33 @@
+```tsx
+import React from 'react';
+import { IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar, RefresherEventDetail } from '@ionic/react';
+
+function Example() {
+
+ function handleRefresh(event: CustomEvent) {
+ setTimeout(() => {
+ // Any calls to load data go here
+ event.detail.complete();
+ }, 2000);
+ }
+
+ return (
+ <>
+
+
+ Pull to Refresh
+
+
+
+
+
+
+
+
+ Pull this content down to trigger the refresh.
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/refresher/pull-properties/vue.md b/static/usage/v7/refresher/pull-properties/vue.md
new file mode 100644
index 00000000000..0d3e1b45e9f
--- /dev/null
+++ b/static/usage/v7/refresher/pull-properties/vue.md
@@ -0,0 +1,36 @@
+```html
+
+
+
+ Pull to Refresh
+
+
+
+
+
+
+
+
+ Pull this content down to trigger the refresh.
+
+
+
+
+```
diff --git a/static/usage/v7/reorder/basic/angular/example_component_html.md b/static/usage/v7/reorder/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..0a02fe2563d
--- /dev/null
+++ b/static/usage/v7/reorder/basic/angular/example_component_html.md
@@ -0,0 +1,42 @@
+```html
+
+
+
+
+
+
+ Item 1
+
+
+
+
+
+
+ Item 2
+
+
+
+
+
+
+ Item 3
+
+
+
+
+
+
+ Item 4
+
+
+
+
+
+
+ Item 5
+
+
+
+
+
+```
diff --git a/static/usage/v7/reorder/basic/angular/example_component_ts.md b/static/usage/v7/reorder/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..6fdf85ed614
--- /dev/null
+++ b/static/usage/v7/reorder/basic/angular/example_component_ts.md
@@ -0,0 +1,22 @@
+```ts
+import { Component } from '@angular/core';
+
+import { ItemReorderEventDetail } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html'
+})
+export class ExampleComponent {
+ handleReorder(ev: CustomEvent) {
+ // The `from` and `to` properties contain the index of the item
+ // when the drag started and ended, respectively
+ console.log('Dragged from index', ev.detail.from, 'to', ev.detail.to);
+
+ // Finish the reorder and position the item in the DOM based on
+ // where the gesture ended. This method can also be called directly
+ // by the reorder group
+ ev.detail.complete();
+ }
+}
+```
diff --git a/static/usage/v7/reorder/basic/demo.html b/static/usage/v7/reorder/basic/demo.html
new file mode 100644
index 00000000000..7d721cc2790
--- /dev/null
+++ b/static/usage/v7/reorder/basic/demo.html
@@ -0,0 +1,83 @@
+
+
+
+
+
+
+ Reorder
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Item 1
+
+
+
+
+
+
+ Item 2
+
+
+
+
+
+
+ Item 3
+
+
+
+
+
+
+ Item 4
+
+
+
+
+
+
+ Item 5
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/reorder/basic/index.md b/static/usage/v7/reorder/basic/index.md
new file mode 100644
index 00000000000..c0d1f352954
--- /dev/null
+++ b/static/usage/v7/reorder/basic/index.md
@@ -0,0 +1,25 @@
+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_example_component_ts from './angular/example_component_ts.md';
+import angular_example_component_html from './angular/example_component_html.md';
+
+
diff --git a/static/usage/v7/reorder/basic/javascript.md b/static/usage/v7/reorder/basic/javascript.md
new file mode 100644
index 00000000000..0d7a09f9818
--- /dev/null
+++ b/static/usage/v7/reorder/basic/javascript.md
@@ -0,0 +1,56 @@
+```html
+
+
+
+
+
+ Item 1
+
+
+
+
+
+
+ Item 2
+
+
+
+
+
+
+ Item 3
+
+
+
+
+
+
+ Item 4
+
+
+
+
+
+
+ Item 5
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/reorder/basic/react.md b/static/usage/v7/reorder/basic/react.md
new file mode 100644
index 00000000000..179ee82a782
--- /dev/null
+++ b/static/usage/v7/reorder/basic/react.md
@@ -0,0 +1,60 @@
+```tsx
+import React from 'react';
+import { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, ItemReorderEventDetail } from '@ionic/react';
+
+function Example() {
+ function handleReorder(event: CustomEvent) {
+ // The `from` and `to` properties contain the index of the item
+ // when the drag started and ended, respectively
+ console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
+
+ // Finish the reorder and position the item in the DOM based on
+ // where the gesture ended. This method can also be called directly
+ // by the reorder group
+ event.detail.complete();
+ }
+
+ return (
+
+ {/* The reorder gesture is disabled by default, enable it to drag and drop items */}
+
+
+
+ Item 1
+
+
+
+
+
+
+ Item 2
+
+
+
+
+
+
+ Item 3
+
+
+
+
+
+
+ Item 4
+
+
+
+
+
+
+ Item 5
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/reorder/basic/vue.md b/static/usage/v7/reorder/basic/vue.md
new file mode 100644
index 00000000000..5a861e1dc26
--- /dev/null
+++ b/static/usage/v7/reorder/basic/vue.md
@@ -0,0 +1,66 @@
+```html
+
+
+
+
+
+
+ Item 1
+
+
+
+
+
+
+ Item 2
+
+
+
+
+
+
+ Item 3
+
+
+
+
+
+
+ Item 4
+
+
+
+
+
+
+ Item 5
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/reorder/custom-icon/angular/example_component_html.md b/static/usage/v7/reorder/custom-icon/angular/example_component_html.md
new file mode 100644
index 00000000000..12473b3a04a
--- /dev/null
+++ b/static/usage/v7/reorder/custom-icon/angular/example_component_html.md
@@ -0,0 +1,52 @@
+```html
+
+
+
+
+
+
+ Item 1
+
+
+
+
+
+
+
+
+ Item 2
+
+
+
+
+
+
+
+
+ Item 3
+
+
+
+
+
+
+
+
+ Item 4
+
+
+
+
+
+
+
+
+ Item 5
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/reorder/custom-icon/angular/example_component_ts.md b/static/usage/v7/reorder/custom-icon/angular/example_component_ts.md
new file mode 100644
index 00000000000..6fdf85ed614
--- /dev/null
+++ b/static/usage/v7/reorder/custom-icon/angular/example_component_ts.md
@@ -0,0 +1,22 @@
+```ts
+import { Component } from '@angular/core';
+
+import { ItemReorderEventDetail } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html'
+})
+export class ExampleComponent {
+ handleReorder(ev: CustomEvent) {
+ // The `from` and `to` properties contain the index of the item
+ // when the drag started and ended, respectively
+ console.log('Dragged from index', ev.detail.from, 'to', ev.detail.to);
+
+ // Finish the reorder and position the item in the DOM based on
+ // where the gesture ended. This method can also be called directly
+ // by the reorder group
+ ev.detail.complete();
+ }
+}
+```
diff --git a/static/usage/v7/reorder/custom-icon/demo.html b/static/usage/v7/reorder/custom-icon/demo.html
new file mode 100644
index 00000000000..1d9ad3dd39e
--- /dev/null
+++ b/static/usage/v7/reorder/custom-icon/demo.html
@@ -0,0 +1,93 @@
+
+
+
+
+
+
+ Reorder
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Item 1
+
+
+
+
+
+
+
+
+ Item 2
+
+
+
+
+
+
+
+
+ Item 3
+
+
+
+
+
+
+
+
+ Item 4
+
+
+
+
+
+
+
+
+ Item 5
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/reorder/custom-icon/index.md b/static/usage/v7/reorder/custom-icon/index.md
new file mode 100644
index 00000000000..bd827c68936
--- /dev/null
+++ b/static/usage/v7/reorder/custom-icon/index.md
@@ -0,0 +1,25 @@
+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_example_component_ts from './angular/example_component_ts.md';
+import angular_example_component_html from './angular/example_component_html.md';
+
+
diff --git a/static/usage/v7/reorder/custom-icon/javascript.md b/static/usage/v7/reorder/custom-icon/javascript.md
new file mode 100644
index 00000000000..6e75b74343f
--- /dev/null
+++ b/static/usage/v7/reorder/custom-icon/javascript.md
@@ -0,0 +1,66 @@
+```html
+
+
+
+
+
+ Item 1
+
+
+
+
+
+
+
+
+ Item 2
+
+
+
+
+
+
+
+
+ Item 3
+
+
+
+
+
+
+
+
+ Item 4
+
+
+
+
+
+
+
+
+ Item 5
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/reorder/custom-icon/react.md b/static/usage/v7/reorder/custom-icon/react.md
new file mode 100644
index 00000000000..845a3a6decc
--- /dev/null
+++ b/static/usage/v7/reorder/custom-icon/react.md
@@ -0,0 +1,71 @@
+```tsx
+import React from 'react';
+import { IonIcon, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, ItemReorderEventDetail } from '@ionic/react';
+import { pizza } from 'ionicons/icons';
+
+function Example() {
+ function handleReorder(event: CustomEvent) {
+ // The `from` and `to` properties contain the index of the item
+ // when the drag started and ended, respectively
+ console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
+
+ // Finish the reorder and position the item in the DOM based on
+ // where the gesture ended. This method can also be called directly
+ // by the reorder group
+ event.detail.complete();
+ }
+
+ return (
+
+ {/* The reorder gesture is disabled by default, enable it to drag and drop items */}
+
+
+
+ Item 1
+
+
+
+
+
+
+
+
+ Item 2
+
+
+
+
+
+
+
+
+ Item 3
+
+
+
+
+
+
+
+
+ Item 4
+
+
+
+
+
+
+
+
+ Item 5
+
+
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/reorder/custom-icon/vue.md b/static/usage/v7/reorder/custom-icon/vue.md
new file mode 100644
index 00000000000..17416c67e85
--- /dev/null
+++ b/static/usage/v7/reorder/custom-icon/vue.md
@@ -0,0 +1,76 @@
+```html
+
+
+
+
+
+
+ Item 1
+
+
+
+
+
+
+
+
+ Item 2
+
+
+
+
+
+
+
+
+ Item 3
+
+
+
+
+
+
+
+
+ Item 4
+
+
+
+
+
+
+
+
+ Item 5
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/reorder/custom-scroll-target/angular/example_component_css.md b/static/usage/v7/reorder/custom-scroll-target/angular/example_component_css.md
new file mode 100644
index 00000000000..4db169a0e16
--- /dev/null
+++ b/static/usage/v7/reorder/custom-scroll-target/angular/example_component_css.md
@@ -0,0 +1,11 @@
+```css
+.ion-content-scroll-host {
+ position: absolute;
+ top: 0;
+ left: 0;
+
+ height: 100%;
+ width: 100%;
+ overflow-y: auto;
+}
+```
diff --git a/static/usage/v7/reorder/custom-scroll-target/angular/example_component_html.md b/static/usage/v7/reorder/custom-scroll-target/angular/example_component_html.md
new file mode 100644
index 00000000000..bd08063770b
--- /dev/null
+++ b/static/usage/v7/reorder/custom-scroll-target/angular/example_component_html.md
@@ -0,0 +1,46 @@
+```html
+
+
+
+
+
+
+
+
+ Item 1
+
+
+
+
+
+
+ Item 2
+
+
+
+
+
+
+ Item 3
+
+
+
+
+
+
+ Item 4
+
+
+
+
+
+
+ Item 5
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/reorder/custom-scroll-target/angular/example_component_ts.md b/static/usage/v7/reorder/custom-scroll-target/angular/example_component_ts.md
new file mode 100644
index 00000000000..2cd3dd66740
--- /dev/null
+++ b/static/usage/v7/reorder/custom-scroll-target/angular/example_component_ts.md
@@ -0,0 +1,23 @@
+```ts
+import { Component } from '@angular/core';
+
+import { ItemReorderEventDetail } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['./example.component.css'],
+})
+export class ExampleComponent {
+ handleReorder(ev: CustomEvent) {
+ // The `from` and `to` properties contain the index of the item
+ // when the drag started and ended, respectively
+ console.log('Dragged from index', ev.detail.from, 'to', ev.detail.to);
+
+ // Finish the reorder and position the item in the DOM based on
+ // where the gesture ended. This method can also be called directly
+ // by the reorder group
+ ev.detail.complete();
+ }
+}
+```
diff --git a/static/usage/v7/reorder/custom-scroll-target/demo.html b/static/usage/v7/reorder/custom-scroll-target/demo.html
new file mode 100644
index 00000000000..8a94ae5d8e6
--- /dev/null
+++ b/static/usage/v7/reorder/custom-scroll-target/demo.html
@@ -0,0 +1,95 @@
+
+
+
+
+
+
+ Reorder
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Item 1
+
+
+
+
+
+
+ Item 2
+
+
+
+
+
+
+ Item 3
+
+
+
+
+
+
+ Item 4
+
+
+
+
+
+
+ Item 5
+
+
+
+
+
+
+
+
+
+
+
+
+ Item 1
+
+
+
+
+
+
+ Item 2
+
+
+
+
+
+
+ Item 3
+
+
+
+
+
+
+ Item 4
+
+
+
+
+
+
+ Item 5
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/reorder/custom-scroll-target/react/main_css.md b/static/usage/v7/reorder/custom-scroll-target/react/main_css.md
new file mode 100644
index 00000000000..4db169a0e16
--- /dev/null
+++ b/static/usage/v7/reorder/custom-scroll-target/react/main_css.md
@@ -0,0 +1,11 @@
+```css
+.ion-content-scroll-host {
+ position: absolute;
+ top: 0;
+ left: 0;
+
+ height: 100%;
+ width: 100%;
+ overflow-y: auto;
+}
+```
diff --git a/static/usage/v7/reorder/custom-scroll-target/react/main_tsx.md b/static/usage/v7/reorder/custom-scroll-target/react/main_tsx.md
new file mode 100644
index 00000000000..cd7fd8f84b0
--- /dev/null
+++ b/static/usage/v7/reorder/custom-scroll-target/react/main_tsx.md
@@ -0,0 +1,66 @@
+```tsx
+import React from 'react';
+import { IonContent, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, ItemReorderEventDetail } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ function handleReorder(event: CustomEvent) {
+ // The `from` and `to` properties contain the index of the item
+ // when the drag started and ended, respectively
+ console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
+
+ // Finish the reorder and position the item in the DOM based on
+ // where the gesture ended. This method can also be called directly
+ // by the reorder group
+ event.detail.complete();
+ }
+
+ return (
+
+
+
+ {/* The reorder gesture is disabled by default, enable it to drag and drop items */}
+
+
+
+ Item 1
+
+
+
+
+
+
+ Item 2
+
+
+
+
+
+
+ Item 3
+
+
+
+
+
+
+ Item 4
+
+
+
+
+
+
+ Item 5
+
+
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/reorder/custom-scroll-target/vue.md b/static/usage/v7/reorder/custom-scroll-target/vue.md
new file mode 100644
index 00000000000..808ed347020
--- /dev/null
+++ b/static/usage/v7/reorder/custom-scroll-target/vue.md
@@ -0,0 +1,82 @@
+```html
+
+
+
+
+
+
+
+
+ Item 1
+
+
+
+
+
+
+ Item 2
+
+
+
+
+
+
+ Item 3
+
+
+
+
+
+
+ Item 4
+
+
+
+
+
+
+ Item 5
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/reorder/toggling-disabled/angular/example_component_html.md b/static/usage/v7/reorder/toggling-disabled/angular/example_component_html.md
new file mode 100644
index 00000000000..76af0bff12e
--- /dev/null
+++ b/static/usage/v7/reorder/toggling-disabled/angular/example_component_html.md
@@ -0,0 +1,46 @@
+```html
+
+
+
+
+
+ Item 1
+
+
+
+
+
+
+ Item 2
+
+
+
+
+
+
+ Item 3
+
+
+
+
+
+
+ Item 4
+
+
+
+
+
+
+ Item 5
+
+
+
+
+
+
+
+
+ Toggle Reorder
+
+```
diff --git a/static/usage/v7/reorder/toggling-disabled/angular/example_component_ts.md b/static/usage/v7/reorder/toggling-disabled/angular/example_component_ts.md
new file mode 100644
index 00000000000..ded54467eba
--- /dev/null
+++ b/static/usage/v7/reorder/toggling-disabled/angular/example_component_ts.md
@@ -0,0 +1,28 @@
+```ts
+import { Component } from '@angular/core';
+
+import { ItemReorderEventDetail } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html'
+})
+export class ExampleComponent {
+ public isDisabled = true;
+
+ handleReorder(ev: CustomEvent) {
+ // The `from` and `to` properties contain the index of the item
+ // when the drag started and ended, respectively
+ console.log('Dragged from index', ev.detail.from, 'to', ev.detail.to);
+
+ // Finish the reorder and position the item in the DOM based on
+ // where the gesture ended. This method can also be called directly
+ // by the reorder group
+ ev.detail.complete();
+ }
+
+ toggleReorder() {
+ this.isDisabled = !this.isDisabled;
+ }
+}
+```
diff --git a/static/usage/v7/reorder/toggling-disabled/demo.html b/static/usage/v7/reorder/toggling-disabled/demo.html
new file mode 100644
index 00000000000..1eb8cba120b
--- /dev/null
+++ b/static/usage/v7/reorder/toggling-disabled/demo.html
@@ -0,0 +1,96 @@
+
+
+
+
+
+
+ Reorder
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Item 1
+
+
+
+
+
+
+ Item 2
+
+
+
+
+
+
+ Item 3
+
+
+
+
+
+
+ Item 4
+
+
+
+
+
+
+ Item 5
+
+
+
+
+
+
+
+
+ Toggle Reorder
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/reorder/toggling-disabled/index.md b/static/usage/v7/reorder/toggling-disabled/index.md
new file mode 100644
index 00000000000..a14528c98e8
--- /dev/null
+++ b/static/usage/v7/reorder/toggling-disabled/index.md
@@ -0,0 +1,25 @@
+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_example_component_ts from './angular/example_component_ts.md';
+import angular_example_component_html from './angular/example_component_html.md';
+
+
diff --git a/static/usage/v7/reorder/toggling-disabled/javascript.md b/static/usage/v7/reorder/toggling-disabled/javascript.md
new file mode 100644
index 00000000000..68319ec0221
--- /dev/null
+++ b/static/usage/v7/reorder/toggling-disabled/javascript.md
@@ -0,0 +1,64 @@
+```html
+
+
+
+
+ Item 1
+
+
+
+
+
+
+ Item 2
+
+
+
+
+
+
+ Item 3
+
+
+
+
+
+
+ Item 4
+
+
+
+
+
+
+ Item 5
+
+
+
+
+
+
+
+
+ Toggle Reorder
+
+
+
+```
diff --git a/static/usage/v7/reorder/toggling-disabled/react.md b/static/usage/v7/reorder/toggling-disabled/react.md
new file mode 100644
index 00000000000..e86e1e7516f
--- /dev/null
+++ b/static/usage/v7/reorder/toggling-disabled/react.md
@@ -0,0 +1,72 @@
+```tsx
+import React, { useState } from 'react';
+import { IonButton, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, ItemReorderEventDetail } from '@ionic/react';
+
+function Example() {
+ const [isDisabled, setIsDisabled] = useState(true);
+
+ function handleReorder(event: CustomEvent) {
+ // The `from` and `to` properties contain the index of the item
+ // when the drag started and ended, respectively
+ console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
+
+ // Finish the reorder and position the item in the DOM based on
+ // where the gesture ended. This method can also be called directly
+ // by the reorder group
+ event.detail.complete();
+ }
+
+ function toggleReorder() {
+ setIsDisabled(current => !current);
+ }
+
+ return (
+ <>
+
+
+
+
+ Item 1
+
+
+
+
+
+
+ Item 2
+
+
+
+
+
+
+ Item 3
+
+
+
+
+
+
+ Item 4
+
+
+
+
+
+
+ Item 5
+
+
+
+
+
+
+ {/* The reorder gesture is disabled by default, enable it to drag and drop items */}
+
+ Toggle Reorder
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/reorder/toggling-disabled/vue.md b/static/usage/v7/reorder/toggling-disabled/vue.md
new file mode 100644
index 00000000000..4711f6dc74b
--- /dev/null
+++ b/static/usage/v7/reorder/toggling-disabled/vue.md
@@ -0,0 +1,76 @@
+```html
+
+
+
+
+
+ Item 1
+
+
+
+
+
+
+ Item 2
+
+
+
+
+
+
+ Item 3
+
+
+
+
+
+
+ Item 4
+
+
+
+
+
+
+ Item 5
+
+
+
+
+
+
+
+
+ Toggle Reorder
+
+
+
+
+```
diff --git a/static/usage/v7/reorder/updating-data/angular/example_component_html.md b/static/usage/v7/reorder/updating-data/angular/example_component_html.md
new file mode 100644
index 00000000000..4339191e634
--- /dev/null
+++ b/static/usage/v7/reorder/updating-data/angular/example_component_html.md
@@ -0,0 +1,14 @@
+```html
+
+
+
+
+
+
+ Item {{ item }}
+
+
+
+
+
+```
diff --git a/static/usage/v7/reorder/updating-data/angular/example_component_ts.md b/static/usage/v7/reorder/updating-data/angular/example_component_ts.md
new file mode 100644
index 00000000000..f1132926bb4
--- /dev/null
+++ b/static/usage/v7/reorder/updating-data/angular/example_component_ts.md
@@ -0,0 +1,27 @@
+```ts
+import { Component } from '@angular/core';
+
+import { ItemReorderEventDetail } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html'
+})
+export class ExampleComponent {
+ items = [1, 2, 3, 4, 5];
+
+ handleReorder(ev: CustomEvent) {
+ // Before complete is called with the items they will remain in the
+ // order before the drag
+ console.log('Before complete', this.items);
+
+ // Finish the reorder and position the item in the DOM based on
+ // where the gesture ended. Update the items variable to the
+ // new order of items
+ this.items = ev.detail.complete(this.items);
+
+ // After complete is called the items will be in the new order
+ console.log('After complete', this.items);
+ }
+}
+```
diff --git a/static/usage/v7/reorder/updating-data/demo.html b/static/usage/v7/reorder/updating-data/demo.html
new file mode 100644
index 00000000000..bf7d175f937
--- /dev/null
+++ b/static/usage/v7/reorder/updating-data/demo.html
@@ -0,0 +1,76 @@
+
+
+
+
+
+
+ Reorder
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/reorder/updating-data/index.md b/static/usage/v7/reorder/updating-data/index.md
new file mode 100644
index 00000000000..ba50342db20
--- /dev/null
+++ b/static/usage/v7/reorder/updating-data/index.md
@@ -0,0 +1,25 @@
+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_example_component_ts from './angular/example_component_ts.md';
+import angular_example_component_html from './angular/example_component_html.md';
+
+
diff --git a/static/usage/v7/reorder/updating-data/javascript.md b/static/usage/v7/reorder/updating-data/javascript.md
new file mode 100644
index 00000000000..603f9802241
--- /dev/null
+++ b/static/usage/v7/reorder/updating-data/javascript.md
@@ -0,0 +1,49 @@
+```html
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/reorder/updating-data/react.md b/static/usage/v7/reorder/updating-data/react.md
new file mode 100644
index 00000000000..25e58caaf0f
--- /dev/null
+++ b/static/usage/v7/reorder/updating-data/react.md
@@ -0,0 +1,39 @@
+```tsx
+import React, { useState } from 'react';
+import { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, ItemReorderEventDetail } from '@ionic/react';
+
+function Example() {
+ const [items, setItems] = useState([1, 2, 3, 4, 5]);
+
+ function handleReorder(event: CustomEvent) {
+ // Before complete is called with the items they will remain in the
+ // order before the drag
+ console.log('Before complete', items);
+
+ // Finish the reorder and position the item in the DOM based on
+ // where the gesture ended. Update the items variable to the
+ // new order of items
+ setItems(event.detail.complete(items));
+
+ // After complete is called the items will be in the new order
+ console.log('After complete', items);
+ }
+
+ return (
+
+ {/* The reorder gesture is disabled by default, enable it to drag and drop items */}
+
+ {items.map(item =>
+
+
+ Item { item }
+
+
+
+ )}
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/reorder/updating-data/vue.md b/static/usage/v7/reorder/updating-data/vue.md
new file mode 100644
index 00000000000..024fa130469
--- /dev/null
+++ b/static/usage/v7/reorder/updating-data/vue.md
@@ -0,0 +1,42 @@
+```html
+
+
+
+
+
+
+ Item {{ item }}
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/reorder/wrapper/angular/example_component_html.md b/static/usage/v7/reorder/wrapper/angular/example_component_html.md
new file mode 100644
index 00000000000..acc62e86b49
--- /dev/null
+++ b/static/usage/v7/reorder/wrapper/angular/example_component_html.md
@@ -0,0 +1,47 @@
+```html
+
+
+
+
+
+
+
+ Item 1
+
+
+
+
+
+
+
+ Item 2
+
+
+
+
+
+
+
+ Item 3
+
+
+
+
+
+
+
+ Item 4
+
+
+
+
+
+
+
+ Item 5
+
+
+
+
+
+```
diff --git a/static/usage/v7/reorder/wrapper/angular/example_component_ts.md b/static/usage/v7/reorder/wrapper/angular/example_component_ts.md
new file mode 100644
index 00000000000..6fdf85ed614
--- /dev/null
+++ b/static/usage/v7/reorder/wrapper/angular/example_component_ts.md
@@ -0,0 +1,22 @@
+```ts
+import { Component } from '@angular/core';
+
+import { ItemReorderEventDetail } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html'
+})
+export class ExampleComponent {
+ handleReorder(ev: CustomEvent) {
+ // The `from` and `to` properties contain the index of the item
+ // when the drag started and ended, respectively
+ console.log('Dragged from index', ev.detail.from, 'to', ev.detail.to);
+
+ // Finish the reorder and position the item in the DOM based on
+ // where the gesture ended. This method can also be called directly
+ // by the reorder group
+ ev.detail.complete();
+ }
+}
+```
diff --git a/static/usage/v7/reorder/wrapper/demo.html b/static/usage/v7/reorder/wrapper/demo.html
new file mode 100644
index 00000000000..6bf8b66760b
--- /dev/null
+++ b/static/usage/v7/reorder/wrapper/demo.html
@@ -0,0 +1,88 @@
+
+
+
+
+
+
+ Reorder
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Item 1
+
+
+
+
+
+
+
+ Item 2
+
+
+
+
+
+
+
+ Item 3
+
+
+
+
+
+
+
+ Item 4
+
+
+
+
+
+
+
+ Item 5
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/reorder/wrapper/index.md b/static/usage/v7/reorder/wrapper/index.md
new file mode 100644
index 00000000000..4e680cfdf61
--- /dev/null
+++ b/static/usage/v7/reorder/wrapper/index.md
@@ -0,0 +1,25 @@
+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_example_component_ts from './angular/example_component_ts.md';
+import angular_example_component_html from './angular/example_component_html.md';
+
+
diff --git a/static/usage/v7/reorder/wrapper/javascript.md b/static/usage/v7/reorder/wrapper/javascript.md
new file mode 100644
index 00000000000..38d112c30fb
--- /dev/null
+++ b/static/usage/v7/reorder/wrapper/javascript.md
@@ -0,0 +1,61 @@
+```html
+
+
+
+
+
+
+ Item 1
+
+
+
+
+
+
+
+ Item 2
+
+
+
+
+
+
+
+ Item 3
+
+
+
+
+
+
+
+ Item 4
+
+
+
+
+
+
+
+ Item 5
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/reorder/wrapper/react.md b/static/usage/v7/reorder/wrapper/react.md
new file mode 100644
index 00000000000..8abaf724dfa
--- /dev/null
+++ b/static/usage/v7/reorder/wrapper/react.md
@@ -0,0 +1,65 @@
+```tsx
+import React from 'react';
+import { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, ItemReorderEventDetail } from '@ionic/react';
+
+function Example() {
+ function handleReorder(event: CustomEvent) {
+ // The `from` and `to` properties contain the index of the item
+ // when the drag started and ended, respectively
+ console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
+
+ // Finish the reorder and position the item in the DOM based on
+ // where the gesture ended. This method can also be called directly
+ // by the reorder group
+ event.detail.complete();
+ }
+
+ return (
+
+ {/* The reorder gesture is disabled by default, enable it to drag and drop items */}
+
+
+
+
+ Item 1
+
+
+
+
+
+
+
+ Item 2
+
+
+
+
+
+
+
+ Item 3
+
+
+
+
+
+
+
+ Item 4
+
+
+
+
+
+
+
+ Item 5
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/reorder/wrapper/vue.md b/static/usage/v7/reorder/wrapper/vue.md
new file mode 100644
index 00000000000..d0c732c7d39
--- /dev/null
+++ b/static/usage/v7/reorder/wrapper/vue.md
@@ -0,0 +1,71 @@
+```html
+
+
+
+
+
+
+
+ Item 1
+
+
+
+
+
+
+
+ Item 2
+
+
+
+
+
+
+
+ Item 3
+
+
+
+
+
+
+
+ Item 4
+
+
+
+
+
+
+
+ Item 5
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/ripple-effect/basic/angular/example_component_css.md b/static/usage/v7/ripple-effect/basic/angular/example_component_css.md
new file mode 100644
index 00000000000..792bc105ff8
--- /dev/null
+++ b/static/usage/v7/ripple-effect/basic/angular/example_component_css.md
@@ -0,0 +1,43 @@
+```css
+.wrapper {
+ display: flex;
+ flex-wrap: wrap;
+
+ align-items: center;
+ justify-content: space-between;
+ text-align: center;
+
+ height: 300px;
+ width: 300px;
+
+ margin: 0 auto;
+}
+
+b {
+ width: 100%;
+}
+
+.ripple-parent {
+ position: relative;
+ overflow: hidden;
+
+ border: 1px solid #ddd;
+}
+
+.rectangle {
+ width: 300px;
+ height: 150px;
+}
+
+.rounded-rectangle {
+ width: 185px;
+ height: 65px;
+ border-radius: 8px;
+}
+
+.circle {
+ width: 90px;
+ height: 90px;
+ border-radius: 50%;
+}
+```
diff --git a/static/usage/v7/ripple-effect/basic/angular/example_component_html.md b/static/usage/v7/ripple-effect/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..f46a434abac
--- /dev/null
+++ b/static/usage/v7/ripple-effect/basic/angular/example_component_html.md
@@ -0,0 +1,17 @@
+```html
+
+
Click on a shape to see the ripple
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Click on a shape to see the ripple
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Click on a shape to see the ripple
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Click on a shape to see the ripple
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Click on a shape to see the ripple
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Click on a shape to see the ripple
+
+
+ Custom Parent Color
+
+
+
+
+ Custom Ripple Color
+
+
+
+
+
Click on a shape to see the ripple
+
+
+ Custom Parent Color
+
+
+
+
+ Custom Ripple Color
+
+
+
+
+
Click on a shape to see the ripple
+
+
+ Custom Parent Color
+
+
+
+
+ Custom Ripple Color
+
+
+
+
Click on a shape to see the ripple
+
+
+ Custom Parent Color
+
+
+
+
+ Custom Ripple Color
+
+
+
+
Click on a shape to see the ripple
+
+
+ Custom Parent Color
+
+
+
+
+ Custom Ripple Color
+
+
+
+
Click on a shape to see the ripple
+
+
+ Bounded
+
+
+
+
+ Unbounded
+
+
+
+
+
Click on a shape to see the ripple
+
+
+ Bounded
+
+
+
+
+ Unbounded
+
+
+
+
+
Click on a shape to see the ripple
+
+
+ Bounded
+
+
+
+
+ Unbounded
+
+
+
+
Click on a shape to see the ripple
+
+
+ Bounded
+
+
+
+
+ Unbounded
+
+
+
+
Click on a shape to see the ripple
+
+
+ Bounded
+
+
+
+
+ Unbounded
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/searchbar/basic/index.md b/static/usage/v7/searchbar/basic/index.md
new file mode 100644
index 00000000000..163e4ff689a
--- /dev/null
+++ b/static/usage/v7/searchbar/basic/index.md
@@ -0,0 +1,13 @@
+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/searchbar/basic/javascript.md b/static/usage/v7/searchbar/basic/javascript.md
new file mode 100644
index 00000000000..610e6556428
--- /dev/null
+++ b/static/usage/v7/searchbar/basic/javascript.md
@@ -0,0 +1,7 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v7/searchbar/basic/react.md b/static/usage/v7/searchbar/basic/react.md
new file mode 100644
index 00000000000..b0a3d625855
--- /dev/null
+++ b/static/usage/v7/searchbar/basic/react.md
@@ -0,0 +1,17 @@
+```tsx
+import React from 'react';
+import { IonSearchbar } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/searchbar/basic/vue.md b/static/usage/v7/searchbar/basic/vue.md
new file mode 100644
index 00000000000..f50a9cb5a5f
--- /dev/null
+++ b/static/usage/v7/searchbar/basic/vue.md
@@ -0,0 +1,18 @@
+```html
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/searchbar/cancel-button/angular.md b/static/usage/v7/searchbar/cancel-button/angular.md
new file mode 100644
index 00000000000..094e4d63193
--- /dev/null
+++ b/static/usage/v7/searchbar/cancel-button/angular.md
@@ -0,0 +1,6 @@
+```html
+
+
+
+
+```
diff --git a/static/usage/v7/searchbar/cancel-button/demo.html b/static/usage/v7/searchbar/cancel-button/demo.html
new file mode 100644
index 00000000000..ebfef12609b
--- /dev/null
+++ b/static/usage/v7/searchbar/cancel-button/demo.html
@@ -0,0 +1,34 @@
+
+
+
+
+
+
+ Searchbar
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/searchbar/cancel-button/index.md b/static/usage/v7/searchbar/cancel-button/index.md
new file mode 100644
index 00000000000..c1f4e1977cc
--- /dev/null
+++ b/static/usage/v7/searchbar/cancel-button/index.md
@@ -0,0 +1,13 @@
+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/searchbar/cancel-button/javascript.md b/static/usage/v7/searchbar/cancel-button/javascript.md
new file mode 100644
index 00000000000..094e4d63193
--- /dev/null
+++ b/static/usage/v7/searchbar/cancel-button/javascript.md
@@ -0,0 +1,6 @@
+```html
+
+
+
+
+```
diff --git a/static/usage/v7/searchbar/cancel-button/react.md b/static/usage/v7/searchbar/cancel-button/react.md
new file mode 100644
index 00000000000..5f312e34aa0
--- /dev/null
+++ b/static/usage/v7/searchbar/cancel-button/react.md
@@ -0,0 +1,17 @@
+```tsx
+import React from 'react';
+import { IonSearchbar } from '@ionic/react';
+import { trash } from 'ionicons/icons';
+
+function Example() {
+ return (
+ <>
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/searchbar/cancel-button/vue.md b/static/usage/v7/searchbar/cancel-button/vue.md
new file mode 100644
index 00000000000..a56a1451692
--- /dev/null
+++ b/static/usage/v7/searchbar/cancel-button/vue.md
@@ -0,0 +1,21 @@
+```html
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/searchbar/clear-button/angular.md b/static/usage/v7/searchbar/clear-button/angular.md
new file mode 100644
index 00000000000..fa10e4b90d9
--- /dev/null
+++ b/static/usage/v7/searchbar/clear-button/angular.md
@@ -0,0 +1,6 @@
+```html
+
+
+
+
+```
diff --git a/static/usage/v7/searchbar/clear-button/demo.html b/static/usage/v7/searchbar/clear-button/demo.html
new file mode 100644
index 00000000000..e85b497b349
--- /dev/null
+++ b/static/usage/v7/searchbar/clear-button/demo.html
@@ -0,0 +1,33 @@
+
+
+
+
+
+
+ Searchbar
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/searchbar/clear-button/index.md b/static/usage/v7/searchbar/clear-button/index.md
new file mode 100644
index 00000000000..1d5212a124c
--- /dev/null
+++ b/static/usage/v7/searchbar/clear-button/index.md
@@ -0,0 +1,13 @@
+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/searchbar/clear-button/javascript.md b/static/usage/v7/searchbar/clear-button/javascript.md
new file mode 100644
index 00000000000..fa10e4b90d9
--- /dev/null
+++ b/static/usage/v7/searchbar/clear-button/javascript.md
@@ -0,0 +1,6 @@
+```html
+
+
+
+
+```
diff --git a/static/usage/v7/searchbar/clear-button/react.md b/static/usage/v7/searchbar/clear-button/react.md
new file mode 100644
index 00000000000..9f21f1a1d84
--- /dev/null
+++ b/static/usage/v7/searchbar/clear-button/react.md
@@ -0,0 +1,17 @@
+```tsx
+import React from 'react';
+import { IonSearchbar } from '@ionic/react';
+import { trashBin } from 'ionicons/icons';
+
+function Example() {
+ return (
+ <>
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/searchbar/clear-button/vue.md b/static/usage/v7/searchbar/clear-button/vue.md
new file mode 100644
index 00000000000..b778093f372
--- /dev/null
+++ b/static/usage/v7/searchbar/clear-button/vue.md
@@ -0,0 +1,21 @@
+```html
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/searchbar/debounce/angular/example_component_html.md b/static/usage/v7/searchbar/debounce/angular/example_component_html.md
new file mode 100644
index 00000000000..5a554a24551
--- /dev/null
+++ b/static/usage/v7/searchbar/debounce/angular/example_component_html.md
@@ -0,0 +1,9 @@
+```html
+
+
+
+
+ {{ result }}
+
+
+```
diff --git a/static/usage/v7/searchbar/debounce/angular/example_component_ts.md b/static/usage/v7/searchbar/debounce/angular/example_component_ts.md
new file mode 100644
index 00000000000..1d8215ef1a5
--- /dev/null
+++ b/static/usage/v7/searchbar/debounce/angular/example_component_ts.md
@@ -0,0 +1,17 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ public data = ['Amsterdam', 'Buenos Aires', 'Cairo', 'Geneva', 'Hong Kong', 'Istanbul', 'London', 'Madrid', 'New York', 'Panama City'];
+ public results = [...this.data];
+
+ handleChange(event) {
+ const query = event.target.value.toLowerCase();
+ this.results = this.data.filter(d => d.toLowerCase().indexOf(query) > -1);
+ }
+}
+```
diff --git a/static/usage/v7/searchbar/debounce/demo.html b/static/usage/v7/searchbar/debounce/demo.html
new file mode 100644
index 00000000000..ac43a663b20
--- /dev/null
+++ b/static/usage/v7/searchbar/debounce/demo.html
@@ -0,0 +1,64 @@
+
+
+
+
+
+
+ Searchbar
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/searchbar/debounce/index.md b/static/usage/v7/searchbar/debounce/index.md
new file mode 100644
index 00000000000..505f89c9234
--- /dev/null
+++ b/static/usage/v7/searchbar/debounce/index.md
@@ -0,0 +1,26 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+
+import react from './react.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/v7/searchbar/debounce/javascript.md b/static/usage/v7/searchbar/debounce/javascript.md
new file mode 100644
index 00000000000..6a74446f699
--- /dev/null
+++ b/static/usage/v7/searchbar/debounce/javascript.md
@@ -0,0 +1,37 @@
+```html
+
+
+
+
+```
diff --git a/static/usage/v7/searchbar/debounce/react.md b/static/usage/v7/searchbar/debounce/react.md
new file mode 100644
index 00000000000..f46ce1a6da5
--- /dev/null
+++ b/static/usage/v7/searchbar/debounce/react.md
@@ -0,0 +1,30 @@
+```tsx
+import React, { useState } from 'react';
+import { IonItem, IonList, IonSearchbar } from '@ionic/react';
+
+function Example() {
+ const data = ['Amsterdam', 'Buenos Aires', 'Cairo', 'Geneva', 'Hong Kong', 'Istanbul', 'London', 'Madrid', 'New York', 'Panama City'];
+ let [results, setResults] = useState([...data]);
+
+ const handleChange = (ev: Event) => {
+ let query = "";
+ const target = ev.target as HTMLIonSearchbarElement;
+ if (target) query = target.value!.toLowerCase();
+
+ setResults(data.filter(d => d.toLowerCase().indexOf(query) > -1));
+ }
+
+ return (
+ <>
+ handleChange(ev)}>
+
+
+ { results.map(result => (
+ { result }
+ ))}
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/searchbar/debounce/vue.md b/static/usage/v7/searchbar/debounce/vue.md
new file mode 100644
index 00000000000..2d85d6ed2d2
--- /dev/null
+++ b/static/usage/v7/searchbar/debounce/vue.md
@@ -0,0 +1,32 @@
+```html
+
+
+
+
+
+ {{ result }}
+
+
+
+
+
+```
diff --git a/static/usage/v7/searchbar/search-icon/angular.md b/static/usage/v7/searchbar/search-icon/angular.md
new file mode 100644
index 00000000000..2a66008d0cc
--- /dev/null
+++ b/static/usage/v7/searchbar/search-icon/angular.md
@@ -0,0 +1,4 @@
+```html
+
+
+```
diff --git a/static/usage/v7/searchbar/search-icon/demo.html b/static/usage/v7/searchbar/search-icon/demo.html
new file mode 100644
index 00000000000..33e2793d25d
--- /dev/null
+++ b/static/usage/v7/searchbar/search-icon/demo.html
@@ -0,0 +1,31 @@
+
+
+
+
+
+
+ Searchbar
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/searchbar/search-icon/index.md b/static/usage/v7/searchbar/search-icon/index.md
new file mode 100644
index 00000000000..951485a0809
--- /dev/null
+++ b/static/usage/v7/searchbar/search-icon/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/searchbar/search-icon/javascript.md b/static/usage/v7/searchbar/search-icon/javascript.md
new file mode 100644
index 00000000000..2a66008d0cc
--- /dev/null
+++ b/static/usage/v7/searchbar/search-icon/javascript.md
@@ -0,0 +1,4 @@
+```html
+
+
+```
diff --git a/static/usage/v7/searchbar/search-icon/react.md b/static/usage/v7/searchbar/search-icon/react.md
new file mode 100644
index 00000000000..4bb596d1e00
--- /dev/null
+++ b/static/usage/v7/searchbar/search-icon/react.md
@@ -0,0 +1,15 @@
+```tsx
+import React from 'react';
+import { IonSearchbar } from '@ionic/react';
+import { searchCircle } from 'ionicons/icons';
+
+function Example() {
+ return (
+ <>
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/searchbar/search-icon/vue.md b/static/usage/v7/searchbar/search-icon/vue.md
new file mode 100644
index 00000000000..6414acf7b2e
--- /dev/null
+++ b/static/usage/v7/searchbar/search-icon/vue.md
@@ -0,0 +1,19 @@
+```html
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/searchbar/theming/colors/angular.md b/static/usage/v7/searchbar/theming/colors/angular.md
new file mode 100644
index 00000000000..b0f0f2e533f
--- /dev/null
+++ b/static/usage/v7/searchbar/theming/colors/angular.md
@@ -0,0 +1,12 @@
+```html
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/searchbar/theming/colors/demo.html b/static/usage/v7/searchbar/theming/colors/demo.html
new file mode 100644
index 00000000000..5701010c08b
--- /dev/null
+++ b/static/usage/v7/searchbar/theming/colors/demo.html
@@ -0,0 +1,39 @@
+
+
+
+
+
+
+ Searchbar
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/searchbar/theming/colors/index.md b/static/usage/v7/searchbar/theming/colors/index.md
new file mode 100644
index 00000000000..670a3db2034
--- /dev/null
+++ b/static/usage/v7/searchbar/theming/colors/index.md
@@ -0,0 +1,13 @@
+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/searchbar/theming/colors/javascript.md b/static/usage/v7/searchbar/theming/colors/javascript.md
new file mode 100644
index 00000000000..b0f0f2e533f
--- /dev/null
+++ b/static/usage/v7/searchbar/theming/colors/javascript.md
@@ -0,0 +1,12 @@
+```html
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/searchbar/theming/colors/react.md b/static/usage/v7/searchbar/theming/colors/react.md
new file mode 100644
index 00000000000..d1c29b9cd28
--- /dev/null
+++ b/static/usage/v7/searchbar/theming/colors/react.md
@@ -0,0 +1,22 @@
+```tsx
+import React from 'react';
+import { IonSearchbar } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/searchbar/theming/colors/vue.md b/static/usage/v7/searchbar/theming/colors/vue.md
new file mode 100644
index 00000000000..ef95e690107
--- /dev/null
+++ b/static/usage/v7/searchbar/theming/colors/vue.md
@@ -0,0 +1,23 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/searchbar/theming/css-properties/angular/example_component_css.md b/static/usage/v7/searchbar/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..22aa0428b89
--- /dev/null
+++ b/static/usage/v7/searchbar/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,20 @@
+```css
+/* Scoped components require higher specificity to customize */
+ion-searchbar.custom {
+ --background: #19422d;
+ --color: #fff;
+ --placeholder-color: #fff;
+ --icon-color: #fff;
+ --clear-button-color: #fff;
+
+ --border-radius: 4px;
+}
+
+ion-searchbar.ios.custom {
+ --cancel-button-color: #19422d;
+}
+
+ion-searchbar.md.custom {
+ --cancel-button-color: #fff;
+}
+```
diff --git a/static/usage/v7/searchbar/theming/css-properties/angular/example_component_html.md b/static/usage/v7/searchbar/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..080217dcc41
--- /dev/null
+++ b/static/usage/v7/searchbar/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v7/searchbar/theming/css-properties/demo.html b/static/usage/v7/searchbar/theming/css-properties/demo.html
new file mode 100644
index 00000000000..bd168970198
--- /dev/null
+++ b/static/usage/v7/searchbar/theming/css-properties/demo.html
@@ -0,0 +1,48 @@
+
+
+
+
+
+
+ Searchbar
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/searchbar/theming/css-properties/index.md b/static/usage/v7/searchbar/theming/css-properties/index.md
new file mode 100644
index 00000000000..65e3fca5306
--- /dev/null
+++ b/static/usage/v7/searchbar/theming/css-properties/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/searchbar/theming/css-properties/javascript.md b/static/usage/v7/searchbar/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..dca643d2a52
--- /dev/null
+++ b/static/usage/v7/searchbar/theming/css-properties/javascript.md
@@ -0,0 +1,24 @@
+```html
+
+
+
+```
diff --git a/static/usage/v7/searchbar/theming/css-properties/react/main_css.md b/static/usage/v7/searchbar/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..22aa0428b89
--- /dev/null
+++ b/static/usage/v7/searchbar/theming/css-properties/react/main_css.md
@@ -0,0 +1,20 @@
+```css
+/* Scoped components require higher specificity to customize */
+ion-searchbar.custom {
+ --background: #19422d;
+ --color: #fff;
+ --placeholder-color: #fff;
+ --icon-color: #fff;
+ --clear-button-color: #fff;
+
+ --border-radius: 4px;
+}
+
+ion-searchbar.ios.custom {
+ --cancel-button-color: #19422d;
+}
+
+ion-searchbar.md.custom {
+ --cancel-button-color: #fff;
+}
+```
diff --git a/static/usage/v7/searchbar/theming/css-properties/react/main_tsx.md b/static/usage/v7/searchbar/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..4b1b527952e
--- /dev/null
+++ b/static/usage/v7/searchbar/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,13 @@
+```tsx
+import React from 'react';
+import { IonSearchbar } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/searchbar/theming/css-properties/vue.md b/static/usage/v7/searchbar/theming/css-properties/vue.md
new file mode 100644
index 00000000000..6e45e744231
--- /dev/null
+++ b/static/usage/v7/searchbar/theming/css-properties/vue.md
@@ -0,0 +1,35 @@
+```html
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/segment-button/basic/angular.md b/static/usage/v7/segment-button/basic/angular.md
new file mode 100644
index 00000000000..6f3fc0bb9ab
--- /dev/null
+++ b/static/usage/v7/segment-button/basic/angular.md
@@ -0,0 +1,25 @@
+```html
+
+
+ Default
+
+
+ Segment
+
+
+ Button
+
+
+
+
+
+ Disabled
+
+
+ Segment
+
+
+ Button
+
+
+```
diff --git a/static/usage/v7/segment-button/basic/demo.html b/static/usage/v7/segment-button/basic/demo.html
new file mode 100644
index 00000000000..280022dbc91
--- /dev/null
+++ b/static/usage/v7/segment-button/basic/demo.html
@@ -0,0 +1,56 @@
+
+
+
+
+
+
+ Segment Button
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Default
+
+
+ Segment
+
+
+ Button
+
+
+
+
+
+ Disabled
+
+
+ Segment
+
+
+ Button
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/segment-button/basic/index.md b/static/usage/v7/segment-button/basic/index.md
new file mode 100644
index 00000000000..ec9dd3aaaee
--- /dev/null
+++ b/static/usage/v7/segment-button/basic/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/segment-button/basic/javascript.md b/static/usage/v7/segment-button/basic/javascript.md
new file mode 100644
index 00000000000..d001e59d7fc
--- /dev/null
+++ b/static/usage/v7/segment-button/basic/javascript.md
@@ -0,0 +1,25 @@
+```html
+
+
+ Default
+
+
+ Segment
+
+
+ Button
+
+
+
+
+
+ Disabled
+
+
+ Segment
+
+
+ Button
+
+
+```
diff --git a/static/usage/v7/segment-button/basic/react.md b/static/usage/v7/segment-button/basic/react.md
new file mode 100644
index 00000000000..241242412bf
--- /dev/null
+++ b/static/usage/v7/segment-button/basic/react.md
@@ -0,0 +1,35 @@
+```tsx
+import React from 'react';
+import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+ Default
+
+
+ Segment
+
+
+ Button
+
+
+
+
+
+ Disabled
+
+
+ Segment
+
+
+ Button
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/segment-button/basic/vue.md b/static/usage/v7/segment-button/basic/vue.md
new file mode 100644
index 00000000000..79fd032d7ca
--- /dev/null
+++ b/static/usage/v7/segment-button/basic/vue.md
@@ -0,0 +1,36 @@
+```html
+
+
+
+ Default
+
+
+ Segment
+
+
+ Button
+
+
+
+
+
+ Disabled
+
+
+ Segment
+
+
+ Button
+
+
+
+
+
+```
diff --git a/static/usage/v7/segment-button/layout/angular.md b/static/usage/v7/segment-button/layout/angular.md
new file mode 100644
index 00000000000..3f634915d9b
--- /dev/null
+++ b/static/usage/v7/segment-button/layout/angular.md
@@ -0,0 +1,73 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Call
+
+
+
+ Heart
+
+
+
+ Pin
+
+
+
+
+
+
+ Call
+
+
+
+ Heart
+
+
+
+ Pin
+
+
+
+
+
+
+ Call
+
+
+
+ Heart
+
+
+
+ Pin
+
+
+
+
+
+
+ Call
+
+
+
+ Heart
+
+
+
+ Pin
+
+
+
+```
diff --git a/static/usage/v7/segment-button/layout/demo.html b/static/usage/v7/segment-button/layout/demo.html
new file mode 100644
index 00000000000..83bd89fd250
--- /dev/null
+++ b/static/usage/v7/segment-button/layout/demo.html
@@ -0,0 +1,104 @@
+
+
+
+
+
+
+ Segment Button
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Call
+
+
+
+ Heart
+
+
+
+ Pin
+
+
+
+
+
+
+ Call
+
+
+
+ Heart
+
+
+
+ Pin
+
+
+
+
+
+
+ Call
+
+
+
+ Heart
+
+
+
+ Pin
+
+
+
+
+
+
+ Call
+
+
+
+ Heart
+
+
+
+ Pin
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/segment-button/layout/index.md b/static/usage/v7/segment-button/layout/index.md
new file mode 100644
index 00000000000..942a15797b6
--- /dev/null
+++ b/static/usage/v7/segment-button/layout/index.md
@@ -0,0 +1,13 @@
+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/segment-button/layout/javascript.md b/static/usage/v7/segment-button/layout/javascript.md
new file mode 100644
index 00000000000..3f634915d9b
--- /dev/null
+++ b/static/usage/v7/segment-button/layout/javascript.md
@@ -0,0 +1,73 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Call
+
+
+
+ Heart
+
+
+
+ Pin
+
+
+
+
+
+
+ Call
+
+
+
+ Heart
+
+
+
+ Pin
+
+
+
+
+
+
+ Call
+
+
+
+ Heart
+
+
+
+ Pin
+
+
+
+
+
+
+ Call
+
+
+
+ Heart
+
+
+
+ Pin
+
+
+
+```
diff --git a/static/usage/v7/segment-button/layout/react.md b/static/usage/v7/segment-button/layout/react.md
new file mode 100644
index 00000000000..9b6c44ac073
--- /dev/null
+++ b/static/usage/v7/segment-button/layout/react.md
@@ -0,0 +1,84 @@
+```tsx
+import React from 'react';
+import { IonIcon, IonLabel, IonSegment, IonSegmentButton } from '@ionic/react';
+import { call, heart, pin } from 'ionicons/icons';
+
+function Example() {
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Call
+
+
+
+ Heart
+
+
+
+ Pin
+
+
+
+
+
+
+ Call
+
+
+
+ Heart
+
+
+
+ Pin
+
+
+
+
+
+
+ Call
+
+
+
+ Heart
+
+
+
+ Pin
+
+
+
+
+
+
+ Call
+
+
+
+ Heart
+
+
+
+ Pin
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/segment-button/layout/vue.md b/static/usage/v7/segment-button/layout/vue.md
new file mode 100644
index 00000000000..d3c60a4004d
--- /dev/null
+++ b/static/usage/v7/segment-button/layout/vue.md
@@ -0,0 +1,88 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Call
+
+
+
+ Heart
+
+
+
+ Pin
+
+
+
+
+
+
+ Call
+
+
+
+ Heart
+
+
+
+ Pin
+
+
+
+
+
+
+ Call
+
+
+
+ Heart
+
+
+
+ Pin
+
+
+
+
+
+
+ Call
+
+
+
+ Heart
+
+
+
+ Pin
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/segment-button/theming/css-properties/angular/example_component_css.md b/static/usage/v7/segment-button/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..a4e8f04f2b0
--- /dev/null
+++ b/static/usage/v7/segment-button/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,19 @@
+```css
+ion-segment-button {
+ --indicator-color: #08a391;
+}
+
+/* Material Design styles */
+ion-segment-button.md {
+ --color: #000;
+ --color-checked: #08a391;
+ --indicator-height: 4px;
+}
+
+/* iOS styles */
+ion-segment-button.ios {
+ --color: #08a391;
+ --color-checked: #fff;
+ --border-radius: 20px;
+}
+```
diff --git a/static/usage/v7/segment-button/theming/css-properties/angular/example_component_html.md b/static/usage/v7/segment-button/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..4ab86c2cdda
--- /dev/null
+++ b/static/usage/v7/segment-button/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,13 @@
+```html
+
+
+ Custom
+
+
+ Segment
+
+
+ Buttons
+
+
+```
diff --git a/static/usage/v7/segment-button/theming/css-properties/demo.html b/static/usage/v7/segment-button/theming/css-properties/demo.html
new file mode 100644
index 00000000000..144ecaa5639
--- /dev/null
+++ b/static/usage/v7/segment-button/theming/css-properties/demo.html
@@ -0,0 +1,59 @@
+
+
+
+
+
+
+ Segment Button
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Custom
+
+
+ Segment
+
+
+ Buttons
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/segment-button/theming/css-properties/index.md b/static/usage/v7/segment-button/theming/css-properties/index.md
new file mode 100644
index 00000000000..66e2e50f583
--- /dev/null
+++ b/static/usage/v7/segment-button/theming/css-properties/index.md
@@ -0,0 +1,32 @@
+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/segment-button/theming/css-properties/javascript.md b/static/usage/v7/segment-button/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..f8ebaae2f19
--- /dev/null
+++ b/static/usage/v7/segment-button/theming/css-properties/javascript.md
@@ -0,0 +1,33 @@
+```html
+
+
+
+
+ Custom
+
+
+ Segment
+
+
+ Buttons
+
+
+```
diff --git a/static/usage/v7/segment-button/theming/css-properties/react/main_css.md b/static/usage/v7/segment-button/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..a4e8f04f2b0
--- /dev/null
+++ b/static/usage/v7/segment-button/theming/css-properties/react/main_css.md
@@ -0,0 +1,19 @@
+```css
+ion-segment-button {
+ --indicator-color: #08a391;
+}
+
+/* Material Design styles */
+ion-segment-button.md {
+ --color: #000;
+ --color-checked: #08a391;
+ --indicator-height: 4px;
+}
+
+/* iOS styles */
+ion-segment-button.ios {
+ --color: #08a391;
+ --color-checked: #fff;
+ --border-radius: 20px;
+}
+```
diff --git a/static/usage/v7/segment-button/theming/css-properties/react/main_tsx.md b/static/usage/v7/segment-button/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..2459d01206b
--- /dev/null
+++ b/static/usage/v7/segment-button/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,23 @@
+```tsx
+import React from 'react';
+import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+
+
+ Custom
+
+
+ Segment
+
+
+ Buttons
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/segment-button/theming/css-properties/vue.md b/static/usage/v7/segment-button/theming/css-properties/vue.md
new file mode 100644
index 00000000000..50c99688335
--- /dev/null
+++ b/static/usage/v7/segment-button/theming/css-properties/vue.md
@@ -0,0 +1,44 @@
+```html
+
+
+
+ Custom
+
+
+ Segment
+
+
+ Buttons
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/segment-button/theming/css-shadow-parts/angular/example_component_css.md b/static/usage/v7/segment-button/theming/css-shadow-parts/angular/example_component_css.md
new file mode 100644
index 00000000000..fde253b69f9
--- /dev/null
+++ b/static/usage/v7/segment-button/theming/css-shadow-parts/angular/example_component_css.md
@@ -0,0 +1,31 @@
+```css
+ion-segment-button::part(indicator-background) {
+ background: #08a391;
+}
+
+/* Material Design styles */
+ion-segment-button.md::part(native) {
+ color: #000;
+}
+
+.segment-button-checked.md::part(native) {
+ color: #08a391;
+}
+
+ion-segment-button.md::part(indicator-background) {
+ height: 4px;
+}
+
+/* iOS styles */
+ion-segment-button.ios::part(native) {
+ color: #08a391;
+}
+
+.segment-button-checked.ios::part(native) {
+ color: #fff;
+}
+
+ion-segment-button.ios::part(indicator-background) {
+ border-radius: 20px;
+}
+```
diff --git a/static/usage/v7/segment-button/theming/css-shadow-parts/angular/example_component_html.md b/static/usage/v7/segment-button/theming/css-shadow-parts/angular/example_component_html.md
new file mode 100644
index 00000000000..4ab86c2cdda
--- /dev/null
+++ b/static/usage/v7/segment-button/theming/css-shadow-parts/angular/example_component_html.md
@@ -0,0 +1,13 @@
+```html
+
+
+ Custom
+
+
+ Segment
+
+
+ Buttons
+
+
+```
diff --git a/static/usage/v7/segment-button/theming/css-shadow-parts/demo.html b/static/usage/v7/segment-button/theming/css-shadow-parts/demo.html
new file mode 100644
index 00000000000..c81886b5b20
--- /dev/null
+++ b/static/usage/v7/segment-button/theming/css-shadow-parts/demo.html
@@ -0,0 +1,71 @@
+
+
+
+
+
+
+ Segment Button
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Custom
+
+
+ Segment
+
+
+ Buttons
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/segment-button/theming/css-shadow-parts/index.md b/static/usage/v7/segment-button/theming/css-shadow-parts/index.md
new file mode 100644
index 00000000000..9fe4b9f5e01
--- /dev/null
+++ b/static/usage/v7/segment-button/theming/css-shadow-parts/index.md
@@ -0,0 +1,32 @@
+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/segment-button/theming/css-shadow-parts/javascript.md b/static/usage/v7/segment-button/theming/css-shadow-parts/javascript.md
new file mode 100644
index 00000000000..102ba6ccd19
--- /dev/null
+++ b/static/usage/v7/segment-button/theming/css-shadow-parts/javascript.md
@@ -0,0 +1,45 @@
+```html
+
+
+
+
+ Custom
+
+
+ Segment
+
+
+ Buttons
+
+
+```
diff --git a/static/usage/v7/segment-button/theming/css-shadow-parts/react/main_css.md b/static/usage/v7/segment-button/theming/css-shadow-parts/react/main_css.md
new file mode 100644
index 00000000000..fde253b69f9
--- /dev/null
+++ b/static/usage/v7/segment-button/theming/css-shadow-parts/react/main_css.md
@@ -0,0 +1,31 @@
+```css
+ion-segment-button::part(indicator-background) {
+ background: #08a391;
+}
+
+/* Material Design styles */
+ion-segment-button.md::part(native) {
+ color: #000;
+}
+
+.segment-button-checked.md::part(native) {
+ color: #08a391;
+}
+
+ion-segment-button.md::part(indicator-background) {
+ height: 4px;
+}
+
+/* iOS styles */
+ion-segment-button.ios::part(native) {
+ color: #08a391;
+}
+
+.segment-button-checked.ios::part(native) {
+ color: #fff;
+}
+
+ion-segment-button.ios::part(indicator-background) {
+ border-radius: 20px;
+}
+```
diff --git a/static/usage/v7/segment-button/theming/css-shadow-parts/react/main_tsx.md b/static/usage/v7/segment-button/theming/css-shadow-parts/react/main_tsx.md
new file mode 100644
index 00000000000..2459d01206b
--- /dev/null
+++ b/static/usage/v7/segment-button/theming/css-shadow-parts/react/main_tsx.md
@@ -0,0 +1,23 @@
+```tsx
+import React from 'react';
+import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+
+
+ Custom
+
+
+ Segment
+
+
+ Buttons
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/segment-button/theming/css-shadow-parts/vue.md b/static/usage/v7/segment-button/theming/css-shadow-parts/vue.md
new file mode 100644
index 00000000000..911d8b7854e
--- /dev/null
+++ b/static/usage/v7/segment-button/theming/css-shadow-parts/vue.md
@@ -0,0 +1,56 @@
+```html
+
+
+
+ Custom
+
+
+ Segment
+
+
+ Buttons
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/segment/basic/angular.md b/static/usage/v7/segment/basic/angular.md
new file mode 100644
index 00000000000..c497151f125
--- /dev/null
+++ b/static/usage/v7/segment/basic/angular.md
@@ -0,0 +1,19 @@
+```html
+
+
+ Default
+
+
+ Segment
+
+
+
+
+
+ Disabled
+
+
+ Segment
+
+
+```
diff --git a/static/usage/v7/segment/basic/demo.html b/static/usage/v7/segment/basic/demo.html
new file mode 100644
index 00000000000..886c2aafef7
--- /dev/null
+++ b/static/usage/v7/segment/basic/demo.html
@@ -0,0 +1,50 @@
+
+
+
+
+
+
+ Segment
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Default
+
+
+ Segment
+
+
+
+
+
+ Disabled
+
+
+ Segment
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/segment/basic/index.md b/static/usage/v7/segment/basic/index.md
new file mode 100644
index 00000000000..3b98e622e39
--- /dev/null
+++ b/static/usage/v7/segment/basic/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/segment/basic/javascript.md b/static/usage/v7/segment/basic/javascript.md
new file mode 100644
index 00000000000..91d67d8dca7
--- /dev/null
+++ b/static/usage/v7/segment/basic/javascript.md
@@ -0,0 +1,19 @@
+```html
+
+
+ Default
+
+
+ Segment
+
+
+
+
+
+ Disabled
+
+
+ Segment
+
+
+```
diff --git a/static/usage/v7/segment/basic/react.md b/static/usage/v7/segment/basic/react.md
new file mode 100644
index 00000000000..bb5c402112f
--- /dev/null
+++ b/static/usage/v7/segment/basic/react.md
@@ -0,0 +1,29 @@
+```tsx
+import React from 'react';
+import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+ Default
+
+
+ Segment
+
+
+
+
+
+ Disabled
+
+
+ Segment
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/segment/basic/vue.md b/static/usage/v7/segment/basic/vue.md
new file mode 100644
index 00000000000..7252ce56f2f
--- /dev/null
+++ b/static/usage/v7/segment/basic/vue.md
@@ -0,0 +1,30 @@
+```html
+
+
+
+ Default
+
+
+ Segment
+
+
+
+
+
+ Disabled
+
+
+ Segment
+
+
+
+
+
+```
diff --git a/static/usage/v7/segment/scrollable/angular.md b/static/usage/v7/segment/scrollable/angular.md
new file mode 100644
index 00000000000..bbcc03848ec
--- /dev/null
+++ b/static/usage/v7/segment/scrollable/angular.md
@@ -0,0 +1,34 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/segment/scrollable/demo.html b/static/usage/v7/segment/scrollable/demo.html
new file mode 100644
index 00000000000..b8f90118667
--- /dev/null
+++ b/static/usage/v7/segment/scrollable/demo.html
@@ -0,0 +1,66 @@
+
+
+
+
+
+
+ Segment
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/segment/scrollable/index.md b/static/usage/v7/segment/scrollable/index.md
new file mode 100644
index 00000000000..ca5ac7450cc
--- /dev/null
+++ b/static/usage/v7/segment/scrollable/index.md
@@ -0,0 +1,13 @@
+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/segment/scrollable/javascript.md b/static/usage/v7/segment/scrollable/javascript.md
new file mode 100644
index 00000000000..dfc630d1d46
--- /dev/null
+++ b/static/usage/v7/segment/scrollable/javascript.md
@@ -0,0 +1,34 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/segment/scrollable/react.md b/static/usage/v7/segment/scrollable/react.md
new file mode 100644
index 00000000000..61d304989bb
--- /dev/null
+++ b/static/usage/v7/segment/scrollable/react.md
@@ -0,0 +1,43 @@
+```tsx
+import React from 'react';
+import { IonIcon, IonSegment, IonSegmentButton } from '@ionic/react';
+import { home, heart, pin, star, call, globe, basket, barbell, trash, person } from 'ionicons/icons';
+
+function Example() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/segment/scrollable/vue.md b/static/usage/v7/segment/scrollable/vue.md
new file mode 100644
index 00000000000..c3afaf67ba2
--- /dev/null
+++ b/static/usage/v7/segment/scrollable/vue.md
@@ -0,0 +1,51 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/segment/theming/colors/angular.md b/static/usage/v7/segment/theming/colors/angular.md
new file mode 100644
index 00000000000..4787acc7ba3
--- /dev/null
+++ b/static/usage/v7/segment/theming/colors/angular.md
@@ -0,0 +1,82 @@
+```html
+
+
+ Default
+
+
+ Segment
+
+
+
+
+ Primary
+
+
+ Segment
+
+
+
+
+ Secondary
+
+
+ Segment
+
+
+
+
+ Tertiary
+
+
+ Segment
+
+
+
+
+ Success
+
+
+ Segment
+
+
+
+
+ Warning
+
+
+ Segment
+
+
+
+
+ Danger
+
+
+ Segment
+
+
+
+
+ Light
+
+
+ Segment
+
+
+
+
+ Medium
+
+
+ Segment
+
+
+
+
+ Dark
+
+
+ Segment
+
+
+```
diff --git a/static/usage/v7/segment/theming/colors/demo.html b/static/usage/v7/segment/theming/colors/demo.html
new file mode 100644
index 00000000000..0f7579af2cd
--- /dev/null
+++ b/static/usage/v7/segment/theming/colors/demo.html
@@ -0,0 +1,113 @@
+
+
+
+
+
+
+ Segment
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Default
+
+
+ Segment
+
+
+
+
+ Primary
+
+
+ Segment
+
+
+
+
+ Secondary
+
+
+ Segment
+
+
+
+
+ Tertiary
+
+
+ Segment
+
+
+
+
+ Success
+
+
+ Segment
+
+
+
+
+ Warning
+
+
+ Segment
+
+
+
+
+ Danger
+
+
+ Segment
+
+
+
+
+ Light
+
+
+ Segment
+
+
+
+
+ Medium
+
+
+ Segment
+
+
+
+
+ Dark
+
+
+ Segment
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/segment/theming/colors/index.md b/static/usage/v7/segment/theming/colors/index.md
new file mode 100644
index 00000000000..bdcf06a9deb
--- /dev/null
+++ b/static/usage/v7/segment/theming/colors/index.md
@@ -0,0 +1,13 @@
+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/segment/theming/colors/javascript.md b/static/usage/v7/segment/theming/colors/javascript.md
new file mode 100644
index 00000000000..4787acc7ba3
--- /dev/null
+++ b/static/usage/v7/segment/theming/colors/javascript.md
@@ -0,0 +1,82 @@
+```html
+
+
+ Default
+
+
+ Segment
+
+
+
+
+ Primary
+
+
+ Segment
+
+
+
+
+ Secondary
+
+
+ Segment
+
+
+
+
+ Tertiary
+
+
+ Segment
+
+
+
+
+ Success
+
+
+ Segment
+
+
+
+
+ Warning
+
+
+ Segment
+
+
+
+
+ Danger
+
+
+ Segment
+
+
+
+
+ Light
+
+
+ Segment
+
+
+
+
+ Medium
+
+
+ Segment
+
+
+
+
+ Dark
+
+
+ Segment
+
+
+```
diff --git a/static/usage/v7/segment/theming/colors/react.md b/static/usage/v7/segment/theming/colors/react.md
new file mode 100644
index 00000000000..81c799bbbec
--- /dev/null
+++ b/static/usage/v7/segment/theming/colors/react.md
@@ -0,0 +1,92 @@
+```tsx
+import React from 'react';
+import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+ Default
+
+
+ Segment
+
+
+
+
+ Primary
+
+
+ Segment
+
+
+
+
+ Secondary
+
+
+ Segment
+
+
+
+
+ Tertiary
+
+
+ Segment
+
+
+
+
+ Success
+
+
+ Segment
+
+
+
+
+ Warning
+
+
+ Segment
+
+
+
+
+ Danger
+
+
+ Segment
+
+
+
+
+ Light
+
+
+ Segment
+
+
+
+
+ Medium
+
+
+ Segment
+
+
+
+
+ Dark
+
+
+ Segment
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/segment/theming/colors/vue.md b/static/usage/v7/segment/theming/colors/vue.md
new file mode 100644
index 00000000000..fcce8cce913
--- /dev/null
+++ b/static/usage/v7/segment/theming/colors/vue.md
@@ -0,0 +1,93 @@
+```html
+
+
+
+ Default
+
+
+ Segment
+
+
+
+
+ Primary
+
+
+ Segment
+
+
+
+
+ Secondary
+
+
+ Segment
+
+
+
+
+ Tertiary
+
+
+ Segment
+
+
+
+
+ Success
+
+
+ Segment
+
+
+
+
+ Warning
+
+
+ Segment
+
+
+
+
+ Danger
+
+
+ Segment
+
+
+
+
+ Light
+
+
+ Segment
+
+
+
+
+ Medium
+
+
+ Segment
+
+
+
+
+ Dark
+
+
+ Segment
+
+
+
+
+
+```
diff --git a/static/usage/v7/segment/theming/css-properties/angular/example_component_css.md b/static/usage/v7/segment/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..8ecca25270d
--- /dev/null
+++ b/static/usage/v7/segment/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,5 @@
+```css
+ion-segment {
+ --background: #54dc98;
+}
+```
diff --git a/static/usage/v7/segment/theming/css-properties/angular/example_component_html.md b/static/usage/v7/segment/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..01aac10305d
--- /dev/null
+++ b/static/usage/v7/segment/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,10 @@
+```html
+
+
+ Custom
+
+
+ Segment
+
+
+```
diff --git a/static/usage/v7/segment/theming/css-properties/demo.html b/static/usage/v7/segment/theming/css-properties/demo.html
new file mode 100644
index 00000000000..d6d92fbd835
--- /dev/null
+++ b/static/usage/v7/segment/theming/css-properties/demo.html
@@ -0,0 +1,42 @@
+
+
+
+
+
+
+ Note
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Custom
+
+
+ Segment
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/segment/theming/css-properties/index.md b/static/usage/v7/segment/theming/css-properties/index.md
new file mode 100644
index 00000000000..da21c55735d
--- /dev/null
+++ b/static/usage/v7/segment/theming/css-properties/index.md
@@ -0,0 +1,32 @@
+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/segment/theming/css-properties/javascript.md b/static/usage/v7/segment/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..b5ae092adeb
--- /dev/null
+++ b/static/usage/v7/segment/theming/css-properties/javascript.md
@@ -0,0 +1,16 @@
+```html
+
+
+
+
+ Custom
+
+
+ Segment
+
+
+```
diff --git a/static/usage/v7/segment/theming/css-properties/react/main_css.md b/static/usage/v7/segment/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..8ecca25270d
--- /dev/null
+++ b/static/usage/v7/segment/theming/css-properties/react/main_css.md
@@ -0,0 +1,5 @@
+```css
+ion-segment {
+ --background: #54dc98;
+}
+```
diff --git a/static/usage/v7/segment/theming/css-properties/react/main_tsx.md b/static/usage/v7/segment/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..a7e9dc7e0f5
--- /dev/null
+++ b/static/usage/v7/segment/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,22 @@
+```tsx
+import React from 'react';
+import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+
+
+ Custom
+
+
+ Segment
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/segment/theming/css-properties/vue.md b/static/usage/v7/segment/theming/css-properties/vue.md
new file mode 100644
index 00000000000..00bf2e42c8f
--- /dev/null
+++ b/static/usage/v7/segment/theming/css-properties/vue.md
@@ -0,0 +1,27 @@
+```html
+
+
+
+ Custom
+
+
+ Segment
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/select/basic/multiple-selection/angular.md b/static/usage/v7/select/basic/multiple-selection/angular.md
new file mode 100644
index 00000000000..e65d1ace014
--- /dev/null
+++ b/static/usage/v7/select/basic/multiple-selection/angular.md
@@ -0,0 +1,11 @@
+```html
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+```
diff --git a/static/usage/v7/select/basic/multiple-selection/demo.html b/static/usage/v7/select/basic/multiple-selection/demo.html
new file mode 100644
index 00000000000..91d1f6ad230
--- /dev/null
+++ b/static/usage/v7/select/basic/multiple-selection/demo.html
@@ -0,0 +1,32 @@
+
+
+
+
+
+
+ Select - Multiple Selection
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v7/select/basic/multiple-selection/index.md b/static/usage/v7/select/basic/multiple-selection/index.md
new file mode 100644
index 00000000000..2523a47bcc6
--- /dev/null
+++ b/static/usage/v7/select/basic/multiple-selection/index.md
@@ -0,0 +1,13 @@
+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/select/basic/multiple-selection/javascript.md b/static/usage/v7/select/basic/multiple-selection/javascript.md
new file mode 100644
index 00000000000..0150a273be4
--- /dev/null
+++ b/static/usage/v7/select/basic/multiple-selection/javascript.md
@@ -0,0 +1,11 @@
+```html
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+```
diff --git a/static/usage/v7/select/basic/multiple-selection/react.md b/static/usage/v7/select/basic/multiple-selection/react.md
new file mode 100644
index 00000000000..4533409e292
--- /dev/null
+++ b/static/usage/v7/select/basic/multiple-selection/react.md
@@ -0,0 +1,18 @@
+```tsx
+import React from 'react';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/react';
+function Example() {
+ return (
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/select/basic/multiple-selection/vue.md b/static/usage/v7/select/basic/multiple-selection/vue.md
new file mode 100644
index 00000000000..3287578bddc
--- /dev/null
+++ b/static/usage/v7/select/basic/multiple-selection/vue.md
@@ -0,0 +1,22 @@
+```html
+
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/select/basic/responding-to-interaction/angular/example_component_html.md b/static/usage/v7/select/basic/responding-to-interaction/angular/example_component_html.md
new file mode 100644
index 00000000000..035a3e3b6b6
--- /dev/null
+++ b/static/usage/v7/select/basic/responding-to-interaction/angular/example_component_html.md
@@ -0,0 +1,20 @@
+```html
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+
+```
\ No newline at end of file
diff --git a/static/usage/v7/select/basic/responding-to-interaction/angular/example_component_ts.md b/static/usage/v7/select/basic/responding-to-interaction/angular/example_component_ts.md
new file mode 100644
index 00000000000..18c0b1eaa1b
--- /dev/null
+++ b/static/usage/v7/select/basic/responding-to-interaction/angular/example_component_ts.md
@@ -0,0 +1,19 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ logs: string[] = [];
+
+ pushLog(msg) {
+ this.logs.unshift(msg);
+ }
+
+ handleChange(e) {
+ this.pushLog('ionChange fired with value: ' + e.detail.value);
+ }
+}
+```
diff --git a/static/usage/v7/select/basic/responding-to-interaction/demo.html b/static/usage/v7/select/basic/responding-to-interaction/demo.html
new file mode 100644
index 00000000000..60ca694af44
--- /dev/null
+++ b/static/usage/v7/select/basic/responding-to-interaction/demo.html
@@ -0,0 +1,62 @@
+
+
+
+
+
+
+ Select - Responding to Interaction
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+
+
+
+
+ {logs.map((log) => (
+
{log}
+ ))}
+
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v7/select/basic/single-selection/index.md b/static/usage/v7/select/basic/single-selection/index.md
new file mode 100644
index 00000000000..1fc60d79fe6
--- /dev/null
+++ b/static/usage/v7/select/basic/single-selection/index.md
@@ -0,0 +1,13 @@
+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/select/basic/single-selection/javascript.md b/static/usage/v7/select/basic/single-selection/javascript.md
new file mode 100644
index 00000000000..9c587d71a67
--- /dev/null
+++ b/static/usage/v7/select/basic/single-selection/javascript.md
@@ -0,0 +1,11 @@
+```html
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+```
diff --git a/static/usage/v7/select/basic/single-selection/react.md b/static/usage/v7/select/basic/single-selection/react.md
new file mode 100644
index 00000000000..d30a1dbe40b
--- /dev/null
+++ b/static/usage/v7/select/basic/single-selection/react.md
@@ -0,0 +1,18 @@
+```tsx
+import React from 'react';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/react';
+function Example() {
+ return (
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/select/basic/single-selection/vue.md b/static/usage/v7/select/basic/single-selection/vue.md
new file mode 100644
index 00000000000..637b8446a7b
--- /dev/null
+++ b/static/usage/v7/select/basic/single-selection/vue.md
@@ -0,0 +1,22 @@
+```html
+
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/select/customization/button-text/angular.md b/static/usage/v7/select/customization/button-text/angular.md
new file mode 100644
index 00000000000..f00ddf7ce99
--- /dev/null
+++ b/static/usage/v7/select/customization/button-text/angular.md
@@ -0,0 +1,18 @@
+```html
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+```
diff --git a/static/usage/v7/select/customization/button-text/demo.html b/static/usage/v7/select/customization/button-text/demo.html
new file mode 100644
index 00000000000..63a6c4c87e6
--- /dev/null
+++ b/static/usage/v7/select/customization/button-text/demo.html
@@ -0,0 +1,39 @@
+
+
+
+
+
+
+ Select - Button Text
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v7/select/customization/button-text/index.md b/static/usage/v7/select/customization/button-text/index.md
new file mode 100644
index 00000000000..9e1a07063f8
--- /dev/null
+++ b/static/usage/v7/select/customization/button-text/index.md
@@ -0,0 +1,13 @@
+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/select/customization/button-text/javascript.md b/static/usage/v7/select/customization/button-text/javascript.md
new file mode 100644
index 00000000000..9f548984202
--- /dev/null
+++ b/static/usage/v7/select/customization/button-text/javascript.md
@@ -0,0 +1,18 @@
+```html
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+```
diff --git a/static/usage/v7/select/customization/button-text/react.md b/static/usage/v7/select/customization/button-text/react.md
new file mode 100644
index 00000000000..9175310c47d
--- /dev/null
+++ b/static/usage/v7/select/customization/button-text/react.md
@@ -0,0 +1,25 @@
+```tsx
+import React from 'react';
+import { IonItem, IonLabel, IonList, IonSelect, IonSelectOption } from '@ionic/react';
+function Example() {
+ return (
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/select/customization/button-text/vue.md b/static/usage/v7/select/customization/button-text/vue.md
new file mode 100644
index 00000000000..99b1a1558e6
--- /dev/null
+++ b/static/usage/v7/select/customization/button-text/vue.md
@@ -0,0 +1,29 @@
+```html
+
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/select/customization/interface-options/angular/example_component_html.md b/static/usage/v7/select/customization/interface-options/angular/example_component_html.md
new file mode 100644
index 00000000000..a05c69a39c0
--- /dev/null
+++ b/static/usage/v7/select/customization/interface-options/angular/example_component_html.md
@@ -0,0 +1,27 @@
+```html
+
+
+
+ Bacon
+ Onions
+ Pepperoni
+
+
+
+
+
+ Brown
+ Blonde
+ Red
+
+
+
+
+
+ Red
+ Green
+ Blue
+
+
+
+```
diff --git a/static/usage/v7/select/customization/interface-options/angular/example_component_ts.md b/static/usage/v7/select/customization/interface-options/angular/example_component_ts.md
new file mode 100644
index 00000000000..c3f34d0adaf
--- /dev/null
+++ b/static/usage/v7/select/customization/interface-options/angular/example_component_ts.md
@@ -0,0 +1,27 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ customAlertOptions = {
+ header: 'Pizza Toppings',
+ subHeader: 'Select your favorite topping',
+ message: 'Choose only one',
+ translucent: true,
+ };
+
+ customPopoverOptions = {
+ header: 'Hair Color',
+ subHeader: 'Select your hair color',
+ message: 'Only select your dominant hair color',
+ };
+
+ customActionSheetOptions = {
+ header: 'Colors',
+ subHeader: 'Select your favorite color',
+ };
+}
+```
diff --git a/static/usage/v7/select/customization/interface-options/demo.html b/static/usage/v7/select/customization/interface-options/demo.html
new file mode 100644
index 00000000000..6a9428dc885
--- /dev/null
+++ b/static/usage/v7/select/customization/interface-options/demo.html
@@ -0,0 +1,80 @@
+
+
+
+
+
+
+ Select - Interface Options
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Bacon
+ Onions
+ Pepperoni
+
+
+
+
+
+ Brown
+ Blonde
+ Red
+
+
+
+
+
+ Red
+ Green
+ Blue
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v7/select/customization/interface-options/index.md b/static/usage/v7/select/customization/interface-options/index.md
new file mode 100644
index 00000000000..de1da61b1ed
--- /dev/null
+++ b/static/usage/v7/select/customization/interface-options/index.md
@@ -0,0 +1,25 @@
+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_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/v7/select/customization/interface-options/javascript.md b/static/usage/v7/select/customization/interface-options/javascript.md
new file mode 100644
index 00000000000..e2d1974997e
--- /dev/null
+++ b/static/usage/v7/select/customization/interface-options/javascript.md
@@ -0,0 +1,53 @@
+```html
+
+
+
+ Bacon
+ Onions
+ Pepperoni
+
+
+
+
+
+ Brown
+ Blonde
+ Red
+
+
+
+
+
+ Red
+ Green
+ Blue
+
+
+
+
+
+```
diff --git a/static/usage/v7/select/customization/interface-options/react.md b/static/usage/v7/select/customization/interface-options/react.md
new file mode 100644
index 00000000000..6b9d1f42cfb
--- /dev/null
+++ b/static/usage/v7/select/customization/interface-options/react.md
@@ -0,0 +1,52 @@
+```tsx
+import React from 'react';
+import { IonItem, IonLabel, IonList, IonSelect, IonSelectOption } from '@ionic/react';
+function Example() {
+ const customAlertOptions = {
+ header: 'Pizza Toppings',
+ subHeader: 'Select your favorite topping',
+ message: 'Choose only one',
+ translucent: true
+ };
+
+ const customPopoverOptions = {
+ header: 'Hair Color',
+ subHeader: 'Select your hair color',
+ message: 'Only select your dominant hair color'
+ };
+
+ const customActionSheetOptions = {
+ header: 'Colors',
+ subHeader: 'Select your favorite color'
+ };
+
+ return (
+
+
+
+ Bacon
+ Onions
+ Pepperoni
+
+
+
+
+
+ Brown
+ Blonde
+ Red
+
+
+
+
+
+ Red
+ Green
+ Blue
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/select/customization/interface-options/vue.md b/static/usage/v7/select/customization/interface-options/vue.md
new file mode 100644
index 00000000000..58513c464f0
--- /dev/null
+++ b/static/usage/v7/select/customization/interface-options/vue.md
@@ -0,0 +1,63 @@
+```html
+
+
+
+
+ Bacon
+ Onions
+ Pepperoni
+
+
+
+
+
+ Brown
+ Blonde
+ Red
+
+
+
+
+
+ Red
+ Green
+ Blue
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/select/customization/styling-select/angular/example_component_css.md b/static/usage/v7/select/customization/styling-select/angular/example_component_css.md
new file mode 100644
index 00000000000..27fc8e85e4b
--- /dev/null
+++ b/static/usage/v7/select/customization/styling-select/angular/example_component_css.md
@@ -0,0 +1,27 @@
+```css
+ion-select {
+ --placeholder-color: #971e49;
+ --placeholder-opacity: 1;
+ width: 100%;
+ justify-content: center;
+}
+
+ion-select::part(placeholder),
+ion-select::part(text) {
+ flex: 0 0 auto;
+}
+
+ion-select::part(placeholder)::first-letter {
+ font-size: 24px;
+ font-weight: 500;
+}
+
+ion-select::part(text) {
+ color: #545ca7;
+}
+
+ion-select::part(icon) {
+ color: #971e49;
+ opacity: 1;
+}
+```
\ No newline at end of file
diff --git a/static/usage/v7/select/customization/styling-select/angular/example_component_html.md b/static/usage/v7/select/customization/styling-select/angular/example_component_html.md
new file mode 100644
index 00000000000..c2f19e70065
--- /dev/null
+++ b/static/usage/v7/select/customization/styling-select/angular/example_component_html.md
@@ -0,0 +1,7 @@
+```html
+
+ Apples
+ Oranges
+ Bananas
+
+```
diff --git a/static/usage/v7/select/customization/styling-select/angular/example_component_ts.md b/static/usage/v7/select/customization/styling-select/angular/example_component_ts.md
new file mode 100644
index 00000000000..4db53a836a9
--- /dev/null
+++ b/static/usage/v7/select/customization/styling-select/angular/example_component_ts.md
@@ -0,0 +1,10 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/select/customization/styling-select/demo.html b/static/usage/v7/select/customization/styling-select/demo.html
new file mode 100644
index 00000000000..4c6ffa3a788
--- /dev/null
+++ b/static/usage/v7/select/customization/styling-select/demo.html
@@ -0,0 +1,60 @@
+
+
+
+
+
+
+ Select - Styling the Select
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v7/select/customization/styling-select/index.md b/static/usage/v7/select/customization/styling-select/index.md
new file mode 100644
index 00000000000..dbfe2ba527c
--- /dev/null
+++ b/static/usage/v7/select/customization/styling-select/index.md
@@ -0,0 +1,34 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/v7/select/customization/styling-select/javascript.md b/static/usage/v7/select/customization/styling-select/javascript.md
new file mode 100644
index 00000000000..505b93f7282
--- /dev/null
+++ b/static/usage/v7/select/customization/styling-select/javascript.md
@@ -0,0 +1,35 @@
+```html
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+```
diff --git a/static/usage/v7/select/customization/styling-select/react/main_css.md b/static/usage/v7/select/customization/styling-select/react/main_css.md
new file mode 100644
index 00000000000..27fc8e85e4b
--- /dev/null
+++ b/static/usage/v7/select/customization/styling-select/react/main_css.md
@@ -0,0 +1,27 @@
+```css
+ion-select {
+ --placeholder-color: #971e49;
+ --placeholder-opacity: 1;
+ width: 100%;
+ justify-content: center;
+}
+
+ion-select::part(placeholder),
+ion-select::part(text) {
+ flex: 0 0 auto;
+}
+
+ion-select::part(placeholder)::first-letter {
+ font-size: 24px;
+ font-weight: 500;
+}
+
+ion-select::part(text) {
+ color: #545ca7;
+}
+
+ion-select::part(icon) {
+ color: #971e49;
+ opacity: 1;
+}
+```
\ No newline at end of file
diff --git a/static/usage/v7/select/customization/styling-select/react/main_tsx.md b/static/usage/v7/select/customization/styling-select/react/main_tsx.md
new file mode 100644
index 00000000000..00e0e7a8027
--- /dev/null
+++ b/static/usage/v7/select/customization/styling-select/react/main_tsx.md
@@ -0,0 +1,17 @@
+```tsx
+import React from 'react';
+import { IonSelect, IonSelectOption } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+
+ Apples
+ Oranges
+ Bananas
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/select/customization/styling-select/vue.md b/static/usage/v7/select/customization/styling-select/vue.md
new file mode 100644
index 00000000000..749540e895f
--- /dev/null
+++ b/static/usage/v7/select/customization/styling-select/vue.md
@@ -0,0 +1,46 @@
+```html
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/select/fill/angular.md b/static/usage/v7/select/fill/angular.md
new file mode 100644
index 00000000000..fcfe25bfe2c
--- /dev/null
+++ b/static/usage/v7/select/fill/angular.md
@@ -0,0 +1,15 @@
+```html
+
+ Apple
+ Banana
+ Orange
+
+
+
+
+
+ Apple
+ Banana
+ Orange
+
+```
diff --git a/static/usage/v7/select/fill/demo.html b/static/usage/v7/select/fill/demo.html
new file mode 100644
index 00000000000..b34195cad90
--- /dev/null
+++ b/static/usage/v7/select/fill/demo.html
@@ -0,0 +1,44 @@
+
+
+
+
+
+
+ Input
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+
+
+
+
diff --git a/static/usage/v7/select/fill/index.md b/static/usage/v7/select/fill/index.md
new file mode 100644
index 00000000000..393a8af448a
--- /dev/null
+++ b/static/usage/v7/select/fill/index.md
@@ -0,0 +1,14 @@
+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/select/fill/javascript.md b/static/usage/v7/select/fill/javascript.md
new file mode 100644
index 00000000000..fcfe25bfe2c
--- /dev/null
+++ b/static/usage/v7/select/fill/javascript.md
@@ -0,0 +1,15 @@
+```html
+
+ Apple
+ Banana
+ Orange
+
+
+
+
+
+ Apple
+ Banana
+ Orange
+
+```
diff --git a/static/usage/v7/select/fill/react.md b/static/usage/v7/select/fill/react.md
new file mode 100644
index 00000000000..ffec8acdc07
--- /dev/null
+++ b/static/usage/v7/select/fill/react.md
@@ -0,0 +1,25 @@
+```tsx
+import React from 'react';
+import { IonSelect, IonSelectOption } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+ Apple
+ Banana
+ Orange
+
+
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/select/fill/vue.md b/static/usage/v7/select/fill/vue.md
new file mode 100644
index 00000000000..ea96b7ca17b
--- /dev/null
+++ b/static/usage/v7/select/fill/vue.md
@@ -0,0 +1,26 @@
+```html
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+
+```
diff --git a/static/usage/v7/select/interfaces/action-sheet/angular.md b/static/usage/v7/select/interfaces/action-sheet/angular.md
new file mode 100644
index 00000000000..f8d864e3a7c
--- /dev/null
+++ b/static/usage/v7/select/interfaces/action-sheet/angular.md
@@ -0,0 +1,11 @@
+```html
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+```
diff --git a/static/usage/v7/select/interfaces/action-sheet/demo.html b/static/usage/v7/select/interfaces/action-sheet/demo.html
new file mode 100644
index 00000000000..78447f2da4b
--- /dev/null
+++ b/static/usage/v7/select/interfaces/action-sheet/demo.html
@@ -0,0 +1,32 @@
+
+
+
+
+
+
+ Select - Action Sheet
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v7/select/interfaces/action-sheet/index.md b/static/usage/v7/select/interfaces/action-sheet/index.md
new file mode 100644
index 00000000000..1dc5472394e
--- /dev/null
+++ b/static/usage/v7/select/interfaces/action-sheet/index.md
@@ -0,0 +1,13 @@
+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/select/interfaces/action-sheet/javascript.md b/static/usage/v7/select/interfaces/action-sheet/javascript.md
new file mode 100644
index 00000000000..f8d864e3a7c
--- /dev/null
+++ b/static/usage/v7/select/interfaces/action-sheet/javascript.md
@@ -0,0 +1,11 @@
+```html
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+```
diff --git a/static/usage/v7/select/interfaces/action-sheet/react.md b/static/usage/v7/select/interfaces/action-sheet/react.md
new file mode 100644
index 00000000000..b285c79f0b3
--- /dev/null
+++ b/static/usage/v7/select/interfaces/action-sheet/react.md
@@ -0,0 +1,18 @@
+```tsx
+import React from 'react';
+import { IonList, IonItem, IonSelect, IonSelectOption } from '@ionic/react';
+function Example() {
+ return (
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/select/interfaces/action-sheet/vue.md b/static/usage/v7/select/interfaces/action-sheet/vue.md
new file mode 100644
index 00000000000..df563aefa47
--- /dev/null
+++ b/static/usage/v7/select/interfaces/action-sheet/vue.md
@@ -0,0 +1,22 @@
+```html
+
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/select/interfaces/popover/angular.md b/static/usage/v7/select/interfaces/popover/angular.md
new file mode 100644
index 00000000000..fe01597afa5
--- /dev/null
+++ b/static/usage/v7/select/interfaces/popover/angular.md
@@ -0,0 +1,11 @@
+```html
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+```
diff --git a/static/usage/v7/select/interfaces/popover/demo.html b/static/usage/v7/select/interfaces/popover/demo.html
new file mode 100644
index 00000000000..fbe0e7097a1
--- /dev/null
+++ b/static/usage/v7/select/interfaces/popover/demo.html
@@ -0,0 +1,32 @@
+
+
+
+
+
+
+ Select - Popover
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v7/select/interfaces/popover/index.md b/static/usage/v7/select/interfaces/popover/index.md
new file mode 100644
index 00000000000..ae4fa7b7521
--- /dev/null
+++ b/static/usage/v7/select/interfaces/popover/index.md
@@ -0,0 +1,13 @@
+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/select/interfaces/popover/javascript.md b/static/usage/v7/select/interfaces/popover/javascript.md
new file mode 100644
index 00000000000..fe01597afa5
--- /dev/null
+++ b/static/usage/v7/select/interfaces/popover/javascript.md
@@ -0,0 +1,11 @@
+```html
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+```
diff --git a/static/usage/v7/select/interfaces/popover/react.md b/static/usage/v7/select/interfaces/popover/react.md
new file mode 100644
index 00000000000..2afe98eef3c
--- /dev/null
+++ b/static/usage/v7/select/interfaces/popover/react.md
@@ -0,0 +1,18 @@
+```tsx
+import React from 'react';
+import { IonList, IonItem, IonSelect, IonSelectOption } from '@ionic/react';
+function Example() {
+ return (
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/select/interfaces/popover/vue.md b/static/usage/v7/select/interfaces/popover/vue.md
new file mode 100644
index 00000000000..24b1f4b66d0
--- /dev/null
+++ b/static/usage/v7/select/interfaces/popover/vue.md
@@ -0,0 +1,22 @@
+```html
+
+
+
+
+ Apples
+ Oranges
+ Bananas
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/select/justify/angular.md b/static/usage/v7/select/justify/angular.md
new file mode 100644
index 00000000000..a3951bb1a59
--- /dev/null
+++ b/static/usage/v7/select/justify/angular.md
@@ -0,0 +1,23 @@
+```html
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+```
diff --git a/static/usage/v7/select/justify/demo.html b/static/usage/v7/select/justify/demo.html
new file mode 100644
index 00000000000..80e1c10bbfe
--- /dev/null
+++ b/static/usage/v7/select/justify/demo.html
@@ -0,0 +1,50 @@
+
+
+
+
+
+
+ select
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+
+
+
+
+
diff --git a/static/usage/v7/select/justify/index.md b/static/usage/v7/select/justify/index.md
new file mode 100644
index 00000000000..6e263e9be07
--- /dev/null
+++ b/static/usage/v7/select/justify/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/select/justify/javascript.md b/static/usage/v7/select/justify/javascript.md
new file mode 100644
index 00000000000..a3951bb1a59
--- /dev/null
+++ b/static/usage/v7/select/justify/javascript.md
@@ -0,0 +1,23 @@
+```html
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+```
diff --git a/static/usage/v7/select/justify/react.md b/static/usage/v7/select/justify/react.md
new file mode 100644
index 00000000000..3c9b16c3129
--- /dev/null
+++ b/static/usage/v7/select/justify/react.md
@@ -0,0 +1,33 @@
+```tsx
+import React from 'react';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/react';
+
+function Example() {
+ return (
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/select/justify/vue.md b/static/usage/v7/select/justify/vue.md
new file mode 100644
index 00000000000..f9814d8b797
--- /dev/null
+++ b/static/usage/v7/select/justify/vue.md
@@ -0,0 +1,36 @@
+```html
+
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/select/label-placement/angular.md b/static/usage/v7/select/label-placement/angular.md
new file mode 100644
index 00000000000..063c257914d
--- /dev/null
+++ b/static/usage/v7/select/label-placement/angular.md
@@ -0,0 +1,35 @@
+```html
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+```
diff --git a/static/usage/v7/select/label-placement/demo.html b/static/usage/v7/select/label-placement/demo.html
new file mode 100644
index 00000000000..3a5ac6d0ab0
--- /dev/null
+++ b/static/usage/v7/select/label-placement/demo.html
@@ -0,0 +1,62 @@
+
+
+
+
+
+
+ select
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v7/select/label-placement/index.md b/static/usage/v7/select/label-placement/index.md
new file mode 100644
index 00000000000..9a32e0b3b61
--- /dev/null
+++ b/static/usage/v7/select/label-placement/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/select/label-placement/javascript.md b/static/usage/v7/select/label-placement/javascript.md
new file mode 100644
index 00000000000..063c257914d
--- /dev/null
+++ b/static/usage/v7/select/label-placement/javascript.md
@@ -0,0 +1,35 @@
+```html
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+```
diff --git a/static/usage/v7/select/label-placement/react.md b/static/usage/v7/select/label-placement/react.md
new file mode 100644
index 00000000000..28e70627659
--- /dev/null
+++ b/static/usage/v7/select/label-placement/react.md
@@ -0,0 +1,43 @@
+```tsx
+import React from 'react';
+import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/react';
+
+function Example() {
+ return (
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/select/label-placement/vue.md b/static/usage/v7/select/label-placement/vue.md
new file mode 100644
index 00000000000..412441ca164
--- /dev/null
+++ b/static/usage/v7/select/label-placement/vue.md
@@ -0,0 +1,46 @@
+```html
+
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+
+
+ Apple
+ Banana
+ Orange
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/select/migration/index.md b/static/usage/v7/select/migration/index.md
new file mode 100644
index 00000000000..4df052802db
--- /dev/null
+++ b/static/usage/v7/select/migration/index.md
@@ -0,0 +1,140 @@
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+````mdx-code-block
+
+
+
+```html
+
+
+
+
+ Favorite Fruit:
+ ...
+
+
+
+
+ ...
+
+
+
+
+
+
+
+ Favorite Fruit:
+ ...
+
+
+
+
+
+...
+```
+
+
+
+```html
+
+
+
+
+ Favorite Fruit:
+ ...
+
+
+
+
+ ...
+
+
+
+
+
+
+
+ Favorite Fruit:
+ ...
+
+
+
+
+
+...
+```
+
+
+
+```tsx
+{/* Label and Label Position */}
+
+{/* Before */}
+
+ Favorite Fruit:
+ ...
+
+
+{/* After */}
+
+ ...
+
+
+
+{/* Fill */}
+
+{/* Before */}
+
+ Favorite Fruit:
+ ...
+
+
+{/* After */}
+
+{/* Inputs using `fill` should not be placed in IonItem */}
+...
+```
+
+
+
+```html
+
+
+
+
+ Favorite Fruit:
+ ...
+
+
+
+
+ ...
+
+
+
+
+
+
+
+ Favorite Fruit:
+ ...
+
+
+
+
+
+...
+```
+
+
+````
\ No newline at end of file
diff --git a/static/usage/v7/select/objects-as-values/multiple-selection/angular/example_component_html.md b/static/usage/v7/select/objects-as-values/multiple-selection/angular/example_component_html.md
new file mode 100644
index 00000000000..81ac94abb5c
--- /dev/null
+++ b/static/usage/v7/select/objects-as-values/multiple-selection/angular/example_component_html.md
@@ -0,0 +1,18 @@
+```html
+
+
+
+ {{ food.name }}
+
+
+
+ Current value: {{ currentFood | json }}
+
+
+```
\ No newline at end of file
diff --git a/static/usage/v7/select/objects-as-values/multiple-selection/angular/example_component_ts.md b/static/usage/v7/select/objects-as-values/multiple-selection/angular/example_component_ts.md
new file mode 100644
index 00000000000..76fa7e51e49
--- /dev/null
+++ b/static/usage/v7/select/objects-as-values/multiple-selection/angular/example_component_ts.md
@@ -0,0 +1,45 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ currentFood = undefined;
+
+ foods = [
+ {
+ id: 1,
+ name: 'Apples',
+ type: 'fruit',
+ },
+ {
+ id: 2,
+ name: 'Carrots',
+ type: 'vegetable',
+ },
+ {
+ id: 3,
+ name: 'Cupcakes',
+ type: 'dessert',
+ },
+ ];
+
+ compareWith(o1, o2) {
+ if (!o1 || !o2) {
+ return o1 === o2;
+ }
+
+ if (Array.isArray(o2)) {
+ return o2.some((o) => o.id === o1.id);
+ }
+
+ return o1.id === o2.id;
+ }
+
+ handleChange(ev) {
+ this.currentFood = ev.target.value;
+ }
+}
+```
diff --git a/static/usage/v7/select/objects-as-values/multiple-selection/demo.html b/static/usage/v7/select/objects-as-values/multiple-selection/demo.html
new file mode 100644
index 00000000000..7a46acbc1ac
--- /dev/null
+++ b/static/usage/v7/select/objects-as-values/multiple-selection/demo.html
@@ -0,0 +1,91 @@
+
+
+
+
+
+
+ Select - Object Values and Multiple Selection
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Current value:
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v7/select/objects-as-values/multiple-selection/index.md b/static/usage/v7/select/objects-as-values/multiple-selection/index.md
new file mode 100644
index 00000000000..c81c011718e
--- /dev/null
+++ b/static/usage/v7/select/objects-as-values/multiple-selection/index.md
@@ -0,0 +1,25 @@
+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_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/v7/select/objects-as-values/multiple-selection/javascript.md b/static/usage/v7/select/objects-as-values/multiple-selection/javascript.md
new file mode 100644
index 00000000000..8fed71dd03c
--- /dev/null
+++ b/static/usage/v7/select/objects-as-values/multiple-selection/javascript.md
@@ -0,0 +1,60 @@
+```html
+
+
+
+
+
+
+ Current value:
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/select/objects-as-values/multiple-selection/react.md b/static/usage/v7/select/objects-as-values/multiple-selection/react.md
new file mode 100644
index 00000000000..2ab4681fa91
--- /dev/null
+++ b/static/usage/v7/select/objects-as-values/multiple-selection/react.md
@@ -0,0 +1,68 @@
+```tsx
+import React, { useState } from 'react';
+import { IonItem, IonList, IonLabel, IonSelect, IonSelectOption } from '@ionic/react';
+
+interface Food {
+ id: number;
+ name: string;
+ type: string;
+}
+
+const foods: Food[] = [
+ {
+ id: 1,
+ name: 'Apples',
+ type: 'fruit',
+ },
+ {
+ id: 2,
+ name: 'Carrots',
+ type: 'vegetable',
+ },
+ {
+ id: 3,
+ name: 'Cupcakes',
+ type: 'dessert',
+ },
+];
+
+const compareWith = (o1: Food, o2: Food) => {
+ if (!o1 || !o2) {
+ return o1 === o2;
+ }
+
+ if (Array.isArray(o2)) {
+ return o2.some((o) => o.id === o1.id);
+ }
+
+ return o1.id === o2.id;
+};
+
+function Example() {
+ const [currentFood, setCurrentFood] = useState('');
+
+ return (
+
+
+ setCurrentFood(JSON.stringify(ev.detail.value))}
+ multiple={true}
+ >
+ {foods.map((food) => (
+
+ {food.name}
+
+ ))}
+
+
+
+ Current value: {currentFood}
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/select/objects-as-values/multiple-selection/vue.md b/static/usage/v7/select/objects-as-values/multiple-selection/vue.md
new file mode 100644
index 00000000000..d556b9c5178
--- /dev/null
+++ b/static/usage/v7/select/objects-as-values/multiple-selection/vue.md
@@ -0,0 +1,64 @@
+```html
+
+
+
+
+ {{ food.name }}
+
+
+
+ Current value: {{ currentFood }}
+
+
+
+
+
+```
diff --git a/static/usage/v7/select/objects-as-values/using-comparewith/angular/example_component_html.md b/static/usage/v7/select/objects-as-values/using-comparewith/angular/example_component_html.md
new file mode 100644
index 00000000000..5b4e4ecb0bd
--- /dev/null
+++ b/static/usage/v7/select/objects-as-values/using-comparewith/angular/example_component_html.md
@@ -0,0 +1,17 @@
+```html
+
+
+
+ {{ food.name }}
+
+
+
+ Current value: {{ currentFood | json }}
+
+
+```
\ No newline at end of file
diff --git a/static/usage/v7/select/objects-as-values/using-comparewith/angular/example_component_ts.md b/static/usage/v7/select/objects-as-values/using-comparewith/angular/example_component_ts.md
new file mode 100644
index 00000000000..afbd5f454cd
--- /dev/null
+++ b/static/usage/v7/select/objects-as-values/using-comparewith/angular/example_component_ts.md
@@ -0,0 +1,37 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ currentFood = undefined;
+
+ foods = [
+ {
+ id: 1,
+ name: 'Apples',
+ type: 'fruit',
+ },
+ {
+ id: 2,
+ name: 'Carrots',
+ type: 'vegetable',
+ },
+ {
+ id: 3,
+ name: 'Cupcakes',
+ type: 'dessert',
+ },
+ ];
+
+ compareWith(o1, o2) {
+ return o1 && o2 ? o1.id === o2.id : o1 === o2;
+ }
+
+ handleChange(ev) {
+ this.currentFood = ev.target.value;
+ }
+}
+```
diff --git a/static/usage/v7/select/objects-as-values/using-comparewith/demo.html b/static/usage/v7/select/objects-as-values/using-comparewith/demo.html
new file mode 100644
index 00000000000..63debebf56c
--- /dev/null
+++ b/static/usage/v7/select/objects-as-values/using-comparewith/demo.html
@@ -0,0 +1,79 @@
+
+
+
+
+
+
+ Select - Using compareWith
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Current value:
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v7/select/objects-as-values/using-comparewith/index.md b/static/usage/v7/select/objects-as-values/using-comparewith/index.md
new file mode 100644
index 00000000000..f6e530c8ba2
--- /dev/null
+++ b/static/usage/v7/select/objects-as-values/using-comparewith/index.md
@@ -0,0 +1,25 @@
+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_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/v7/select/objects-as-values/using-comparewith/javascript.md b/static/usage/v7/select/objects-as-values/using-comparewith/javascript.md
new file mode 100644
index 00000000000..f9b385d5474
--- /dev/null
+++ b/static/usage/v7/select/objects-as-values/using-comparewith/javascript.md
@@ -0,0 +1,52 @@
+```html
+
+
+
+
+
+
+ Current value:
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/select/objects-as-values/using-comparewith/react.md b/static/usage/v7/select/objects-as-values/using-comparewith/react.md
new file mode 100644
index 00000000000..08512071f7a
--- /dev/null
+++ b/static/usage/v7/select/objects-as-values/using-comparewith/react.md
@@ -0,0 +1,59 @@
+```tsx
+import React, { useState } from 'react';
+import { IonItem, IonList, IonLabel, IonSelect, IonSelectOption } from '@ionic/react';
+
+interface Food {
+ id: number;
+ name: string;
+ type: string;
+}
+
+const foods: Food[] = [
+ {
+ id: 1,
+ name: 'Apples',
+ type: 'fruit',
+ },
+ {
+ id: 2,
+ name: 'Carrots',
+ type: 'vegetable',
+ },
+ {
+ id: 3,
+ name: 'Cupcakes',
+ type: 'dessert',
+ },
+];
+
+const compareWith = (o1: Food, o2: Food) => {
+ return o1 && o2 ? o1.id === o2.id : o1 === o2;
+};
+
+function Example() {
+ const [currentFood, setCurrentFood] = useState('');
+
+ return (
+
+
+ setCurrentFood(JSON.stringify(ev.detail.value))}
+ >
+ {foods.map((food) => (
+
+ {food.name}
+
+ ))}
+
+
+
+ Current food: {currentFood}
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/select/objects-as-values/using-comparewith/vue.md b/static/usage/v7/select/objects-as-values/using-comparewith/vue.md
new file mode 100644
index 00000000000..99ed6f5c3d7
--- /dev/null
+++ b/static/usage/v7/select/objects-as-values/using-comparewith/vue.md
@@ -0,0 +1,55 @@
+```html
+
+
+
+
+ {{ food.name }}
+
+
+
+ Current value: {{ currentFood }}
+
+
+
+
+
+```
diff --git a/static/usage/v7/select/typeahead/angular/angular_types_ts.md b/static/usage/v7/select/typeahead/angular/angular_types_ts.md
new file mode 100644
index 00000000000..bdf47c9d0ae
--- /dev/null
+++ b/static/usage/v7/select/typeahead/angular/angular_types_ts.md
@@ -0,0 +1,6 @@
+```ts
+export interface Item {
+ text: string;
+ value: string;
+};
+```
diff --git a/static/usage/v7/select/typeahead/angular/app_module_ts.md b/static/usage/v7/select/typeahead/angular/app_module_ts.md
new file mode 100644
index 00000000000..0fa58037717
--- /dev/null
+++ b/static/usage/v7/select/typeahead/angular/app_module_ts.md
@@ -0,0 +1,19 @@
+```ts
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { AppComponent } from './app.component';
+import { ExampleComponent } from './example.component';
+
+import { TypeaheadComponent } from './typeahead.component';
+
+@NgModule({
+ imports: [BrowserModule, FormsModule, IonicModule.forRoot({})],
+ declarations: [AppComponent, ExampleComponent, TypeaheadComponent],
+ bootstrap: [AppComponent],
+})
+export class AppModule {}
+```
diff --git a/static/usage/v7/select/typeahead/angular/example_component_html.md b/static/usage/v7/select/typeahead/angular/example_component_html.md
new file mode 100644
index 00000000000..3c702c08d67
--- /dev/null
+++ b/static/usage/v7/select/typeahead/angular/example_component_html.md
@@ -0,0 +1,23 @@
+```html
+
+
+
+ Favorite Fruits
+ {{ selectedFruitsText }}
+
+
+
+
+
+
+
+
+
+```
\ No newline at end of file
diff --git a/static/usage/v7/select/typeahead/angular/example_component_ts.md b/static/usage/v7/select/typeahead/angular/example_component_ts.md
new file mode 100644
index 00000000000..ee7f5e29305
--- /dev/null
+++ b/static/usage/v7/select/typeahead/angular/example_component_ts.md
@@ -0,0 +1,59 @@
+```ts
+import { Component, ViewChild } from '@angular/core';
+import { IonModal } from '@ionic/angular';
+import { Item } from './types';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ @ViewChild('modal', { static: true }) modal!: IonModal;
+
+ selectedFruitsText = '0 Items';
+ selectedFruits: string[] = [];
+
+ fruits: Item[] = [
+ { text: 'Apple', value: 'apple' },
+ { text: 'Apricot', value: 'apricot' },
+ { text: 'Banana', value: 'banana' },
+ { text: 'Blackberry', value: 'blackberry' },
+ { text: 'Blueberry', value: 'blueberry' },
+ { text: 'Cherry', value: 'cherry' },
+ { text: 'Cranberry', value: 'cranberry' },
+ { text: 'Grape', value: 'grape' },
+ { text: 'Grapefruit', value: 'grapefruit' },
+ { text: 'Guava', value: 'guava' },
+ { text: 'Jackfruit', value: 'jackfruit' },
+ { text: 'Lime', value: 'lime' },
+ { text: 'Mango', value: 'mango' },
+ { text: 'Nectarine', value: 'nectarine' },
+ { text: 'Orange', value: 'orange' },
+ { text: 'Papaya', value: 'papaya' },
+ { text: 'Passionfruit', value: 'passionfruit' },
+ { text: 'Peach', value: 'peach' },
+ { text: 'Pear', value: 'pear' },
+ { text: 'Plantain', value: 'plantain' },
+ { text: 'Plum', value: 'plum' },
+ { text: 'Pineapple', value: 'pineapple' },
+ { text: 'Pomegranate', value: 'pomegranate' },
+ { text: 'Raspberry', value: 'raspberry' },
+ { text: 'Strawberry', value: 'strawberry' }
+ ];
+
+ private formatData(data: string[]) {
+ if (data.length === 1) {
+ const fruit = this.fruits.find(fruit => fruit.value === data[0])
+ return fruit.text;
+ }
+
+ return `${data.length} items`;
+ }
+
+ fruitSelectionChanged(fruits: string[]) {
+ this.selectedFruits = fruits;
+ this.selectedFruitsText = this.formatData(this.selectedFruits);
+ this.modal.dismiss();
+ }
+}
+```
diff --git a/static/usage/v7/select/typeahead/angular/modal-example_component_html.md b/static/usage/v7/select/typeahead/angular/modal-example_component_html.md
new file mode 100644
index 00000000000..43c768f7d18
--- /dev/null
+++ b/static/usage/v7/select/typeahead/angular/modal-example_component_html.md
@@ -0,0 +1,28 @@
+```html
+
+
+
+ Cancel
+
+ {{ title }}
+
+ Done
+
+
+
+
+
+
+
+
+
+
+ {{ item.text }}
+
+
+
+```
diff --git a/static/usage/v7/select/typeahead/angular/modal-example_component_ts.md b/static/usage/v7/select/typeahead/angular/modal-example_component_ts.md
new file mode 100644
index 00000000000..129db1ed94b
--- /dev/null
+++ b/static/usage/v7/select/typeahead/angular/modal-example_component_ts.md
@@ -0,0 +1,85 @@
+```ts
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import type { OnInit } from '@angular/core';
+import { Item } from './types';
+
+@Component({
+ selector: 'app-typeahead',
+ templateUrl: 'typeahead.component.html',
+})
+export class TypeaheadComponentt implements OnInit {
+ @Input() items: Item[] = [];
+ @Input() selectedItems: string[] = [];
+ @Input() title = 'Select Items';
+
+ @Output() selectionCancel = new EventEmitter();
+ @Output() selectionChange = new EventEmitter();
+
+ filteredItems: Item[] = [];
+ workingSelectedValues: string[] = [];
+
+ ngOnInit() {
+ this.filteredItems = [...this.items];
+ this.workingSelectedValues = [...this.selectedItems];
+ }
+
+ trackItems(index: number, item: Item) {
+ return item.value;
+ }
+
+ cancelChanges() {
+ this.selectionCancel.emit();
+ }
+
+ confirmChanges() {
+ this.selectionChange.emit(this.workingSelectedValues);
+ }
+
+ searchbarInput(ev) {
+ this.filterList(ev.target.value);
+ }
+
+ /**
+ * Update the rendered view with
+ * the provided search query. If no
+ * query is provided, all data
+ * will be rendered.
+ */
+ filterList(searchQuery: string | undefined) {
+ /**
+ * If no search query is defined,
+ * return all options.
+ */
+ if (searchQuery === undefined) {
+ this.filteredItems = [...this.items];
+ } else {
+ /**
+ * Otherwise, normalize the search
+ * query and check to see which items
+ * contain the search query as a substring.
+ */
+ const normalizedQuery = searchQuery.toLowerCase();
+ this.filteredItems = this.items.filter(item => {
+ return item.value.includes(normalizedQuery);
+ });
+ }
+ }
+
+ isChecked(value: string) {
+ return this.workingSelectedValues.find(item => item === value);
+ }
+
+ checkboxChange(ev) {
+ const { checked, value } = ev.detail;
+
+ if (checked) {
+ this.workingSelectedValues = [
+ ...this.workingSelectedValues,
+ value
+ ]
+ } else {
+ this.workingSelectedValues = this.workingSelectedValues.filter(item => item !== value);
+ }
+ }
+}
+```
diff --git a/static/usage/v7/select/typeahead/demo.html b/static/usage/v7/select/typeahead/demo.html
new file mode 100644
index 00000000000..df815850f89
--- /dev/null
+++ b/static/usage/v7/select/typeahead/demo.html
@@ -0,0 +1,222 @@
+
+
+
+
+
+ Select
+
+
+
+
+
+
+
+
+
+
+
+
+ Favorite Fruits
+ 0 Items
+
+
+
+
+
+ Favorite Fruits
+ 0 Items
+
+
+
{ selectedFruitsText }
+
+
+
+
+
+ modal.current?.dismiss()}
+ onSelectionChange={fruitSelectionChanged}
+ />
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/select/typeahead/react/react_types_ts.md b/static/usage/v7/select/typeahead/react/react_types_ts.md
new file mode 100644
index 00000000000..bdf47c9d0ae
--- /dev/null
+++ b/static/usage/v7/select/typeahead/react/react_types_ts.md
@@ -0,0 +1,6 @@
+```ts
+export interface Item {
+ text: string;
+ value: string;
+};
+```
diff --git a/static/usage/v7/select/typeahead/react/typeahead_component_tsx.md b/static/usage/v7/select/typeahead/react/typeahead_component_tsx.md
new file mode 100644
index 00000000000..7c0f89d905e
--- /dev/null
+++ b/static/usage/v7/select/typeahead/react/typeahead_component_tsx.md
@@ -0,0 +1,111 @@
+```tsx
+import React, { useState } from 'react';
+import { IonButton, IonButtons, IonCheckbox, IonContent, IonHeader, IonItem, IonList, IonTitle, IonSearchbar, IonToolbar } from '@ionic/react';
+import type { CheckboxCustomEvent } from '@ionic/react';
+import type { Item } from './types';
+
+interface TypeaheadProps {
+ items: Item[];
+ selectedItems: string[];
+ title?: string;
+ onSelectionCancel?: () => void;
+ onSelectionChange?: (items: string[]) => void;
+}
+
+function AppTypeahead(props: TypeaheadProps) {
+ const [filteredItems, setFilteredItems] = useState([...props.items]);
+ const [workingSelectedValues, setWorkingSelectedValues] = useState([...props.selectedItems]);
+
+ const isChecked = (value: string) => {
+ return workingSelectedValues.find(item => item === value) !== undefined;
+ }
+
+ const cancelChanges = () => {
+ const { onSelectionCancel } = props;
+ if (onSelectionCancel !== undefined) {
+ onSelectionCancel();
+ }
+ }
+
+ const confirmChanges = () => {
+ const { onSelectionChange } = props;
+ if (onSelectionChange !== undefined) {
+ onSelectionChange(workingSelectedValues);
+ }
+ }
+
+ const searchbarInput = (ev: any) => {
+ filterList(ev.target.value);
+ }
+
+ /**
+ * Update the rendered view with
+ * the provided search query. If no
+ * query is provided, all data
+ * will be rendered.
+ */
+ const filterList = (searchQuery: string | null | undefined) => {
+ /**
+ * If no search query is defined,
+ * return all options.
+ */
+ if (searchQuery === undefined || searchQuery === null) {
+ setFilteredItems([...props.items]);
+ } else {
+ /**
+ * Otherwise, normalize the search
+ * query and check to see which items
+ * contain the search query as a substring.
+ */
+ const normalizedQuery = searchQuery.toLowerCase();
+ setFilteredItems(props.items.filter(item => {
+ return item.value.includes(normalizedQuery);
+ }));
+ }
+ }
+
+ const checkboxChange = (ev: CheckboxCustomEvent) => {
+ const { checked, value } = ev.detail;
+
+ if (checked) {
+ setWorkingSelectedValues([...workingSelectedValues, value]);
+ } else {
+ setWorkingSelectedValues(workingSelectedValues.filter(item => item !== value));
+ }
+ }
+
+ return (
+ <>
+
+
+
+ Cancel
+
+ {props.title}
+
+ Done
+
+
+
+
+
+
+
+
+
+ {filteredItems.map(item => (
+
+ {item.text}
+
+ ))}
+
+
+
+ );
+}
+export default AppTypeahead;
+```
diff --git a/static/usage/v7/select/typeahead/vue/example_vue.md b/static/usage/v7/select/typeahead/vue/example_vue.md
new file mode 100644
index 00000000000..8086c2f0d6a
--- /dev/null
+++ b/static/usage/v7/select/typeahead/vue/example_vue.md
@@ -0,0 +1,83 @@
+```html
+
+
+
+
+ Favorite Fruits
+ {{ selectedFruitsText }}
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/select/typeahead/vue/typeahead_component_vue.md b/static/usage/v7/select/typeahead/vue/typeahead_component_vue.md
new file mode 100644
index 00000000000..486bb000586
--- /dev/null
+++ b/static/usage/v7/select/typeahead/vue/typeahead_component_vue.md
@@ -0,0 +1,121 @@
+```html
+
+
+
+
+ Cancel
+
+ {{ $props.title }}
+
+ Done
+
+
+
+
+
+
+
+
+
+
+ {{ item.text }}
+
+
+
+
+
+
+```
\ No newline at end of file
diff --git a/static/usage/v7/select/typeahead/vue/vue_types_ts.md b/static/usage/v7/select/typeahead/vue/vue_types_ts.md
new file mode 100644
index 00000000000..bdf47c9d0ae
--- /dev/null
+++ b/static/usage/v7/select/typeahead/vue/vue_types_ts.md
@@ -0,0 +1,6 @@
+```ts
+export interface Item {
+ text: string;
+ value: string;
+};
+```
diff --git a/static/usage/v7/skeleton-text/basic/angular/example_component_html.md b/static/usage/v7/skeleton-text/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..bea0ee90431
--- /dev/null
+++ b/static/usage/v7/skeleton-text/basic/angular/example_component_html.md
@@ -0,0 +1,39 @@
+```html
+
+ Albums
+
+
+
+
+
+ Abbey Road
+ The Beatles
+ 1969
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Toggle
+```
diff --git a/static/usage/v7/skeleton-text/basic/angular/example_component_ts.md b/static/usage/v7/skeleton-text/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..8b30337848c
--- /dev/null
+++ b/static/usage/v7/skeleton-text/basic/angular/example_component_ts.md
@@ -0,0 +1,13 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css']
+})
+export class ExampleComponent {
+ public loaded = false;
+}
+
+```
\ No newline at end of file
diff --git a/static/usage/v7/skeleton-text/basic/demo.html b/static/usage/v7/skeleton-text/basic/demo.html
new file mode 100644
index 00000000000..a1cbc3f4f12
--- /dev/null
+++ b/static/usage/v7/skeleton-text/basic/demo.html
@@ -0,0 +1,92 @@
+
+
+
+
+
+
+ Accordion
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Toggle
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/skeleton-text/basic/index.md b/static/usage/v7/skeleton-text/basic/index.md
new file mode 100644
index 00000000000..2aacfe8b931
--- /dev/null
+++ b/static/usage/v7/skeleton-text/basic/index.md
@@ -0,0 +1,25 @@
+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_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/v7/skeleton-text/basic/javascript.md b/static/usage/v7/skeleton-text/basic/javascript.md
new file mode 100644
index 00000000000..5eefa7c1149
--- /dev/null
+++ b/static/usage/v7/skeleton-text/basic/javascript.md
@@ -0,0 +1,61 @@
+```html
+
+Toggle
+
+
+```
diff --git a/static/usage/v7/skeleton-text/basic/react.md b/static/usage/v7/skeleton-text/basic/react.md
new file mode 100644
index 00000000000..2ea377034c9
--- /dev/null
+++ b/static/usage/v7/skeleton-text/basic/react.md
@@ -0,0 +1,61 @@
+```tsx
+import React, { useState } from 'react';
+import {
+ IonButton,
+ IonIcon,
+ IonItem,
+ IonLabel,
+ IonList,
+ IonListHeader,
+ IonSkeletonText,
+ IonThumbnail,
+} from '@ionic/react';
+import { musicalNotes } from 'ionicons/icons';
+function Example() {
+ const [loaded, setLoaded] = useState(false);
+ return (
+ <>
+ {loaded &&
+
+ Albums
+
+
+
+
+
+ Abbey Road
+ The Beatles
+ 1969
+
+
+
+ }
+ {!loaded &&
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ }
+ setLoaded(!loaded)}>Toggle
+
+ );
+}
+export default Example;
+```
\ No newline at end of file
diff --git a/static/usage/v7/skeleton-text/basic/vue.md b/static/usage/v7/skeleton-text/basic/vue.md
new file mode 100644
index 00000000000..c03a518af19
--- /dev/null
+++ b/static/usage/v7/skeleton-text/basic/vue.md
@@ -0,0 +1,78 @@
+```html
+
+
+ Albums
+
+
+
+
+
+ Abbey Road
+ The Beatles
+ 1969
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Toggle
+
+
+
+```
diff --git a/static/usage/v7/skeleton-text/theming/css-properties/angular/example_component_css.md b/static/usage/v7/skeleton-text/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..67761872c60
--- /dev/null
+++ b/static/usage/v7/skeleton-text/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,7 @@
+```css
+ion-skeleton-text {
+ --border-radius: 9999px;
+ --background: rgba(188, 0, 255, 0.065);
+ --background-rgb: 188, 0, 255;
+}
+```
\ No newline at end of file
diff --git a/static/usage/v7/skeleton-text/theming/css-properties/angular/example_component_html.md b/static/usage/v7/skeleton-text/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..4044c112b0c
--- /dev/null
+++ b/static/usage/v7/skeleton-text/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,23 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/skeleton-text/theming/css-properties/demo.html b/static/usage/v7/skeleton-text/theming/css-properties/demo.html
new file mode 100644
index 00000000000..6a84c2b7943
--- /dev/null
+++ b/static/usage/v7/skeleton-text/theming/css-properties/demo.html
@@ -0,0 +1,60 @@
+
+
+
+
+
+
+ Accordion
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/skeleton-text/theming/css-properties/react/main_css.md b/static/usage/v7/skeleton-text/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..67761872c60
--- /dev/null
+++ b/static/usage/v7/skeleton-text/theming/css-properties/react/main_css.md
@@ -0,0 +1,7 @@
+```css
+ion-skeleton-text {
+ --border-radius: 9999px;
+ --background: rgba(188, 0, 255, 0.065);
+ --background-rgb: 188, 0, 255;
+}
+```
\ No newline at end of file
diff --git a/static/usage/v7/skeleton-text/theming/css-properties/react/main_tsx.md b/static/usage/v7/skeleton-text/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..29e6e159f68
--- /dev/null
+++ b/static/usage/v7/skeleton-text/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,40 @@
+```tsx
+import React from 'react';
+import {
+ IonItem,
+ IonLabel,
+ IonList,
+ IonListHeader,
+ IonSkeletonText,
+ IonThumbnail,
+} from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+export default Example;
+```
\ No newline at end of file
diff --git a/static/usage/v7/skeleton-text/theming/css-properties/vue.md b/static/usage/v7/skeleton-text/theming/css-properties/vue.md
new file mode 100644
index 00000000000..418a7ca610f
--- /dev/null
+++ b/static/usage/v7/skeleton-text/theming/css-properties/vue.md
@@ -0,0 +1,56 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/spinner/basic/angular.md b/static/usage/v7/spinner/basic/angular.md
new file mode 100644
index 00000000000..72997980940
--- /dev/null
+++ b/static/usage/v7/spinner/basic/angular.md
@@ -0,0 +1,51 @@
+```html
+
+ Default
+
+
+
+
+ Dots
+
+
+
+
+ Lines
+
+
+
+
+ Lines Small
+
+
+
+
+ Lines Sharp
+
+
+
+
+ Lines Sharp Small
+
+
+
+
+ Bubbles
+
+
+
+
+ Circles
+
+
+
+
+ Circular
+
+
+
+
+ Crescent
+
+
+```
diff --git a/static/usage/v7/spinner/basic/demo.html b/static/usage/v7/spinner/basic/demo.html
new file mode 100644
index 00000000000..cf495c8bd07
--- /dev/null
+++ b/static/usage/v7/spinner/basic/demo.html
@@ -0,0 +1,79 @@
+
+
+
+
+
+
+ Spinner
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Default
+
+
+
+
+ Dots
+
+
+
+
+ Lines
+
+
+
+
+ Lines Small
+
+
+
+
+ Lines Sharp
+
+
+
+
+ Lines Sharp Small
+
+
+
+
+ Bubbles
+
+
+
+
+ Circles
+
+
+
+
+ Circular
+
+
+
+
+ Crescent
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/spinner/basic/index.md b/static/usage/v7/spinner/basic/index.md
new file mode 100644
index 00000000000..dd6417ff23c
--- /dev/null
+++ b/static/usage/v7/spinner/basic/index.md
@@ -0,0 +1,13 @@
+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/spinner/basic/javascript.md b/static/usage/v7/spinner/basic/javascript.md
new file mode 100644
index 00000000000..72997980940
--- /dev/null
+++ b/static/usage/v7/spinner/basic/javascript.md
@@ -0,0 +1,51 @@
+```html
+
+ Default
+
+
+
+
+ Dots
+
+
+
+
+ Lines
+
+
+
+
+ Lines Small
+
+
+
+
+ Lines Sharp
+
+
+
+
+ Lines Sharp Small
+
+
+
+
+ Bubbles
+
+
+
+
+ Circles
+
+
+
+
+ Circular
+
+
+
+
+ Crescent
+
+
+```
diff --git a/static/usage/v7/spinner/basic/react.md b/static/usage/v7/spinner/basic/react.md
new file mode 100644
index 00000000000..c6219c28b42
--- /dev/null
+++ b/static/usage/v7/spinner/basic/react.md
@@ -0,0 +1,61 @@
+```tsx
+import React from 'react';
+import { IonItem, IonLabel, IonSpinner } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+ Default
+
+
+
+
+ Dots
+
+
+
+
+ Lines
+
+
+
+
+ Lines Small
+
+
+
+
+ Lines Sharp
+
+
+
+
+ Lines Sharp Small
+
+
+
+
+ Bubbles
+
+
+
+
+ Circles
+
+
+
+
+ Circular
+
+
+
+
+ Crescent
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/spinner/basic/vue.md b/static/usage/v7/spinner/basic/vue.md
new file mode 100644
index 00000000000..089b9fb6da8
--- /dev/null
+++ b/static/usage/v7/spinner/basic/vue.md
@@ -0,0 +1,62 @@
+```html
+
+
+ Default
+
+
+
+
+ Dots
+
+
+
+
+ Lines
+
+
+
+
+ Lines Small
+
+
+
+
+ Lines Sharp
+
+
+
+
+ Lines Sharp Small
+
+
+
+
+ Bubbles
+
+
+
+
+ Circles
+
+
+
+
+ Circular
+
+
+
+
+ Crescent
+
+
+
+
+
+```
diff --git a/static/usage/v7/spinner/theming/colors/angular.md b/static/usage/v7/spinner/theming/colors/angular.md
new file mode 100644
index 00000000000..089ea023e92
--- /dev/null
+++ b/static/usage/v7/spinner/theming/colors/angular.md
@@ -0,0 +1,12 @@
+```html
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/spinner/theming/colors/demo.html b/static/usage/v7/spinner/theming/colors/demo.html
new file mode 100644
index 00000000000..387a56e38d4
--- /dev/null
+++ b/static/usage/v7/spinner/theming/colors/demo.html
@@ -0,0 +1,33 @@
+
+
+
+
+
+
+ Spinner
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/spinner/theming/colors/index.md b/static/usage/v7/spinner/theming/colors/index.md
new file mode 100644
index 00000000000..ee82596cc0f
--- /dev/null
+++ b/static/usage/v7/spinner/theming/colors/index.md
@@ -0,0 +1,13 @@
+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/spinner/theming/colors/javascript.md b/static/usage/v7/spinner/theming/colors/javascript.md
new file mode 100644
index 00000000000..089ea023e92
--- /dev/null
+++ b/static/usage/v7/spinner/theming/colors/javascript.md
@@ -0,0 +1,12 @@
+```html
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/spinner/theming/colors/react.md b/static/usage/v7/spinner/theming/colors/react.md
new file mode 100644
index 00000000000..aca320e2720
--- /dev/null
+++ b/static/usage/v7/spinner/theming/colors/react.md
@@ -0,0 +1,22 @@
+```tsx
+import React from 'react';
+import { IonSpinner } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/spinner/theming/colors/vue.md b/static/usage/v7/spinner/theming/colors/vue.md
new file mode 100644
index 00000000000..c45f320c7ed
--- /dev/null
+++ b/static/usage/v7/spinner/theming/colors/vue.md
@@ -0,0 +1,23 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/spinner/theming/css-properties/angular/example_component_css.md b/static/usage/v7/spinner/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..e77a7d79e6a
--- /dev/null
+++ b/static/usage/v7/spinner/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,5 @@
+```css
+ion-spinner {
+ --color: #54dc98;
+}
+```
diff --git a/static/usage/v7/spinner/theming/css-properties/angular/example_component_html.md b/static/usage/v7/spinner/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..4b3b8d665b4
--- /dev/null
+++ b/static/usage/v7/spinner/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v7/spinner/theming/css-properties/demo.html b/static/usage/v7/spinner/theming/css-properties/demo.html
new file mode 100644
index 00000000000..6c369bd71fd
--- /dev/null
+++ b/static/usage/v7/spinner/theming/css-properties/demo.html
@@ -0,0 +1,30 @@
+
+
+
+
+
+
+ Spinner
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/spinner/theming/css-properties/index.md b/static/usage/v7/spinner/theming/css-properties/index.md
new file mode 100644
index 00000000000..22b93f802b0
--- /dev/null
+++ b/static/usage/v7/spinner/theming/css-properties/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/css-properties/javascript.md b/static/usage/v7/spinner/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..e2077bc508e
--- /dev/null
+++ b/static/usage/v7/spinner/theming/css-properties/javascript.md
@@ -0,0 +1,9 @@
+```html
+
+
+
+```
diff --git a/static/usage/v7/spinner/theming/css-properties/react.md b/static/usage/v7/spinner/theming/css-properties/react.md
new file mode 100644
index 00000000000..e5cd98ffb60
--- /dev/null
+++ b/static/usage/v7/spinner/theming/css-properties/react.md
@@ -0,0 +1,11 @@
+```tsx
+import React from 'react';
+import { IonSpinner } from '@ionic/react';
+
+function Example() {
+ return (
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/spinner/theming/css-properties/react/main_css.md b/static/usage/v7/spinner/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..e77a7d79e6a
--- /dev/null
+++ b/static/usage/v7/spinner/theming/css-properties/react/main_css.md
@@ -0,0 +1,5 @@
+```css
+ion-spinner {
+ --color: #54dc98;
+}
+```
diff --git a/static/usage/v7/spinner/theming/css-properties/react/main_tsx.md b/static/usage/v7/spinner/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..f990cb1e738
--- /dev/null
+++ b/static/usage/v7/spinner/theming/css-properties/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/css-properties/vue.md b/static/usage/v7/spinner/theming/css-properties/vue.md
new file mode 100644
index 00000000000..c818d2c7488
--- /dev/null
+++ b/static/usage/v7/spinner/theming/css-properties/vue.md
@@ -0,0 +1,20 @@
+```html
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/split-pane/basic/angular.md b/static/usage/v7/split-pane/basic/angular.md
new file mode 100644
index 00000000000..0183d57a9fa
--- /dev/null
+++ b/static/usage/v7/split-pane/basic/angular.md
@@ -0,0 +1,25 @@
+```html
+
+
+
+
+ Menu
+
+
+
+ Menu Content
+
+
+
+
+
+
+ Main View
+
+
+
+ Main View Content
+
+
+
+```
diff --git a/static/usage/v7/split-pane/basic/demo.html b/static/usage/v7/split-pane/basic/demo.html
new file mode 100644
index 00000000000..c514ebd1dbc
--- /dev/null
+++ b/static/usage/v7/split-pane/basic/demo.html
@@ -0,0 +1,42 @@
+
+
+
+
+
+
+ Spinner
+
+
+
+
+
+
+
+
+
+
+
+
+ Menu
+
+
+
+ Menu Content
+
+
+
+
+
+
+ Main View
+
+
+
+ Main View Content
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/split-pane/basic/index.md b/static/usage/v7/split-pane/basic/index.md
new file mode 100644
index 00000000000..40ec0cfe8a1
--- /dev/null
+++ b/static/usage/v7/split-pane/basic/index.md
@@ -0,0 +1,13 @@
+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/split-pane/basic/javascript.md b/static/usage/v7/split-pane/basic/javascript.md
new file mode 100644
index 00000000000..626cc1ee03f
--- /dev/null
+++ b/static/usage/v7/split-pane/basic/javascript.md
@@ -0,0 +1,25 @@
+```html
+
+
+
+
+ Menu
+
+
+
+ Menu Content
+
+
+
+
+
+
+ Main View
+
+
+
+ Main View Content
+
+
+
+```
diff --git a/static/usage/v7/split-pane/basic/react.md b/static/usage/v7/split-pane/basic/react.md
new file mode 100644
index 00000000000..4088c068f1d
--- /dev/null
+++ b/static/usage/v7/split-pane/basic/react.md
@@ -0,0 +1,33 @@
+```tsx
+import React from 'react';
+import { IonContent, IonHeader, IonMenu, IonSplitPane, IonTitle, IonToolbar } from '@ionic/react';
+
+function Example() {
+ return (
+
+
+
+
+ Menu
+
+
+
+ Menu Content
+
+
+
+
+
+
+ Main View
+
+
+
+ Main View Content
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/split-pane/basic/vue.md b/static/usage/v7/split-pane/basic/vue.md
new file mode 100644
index 00000000000..b514acbcf6e
--- /dev/null
+++ b/static/usage/v7/split-pane/basic/vue.md
@@ -0,0 +1,36 @@
+```html
+
+
+
+
+
+ Menu
+
+
+
+ Menu Content
+
+
+
+
+
+
+ Main View
+
+
+
+ Main View Content
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/split-pane/theming/css-properties/angular/example_component_css.md b/static/usage/v7/split-pane/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..701bc942f7b
--- /dev/null
+++ b/static/usage/v7/split-pane/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,8 @@
+```css
+ion-split-pane {
+ --side-width: 350px;
+ --side-max-width: 350px;
+
+ --border: 1px dashed #b3baff;
+}
+```
diff --git a/static/usage/v7/split-pane/theming/css-properties/angular/example_component_html.md b/static/usage/v7/split-pane/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..4772826c933
--- /dev/null
+++ b/static/usage/v7/split-pane/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,25 @@
+```html
+
+
+
+
+ Menu
+
+
+
+ Menu Content is 350px wide and has a blue dashed border
+
+
+
+
+
+
+ Main View
+
+
+
+ Main View Content
+
+
+
+```
diff --git a/static/usage/v7/split-pane/theming/css-properties/demo.html b/static/usage/v7/split-pane/theming/css-properties/demo.html
new file mode 100644
index 00000000000..83353796a32
--- /dev/null
+++ b/static/usage/v7/split-pane/theming/css-properties/demo.html
@@ -0,0 +1,50 @@
+
+
+
+
+
+
+ Spinner
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Menu
+
+
+
+ Menu Content is 350px wide and has a blue dashed border
+
+
+
+
+
+
+ Main View
+
+
+
+ Main View Content
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/split-pane/theming/css-properties/index.md b/static/usage/v7/split-pane/theming/css-properties/index.md
new file mode 100644
index 00000000000..336074baaaf
--- /dev/null
+++ b/static/usage/v7/split-pane/theming/css-properties/index.md
@@ -0,0 +1,33 @@
+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/split-pane/theming/css-properties/javascript.md b/static/usage/v7/split-pane/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..943993aa380
--- /dev/null
+++ b/static/usage/v7/split-pane/theming/css-properties/javascript.md
@@ -0,0 +1,34 @@
+```html
+
+
+
+
+ Menu
+
+
+
+ Menu Content is 350px wide and has a blue dashed border
+
+
+
+
+
+
+ Main View
+
+
+
+ Main View Content
+
+
+
+
+
+```
diff --git a/static/usage/v7/split-pane/theming/css-properties/react/main_css.md b/static/usage/v7/split-pane/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..701bc942f7b
--- /dev/null
+++ b/static/usage/v7/split-pane/theming/css-properties/react/main_css.md
@@ -0,0 +1,8 @@
+```css
+ion-split-pane {
+ --side-width: 350px;
+ --side-max-width: 350px;
+
+ --border: 1px dashed #b3baff;
+}
+```
diff --git a/static/usage/v7/split-pane/theming/css-properties/react/main_tsx.md b/static/usage/v7/split-pane/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..7456a34359d
--- /dev/null
+++ b/static/usage/v7/split-pane/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,35 @@
+```tsx
+import React from 'react';
+import { IonContent, IonHeader, IonMenu, IonSplitPane, IonTitle, IonToolbar } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+
+
+
+
+ Menu
+
+
+
+ Menu Content is 350px wide and has a blue dashed border
+
+
+
+
+
+
+ Main View
+
+
+
+ Main View Content
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/split-pane/theming/css-properties/vue.md b/static/usage/v7/split-pane/theming/css-properties/vue.md
new file mode 100644
index 00000000000..cc891eaeda1
--- /dev/null
+++ b/static/usage/v7/split-pane/theming/css-properties/vue.md
@@ -0,0 +1,45 @@
+```html
+
+
+
+
+
+ Menu
+
+
+
+ Menu Content is 350px wide and has a blue dashed border
+
+
+
+
+
+
+ Main View
+
+
+
+ Main View Content
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/tabs/router/angular/app_component_html.md b/static/usage/v7/tabs/router/angular/app_component_html.md
new file mode 100644
index 00000000000..7636539f28a
--- /dev/null
+++ b/static/usage/v7/tabs/router/angular/app_component_html.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v7/tabs/router/angular/app_module_ts.md b/static/usage/v7/tabs/router/angular/app_module_ts.md
new file mode 100644
index 00000000000..b2d3db7f33d
--- /dev/null
+++ b/static/usage/v7/tabs/router/angular/app_module_ts.md
@@ -0,0 +1,19 @@
+```ts
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { IonicModule } from '@ionic/angular';
+
+import { AppComponent } from './app.component';
+import { ExampleComponent } from './example.component';
+
+import { AppRoutingModule } from './app-routing.module';
+
+@NgModule({
+ imports: [BrowserModule, FormsModule, AppRoutingModule, IonicModule.forRoot()],
+ declarations: [AppComponent, ExampleComponent],
+ bootstrap: [AppComponent],
+})
+export class AppModule {}
+```
diff --git a/static/usage/v7/tabs/router/angular/app_routing_module_ts.md b/static/usage/v7/tabs/router/angular/app_routing_module_ts.md
new file mode 100644
index 00000000000..7ff1067030f
--- /dev/null
+++ b/static/usage/v7/tabs/router/angular/app_routing_module_ts.md
@@ -0,0 +1,42 @@
+```ts
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { ExampleComponent } from './example.component';
+
+@NgModule({
+ imports: [
+ RouterModule.forRoot([
+ {
+ path: '',
+ component: ExampleComponent,
+ children: [
+ {
+ path: '',
+ pathMatch: 'full',
+ redirectTo: 'home',
+ },
+ {
+ path: 'home',
+ loadChildren: () => import('./home/home-page.module').then((m) => m.HomePageModule),
+ },
+ {
+ path: 'radio',
+ loadChildren: () => import('./radio/radio-page.module').then((m) => m.RadioPageModule),
+ },
+ {
+ path: 'library',
+ loadChildren: () => import('./library/library-page.module').then((m) => m.LibraryPageModule),
+ },
+ {
+ path: 'search',
+ loadChildren: () => import('./search/search-page.module').then((m) => m.SearchPageModule),
+ },
+ ],
+ },
+ ]),
+ ],
+ exports: [RouterModule],
+})
+export class AppRoutingModule {}
+```
diff --git a/static/usage/v7/tabs/router/angular/example_component_html.md b/static/usage/v7/tabs/router/angular/example_component_html.md
new file mode 100644
index 00000000000..5b7b9b87a57
--- /dev/null
+++ b/static/usage/v7/tabs/router/angular/example_component_html.md
@@ -0,0 +1,24 @@
+```html
+
+
+
+
+
+
+ Listen Now
+
+
+
+ Radio
+
+
+
+ Library
+
+
+
+ Search
+
+
+
+```
diff --git a/static/usage/v7/tabs/router/angular/global_css.md b/static/usage/v7/tabs/router/angular/global_css.md
new file mode 100644
index 00000000000..a782d2d7f90
--- /dev/null
+++ b/static/usage/v7/tabs/router/angular/global_css.md
@@ -0,0 +1,8 @@
+```css
+.example-content {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+}
+```
diff --git a/static/usage/v7/tabs/router/angular/home_page_component_html.md b/static/usage/v7/tabs/router/angular/home_page_component_html.md
new file mode 100644
index 00000000000..7ef5bc47333
--- /dev/null
+++ b/static/usage/v7/tabs/router/angular/home_page_component_html.md
@@ -0,0 +1,10 @@
+```html
+
+
+ Listen now
+
+
+
+ Listen now content
+
+```
diff --git a/static/usage/v7/tabs/router/angular/home_page_component_ts.md b/static/usage/v7/tabs/router/angular/home_page_component_ts.md
new file mode 100644
index 00000000000..9e2ef0a3e8c
--- /dev/null
+++ b/static/usage/v7/tabs/router/angular/home_page_component_ts.md
@@ -0,0 +1,9 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-home-page',
+ templateUrl: './home-page.component.html',
+})
+export class HomePageComponent {}
+```
diff --git a/static/usage/v7/tabs/router/angular/home_page_module_ts.md b/static/usage/v7/tabs/router/angular/home_page_module_ts.md
new file mode 100644
index 00000000000..2a1fb15b460
--- /dev/null
+++ b/static/usage/v7/tabs/router/angular/home_page_module_ts.md
@@ -0,0 +1,14 @@
+```ts
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { HomePageComponent } from './home-page.component';
+
+import { IonicModule } from '@ionic/angular';
+
+@NgModule({
+ imports: [IonicModule, RouterModule.forChild([{ path: '', component: HomePageComponent }])],
+ declarations: [HomePageComponent],
+ exports: [HomePageComponent],
+})
+export class HomePageModule {}
+```
diff --git a/static/usage/v7/tabs/router/angular/library_page_component_html.md b/static/usage/v7/tabs/router/angular/library_page_component_html.md
new file mode 100644
index 00000000000..a0df4a6d684
--- /dev/null
+++ b/static/usage/v7/tabs/router/angular/library_page_component_html.md
@@ -0,0 +1,10 @@
+```html
+
+
+ Library
+
+
+
+ Library content
+
+```
diff --git a/static/usage/v7/tabs/router/angular/library_page_component_ts.md b/static/usage/v7/tabs/router/angular/library_page_component_ts.md
new file mode 100644
index 00000000000..f5a92a4868a
--- /dev/null
+++ b/static/usage/v7/tabs/router/angular/library_page_component_ts.md
@@ -0,0 +1,9 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-library-page',
+ templateUrl: './library-page.component.html',
+})
+export class LibraryPageComponent {}
+```
diff --git a/static/usage/v7/tabs/router/angular/library_page_module_ts.md b/static/usage/v7/tabs/router/angular/library_page_module_ts.md
new file mode 100644
index 00000000000..8e2ab48cf39
--- /dev/null
+++ b/static/usage/v7/tabs/router/angular/library_page_module_ts.md
@@ -0,0 +1,14 @@
+```ts
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { IonicModule } from '@ionic/angular';
+
+import { LibraryPageComponent } from './library-page.component';
+
+@NgModule({
+ imports: [IonicModule, RouterModule.forChild([{ path: '', component: LibraryPageComponent }])],
+ declarations: [LibraryPageComponent],
+ exports: [LibraryPageComponent],
+})
+export class LibraryPageModule {}
+```
diff --git a/static/usage/v7/tabs/router/angular/radio_page_component_html.md b/static/usage/v7/tabs/router/angular/radio_page_component_html.md
new file mode 100644
index 00000000000..e6affd4132f
--- /dev/null
+++ b/static/usage/v7/tabs/router/angular/radio_page_component_html.md
@@ -0,0 +1,10 @@
+```html
+
+
+ Radio
+
+
+
+ Radio content
+
+```
diff --git a/static/usage/v7/tabs/router/angular/radio_page_component_ts.md b/static/usage/v7/tabs/router/angular/radio_page_component_ts.md
new file mode 100644
index 00000000000..d29209c00dd
--- /dev/null
+++ b/static/usage/v7/tabs/router/angular/radio_page_component_ts.md
@@ -0,0 +1,9 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-radio-page',
+ templateUrl: './radio-page.component.html',
+})
+export class RadioPageComponent {}
+```
diff --git a/static/usage/v7/tabs/router/angular/radio_page_module_ts.md b/static/usage/v7/tabs/router/angular/radio_page_module_ts.md
new file mode 100644
index 00000000000..f50a0088632
--- /dev/null
+++ b/static/usage/v7/tabs/router/angular/radio_page_module_ts.md
@@ -0,0 +1,14 @@
+```ts
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { RadioPageComponent } from './radio-page.component';
+
+import { IonicModule } from '@ionic/angular';
+
+@NgModule({
+ imports: [IonicModule, RouterModule.forChild([{ path: '', component: RadioPageComponent }])],
+ declarations: [RadioPageComponent],
+ exports: [RadioPageComponent],
+})
+export class RadioPageModule {}
+```
diff --git a/static/usage/v7/tabs/router/angular/search_page_component_html.md b/static/usage/v7/tabs/router/angular/search_page_component_html.md
new file mode 100644
index 00000000000..91cb5c6f2db
--- /dev/null
+++ b/static/usage/v7/tabs/router/angular/search_page_component_html.md
@@ -0,0 +1,10 @@
+```html
+
+
+ Search
+
+
+
+ Search content
+
+```
diff --git a/static/usage/v7/tabs/router/angular/search_page_component_ts.md b/static/usage/v7/tabs/router/angular/search_page_component_ts.md
new file mode 100644
index 00000000000..bd6e723d332
--- /dev/null
+++ b/static/usage/v7/tabs/router/angular/search_page_component_ts.md
@@ -0,0 +1,9 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-search-page',
+ templateUrl: './search-page.component.html',
+})
+export class SearchPageComponent {}
+```
diff --git a/static/usage/v7/tabs/router/angular/search_page_module_ts.md b/static/usage/v7/tabs/router/angular/search_page_module_ts.md
new file mode 100644
index 00000000000..a1d599c5d9b
--- /dev/null
+++ b/static/usage/v7/tabs/router/angular/search_page_module_ts.md
@@ -0,0 +1,14 @@
+```ts
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { SearchPageComponent } from './search-page.component';
+
+import { IonicModule } from '@ionic/angular';
+
+@NgModule({
+ imports: [IonicModule, RouterModule.forChild([{ path: '', component: SearchPageComponent }])],
+ declarations: [SearchPageComponent],
+ exports: [SearchPageComponent],
+})
+export class SearchPageModule {}
+```
diff --git a/static/usage/v7/tabs/router/demo.html b/static/usage/v7/tabs/router/demo.html
new file mode 100644
index 00000000000..5836d4f4834
--- /dev/null
+++ b/static/usage/v7/tabs/router/demo.html
@@ -0,0 +1,127 @@
+
+
+
+
+
+
+ Tabs
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Listen now
+
+
+
+
+ Listen now content
+
+
+
+
+
+ Radio
+
+
+
+
+ Radio content
+
+
+
+
+
+ Library
+
+
+
+
+ Library content
+
+
+
+
+
+ Search
+
+
+
+
+ Search content
+
+
+
+
+
+ Listen now
+
+
+
+ Listen now content
+
+
+
+
+ Radio
+
+
+
+ Radio content
+
+
+
+
+ Library
+
+
+
+ Library content
+
+
+
+
+ Search
+
+
+
+ Search content
+
+
+ Listen now content
+
+
+
+);
+
+export default HomePage;
+```
diff --git a/static/usage/v7/tabs/router/react/library_page_tsx.md b/static/usage/v7/tabs/router/react/library_page_tsx.md
new file mode 100644
index 00000000000..383b6f115de
--- /dev/null
+++ b/static/usage/v7/tabs/router/react/library_page_tsx.md
@@ -0,0 +1,28 @@
+```tsx
+import React from 'react';
+import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react';
+
+const LibraryPage = () => (
+ <>
+
+
+ Library
+
+
+
+
+ Library content
+
+
+
+);
+
+export default LibraryPage;
+```
diff --git a/static/usage/v7/tabs/router/react/main_tsx.md b/static/usage/v7/tabs/router/react/main_tsx.md
new file mode 100644
index 00000000000..b5005ef3778
--- /dev/null
+++ b/static/usage/v7/tabs/router/react/main_tsx.md
@@ -0,0 +1,58 @@
+```tsx
+import React from 'react';
+import { IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel, IonRouterOutlet } from '@ionic/react';
+import { IonReactRouter } from '@ionic/react-router';
+
+import { Route, Redirect } from 'react-router';
+
+import { playCircle, radio, library, search } from 'ionicons/icons';
+
+import HomePage from './pages/HomePage';
+import RadioPage from './pages/RadioPage';
+import LibraryPage from './pages/LibraryPage';
+import SearchPage from './pages/SearchPage';
+
+function Example() {
+ return (
+
+
+
+
+ {/*
+ Use the render method to reduce the number of renders your component will have due to a route change.
+
+ Use the component prop when your component depends on the RouterComponentProps passed in automatically.
+ */}
+ } exact={true} />
+ } exact={true} />
+ } exact={true} />
+ } exact={true} />
+
+
+
+
+
+ Listen now
+
+
+
+
+ Radio
+
+
+
+
+ Library
+
+
+
+
+ Search
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/tabs/router/react/radio_page_tsx.md b/static/usage/v7/tabs/router/react/radio_page_tsx.md
new file mode 100644
index 00000000000..d0e432c3a58
--- /dev/null
+++ b/static/usage/v7/tabs/router/react/radio_page_tsx.md
@@ -0,0 +1,28 @@
+```tsx
+import React from 'react';
+import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react';
+
+const RadioPage = () => (
+ <>
+
+
+ Radio
+
+
+
+
+ Radio content
+
+
+
+);
+
+export default RadioPage;
+```
diff --git a/static/usage/v7/tabs/router/react/search_page_tsx.md b/static/usage/v7/tabs/router/react/search_page_tsx.md
new file mode 100644
index 00000000000..3d51b374830
--- /dev/null
+++ b/static/usage/v7/tabs/router/react/search_page_tsx.md
@@ -0,0 +1,28 @@
+```tsx
+import React from 'react';
+import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react';
+
+const SearchPage = () => (
+ <>
+
+
+ Search
+
+
+
+
+ Search content
+
+
+
+);
+
+export default SearchPage;
+```
diff --git a/static/usage/v7/tabs/router/vue.md b/static/usage/v7/tabs/router/vue.md
new file mode 100644
index 00000000000..091cabaa6f8
--- /dev/null
+++ b/static/usage/v7/tabs/router/vue.md
@@ -0,0 +1,81 @@
+```html
+
+
+
+
+
+
+ Listen now
+
+
+
+ Listen now content
+
+
+
+
+
+ Radio
+
+
+
+ Radio content
+
+
+
+
+
+ Library
+
+
+
+ Library content
+
+
+
+
+
+ Search
+
+
+
+ Search content
+
+
+
+
+
+ Listen Now
+
+
+
+ Radio
+
+
+
+ Library
+
+
+
+ Search
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/tabs/router/vue/app_vue.md b/static/usage/v7/tabs/router/vue/app_vue.md
new file mode 100644
index 00000000000..b5f330406db
--- /dev/null
+++ b/static/usage/v7/tabs/router/vue/app_vue.md
@@ -0,0 +1,20 @@
+```html
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/tabs/router/vue/example_vue.md b/static/usage/v7/tabs/router/vue/example_vue.md
new file mode 100644
index 00000000000..846b8b4d621
--- /dev/null
+++ b/static/usage/v7/tabs/router/vue/example_vue.md
@@ -0,0 +1,48 @@
+```html
+
+
+
+
+
+
+
+ Listen now
+
+
+
+
+ Radio
+
+
+
+
+ Library
+
+
+
+
+ Search
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/tabs/router/vue/home_page_vue.md b/static/usage/v7/tabs/router/vue/home_page_vue.md
new file mode 100644
index 00000000000..9d809b9a70d
--- /dev/null
+++ b/static/usage/v7/tabs/router/vue/home_page_vue.md
@@ -0,0 +1,31 @@
+```html
+
+
+
+
+
+
+ Listen now
+
+
+
+ Listen now content
+
+
+
+
+
+```
diff --git a/static/usage/v7/tabs/router/vue/library_page_vue.md b/static/usage/v7/tabs/router/vue/library_page_vue.md
new file mode 100644
index 00000000000..b46e1dec9d7
--- /dev/null
+++ b/static/usage/v7/tabs/router/vue/library_page_vue.md
@@ -0,0 +1,31 @@
+```html
+
+
+
+
+
+
+ Library
+
+
+
+ Library content
+
+
+
+
+
+```
diff --git a/static/usage/v7/tabs/router/vue/main_ts.md b/static/usage/v7/tabs/router/vue/main_ts.md
new file mode 100644
index 00000000000..d3253963fa5
--- /dev/null
+++ b/static/usage/v7/tabs/router/vue/main_ts.md
@@ -0,0 +1,32 @@
+```ts
+import { createApp } from 'vue';
+import { IonicVue } from '@ionic/vue';
+
+import App from './App.vue';
+import router from './router';
+
+/* Core CSS required for Ionic components to work properly */
+import '@ionic/vue/css/core.css';
+
+/* Basic CSS for apps built with Ionic */
+import '@ionic/vue/css/normalize.css';
+import '@ionic/vue/css/structure.css';
+import '@ionic/vue/css/typography.css';
+
+/* Optional CSS utils that can be commented out */
+import '@ionic/vue/css/padding.css';
+import '@ionic/vue/css/float-elements.css';
+import '@ionic/vue/css/text-alignment.css';
+import '@ionic/vue/css/text-transformation.css';
+import '@ionic/vue/css/flex-utils.css';
+import '@ionic/vue/css/display.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+const app = createApp(App).use(IonicVue).use(router);
+
+router.isReady().then(() => {
+ app.mount('#app');
+});
+```
diff --git a/static/usage/v7/tabs/router/vue/radio_page_vue.md b/static/usage/v7/tabs/router/vue/radio_page_vue.md
new file mode 100644
index 00000000000..5f65a8963cf
--- /dev/null
+++ b/static/usage/v7/tabs/router/vue/radio_page_vue.md
@@ -0,0 +1,31 @@
+```html
+
+
+
+
+
+
+ Radio
+
+
+
+ Radio content
+
+
+
+
+
+```
diff --git a/static/usage/v7/tabs/router/vue/router_ts.md b/static/usage/v7/tabs/router/vue/router_ts.md
new file mode 100644
index 00000000000..3279c38def4
--- /dev/null
+++ b/static/usage/v7/tabs/router/vue/router_ts.md
@@ -0,0 +1,46 @@
+```ts
+import { createRouter, createWebHistory } from '@ionic/vue-router';
+import { RouteRecordRaw } from 'vue-router';
+import Example from './components/Example.vue';
+
+const routes: Array = [
+ {
+ path: '/',
+ redirect: '/home',
+ },
+ {
+ path: '/',
+ component: Example,
+ children: [
+ {
+ path: '',
+ redirect: '/home',
+ },
+ {
+ path: 'home',
+ component: () => import('./views/HomePage.vue'),
+ },
+ {
+ path: 'radio',
+ component: () => import('./views/RadioPage.vue'),
+ },
+ {
+ path: 'library',
+ component: () => import('./views/LibraryPage.vue'),
+ },
+ {
+ path: 'search',
+ component: () => import('./views/SearchPage.vue'),
+ },
+ ],
+ },
+];
+
+const router = createRouter({
+ // Use: createWebHistory(process.env.BASE_URL) in your app
+ history: createWebHistory(),
+ routes,
+});
+
+export default router;
+```
diff --git a/static/usage/v7/tabs/router/vue/search_page_vue.md b/static/usage/v7/tabs/router/vue/search_page_vue.md
new file mode 100644
index 00000000000..f85eeb9c649
--- /dev/null
+++ b/static/usage/v7/tabs/router/vue/search_page_vue.md
@@ -0,0 +1,31 @@
+```html
+
+
+
+
+
+
+ Search
+
+
+
+ Search content
+
+
+
+
+
+```
diff --git a/static/usage/v7/text/basic/angular.md b/static/usage/v7/text/basic/angular.md
new file mode 100644
index 00000000000..fb2f6064fba
--- /dev/null
+++ b/static/usage/v7/text/basic/angular.md
@@ -0,0 +1,21 @@
+```html
+
+ H1: The quick brown fox jumps over the lazy dog
+
+
+
+ H2: The quick brown fox jumps over the lazy dog
+
+
+
+ H3: The quick brown fox jumps over the lazy dog
+
+
+
+
+ I saw a werewolf with a Chinese menu in his hand.
+ Walking through the streets of Soho in the rain.
+ He was looking for a place called Lee Ho Fook's.
+ Gonna get a big dish of beef chow mein.
+
+```
diff --git a/static/usage/v7/text/basic/demo.html b/static/usage/v7/text/basic/demo.html
new file mode 100644
index 00000000000..7dda6c901cb
--- /dev/null
+++ b/static/usage/v7/text/basic/demo.html
@@ -0,0 +1,61 @@
+
+
+
+
+
+
+ Text
+
+
+
+
+
+
+
+
+
+
+
+
+
+ H1: The quick brown fox jumps over the lazy dog
+
+
+
+ H2: The quick brown fox jumps over the lazy dog
+
+
+
+ H3: The quick brown fox jumps over the lazy dog
+
+
+
+
+
+
+ I saw a werewolf with a Chinese menu in his hand.
+ Walking through the streets of Soho in the rain.
+ He was looking for a place called Lee Ho Fook's.
+ Gonna get a big dish of beef chow mein.
+
+
H1: The quick brown fox jumps over the lazy dog
+
+
+
+ H2: The quick brown fox jumps over the lazy dog
+
+
+
+ H3: The quick brown fox jumps over the lazy dog
+
+
+
+
+ I saw a werewolf with a Chinese menu in his hand.
+ Walking through the streets of Soho in the rain.
+ He was looking for a place called Lee Ho Fook's.
+ Gonna get a big dish of beef chow mein.
+
+```
diff --git a/static/usage/v7/text/basic/react.md b/static/usage/v7/text/basic/react.md
new file mode 100644
index 00000000000..dac54e84471
--- /dev/null
+++ b/static/usage/v7/text/basic/react.md
@@ -0,0 +1,32 @@
+```tsx
+import React from 'react';
+import { IonText, IonIcon } from '@ionic/react';
+import { warning } from 'ionicons/icons';
+
+function Example() {
+ return (
+ <>
+
+ H1: The quick brown fox jumps over the lazy dog
+
+
+
+ H2: The quick brown fox jumps over the lazy dog
+
+
+
+ H3: The quick brown fox jumps over the lazy dog
+
+
+
+
+ I saw a werewolf with a Chinese menu in his hand.
+ Walking through the streets of Soho in the rain.
+ He was looking for a place called Lee Ho Fook's.
+ Gonna get a big dish of beef chow mein.
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/text/basic/vue.md b/static/usage/v7/text/basic/vue.md
new file mode 100644
index 00000000000..742167bf9f1
--- /dev/null
+++ b/static/usage/v7/text/basic/vue.md
@@ -0,0 +1,38 @@
+```html
+
+
+ H1: The quick brown fox jumps over the lazy dog
+
+
+
+ H2: The quick brown fox jumps over the lazy dog
+
+
+
+ H3: The quick brown fox jumps over the lazy dog
+
+
+
+
+ I saw a werewolf with a Chinese menu in his hand.
+ Walking through the streets of Soho in the rain.
+ He was looking for a place called Lee Ho Fook's.
+ Gonna get a big dish of beef chow mein.
+
+
+
+
+```
diff --git a/static/usage/v7/textarea/autogrow/angular.md b/static/usage/v7/textarea/autogrow/angular.md
new file mode 100644
index 00000000000..5ff7394eec0
--- /dev/null
+++ b/static/usage/v7/textarea/autogrow/angular.md
@@ -0,0 +1,7 @@
+```html
+
+
+
+
+```
diff --git a/static/usage/v7/textarea/autogrow/demo.html b/static/usage/v7/textarea/autogrow/demo.html
new file mode 100644
index 00000000000..07434619b22
--- /dev/null
+++ b/static/usage/v7/textarea/autogrow/demo.html
@@ -0,0 +1,38 @@
+
+
+
+
+
+
+ Textarea - Autogrow
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/textarea/autogrow/index.md b/static/usage/v7/textarea/autogrow/index.md
new file mode 100644
index 00000000000..9dd79cbd7cd
--- /dev/null
+++ b/static/usage/v7/textarea/autogrow/index.md
@@ -0,0 +1,13 @@
+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/textarea/autogrow/javascript.md b/static/usage/v7/textarea/autogrow/javascript.md
new file mode 100644
index 00000000000..bea62987f5e
--- /dev/null
+++ b/static/usage/v7/textarea/autogrow/javascript.md
@@ -0,0 +1,7 @@
+```html
+
+
+
+
+```
diff --git a/static/usage/v7/textarea/autogrow/react.md b/static/usage/v7/textarea/autogrow/react.md
new file mode 100644
index 00000000000..28d11b28efc
--- /dev/null
+++ b/static/usage/v7/textarea/autogrow/react.md
@@ -0,0 +1,16 @@
+```tsx
+import React from 'react';
+import { IonItem, IonTextarea } from '@ionic/react';
+function Example() {
+ return (
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/textarea/autogrow/vue.md b/static/usage/v7/textarea/autogrow/vue.md
new file mode 100644
index 00000000000..824ada24909
--- /dev/null
+++ b/static/usage/v7/textarea/autogrow/vue.md
@@ -0,0 +1,18 @@
+```html
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/textarea/basic/angular.md b/static/usage/v7/textarea/basic/angular.md
new file mode 100644
index 00000000000..af32fc35b03
--- /dev/null
+++ b/static/usage/v7/textarea/basic/angular.md
@@ -0,0 +1,13 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/textarea/basic/demo.html b/static/usage/v7/textarea/basic/demo.html
new file mode 100644
index 00000000000..671ebe50aa8
--- /dev/null
+++ b/static/usage/v7/textarea/basic/demo.html
@@ -0,0 +1,40 @@
+
+
+
+
+
+
+ Textarea - Basic Usage
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v7/textarea/basic/index.md b/static/usage/v7/textarea/basic/index.md
new file mode 100644
index 00000000000..3070fbea859
--- /dev/null
+++ b/static/usage/v7/textarea/basic/index.md
@@ -0,0 +1,13 @@
+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/textarea/basic/javascript.md b/static/usage/v7/textarea/basic/javascript.md
new file mode 100644
index 00000000000..5f953f721cb
--- /dev/null
+++ b/static/usage/v7/textarea/basic/javascript.md
@@ -0,0 +1,13 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/textarea/basic/react.md b/static/usage/v7/textarea/basic/react.md
new file mode 100644
index 00000000000..5d47cf710dd
--- /dev/null
+++ b/static/usage/v7/textarea/basic/react.md
@@ -0,0 +1,20 @@
+```tsx
+import React from 'react';
+import { IonItem, IonList, IonTextarea } from '@ionic/react';
+function Example() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/textarea/basic/vue.md b/static/usage/v7/textarea/basic/vue.md
new file mode 100644
index 00000000000..8b5c3a00746
--- /dev/null
+++ b/static/usage/v7/textarea/basic/vue.md
@@ -0,0 +1,24 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/textarea/clear-on-edit/angular.md b/static/usage/v7/textarea/clear-on-edit/angular.md
new file mode 100644
index 00000000000..409362189a3
--- /dev/null
+++ b/static/usage/v7/textarea/clear-on-edit/angular.md
@@ -0,0 +1,6 @@
+```html
+
+```
diff --git a/static/usage/v7/textarea/clear-on-edit/demo.html b/static/usage/v7/textarea/clear-on-edit/demo.html
new file mode 100644
index 00000000000..253bc7a2bc9
--- /dev/null
+++ b/static/usage/v7/textarea/clear-on-edit/demo.html
@@ -0,0 +1,31 @@
+
+
+
+
+
+
+ Textarea - Clear on Edit
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/textarea/clear-on-edit/index.md b/static/usage/v7/textarea/clear-on-edit/index.md
new file mode 100644
index 00000000000..cc1e09366e2
--- /dev/null
+++ b/static/usage/v7/textarea/clear-on-edit/index.md
@@ -0,0 +1,13 @@
+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/textarea/clear-on-edit/javascript.md b/static/usage/v7/textarea/clear-on-edit/javascript.md
new file mode 100644
index 00000000000..1982d982013
--- /dev/null
+++ b/static/usage/v7/textarea/clear-on-edit/javascript.md
@@ -0,0 +1,6 @@
+```html
+
+```
diff --git a/static/usage/v7/textarea/clear-on-edit/react.md b/static/usage/v7/textarea/clear-on-edit/react.md
new file mode 100644
index 00000000000..62b8b7dcf7b
--- /dev/null
+++ b/static/usage/v7/textarea/clear-on-edit/react.md
@@ -0,0 +1,13 @@
+```tsx
+import React from 'react';
+import { IonTextarea } from '@ionic/react';
+function Example() {
+ return (
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/textarea/clear-on-edit/vue.md b/static/usage/v7/textarea/clear-on-edit/vue.md
new file mode 100644
index 00000000000..04deb37bf1e
--- /dev/null
+++ b/static/usage/v7/textarea/clear-on-edit/vue.md
@@ -0,0 +1,17 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v7/textarea/counter/angular/example_component_html.md b/static/usage/v7/textarea/counter/angular/example_component_html.md
new file mode 100644
index 00000000000..436babf6fa4
--- /dev/null
+++ b/static/usage/v7/textarea/counter/angular/example_component_html.md
@@ -0,0 +1,11 @@
+```html
+
+
+
+```
diff --git a/static/usage/v7/textarea/counter/angular/example_component_ts.md b/static/usage/v7/textarea/counter/angular/example_component_ts.md
new file mode 100644
index 00000000000..2c08dc06fc2
--- /dev/null
+++ b/static/usage/v7/textarea/counter/angular/example_component_ts.md
@@ -0,0 +1,13 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ customCounterFormatter(inputLength: number, maxLength: number) {
+ return `${maxLength - inputLength} characters remaining`;
+ }
+}
+```
diff --git a/static/usage/v7/textarea/counter/demo.html b/static/usage/v7/textarea/counter/demo.html
new file mode 100644
index 00000000000..228b0c3494d
--- /dev/null
+++ b/static/usage/v7/textarea/counter/demo.html
@@ -0,0 +1,41 @@
+
+
+
+
+
+
+ Textarea
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v7/textarea/counter/index.md b/static/usage/v7/textarea/counter/index.md
new file mode 100644
index 00000000000..811a12a70ca
--- /dev/null
+++ b/static/usage/v7/textarea/counter/index.md
@@ -0,0 +1,25 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+import react from './react.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/v7/textarea/counter/javascript.md b/static/usage/v7/textarea/counter/javascript.md
new file mode 100644
index 00000000000..179965c25b7
--- /dev/null
+++ b/static/usage/v7/textarea/counter/javascript.md
@@ -0,0 +1,16 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v7/textarea/counter/react.md b/static/usage/v7/textarea/counter/react.md
new file mode 100644
index 00000000000..26ec835498e
--- /dev/null
+++ b/static/usage/v7/textarea/counter/react.md
@@ -0,0 +1,21 @@
+```tsx
+import React from 'react';
+import { IonTextarea } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+ `${maxLength - inputLength} characters remaining`}
+ >
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/textarea/counter/vue.md b/static/usage/v7/textarea/counter/vue.md
new file mode 100644
index 00000000000..aa45a84b5f6
--- /dev/null
+++ b/static/usage/v7/textarea/counter/vue.md
@@ -0,0 +1,27 @@
+```html
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/textarea/fill/angular.md b/static/usage/v7/textarea/fill/angular.md
new file mode 100644
index 00000000000..38bcfa1067d
--- /dev/null
+++ b/static/usage/v7/textarea/fill/angular.md
@@ -0,0 +1,7 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v7/textarea/fill/demo.html b/static/usage/v7/textarea/fill/demo.html
new file mode 100644
index 00000000000..8e3024d9d12
--- /dev/null
+++ b/static/usage/v7/textarea/fill/demo.html
@@ -0,0 +1,38 @@
+
+
+
+
+
+
+ Textarea
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v7/textarea/fill/index.md b/static/usage/v7/textarea/fill/index.md
new file mode 100644
index 00000000000..bfc5b54da5d
--- /dev/null
+++ b/static/usage/v7/textarea/fill/index.md
@@ -0,0 +1,14 @@
+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/textarea/fill/javascript.md b/static/usage/v7/textarea/fill/javascript.md
new file mode 100644
index 00000000000..09102160aaa
--- /dev/null
+++ b/static/usage/v7/textarea/fill/javascript.md
@@ -0,0 +1,12 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v7/textarea/fill/react.md b/static/usage/v7/textarea/fill/react.md
new file mode 100644
index 00000000000..8ddf44ca19f
--- /dev/null
+++ b/static/usage/v7/textarea/fill/react.md
@@ -0,0 +1,21 @@
+```tsx
+import React from 'react';
+import { IonTextarea } from '@ionic/react';
+function Example() {
+ return (
+ <>
+
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/textarea/fill/vue.md b/static/usage/v7/textarea/fill/vue.md
new file mode 100644
index 00000000000..24c0f1b1d54
--- /dev/null
+++ b/static/usage/v7/textarea/fill/vue.md
@@ -0,0 +1,23 @@
+```html
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/textarea/helper-error/angular.md b/static/usage/v7/textarea/helper-error/angular.md
new file mode 100644
index 00000000000..3095fd27ead
--- /dev/null
+++ b/static/usage/v7/textarea/helper-error/angular.md
@@ -0,0 +1,11 @@
+```html
+
+```
diff --git a/static/usage/v7/textarea/helper-error/demo.html b/static/usage/v7/textarea/helper-error/demo.html
new file mode 100644
index 00000000000..55e70b43c79
--- /dev/null
+++ b/static/usage/v7/textarea/helper-error/demo.html
@@ -0,0 +1,56 @@
+
+
+
+
+
+
+ Textarea
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v7/textarea/helper-error/index.md b/static/usage/v7/textarea/helper-error/index.md
new file mode 100644
index 00000000000..5d4ca92e487
--- /dev/null
+++ b/static/usage/v7/textarea/helper-error/index.md
@@ -0,0 +1,18 @@
+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/textarea/helper-error/javascript.md b/static/usage/v7/textarea/helper-error/javascript.md
new file mode 100644
index 00000000000..112fdca3a10
--- /dev/null
+++ b/static/usage/v7/textarea/helper-error/javascript.md
@@ -0,0 +1,37 @@
+```html
+
+
+
+```
diff --git a/static/usage/v7/textarea/helper-error/react.md b/static/usage/v7/textarea/helper-error/react.md
new file mode 100644
index 00000000000..01d3207dc85
--- /dev/null
+++ b/static/usage/v7/textarea/helper-error/react.md
@@ -0,0 +1,49 @@
+```tsx
+import React, { useState } from 'react';
+import { clsx } from 'clsx';
+
+import { IonTextarea } from '@ionic/react';
+
+function Example() {
+ const [isTouched, setIsTouched] = useState(false);
+ const [isValid, setIsValid] = useState();
+
+ const validateEmail = (email: string) => {
+ return email.match(
+ /^(?=.{1,254}$)(?=.{1,64}@)[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/
+ );
+ };
+
+ const validate = (ev: Event) => {
+ const value = (ev.target as HTMLTextAreaElement).value;
+
+ setIsValid(undefined);
+
+ if (value === '') return;
+
+ validateEmail(value) !== null ? setIsValid(true) : setIsValid(false);
+ };
+
+ const markTouched = () => {
+ setIsTouched(true);
+ };
+
+ return (
+ validate(event)}
+ onIonBlur={() => markTouched()}
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/textarea/helper-error/vue.md b/static/usage/v7/textarea/helper-error/vue.md
new file mode 100644
index 00000000000..f0fe51ebee8
--- /dev/null
+++ b/static/usage/v7/textarea/helper-error/vue.md
@@ -0,0 +1,47 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v7/textarea/label-placement/angular.md b/static/usage/v7/textarea/label-placement/angular.md
new file mode 100644
index 00000000000..ef14c919fb8
--- /dev/null
+++ b/static/usage/v7/textarea/label-placement/angular.md
@@ -0,0 +1,16 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/textarea/label-placement/demo.html b/static/usage/v7/textarea/label-placement/demo.html
new file mode 100644
index 00000000000..eabbc9d388e
--- /dev/null
+++ b/static/usage/v7/textarea/label-placement/demo.html
@@ -0,0 +1,43 @@
+
+
+
+
+
+
+ Textarea
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v7/textarea/label-placement/index.md b/static/usage/v7/textarea/label-placement/index.md
new file mode 100644
index 00000000000..8ced2454c74
--- /dev/null
+++ b/static/usage/v7/textarea/label-placement/index.md
@@ -0,0 +1,13 @@
+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/textarea/label-placement/javascript.md b/static/usage/v7/textarea/label-placement/javascript.md
new file mode 100644
index 00000000000..ce524931d10
--- /dev/null
+++ b/static/usage/v7/textarea/label-placement/javascript.md
@@ -0,0 +1,16 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/textarea/label-placement/react.md b/static/usage/v7/textarea/label-placement/react.md
new file mode 100644
index 00000000000..cf2b06229cf
--- /dev/null
+++ b/static/usage/v7/textarea/label-placement/react.md
@@ -0,0 +1,24 @@
+```tsx
+import React from 'react';
+import { IonTextarea, IonItem, IonList } from '@ionic/react';
+
+function Example() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/textarea/label-placement/vue.md b/static/usage/v7/textarea/label-placement/vue.md
new file mode 100644
index 00000000000..fa6bf5ec893
--- /dev/null
+++ b/static/usage/v7/textarea/label-placement/vue.md
@@ -0,0 +1,27 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/textarea/migration/index.md b/static/usage/v7/textarea/migration/index.md
new file mode 100644
index 00000000000..28207956484
--- /dev/null
+++ b/static/usage/v7/textarea/migration/index.md
@@ -0,0 +1,224 @@
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+````mdx-code-block
+
+
+
+```html
+
+
+
+
+ Label:
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Label:
+
+
+
+
+
+
+
+
+
+
+
+
+ Label:
+
+ Enter text
+ Please enter text
+
+
+
+
+
+
+```
+
+
+
+```html
+
+
+
+
+ Label:
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Label:
+
+
+
+
+
+
+
+
+
+
+
+
+ Label:
+
+ Enter text
+ Please enter text
+
+
+
+
+
+
+```
+
+
+
+```tsx
+{/* Label and Label Position */}
+
+{/* Before */}
+
+ Label:
+
+
+
+{/* After */}
+
+
+
+
+
+{/* Fill */}
+
+{/* Before */}
+
+ Label:
+
+
+
+{/* After */}
+
+{/* Textareas using `fill` should not be placed in IonItem */}
+
+
+{/* Textarea-specific features on IonItem */}
+
+{/* Before */}
+
+ Label:
+
+ Enter text
+ Please enter text
+
+
+{/* After */}
+
+
+
+```
+
+
+
+```html
+
+
+
+
+ Label:
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Label:
+
+
+
+
+
+
+
+
+
+
+
+
+ Label:
+
+ Enter text
+ Please enter text
+
+
+
+
+
+
+```
+
+
+````
diff --git a/static/usage/v7/textarea/theming/angular/example_component_css.md b/static/usage/v7/textarea/theming/angular/example_component_css.md
new file mode 100644
index 00000000000..dae0d52310e
--- /dev/null
+++ b/static/usage/v7/textarea/theming/angular/example_component_css.md
@@ -0,0 +1,15 @@
+```css
+ion-textarea.custom {
+ --background: #373737;
+ --color: #fff;
+ --padding-end: 10px;
+ --padding-start: 10px;
+ --placeholder-color: #ddd;
+ --placeholder-opacity: 0.8;
+}
+
+ion-textarea.custom .helper-text,
+ion-textarea.custom .counter {
+ color: #373737;
+}
+```
diff --git a/static/usage/v7/textarea/theming/angular/example_component_html.md b/static/usage/v7/textarea/theming/angular/example_component_html.md
new file mode 100644
index 00000000000..d5237b2cc36
--- /dev/null
+++ b/static/usage/v7/textarea/theming/angular/example_component_html.md
@@ -0,0 +1,10 @@
+```html
+
+```
diff --git a/static/usage/v7/textarea/theming/demo.html b/static/usage/v7/textarea/theming/demo.html
new file mode 100644
index 00000000000..2fce6484a38
--- /dev/null
+++ b/static/usage/v7/textarea/theming/demo.html
@@ -0,0 +1,50 @@
+
+
+
+
+
+
+ Textarea - Theming
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v7/textarea/theming/index.md b/static/usage/v7/textarea/theming/index.md
new file mode 100644
index 00000000000..9042fb29fa4
--- /dev/null
+++ b/static/usage/v7/textarea/theming/index.md
@@ -0,0 +1,33 @@
+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/textarea/theming/javascript.md b/static/usage/v7/textarea/theming/javascript.md
new file mode 100644
index 00000000000..ae34bb17a0f
--- /dev/null
+++ b/static/usage/v7/textarea/theming/javascript.md
@@ -0,0 +1,26 @@
+```html
+
+
+
+```
diff --git a/static/usage/v7/textarea/theming/react/main_css.md b/static/usage/v7/textarea/theming/react/main_css.md
new file mode 100644
index 00000000000..dae0d52310e
--- /dev/null
+++ b/static/usage/v7/textarea/theming/react/main_css.md
@@ -0,0 +1,15 @@
+```css
+ion-textarea.custom {
+ --background: #373737;
+ --color: #fff;
+ --padding-end: 10px;
+ --padding-start: 10px;
+ --placeholder-color: #ddd;
+ --placeholder-opacity: 0.8;
+}
+
+ion-textarea.custom .helper-text,
+ion-textarea.custom .counter {
+ color: #373737;
+}
+```
diff --git a/static/usage/v7/textarea/theming/react/main_tsx.md b/static/usage/v7/textarea/theming/react/main_tsx.md
new file mode 100644
index 00000000000..f0ca368dff6
--- /dev/null
+++ b/static/usage/v7/textarea/theming/react/main_tsx.md
@@ -0,0 +1,20 @@
+```tsx
+import React from 'react';
+import { IonTextarea } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/textarea/theming/vue.md b/static/usage/v7/textarea/theming/vue.md
new file mode 100644
index 00000000000..be3ad556a62
--- /dev/null
+++ b/static/usage/v7/textarea/theming/vue.md
@@ -0,0 +1,37 @@
+```html
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/thumbnail/basic/angular.md b/static/usage/v7/thumbnail/basic/angular.md
new file mode 100644
index 00000000000..119cfb8ee9c
--- /dev/null
+++ b/static/usage/v7/thumbnail/basic/angular.md
@@ -0,0 +1,5 @@
+```html
+
+
+
+```
diff --git a/static/usage/v7/thumbnail/basic/demo.html b/static/usage/v7/thumbnail/basic/demo.html
new file mode 100644
index 00000000000..e3aabdff4c2
--- /dev/null
+++ b/static/usage/v7/thumbnail/basic/demo.html
@@ -0,0 +1,27 @@
+
+
+
+
+
+
+ Thumbnail
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Item Thumbnail
+
+
+
+
+
+
Scroll the list to see the title collapse.
+
+
+ Item 1
+ Item 2
+ Item 3
+ Item 4
+ Item 5
+ Item 6
+ Item 7
+ Item 8
+ Item 9
+ Item 10
+ Item 11
+ Item 12
+ Item 13
+ Item 14
+ Item 15
+ Item 16
+ Item 17
+ Item 18
+ Item 19
+ Item 20
+
+
+```
diff --git a/static/usage/v7/title/collapsible-large-title/basic/demo.html b/static/usage/v7/title/collapsible-large-title/basic/demo.html
new file mode 100644
index 00000000000..e67c7bd3a33
--- /dev/null
+++ b/static/usage/v7/title/collapsible-large-title/basic/demo.html
@@ -0,0 +1,59 @@
+
+
+
+
+
+
+ Title
+
+
+
+
+
+
+
+
+
+
+
+ Title
+
+
+
+
+
+ Title
+
+
+
+
+ Scroll the list to see the title collapse.
+
+
+
+ Item 1
+ Item 2
+ Item 3
+ Item 4
+ Item 5
+ Item 6
+ Item 7
+ Item 8
+ Item 9
+ Item 10
+ Item 11
+ Item 12
+ Item 13
+ Item 14
+ Item 15
+ Item 16
+ Item 17
+ Item 18
+ Item 19
+ Item 20
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/title/collapsible-large-title/basic/index.md b/static/usage/v7/title/collapsible-large-title/basic/index.md
new file mode 100644
index 00000000000..8cb9a0cd0a0
--- /dev/null
+++ b/static/usage/v7/title/collapsible-large-title/basic/index.md
@@ -0,0 +1,16 @@
+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/title/collapsible-large-title/basic/javascript.md b/static/usage/v7/title/collapsible-large-title/basic/javascript.md
new file mode 100644
index 00000000000..77e7de55212
--- /dev/null
+++ b/static/usage/v7/title/collapsible-large-title/basic/javascript.md
@@ -0,0 +1,39 @@
+```html
+
+
+ Title
+
+
+
+
+
+ Title
+
+
+
+ Scroll the list to see the title collapse.
+
+
+ Item 1
+ Item 2
+ Item 3
+ Item 4
+ Item 5
+ Item 6
+ Item 7
+ Item 8
+ Item 9
+ Item 10
+ Item 11
+ Item 12
+ Item 13
+ Item 14
+ Item 15
+ Item 16
+ Item 17
+ Item 18
+ Item 19
+ Item 20
+
+
+```
diff --git a/static/usage/v7/title/collapsible-large-title/basic/react.md b/static/usage/v7/title/collapsible-large-title/basic/react.md
new file mode 100644
index 00000000000..cdcbdc557b6
--- /dev/null
+++ b/static/usage/v7/title/collapsible-large-title/basic/react.md
@@ -0,0 +1,49 @@
+```tsx
+import React from 'react';
+import { IonContent, IonHeader, IonToolbar, IonTitle, IonList, IonItem } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+ Title
+
+
+
+
+
+ Title
+
+
+
+ Scroll the list to see the title collapse.
+
+
+ Item 1
+ Item 2
+ Item 3
+ Item 4
+ Item 5
+ Item 6
+ Item 7
+ Item 8
+ Item 9
+ Item 10
+ Item 11
+ Item 12
+ Item 13
+ Item 14
+ Item 15
+ Item 16
+ Item 17
+ Item 18
+ Item 19
+ Item 20
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/title/collapsible-large-title/basic/vue.md b/static/usage/v7/title/collapsible-large-title/basic/vue.md
new file mode 100644
index 00000000000..de922b98bca
--- /dev/null
+++ b/static/usage/v7/title/collapsible-large-title/basic/vue.md
@@ -0,0 +1,50 @@
+```html
+
+
+
+ Title
+
+
+
+
+
+ Title
+
+
+
+ Scroll the list to see the title collapse.
+
+
+ Item 1
+ Item 2
+ Item 3
+ Item 4
+ Item 5
+ Item 6
+ Item 7
+ Item 8
+ Item 9
+ Item 10
+ Item 11
+ Item 12
+ Item 13
+ Item 14
+ Item 15
+ Item 16
+ Item 17
+ Item 18
+ Item 19
+ Item 20
+
+
+
+
+
+```
diff --git a/static/usage/v7/title/collapsible-large-title/buttons/angular.md b/static/usage/v7/title/collapsible-large-title/buttons/angular.md
new file mode 100644
index 00000000000..6f253b16cd4
--- /dev/null
+++ b/static/usage/v7/title/collapsible-large-title/buttons/angular.md
@@ -0,0 +1,45 @@
+```html
+
+
+ Title
+
+ Button
+
+
+
+
+
+
+ Title
+
+ Button
+
+
+
+
+ Scroll the list to see the title & buttons collapse.
+
+
+ Item 1
+ Item 2
+ Item 3
+ Item 4
+ Item 5
+ Item 6
+ Item 7
+ Item 8
+ Item 9
+ Item 10
+ Item 11
+ Item 12
+ Item 13
+ Item 14
+ Item 15
+ Item 16
+ Item 17
+ Item 18
+ Item 19
+ Item 20
+
+
+```
diff --git a/static/usage/v7/title/collapsible-large-title/buttons/demo.html b/static/usage/v7/title/collapsible-large-title/buttons/demo.html
new file mode 100644
index 00000000000..ecf88cf5305
--- /dev/null
+++ b/static/usage/v7/title/collapsible-large-title/buttons/demo.html
@@ -0,0 +1,65 @@
+
+
+
+
+
+
+ Title
+
+
+
+
+
+
+
+
+
+
+
+ Title
+
+ Button
+
+
+
+
+
+
+ Title
+
+ Button
+
+
+
+
+
+ Scroll the list to see the title & buttons collapse.
+
+
+
+ Item 1
+ Item 2
+ Item 3
+ Item 4
+ Item 5
+ Item 6
+ Item 7
+ Item 8
+ Item 9
+ Item 10
+ Item 11
+ Item 12
+ Item 13
+ Item 14
+ Item 15
+ Item 16
+ Item 17
+ Item 18
+ Item 19
+ Item 20
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/title/collapsible-large-title/buttons/index.md b/static/usage/v7/title/collapsible-large-title/buttons/index.md
new file mode 100644
index 00000000000..b11f1bbe655
--- /dev/null
+++ b/static/usage/v7/title/collapsible-large-title/buttons/index.md
@@ -0,0 +1,15 @@
+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/title/collapsible-large-title/buttons/javascript.md b/static/usage/v7/title/collapsible-large-title/buttons/javascript.md
new file mode 100644
index 00000000000..feb1583e3b6
--- /dev/null
+++ b/static/usage/v7/title/collapsible-large-title/buttons/javascript.md
@@ -0,0 +1,45 @@
+```html
+
+
+ Title
+
+ Button
+
+
+
+
+
+
+ Title
+
+ Button
+
+
+
+
+ Scroll the list to see the title & buttons collapse.
+
+
+ Item 1
+ Item 2
+ Item 3
+ Item 4
+ Item 5
+ Item 6
+ Item 7
+ Item 8
+ Item 9
+ Item 10
+ Item 11
+ Item 12
+ Item 13
+ Item 14
+ Item 15
+ Item 16
+ Item 17
+ Item 18
+ Item 19
+ Item 20
+
+
+```
diff --git a/static/usage/v7/title/collapsible-large-title/buttons/react.md b/static/usage/v7/title/collapsible-large-title/buttons/react.md
new file mode 100644
index 00000000000..deca52428ce
--- /dev/null
+++ b/static/usage/v7/title/collapsible-large-title/buttons/react.md
@@ -0,0 +1,55 @@
+```tsx
+import React from 'react';
+import { IonContent, IonHeader, IonToolbar, IonTitle, IonList, IonItem, IonButtons, IonButton } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+ Title
+
+ Button
+
+
+
+
+
+
+ Title
+
+ Button
+
+
+
+
+ Scroll the list to see the title & buttons collapse.
+
+
+ Item 1
+ Item 2
+ Item 3
+ Item 4
+ Item 5
+ Item 6
+ Item 7
+ Item 8
+ Item 9
+ Item 10
+ Item 11
+ Item 12
+ Item 13
+ Item 14
+ Item 15
+ Item 16
+ Item 17
+ Item 18
+ Item 19
+ Item 20
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/title/collapsible-large-title/buttons/vue.md b/static/usage/v7/title/collapsible-large-title/buttons/vue.md
new file mode 100644
index 00000000000..2c23d8982ad
--- /dev/null
+++ b/static/usage/v7/title/collapsible-large-title/buttons/vue.md
@@ -0,0 +1,56 @@
+```html
+
+
+
+ Title
+
+ Button
+
+
+
+
+
+
+ Title
+
+ Button
+
+
+
+
+ Scroll the list to see the title & buttons collapse.
+
+
+ Item 1
+ Item 2
+ Item 3
+ Item 4
+ Item 5
+ Item 6
+ Item 7
+ Item 8
+ Item 9
+ Item 10
+ Item 11
+ Item 12
+ Item 13
+ Item 14
+ Item 15
+ Item 16
+ Item 17
+ Item 18
+ Item 19
+ Item 20
+
+
+
+
+
+```
diff --git a/static/usage/v7/title/theming/css-properties/angular/example_component_html.md b/static/usage/v7/title/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..31c40bb2ef7
--- /dev/null
+++ b/static/usage/v7/title/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,37 @@
+```html
+
+
+ Title
+
+
+
+
+
+ Title
+
+
+
+
+ Item 1
+ Item 2
+ Item 3
+ Item 4
+ Item 5
+ Item 6
+ Item 7
+ Item 8
+ Item 9
+ Item 10
+ Item 11
+ Item 12
+ Item 13
+ Item 14
+ Item 15
+ Item 16
+ Item 17
+ Item 18
+ Item 19
+ Item 20
+
+
+```
diff --git a/static/usage/v7/title/theming/css-properties/angular/global_css.md b/static/usage/v7/title/theming/css-properties/angular/global_css.md
new file mode 100644
index 00000000000..0da76c33423
--- /dev/null
+++ b/static/usage/v7/title/theming/css-properties/angular/global_css.md
@@ -0,0 +1,14 @@
+```css
+ion-title.title-large {
+ color: #c897d8;
+ font-size: 30px;
+}
+
+ion-title {
+ --color: #000;
+}
+
+ion-toolbar {
+ --background: #c897d8;
+}
+```
diff --git a/static/usage/v7/title/theming/css-properties/demo.html b/static/usage/v7/title/theming/css-properties/demo.html
new file mode 100644
index 00000000000..202131c46ac
--- /dev/null
+++ b/static/usage/v7/title/theming/css-properties/demo.html
@@ -0,0 +1,69 @@
+
+
+
+
+
+
+ Title
+
+
+
+
+
+
+
+
+
+
+
+
+ Title
+
+
+
+
+
+ Title
+
+
+
+
+ Item 1
+ Item 2
+ Item 3
+ Item 4
+ Item 5
+ Item 6
+ Item 7
+ Item 8
+ Item 9
+ Item 10
+ Item 11
+ Item 12
+ Item 13
+ Item 14
+ Item 15
+ Item 16
+ Item 17
+ Item 18
+ Item 19
+ Item 20
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/title/theming/css-properties/index.md b/static/usage/v7/title/theming/css-properties/index.md
new file mode 100644
index 00000000000..aed27e79157
--- /dev/null
+++ b/static/usage/v7/title/theming/css-properties/index.md
@@ -0,0 +1,34 @@
+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';
+
+
diff --git a/static/usage/v7/title/theming/css-properties/javascript.md b/static/usage/v7/title/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..443ca1bf39d
--- /dev/null
+++ b/static/usage/v7/title/theming/css-properties/javascript.md
@@ -0,0 +1,52 @@
+```html
+
+
+
+
+ Title
+
+
+
+
+
+ Title
+
+
+
+
+ Item 1
+ Item 2
+ Item 3
+ Item 4
+ Item 5
+ Item 6
+ Item 7
+ Item 8
+ Item 9
+ Item 10
+ Item 11
+ Item 12
+ Item 13
+ Item 14
+ Item 15
+ Item 16
+ Item 17
+ Item 18
+ Item 19
+ Item 20
+
+
+```
diff --git a/static/usage/v7/title/theming/css-properties/react/main_css.md b/static/usage/v7/title/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..0da76c33423
--- /dev/null
+++ b/static/usage/v7/title/theming/css-properties/react/main_css.md
@@ -0,0 +1,14 @@
+```css
+ion-title.title-large {
+ color: #c897d8;
+ font-size: 30px;
+}
+
+ion-title {
+ --color: #000;
+}
+
+ion-toolbar {
+ --background: #c897d8;
+}
+```
diff --git a/static/usage/v7/title/theming/css-properties/react/main_tsx.md b/static/usage/v7/title/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..5dc5b9d993b
--- /dev/null
+++ b/static/usage/v7/title/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,49 @@
+```tsx
+import React from 'react';
+import { IonContent, IonHeader, IonToolbar, IonTitle, IonList, IonItem } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+
+
+ Title
+
+
+
+
+
+ Title
+
+
+
+
+ Item 1
+ Item 2
+ Item 3
+ Item 4
+ Item 5
+ Item 6
+ Item 7
+ Item 8
+ Item 9
+ Item 10
+ Item 11
+ Item 12
+ Item 13
+ Item 14
+ Item 15
+ Item 16
+ Item 17
+ Item 18
+ Item 19
+ Item 20
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/title/theming/css-properties/vue.md b/static/usage/v7/title/theming/css-properties/vue.md
new file mode 100644
index 00000000000..dc85c93d3ab
--- /dev/null
+++ b/static/usage/v7/title/theming/css-properties/vue.md
@@ -0,0 +1,62 @@
+```html
+
+
+
+
+ Title
+
+
+
+
+
+ Title
+
+
+
+
+ Item 1
+ Item 2
+ Item 3
+ Item 4
+ Item 5
+ Item 6
+ Item 7
+ Item 8
+ Item 9
+ Item 10
+ Item 11
+ Item 12
+ Item 13
+ Item 14
+ Item 15
+ Item 16
+ Item 17
+ Item 18
+ Item 19
+ Item 20
+
+
+
+
+
+```
diff --git a/static/usage/v7/toast/buttons/angular/example_component_html.md b/static/usage/v7/toast/buttons/angular/example_component_html.md
new file mode 100644
index 00000000000..3245d44e8a4
--- /dev/null
+++ b/static/usage/v7/toast/buttons/angular/example_component_html.md
@@ -0,0 +1,12 @@
+```html
+Open Toast
+
+{{ handlerMessage }}
+{{ roleMessage }}
+```
\ No newline at end of file
diff --git a/static/usage/v7/toast/buttons/angular/example_component_ts.md b/static/usage/v7/toast/buttons/angular/example_component_ts.md
new file mode 100644
index 00000000000..9adc2711591
--- /dev/null
+++ b/static/usage/v7/toast/buttons/angular/example_component_ts.md
@@ -0,0 +1,29 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ public toastButtons = [
+ {
+ text: 'More Info',
+ role: 'info',
+ handler: () => { this.handlerMessage = 'More Info clicked'; }
+ },
+ {
+ text: 'Dismiss',
+ role: 'cancel',
+ handler: () => { this.handlerMessage = 'Dismiss clicked'; }
+ }
+ ];
+ handlerMessage = '';
+ roleMessage = '';
+
+ setRoleMessage(ev) {
+ const { role } = ev.detail
+ this.roleMessage = `Dismissed with role: ${role}`;
+ }
+}
+```
\ No newline at end of file
diff --git a/static/usage/v7/toast/buttons/demo.html b/static/usage/v7/toast/buttons/demo.html
new file mode 100644
index 00000000000..d95ef6182a8
--- /dev/null
+++ b/static/usage/v7/toast/buttons/demo.html
@@ -0,0 +1,66 @@
+
+
+
+
+
+
+ Toast
+
+
+
+
+
+
+
+
+
+
+
+
+ Toast
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v7/toast/buttons/index.md b/static/usage/v7/toast/buttons/index.md
new file mode 100644
index 00000000000..75d2d2c2a2e
--- /dev/null
+++ b/static/usage/v7/toast/buttons/index.md
@@ -0,0 +1,25 @@
+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_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/v7/toast/buttons/javascript.md b/static/usage/v7/toast/buttons/javascript.md
new file mode 100644
index 00000000000..86cf3cb0b68
--- /dev/null
+++ b/static/usage/v7/toast/buttons/javascript.md
@@ -0,0 +1,30 @@
+```html
+Open Toast
+
+
+
+
+
+```
diff --git a/static/usage/v7/toast/buttons/react.md b/static/usage/v7/toast/buttons/react.md
new file mode 100644
index 00000000000..fc8b603fa20
--- /dev/null
+++ b/static/usage/v7/toast/buttons/react.md
@@ -0,0 +1,36 @@
+```tsx
+import React, { useState } from 'react';
+import { IonButton, IonToast } from '@ionic/react';
+
+function Example() {
+ const [handlerMessage, setHandlerMessage] = useState('');
+ const [roleMessage, setRoleMessage] = useState('');
+
+ return (
+ <>
+ Open Toast
+ { setHandlerMessage('More Info clicked'); }
+ },
+ {
+ text: 'Dismiss',
+ role: 'cancel',
+ handler: () => { setHandlerMessage('Dismiss clicked'); }
+ }
+ ]}
+ onDidDismiss={(e: CustomEvent) => setRoleMessage(`Dismissed with role: ${e.detail.role}`)}
+ >
+ {handlerMessage}
+ {roleMessage}
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/toast/buttons/vue.md b/static/usage/v7/toast/buttons/vue.md
new file mode 100644
index 00000000000..3ae653988f6
--- /dev/null
+++ b/static/usage/v7/toast/buttons/vue.md
@@ -0,0 +1,51 @@
+```html
+
+ Open Toast
+
+ {{ handlerMessage }}
+ {{ roleMessage }}
+
+
+
+```
diff --git a/static/usage/v7/toast/icon/angular.md b/static/usage/v7/toast/icon/angular.md
new file mode 100644
index 00000000000..2dc76a51fa6
--- /dev/null
+++ b/static/usage/v7/toast/icon/angular.md
@@ -0,0 +1,4 @@
+```html
+Open Toast
+
+```
\ No newline at end of file
diff --git a/static/usage/v7/toast/icon/demo.html b/static/usage/v7/toast/icon/demo.html
new file mode 100644
index 00000000000..1a8ab774fb7
--- /dev/null
+++ b/static/usage/v7/toast/icon/demo.html
@@ -0,0 +1,30 @@
+
+
+
+
+
+
+ Toast
+
+
+
+
+
+
+
+
+
+
+ Toast
+
+
+
+
+ Open Toast
+
+
+
+
+
+
+
diff --git a/static/usage/v7/toast/icon/index.md b/static/usage/v7/toast/icon/index.md
new file mode 100644
index 00000000000..1418e06b870
--- /dev/null
+++ b/static/usage/v7/toast/icon/index.md
@@ -0,0 +1,18 @@
+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/toast/icon/javascript.md b/static/usage/v7/toast/icon/javascript.md
new file mode 100644
index 00000000000..1c694d9dde0
--- /dev/null
+++ b/static/usage/v7/toast/icon/javascript.md
@@ -0,0 +1,4 @@
+```html
+Open Toast
+
+```
diff --git a/static/usage/v7/toast/icon/react.md b/static/usage/v7/toast/icon/react.md
new file mode 100644
index 00000000000..baa893d452e
--- /dev/null
+++ b/static/usage/v7/toast/icon/react.md
@@ -0,0 +1,15 @@
+```tsx
+import React from 'react';
+import { IonButton, IonToast } from '@ionic/react';
+import { globe } from 'ionicons/icons';
+
+function Example() {
+ return (
+ <>
+ Open Toast
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/toast/icon/vue.md b/static/usage/v7/toast/icon/vue.md
new file mode 100644
index 00000000000..634f18e7ff5
--- /dev/null
+++ b/static/usage/v7/toast/icon/vue.md
@@ -0,0 +1,20 @@
+```html
+
+ Open Toast
+
+
+
+
+```
diff --git a/static/usage/v7/toast/inline/basic/angular.md b/static/usage/v7/toast/inline/basic/angular.md
new file mode 100644
index 00000000000..5756e5c7891
--- /dev/null
+++ b/static/usage/v7/toast/inline/basic/angular.md
@@ -0,0 +1,12 @@
+```html
+
+
+ Inline Toast
+
+
+
+ Open
+ This toast example uses triggers to automatically open a toast when the button is clicked.
+
+
+```
diff --git a/static/usage/v7/toast/inline/basic/demo.html b/static/usage/v7/toast/inline/basic/demo.html
new file mode 100644
index 00000000000..68f25b87d95
--- /dev/null
+++ b/static/usage/v7/toast/inline/basic/demo.html
@@ -0,0 +1,29 @@
+
+
+
+
+
+
+ Toast | Inline
+
+
+
+
+
+
+
+
+
+
+ Inline Toast
+
+
+
+ Open
+ This toast example uses triggers to automatically open a toast when the button is clicked.
+
+
+
+
+
+
diff --git a/static/usage/v7/toast/inline/basic/index.md b/static/usage/v7/toast/inline/basic/index.md
new file mode 100644
index 00000000000..ad7f55c6e1e
--- /dev/null
+++ b/static/usage/v7/toast/inline/basic/index.md
@@ -0,0 +1,19 @@
+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/toast/inline/basic/javascript.md b/static/usage/v7/toast/inline/basic/javascript.md
new file mode 100644
index 00000000000..27f1a967725
--- /dev/null
+++ b/static/usage/v7/toast/inline/basic/javascript.md
@@ -0,0 +1,12 @@
+```html
+
+
+ Inline Toast
+
+
+
+ Open
+ This toast example uses triggers to automatically open a toast when the button is clicked.
+
+
+```
diff --git a/static/usage/v7/toast/inline/basic/react.md b/static/usage/v7/toast/inline/basic/react.md
new file mode 100644
index 00000000000..898603a0516
--- /dev/null
+++ b/static/usage/v7/toast/inline/basic/react.md
@@ -0,0 +1,33 @@
+```tsx
+import React from 'react';
+import {
+ IonButton,
+ IonHeader,
+ IonContent,
+ IonToolbar,
+ IonTitle,
+ IonPage,
+ IonToast,
+} from '@ionic/react';
+
+function Example() {
+ return (
+
+
+
+ Inline Toast
+
+
+
+
+ Open
+
+ This toast example uses triggers to automatically open a toast when the button is clicked.
+
+
+
+ );
+}
+
+export default Example;
+```
diff --git a/static/usage/v7/toast/inline/basic/vue.md b/static/usage/v7/toast/inline/basic/vue.md
new file mode 100644
index 00000000000..48c07b16d95
--- /dev/null
+++ b/static/usage/v7/toast/inline/basic/vue.md
@@ -0,0 +1,37 @@
+```html
+
+
+
+ Inline Toast
+
+
+
+ Open
+ This toast example uses triggers to automatically open a toast when the button is clicked.
+
+
+
+
+
+```
diff --git a/static/usage/v7/toast/inline/is-open/angular/example_component_html.md b/static/usage/v7/toast/inline/is-open/angular/example_component_html.md
new file mode 100644
index 00000000000..96014213ad0
--- /dev/null
+++ b/static/usage/v7/toast/inline/is-open/angular/example_component_html.md
@@ -0,0 +1,16 @@
+```html
+
+
+ Inline Toast
+
+
+
+ Open
+
+
+```
diff --git a/static/usage/v7/toast/inline/is-open/angular/example_component_ts.md b/static/usage/v7/toast/inline/is-open/angular/example_component_ts.md
new file mode 100644
index 00000000000..67fb0c7676c
--- /dev/null
+++ b/static/usage/v7/toast/inline/is-open/angular/example_component_ts.md
@@ -0,0 +1,15 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ isToastOpen = false;
+
+ setOpen(isOpen: boolean) {
+ this.isToastOpen = isOpen;
+ }
+}
+```
diff --git a/static/usage/v7/toast/inline/is-open/demo.html b/static/usage/v7/toast/inline/is-open/demo.html
new file mode 100644
index 00000000000..fb8ce3c2d2d
--- /dev/null
+++ b/static/usage/v7/toast/inline/is-open/demo.html
@@ -0,0 +1,35 @@
+
+
+
+
+
+
+ Toast | Inline
+
+
+
+
+
+
+
+
+
+
+ Inline Toast
+
+
+
+ Open
+
+
+
+
+
+
+
+
diff --git a/static/usage/v7/toast/inline/is-open/index.md b/static/usage/v7/toast/inline/is-open/index.md
new file mode 100644
index 00000000000..5f5130a0a4d
--- /dev/null
+++ b/static/usage/v7/toast/inline/is-open/index.md
@@ -0,0 +1,26 @@
+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_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/v7/toast/inline/is-open/javascript.md b/static/usage/v7/toast/inline/is-open/javascript.md
new file mode 100644
index 00000000000..eeb540d747a
--- /dev/null
+++ b/static/usage/v7/toast/inline/is-open/javascript.md
@@ -0,0 +1,18 @@
+```html
+
+
+ Inline Toast
+
+
+
+ Open
+
+
+
+
+```
diff --git a/static/usage/v7/toast/inline/is-open/react.md b/static/usage/v7/toast/inline/is-open/react.md
new file mode 100644
index 00000000000..ed32e64ea70
--- /dev/null
+++ b/static/usage/v7/toast/inline/is-open/react.md
@@ -0,0 +1,31 @@
+```tsx
+import React, { useState } from 'react';
+import { IonButton, IonHeader, IonContent, IonToolbar, IonTitle, IonPage, IonToast } from '@ionic/react';
+
+function Example() {
+ const [isOpen, setIsOpen] = useState(false);
+
+ return (
+
+
+
+ Inline Toast
+
+
+
+ setIsOpen(true)}>
+ Open
+
+ setIsOpen(false)}
+ duration={5000}
+ >
+
+
+ );
+}
+
+export default Example;
+```
diff --git a/static/usage/v7/toast/inline/is-open/vue.md b/static/usage/v7/toast/inline/is-open/vue.md
new file mode 100644
index 00000000000..add4a0fe8b3
--- /dev/null
+++ b/static/usage/v7/toast/inline/is-open/vue.md
@@ -0,0 +1,35 @@
+```html
+
+
+
+ Inline Toast
+
+
+
+ Open
+
+
+
+
+
+```
diff --git a/static/usage/v7/toast/layout/angular/example_component_html.md b/static/usage/v7/toast/layout/angular/example_component_html.md
new file mode 100644
index 00000000000..6f33423b8a5
--- /dev/null
+++ b/static/usage/v7/toast/layout/angular/example_component_html.md
@@ -0,0 +1,17 @@
+```html
+Open Baseline Layout Toast
+Open Stacked Layout Toast
+
+
+```
\ No newline at end of file
diff --git a/static/usage/v7/toast/layout/angular/example_component_ts.md b/static/usage/v7/toast/layout/angular/example_component_ts.md
new file mode 100644
index 00000000000..4070a210849
--- /dev/null
+++ b/static/usage/v7/toast/layout/angular/example_component_ts.md
@@ -0,0 +1,15 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ toastButtons = [
+ {
+ text: 'Action With Long Text',
+ }
+ ];
+}
+```
\ No newline at end of file
diff --git a/static/usage/v7/toast/layout/demo.html b/static/usage/v7/toast/layout/demo.html
new file mode 100644
index 00000000000..86d2dedafb4
--- /dev/null
+++ b/static/usage/v7/toast/layout/demo.html
@@ -0,0 +1,42 @@
+
+
+
+
+
+
+ Toast
+
+
+
+
+
+
+
+
+
+
+ Toast
+
+
+
+ Open Baseline Layout Toast
+ Open Stacked Layout Toast
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v7/toast/layout/index.md b/static/usage/v7/toast/layout/index.md
new file mode 100644
index 00000000000..26d799850e4
--- /dev/null
+++ b/static/usage/v7/toast/layout/index.md
@@ -0,0 +1,25 @@
+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_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/v7/toast/layout/javascript.md b/static/usage/v7/toast/layout/javascript.md
new file mode 100644
index 00000000000..1ac30c76931
--- /dev/null
+++ b/static/usage/v7/toast/layout/javascript.md
@@ -0,0 +1,18 @@
+```html
+Open Baseline Layout Toast
+Open Stacked Layout Toast
+
+
+
+
+```
diff --git a/static/usage/v7/toast/layout/react.md b/static/usage/v7/toast/layout/react.md
new file mode 100644
index 00000000000..f760997bf69
--- /dev/null
+++ b/static/usage/v7/toast/layout/react.md
@@ -0,0 +1,35 @@
+```tsx
+import React from 'react';
+import { IonButton, IonToast } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+ Open Stacked Layout Toast
+ Open Baseline Layout Toast
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/toast/layout/vue.md b/static/usage/v7/toast/layout/vue.md
new file mode 100644
index 00000000000..bbd103574c3
--- /dev/null
+++ b/static/usage/v7/toast/layout/vue.md
@@ -0,0 +1,37 @@
+```html
+
+ Open Baseline Layout Toast
+ Open Stacked Layout Toast
+
+
+
+
+
+```
diff --git a/static/usage/v7/toast/presenting/controller/angular/example_component_html.md b/static/usage/v7/toast/presenting/controller/angular/example_component_html.md
new file mode 100644
index 00000000000..962fcd0e355
--- /dev/null
+++ b/static/usage/v7/toast/presenting/controller/angular/example_component_html.md
@@ -0,0 +1,5 @@
+```html
+Present Toast At the Top
+Present Toast At the Middle
+Present Toast At the Bottom
+```
\ No newline at end of file
diff --git a/static/usage/v7/toast/presenting/controller/angular/example_component_ts.md b/static/usage/v7/toast/presenting/controller/angular/example_component_ts.md
new file mode 100644
index 00000000000..c772728c3c1
--- /dev/null
+++ b/static/usage/v7/toast/presenting/controller/angular/example_component_ts.md
@@ -0,0 +1,22 @@
+```ts
+import { Component } from '@angular/core';
+import { ToastController } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ constructor(private toastController: ToastController) {}
+
+ async presentToast(position: 'top' | 'middle' | 'bottom') {
+ const toast = await this.toastController.create({
+ message: 'Hello World!',
+ duration: 1500,
+ position: position
+ });
+
+ await toast.present();
+ }
+}
+```
\ No newline at end of file
diff --git a/static/usage/v7/toast/presenting/controller/demo.html b/static/usage/v7/toast/presenting/controller/demo.html
new file mode 100644
index 00000000000..24cc1fcb8d0
--- /dev/null
+++ b/static/usage/v7/toast/presenting/controller/demo.html
@@ -0,0 +1,54 @@
+
+
+
+
+
+
+ Toast
+
+
+
+
+
+
+
+
+
+
+
+
+ Toast
+
+
+
+
+ Present Toast At the Top
+ Present Toast At the Middle
+ Present Toast At the Bottom
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/toast/presenting/controller/index.md b/static/usage/v7/toast/presenting/controller/index.md
new file mode 100644
index 00000000000..13a34cdac6d
--- /dev/null
+++ b/static/usage/v7/toast/presenting/controller/index.md
@@ -0,0 +1,25 @@
+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_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/v7/toast/presenting/controller/javascript.md b/static/usage/v7/toast/presenting/controller/javascript.md
new file mode 100644
index 00000000000..5260ba8d1a1
--- /dev/null
+++ b/static/usage/v7/toast/presenting/controller/javascript.md
@@ -0,0 +1,17 @@
+```html
+Present Toast At the Top
+Present Toast At the Middle
+Present Toast At the Bottom
+
+
+```
diff --git a/static/usage/v7/toast/presenting/controller/react.md b/static/usage/v7/toast/presenting/controller/react.md
new file mode 100644
index 00000000000..1dd38b3cd48
--- /dev/null
+++ b/static/usage/v7/toast/presenting/controller/react.md
@@ -0,0 +1,25 @@
+```tsx
+import React from 'react';
+import { IonButton, useIonToast } from '@ionic/react';
+
+function Example() {
+ const [present] = useIonToast();
+
+ const presentToast = (position: 'top' | 'middle' | 'bottom') => {
+ present({
+ message: 'Hello World!',
+ duration: 1500,
+ position: position
+ });
+ };
+
+ return (
+ <>
+ presentToast('top')}>Present Toast At the Top
+ presentToast('middle')}>Present Toast At the Middle
+ presentToast('bottom')}>Present Toast At the Bottom
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/toast/presenting/controller/vue.md b/static/usage/v7/toast/presenting/controller/vue.md
new file mode 100644
index 00000000000..ac520d0e7b9
--- /dev/null
+++ b/static/usage/v7/toast/presenting/controller/vue.md
@@ -0,0 +1,26 @@
+```html
+
+ Present Toast At the Top
+ Present Toast At the Middle
+ Present Toast At the Bottom
+
+
+
+```
diff --git a/static/usage/v7/toast/theming/angular/example_component_html.md b/static/usage/v7/toast/theming/angular/example_component_html.md
new file mode 100644
index 00000000000..840cca6e877
--- /dev/null
+++ b/static/usage/v7/toast/theming/angular/example_component_html.md
@@ -0,0 +1,4 @@
+```html
+Open Toast
+
+```
diff --git a/static/usage/v7/toast/theming/angular/example_component_ts.md b/static/usage/v7/toast/theming/angular/example_component_ts.md
new file mode 100644
index 00000000000..336df2a14a9
--- /dev/null
+++ b/static/usage/v7/toast/theming/angular/example_component_ts.md
@@ -0,0 +1,18 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ public toastButtons = [
+ {
+ text: 'Dismiss',
+ role: 'cancel'
+ }
+ ];
+
+ constructor() {}
+}
+```
diff --git a/static/usage/v7/toast/theming/angular/global_css.md b/static/usage/v7/toast/theming/angular/global_css.md
new file mode 100644
index 00000000000..4d261622074
--- /dev/null
+++ b/static/usage/v7/toast/theming/angular/global_css.md
@@ -0,0 +1,17 @@
+```css
+ion-toast.custom-toast {
+ --background: #F4F4FA;
+ --box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, 0.2);
+ --color: #4b4a50;
+}
+
+ion-toast.custom-toast::part(message) {
+ font-style: italic;
+}
+
+ion-toast.custom-toast::part(button) {
+ border-left: 1px solid #d2d2d2;
+ color: #030207;
+ font-size: 15px;
+}
+```
\ No newline at end of file
diff --git a/static/usage/v7/toast/theming/demo.html b/static/usage/v7/toast/theming/demo.html
new file mode 100644
index 00000000000..b45b2e6a73c
--- /dev/null
+++ b/static/usage/v7/toast/theming/demo.html
@@ -0,0 +1,58 @@
+
+
+
+
+
+
+ Toast
+
+
+
+
+
+
+
+
+
+
+
+
+ Toast
+
+
+
+
+ Open Toast
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v7/toast/theming/index.md b/static/usage/v7/toast/theming/index.md
new file mode 100644
index 00000000000..e4d6cb14b8e
--- /dev/null
+++ b/static/usage/v7/toast/theming/index.md
@@ -0,0 +1,34 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_global_css from './angular/global_css.md';
+
+
diff --git a/static/usage/v7/toast/theming/javascript.md b/static/usage/v7/toast/theming/javascript.md
new file mode 100644
index 00000000000..9da97b92b4c
--- /dev/null
+++ b/static/usage/v7/toast/theming/javascript.md
@@ -0,0 +1,32 @@
+```html
+Open Toast
+
+
+
+
+
+```
diff --git a/static/usage/v7/toast/theming/react/main_css.md b/static/usage/v7/toast/theming/react/main_css.md
new file mode 100644
index 00000000000..4d261622074
--- /dev/null
+++ b/static/usage/v7/toast/theming/react/main_css.md
@@ -0,0 +1,17 @@
+```css
+ion-toast.custom-toast {
+ --background: #F4F4FA;
+ --box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, 0.2);
+ --color: #4b4a50;
+}
+
+ion-toast.custom-toast::part(message) {
+ font-style: italic;
+}
+
+ion-toast.custom-toast::part(button) {
+ border-left: 1px solid #d2d2d2;
+ color: #030207;
+ font-size: 15px;
+}
+```
\ No newline at end of file
diff --git a/static/usage/v7/toast/theming/react/main_tsx.md b/static/usage/v7/toast/theming/react/main_tsx.md
new file mode 100644
index 00000000000..b31953021ca
--- /dev/null
+++ b/static/usage/v7/toast/theming/react/main_tsx.md
@@ -0,0 +1,27 @@
+```tsx
+import React from 'react';
+import { IonButton, IonToast } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+ Open Toast
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/toast/theming/vue.md b/static/usage/v7/toast/theming/vue.md
new file mode 100644
index 00000000000..14a6b0c1e3b
--- /dev/null
+++ b/static/usage/v7/toast/theming/vue.md
@@ -0,0 +1,42 @@
+```html
+
+ Open Toast
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/toggle/basic/angular.md b/static/usage/v7/toggle/basic/angular.md
new file mode 100644
index 00000000000..f6f9fd2bb1d
--- /dev/null
+++ b/static/usage/v7/toggle/basic/angular.md
@@ -0,0 +1,6 @@
+```html
+Default Toggle
+Checked Toggle
+Disabled Toggle
+Disabled Checked Toggle
+```
diff --git a/static/usage/v7/toggle/basic/demo.html b/static/usage/v7/toggle/basic/demo.html
new file mode 100644
index 00000000000..f6b5c53dbf6
--- /dev/null
+++ b/static/usage/v7/toggle/basic/demo.html
@@ -0,0 +1,29 @@
+
+
+
+
+
+
+ Toggle
+
+
+
+
+
+
+
+
+
+
+
+ Default Toggle
+ Checked Toggle
+ Disabled Toggle
+ Disabled Checked Toggle
+
+
+Checked Toggle
+Disabled Toggle
+Disabled Checked Toggle
+```
diff --git a/static/usage/v7/toggle/basic/react.md b/static/usage/v7/toggle/basic/react.md
new file mode 100644
index 00000000000..c46130e97bc
--- /dev/null
+++ b/static/usage/v7/toggle/basic/react.md
@@ -0,0 +1,16 @@
+```tsx
+import React from 'react';
+import { IonToggle } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+ Default Toggle
+ Checked Toggle
+ Disabled Toggle
+ Disabled Checked Toggle
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/toggle/basic/vue.md b/static/usage/v7/toggle/basic/vue.md
new file mode 100644
index 00000000000..cb5396e7abf
--- /dev/null
+++ b/static/usage/v7/toggle/basic/vue.md
@@ -0,0 +1,17 @@
+```html
+
+ Default Toggle
+ Checked Toggle
+ Disabled Toggle
+ Disabled Checked Toggle
+
+
+
+```
diff --git a/static/usage/v7/toggle/justify/angular.md b/static/usage/v7/toggle/justify/angular.md
new file mode 100644
index 00000000000..0dbb0ebc9ad
--- /dev/null
+++ b/static/usage/v7/toggle/justify/angular.md
@@ -0,0 +1,13 @@
+```html
+
+
+ Packed at the Start of Line
+
+
+ Packed at the End of Line
+
+
+ Space Between Label and Control
+
+
+```
diff --git a/static/usage/v7/toggle/justify/demo.html b/static/usage/v7/toggle/justify/demo.html
new file mode 100644
index 00000000000..6627099b6a5
--- /dev/null
+++ b/static/usage/v7/toggle/justify/demo.html
@@ -0,0 +1,40 @@
+
+
+
+
+
+
+ Toggle
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Packed at the Start of Line
+
+
+ Packed at the End of Line
+
+
+ Space Between Label and Control
+
+
+
+
+
+
+
+
diff --git a/static/usage/v7/toggle/justify/index.md b/static/usage/v7/toggle/justify/index.md
new file mode 100644
index 00000000000..63ae27756f0
--- /dev/null
+++ b/static/usage/v7/toggle/justify/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/toggle/justify/javascript.md b/static/usage/v7/toggle/justify/javascript.md
new file mode 100644
index 00000000000..0dbb0ebc9ad
--- /dev/null
+++ b/static/usage/v7/toggle/justify/javascript.md
@@ -0,0 +1,13 @@
+```html
+
+
+ Packed at the Start of Line
+
+
+ Packed at the End of Line
+
+
+ Space Between Label and Control
+
+
+```
diff --git a/static/usage/v7/toggle/justify/react.md b/static/usage/v7/toggle/justify/react.md
new file mode 100644
index 00000000000..ffe66a13f8f
--- /dev/null
+++ b/static/usage/v7/toggle/justify/react.md
@@ -0,0 +1,21 @@
+```tsx
+import React from 'react';
+import { IonItem, IonList, IonToggle } from '@ionic/react';
+
+function Example() {
+ return (
+
+
+ Packed at the Start of Line
+
+
+ Packed at the End of Line
+
+
+ Space Between Label and Control
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/toggle/justify/vue.md b/static/usage/v7/toggle/justify/vue.md
new file mode 100644
index 00000000000..ca48ab5d311
--- /dev/null
+++ b/static/usage/v7/toggle/justify/vue.md
@@ -0,0 +1,24 @@
+```html
+
+
+
+ Packed at the Start of Line
+
+
+ Packed at the End of Line
+
+
+ Space Between Label and Control
+
+
+
+
+
+```
diff --git a/static/usage/v7/toggle/label-placement/angular.md b/static/usage/v7/toggle/label-placement/angular.md
new file mode 100644
index 00000000000..cc9ad6fcafc
--- /dev/null
+++ b/static/usage/v7/toggle/label-placement/angular.md
@@ -0,0 +1,5 @@
+```html
+Label at the Start
+Label at the End
+Fixed Width Label
+```
diff --git a/static/usage/v7/toggle/label-placement/demo.html b/static/usage/v7/toggle/label-placement/demo.html
new file mode 100644
index 00000000000..af8592022ee
--- /dev/null
+++ b/static/usage/v7/toggle/label-placement/demo.html
@@ -0,0 +1,28 @@
+
+
+
+
+
+
+ Toggle
+
+
+
+
+
+
+
+
+
+
+
+ Label at the Start
+ Label at the End
+ Fixed Width Label
+
+
+Label at the End
+Fixed Width Label
+```
diff --git a/static/usage/v7/toggle/label-placement/react.md b/static/usage/v7/toggle/label-placement/react.md
new file mode 100644
index 00000000000..3cbba667587
--- /dev/null
+++ b/static/usage/v7/toggle/label-placement/react.md
@@ -0,0 +1,15 @@
+```tsx
+import React from 'react';
+import { IonToggle } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+ Label at the Start
+ Label at the End
+ Fixed Width Label
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/toggle/label-placement/vue.md b/static/usage/v7/toggle/label-placement/vue.md
new file mode 100644
index 00000000000..682472e8d05
--- /dev/null
+++ b/static/usage/v7/toggle/label-placement/vue.md
@@ -0,0 +1,16 @@
+```html
+
+ Label at the Start
+ Label at the End
+ Fixed Width Label
+
+
+
+```
diff --git a/static/usage/v7/toggle/list/angular.md b/static/usage/v7/toggle/list/angular.md
new file mode 100644
index 00000000000..5a731705335
--- /dev/null
+++ b/static/usage/v7/toggle/list/angular.md
@@ -0,0 +1,13 @@
+```html
+
+
+ Receive Push Notifications
+
+
+ Receive Emails
+
+
+ Receive Text Messages
+
+
+```
diff --git a/static/usage/v7/toggle/list/demo.html b/static/usage/v7/toggle/list/demo.html
new file mode 100644
index 00000000000..d8362f2cb00
--- /dev/null
+++ b/static/usage/v7/toggle/list/demo.html
@@ -0,0 +1,35 @@
+
+
+
+
+
+
+ Toggle
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Receive Push Notifications
+
+
+ Receive Emails
+
+
+ Receive Text Messages
+
+
+
+
+
+
+
+
diff --git a/static/usage/v7/toggle/list/index.md b/static/usage/v7/toggle/list/index.md
new file mode 100644
index 00000000000..ad3aef2e129
--- /dev/null
+++ b/static/usage/v7/toggle/list/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/toggle/list/javascript.md b/static/usage/v7/toggle/list/javascript.md
new file mode 100644
index 00000000000..5a731705335
--- /dev/null
+++ b/static/usage/v7/toggle/list/javascript.md
@@ -0,0 +1,13 @@
+```html
+
+
+ Receive Push Notifications
+
+
+ Receive Emails
+
+
+ Receive Text Messages
+
+
+```
diff --git a/static/usage/v7/toggle/list/react.md b/static/usage/v7/toggle/list/react.md
new file mode 100644
index 00000000000..f32920305ee
--- /dev/null
+++ b/static/usage/v7/toggle/list/react.md
@@ -0,0 +1,21 @@
+```tsx
+import React from 'react';
+import { IonItem, IonList, IonToggle } from '@ionic/react';
+
+function Example() {
+ return (
+
+
+ Receive Push Notifications
+
+
+ Receive Emails
+
+
+ Receive Text Messages
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/toggle/list/vue.md b/static/usage/v7/toggle/list/vue.md
new file mode 100644
index 00000000000..98e183a7f4b
--- /dev/null
+++ b/static/usage/v7/toggle/list/vue.md
@@ -0,0 +1,24 @@
+```html
+
+
+
+ Receive Push Notifications
+
+
+ Receive Emails
+
+
+ Receive Text Messages
+
+
+
+
+
+```
diff --git a/static/usage/v7/toggle/migration/index.md b/static/usage/v7/toggle/migration/index.md
new file mode 100644
index 00000000000..a1f855766b8
--- /dev/null
+++ b/static/usage/v7/toggle/migration/index.md
@@ -0,0 +1,188 @@
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+````mdx-code-block
+
+
+
+```html
+
+
+
+
+ Notifications
+
+
+
+
+
+ Notifications
+
+
+
+
+
+
+ Notifications
+
+
+
+
+
+ Notifications
+
+
+
+
+
+
+ Notifications
+
+
+
+
+
+ Notifications
+
+```
+
+
+
+```html
+
+
+
+
+ Notifications
+
+
+
+
+
+ Notifications
+
+
+
+
+
+
+ Notifications
+
+
+
+
+
+ Notifications
+
+
+
+
+
+
+ Notifications
+
+
+
+
+
+ Notifications
+
+```
+
+
+
+```tsx
+{/* Basic */}
+
+{/* Before */}
+
+ Notifications
+
+
+
+{/* After */}
+
+ Notifications
+
+
+{/* Fixed Labels */}
+
+{/* Before */}
+
+ Notifications
+
+
+
+{/* After */}
+
+ Notifications
+
+
+{/* Toggle at the start of line, Label at the end of line */}
+
+{/* Before */}
+
+ Notifications
+
+
+
+{/* After */}
+
+ Notifications
+
+```
+
+
+
+```html
+
+
+
+
+ Notifications
+
+
+
+
+
+ Notifications
+
+
+
+
+
+
+ Notifications
+
+
+
+
+
+ Notifications
+
+
+
+
+
+
+ Notifications
+
+
+
+
+
+ Notifications
+
+```
+
+
+````
diff --git a/static/usage/v7/toggle/on-off/angular.md b/static/usage/v7/toggle/on-off/angular.md
new file mode 100644
index 00000000000..2b2d75bcc3c
--- /dev/null
+++ b/static/usage/v7/toggle/on-off/angular.md
@@ -0,0 +1,3 @@
+```html
+Enable Notifications
+```
diff --git a/static/usage/v7/toggle/on-off/demo.html b/static/usage/v7/toggle/on-off/demo.html
new file mode 100644
index 00000000000..d43dd0879c8
--- /dev/null
+++ b/static/usage/v7/toggle/on-off/demo.html
@@ -0,0 +1,25 @@
+
+
+
+
+
+
+ Toggle
+
+
+
+
+
+
+
+
+
+
+
+ Enable Notifications
+
+
+
+
+
+
diff --git a/static/usage/v7/toggle/on-off/index.md b/static/usage/v7/toggle/on-off/index.md
new file mode 100644
index 00000000000..00a4e4800ad
--- /dev/null
+++ b/static/usage/v7/toggle/on-off/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/toggle/on-off/javascript.md b/static/usage/v7/toggle/on-off/javascript.md
new file mode 100644
index 00000000000..398ae05dfb7
--- /dev/null
+++ b/static/usage/v7/toggle/on-off/javascript.md
@@ -0,0 +1,3 @@
+```html
+Enable Notifications
+```
diff --git a/static/usage/v7/toggle/on-off/react.md b/static/usage/v7/toggle/on-off/react.md
new file mode 100644
index 00000000000..d1a2da3f651
--- /dev/null
+++ b/static/usage/v7/toggle/on-off/react.md
@@ -0,0 +1,11 @@
+```tsx
+import React from 'react';
+import { IonToggle } from '@ionic/react';
+
+function Example() {
+ return (
+ Enable Notifications
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/toggle/on-off/vue.md b/static/usage/v7/toggle/on-off/vue.md
new file mode 100644
index 00000000000..040df1266da
--- /dev/null
+++ b/static/usage/v7/toggle/on-off/vue.md
@@ -0,0 +1,14 @@
+```html
+
+ Enable Notifications
+
+
+
+```
diff --git a/static/usage/v7/toggle/theming/colors/angular.md b/static/usage/v7/toggle/theming/colors/angular.md
new file mode 100644
index 00000000000..20e1b2f0d19
--- /dev/null
+++ b/static/usage/v7/toggle/theming/colors/angular.md
@@ -0,0 +1,11 @@
+```html
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/toggle/theming/colors/demo.html b/static/usage/v7/toggle/theming/colors/demo.html
new file mode 100644
index 00000000000..c70545cfdbf
--- /dev/null
+++ b/static/usage/v7/toggle/theming/colors/demo.html
@@ -0,0 +1,33 @@
+
+
+
+
+
+
+ Toggle
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v7/toggle/theming/colors/index.md b/static/usage/v7/toggle/theming/colors/index.md
new file mode 100644
index 00000000000..e67d2cf0693
--- /dev/null
+++ b/static/usage/v7/toggle/theming/colors/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/toggle/theming/colors/javascript.md b/static/usage/v7/toggle/theming/colors/javascript.md
new file mode 100644
index 00000000000..a07c1af5771
--- /dev/null
+++ b/static/usage/v7/toggle/theming/colors/javascript.md
@@ -0,0 +1,11 @@
+```html
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/toggle/theming/colors/react.md b/static/usage/v7/toggle/theming/colors/react.md
new file mode 100644
index 00000000000..74fad7619ea
--- /dev/null
+++ b/static/usage/v7/toggle/theming/colors/react.md
@@ -0,0 +1,21 @@
+```tsx
+import React from 'react';
+import { IonToggle } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/toggle/theming/colors/vue.md b/static/usage/v7/toggle/theming/colors/vue.md
new file mode 100644
index 00000000000..453255eba8f
--- /dev/null
+++ b/static/usage/v7/toggle/theming/colors/vue.md
@@ -0,0 +1,22 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/toggle/theming/css-properties/angular/example_component_css.md b/static/usage/v7/toggle/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..a8e62a4d3e9
--- /dev/null
+++ b/static/usage/v7/toggle/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,27 @@
+```css
+ion-toggle {
+ padding: 12px;
+
+ --track-background: #ddd;
+ --track-background-checked: #ddd;
+
+ --handle-background: #eb7769;
+ --handle-background-checked: #95c34e;
+
+ --handle-width: 25px;
+ --handle-height: 27px;
+ --handle-max-height: auto;
+ --handle-spacing: 6px;
+
+ --handle-border-radius: 4px;
+ --handle-box-shadow: none;
+}
+
+ion-toggle::part(track) {
+ height: 10px;
+ width: 65px;
+
+ /* Required for iOS handle to overflow the height of the track */
+ overflow: visible;
+}
+```
diff --git a/static/usage/v7/toggle/theming/css-properties/angular/example_component_html.md b/static/usage/v7/toggle/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..de598209eaa
--- /dev/null
+++ b/static/usage/v7/toggle/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,4 @@
+```html
+
+
+```
diff --git a/static/usage/v7/toggle/theming/css-properties/demo.html b/static/usage/v7/toggle/theming/css-properties/demo.html
new file mode 100644
index 00000000000..32c2f939a98
--- /dev/null
+++ b/static/usage/v7/toggle/theming/css-properties/demo.html
@@ -0,0 +1,52 @@
+
+
+
+
+
+
+ Item
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v7/toggle/theming/css-properties/index.md b/static/usage/v7/toggle/theming/css-properties/index.md
new file mode 100644
index 00000000000..b7f767691f7
--- /dev/null
+++ b/static/usage/v7/toggle/theming/css-properties/index.md
@@ -0,0 +1,32 @@
+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/toggle/theming/css-properties/javascript.md b/static/usage/v7/toggle/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..5483235b4c5
--- /dev/null
+++ b/static/usage/v7/toggle/theming/css-properties/javascript.md
@@ -0,0 +1,32 @@
+```html
+
+
+
+
+```
diff --git a/static/usage/v7/toggle/theming/css-properties/react/main_css.md b/static/usage/v7/toggle/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..a8e62a4d3e9
--- /dev/null
+++ b/static/usage/v7/toggle/theming/css-properties/react/main_css.md
@@ -0,0 +1,27 @@
+```css
+ion-toggle {
+ padding: 12px;
+
+ --track-background: #ddd;
+ --track-background-checked: #ddd;
+
+ --handle-background: #eb7769;
+ --handle-background-checked: #95c34e;
+
+ --handle-width: 25px;
+ --handle-height: 27px;
+ --handle-max-height: auto;
+ --handle-spacing: 6px;
+
+ --handle-border-radius: 4px;
+ --handle-box-shadow: none;
+}
+
+ion-toggle::part(track) {
+ height: 10px;
+ width: 65px;
+
+ /* Required for iOS handle to overflow the height of the track */
+ overflow: visible;
+}
+```
diff --git a/static/usage/v7/toggle/theming/css-properties/react/main_tsx.md b/static/usage/v7/toggle/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..aa988bb22d4
--- /dev/null
+++ b/static/usage/v7/toggle/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,16 @@
+```tsx
+import React from 'react';
+import { IonToggle } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/toggle/theming/css-properties/vue.md b/static/usage/v7/toggle/theming/css-properties/vue.md
new file mode 100644
index 00000000000..e546b97d1a3
--- /dev/null
+++ b/static/usage/v7/toggle/theming/css-properties/vue.md
@@ -0,0 +1,43 @@
+```html
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/toggle/theming/css-shadow-parts/angular/example_component_css.md b/static/usage/v7/toggle/theming/css-shadow-parts/angular/example_component_css.md
new file mode 100644
index 00000000000..0df6def7beb
--- /dev/null
+++ b/static/usage/v7/toggle/theming/css-shadow-parts/angular/example_component_css.md
@@ -0,0 +1,34 @@
+```css
+ion-toggle {
+ padding: 12px;
+
+ --handle-width: 25px;
+ --handle-height: 27px;
+ --handle-max-height: auto;
+ --handle-spacing: 6px;
+
+ contain: none;
+}
+
+ion-toggle::part(track),
+ion-toggle.toggle-checked::part(track) {
+ height: 10px;
+ width: 65px;
+
+ background: #ddd;
+
+ /* Required for iOS handle to overflow the height of the track */
+ overflow: visible;
+}
+
+ion-toggle::part(handle) {
+ background: #eb7769;
+
+ border-radius: 4px;
+ box-shadow: none;
+}
+
+ion-toggle.toggle-checked::part(handle) {
+ background: #95c34e;
+}
+```
diff --git a/static/usage/v7/toggle/theming/css-shadow-parts/angular/example_component_html.md b/static/usage/v7/toggle/theming/css-shadow-parts/angular/example_component_html.md
new file mode 100644
index 00000000000..de598209eaa
--- /dev/null
+++ b/static/usage/v7/toggle/theming/css-shadow-parts/angular/example_component_html.md
@@ -0,0 +1,4 @@
+```html
+
+
+```
diff --git a/static/usage/v7/toggle/theming/css-shadow-parts/demo.html b/static/usage/v7/toggle/theming/css-shadow-parts/demo.html
new file mode 100644
index 00000000000..19634b29acf
--- /dev/null
+++ b/static/usage/v7/toggle/theming/css-shadow-parts/demo.html
@@ -0,0 +1,60 @@
+
+
+
+
+
+
+ Item
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v7/toggle/theming/css-shadow-parts/index.md b/static/usage/v7/toggle/theming/css-shadow-parts/index.md
new file mode 100644
index 00000000000..6241f8b029f
--- /dev/null
+++ b/static/usage/v7/toggle/theming/css-shadow-parts/index.md
@@ -0,0 +1,32 @@
+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/toggle/theming/css-shadow-parts/javascript.md b/static/usage/v7/toggle/theming/css-shadow-parts/javascript.md
new file mode 100644
index 00000000000..3329f6b386c
--- /dev/null
+++ b/static/usage/v7/toggle/theming/css-shadow-parts/javascript.md
@@ -0,0 +1,39 @@
+```html
+
+
+
+
+```
diff --git a/static/usage/v7/toggle/theming/css-shadow-parts/react/main_css.md b/static/usage/v7/toggle/theming/css-shadow-parts/react/main_css.md
new file mode 100644
index 00000000000..0df6def7beb
--- /dev/null
+++ b/static/usage/v7/toggle/theming/css-shadow-parts/react/main_css.md
@@ -0,0 +1,34 @@
+```css
+ion-toggle {
+ padding: 12px;
+
+ --handle-width: 25px;
+ --handle-height: 27px;
+ --handle-max-height: auto;
+ --handle-spacing: 6px;
+
+ contain: none;
+}
+
+ion-toggle::part(track),
+ion-toggle.toggle-checked::part(track) {
+ height: 10px;
+ width: 65px;
+
+ background: #ddd;
+
+ /* Required for iOS handle to overflow the height of the track */
+ overflow: visible;
+}
+
+ion-toggle::part(handle) {
+ background: #eb7769;
+
+ border-radius: 4px;
+ box-shadow: none;
+}
+
+ion-toggle.toggle-checked::part(handle) {
+ background: #95c34e;
+}
+```
diff --git a/static/usage/v7/toggle/theming/css-shadow-parts/react/main_tsx.md b/static/usage/v7/toggle/theming/css-shadow-parts/react/main_tsx.md
new file mode 100644
index 00000000000..aa988bb22d4
--- /dev/null
+++ b/static/usage/v7/toggle/theming/css-shadow-parts/react/main_tsx.md
@@ -0,0 +1,16 @@
+```tsx
+import React from 'react';
+import { IonToggle } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/toggle/theming/css-shadow-parts/vue.md b/static/usage/v7/toggle/theming/css-shadow-parts/vue.md
new file mode 100644
index 00000000000..a62511001cd
--- /dev/null
+++ b/static/usage/v7/toggle/theming/css-shadow-parts/vue.md
@@ -0,0 +1,50 @@
+```html
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/toolbar/basic/angular.md b/static/usage/v7/toolbar/basic/angular.md
new file mode 100644
index 00000000000..40fbd442061
--- /dev/null
+++ b/static/usage/v7/toolbar/basic/angular.md
@@ -0,0 +1,13 @@
+```html
+
+
+ Header Toolbar
+
+
+
+
+
+ Footer Toolbar
+
+
+```
diff --git a/static/usage/v7/toolbar/basic/demo.html b/static/usage/v7/toolbar/basic/demo.html
new file mode 100644
index 00000000000..bc598f63d22
--- /dev/null
+++ b/static/usage/v7/toolbar/basic/demo.html
@@ -0,0 +1,31 @@
+
+
+
+
+
+
+ Toolbar
+
+
+
+
+
+
+
+
+
+
+
+ Header Toolbar
+
+
+
+
+
+ Footer Toolbar
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/toolbar/basic/index.md b/static/usage/v7/toolbar/basic/index.md
new file mode 100644
index 00000000000..43cc48e1fe9
--- /dev/null
+++ b/static/usage/v7/toolbar/basic/index.md
@@ -0,0 +1,14 @@
+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/toolbar/basic/javascript.md b/static/usage/v7/toolbar/basic/javascript.md
new file mode 100644
index 00000000000..40fbd442061
--- /dev/null
+++ b/static/usage/v7/toolbar/basic/javascript.md
@@ -0,0 +1,13 @@
+```html
+
+
+ Header Toolbar
+
+
+
+
+
+ Footer Toolbar
+
+
+```
diff --git a/static/usage/v7/toolbar/basic/react.md b/static/usage/v7/toolbar/basic/react.md
new file mode 100644
index 00000000000..42b46929d3f
--- /dev/null
+++ b/static/usage/v7/toolbar/basic/react.md
@@ -0,0 +1,23 @@
+```tsx
+import React from 'react';
+import { IonFooter, IonHeader, IonTitle, IonToolbar } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+ Header Toolbar
+
+
+
+
+
+ Footer Toolbar
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/toolbar/basic/vue.md b/static/usage/v7/toolbar/basic/vue.md
new file mode 100644
index 00000000000..ec71b1a340b
--- /dev/null
+++ b/static/usage/v7/toolbar/basic/vue.md
@@ -0,0 +1,24 @@
+```html
+
+
+
+ Header Toolbar
+
+
+
+
+
+ Footer Toolbar
+
+
+
+
+
+```
diff --git a/static/usage/v7/toolbar/buttons/angular.md b/static/usage/v7/toolbar/buttons/angular.md
new file mode 100644
index 00000000000..ceafe115821
--- /dev/null
+++ b/static/usage/v7/toolbar/buttons/angular.md
@@ -0,0 +1,92 @@
+```html
+
+
+
+ Start
+
+
+ Start / End Buttons
+
+
+ End
+
+
+
+
+
+
+
+ Secondary
+
+
+
+
+ Primary
+
+
+ Primary / Secondary Buttons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Icon Buttons
+
+
+
+
+
+
+ Contact
+
+
+
+
+ Help
+
+
+
+ Solid Buttons
+
+
+
+
+
+
+ Star
+
+
+
+
+ Edit
+
+
+
+ Outline Buttons
+
+
+
+
+
+
+ Back Button
+
+
+
+
+
+
+ Menu Button
+
+```
diff --git a/static/usage/v7/toolbar/buttons/demo.html b/static/usage/v7/toolbar/buttons/demo.html
new file mode 100644
index 00000000000..55941b2c348
--- /dev/null
+++ b/static/usage/v7/toolbar/buttons/demo.html
@@ -0,0 +1,120 @@
+
+
+
+
+
+
+ Toolbar
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Start
+
+
+ Start / End Buttons
+
+
+ End
+
+
+
+
+
+
+
+ Secondary
+
+
+
+
+ Primary
+
+
+ Primary / Secondary Buttons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Icon Buttons
+
+
+
+
+
+
+ Contact
+
+
+
+
+ Help
+
+
+
+ Solid Buttons
+
+
+
+
+
+
+ Star
+
+
+
+
+ Edit
+
+
+
+ Outline Buttons
+
+
+
+
+
+
+ Back Button
+
+
+
+
+
+
+ Menu Button
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/toolbar/buttons/index.md b/static/usage/v7/toolbar/buttons/index.md
new file mode 100644
index 00000000000..d0d4897944b
--- /dev/null
+++ b/static/usage/v7/toolbar/buttons/index.md
@@ -0,0 +1,13 @@
+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/toolbar/buttons/javascript.md b/static/usage/v7/toolbar/buttons/javascript.md
new file mode 100644
index 00000000000..ceafe115821
--- /dev/null
+++ b/static/usage/v7/toolbar/buttons/javascript.md
@@ -0,0 +1,92 @@
+```html
+
+
+
+ Start
+
+
+ Start / End Buttons
+
+
+ End
+
+
+
+
+
+
+
+ Secondary
+
+
+
+
+ Primary
+
+
+ Primary / Secondary Buttons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Icon Buttons
+
+
+
+
+
+
+ Contact
+
+
+
+
+ Help
+
+
+
+ Solid Buttons
+
+
+
+
+
+
+ Star
+
+
+
+
+ Edit
+
+
+
+ Outline Buttons
+
+
+
+
+
+
+ Back Button
+
+
+
+
+
+
+ Menu Button
+
+```
diff --git a/static/usage/v7/toolbar/buttons/react.md b/static/usage/v7/toolbar/buttons/react.md
new file mode 100644
index 00000000000..ff7736981f0
--- /dev/null
+++ b/static/usage/v7/toolbar/buttons/react.md
@@ -0,0 +1,103 @@
+```tsx
+import React from 'react';
+import { IonBackButton, IonButton, IonButtons, IonIcon, IonMenuButton, IonTitle, IonToolbar } from '@ionic/react';
+import { create, ellipsisHorizontal, ellipsisVertical, helpCircle, search, personCircle, star } from 'ionicons/icons';
+
+function Example() {
+ return (
+ <>
+
+
+
+ Start
+
+
+ Start / End Buttons
+
+
+ End
+
+
+
+
+
+
+
+ Secondary
+
+
+
+
+ Primary
+
+
+ Primary / Secondary Buttons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Icon Buttons
+
+
+
+
+
+
+ Contact
+
+
+
+
+ Help
+
+
+
+ Solid Buttons
+
+
+
+
+
+
+ Star
+
+
+
+
+ Edit
+
+
+
+ Outline Buttons
+
+
+
+
+
+
+ Back Button
+
+
+
+
+
+
+ Menu Button
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/toolbar/buttons/vue.md b/static/usage/v7/toolbar/buttons/vue.md
new file mode 100644
index 00000000000..388760dcd9f
--- /dev/null
+++ b/static/usage/v7/toolbar/buttons/vue.md
@@ -0,0 +1,107 @@
+```html
+
+
+
+
+ Start
+
+
+ Start / End Buttons
+
+
+ End
+
+
+
+
+
+
+
+ Secondary
+
+
+
+
+ Primary
+
+
+ Primary / Secondary Buttons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Icon Buttons
+
+
+
+
+
+
+ Contact
+
+
+
+
+ Help
+
+
+
+ Solid Buttons
+
+
+
+
+
+
+ Star
+
+
+
+
+ Edit
+
+
+
+ Outline Buttons
+
+
+
+
+
+
+ Back Button
+
+
+
+
+
+
+ Menu Button
+
+
+
+
+```
diff --git a/static/usage/v7/toolbar/progress-bars/angular.md b/static/usage/v7/toolbar/progress-bars/angular.md
new file mode 100644
index 00000000000..0c80f0f5955
--- /dev/null
+++ b/static/usage/v7/toolbar/progress-bars/angular.md
@@ -0,0 +1,8 @@
+```html
+
+
+ Toolbar
+
+
+
+```
diff --git a/static/usage/v7/toolbar/progress-bars/demo.html b/static/usage/v7/toolbar/progress-bars/demo.html
new file mode 100644
index 00000000000..58ddadffe72
--- /dev/null
+++ b/static/usage/v7/toolbar/progress-bars/demo.html
@@ -0,0 +1,26 @@
+
+
+
+
+
+
+ Toolbar
+
+
+
+
+
+
+
+
+
+
+
+ Toolbar
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/toolbar/progress-bars/index.md b/static/usage/v7/toolbar/progress-bars/index.md
new file mode 100644
index 00000000000..067e8bed05f
--- /dev/null
+++ b/static/usage/v7/toolbar/progress-bars/index.md
@@ -0,0 +1,14 @@
+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/toolbar/progress-bars/javascript.md b/static/usage/v7/toolbar/progress-bars/javascript.md
new file mode 100644
index 00000000000..0c80f0f5955
--- /dev/null
+++ b/static/usage/v7/toolbar/progress-bars/javascript.md
@@ -0,0 +1,8 @@
+```html
+
+
+ Toolbar
+
+
+
+```
diff --git a/static/usage/v7/toolbar/progress-bars/react.md b/static/usage/v7/toolbar/progress-bars/react.md
new file mode 100644
index 00000000000..52720f12b14
--- /dev/null
+++ b/static/usage/v7/toolbar/progress-bars/react.md
@@ -0,0 +1,16 @@
+```tsx
+import React from 'react';
+import { IonHeader, IonProgressBar, IonTitle, IonToolbar } from '@ionic/react';
+
+function Example() {
+ return (
+
+
+ Toolbar
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/toolbar/progress-bars/vue.md b/static/usage/v7/toolbar/progress-bars/vue.md
new file mode 100644
index 00000000000..2b3a3b85d0c
--- /dev/null
+++ b/static/usage/v7/toolbar/progress-bars/vue.md
@@ -0,0 +1,19 @@
+```html
+
+
+
+ Toolbar
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/toolbar/searchbars/angular.md b/static/usage/v7/toolbar/searchbars/angular.md
new file mode 100644
index 00000000000..9016e1e04cf
--- /dev/null
+++ b/static/usage/v7/toolbar/searchbars/angular.md
@@ -0,0 +1,10 @@
+```html
+
+
+ Toolbar
+
+
+
+
+
+```
diff --git a/static/usage/v7/toolbar/searchbars/demo.html b/static/usage/v7/toolbar/searchbars/demo.html
new file mode 100644
index 00000000000..a75cf4e6483
--- /dev/null
+++ b/static/usage/v7/toolbar/searchbars/demo.html
@@ -0,0 +1,28 @@
+
+
+
+
+
+
+ Toolbar
+
+
+
+
+
+
+
+
+
+
+
+ Toolbar
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/toolbar/searchbars/index.md b/static/usage/v7/toolbar/searchbars/index.md
new file mode 100644
index 00000000000..c1327b9c45a
--- /dev/null
+++ b/static/usage/v7/toolbar/searchbars/index.md
@@ -0,0 +1,14 @@
+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/toolbar/searchbars/javascript.md b/static/usage/v7/toolbar/searchbars/javascript.md
new file mode 100644
index 00000000000..9016e1e04cf
--- /dev/null
+++ b/static/usage/v7/toolbar/searchbars/javascript.md
@@ -0,0 +1,10 @@
+```html
+
+
+ Toolbar
+
+
+
+
+
+```
diff --git a/static/usage/v7/toolbar/searchbars/react.md b/static/usage/v7/toolbar/searchbars/react.md
new file mode 100644
index 00000000000..dcf4fc644f3
--- /dev/null
+++ b/static/usage/v7/toolbar/searchbars/react.md
@@ -0,0 +1,18 @@
+```tsx
+import React from 'react';
+import { IonHeader, IonSearchbar, IonTitle, IonToolbar } from '@ionic/react';
+
+function Example() {
+ return (
+
+
+ Toolbar
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/toolbar/searchbars/vue.md b/static/usage/v7/toolbar/searchbars/vue.md
new file mode 100644
index 00000000000..8543a2ef976
--- /dev/null
+++ b/static/usage/v7/toolbar/searchbars/vue.md
@@ -0,0 +1,21 @@
+```html
+
+
+
+ Toolbar
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/toolbar/segments/angular.md b/static/usage/v7/toolbar/segments/angular.md
new file mode 100644
index 00000000000..e7cce4323dc
--- /dev/null
+++ b/static/usage/v7/toolbar/segments/angular.md
@@ -0,0 +1,14 @@
+```html
+
+
+
+
+ All
+
+
+ Favorites
+
+
+
+
+```
diff --git a/static/usage/v7/toolbar/segments/demo.html b/static/usage/v7/toolbar/segments/demo.html
new file mode 100644
index 00000000000..42452b90dd8
--- /dev/null
+++ b/static/usage/v7/toolbar/segments/demo.html
@@ -0,0 +1,32 @@
+
+
+
+
+
+
+ Toolbar
+
+
+
+
+
+
+
+
+
+
+
+
+
+ All
+
+
+ Favorites
+
+
+
+
+
+
+
+
diff --git a/static/usage/v7/toolbar/segments/index.md b/static/usage/v7/toolbar/segments/index.md
new file mode 100644
index 00000000000..1cd0613d883
--- /dev/null
+++ b/static/usage/v7/toolbar/segments/index.md
@@ -0,0 +1,14 @@
+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/toolbar/segments/javascript.md b/static/usage/v7/toolbar/segments/javascript.md
new file mode 100644
index 00000000000..e7cce4323dc
--- /dev/null
+++ b/static/usage/v7/toolbar/segments/javascript.md
@@ -0,0 +1,14 @@
+```html
+
+
+
+
+ All
+
+
+ Favorites
+
+
+
+
+```
diff --git a/static/usage/v7/toolbar/segments/react.md b/static/usage/v7/toolbar/segments/react.md
new file mode 100644
index 00000000000..f2fad4d0ec5
--- /dev/null
+++ b/static/usage/v7/toolbar/segments/react.md
@@ -0,0 +1,22 @@
+```tsx
+import React from 'react';
+import { IonHeader, IonLabel, IonSegment, IonSegmentButton, IonTitle, IonToolbar } from '@ionic/react';
+
+function Example() {
+ return (
+
+
+
+
+ All
+
+
+ Favorites
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/toolbar/segments/vue.md b/static/usage/v7/toolbar/segments/vue.md
new file mode 100644
index 00000000000..b31855bf734
--- /dev/null
+++ b/static/usage/v7/toolbar/segments/vue.md
@@ -0,0 +1,25 @@
+```html
+
+
+
+
+
+ All
+
+
+ Favorites
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v7/toolbar/theming/colors/angular.md b/static/usage/v7/toolbar/theming/colors/angular.md
new file mode 100644
index 00000000000..a2763a1c1c7
--- /dev/null
+++ b/static/usage/v7/toolbar/theming/colors/angular.md
@@ -0,0 +1,32 @@
+```html
+
+ Default Toolbar
+
+
+ Primary Toolbar
+
+
+ Secondary Toolbar
+
+
+ Tertiary Toolbar
+
+
+ Success Toolbar
+
+
+ Warning Toolbar
+
+
+ Danger Toolbar
+
+
+ Light Toolbar
+
+
+ Medium Toolbar
+
+
+ Dark Toolbar
+
+```
diff --git a/static/usage/v7/toolbar/theming/colors/demo.html b/static/usage/v7/toolbar/theming/colors/demo.html
new file mode 100644
index 00000000000..f8c44dcd8e2
--- /dev/null
+++ b/static/usage/v7/toolbar/theming/colors/demo.html
@@ -0,0 +1,60 @@
+
+
+
+
+
+
+ Toolbar
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Default Toolbar
+
+
+ Primary Toolbar
+
+
+ Secondary Toolbar
+
+
+ Tertiary Toolbar
+
+
+ Success Toolbar
+
+
+ Warning Toolbar
+
+
+ Danger Toolbar
+
+
+ Light Toolbar
+
+
+ Medium Toolbar
+
+
+ Dark Toolbar
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/toolbar/theming/colors/index.md b/static/usage/v7/toolbar/theming/colors/index.md
new file mode 100644
index 00000000000..686cc8df40b
--- /dev/null
+++ b/static/usage/v7/toolbar/theming/colors/index.md
@@ -0,0 +1,13 @@
+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/toolbar/theming/colors/javascript.md b/static/usage/v7/toolbar/theming/colors/javascript.md
new file mode 100644
index 00000000000..a2763a1c1c7
--- /dev/null
+++ b/static/usage/v7/toolbar/theming/colors/javascript.md
@@ -0,0 +1,32 @@
+```html
+
+ Default Toolbar
+
+
+ Primary Toolbar
+
+
+ Secondary Toolbar
+
+
+ Tertiary Toolbar
+
+
+ Success Toolbar
+
+
+ Warning Toolbar
+
+
+ Danger Toolbar
+
+
+ Light Toolbar
+
+
+ Medium Toolbar
+
+
+ Dark Toolbar
+
+```
diff --git a/static/usage/v7/toolbar/theming/colors/react.md b/static/usage/v7/toolbar/theming/colors/react.md
new file mode 100644
index 00000000000..ba6fd010f23
--- /dev/null
+++ b/static/usage/v7/toolbar/theming/colors/react.md
@@ -0,0 +1,42 @@
+```tsx
+import React from 'react';
+import { IonTitle, IonToolbar } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+ Default Toolbar
+
+
+ Primary Toolbar
+
+
+ Secondary Toolbar
+
+
+ Tertiary Toolbar
+
+
+ Success Toolbar
+
+
+ Warning Toolbar
+
+
+ Danger Toolbar
+
+
+ Light Toolbar
+
+
+ Medium Toolbar
+
+
+ Dark Toolbar
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/toolbar/theming/colors/vue.md b/static/usage/v7/toolbar/theming/colors/vue.md
new file mode 100644
index 00000000000..d71cb7a3c05
--- /dev/null
+++ b/static/usage/v7/toolbar/theming/colors/vue.md
@@ -0,0 +1,43 @@
+```html
+
+
+ Default Toolbar
+
+
+ Primary Toolbar
+
+
+ Secondary Toolbar
+
+
+ Tertiary Toolbar
+
+
+ Success Toolbar
+
+
+ Warning Toolbar
+
+
+ Danger Toolbar
+
+
+ Light Toolbar
+
+
+ Medium Toolbar
+
+
+ Dark Toolbar
+
+
+
+
+```
diff --git a/static/usage/v7/toolbar/theming/css-properties/angular/example_component_css.md b/static/usage/v7/toolbar/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..f485553f7ad
--- /dev/null
+++ b/static/usage/v7/toolbar/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,14 @@
+```css
+ion-toolbar {
+ --background: #19422d;
+ --color: white;
+
+ --border-color: #f24aec;
+ --border-width: 4px 0;
+ --border-style: double;
+
+ --min-height: 80px;
+ --padding-top: 20px;
+ --padding-bottom: 20px;
+}
+```
diff --git a/static/usage/v7/toolbar/theming/css-properties/angular/example_component_html.md b/static/usage/v7/toolbar/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..8f21356a707
--- /dev/null
+++ b/static/usage/v7/toolbar/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,5 @@
+```html
+
+ Custom Toolbar
+
+```
diff --git a/static/usage/v7/toolbar/theming/css-properties/demo.html b/static/usage/v7/toolbar/theming/css-properties/demo.html
new file mode 100644
index 00000000000..dca3fea437d
--- /dev/null
+++ b/static/usage/v7/toolbar/theming/css-properties/demo.html
@@ -0,0 +1,46 @@
+
+
+
+
+
+
+ Toolbar
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Custom Toolbar
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/usage/v7/toolbar/theming/css-properties/index.md b/static/usage/v7/toolbar/theming/css-properties/index.md
new file mode 100644
index 00000000000..9ca22f52d07
--- /dev/null
+++ b/static/usage/v7/toolbar/theming/css-properties/index.md
@@ -0,0 +1,33 @@
+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/toolbar/theming/css-properties/javascript.md b/static/usage/v7/toolbar/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..7ee9cd6d581
--- /dev/null
+++ b/static/usage/v7/toolbar/theming/css-properties/javascript.md
@@ -0,0 +1,20 @@
+```html
+
+ Custom Toolbar
+
+
+
+```
diff --git a/static/usage/v7/toolbar/theming/css-properties/react/main_css.md b/static/usage/v7/toolbar/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..f485553f7ad
--- /dev/null
+++ b/static/usage/v7/toolbar/theming/css-properties/react/main_css.md
@@ -0,0 +1,14 @@
+```css
+ion-toolbar {
+ --background: #19422d;
+ --color: white;
+
+ --border-color: #f24aec;
+ --border-width: 4px 0;
+ --border-style: double;
+
+ --min-height: 80px;
+ --padding-top: 20px;
+ --padding-bottom: 20px;
+}
+```
diff --git a/static/usage/v7/toolbar/theming/css-properties/react/main_tsx.md b/static/usage/v7/toolbar/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..8e8f663cd98
--- /dev/null
+++ b/static/usage/v7/toolbar/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,15 @@
+```tsx
+import React from 'react';
+import { IonTitle, IonToolbar } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+
+ Custom Toolbar
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/toolbar/theming/css-properties/vue.md b/static/usage/v7/toolbar/theming/css-properties/vue.md
new file mode 100644
index 00000000000..17d8653117c
--- /dev/null
+++ b/static/usage/v7/toolbar/theming/css-properties/vue.md
@@ -0,0 +1,31 @@
+```html
+
+
+ Custom Toolbar
+
+
+
+
+
+
+```
diff --git a/versioned_docs/version-v5/angular/your-first-app.md b/versioned_docs/version-v5/angular/your-first-app.md
index bee8e745cc4..a44f9cab7dc 100644
--- a/versioned_docs/version-v5/angular/your-first-app.md
+++ b/versioned_docs/version-v5/angular/your-first-app.md
@@ -28,8 +28,8 @@ We'll create a Photo Gallery app that offers the ability to take photos with you
Highlights include:
- One Angular-based codebase that runs on the web, iOS, and Android using Ionic Framework [UI components](https://ionicframework.com/docs/components).
-- Deployed as a native iOS and Android mobile app using [Capacitor](https://capacitor.ionicframework.com), Ionic's official native app runtime.
-- Photo Gallery functionality powered by the Capacitor [Camera](https://capacitor.ionicframework.com/docs/apis/camera), [Filesystem](https://capacitor.ionicframework.com/docs/apis/filesystem), and [Storage](https://capacitor.ionicframework.com/docs/apis/storage) APIs.
+- Deployed as a native iOS and Android mobile app using [Capacitor](https://capacitorjs.com), Ionic's official native app runtime.
+- Photo Gallery functionality powered by the Capacitor [Camera](https://capacitorjs.com/docs/apis/camera), [Filesystem](https://capacitorjs.com/docs/apis/filesystem), and [Preferences](https://capacitorjs.com/docs/apis/preferences) APIs.
Find the complete app code referenced in this guide [on GitHub](https://github.com/ionic-team/photo-gallery-capacitor-ng).
@@ -81,7 +81,7 @@ cd photo-gallery
Next we'll need to install the necessary Capacitor plugins to make the app's native functionality work:
```shell
-npm install @capacitor/camera @capacitor/storage @capacitor/filesystem
+npm install @capacitor/camera @capacitor/preferences @capacitor/filesystem
```
### PWA Elements
diff --git a/versioned_docs/version-v5/angular/your-first-app/2-taking-photos.md b/versioned_docs/version-v5/angular/your-first-app/2-taking-photos.md
index 5153a2051f8..70f6ed01e3f 100644
--- a/versioned_docs/version-v5/angular/your-first-app/2-taking-photos.md
+++ b/versioned_docs/version-v5/angular/your-first-app/2-taking-photos.md
@@ -4,7 +4,7 @@ sidebar_label: Taking Photos
# Taking Photos with the Camera
-Now for the fun part - adding the ability to take photos with the deviceâs camera using the Capacitor [Camera API](https://capacitor.ionicframework.com/docs/apis/camera). Weâll begin with building it for the web, then make some small tweaks to make it work on mobile (iOS and Android).
+Now for the fun part - adding the ability to take photos with the deviceâs camera using the Capacitor [Camera API](https://capacitorjs.com/docs/apis/camera). Weâll begin with building it for the web, then make some small tweaks to make it work on mobile (iOS and Android).
## Photo Service
@@ -19,7 +19,7 @@ Open the new `services/photo.service.ts` file, and letâs add the logic that wi
```tsx
import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';
import { Filesystem, Directory } from '@capacitor/filesystem';
-import { Storage } from '@capacitor/storage';
+import { Preferences } from '@capacitor/preferences';
```
Next, define a new class method, `addNewToGallery`, that will contain the core logic to take a device photo and save it to the filesystem. Letâs start by opening the device camera:
diff --git a/versioned_docs/version-v5/angular/your-first-app/3-saving-photos.md b/versioned_docs/version-v5/angular/your-first-app/3-saving-photos.md
index 6ff436420cf..f6a0874aca8 100644
--- a/versioned_docs/version-v5/angular/your-first-app/3-saving-photos.md
+++ b/versioned_docs/version-v5/angular/your-first-app/3-saving-photos.md
@@ -31,7 +31,7 @@ public async addNewToGallery() {
}
```
-Weâll use the Capacitor [Filesystem API](https://capacitor.ionicframework.com/docs/apis/filesystem) to save the photo to the filesystem. To start, convert the photo to base64 format, then feed the data to the Filesystemâs `writeFile` function. As youâll recall, we display each photo on the screen by setting each imageâs source path (`src` attribute) in `tab2.page.html` to the webviewPath property. So, set it then return the new Photo object.
+Weâll use the Capacitor [Filesystem API](https://capacitorjs.com/docs/apis/filesystem) to save the photo to the filesystem. To start, convert the photo to base64 format, then feed the data to the Filesystemâs `writeFile` function. As youâll recall, we display each photo on the screen by setting each imageâs source path (`src` attribute) in `tab2.page.html` to the webviewPath property. So, set it then return the new Photo object.
```tsx
private async savePicture(photo: Photo) {
diff --git a/versioned_docs/version-v5/angular/your-first-app/4-loading-photos.md b/versioned_docs/version-v5/angular/your-first-app/4-loading-photos.md
index 15aa6ec926a..1e6896557cf 100644
--- a/versioned_docs/version-v5/angular/your-first-app/4-loading-photos.md
+++ b/versioned_docs/version-v5/angular/your-first-app/4-loading-photos.md
@@ -6,9 +6,9 @@ sidebar_label: Loading Photos
Weâve implemented photo taking and saving to the filesystem. Thereâs one last piece of functionality missing: the photos are stored in the filesystem, but we need a way to save pointers to each file so that they can be displayed again in the photo gallery.
-Fortunately, this is easy: weâll leverage the Capacitor [Storage API](https://capacitor.ionicframework.com/docs/apis/storage) to store our array of Photos in a key-value store.
+Fortunately, this is easy: weâll leverage the Capacitor [Preferences API](https://capacitorjs.com/docs/apis/preferences) to store our array of Photos in a key-value store.
-## Storage API
+## Preferences API
Begin by defining a constant variable that will act as the key for the store:
@@ -21,10 +21,10 @@ export class PhotoService {
}
```
-Next, at the end of the `addNewToGallery` function, add a call to `Storage.set()` to save the Photos array. By adding it here, the Photos array is stored each time a new photo is taken. This way, it doesnât matter when the app user closes or switches to a different app - all photo data is saved.
+Next, at the end of the `addNewToGallery` function, add a call to `Preferences.set()` to save the Photos array. By adding it here, the Photos array is stored each time a new photo is taken. This way, it doesnât matter when the app user closes or switches to a different app - all photo data is saved.
```tsx
-Storage.set({
+Preferences.set({
key: this.PHOTO_STORAGE,
value: JSON.stringify(this.photos),
});
@@ -35,7 +35,7 @@ With the photo array data saved, create a function called `loadSaved()` that can
```tsx
public async loadSaved() {
// Retrieve cached photo array data
- const photoList = await Storage.get({ key: this.PHOTO_STORAGE });
+ const photoList = await Preferences.get({ key: this.PHOTO_STORAGE });
this.photos = JSON.parse(photoList.value) || [];
// more to come...
diff --git a/versioned_docs/version-v5/angular/your-first-app/5-adding-mobile.md b/versioned_docs/version-v5/angular/your-first-app/5-adding-mobile.md
index 913d4d582e6..72ef3429132 100644
--- a/versioned_docs/version-v5/angular/your-first-app/5-adding-mobile.md
+++ b/versioned_docs/version-v5/angular/your-first-app/5-adding-mobile.md
@@ -93,7 +93,7 @@ Next, head back over to the `loadSaved()` function we implemented for the web ea
```tsx
public async loadSaved() {
// Retrieve cached photo array data
- const photoList = await Storage.get({ key: this.PHOTO_STORAGE });
+ const photoList = await Preferences.get({ key: this.PHOTO_STORAGE });
this.photos = JSON.parse(photoList.value) || [];
// Easiest way to detect when running on the web:
diff --git a/versioned_docs/version-v5/angular/your-first-app/6-deploying-mobile.md b/versioned_docs/version-v5/angular/your-first-app/6-deploying-mobile.md
index 0897d43b8e4..790e83ef828 100644
--- a/versioned_docs/version-v5/angular/your-first-app/6-deploying-mobile.md
+++ b/versioned_docs/version-v5/angular/your-first-app/6-deploying-mobile.md
@@ -8,7 +8,7 @@ Since we added Capacitor to our project when it was first created, thereâs onl
## Capacitor Setup
-Capacitor is Ionicâs official app runtime that makes it easy to deploy web apps to native platforms like iOS, Android, and more. If youâve used Cordova in the past, consider reading more about the differences [here](https://capacitor.ionicframework.com/docs/cordova#differences-between-capacitor-and-cordova).
+Capacitor is Ionicâs official app runtime that makes it easy to deploy web apps to native platforms like iOS, Android, and more. If youâve used Cordova in the past, consider reading more about the differences [here](https://capacitorjs.com/docs/cordova#differences-between-capacitor-and-cordova).
If youâre still running `ionic serve` in the terminal, cancel it. Complete a fresh build of your Ionic project, fixing any errors that it reports:
@@ -51,7 +51,7 @@ First, run the Capacitor `open` command, which opens the native iOS project in X
ionic cap open ios
```
-In order for some native plugins to work, user permissions must be configured. In our photo gallery app, this includes the Camera plugin: iOS displays a modal dialog automatically after the first time that `Camera.getPhoto()` is called, prompting the user to allow the app to use the Camera. The permission that drives this is labeled âPrivacy - Camera Usage.â To set it, the `Info.plist` file must be modified ([more details here](https://capacitor.ionicframework.com/docs/ios/configuration)). To access it, click "Info," then expand "Custom iOS Target Properties."
+In order for some native plugins to work, user permissions must be configured. In our photo gallery app, this includes the Camera plugin: iOS displays a modal dialog automatically after the first time that `Camera.getPhoto()` is called, prompting the user to allow the app to use the Camera. The permission that drives this is labeled âPrivacy - Camera Usage.â To set it, the `Info.plist` file must be modified ([more details here](https://capacitorjs.com/docs/ios/configuration)). To access it, click "Info," then expand "Custom iOS Target Properties."
diff --git a/versioned_docs/version-v5/angular/your-first-app/7-live-reload.md b/versioned_docs/version-v5/angular/your-first-app/7-live-reload.md
index 52de878c339..fdce9ac6848 100644
--- a/versioned_docs/version-v5/angular/your-first-app/7-live-reload.md
+++ b/versioned_docs/version-v5/angular/your-first-app/7-live-reload.md
@@ -85,7 +85,7 @@ public async deletePicture(photo: UserPhoto, position: number) {
this.photos.splice(position, 1);
// Update photos array cache by overwriting the existing photo array
- Storage.set({
+ Preferences.set({
key: this.PHOTO_STORAGE,
value: JSON.stringify(this.photos)
});
@@ -101,12 +101,12 @@ public async deletePicture(photo: UserPhoto, position: number) {
}
```
-The selected photo is removed from the Photos array first. Then, we use the Capacitor Storage API to update the cached version of the Photos array. Finally, we delete the actual photo file itself using the Filesystem API.
+The selected photo is removed from the Photos array first. Then, we use the Capacitor Preferences API to update the cached version of the Photos array. Finally, we delete the actual photo file itself using the Filesystem API.
Save this file, then tap on a photo again and choose the âDeleteâ option. This time, the photo is deleted! Implemented much faster using Live Reload. ðª
## Whatâs Next?
-Congratulations! You built a complete cross-platform Photo Gallery app that runs on the web, iOS, and Android. There are many paths to follow from here. Try adding another [Ionic UI component](https://ionicframework.com/docs/components) to the app, or more [native functionality](https://capacitor.ionicframework.com/docs/apis). The skyâs the limit.
+Congratulations! You built a complete cross-platform Photo Gallery app that runs on the web, iOS, and Android. There are many paths to follow from here. Try adding another [Ionic UI component](https://ionicframework.com/docs/components) to the app, or more [native functionality](https://capacitorjs.com/docs/apis). The skyâs the limit.
Happy app building! ð
diff --git a/versioned_docs/version-v5/cli/commands/capacitor-build.md b/versioned_docs/version-v5/cli/commands/capacitor-build.md
index f8bea41238c..0ceb0c36de7 100644
--- a/versioned_docs/version-v5/cli/commands/capacitor-build.md
+++ b/versioned_docs/version-v5/cli/commands/capacitor-build.md
@@ -18,7 +18,7 @@ ionic capacitor build [options]
Once the web assets and configuration are copied into your native project, you can build your app using the native IDE. Unfortunately, programmatically building the native project is not yet supported.
-To configure your native project, see the common configuration [docs](https://capacitor.ionicframework.com/docs/basics/configuring-your-app) as well as low-level configuration for [iOS](https://capacitor.ionicframework.com/docs/ios/configuration) and [Android](https://capacitor.ionicframework.com/docs/android/configuration).
+To configure your native project, see the common configuration [docs](https://capacitorjs.com/docs/basics/configuring-your-app) as well as low-level configuration for [iOS](https://capacitorjs.com/docs/ios/configuration) and [Android](https://capacitorjs.com/docs/android/configuration).
## Examples
diff --git a/versioned_docs/version-v5/core-concepts/fundamentals.md b/versioned_docs/version-v5/core-concepts/fundamentals.md
index 3337d269ee9..23d8f728e8c 100644
--- a/versioned_docs/version-v5/core-concepts/fundamentals.md
+++ b/versioned_docs/version-v5/core-concepts/fundamentals.md
@@ -33,7 +33,7 @@ An amazing feature of apps built with web technologies (such as Ionic apps!) is
One of the most common use cases for Ionic is to build an app which can be downloaded from both the App Store and Play Store. Both iOS and Android software development kits (SDKs) provide [Web Views](webview.md) which render any Ionic app, while still allowing for full Native SDK access.
-Projects such as Capacitor and Cordova are commonly used to give Ionic apps this access to Native SDKs. This means developers can quickly build out an app using common web development tools, and still have access to native features such as the device's accelerometer, camera, GPS, and more.
+Projects such as Capacitor and Cordova are commonly used to give Ionic apps this access to Native SDKs. This means developers can quickly build out an app using common web development tools, and still have access to native features such as the device's accelerometer, camera, GPS, and more.
## Theming
diff --git a/versioned_docs/version-v5/core-concepts/what-are-progressive-web-apps.md b/versioned_docs/version-v5/core-concepts/what-are-progressive-web-apps.md
index f07ef30e815..599e5cee3dc 100644
--- a/versioned_docs/version-v5/core-concepts/what-are-progressive-web-apps.md
+++ b/versioned_docs/version-v5/core-concepts/what-are-progressive-web-apps.md
@@ -11,7 +11,7 @@ sidebar_label: What are PWAs?
A Progressive Web App (PWA) is a web app that uses modern web capabilities to deliver an app-like experience to users.
These apps meet certain requirements (see below), are deployed to servers, accessible through URLs, and indexed by search engines.
-This can work in conjunction with [Capacitor](https://capacitor.ionicframework.com) to provide a multiple deploy targets for all your users.
+This can work in conjunction with [Capacitor](https://capacitorjs.com) to provide a multiple deploy targets for all your users.
You can deploy your app as a PWA as well as Native app and take advantage of both channels.
Ionic allows you to ship your app to not only the app store, but also deploy to the mobile web as a PWA.
diff --git a/versioned_docs/version-v5/developing/keyboard.md b/versioned_docs/version-v5/developing/keyboard.md
index b6273a081df..2e36a26ffe3 100644
--- a/versioned_docs/version-v5/developing/keyboard.md
+++ b/versioned_docs/version-v5/developing/keyboard.md
@@ -166,7 +166,7 @@ By default the keyboard theme is determined by the OS. For example, if dark mode
When running an app in a mobile web browser or as a PWA there is no way to force the keyboard to appear with a certain theme.
-When running an app in Capacitor or Cordova, it is possible to force the keyboard to appear with a certain theme. For more information regarding this configuration, see the Capacitor Keyboard Documentation.
+When running an app in Capacitor or Cordova, it is possible to force the keyboard to appear with a certain theme. For more information regarding this configuration, see the Capacitor Keyboard Documentation.
## Hiding the Accessory Bar
@@ -174,7 +174,7 @@ When running any kind of web based application, iOS will show an accessory bar a
When running an app in a mobile web browser or as a PWA there is no way to hide the accessory bar.
-When running an app in Capacitor or Cordova, it is possible to hide the accessory bar. For more information regarding this configuration, see the Capacitor Keyboard Documentation.
+When running an app in Capacitor or Cordova, it is possible to hide the accessory bar. For more information regarding this configuration, see the Capacitor Keyboard Documentation.
## Keyboard Lifecycle Events
diff --git a/versioned_docs/version-v5/index.md b/versioned_docs/version-v5/index.md
index 64cc7f2dad3..7aa0afc0f01 100644
--- a/versioned_docs/version-v5/index.md
+++ b/versioned_docs/version-v5/index.md
@@ -1,12 +1,11 @@
---
sidebar_label: Overview
slug: /
-image: /img/meta/open-graph.png
title: Open-Source UI Toolkit to Create Your Own Mobile or Desktop Apps
description: Ionic Framework is an open-source UI toolkit to create your own mobile and desktop apps using web technologies with integrations for popular frameworks.
hide_table_of_contents: true
-demoUrl: https://ionic-docs-demo.herokuapp.com/
-demoSourceUrl: https://github.com/ionic-team/docs-demo
+demoUrl: https://ionic-docs-demo-v5.vercel.app/
+demoSourceUrl: https://github.com/ionic-team/docs-demo/tree/5.x
---
import DocsCard from '@components/global/DocsCard';
diff --git a/versioned_docs/version-v5/native-community.md b/versioned_docs/version-v5/native-community.md
index 744dcbe4190..cd8773d8bba 100644
--- a/versioned_docs/version-v5/native-community.md
+++ b/versioned_docs/version-v5/native-community.md
@@ -27,7 +27,7 @@ These docs are for apps built with Ionic Framework 4.0.0 and greater. For older
## Capacitor Support
-In addition to Cordova, Ionic Native also works with [Capacitor](https://capacitor.ionicframework.com), Ionic's official native runtime. Basic usage below. For complete details, [see the Capacitor documentation](https://capacitor.ionicframework.com/docs/cordova/using-cordova-plugins).
+In addition to Cordova, Ionic Native also works with [Capacitor](https://capacitorjs.com), Ionic's official native runtime. Basic usage below. For complete details, [see the Capacitor documentation](https://capacitorjs.com/docs/cordova/using-cordova-plugins).
## Usage
@@ -61,7 +61,7 @@ $ npm install @awesome-cordova-plugins/core
-For complete details, [see the Capacitor documentation](https://capacitor.ionicframework.com/docs/cordova/using-cordova-plugins).
+For complete details, [see the Capacitor documentation](https://capacitorjs.com/docs/cordova/using-cordova-plugins).
```shell
// Install Ionic Native TypeScript wrapper
diff --git a/versioned_docs/version-v5/react.md b/versioned_docs/version-v5/react.md
index c5881bfd31b..0b5bd7d7bdc 100644
--- a/versioned_docs/version-v5/react.md
+++ b/versioned_docs/version-v5/react.md
@@ -3,7 +3,6 @@ title: Ionic React
sidebar_label: Overview
hide_title: true
hide_table_of_contents: true
-image: /img/meta/open-graph.png
description: Ionic is the app platform for web developers. Build amazing mobile, web, and desktop apps all with one shared code base and open web standards
---
@@ -78,7 +77,7 @@ Compatible with React version 16.8 and above.
## More than mobile
-Deploy your Ionic React projects to native iOS, Android, Electron, and the web as a Progressive Web App, using [Capacitor](https://capacitor.ionicframework.com), a modern native runtime. All with one shared codebase.
+Deploy your Ionic React projects to native iOS, Android, Electron, and the web as a Progressive Web App, using [Capacitor](https://capacitorjs.com), a modern native runtime. All with one shared codebase.
Capacitor
-
+
Capacitor
{' '}
is an open source cross-platform app runtime that allows web-based apps to run natively on iOS, Android, Electron,
@@ -396,11 +396,9 @@
variables
- ,{' '}
-
+ ,
mixins
-
- , and{' '}
+ , and{' '}
loops
diff --git a/versioned_docs/version-v5/reference/migration.md b/versioned_docs/version-v5/reference/migration.md
index 9064bb7e142..bc7d50c7224 100644
--- a/versioned_docs/version-v5/reference/migration.md
+++ b/versioned_docs/version-v5/reference/migration.md
@@ -164,7 +164,7 @@ See the following `ionic.config.json` as an example:
## RxJS Changes
-Between V3 and V4, RxJS was updated to version 6. This changes many of the import paths of operators and core RxJS functions. Please see the RxJS Migration Guide for details.
+Between V3 and V4, RxJS was updated to version 6. This changes many of the import paths of operators and core RxJS functions. Please see the RxJS Migration Guide for details.
## Lifecycle Events
diff --git a/versioned_docs/version-v5/reference/support.md b/versioned_docs/version-v5/reference/support.md
index bed31737e56..9642fa6bf1e 100644
--- a/versioned_docs/version-v5/reference/support.md
+++ b/versioned_docs/version-v5/reference/support.md
@@ -62,18 +62,18 @@ The Ionic team has compiled a set of recommendations for using the Ionic Framewo
| V3 | `ionic-angular` 3.9.X | Use latest; special configuration may be required |
- Native Premier Plugins require `@ionic-enterprise/cordova` for installation [see here](https://ionic.io/docs/premier-plugins/setup#install-tooling)
-- For Capacitor projects, follow the [Capacitor installation guide for Cordova plugins](https://capacitor.ionicframework.com/docs/cordova/using-cordova-plugins)
+- For Capacitor projects, follow the [Capacitor installation guide for Cordova plugins](https://capacitorjs.com/docs/cordova/using-cordova-plugins)
- If you need to use an Enterprise plugin with an Ionic 3 project, please [contact us](https://ionic.zendesk.com/hc)
### Ionic Platform & Products (Cont.)
| Framework | Ionic Studio | Ionic Native Community Plugins\* |
| :----------: | :---------------------: | :------------------------------: |
-| V5 - Angular | `@ionic/angular` 5.X | @awesome-cordova-plugins 5.X |
-| V5 - React | Not currently supported | @awesome-cordova-plugins 5.X\* |
-| V4 - Angular | `@ionic/angular` 5.X | @awesome-cordova-plugins 5.X |
-| V4 - React | Not currently supported | @awesome-cordova-plugins 5.X\* |
-| V3 | Not currently supported | @awesome-cordova-plugins 4.X |
+| V5 - Angular | `@ionic/angular` 5.X | @awesome-cordova-plugins 5.X |
+| V5 - React | Not currently supported | @awesome-cordova-plugins 5.X\* |
+| V4 - Angular | `@ionic/angular` 5.X | @awesome-cordova-plugins 5.X |
+| V4 - React | Not currently supported | @awesome-cordova-plugins 5.X\* |
+| V3 | Not currently supported | @awesome-cordova-plugins 4.X |
- Wrappers (and their associated plugins) are community maintained.
- \*Cordova plugin support with Ionic Native and `@ionic/react` can be achieved using the [vanilla JavaScript implementation](../native.md#vanilla-javascript)
diff --git a/versioned_docs/version-v5/techniques/security.md b/versioned_docs/version-v5/techniques/security.md
index 42766c98ccd..256117ae702 100644
--- a/versioned_docs/version-v5/techniques/security.md
+++ b/versioned_docs/version-v5/techniques/security.md
@@ -11,7 +11,7 @@ import TabItem from '@theme/TabItem';
For components such as `ion-alert` developers can allow for custom or user-provided content. This content can be plain text or HTML and should be considered untrusted. As with any untrusted input, it is important to sanitize it before doing anything else with it. In particular, using things like `innerHTML` without sanitization provides an attack vector for bad actors to input malicious content and potentially launch a [Cross Site Scripting attack (XSS)](https://en.wikipedia.org/wiki/Cross-site_scripting).
-Ionic comes built in with basic sanitization methods for the components it provides, but for user-created components it is up to the developer to make sure all data is sanitized. Different frameworks have different solutions for sanitizing user input, so developers should familiarize themselves with what their specific framework offers.
+Ionic comes built in with a basic sanitization implementation for the components it provides. However, it is not a comprehensive solution. It is up to the developer to make sure all data that is passed is sanitized. Different frameworks have different solutions for sanitizing user input, so developers should familiarize themselves with what their specific framework offers.
For developers who are not using a framework, or for developers whose framework does not provide the sanitization methods they need, we recommend using [sanitize-html](https://www.npmjs.com/package/sanitize-html). This package provides a simple HTML sanitizer that allows the developer to specify the exact tags and attributes that they want to allow in their application.
diff --git a/versioned_docs/version-v5/utilities/gestures.md b/versioned_docs/version-v5/utilities/gestures.md
index 82248595ed7..80c96f088e1 100644
--- a/versioned_docs/version-v5/utilities/gestures.md
+++ b/versioned_docs/version-v5/utilities/gestures.md
@@ -173,6 +173,7 @@ const onMove = (detail) => {
ngOnInit() {
const gesture = this.gestureCtrl.create({
+ gestureName: 'my-gesture',
el: this.rectangle.nativeElement,
onMove: (detail) => { this.onMove(detail); }
})
@@ -186,7 +187,7 @@ private onMove(detail) {
const deltaX = detail.deltaX;
const velocityX = detail.velocityX;
- this.p.innerHTML = `
+ this.p.nativeElement.innerHTML = `
Type: ${type}
Current X: ${currentX}
Delta X: ${deltaX}
@@ -438,18 +439,6 @@ In the example above, we want to be able to detect double clicks on an element.
See our guide on implementing gesture animations: [Gesture Animations with Ionic Animations](animations.md#gesture-animations)
-## Browser Support
-
-| Browser/Platform | Supported Versions |
-| ---------------- | ------------------ |
-| **Chrome** | 22+ |
-| **Safari** | 9+ |
-| **Firefox** | 32+ |
-| **IE/Edge** | 11+ |
-| **Opera** | 30+ |
-| **iOS** | 9+ |
-| **Android** | 5+ |
-
## Types
| Name | Value |
diff --git a/versioned_docs/version-v5/vue/overview.md b/versioned_docs/version-v5/vue/overview.md
index 18eedbfa4b6..2bc291bf12a 100644
--- a/versioned_docs/version-v5/vue/overview.md
+++ b/versioned_docs/version-v5/vue/overview.md
@@ -19,9 +19,9 @@ Ionic Vue projects ship with the same tooling as regular Vue CLI projects. Meani
## Native Tooling
-[Capacitor](https://capacitor.ionicframework.com) is the official cross-platform app runtime used to make your `Ionic Vue` web app run natively on iOS, Android, and the web.
+[Capacitor](https://capacitorjs.com) is the official cross-platform app runtime used to make your `Ionic Vue` web app run natively on iOS, Android, and the web.
-While there are no known technical limitations to using `Ionic Vue` with [Cordova](https://cordova.apache.org/) plugins, Capacitor is officially recommended. There are no plans to support a Cordova integration for `Ionic Vue` in the [Ionic CLI tooling](../cli.md) at this time. For more details, please [see here](https://capacitor.ionicframework.com/docs/cordova).
+While there are no known technical limitations to using `Ionic Vue` with [Cordova](https://cordova.apache.org/) plugins, Capacitor is officially recommended. There are no plans to support a Cordova integration for `Ionic Vue` in the [Ionic CLI tooling](../cli.md) at this time. For more details, please [see here](https://capacitorjs.com/docs/cordova).
## From the Community
diff --git a/versioned_docs/version-v5/vue/quickstart.md b/versioned_docs/version-v5/vue/quickstart.md
index f61bde806d7..e0ac1a0dc61 100644
--- a/versioned_docs/version-v5/vue/quickstart.md
+++ b/versioned_docs/version-v5/vue/quickstart.md
@@ -758,7 +758,7 @@ The configuration above will prevent all files from being prefetched and, instea
## Build a Native App
-We now have the basics of an Ionic Vue app down, including some UI components and navigation. The great thing about Ionic Frameworkâs components is that they work anywhere, including iOS, Android, and PWAs. To deploy to mobile, desktop, and beyond, we use Ionicâs cross-platform app runtime [Capacitor](https://capacitor.ionicframework.com). It provides a consistent, web-focused set of APIs that enable an app to stay as close to web-standards as possible while accessing rich native device features on platforms that support them.
+We now have the basics of an Ionic Vue app down, including some UI components and navigation. The great thing about Ionic Frameworkâs components is that they work anywhere, including iOS, Android, and PWAs. To deploy to mobile, desktop, and beyond, we use Ionicâs cross-platform app runtime [Capacitor](https://capacitorjs.com). It provides a consistent, web-focused set of APIs that enable an app to stay as close to web-standards as possible while accessing rich native device features on platforms that support them.
Adding native functionality is easy. First, add Capacitor to your project:
@@ -781,9 +781,9 @@ ionic cap open ios
ionic cap open android
```
-Additional details can be found [here](https://capacitor.ionicframework.com/docs/getting-started/with-ionic).
+Additional details can be found [here](https://capacitorjs.com/docs/getting-started/with-ionic).
-Next, check out [all the APIs](https://capacitor.ionicframework.com/docs/apis) that are available. There is some great features, including the [Camera API](https://capacitor.ionicframework.com/docs/apis/camera). We can implement photo capture functionality in just a few lines of code:
+Next, check out [all the APIs](https://capacitorjs.com/docs/apis) that are available. There is some great features, including the [Camera API](https://capacitorjs.com/docs/apis/camera). We can implement photo capture functionality in just a few lines of code:
```html
@@ -840,6 +840,6 @@ Next, check out [all the APIs](https://capacitor.ionicframework.com/docs/apis) t
This guide covered the basics of creating an Ionic Vue app, adding some basic navigation, and introducing Capacitor as a way of building native apps. To dive deeper into building complete Ionic Framework apps with Vue and Capacitor, follow our [First App guide](your-first-app.md).
-For a more detailed look at Ionic Frameworksâs components, check out the [component API pages](https://ionicframework.com/docs/components). For more details on Vue, review the [Vue Docs](https://v3.vuejs.org/). To keep building native features, see the [Capacitor docs](https://capacitor.ionicframework.com/docs/).
+For a more detailed look at Ionic Frameworksâs components, check out the [component API pages](https://ionicframework.com/docs/components). For more details on Vue, review the [Vue Docs](https://v3.vuejs.org/). To keep building native features, see the [Capacitor docs](https://capacitorjs.com/docs/).
Happy app building! ð
diff --git a/versioned_docs/version-v5/vue/your-first-app.md b/versioned_docs/version-v5/vue/your-first-app.md
index ab54638476d..6995c66047c 100644
--- a/versioned_docs/version-v5/vue/your-first-app.md
+++ b/versioned_docs/version-v5/vue/your-first-app.md
@@ -24,8 +24,8 @@ We'll create a Photo Gallery app that offers the ability to take photos with you
Highlights include:
- One Vue-based codebase that runs on the web, iOS, and Android using Ionic Framework [UI components](https://ionicframework.com/docs/components).
-- Deployed as a native iOS and Android mobile app using [Capacitor](https://capacitor.ionicframework.com), Ionic's official native app runtime.
-- Photo Gallery functionality powered by the Capacitor [Camera](https://capacitor.ionicframework.com/docs/apis/camera), [Filesystem](https://capacitor.ionicframework.com/docs/apis/filesystem), and [Storage](https://capacitor.ionicframework.com/docs/apis/storage) APIs.
+- Deployed as a native iOS and Android mobile app using [Capacitor](https://capacitorjs.com), Ionic's official native app runtime.
+- Photo Gallery functionality powered by the Capacitor [Camera](https://capacitorjs.com/docs/apis/camera), [Filesystem](https://capacitorjs.com/docs/apis/filesystem), and [Preferences](https://capacitorjs.com/docs/apis/preferences) APIs.
Find the complete app code referenced in this guide [on GitHub](https://github.com/ionic-team/photo-gallery-capacitor-vue).
@@ -77,7 +77,7 @@ cd photo-gallery
Next we'll need to install the necessary Capacitor plugins to make the app's native functionality work:
```shell
-npm install @capacitor/camera @capacitor/storage @capacitor/filesystem
+npm install @capacitor/camera @capacitor/preferences @capacitor/filesystem
```
### PWA Elements
diff --git a/versioned_docs/version-v5/vue/your-first-app/2-taking-photos.md b/versioned_docs/version-v5/vue/your-first-app/2-taking-photos.md
index e0632873305..8fe97523339 100644
--- a/versioned_docs/version-v5/vue/your-first-app/2-taking-photos.md
+++ b/versioned_docs/version-v5/vue/your-first-app/2-taking-photos.md
@@ -4,7 +4,7 @@ sidebar_label: Taking Photos
# Taking Photos with the Camera
-Now for the fun part - adding the ability to take photos with the deviceâs camera using the Capacitor [Camera API](https://capacitor.ionicframework.com/docs/apis/camera). Weâll begin with building it for the web, then make some small tweaks to make it work on mobile (iOS and Android).
+Now for the fun part - adding the ability to take photos with the deviceâs camera using the Capacitor [Camera API](https://capacitorjs.com/docs/apis/camera). Weâll begin with building it for the web, then make some small tweaks to make it work on mobile (iOS and Android).
To do so, we will create a standalone composition function paired with Vue's Composition API to manage the photos for the gallery.
@@ -20,7 +20,7 @@ We will start by importing the various utilities we will use from Vue core and C
import { ref, onMounted, watch } from 'vue';
import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';
import { Filesystem, Directory } from '@capacitor/filesystem';
-import { Storage } from '@capacitor/storage';
+import { Preferences } from '@capacitor/preferences';
```
Next, create a function named usePhotoGallery:
diff --git a/versioned_docs/version-v5/vue/your-first-app/3-saving-photos.md b/versioned_docs/version-v5/vue/your-first-app/3-saving-photos.md
index 6601a7aa3cb..59b165ca9ab 100644
--- a/versioned_docs/version-v5/vue/your-first-app/3-saving-photos.md
+++ b/versioned_docs/version-v5/vue/your-first-app/3-saving-photos.md
@@ -26,7 +26,7 @@ const convertBlobToBase64 = (blob: Blob) =>
Next, add a function to save the photo to the filesystem. We pass in the `photo` object, which represents the newly captured device photo, as well as the fileName, which will provide a path for the file to be stored to.
-Next we use the Capacitor [Filesystem API](https://capacitor.ionicframework.com/docs/apis/filesystem) to save the photo to the filesystem. We start by converting the photo to base64 format, then feed the data to the Filesystemâs `writeFile` function:
+Next we use the Capacitor [Filesystem API](https://capacitorjs.com/docs/apis/filesystem) to save the photo to the filesystem. We start by converting the photo to base64 format, then feed the data to the Filesystemâs `writeFile` function:
```tsx
const savePicture = async (photo: Photo, fileName: string): Promise => {
diff --git a/versioned_docs/version-v5/vue/your-first-app/4-loading-photos.md b/versioned_docs/version-v5/vue/your-first-app/4-loading-photos.md
index 4a2df79fa5a..e5892ed65db 100644
--- a/versioned_docs/version-v5/vue/your-first-app/4-loading-photos.md
+++ b/versioned_docs/version-v5/vue/your-first-app/4-loading-photos.md
@@ -6,9 +6,9 @@ sidebar_label: Loading Photos
Weâve implemented photo taking and saving to the filesystem. Thereâs one last piece of functionality missing: the photos are stored in the filesystem, but we need a way to save pointers to each file so that they can be displayed again in the photo gallery.
-Fortunately, this is easy: weâll leverage the Capacitor [Storage API](https://capacitor.ionicframework.com/docs/apis/storage) to store our array of Photos in a key-value store.
+Fortunately, this is easy: weâll leverage the Capacitor [Preferences API](https://capacitorjs.com/docs/apis/preferences) to store our array of Photos in a key-value store.
-## Storage API
+## Preferences API
Begin by defining a constant variable that will act as the key for the store at the top of the `usePhotoGallery` function in `src/composables/usePhotoGallery.ts`:
@@ -16,11 +16,11 @@ Begin by defining a constant variable that will act as the key for the store at
const PHOTO_STORAGE = 'photos';
```
-Next, add a `cachePhotos` function that saves the Photos array as JSON to file storage:
+Next, add a `cachePhotos` function that saves the Photos array as JSON to preferences:
```tsx
const cachePhotos = () => {
- Storage.set({
+ Preferences.set({
key: PHOTO_STORAGE,
value: JSON.stringify(photos.value),
});
@@ -33,14 +33,14 @@ Next, use the Vue [watch function](https://v3.vuejs.org/guide/composition-api-in
watch(photos, cachePhotos);
```
-Now that the photo array data is saved, create a function to retrieve the data when Tab2 loads. First, retrieve photo data from Storage, then each photo's data into base64 format:
+Now that the photo array data is saved, create a function to retrieve the data when Tab2 loads. First, retrieve photo data from Preferences, then each photo's data into base64 format:
```tsx
const loadSaved = async () => {
- const photoList = await Storage.get({ key: PHOTO_STORAGE });
- const photosInStorage = photoList.value ? JSON.parse(photoList.value) : [];
+ const photoList = await Preferences.get({ key: PHOTO_STORAGE });
+ const photosInPreferences = photoList.value ? JSON.parse(photoList.value) : [];
- for (const photo of photosInStorage) {
+ for (const photo of photosInPreferences) {
const file = await Filesystem.readFile({
path: photo.filepath,
directory: Directory.Data,
@@ -48,7 +48,7 @@ const loadSaved = async () => {
photo.webviewPath = `data:image/jpeg;base64,${file.data}`;
}
- photos.value = photosInStorage;
+ photos.value = photosInPreferences;
};
```
diff --git a/versioned_docs/version-v5/vue/your-first-app/5-adding-mobile.md b/versioned_docs/version-v5/vue/your-first-app/5-adding-mobile.md
index 39a37a424e7..728e1ffb83c 100644
--- a/versioned_docs/version-v5/vue/your-first-app/5-adding-mobile.md
+++ b/versioned_docs/version-v5/vue/your-first-app/5-adding-mobile.md
@@ -57,12 +57,12 @@ Next, add a new bit of logic in the `loadSaved` function. On mobile, we can dire
```tsx
const loadSaved = async () => {
- const photoList = await Storage.get({ key: PHOTO_STORAGE });
- const photosInStorage = photoList.value ? JSON.parse(photoList.value) : [];
+ const photoList = await Preferences.get({ key: PHOTO_STORAGE });
+ const photosInPreferences = photoList.value ? JSON.parse(photoList.value) : [];
// If running on the web...
if (!isPlatform('hybrid')) {
- for (const photo of photosInStorage) {
+ for (const photo of photosInPreferences) {
const file = await Filesystem.readFile({
path: photo.filepath,
directory: Directory.Data,
@@ -72,7 +72,7 @@ const loadSaved = async () => {
}
}
- photos.value = photosInStorage;
+ photos.value = photosInPreferences;
};
```
diff --git a/versioned_docs/version-v5/vue/your-first-app/6-deploying-mobile.md b/versioned_docs/version-v5/vue/your-first-app/6-deploying-mobile.md
index 85cb8dfefa6..eb81d5c5e27 100644
--- a/versioned_docs/version-v5/vue/your-first-app/6-deploying-mobile.md
+++ b/versioned_docs/version-v5/vue/your-first-app/6-deploying-mobile.md
@@ -12,7 +12,7 @@ Remember, you can find the complete source code for this app [here](https://gith
## Capacitor Setup
-Capacitor is Ionicâs official app runtime that makes it easy to deploy web apps to native platforms like iOS, Android, and more. If youâve used Cordova in the past, consider reading more about the differences [here](https://capacitor.ionicframework.com/docs/cordova#differences-between-capacitor-and-cordova).
+Capacitor is Ionicâs official app runtime that makes it easy to deploy web apps to native platforms like iOS, Android, and more. If youâve used Cordova in the past, consider reading more about the differences [here](https://capacitorjs.com/docs/cordova#differences-between-capacitor-and-cordova).
If youâre still running `ionic serve` in the terminal, cancel it. Complete a fresh build of the Ionic project, fixing any errors that it reports:
@@ -55,7 +55,7 @@ First, run the Capacitor `open` command, which opens the native iOS project in X
ionic cap open ios
```
-In order for some native plugins to work, user permissions must be configured. In our photo gallery app, this includes the Camera plugin: iOS displays a modal dialog automatically after the first time that `Camera.getPhoto()` is called, prompting the user to allow the app to use the Camera. The permission that drives this is labeled "Privacy - Camera Usage." To set it, the `Info.plist` file must be modified ([more details here](https://capacitor.ionicframework.com/docs/ios/configuration)). To access it, click "Info," then expand "Custom iOS Target Properties."
+In order for some native plugins to work, user permissions must be configured. In our photo gallery app, this includes the Camera plugin: iOS displays a modal dialog automatically after the first time that `Camera.getPhoto()` is called, prompting the user to allow the app to use the Camera. The permission that drives this is labeled "Privacy - Camera Usage." To set it, the `Info.plist` file must be modified ([more details here](https://capacitorjs.com/docs/ios/configuration)). To access it, click "Info," then expand "Custom iOS Target Properties."
diff --git a/versioned_docs/version-v5/vue/your-first-app/7-live-reload.md b/versioned_docs/version-v5/vue/your-first-app/7-live-reload.md
index 0d64028f047..126f166afca 100644
--- a/versioned_docs/version-v5/vue/your-first-app/7-live-reload.md
+++ b/versioned_docs/version-v5/vue/your-first-app/7-live-reload.md
@@ -125,7 +125,7 @@ Remember that removing the photo from the `photos` array triggers the `cachePhot
```tsx
const cachePhotos = () => {
- Storage.set({
+ Preferences.set({
key: PHOTO_STORAGE,
value: JSON.stringify(photos.value),
});
@@ -150,6 +150,6 @@ Save this file, then tap on a photo again and choose the "Delete" option. This t
Congratulations! You created a complete cross-platform Photo Gallery app that runs on the web, iOS, and Android.
-There are many paths to follow from here. Try adding another [Ionic UI component](https://ionicframework.com/docs/components) to the app, or more [native functionality](https://capacitor.ionicframework.com/docs/apis). The skyâs the limit.
+There are many paths to follow from here. Try adding another [Ionic UI component](https://ionicframework.com/docs/components) to the app, or more [native functionality](https://capacitorjs.com/docs/apis). The skyâs the limit.
Happy app building! ð
diff --git a/versioned_docs/version-v6/README.md b/versioned_docs/version-v6/README.md
new file mode 100644
index 00000000000..2da29748116
--- /dev/null
+++ b/versioned_docs/version-v6/README.md
@@ -0,0 +1,17 @@
+# Docs folder
+
+The `/docs` folder houses all markdown files. The page structure loosely maps to the routing on the site since paths can be changed in the frontmatter.
+
+## Versioning
+
+This folder can also contain components, assets, and whatever else is meant to be versioned when the docusaurus versioning script is run. For example, if there is a page component that is only relevant to the `layout` section in the current version of Ionic, it could be added to a `_components/` folder in `docs/layout/`. When the versioning script is run, the component will be copied to `versioned_docs/verion-{X}/layout/_components/` and there will now be a separate component in `docs/layout/_components/` that can be deleted or updated to the latest version. The same concept applies to images and other files.
+
+If components are meant to be shared across versions, they can be put in `src/components/`. If images and other served files are meant to be shared across versions they can be put in `static/`.
+
+## Auto Generated Files
+
+All markdown files in these directories are generated from [scripts](/scripts):
+
+- `docs/api/`
+- `docs/cli/commands/`
+- `docs/native/`
diff --git a/versioned_docs/version-v6/angular/config.md b/versioned_docs/version-v6/angular/config.md
new file mode 100644
index 00000000000..01844cc067c
--- /dev/null
+++ b/versioned_docs/version-v6/angular/config.md
@@ -0,0 +1,258 @@
+---
+title: Config
+---
+
+
+ Config | Ionic Config to Change Component Properties Globally
+
+
+
+Ionic Config provides a way to change the properties of components globally across an app. It can set the app mode, tab button layout, animations, and more.
+
+## Global Config
+
+To override the default Ionic configurations for your app, provide your own custom config to `IonicModule.forRoot(...)`. The available config keys can be found in the [`IonicConfig`](#ionicconfig) interface.
+
+For example, to disable ripple effects and default the mode to Material Design:
+
+```tsx title="app.module.ts"
+import { IonicModule } from '@ionic/angular';
+
+@NgModule({
+ ...
+ imports: [
+ IonicModule.forRoot({
+ rippleEffect: false,
+ mode: 'md'
+ })
+ ],
+ ...
+})
+```
+
+## Per-Component Config
+
+Ionic Config is not reactive. Updating the config's value after the component has rendered will result in the previous value. It is recommended to use a component's properties instead of updating the config, when you require reactive values.
+
+**Not recommended**
+
+```ts
+import { IonicModule } from '@ionic/angular';
+
+@NgModule({
+ ...
+ imports: [
+ IonicModule.forRoot({
+ // Not recommended when your app requires reactive values
+ backButtonText: 'Go Back'
+ })
+ ],
+ ...
+})
+```
+
+**Recommended**
+
+```html
+
+```
+
+```ts
+@Component(...)
+class MyComponent {
+ backButtonText = this.config.get('backButtonText');
+
+ constructor(private config: Config) { }
+
+ localeChanged(locale: string) {
+ if (locale === 'es_ES') {
+ this.backButtonText = 'Devolver';
+ }
+ }
+
+}
+```
+
+## Per-Platform Config
+
+Ionic Config can also be set on a per-platform basis. For example, this allows you to disable animations if the app is being run in a browser on a potentially slower device. Developers can take advantage of the Platform utilities to accomplish this.
+
+Since the config is set at runtime, you will not have access to the Platform Dependency Injection. Instead, you can use the underlying functions that the provider uses directly.
+
+In the following example, we are disabling all animations in our Ionic app only if the app is running in a mobile web browser.
+The `isPlatform()` call returns `true` or `false` based upon the platform that is passed in. See the [Platform Documentation](platform.md#platforms) for a list of possible values.
+
+```tsx
+import { isPlatform, IonicModule } from '@ionic/angular';
+
+@NgModule({
+ ...
+ imports: [
+ IonicModule.forRoot({
+ animated: !isPlatform('mobileweb')
+ })
+ ],
+ ...
+})
+```
+
+**Per-platform config with fallback for unmatched platforms:**
+
+```tsx
+import { isPlatform, IonicModule } from '@ionic/angular';
+
+const getConfig = () => {
+ if (isPlatform('hybrid')) {
+ return {
+ backButtonText: 'Previous',
+ tabButtonLayout: 'label-hide'
+ }
+ }
+
+ return {
+ menuIcon: 'ellipsis-vertical'
+ }
+}
+@NgModule({
+ ...
+ imports: [
+ IonicModule.forRoot(getConfig())
+ ],
+ ...
+})
+```
+
+**Per-platform config overrides:**
+
+```tsx
+import { isPlatform, IonicModule } from '@ionic/angular';
+
+const getConfig = () => {
+ let config = {
+ animated: false
+ };
+
+ if (isPlatform('iphone')) {
+ config = {
+ ...config,
+ backButtonText: 'Previous'
+ }
+ }
+
+ return config;
+}
+@NgModule({
+ ...
+ imports: [
+ IonicModule.forRoot(getConfig())
+ ],
+ ...
+})
+```
+
+## Methods
+
+### get
+
+| | |
+| --------------- | -------------------------------------------------------------------------------- |
+| **Description** | Returns a config value as an `any`. Returns `null` if the config is not defined. |
+| **Signature** | `get(key: string, fallback?: any) => any` |
+
+#### Examples
+
+```ts
+import { Config } from '@ionic/angular';
+
+@Component(...)
+class AppComponent {
+ constructor(config: Config) {
+ const mode = config.get('mode');
+ }
+}
+```
+
+### getBoolean
+
+| | |
+| --------------- | ------------------------------------------------------------------------------------ |
+| **Description** | Returns a config value as a `boolean`. Returns `false` if the config is not defined. |
+| **Signature** | `getBoolean(key: string, fallback?: boolean) => boolean` |
+
+#### Examples
+
+```ts
+import { Config } from '@ionic/angular';
+
+@Component(...)
+class AppComponent {
+ constructor(config: Config) {
+ const swipeBackEnabled = config.getBoolean('swipeBackEnabled');
+ }
+}
+```
+
+### getNumber
+
+| | |
+| --------------- | ------------------------------------------------------------------------------- |
+| **Description** | Returns a config value as a `number`. Returns `0` if the config is not defined. |
+| **Signature** | `getNumber(key: string, fallback?: number) => number` |
+
+#### Examples
+
+```ts
+import { Config } from '@ionic/angular';
+
+@Component(...)
+class AppComponent {
+ constructor(config: Config) {
+ const keyboardHeight = config.getNumber('keyboardHeight');
+ }
+}
+```
+
+## Interfaces
+
+### IonicConfig
+
+Below are the config options that Ionic uses.
+
+| Config | Type | Description |
+| ------------------------ | --------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
+| `actionSheetEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-action-sheet`, overriding the default "animation". |
+| `actionSheetLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-action-sheet`, overriding the default "animation". |
+| `alertEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-alert`, overriding the default "animation". |
+| `alertLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-alert`, overriding the default "animation". |
+| `animated` | `boolean` | If `true`, Ionic will enable all animations and transitions across the app. |
+| `backButtonDefaultHref` | `string` | Overrides the default value for the `defaultHref` property in all `` components. |
+| `backButtonIcon` | `string` | Overrides the default icon in all `` components. |
+| `backButtonText` | `string` | Overrides the default text in all `` components. |
+| `hardwareBackButton` | `boolean` | If `true`, Ionic will respond to the hardware back button in an Android device. |
+| `infiniteLoadingSpinner` | `SpinnerTypes` | Overrides the default spinner type in all `` components. |
+| `loadingEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-loading`, overriding the default "animation". |
+| `loadingLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-loading`, overriding the default "animation". |
+| `loadingSpinner` | `SpinnerTypes` | Overrides the default spinner for all `ion-loading` overlays. |
+| `menuIcon` | `string` | Overrides the default icon in all `` components. |
+| `menuType` | `string` | Overrides the default menu type for all `` components. |
+| `modalEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-modal`, overriding the default "animation". |
+| `modalLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-modal`, overriding the default "animation". |
+| `mode` | `Mode` | The mode determines which platform styles to use for the whole application. |
+| `navAnimation` | `AnimationBuilder` | Overrides the default "animation" of all `ion-nav` and `ion-router-outlet` across the whole application. |
+| `pickerEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-picker`, overriding the default "animation". |
+| `pickerLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-picker`, overriding the default "animation". |
+| `platform` | [`PlatformConfig`](/docs/angular/platform#customizing-platform-detection-methods) | Overrides the default platform detection methods. |
+| `popoverEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-popover`, overriding the default "animation". |
+| `popoverLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-popover`, overriding the default "animation". |
+| `refreshingIcon` | `string` | Overrides the default icon in all `` components. |
+| `refreshingSpinner` | `SpinnerTypes` | Overrides the default spinner type in all `` components. |
+| `sanitizerEnabled` | `boolean` | If `true`, Ionic will enable a basic DOM sanitizer on component properties that accept custom HTML. |
+| `spinner` | `SpinnerTypes` | Overrides the default spinner in all `` components. |
+| `statusTap` | `boolean` | If `true`, clicking or tapping the status bar will cause the content to scroll to the top. |
+| `swipeBackEnabled` | `boolean` | If `true`, Ionic will enable the "swipe-to-go-back" gesture across the application. |
+| `tabButtonLayout` | `TabButtonLayout` | Overrides the default "layout" of all `ion-bar-button` across the whole application. |
+| `toastEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-toast`, overriding the default "animation". |
+| `toastLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-toast`, overriding the default "animation". |
diff --git a/versioned_docs/version-v6/angular/lifecycle.md b/versioned_docs/version-v6/angular/lifecycle.md
new file mode 100644
index 00000000000..09206bdf137
--- /dev/null
+++ b/versioned_docs/version-v6/angular/lifecycle.md
@@ -0,0 +1,101 @@
+---
+title: Ionic Page Life Cycle
+sidebar_label: Lifecycle
+---
+
+
+ Angular Page Component Life Cycle - App Events Documentation
+
+
+
+This guide covers how the page life cycle works in an app built with Ionic and Angular.
+
+
+
+## Angular Life Cycle Events
+
+Ionic embraces the life cycle events provided by Angular. The two Angular events you will find using the most are:
+
+| Event Name | Description |
+| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `ngOnInit` | Fired once during component initialization. This event can be used to initialize local members and make calls into services that only need to be done once. |
+| `ngOnDestroy` | Fired right before Angular destroys the view. Useful for cleanup like unsubscribing from observables. |
+
+For more info on the Angular Component Life Cycle events, visit their [component lifecycle docs](https://angular.io/guide/lifecycle-hooks).
+
+:::note
+Components that use `ion-nav` or `ion-router-outlet` should not use the `OnPush` change detection strategy. Doing so will prevent lifecycle hooks such as `ngOnInit` from firing. Additionally, asynchronous state changes may not render properly.
+:::
+
+## Ionic Page Events
+
+In addition to the Angular life cycle events, Ionic Angular provides a few additional events that you can use:
+
+| Event Name | Description |
+| ------------------ | ------------------------------------------------------------------ |
+| `ionViewWillEnter` | Fired when the component routing to is about to animate into view. |
+| `ionViewDidEnter` | Fired when the component routing to has finished animating. |
+| `ionViewWillLeave` | Fired when the component routing from is about to animate. |
+| `ionViewDidLeave` | Fired when the component routing to has finished animating. |
+
+The difference between `ionViewWillEnter` and `ionViewDidEnter` is when they fire. The former fires right after `ngOnInit` but before the page transition begins, and the latter directly after the transition ends.
+
+For `ionViewWillLeave` and `ionViewDidLeave`, `ionViewWillLeave` gets called directly before the transition away from the current page begins, and `ionViewDidLeave` does not get called until after the new page gets successfully transitioned into (after the new pages `ionViewDidEnter` fires).
+
+
+
+## How Ionic Handles the Life of a Page
+
+Ionic has its router outlet, called ``. This outlet extends Angular's `` with some additional functionality to enable better experiences for mobile devices.
+
+When an app is wrapped in ``, Ionic treats navigation a bit differently. When you navigate to a new page, Ionic will keep the old page in the existing DOM, but hide it from your view and transition the new page. The reason we do this is two-fold:
+
+1. We can maintain the state of the old page (data on the screen, scroll position, etc..)
+2. We can provide a smoother transition back to the page since it is already there and doesn't need to be recreated.
+
+Pages are only removed from the DOM when they are "popped", for instance, by pressing the back button in the UI or the browsers back button.
+
+Because of this special handling, the `ngOnInit` and `ngOnDestroy` methods might not fire when you would usually think they should.
+
+`ngOnInit` will only fire each time the page is freshly created, but not when navigated back to the page. For instance, navigating between each page in a tabs interface will only call each page's `ngOnInit` method once, but not on subsequent visits. `ngOnDestroy` will only fire when a page "popped".
+
+## Route Guards
+
+In Ionic 3, there were a couple of additional life cycle methods that were useful to control when a page could be entered (`ionViewCanEnter`) and left (`ionViewCanLeave`). These could be used to protect pages from unauthorized users and to keep a user on a page when you don't want them to leave (like during a form fill).
+
+These methods were removed in Ionic 4 in favor of using Angular's Route Guards.
+
+A route guard helps determine if a particular action can be taken against a route. They are classes that implement a certain interface. The `CanActivate` and `CanDeactivate` interfaces can be used to implement the same type of logic that the removed events `ionViewCanEnter` and `ionViewCanLeave` did.
+
+```tsx
+@Injectable()
+export class AuthGuard implements CanActivate {
+ constructor(private authService: AuthService) {}
+
+ canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
+ return this.authService.isAuthenticated();
+ }
+}
+```
+
+To use this guard, add it to the appropriate param in the route definition:
+
+```tsx
+{ path: 'settings', canActivate: [AuthGuard], loadChildren: '...', }
+```
+
+For more info on how to use route guards, go to Angular's [router documentation](https://angular.io/guide/router).
+
+## Guidance for Each Life Cycle Method
+
+Below are some tips on use cases for each of the life cycle events.
+
+- `ngOnInit` - Initialize your component and load data from services that don't need refreshing on each subsequent visit.
+- `ionViewWillEnter` - Since `ionViewWillEnter` is called every time the view is navigated to (regardless if initialized or not), it's a good method to load data from services. However, if your data comes back during the animation, it can start lots of DOM manipulation, which can cause some janky animations.
+- `ionViewDidEnter` - If you see performance problems from using `ionViewWillEnter` when loading data, you can do your data calls in `ionViewDidEnter` instead. This event won't fire until after the page is visible by the user, however, so you might want to use either a loading indicator or a skeleton screen, so content doesn't flash in un-naturally after the transition is complete.
+- `ionViewWillLeave` - Can be used for cleanup, like unsubscribing from observables. Since `ngOnDestroy` might not fire when you navigate from the current page, put your cleanup code here if you don't want it active while the screen is not in view.
+- `ionViewDidLeave` - When this event fires, you know the new page has fully transitioned in, so any logic you might not normally do when the view is visible can go here.
+- `ngOnDestroy` - Cleanup logic for your pages that you don't want to clean up in `ionViewWillLeave`.
diff --git a/versioned_docs/version-v6/angular/navigation.md b/versioned_docs/version-v6/angular/navigation.md
new file mode 100644
index 00000000000..0c249d9d055
--- /dev/null
+++ b/versioned_docs/version-v6/angular/navigation.md
@@ -0,0 +1,453 @@
+---
+title: Angular Navigation
+sidebar_label: Navigation/Routing
+---
+
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+
+ Angular Navigation: How Routing & Redirects Work in Angular Apps
+
+
+
+This guide covers how routing works in an app built with Ionic and Angular.
+
+The Angular Router is one of the most important libraries in an Angular application. Without it, apps would be single view/single context apps or would not be able to maintain their navigation state on browser reloads. With Angular Router, we can create rich apps that are linkable and have rich animations (when paired with Ionic of course). Let's look at the basics of the Angular Router and how we can configure it for Ionic apps.
+
+## A simple Route
+
+For most apps, having some sort of route is often required. The most basic configuration looks a bit like this:
+
+```tsx
+
+import { RouterModule } from '@angular/router';
+
+@NgModule({
+ imports: [
+ ...
+ RouterModule.forRoot([
+ { path: '', component: LoginComponent },
+ { path: 'detail', component: DetailComponent },
+ ])
+ ],
+})
+```
+
+The simplest breakdown for what we have here is a path/component lookup. When our app loads, the router kicks things off by reading the URL the user is trying to load. In our sample, our route looks for `''`, which is essentially our index route. So for this, we load the `LoginComponent`. Fairly straight forward. This pattern of matching paths with a component continues for every entry we have in the router config. But what if we wanted to load a different path on our initial load?
+
+## Handling Redirects
+
+For this we can use router redirects. Redirects work the same way that a typical route object does, but just includes a few different keys.
+
+```tsx
+[
+ { path: '', redirectTo: 'login', pathMatch: 'full' },
+ { path: 'login', component: LoginComponent },
+ { path: 'detail', component: DetailComponent },
+];
+```
+
+In our redirect, we look for the index path of our app. Then if we load that, we redirect to the `login` route. The last key of `pathMatch` is required to tell the router how it should look up the path.
+
+Since we use `full`, we're telling the router that we should compare the full path, even if ends up being something like `/route1/route2/route3`. Meaning that if we have:
+
+```tsx
+{ path: '/route1/route2/route3', redirectTo: 'login', pathMatch: 'full' },
+{ path: 'login', component: LoginComponent },
+```
+
+And load `/route1/route2/route3` we'll redirect. But if we loaded `/route1/route2/route4`, we won't redirect, as the paths don't match fully.
+
+Alternatively, if we used:
+
+```tsx
+{ path: '/route1/route2', redirectTo: 'login', pathMatch: 'prefix' },
+{ path: 'login', component: LoginComponent },
+```
+
+Then load both `/route1/route2/route3` and `/route1/route2/route4`, we'll be redirected for both routes. This is because `pathMatch: 'prefix'` will match only part of the path.
+
+## Navigating to different routes
+
+Talking about routes is good and all, but how does one actually navigate to said routes? For this, we can use the `routerLink` directive. Let's go back and take our simple router setup from earlier:
+
+```ts
+RouterModule.forRoot([
+ { path: '', component: LoginComponent },
+ { path: 'detail', component: DetailComponent },
+]);
+```
+
+Now from the `LoginComponent`, we can use the following HTML to navigate to the detail route.
+
+```html
+
+
+ Login
+
+
+
+
+ Go to detail
+
+```
+
+The important part here is the `ion-button` and `routerLink` directive. RouterLink works on a similar idea as typical `href`s, but instead of building out the URL as a string, it can be built as an array, which can provide more complicated paths.
+
+We also can programmatically navigate in our app by using the router API.
+
+```tsx
+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+
+@Component({
+ ...
+})
+export class LoginComponent {
+
+ constructor(private router: Router){}
+
+ navigate(){
+ this.router.navigate(['/detail'])
+ }
+}
+```
+
+Both options provide the same navigation mechanism, just fitting different use cases.
+
+:::note
+A note on navigation with relative URLs: Currently, to support multiple navigation stacks, relative URLs are something not supported
+:::
+
+### Navigating using LocationStrategy.historyGo
+
+Angular Router has a [LocationStrategy.historyGo](https://angular.io/api/common/LocationStrategy#historyGo) method that allows developers to move forward or backward through the application history. Let's take a look at an example.
+
+Say you have the following application history:
+
+`/pageA` --> `/pageB` --> `/pageC`
+
+If you were to call `LocationStrategy.historyGo(-2)` on `/pageC`, you would be brought back to `/pageA`. If you then called `LocationStrategy.historyGo(2)`, you would be brought to `/pageC`.
+
+An key characteristic of `LocationStrategy.historyGo()` is that it expects your application history to be linear. This means that `LocationStrategy.historyGo()` should not be used in applications that make use of non-linear routing. See [Linear Routing versus Non-Linear Routing](#linear-routing-versus-non-linear-routing) for more information.
+
+## Lazy loading routes
+
+Now the current way our routes are setup makes it so they are included in the same chunk as the root app.module, which is not ideal. Instead, the router has a setup that allows the components to be isolated to their own chunks.
+
+```tsx
+
+import { RouterModule } from '@angular/router';
+
+@NgModule({
+ imports: [
+ ...
+ RouterModule.forRoot([
+ { path: '', redirectTo: 'login', pathMatch: 'full' },
+ { path: 'login', loadChildren: () => import('./login/login.module').then(m => m.LoginModule) },
+ { path: 'detail', loadChildren: () => import('./detail/detail.module').then(m => m.DetailModule) }
+ ])
+ ],
+})
+```
+
+While similar, the `loadChildren` property is a way to reference a module by using native import instead of a component directly. In order to do this though, we need to create a module for each of the components.
+
+```tsx
+...
+import { RouterModule } from '@angular/router';
+import { LoginComponent } from './login.component';
+
+@NgModule({
+ imports: [
+ ...
+ RouterModule.forChild([
+ { path: '', component: LoginComponent },
+ ])
+ ],
+})
+```
+
+:::note
+We're excluding some additional content and only including the necessary parts.
+:::
+
+Here, we have a typical Angular Module setup, along with a RouterModule import, but we're now using `forChild` and declaring the component in that setup. With this setup, when we run our build, we will produce separate chunks for both the app component, the login component, and the detail component.
+
+## Live Example
+
+If you would prefer to get hands on with the concepts and code described above, please checkout our [live example](https://stackblitz.com/edit/ionic-angular-routing?file=src/app/app-routing.module.ts) of the topics above on StackBlitz.
+
+## Linear Routing versus Non-Linear Routing
+
+### Linear Routing
+
+If you have built a web app that uses routing, you likely have used linear routing before. Linear routing means that you can move forward or backward through the application history by pushing and popping pages.
+
+The following is an example of linear routing in a mobile app:
+
+
+
+The application history in this example has the following path:
+
+`Accessibility` --> `VoiceOver` --> `Speech`
+
+When we press the back button, we follow that same routing path except in reverse. Linear routing is helpful in that it allows for simple and predictable routing behaviors. It also means we can use router Angular Router APIs such as [LocationStrategy.historyGo()](#navigating-using-locationstrategy).
+
+The downside of linear routing is that it does not allow for complex user experiences such as tab views. This is where non-linear routing comes into play.
+
+### Non-Linear Routing
+
+Non-linear routing is a concept that may be new to many web developers learning to build mobile apps with Ionic.
+
+Non-linear routing means that the view that the user should go back to is not necessarily the previous view that was displayed on the screen.
+
+The following is an example of non-linear routing:
+
+
+
+In the example above, we start on the `Originals` tab. Tapping a card brings us to the `Ted Lasso` view within the `Originals` tab.
+
+From here, we switch to the `Search` tab. Then, we tap the `Originals` tab again and are brought back to the `Ted Lasso` view. At this point, we have started using non-linear routing.
+
+Why is this non-linear routing? The previous view we were on was the `Search` view. However, pressing the back button on the `Ted Lasso` view should bring us back to the root `Originals` view. This happens because each tab in a mobile app is treated as its own stack. The [Working with Tabs](#working-with-tabs) sections goes over this in more detail.
+
+If tapping the back button simply called `LocationStrategy.historyGo(-1)` from the `Ted Lasso` view, we would be brought back to the `Search` view which is not correct.
+
+Non-linear routing allows for sophisticated user flows that linear routing cannot handle. However, certain linear routing APIs such as `LocationStrategy.historyGo()` cannot be used in this non-linear environment. This means that `LocationStrategy.historyGo()` should not be used when using tabs or nested outlets.
+
+### Which one should I choose?
+
+We recommend keeping your application as simple as possible until you need to add non-linear routing. Non-linear routing is very powerful, but it also adds a considerable amount of complexity to mobile applications.
+
+The two most common uses of non-linear routing is with tabs and nested `ion-router-outlet`s. We recommend only using non-linear routing if your application meets the tabs or nested router outlet use cases.
+
+For more on tabs, please see [Working with Tabs](#working-with-tabs).
+
+For more on nested router outlets, please see [Nested Routes](#nested-routes).
+
+## Shared URLs versus Nested Routes
+
+A common point of confusion when setting up routing is deciding between shared URLs or nested routes. This part of the guide will explain both and help you decide which one to use.
+
+### Shared URLs
+
+Shared URLs is a route configuration where routes have pieces of the URL in common. The following is an example of a shared URL configuration:
+
+```tsx
+const routes: Routes = [
+ {
+ path: 'dashboard',
+ component: DashboardMainPage,
+ },
+ {
+ path: 'dashboard/stats',
+ component: DashboardStatsPage,
+ },
+];
+```
+
+The above routes are considered "shared" because they reuse the `dashboard` piece of the URL.
+
+### Nested Routes
+
+Nested Routes is a route configuration where routes are listed as children of other routes. The following is an example of a nested route configuration:
+
+```tsx
+const routes: Routes = [
+ {
+ path: 'dashboard',
+ component: DashboardRouterOutlet,
+ children: [
+ {
+ path: '',
+ component: DashboardMainPage,
+ },
+ {
+ path: 'stats',
+ component: DashboardStatsPage,
+ },
+ ],
+ },
+];
+```
+
+The above routes are nested because they are in the `children` array of the parent route. Notice that the parent route renders the `DashboardRouterOutlet` component. When you nest routes, you need to render another instance of `ion-router-outlet`.
+
+### Which one should I choose?
+
+Shared URLs are great when you want to transition from page A to page B while preserving the relationship between the two pages in the URL. In our previous example, a button on the `/dashboard` page could transition to the `/dashboard/stats` page. The relationship between the two pages is preserved because of a) the page transition and b) the url.
+
+Nested routes should be used when you want to render content in outlet A while also rendering sub-content inside of a nested outlet B. The most common use case you will run into is tabs. When you load up a tabs Ionic starter application, you will see `ion-tab-bar` and `ion-tabs` components rendered in the first `ion-router-outlet`. The `ion-tabs` component renders another `ion-router-outlet` which is responsible for rendering the contents of each tab.
+
+There are very few use cases in which nested routes make sense in mobile applications. When in doubt, use the shared URL route configuration. We strongly caution against using nested routing in contexts other than tabs as it can quickly make navigating your app confusing.
+
+## Working with Tabs
+
+With Tabs, the Angular Router provides Ionic the mechanism to know what components should be loaded, but the heavy lifting is actually done by the tabs component. Let's look at a simple example.
+
+```ts
+const routes: Routes = [
+ {
+ path: 'tabs',
+ component: TabsPage,
+ children: [
+ {
+ path: 'tab1',
+ children: [
+ {
+ path: '',
+ loadChildren: () => import('../tab1/tab1.module').then((m) => m.Tab1PageModule),
+ },
+ ],
+ },
+ {
+ path: '',
+ redirectTo: '/tabs/tab1',
+ pathMatch: 'full',
+ },
+ ],
+ },
+ {
+ path: '',
+ redirectTo: '/tabs/tab1',
+ pathMatch: 'full',
+ },
+];
+```
+
+Here we have a "tabs" path that we load. In this example we call the path "tabs", but the name of the paths can be changed. They can be called whatever fits your app. In that route object, we can define a child route as well. In this example, the top level child route "tab1" acts as our "outlet", and can load additional child routes. For this example, we have a single sub-child-route, which just loads a new component. The markup for the tab is as follows:
+
+```html
+
+
+
+
+ Tab One
+
+
+
+```
+
+If you've built apps with Ionic before, this should feel familiar. We create a `ion-tabs` component, and provide a `ion-tab-bar`. The `ion-tab-bar` provides a `ion-tab-button` with a `tab` property that is associated with the tab "outlet" in the router config. Note that the latest version of `@ionic/angular` no longer requires ``, but instead allows developers to fully customize the tab bar, and the single source of truth lives within the router configuration.
+
+### How Tabs in Ionic Work
+
+Each tab in Ionic is treated as an individual navigation stack. This means if you have three tabs in your application, each tab has its own navigation stack. Within each stack you can navigate forwards (push a view) and backwards (pop a view).
+
+This behavior is important to note as it is different than most tab implementations that are found in other web based UI libraries. Other libraries typically manage tabs as one single history stack.
+
+Since Ionic is focused on helping developers build mobile apps, the tabs in Ionic are designed to match native mobile tabs as closely as possible. As a result, there may be certain behaviors in Ionic's tabs that differ from tabs implementations you have seen in other UI libraries. Read on to learn more about some of these differences.
+
+### Child Routes within Tabs
+
+When adding additional routes to tabs you should write them as sibling routes with the parent tab as the path prefix. The example below defines the `/tabs/tab1/view` route as a sibling of the `/tabs/tab1` route. Since this new route has the `tab1` prefix, it will be rendered inside of the `Tabs` component, and Tab 1 will still be selected in the `ion-tab-bar`.
+
+```ts
+const routes: Routes = [
+ {
+ path: 'tabs',
+ component: TabsPage,
+ children: [
+ {
+ path: 'tab1',
+ children: [
+ {
+ path: '',
+ loadChildren: () => import('../tab1/tab1.module').then((m) => m.Tab1PageModule),
+ },
+ ],
+ },
+ {
+ path: 'tab1/view',
+ children: [
+ {
+ path: '',
+ loadChildren: () => import('../tab1/tab1view.module').then((m) => m.Tab1ViewPageModule),
+ },
+ ],
+ },
+ {
+ path: 'tab2',
+ children: [
+ {
+ path: '',
+ loadChildren: () => import('../tab2/tab2.module').then((m) => m.Tab2PageModule),
+ },
+ ],
+ },
+ {
+ path: 'tab3',
+ children: [
+ {
+ path: '',
+ loadChildren: () => import('../tab3/tab3.module').then((m) => m.Tab3PageModule),
+ },
+ ],
+ },
+ ],
+ },
+ {
+ path: '',
+ redirectTo: '/tabs/tab1',
+ pathMatch: 'full',
+ },
+];
+```
+
+### Switching Between Tabs
+
+Since each tab is its own navigation stack, it is important to note that these navigation stacks should never interact. This means that there should never be a button in Tab 1 that routes a user to Tab 2. In other words, tabs should only be changed by the user tapping a tab button in the tab bar.
+
+A good example of this in practice is the iOS App Store and Google Play Store mobile applications. These apps both provide tabbed interfaces, but neither one ever routes the user across tabs. For example, the "Games" tab in the iOS App Store app never directs users to the "Search" tab and vice versa.
+
+Let's take a look at a couple common mistakes that are made with tabs.
+
+**A Settings Tab That Multiple Tabs Reference**
+
+A common practice is to create a Settings view as its own tab. This is great if developers need to present several nested settings menus. However, other tabs should never try to route to the Settings tab. As we mentioned above, the only way that the Settings tab should be activated is by a user tapping the appropriate tab button.
+
+If you find that your tabs need to reference the Settings tab, we recommend making the Settings view a modal by using `ion-modal`. This is a practice found in the iOS App Store app. With this approach, any tab can present the modal without breaking the mobile tabs pattern of each tab being its own stack.
+
+The example below shows how the iOS App Store app handles presenting an "Account" view from multiple tabs. By presenting the "Account" view in a modal, the app can work within the mobile tabs best practices to show the same view across multiple tabs.
+
+
+
+**Reusing Views Across Tabs**
+
+Another common practice is to present the same view in multiple tabs. Developers often try to do this by having the view contained in a single tab, with other tabs routing to that tab. As we mentioned above, this breaks the mobile tabs pattern and should be avoided.
+
+Instead, we recommend having routes in each tab that reference the same component. This is a practice done in popular apps like Spotify. For example, you can access an album or podcast from the "Home", "Search", and "Your Library" tabs. When accessing the album or podcast, users stay within that tab. The app does this by creating routes per tab and sharing a common component in the codebase.
+
+The example below shows how the Spotify app reuses the same album component to show content in multiple tabs. Notice that each screenshot shows the same album but from a different tab.
+
+| Home Tab | Search Tab |
+| :------: | :--------: |
+| })
| })
|
diff --git a/versioned_docs/version-v6/angular/overview.md b/versioned_docs/version-v6/angular/overview.md
new file mode 100644
index 00000000000..b457d1c402b
--- /dev/null
+++ b/versioned_docs/version-v6/angular/overview.md
@@ -0,0 +1,42 @@
+---
+title: 'Ionic Angular Overview'
+sidebar_label: Overview
+---
+
+
+ Ionic Angular Overview | Angular Version Support and Tooling
+
+
+
+import DocsCard from '@components/global/DocsCard';
+import DocsCards from '@components/global/DocsCards';
+
+`@ionic/angular` combines the core Ionic experience with the tooling and APIs that are tailored to Angular Developers.
+
+## Angular Version Support
+
+Ionic v6 supports Angular v12-v15. As part of their upgrade strategy, Angular has built-in tooling to help automate upgrades and provide feedback to developers whenever changes to an API occurred. This reduces update friction and keeps the ecosystem in a evergreen state.
+
+## Angular Tooling
+
+With Ionic 4+, the official Angular stack for building an app and routing are used, so your app can fall in-line with the rest of the great Angular ecosystem. In cases where more opinionated features are needed, Ionic provides `@ionic/angular-toolkit`, which builds and integrates with the [official Angular CLI](https://angular.io/cli) and provides features that are specific to `@ionic/angular` apps.
+
+## Resources
+
+
+
+ Learn the fundamentals you need to know to start building amazing apps with Ionic Framework.
+
+
+
+ Learn the basics of navigation inside your app with Ionic and Angular Router
+
+
+
+ Learn about using Ionic lifecycle events in class components and with hooks
+
+
+
diff --git a/versioned_docs/version-v6/angular/performance.md b/versioned_docs/version-v6/angular/performance.md
new file mode 100644
index 00000000000..c19ee5d7b2c
--- /dev/null
+++ b/versioned_docs/version-v6/angular/performance.md
@@ -0,0 +1,69 @@
+---
+title: Angular Performance
+sidebar_label: Performance
+---
+
+
+ Angular Performance: Manage App Component Change with ngFor
+
+
+
+## \*ngFor with Ionic Components
+
+When using `*ngFor` with Ionic components, we recommend using Angular's `trackBy` option. This allows Angular to manage change propagation in a much more efficient way and only update the content inside of the component rather than re-create the component altogether.
+
+By using `trackBy` you can provide a stable identity for each loop element so Angular can track insertions and deletions within the iterator. Below is an example of how to use `trackBy`:
+
+**home.page.html**
+
+```html
+
+ {{ item.value }}
+
+```
+
+**home.component.ts**
+
+```tsx
+
+items = [
+ { id: 0, value: 'Item 0' },
+ { id: 1, value: 'Item 1' },
+ ...
+]
+
+trackItems(index: number, itemObject: any) {
+ return itemObject.id;
+}
+```
+
+In this example, we have an array of objects called `items`. Each object contains a `value` and an `id`. Using `trackBy`, we pass a `trackItems` function which returns the `id` of each object. This `id` is used to provide a stable identity for each loop element.
+
+For more information on how Angular manages change propagation with `ngFor` see https://angular.io/api/common/NgForOf#change-propagation.
+
+## From the Ionic Team
+
+[How to Lazy Load in Ionic Angular](https://ionicframework.com/blog/how-to-lazy-load-in-ionic-angular/)
+
+[Improved Perceived Performance with Skeleton Screens](https://ionicframework.com/blog/improved-perceived-performance-with-skeleton-screens/)
+
+## From the Angular Team
+
+[Build performant and progressive Angular apps](https://web.dev/angular) - web.dev
+
+## From the Community
+
+[High Performance Animations in Ionic](https://www.joshmorony.com/high-performance-animations-in-ionic/) - Josh Morony
+
+[High Performance List Filtering in Ionic](https://www.joshmorony.com/high-performance-list-filtering-in-ionic-2/) - Josh Morony
+
+[Increasing Performance with Efficient DOM Writes in Ionic](https://www.joshmorony.com/increasing-performance-with-efficient-dom-writes-in-ionic-2/) - Josh Morony
+
+[Ionic Framework is Fast (But Your Code Might Not Be)](https://www.joshmorony.com/ionic-framework-is-fast-but-your-code-might-not-be/) - Josh Morony
+
+:::note
+Do you have a guide you'd like to share? Click the _Edit this page_ button below.
+:::
diff --git a/versioned_docs/version-v6/angular/platform.md b/versioned_docs/version-v6/angular/platform.md
new file mode 100644
index 00000000000..ac957693971
--- /dev/null
+++ b/versioned_docs/version-v6/angular/platform.md
@@ -0,0 +1,216 @@
+---
+title: Platform
+---
+
+
+ Platform | Ionic Platform to Customize Apps to Fit Any Device
+
+
+
+The Platform service can be used to get information about your current device. You can get all of the platforms associated with the device using the `platforms` method, including whether the app is being viewed from a tablet, if it's on a mobile device or browser, and the exact platform (iOS, Android, etc). You can also get the orientation of the device, if it uses right-to-left language direction, and much much more. With this information you can completely customize your app to fit any device.
+
+## Usage
+
+```tsx
+import { Platform } from '@ionic/angular';
+
+@Component({...})
+export class MyPage {
+ constructor(public platform: Platform) {
+
+ }
+}
+```
+
+## Methods
+
+### `is`
+
+| | |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | Depending on the platform the user is on, `is(platformName)` will return true or false. Note that the same app can return true for more than one platform name. For example, an app running from an iPad would return true for the platform names: `mobile`, `ios`, `ipad`, and `tablet`. Additionally, if the app was running from Cordova then `cordova` would be true. |
+| **Signature** | `is(platformName: Platforms) => boolean` |
+
+#### Parameters
+
+| Name | Type | Description |
+| -------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `platformName` | `Platforms` | Name of the platform. Available options are android, capacitor, cordova, desktop, electron, hybrid, ios, ipad, iphone, mobile, phablet, pwa, tablet |
+
+#### Platforms
+
+Below is a table listing all the possible platform values along with corresponding descriptions.
+
+| Platform Name | Description |
+| ------------- | ---------------------------------------- |
+| android | a device running Android |
+| capacitor | a device running Capacitor |
+| cordova | a device running Cordova |
+| desktop | a desktop device |
+| electron | a desktop device running Electron |
+| hybrid | a device running Capacitor or Cordova |
+| ios | a device running iOS |
+| ipad | an iPad device |
+| iphone | an iPhone device |
+| mobile | a mobile device |
+| mobileweb | a web browser running in a mobile device |
+| phablet | a phablet device |
+| pwa | a PWA app |
+| tablet | a tablet device |
+
+#### Customizing Platform Detection Functions
+
+The function used to detect a specific platform can be overridden by providing an alternative function in the global [Ionic config](./config). Each function takes `window` as a parameter and returns a boolean.
+
+```tsx
+import { IonicModule } from '@ionic/angular';
+
+@NgModule({
+ ...
+ imports: [
+ BrowserModule,
+ IonicModule.forRoot({
+ platform: {
+ /** The default `desktop` function returns false for devices with a touchscreen.
+ * This is not always wanted, so this function tests the User Agent instead.
+ **/
+ 'desktop': (win) => {
+ const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(win.navigator.userAgent);
+ return !isMobile;
+ }
+ },
+ }),
+ AppRoutingModule
+ ],
+ ...
+})
+```
+
+```ts
+type PlatformConfig = {
+ android?: ((win: Window) => boolean) | undefined;
+ capacitor?: ((win: Window) => boolean) | undefined;
+ cordova?: ((win: Window) => boolean) | undefined;
+ desktop?: ((win: Window) => boolean) | undefined;
+ electron?: ((win: Window) => boolean) | undefined;
+ hybrid?: ((win: Window) => boolean) | undefined;
+ ios?: ((win: Window) => boolean) | undefined;
+ ipad?: ((win: Window) => boolean) | undefined;
+ iphone?: ((win: Window) => boolean) | undefined;
+ mobile?: ((win: Window) => boolean) | undefined;
+ mobileweb?: ((win: Window) => boolean) | undefined;
+ phablet?: ((win: Window) => boolean) | undefined;
+ pwa?: ((win: Window) => boolean) | undefined;
+ tablet?: ((win: Window) => boolean) | undefined;
+};
+```
+
+### `platforms`
+
+| | |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | Depending on what device you are on, `platforms` can return multiple values. Each possible value is a hierarchy of platforms. For example, on an iPhone, it would return `mobile`, `ios`, and `iphone`. |
+| **Signature** | `platforms() => string[]` |
+
+### `ready`
+
+| | |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | Returns a promise when the platform is ready and native functionality can be called. If the app is running from within a web browser, then the promise will resolve when the DOM is ready. When the app is running from an application engine such as Cordova, then the promise will resolve when Cordova triggers the `deviceready` event. The resolved value is the `readySource`, which states the platform that was used.
For example, when Cordova is ready, the resolved ready source is `cordova`. The default ready source value will be `dom`. The `readySource` is useful if different logic should run depending on the platform the app is running from. For example, only Capacitor and Cordova can execute the status bar plugin, so the web should not run status bar plugin logic. |
+| **Signature** | `ready() => Promise` |
+
+### `isRTL`
+
+| | |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | Returns if this app is using right-to-left language direction or not. We recommend the app's `index.html` file already has the correct `dir` attribute value set, such as `` or ``. [W3C: Structural markup and right-to-left text in HTML](http://www.w3.org/International/questions/qa-html-dir) |
+| **Signature** | `isRTL() => boolean` |
+
+### `isLandscape`
+
+| | |
+| --------------- | ----------------------------------------------- |
+| **Description** | Returns `true` if the app is in landscape mode. |
+| **Signature** | `isLandscape() => boolean` |
+
+### `isPortrait`
+
+| | |
+| --------------- | ---------------------------------------------- |
+| **Description** | Returns `true` if the app is in portrait mode. |
+| **Signature** | `isPortrait() => boolean` |
+
+### `width`
+
+| | |
+| --------------- | -------------------------------------------------------------------- |
+| **Description** | Gets the width of the platform's viewport using `window.innerWidth`. |
+| **Signature** | `width() => number` |
+
+### `height`
+
+| | |
+| --------------- | ---------------------------------------------------------------------- |
+| **Description** | Gets the height of the platform's viewport using `window.innerHeight`. |
+| **Signature** | `height() => number` |
+
+### `url`
+
+| | |
+| --------------- | -------------------- |
+| **Description** | Get the current url. |
+| **Signature** | `url() => string` |
+
+### `testUserAgent`
+
+| | |
+| --------------- | ---------------------------------------------------------------------- |
+| **Description** | Returns `true` if the expression is included in the user agent string. |
+| **Signature** | `testUserAgent(expression: string) => boolean` |
+
+#### Parameters
+
+| Name | Type | Description |
+| ---------- | ------ | ------------------------------------- |
+| expression | string | The string to check in the user agent |
+
+## Events
+
+### `pause`
+
+The `pause` event emits when the native platform puts the application into the background, typically when the user switches to a different application. This event emits when a Cordova/Capacitor app is put into the background but doesn't fire in a standard web browser.
+
+#### Examples
+
+```tsx
+this.platform.pause.subscribe(async () => {
+ alert('Pause event detected');
+});
+```
+
+### `resize`
+
+The `resize` event emits when the browser window has changed dimensions. This could be from a browser window being physically resized, or from a device changing orientation.
+
+#### Examples
+
+```tsx
+this.platform.resize.subscribe(async () => {
+ alert('Resize event detected');
+});
+```
+
+### `resume`
+
+The `resume` event fires when the native platform pulls the application out from the background. This event emits when a Cordova/Capacitor app comes out from the background but doesn't fire in a standard web browser.
+
+#### Examples
+
+```tsx
+this.platform.resume.subscribe(async () => {
+ alert('Resume event detected');
+});
+```
diff --git a/versioned_docs/version-v6/angular/pwa.md b/versioned_docs/version-v6/angular/pwa.md
new file mode 100644
index 00000000000..8b90caf5d89
--- /dev/null
+++ b/versioned_docs/version-v6/angular/pwa.md
@@ -0,0 +1,152 @@
+---
+title: Progressive Web Apps in Angular
+sidebar_label: Progressive Web Apps
+---
+
+
+ Make Progressive Web Apps (PWA) in Angular - Ionic Tutorial
+
+
+
+## Making your Angular app a PWA
+
+The two main requirements of a PWA are a Service Worker and a Web Manifest. While it's possible to add both of these to an app manually, the Angular team has an `@angular/pwa` package that can be used to automate this.
+
+The `@angular/pwa` package will automatically add a service worker and an app manifest to the app.
+To add this package to the app, run:
+
+```shell
+ng add @angular/pwa
+```
+
+Once this package has been added run `ionic build --prod` and the `www` directory will be ready to deploy as a PWA.
+
+:::note
+By default, the `@angular/pwa` package comes with the Angular logo for the app icons. Be sure to update the manifest to use the correct app name and also replace the icons.
+:::
+
+:::note
+Features like Service Workers and many JavaScript APIs (such as geolocation) require the app be hosted in a secure context. When deploying an app through a hosting service, be aware that HTTPS will be required to take full advantage of Service Workers.
+:::
+
+## Service Worker configuration
+
+After `@angular/pwa` has been added, a new `ngsw-config.json` file will be created at the root of the project. This file is responsible for configuring how Angular's service worker mechanism will handle caching assets. By default, the following will be provided:
+
+```json
+{
+ "$schema": "./node_modules/@angular/service-worker/config/schema.json",
+ "index": "/index.html",
+ "assetGroups": [
+ {
+ "name": "app",
+ "installMode": "prefetch",
+ "resources": {
+ "files": ["/favicon.ico", "/index.html", "/*.css", "/*.js"]
+ }
+ },
+ {
+ "name": "assets",
+ "installMode": "lazy",
+ "updateMode": "prefetch",
+ "resources": {
+ "files": ["/assets/**", "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"]
+ }
+ }
+ ]
+}
+```
+
+There are two sections in here, one for app specific resources (JS, CSS, HTML) and assets the app will load on demand. Depending on your app, these options can be customized. For a more detailed guide, read [the official guide from the Angular Team.](https://angular.io/guide/service-worker-config)
+
+## Deploying
+
+### Firebase
+
+Firebase hosting provides many benefits for Progressive Web Apps, including fast response times thanks to CDNs, HTTPS enabled by default, and support for [HTTP2 push](https://firebase.googleblog.com/2016/09/http2-comes-to-firebase-hosting.html).
+
+First, if not already available, [create the project](https://console.firebase.google.com) in Firebase.
+
+Next, in a Terminal, install the Firebase CLI:
+
+```shell
+npm install -g firebase-tools
+```
+
+:::note
+If it's the first time you use firebase-tools, login to your Google account with `firebase login` command.
+:::
+
+With the Firebase CLI installed, run `firebase init` within your Ionic project. The CLI prompts:
+
+**"Which Firebase CLI features do you want to set up for this folder?"** Choose "Hosting: Configure and deploy Firebase Hosting sites."
+
+**"Select a default Firebase project for this directory:"** Choose the project you created on the Firebase website.
+
+**"What do you want to use as your public directory?"** Enter "www".
+
+:::note
+Answering these next two questions will ensure that routing, hard reload, and deep linking work in the app:
+:::
+
+**Configure as a single-page app (rewrite all urls to /index.html)?"** Enter "Yes".
+
+**"File www/index.html already exists. Overwrite?"** Enter "No".
+
+A `firebase.json` config file is generated, configuring the app for deployment.
+
+The last thing needed is to make sure caching headers are being set correctly. To do this, add a `headers` snippet to the `firebase.json` file. The complete `firebase.json` looks like:
+
+```json
+{
+ "hosting": {
+ "public": "www",
+ "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
+ "rewrites": [
+ {
+ "source": "**",
+ "destination": "/index.html"
+ }
+ ],
+ "headers": [
+ {
+ "source": "/build/app/**",
+ "headers": [
+ {
+ "key": "Cache-Control",
+ "value": "public, max-age=31536000"
+ }
+ ]
+ },
+ {
+ "source": "ngsw-worker.js",
+ "headers": [
+ {
+ "key": "Cache-Control",
+ "value": "no-cache"
+ }
+ ]
+ }
+ ]
+ }
+}
+```
+
+For more information about the `firebase.json` properties, see the [Firebase documentation](https://firebase.google.com/docs/hosting/full-config#section-firebase-json).
+
+Next, build an optimized version of the app by running:
+
+```shell
+ionic build --prod
+```
+
+Last, deploy the app by running:
+
+```shell
+firebase deploy
+```
+
+After this completes, the app will be live.
diff --git a/versioned_docs/version-v6/angular/slides.md b/versioned_docs/version-v6/angular/slides.md
new file mode 100644
index 00000000000..872b5eaae92
--- /dev/null
+++ b/versioned_docs/version-v6/angular/slides.md
@@ -0,0 +1,445 @@
+---
+title: Slides
+---
+
+
+ Set Up Swiper.js for Angular Slides [Example] | Ionic
+
+
+
+:::note
+This migration guide is compatible with Swiper 8. An updated guide for Swiper 9 is coming soon!
+:::
+
+We recommend Swiper.js if you need a modern touch slider component. It powers our `ion-slides` component, but we now recommend that developers use Swiper for Angular directly.
+
+This guide will go over how to get Swiper for Angular set up in your Ionic Framework application. It will also go over any migration information you may need to move from `ion-slides` to the official Swiper Angular integration.
+
+## Getting Started
+
+First, update to the latest version of Ionic:
+
+```shell
+npm install @ionic/angular@latest
+```
+
+Once that is done, install the Swiper dependency in your project:
+
+```shell
+npm install swiper@8
+```
+
+Once that is done, we need to import the `SwiperModule` module. This should be done in your component's module file:
+
+```typescript
+// home.module.ts
+import { SwiperModule } from 'swiper/angular';
+
+@NgModule({
+ imports: [..., SwiperModule]
+});
+...
+```
+
+## Swiping with Style
+
+Next, we need to import the base Swiper styles. We are also going to import the styles that Ionic provides which will let us customize the Swiper styles using the same CSS Variables that we used with `ion-slides`.
+
+You can import these files in `global.scss`:
+
+```scss
+// global.scss
+@import '~swiper/scss';
+@import '~@ionic/angular/css/ionic-swiper';
+```
+
+If you prefer to import these in the CSS file for your slides component, you will need to disable [ViewEncapsulation in Angular](https://angular.io/api/core/ViewEncapsulation), otherwise the styles will not apply:
+
+```typescript
+// home.page.ts
+import { Component, ViewEncapsulation } from '@angular/core';
+
+@Component({
+ selector: 'app-home',
+ templateUrl: 'home.page.html',
+ styleUrls: ['home.page.scss'],
+ encapsulation: ViewEncapsulation.None
+})
+export class HomePage {
+ ...
+}
+```
+
+```scss
+// home.page.scss
+@import '~swiper/scss';
+@import '~@ionic/angular/css/ionic-swiper';
+```
+
+:::note
+Importing `@ionic/angular/css/ionic-swiper'` is **not** required to use Swiper.js with Ionic. This files is used for backward-compatibility with the `ion-slides` component and can be safely omitted if you prefer not to use the CSS Variables provided in the stylesheet.
+:::
+
+### Updating Selectors
+
+Previously, we were able to target `ion-slides` and `ion-slide` to apply any custom styling. The contents of those style blocks remain the same, but we need to update the selectors. Below is a list of selector changes when going from `ion-slides` to Swiper Angular:
+
+| ion-slides Selector | Swiper Selector |
+| ------------------- | --------------- |
+| `ion-slides` | `.swiper` |
+| `ion-slide` | `.swiper-slide` |
+
+### Vanilla CSS (Optional)
+
+For developers not using a CSS pre-processor, Swiper also provides the styles bundled together. It is important to note that this will import styles for all modules as well.
+
+```javascript
+// slides.component.css
+@import 'swiper/css';
+@import '@ionic/angular/css/ionic-swiper';
+```
+
+## Using Components
+
+Swiper Angular exports a `Swiper` component which is the equivalent of `ion-slides`. It also exports a `swiperSlide` directive which can be used on an `` for each slide:
+
+```html
+
+
+
+ Slide 1
+ Slide 2
+ Slide 3
+
+
+```
+
+## Using Modules
+
+By default, Swiper for Angular does not import any additional modules. To use modules such as Navigation or Pagination, you need to import them first.
+
+`ion-slides` automatically included the Pagination, Scrollbar, Autoplay, Keyboard, and Zoom modules. This part of the guide will show you how to install these modules.
+
+To begin, we need to import the modules and provide them to Swiper:
+
+```typescript
+// home.page.ts
+import { Component } from '@angular/core';
+import SwiperCore, { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper';
+
+SwiperCore.use([Autoplay, Keyboard, Pagination, Scrollbar, Zoom]);
+
+@Component({
+ selector: 'app-home',
+ templateUrl: 'home.page.html',
+ styleUrls: ['home.page.scss']
+})
+export class HomePage {
+ ...
+}
+```
+
+Next, we need to import the stylesheets for each module:
+
+```scss
+// global.scss
+@import '~swiper/scss';
+@import '~swiper/scss/autoplay';
+@import '~swiper/scss/keyboard';
+@import '~swiper/scss/pagination';
+@import '~swiper/scss/scrollbar';
+@import '~swiper/scss/zoom';
+@import '~@ionic/angular/css/ionic-swiper';
+```
+
+Finally, we can turn these features on by using the appropriate properties:
+
+```html
+
+
+
+ Slide 1
+ Slide 2
+ Slide 3
+
+
+```
+
+:::note
+See https://swiperjs.com/angular#usage for a full list of modules.
+:::
+
+## The IonicSlides Module
+
+With `ion-slides`, Ionic automatically customized dozens of Swiper properties. This resulted in an experience that felt smooth when swiping on mobile devices. We recommend using the `IonicSlides` module to ensure that these properties are also set when using Swiper directly. However, using this module is **not** required to use Swiper.js in Ionic.
+
+We can install the `IonicSlides` module by importing it from `@ionic/angular` and passing it in as the last item in the array provided in `SwiperCore.use`:
+
+```javascript
+// home.page.ts
+import { Component } from '@angular/core';
+import SwiperCore, { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper';
+import { IonicSlides } from '@ionic/angular';
+
+SwiperCore.use([Autoplay, Keyboard, Pagination, Scrollbar, Zoom, IonicSlides]);
+
+@Component({
+ selector: 'app-home',
+ templateUrl: 'home.page.html',
+ styleUrls: ['home.page.scss']
+})
+export class HomePage {
+ ...
+}
+```
+
+:::note
+The `IonicSlides` module must be the last module in the array. This will let it automatically customize the settings of modules such as Pagination, Scrollbar, Zoom, and more.
+:::
+
+## Properties
+
+Swiper options can be provided as individual properties directly on the `` component or via the `config` property.
+
+Let's say in an app with `ion-slides` we had the `slidesPerView` and `loop` options set:
+
+```html
+
+ Slide 1
+ Slide 3
+ Slide 3
+
+```
+
+To set these options as properties directly on `` we would do the following:
+
+```html
+
+ Slide 1
+ Slide 2
+ Slide 3
+
+```
+
+To set these options using the `config` object, we would do:
+
+```html
+
+ Slide 1
+ Slide 3
+ Slide 3
+
+```
+
+Below is a full list of property changes when going from `ion-slides` to Swiper Angular:
+
+| Name | Notes |
+| --------- | --------------------------------------------------------------------------------------------------------------------- |
+| options | Use the `config` property instead or set each option as a property directly on the `` component. |
+| mode | For different styles based upon the mode, you can target the slides with `.ios .swiper` or `.md .swiper` in your CSS. |
+| pager | Use the `pagination` property instead. Requires installation of the Pagination module. |
+| scrollbar | You can continue to use the `scrollbar` property, just be sure to install the Scrollbar module first. |
+
+:::note
+All properties available in Swiper Angular can be found at https://swiperjs.com/angular#swiper-component-props.
+:::
+
+## Events
+
+Since the `Swiper` component is not provided by Ionic Framework, event names will not have an `ionSlide` prefix to them.
+
+Let's say in an app with `ion-slides` we used the `ionSlideDidChange` event:
+
+```html
+
+ Slide 1
+ Slide 3
+ Slide 3
+
+```
+
+To migrate, we would change the name of the event to `slideChange`:
+
+```html
+
+ Slide 1
+ Slide 2
+ Slide 3
+
+```
+
+Below is a full list of event name changes when going from `ion-slides` to Swiper Angular:
+
+| ion-slides Event | Swiper Event |
+| ----------------------- | -------------------------- |
+| ionSlideWillChange | slideChangeTransitionStart |
+| ionSlideDidChange | slideChangeTransitionEnd |
+| ionSlideDoubleTap | doubleTap |
+| ionSlideDrag | sliderMove |
+| ionSlideNextStart | slideNextTransitionStart |
+| ionSlideNextEnd | slideNextTransitionEnd |
+| ionSlidePrevStart | slidePrevTransitionStart |
+| ionSlidePrevEnd | slidePrevTransitionEnd |
+| ionSlideReachStart | reachBeginning |
+| ionSlideReachEnd | reachEnd |
+| ionSlideTap | tap |
+| ionSlideTouchStart | touchStart |
+| ionSlideTouchEnd | touchEnd |
+| ionSlideTransitionStart | transitionStart |
+| ionSlideTransitionEnd | transitionEnd |
+| ionSlidesDidLoad | init |
+
+:::note
+All events available in Swiper Angular can be found at https://swiperjs.com/angular#swiper-component-events.
+:::
+
+## Methods
+
+Most methods have been removed in favor of accessing the `` props directly.
+
+Accessing these properties can be tricky as you want to access the properties on the Swiper instance itself, not your Angular component. To do this, we recommend getting a reference to the `Swiper` instance via `(swiper)`:
+
+```html
+
+
+
+ Slide 1
+ Slide 2
+ Slide 3
+
+```
+
+```javascript
+// slides.component.ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-slides-example',
+ templateUrl: 'slides.component.html',
+ styleUrls: ['slides.component.scss']
+})
+export class SlidesExample {
+ private slides: any;
+
+ constructor() {}
+ setSwiperInstance(swiper: any) {
+ this.slides = swiper;
+ }
+}
+```
+
+From here, if you wanted to access a property on the Swiper instance you would access `this.slides`. For example, if you wanted to check the `isBeginning` property, you could do: `this.slides.isBeginning`. Make sure `this.slides` is defined first though!
+
+Below is a full list of method changes when going from `ion-slides` to Swiper Angular:
+
+| ion-slides Method | Notes |
+| ------------------ | ------------------------------------------------------------------------------------ |
+| getActiveIndex() | Use the `activeIndex` property instead. |
+| getPreviousIndex() | Use the `previousIndex` property instead. |
+| getSwiper() | Get a reference to the Swiper instance using `(swiper)`. See example above. |
+| isBeginning() | Use the `isBeginning` property instead. |
+| isEnd() | Use the `isEnd` property instead. |
+| length() | Use the `slides` property instead. (i.e swiperRef.slides.length) |
+| lockSwipeToNext() | Use the `allowSlidesNext` property instead. |
+| lockSwipeToPrev() | Use the `allowSlidePrev` property instead. |
+| lockSwipes() | Use the `allowSlideNext`, `allowSlidePrev`, and `allowTouchMove` properties instead. |
+| startAutoplay() | Use the `autoplay` property instead. |
+| stopAutoplay() | Use the `autoplay` property instead. |
+
+## Effects
+
+If you are using effects such as Cube or Fade, you can install them just like we did with the other modules. In this example, we will use the fade effect. To start, we will import the `EffectFade` module and register it using `SwiperCore.use`:
+
+```html
+
+
+
+ Slide 1
+ Slide 2
+ Slide 3
+
+```
+
+```javascript
+// slides.component.ts
+import { Component } from '@angular/core';
+import SwiperCore, { EffectFade } from 'swiper';
+import { IonicSlides } from '@ionic/angular';
+
+SwiperCore.use([EffectFade, IonicSlides]);
+
+@Component({
+ selector: 'app-slides-example',
+ templateUrl: 'slides.component.html',
+ styleUrls: ['slides.component.scss'],
+})
+export class SlidesExample {
+ constructor() {}
+}
+```
+
+Next, we need to import the stylesheet associated with the effect:
+
+```scss
+// global.scss
+@import '~swiper/scss/effect-fade';
+```
+
+After that, we can activate it by setting the `effect` property on `swiper` to `"fade"`:
+
+```html
+
+
+
+ Slide 1
+ Slide 2
+ Slide 3
+
+```
+
+```javascript
+// slides.component.ts
+import { Component } from '@angular/core';
+import SwiperCore, { EffectFade } from 'swiper';
+import { IonicSlides } from '@ionic/angular';
+
+SwiperCore.use([EffectFade, IonicSlides]);
+
+@Component({
+ selector: 'app-slides-example',
+ templateUrl: 'slides.component.html',
+ styleUrls: ['slides.component.scss'],
+})
+export class SlidesExample {
+ constructor() {}
+}
+```
+
+:::note
+For more information on effects in Swiper, please see https://swiperjs.com/angular#effects.
+:::
+
+## Wrap Up
+
+Now that you have Swiper installed, there is a whole set of new Swiper features for you to enjoy. We recommend starting with the Swiper Angular Introduction and then referencing the Swiper API docs.
+
+## FAQ
+
+### Where can I find an example of this migration?
+
+You can find a sample app with `ion-slides` and the equivalent Swiper usage at https://github.com/ionic-team/slides-migration-samples.
+
+### Where can I get help with this migration?
+
+If you are running into issues with the migration, please create a post on the [Ionic Forum](https://forum.ionicframework.com/).
+
+### Where do I file bug reports?
+
+Before opening an issue, please consider creating a post on the Swiper Discussion Board or the Ionic Forum to see if your issue can be resolved by the community.
+
+If you are running into problems with the Swiper library, new bugs should be filed on the Swiper repo: https://github.com/nolimits4web/swiper/issues
+
+If you are running into problems with the `IonicSlides` module, new bugs should be filed on the Ionic Framework repo: https://github.com/ionic-team/ionic-framework/issues
\ No newline at end of file
diff --git a/versioned_docs/version-v6/angular/storage.md b/versioned_docs/version-v6/angular/storage.md
new file mode 100644
index 00000000000..dad80e77f3a
--- /dev/null
+++ b/versioned_docs/version-v6/angular/storage.md
@@ -0,0 +1,32 @@
+---
+title: Data Storage
+sidebar_label: Storage
+---
+
+
+ Angular App Data Storage Options - Ionic Documentation
+
+
+
+There are variety of options available for storing data within an Ionic app.
+
+Here are two official Ionic options:
+
+## Ionic Secure Storage
+
+For teams building mission-critical apps or requiring encryption support, [Ionic Secure Storage](https://ionic.io/docs/secure-storage) is an official premium solution from the Ionic team that provides a cross-platform data storage system that works on iOS and Android.
+
+It makes it easy to build high performance, offline-ready Ionic apps across iOS, Android, and the web.
+
+[Learn more](https://ionic.io/products/secure-storage)
+
+## @ionic/storage
+
+For developers not requiring encryption nor relational data support, [@ionic/storage](https://github.com/ionic-team/ionic-storage) is an open source key/value API for building apps that work across storage engines on multiple platforms.
+
+Additionally, Ionic Secure Storage has a driver that works with the key/value API in `@ionic/storage` while providing encryption and SQLite support.
+
+Learn more about [@ionic/storage](https://github.com/ionic-team/ionic-storage)
diff --git a/versioned_docs/version-v6/angular/testing.md b/versioned_docs/version-v6/angular/testing.md
new file mode 100644
index 00000000000..b8aedacd3fe
--- /dev/null
+++ b/versioned_docs/version-v6/angular/testing.md
@@ -0,0 +1,595 @@
+---
+title: Testing
+---
+
+
+ Angular Unit and End-to-End Testing for Ionic App Components
+
+
+
+When an `@ionic/angular` application is generated using the Ionic CLI, it is automatically set up for unit testing and end-to-end testing of the application. This is the same setup that is used by the Angular CLI. Refer to the Angular Testing Guide for detailed information on testing Angular applications.
+
+## Testing Principles
+
+When testing an application, it is best to keep in mind that testing can show if defects are present in a system. However, it is impossible to prove that any non-trivial system is completely free of defects. For this reason, the goal of testing is not to verify that the code is correct but to find problems within the code. This is a subtle but important distinction.
+
+If we set out to prove that the code is correct, we are more likely to stick to the happy path through the code. If we set out to find problems, we are more likely to more fully exercise the code and find the bugs that are lurking there.
+
+It is also best to begin testing an application from the very start. This allows defects to be found early in the process when they are easier to fix. This also allows code to be refactored with confidence as new features are added to the system.
+
+## Unit Testing
+
+Unit tests exercise a single unit of code (component, page, service, pipe, etc) in isolation from the rest of the system. Isolation is achieved through the injection of mock objects in place of the code's dependencies. The mock objects allow the test to have fine-grained control of the outputs of the dependencies. The mocks also allow the test to determine which dependencies have been called and what has been passed to them.
+
+Well-written unit tests are structured such that the unit of code and the features it contains are described via `describe()` callbacks. The requirements for the unit of code and its features are tested via `it()` callbacks. When the descriptions for the `describe()` and `it()` callbacks are read, they make sense as a phrase. When the descriptions for nested `describe()`s and a final `it()` are concatenated together, they form a sentence that fully describes the test case.
+
+Since unit tests exercise the code in isolation, they are fast, robust, and allow for a high degree of code coverage.
+
+### Using Mocks
+
+Unit tests exercise a code module in isolation. To facilitate this, we recommend using Jasmine (https://jasmine.github.io/). Jasmine creates mock objects (which Jasmine calls "spies") to take the place of dependencies while testing. When a mock object is used, the test can control the values returned by calls to that dependency, making the current test independent of changes made to the dependency. This also makes the test setup easier, allowing the test to only be concerned with the code within the module under test.
+
+Using mocks also allows the test to query the mock to determine if it was called and how it was called via the `toHaveBeenCalled*` set of functions. Tests should be as specific as possible with these functions, favoring calls to `toHaveBeenCalledTimes` over calls to `toHaveBeenCalled` when testing that a method has been called. That is `expect(mock.foo).toHaveBeenCalledTimes(1)` is better than `expect(mock.foo).toHaveBeenCalled()`. The opposite advice should be followed when testing that something has not been called (`expect(mock.foo).not.toHaveBeenCalled()`).
+
+There are two common ways to create mock objects in Jasmine. Mock objects can be constructed from scratch using `jasmine.createSpy` and `jasmine.createSpyObj` or spies can be installed onto existing objects using `spyOn()` and `spyOnProperty()`.
+
+#### Using `jasmine.createSpy` and `jasmine.createSpyObj`
+
+`jasmine.createSpyObj` creates a full mock object from scratch with a set of mock methods defined on creation. This is useful in that it is very simple. Nothing needs to be constructed or injected into the test. The disadvantage of using this function is that it allows the creation of objects that may not match the real objects.
+
+`jasmine.createSpy` is similar but it creates a stand-alone mock function.
+
+#### Using `spyOn()` and `spyOnProperty()`
+
+`spyOn()` installs the spy on an existing object. The advantage of using this technique is that if an attempt is made to spy on a method that does not exist on the object, an exception is raised. This prevents the test from mocking methods that do not exist. The disadvantage is that the test needs a fully formed object to begin with, which may increase the amount of test setup required.
+
+`spyOnProperty()` is similar with the difference being that it spies on a property and not a method.
+
+### General Testing Structure
+
+Unit tests are contained in `spec` files with one `spec` file per entity (component, page, service, pipe, etc.). The `spec` files live side-by-side with and are named after the source that they are testing. For example, if the project has a service called WeatherService, the code for it is in a file named `weather.service.ts` with the tests in a file named `weather.service.spec.ts`. Both of those files are in the same folder.
+
+The `spec` files themselves contain a single `describe` call that defines that overall test. Nested within it are other `describe` calls that define major areas of functionality. Each `describe` call can contain setup and teardown code (generally handled via `beforeEach` and `afterEach` calls), more `describe` calls forming a hierarchical breakdown of functionality, and `it` calls which define individual test cases.
+
+The `describe` and `it` calls also contain a descriptive text label. In well-formed tests, the `describe` and `it` calls combine with their labels to perform proper phrases and the full label for each test case, formed by combining the `describe` and `it` labels, creates a full sentence.
+
+For example:
+
+```tsx
+describe('Calculation', () => {
+ describe('divide', () => {
+ it('calculates 4 / 2 properly' () => {});
+ it('cowardly refuses to divide by zero' () => {});
+ ...
+ });
+
+ describe('multiply', () => {
+ ...
+ });
+});
+```
+
+The outer `describe` call states that the `Calculation` service is being tested, the inner `describe` calls state exactly what functionality is being tested, and the `it` calls state what the test cases are. When run the full label for each test case is a sentence that makes sense (Calculation divide cowardly refuses to divide by zero).
+
+### Pages and Components
+
+Pages are just Angular components. Thus, pages and components are both tested using Angular's Component Testing guidelines.
+
+Since pages and components contain both TypeScript code and HTML template markup it is possible to perform both component class testing and component DOM testing. When a page is created, the template test that is generated looks like this:
+
+```tsx
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TabsPage } from './tabs.page';
+
+describe('TabsPage', () => {
+ let component: TabsPage;
+ let fixture: ComponentFixture;
+
+ beforeEach(async () => {
+ TestBed.configureTestingModule({
+ declarations: [TabsPage],
+ schemas: [CUSTOM_ELEMENTS_SCHEMA],
+ }).compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(TabsPage);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
+```
+
+When doing component class testing, the component object is accessed using the component object defined via `component = fixture.componentInstance;`. This is an instance of the component class. When doing DOM testing, the `fixture.nativeElement` property is used. This is the actual `HTMLElement` for the component, which allows the test to use standard HTML API methods such as `HTMLElement.querySelector` in order to examine the DOM.
+
+## Services
+
+Services often fall into one of two broad categories: utility services that perform calculations and other operations, and data services that perform primarily HTTP operations and data manipulation.
+
+### Basic Service Testing
+
+The suggested way to test most services is to instantiate the service and manually inject mocks for any dependency the service has. This way, the code can be tested in isolation.
+
+Let's say that there is a service with a method that takes an array of timecards and calculates net pay. Let's also assume that the tax calculations are handled via another service that the current service depends on. This payroll service could be tested as such:
+
+```tsx
+import { PayrollService } from './payroll.service';
+
+describe('PayrollService', () => {
+ let service: PayrollService;
+ let taxServiceSpy;
+
+ beforeEach(() => {
+ taxServiceSpy = jasmine.createSpyObj('TaxService', {
+ federalIncomeTax: 0,
+ stateIncomeTax: 0,
+ socialSecurity: 0,
+ medicare: 0
+ });
+ service = new PayrollService(taxServiceSpy);
+ });
+
+ describe('net pay calculations', () => {
+ ...
+ });
+});
+```
+
+This allows the test to control the values returned by the various tax calculations via mock setup such as `taxServiceSpy.federalIncomeTax.and.returnValue(73.24)`. This allows the "net pay" tests to be independent of the tax calculation logic. When the tax codes change, only the tax service related code and tests need to change. The tests for the net pay can continue to operate as they are since these tests do not care how the tax is calculated, just that the value is applied properly.
+
+The scaffolding that is used when a service is generated via `ionic g service name` uses Angular's testing utilities and sets up a testing module. Doing so is not strictly necessary. That code may be left in, however, allowing the service to be built manually or injected as such:
+
+```tsx
+import { TestBed, inject } from '@angular/core/testing';
+
+import { PayrollService } from './payroll.service';
+import { TaxService } from './tax.service';
+
+describe('PayrolService', () => {
+ let taxServiceSpy;
+
+ beforeEach(() => {
+ taxServiceSpy = jasmine.createSpyObj('TaxService', {
+ federalIncomeTax: 0,
+ stateIncomeTax: 0,
+ socialSecurity: 0,
+ medicare: 0,
+ });
+ TestBed.configureTestingModule({
+ providers: [PayrollService, { provide: TaxService, useValue: taxServiceSpy }],
+ });
+ });
+
+ it('does some test where it is injected', inject([PayrollService], (service: PayrollService) => {
+ expect(service).toBeTruthy();
+ }));
+
+ it('does some test where it is manually built', () => {
+ const service = new PayrollService(taxServiceSpy);
+ expect(service).toBeTruthy();
+ });
+});
+```
+
+#### Testing HTTP Data Services
+
+Most services that perform HTTP operations will use Angular's HttpClient service in order to perform those operations. For such tests, it is suggested to use Angular's `HttpClientTestingModule`. For detailed documentation of this module, please see Angular's Angular's Testing HTTP requests guide.
+
+This basic setup for such a test looks like this:
+
+```tsx
+import { HttpBackend, HttpClient } from '@angular/common/http';
+import { HttpTestingController, HttpClientTestingModule } from '@angular/common/http/testing';
+import { TestBed, inject } from '@angular/core/testing';
+
+import { IssTrackingDataService } from './iss-tracking-data.service';
+
+describe('IssTrackingDataService', () => {
+ let httpClient: HttpClient;
+ let httpTestingController: HttpTestingController;
+ let issTrackingDataService: IssTrackingDataService;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ imports: [HttpClientTestingModule],
+ providers: [IssTrackingDataService],
+ });
+
+ httpClient = TestBed.get(HttpClient);
+ httpTestingController = TestBed.get(HttpTestingController);
+ issTrackingDataService = new IssTrackingDataService(httpClient);
+ });
+
+ it('exists', inject([IssTrackingDataService], (service: IssTrackingDataService) => {
+ expect(service).toBeTruthy();
+ }));
+
+ describe('location', () => {
+ it('gets the location of the ISS now', () => {
+ issTrackingDataService.location().subscribe((x) => {
+ expect(x).toEqual({ longitude: -138.1719, latitude: 44.4423 });
+ });
+ const req = httpTestingController.expectOne('http://api.open-notify.org/iss-now.json');
+ expect(req.request.method).toEqual('GET');
+ req.flush({
+ iss_position: { longitude: '-138.1719', latitude: '44.4423' },
+ timestamp: 1525950644,
+ message: 'success',
+ });
+ httpTestingController.verify();
+ });
+ });
+});
+```
+
+### Pipes
+
+A pipe is like a service with a specifically defined interface. It is a class that contains one public method, `transform`, which manipulates the input value (and other optional arguments) in order to create the output that is rendered on the page. To test a pipe: instantiate the pipe, call the transform method, and verify the results.
+
+As a simple example, let's look at a pipe that takes a `Person` object and formats the name. For the sake of simplicity, let's say a `Person` consists of an `id`, `firstName`, `lastName`, and `middleInitial`. The requirements for the pipe are to print the name as "Last, First M." handling situations where a first name, last name, or middle initial do not exist. Such a test might look like this:
+
+```tsx
+import { NamePipe } from './name.pipe';
+
+import { Person } from '../../models/person';
+
+describe('NamePipe', () => {
+ let pipe: NamePipe;
+ let testPerson: Person;
+
+ beforeEach(() => {
+ pipe = new NamePipe();
+ testPerson = {
+ id: 42,
+ firstName: 'Douglas',
+ lastName: 'Adams',
+ middleInitial: 'N',
+ };
+ });
+
+ it('exists', () => {
+ expect(pipe).toBeTruthy();
+ });
+
+ it('formats a full name properly', () => {
+ expect(pipe.transform(testPerson)).toBeEqual('Adams, Douglas N.');
+ });
+
+ it('handles having no middle initial', () => {
+ delete testPerson.middleInitial;
+ expect(pipe.transform(testPerson)).toBeEqual('Adams, Douglas');
+ });
+
+ it('handles having no first name', () => {
+ delete testPerson.firstName;
+ expect(pipe.transform(testPerson)).toBeEqual('Adams N.');
+ });
+
+ it('handles having no last name', () => {
+ delete testPerson.lastName;
+ expect(pipe.transform(testPerson)).toBeEqual('Douglas N.');
+ });
+});
+```
+
+It is also beneficial to exercise the pipe via DOM testing in the components and pages that utilize the pipe.
+
+## End-to-end Testing
+
+End-to-end testing is used to verify that an application works as a whole and often includes a connection to live data. Whereas unit tests focus on code units in isolation and thus allow for low-level testing of the application logic, end-to-end tests focus on various user stories or usage scenarios, providing high-level testing of the overall flow of data through the application. Whereas unit tests try to uncover problems with an application's logic, end-to-end tests try to uncover problems that occur when those individual units are used together. End-to-end tests uncover problems with the overall architecture of the application.
+
+Since end-to-end tests exercise user stories and cover the application as a whole rather than individual code modules, end-to-end tests exist in their own application in the project apart from the code for the main application itself. Most end-to-end tests operate by automating common user interactions with the application and examining the DOM to determine the results of those interactions.
+
+### Test Structure
+
+When an `@ionic/angular` application is generated, a default end-to-end test application is generated in the `e2e` folder. This application uses Protractor to control the browser and Jasmine to structure and execute the tests. The application initially consists of four files:
+
+- `protractor.conf.js` - the Protractor configuration file
+- `tsconfig.e2e.json` - specific TypeScript configuration for the testing application
+- `src/app.po.ts` - a page object containing methods that navigate the application, query elements in the DOM, and maninpulate elements on the page
+- `src/app.e2e-spec.ts` - a testing script
+
+#### Page Objects
+
+End-to-end tests operate by automating common user interactions with the application, waiting for the application to respond, and examining the DOM to determine the results of the interaction. This involves a lot of DOM manipulation and examination. If this were all done manually, the tests would be very brittle and difficult to read and maintain.
+
+Page objects encapsulate the HTML for a single page in a TypeScript class, providing an API that the test scripts use to interact with the application. The encapsulation of the DOM manipulation logic in page objects makes the tests more readable and far easier to reason about, lowering the maintenance costs of the test. Creating well-crafted page objects is the key to creating high quality and maintainable end-to-end tests.
+
+##### Base Page Object
+
+A lot of tests rely on actions such as waiting for a page to be visible, entering text into an input, and clicking a button. The methods used to do this remain consistent with only the CSS selectors used to get the appropriate DOM element changing. Therefore it makes sense to abstract this logic into a base class that can be used by the other page objects.
+
+Here is an example that implements a few basic methods that all page objects will need to support.
+
+```tsx
+import { browser, by, element, ExpectedConditions } from 'protractor';
+
+export class PageObjectBase {
+ private path: string;
+ protected tag: string;
+
+ constructor(tag: string, path: string) {
+ this.tag = tag;
+ this.path = path;
+ }
+
+ load() {
+ return browser.get(this.path);
+ }
+
+ rootElement() {
+ return element(by.css(this.tag));
+ }
+
+ waitUntilInvisible() {
+ browser.wait(ExpectedConditions.invisibilityOf(this.rootElement()), 3000);
+ }
+
+ waitUntilPresent() {
+ browser.wait(ExpectedConditions.presenceOf(this.rootElement()), 3000);
+ }
+
+ waitUntilNotPresent() {
+ browser.wait(ExpectedConditions.not(ExpectedConditions.presenceOf(this.rootElement())), 3000);
+ }
+
+ waitUntilVisible() {
+ browser.wait(ExpectedConditions.visibilityOf(this.rootElement()), 3000);
+ }
+
+ getTitle() {
+ return element(by.css(`${this.tag} ion-title`)).getText();
+ }
+
+ protected enterInputText(sel: string, text: string) {
+ const el = element(by.css(`${this.tag} ${sel}`));
+ const inp = el.element(by.css('input'));
+ inp.sendKeys(text);
+ }
+
+ protected enterTextareaText(sel: string, text: string) {
+ const el = element(by.css(`${this.tag} ${sel}`));
+ const inp = el.element(by.css('textarea'));
+ inp.sendKeys(text);
+ }
+
+ protected clickButton(sel: string) {
+ const el = element(by.css(`${this.tag} ${sel}`));
+ browser.wait(ExpectedConditions.elementToBeClickable(el));
+ el.click();
+ }
+}
+```
+
+##### Per-Page Abstractions
+
+Each page in the application will have its own page object class that abstracts the elements on that page. If a base page object class is used, creating the page object involves mostly creating custom methods for elements that are specific to that page. Often, these custom elements take advantage of methods in the base class in order to perform the work that is required.
+
+Here is an example page object for a simple but typical login page. Notice that many of the methods, such as `enterEMail()`, call methods in the base class that perform the bulk of the work.
+
+```tsx
+import { browser, by, element, ExpectedConditions } from 'protractor';
+import { PageObjectBase } from './base.po';
+
+export class LoginPage extends PageObjectBase {
+ constructor() {
+ super('app-login', '/login');
+ }
+
+ waitForError() {
+ browser.wait(ExpectedConditions.presenceOf(element(by.css('.error'))), 3000);
+ }
+
+ getErrorMessage() {
+ return element(by.css('.error')).getText();
+ }
+
+ enterEMail(email: string) {
+ this.enterInputText('#email-input', email);
+ }
+
+ enterPassword(password: string) {
+ this.enterInputText('#password-input', password);
+ }
+
+ clickSignIn() {
+ this.clickButton('#signin-button');
+ }
+}
+```
+
+#### Testing Scripts
+
+Similar to unit tests, end-to-end test scripts consist of nested `describe()` and `it()` functions. In the case of end-to-end tests, the `describe()` functions generally denote specific scenarios with the `it()` functions denoting specific behaviors that should be exhibited by the application as actions are performed within that scenario.
+
+Also similar to unit tests, the labels used in the `describe()` and `it()` functions should make sense both with the "describe" or "it" and when concatenated together to form the complete test case.
+
+Here is a sample end-to-end test script that exercises some typical login scenarios.
+
+```tsx
+import { AppPage } from '../page-objects/pages/app.po';
+import { AboutPage } from '../page-objects/pages/about.po';
+import { CustomersPage } from '../page-objects/pages/customers.po';
+import { LoginPage } from '../page-objects/pages/login.po';
+import { MenuPage } from '../page-objects/pages/menu.po';
+import { TasksPage } from '../page-objects/pages/tasks.po';
+
+describe('Login', () => {
+ const about = new AboutPage();
+ const app = new AppPage();
+ const customers = new CustomersPage();
+ const login = new LoginPage();
+ const menu = new MenuPage();
+ const tasks = new TasksPage();
+
+ beforeEach(() => {
+ app.load();
+ });
+
+ describe('before logged in', () => {
+ it('displays the login screen', () => {
+ expect(login.rootElement().isDisplayed()).toEqual(true);
+ });
+
+ it('allows in-app navigation to about', () => {
+ menu.clickAbout();
+ about.waitUntilVisible();
+ login.waitUntilInvisible();
+ });
+
+ it('does not allow in-app navigation to tasks', () => {
+ menu.clickTasks();
+ app.waitForPageNavigation();
+ expect(login.rootElement().isDisplayed()).toEqual(true);
+ });
+
+ it('does not allow in-app navigation to customers', () => {
+ menu.clickCustomers();
+ app.waitForPageNavigation();
+ expect(login.rootElement().isDisplayed()).toEqual(true);
+ });
+
+ it('displays an error message if the login fails', () => {
+ login.enterEMail('test@test.com');
+ login.enterPassword('bogus');
+ login.clickSignIn();
+ login.waitForError();
+ expect(login.getErrorMessage()).toEqual('The password is invalid or the user does not have a password.');
+ });
+
+ it('navigates to the tasks page if the login succeeds', () => {
+ login.enterEMail('test@test.com');
+ login.enterPassword('testtest');
+ login.clickSignIn();
+ tasks.waitUntilVisible();
+ });
+ });
+
+ describe('once logged in', () => {
+ beforeEach(() => {
+ tasks.waitUntilVisible();
+ });
+
+ it('allows navigation to the customers page', () => {
+ menu.clickCustomers();
+ customers.waitUntilVisible();
+ tasks.waitUntilInvisible();
+ });
+
+ it('allows navigation to the about page', () => {
+ menu.clickAbout();
+ about.waitUntilVisible();
+ tasks.waitUntilInvisible();
+ });
+
+ it('allows navigation back to the tasks page', () => {
+ menu.clickAbout();
+ tasks.waitUntilInvisible();
+ menu.clickTasks();
+ tasks.waitUntilVisible();
+ });
+ });
+});
+```
+
+### Configuration
+
+The default configuration uses the same `environment.ts` file that is used for development. In order to provide better control over the data used by the end-to-end tests, it is often useful to create a specific environment for testing and use that environment for the tests. This section shows one possible way to create this configuration.
+
+#### Testing Environment
+
+Setting up a testing environment involves creating a new environment file that uses a dedicated testing backend, updating the `angular.json` file to use that environment, and modifying the `e2e` script in the `package.json` to specify the `test` environment.
+
+##### Create the `environment.e2e.ts` File
+
+The Angular `environment.ts` and `environment.prod.ts` files are often used to store information such as the base URL for the application's backend data services. Create an `environment.e2e.ts` that provides the same information, only connecting to backend services that are dedicated to testing rather than the development or production backend services. Here is an example:
+
+```tsx
+export const environment = {
+ production: false,
+ databaseURL: 'https://e2e-test-api.my-great-app.com',
+ projectId: 'my-great-app-e2e',
+};
+```
+
+##### Modify the `angular.json` File
+
+The `angular.json` file needs to be modified to use this file. This is a layered process. Follow the XPaths listed below to add the configuration that is required.
+
+Add a configuration at `/projects/app/architect/build/configurations` called `test` that does the file replacement:
+
+```json
+"test": {
+ "fileReplacements": [
+ {
+ "replace": "src/environments/environment.ts",
+ "with": "src/environments/environment.e2e.ts"
+ }
+ ]
+}
+```
+
+Add a configuration at `/projects/app/architect/serve/configurations` called `test` that points the browser target at the `test` build configuration that was defined above.
+
+```json
+"test": {
+ "browserTarget": "app:build:test"
+}
+```
+
+Add a configuration at `/projects/app-e2e/architect/e2e/configurations` called `test` that does points the dev server target at the `test` serve configuration defined above.
+
+```json
+"test": {
+ "devServerTarget": "app:serve:test"
+}
+```
+
+##### Modify the `package.json` File
+
+Modify the `package.json` file so that `npm run e2e` uses the `test` configuration.
+
+```json
+"scripts": {
+ "e2e": "ng e2e --configuration=test",
+ "lint": "ng lint",
+ "ng": "ng",
+ "start": "ng serve",
+ "test": "ng test",
+ "test:dev": "ng test --browsers=ChromeHeadlessCI",
+ "test:ci": "ng test --no-watch --browsers=ChromeHeadlessCI"
+},
+```
+
+#### Test Cleanup
+
+If the end-to-end tests modify data in any way it is helpful to reset the data to a known state once the test completes. One way to do that is to:
+
+1. Create an endpoint that performs the cleanup.
+1. Add a `onCleanUp()` function to the `config` object exported by the `protractor.conf.js` file.
+
+Here is an example:
+
+```javascript
+onCleanUp() {
+ const axios = require('axios');
+ return axios
+ .post(
+ 'https://e2e-test-api.my-great-app.com/purgeDatabase',
+ {}
+ )
+ .then(res => {
+ console.log(res.data);
+ })
+ .catch(err => console.log(err));
+}
+```
diff --git a/versioned_docs/version-v6/angular/virtual-scroll.md b/versioned_docs/version-v6/angular/virtual-scroll.md
new file mode 100644
index 00000000000..3d0c0caebbb
--- /dev/null
+++ b/versioned_docs/version-v6/angular/virtual-scroll.md
@@ -0,0 +1,129 @@
+# Virtual Scroll
+
+In the past, we have provided an `ion-virtual-scroll` component in Ionic Framework to help with list virtualization. At the time this was not available in Angular, but recently Angular has provided its own solution via the `@angular/cdk` package.
+
+## Setup
+
+To setup the CDK Scroller, first install `@angular/cdk`:
+
+```shell
+npm add @angular/cdk
+```
+
+This provides a collection of different utilities, but we'll focus on `ScrollingModule` for now.
+
+When we want to use the CDK Scroller, we'll need to import the module in our component. For example, in a tabs starter project, we can add our import to the `tabs1.module.ts` file.
+
+```diff
+ import { IonicModule } from '@ionic/angular';
+ import { NgModule } from '@angular/core';
+ import { CommonModule } from '@angular/common';
+ import { FormsModule } from '@angular/forms';
+ import { Tab1Page } from './tab1.page';
+ import { ExploreContainerComponentModule } from '../explore-container/explore-container.module';
++ import { ScrollingModule } from '@angular/cdk/scrolling';
+ import { Tab1PageRoutingModule } from './tab1-routing.module';
+ @NgModule({
+ imports: [
+ IonicModule,
+ CommonModule,
+ FormsModule,
+ ExploreContainerComponentModule,
+ Tab1PageRoutingModule,
++ ScrollingModule
+ ],
+ declarations: [Tab1Page]
+ })
+ export class Tab1PageModule {}
+```
+
+With this added, we have access to the Virtual Scroller in the Tab1Page component.
+
+## Usage
+
+The CDK Virtual Scroller can be added to a component by adding the `cdk-virtual-scroll-viewport` to a component's template.
+
+```html
+
+
+
+```
+
+`cdk-virtual-scroll-viewport` becomes the root of our scrollable content and is responsible for recycling DOM nodes as they scroll out of view.
+
+The DOM nodes at this point can be any content needed for an app. The difference is that when we want to iterate over a collection, `*cdkVirtualFor` is used instead of `*ngFor`.
+
+```html
+
+
+
+
+
+ 
+
+ {{item }}
+
+
+
+
+```
+
+Here, `items` is an array, but it can be an array, `Observable`, or `DataSource`. `DataSource` is an abstract class that can provide the data needed as well as utility methods. For more details, check out the [CDK Virtual Scrolling docs](https://material.angular.io/cdk/scrolling/overview).
+
+The component is not complete yet as the `cdk-virtual-scroll-viewport` needs to know how big each node will be as well as the min/max buffer sizes.
+
+At the moment, CDK Virtual Scroller only supports fixed sized elements, but dynamic sized elements are planned for the future. For the `Tab1Page` component, since it is only rendering an item, it can be hard-coded to a fixed size.
+
+The min/max buffer size tells the scroller "render as many nodes as it takes to meet this minimum height, but not over this".
+
+```html
+
+```
+
+For this case, the `cdk-virtual-scroll-viewport` will render cells at a height 56px until it reaches a height of 900px, but no more at 1350px. These numbers are arbitrary, so be sure to test out what values will work in a real use case.
+
+Putting everything together, the final HTML should look like:
+
+```html
+
+
+
+
+
+
+
+ {{item }}
+
+
+
+
+```
+
+The last piece needed is a some CSS to size the viewport correctly. In the `tab1.page.scss` file, add the following
+
+```scss
+cdk-virtual-scroll-viewport {
+ height: 100%;
+ width: 100%;
+}
+```
+
+Since the viewport is built to fit various use cases, the default sizing is not set and is up to developers to set.
+
+## Usage with Ionic Components
+
+Ionic Framework requires that features such as collapsible large titles, `ion-infinite-scroll`, `ion-refresher`, and `ion-reorder-group` be used within an `ion-content`. To use these experiences with virtual scrolling, you must add the `.ion-content-scroll-host` class to the virtual scroll viewport.
+
+For example:
+
+```html
+
+
+
+
+
+```
+
+## Further Reading
+
+This only covers a small portion of what the CDK Virtual Scroller is capable of. For more details, please see the [Angular CDK Virtual Scrolling docs](https://material.angular.io/cdk/scrolling/overview).
\ No newline at end of file
diff --git a/versioned_docs/version-v6/angular/your-first-app.md b/versioned_docs/version-v6/angular/your-first-app.md
new file mode 100644
index 00000000000..3a6f63286ef
--- /dev/null
+++ b/versioned_docs/version-v6/angular/your-first-app.md
@@ -0,0 +1,176 @@
+---
+title: 'Your First Ionic App: Angular'
+sidebar_label: Build Your First App
+---
+
+
+ Build Your First Ionic Mobile App: Angular Development Tutorial
+
+
+
+The great thing about Ionic is that with one codebase, you can build for any platform using just HTML, CSS, and JavaScript. Follow along as we learn the fundamentals of Ionic app development by creating a realistic app step by step.
+
+Hereâs the finished app running on all 3 platforms:
+
+
+
+:::note
+Looking for the previous version of this guide that covered Ionic 4 and Cordova? [See here.](../developer-resources/guides/first-app-v4/intro.md)
+:::
+
+## What We'll Build
+
+We'll create a Photo Gallery app that offers the ability to take photos with your device's camera, display them in a grid, and store them permanently on the device.
+
+Highlights include:
+
+- One Angular-based codebase that runs on the web, iOS, and Android using Ionic Framework [UI components](https://ionicframework.com/docs/components).
+- Deployed as a native iOS and Android mobile app using [Capacitor](https://capacitorjs.com), Ionic's official native app runtime.
+- Photo Gallery functionality powered by the Capacitor [Camera](https://capacitorjs.com/docs/apis/camera), [Filesystem](https://capacitorjs.com/docs/apis/filesystem), and [Preferences](https://capacitorjs.com/docs/apis/preferences) APIs.
+
+Find the complete app code referenced in this guide [on GitHub](https://github.com/ionic-team/photo-gallery-capacitor-ng).
+
+## Download Required Tools
+
+Download and install these right away to ensure an optimal Ionic development experience:
+
+- **Node.js** for interacting with the Ionic ecosystem. [Download the LTS version here](https://nodejs.org/en/).
+- **A code editor** for... writing code! We are fans of [Visual Studio Code](https://code.visualstudio.com/).
+- **Command-line interface/terminal (CLI)**:
+ - **Windows** users: for the best Ionic experience, we recommend the built-in command line (cmd) or the Powershell
+ CLI, running in Administrator mode.
+ - **Mac/Linux** users, virtually any terminal will work.
+
+## Install Ionic Tooling
+
+Run the following in the command line terminal to install the Ionic CLI (`ionic`), `native-run`, used to run native binaries on devices and simulators/emulators, and `cordova-res`, used to generate native app icons and splash screens:
+
+:::note
+To open a terminal in Visual Studio Code, go to Terminal -> New Terminal.
+:::
+
+```shell
+npm install -g @ionic/cli native-run cordova-res
+```
+
+:::note
+The `-g` option means _install globally_. When packages are installed globally, `EACCES` permission errors can occur.
+
+Consider setting up npm to operate globally without elevated permissions. See [Resolving Permission Errors](../developing/tips.md#resolving-permission-errors) for more information.
+:::
+
+## Create an App
+
+Next, create an Ionic Angular app that uses the âTabsâ starter template and adds Capacitor for native functionality:
+
+```shell
+ionic start photo-gallery tabs --type=angular --capacitor
+```
+
+This starter project comes complete with three pre-built pages and best practices for Ionic development. With common building blocks already in place, we can add more features easily!
+
+Next, change into the app folder:
+
+```shell
+cd photo-gallery
+```
+
+Next we'll need to install the necessary Capacitor plugins to make the app's native functionality work:
+
+```shell
+npm install @capacitor/camera @capacitor/preferences @capacitor/filesystem
+```
+
+### PWA Elements
+
+Some Capacitor plugins, including the Camera API, provide the web-based functionality and UI via the Ionic [PWA Elements library](https://github.com/ionic-team/ionic-pwa-elements).
+
+It's a separate dependency, so install it next:
+
+```shell
+npm install @ionic/pwa-elements
+```
+
+Next, import `@ionic/pwa-elements` by editing `src/main.ts`.
+
+```tsx
+import { defineCustomElements } from '@ionic/pwa-elements/loader';
+
+// Call the element loader after the platform has been bootstrapped
+defineCustomElements(window);
+```
+
+Thatâs it! Now for the fun part - letâs see the app in action.
+
+## Run the App
+
+Run this command next:
+
+```shell
+ionic serve
+```
+
+And voilà ! Your Ionic app is now running in a web browser. Most of your app can be built and tested right in the browser, greatly increasing development and testing speed.
+
+## Photo Gallery!!!
+
+There are three tabs. Click on the Tab2 tab. Itâs a blank canvas, aka the perfect spot to transform into a Photo Gallery. The Ionic CLI features Live Reload, so when you make changes and save them, the app is updated immediately!
+
+
+
+Open the photo-gallery app folder in your code editor of choice, then navigate to `/src/app/tab2/tab2.page.html`. We see:
+
+```html
+
+
+ Tab 2
+
+
+
+
+
+
+ Tab 2
+
+
+
+```
+
+`ion-header` represents the top navigation and toolbar, with "Tab 2" as the title (there are two of them due to iOS [Collapsible Large Title](https://ionicframework.com/docs/api/title#collapsible-large-titles) support). Rename both `ion-title` elements to:
+
+```html
+Photo Gallery
+```
+
+We put the visual aspects of our app into ``. In this case, itâs where weâll add a button that opens the deviceâs camera as well as displays the image captured by the camera. Start by adding a [floating action button](https://ionicframework.com/docs/api/fab) (FAB) to the bottom of the page and set the camera image as the icon.
+
+```html
+
+
+
+
+
+
+
+```
+
+Next, open `src/app/tabs/tabs.page.html`. Change the label to âPhotosâ and the icon name to âimagesâ:
+
+```html
+
+
+ Photos
+
+```
+
+Save all changes to see them automatically applied in the browser. Thatâs just the start of all the cool things we can do with Ionic. Up next, implement camera taking functionality on the web, then build it for iOS and Android.
diff --git a/versioned_docs/version-v6/angular/your-first-app/2-taking-photos.md b/versioned_docs/version-v6/angular/your-first-app/2-taking-photos.md
new file mode 100644
index 00000000000..73b6d20533f
--- /dev/null
+++ b/versioned_docs/version-v6/angular/your-first-app/2-taking-photos.md
@@ -0,0 +1,134 @@
+---
+title: Taking Photos with the Camera
+sidebar_label: Taking Photos
+---
+
+
+ Build Camera API for iOS, Android & Web | Ionic Capacitor Camera
+
+
+
+Now for the fun part - adding the ability to take photos with the deviceâs camera using the Capacitor [Camera API](https://capacitorjs.com/docs/apis/camera). Weâll begin with building it for the web, then make some small tweaks to make it work on mobile (iOS and Android).
+
+## Photo Service
+
+All Capacitor logic (Camera usage and other native features) will be encapsulated in a service class. Create `PhotoService` using the `ionic generate` command:
+
+```shell
+ionic g service services/photo
+```
+
+Open the new `services/photo.service.ts` file, and letâs add the logic that will power the camera functionality. First, import Capacitor dependencies and get references to the Camera, Filesystem, and Storage plugins:
+
+```tsx
+import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';
+import { Filesystem, Directory } from '@capacitor/filesystem';
+import { Preferences } from '@capacitor/preferences';
+```
+
+Next, define a new class method, `addNewToGallery`, that will contain the core logic to take a device photo and save it to the filesystem. Letâs start by opening the device camera:
+
+```tsx
+public async addNewToGallery() {
+ // Take a photo
+ const capturedPhoto = await Camera.getPhoto({
+ resultType: CameraResultType.Uri,
+ source: CameraSource.Camera,
+ quality: 100
+ });
+}
+```
+
+Notice the magic here: there's no platform-specific code (web, iOS, or Android)! The Capacitor Camera plugin abstracts that away for us, leaving just one method call - `Camera.getPhoto()` - that will open up the device's camera and allow us to take photos.
+
+Next, open up `tab2.page.ts` and import the PhotoService class and add a method that calls the `addNewToGallery` method on the imported service:
+
+```tsx
+import { PhotoService } from '../services/photo.service';
+
+constructor(public photoService: PhotoService) { }
+
+addPhotoToGallery() {
+ this.photoService.addNewToGallery();
+}
+```
+
+Then, open `tab2.page.html` and call the `addPhotoToGallery()` function when the FAB is tapped/clicked:
+
+```html
+
+
+
+
+
+
+
+```
+
+Save the file, and if it's not running already, restart the development server in your browser by running `ionic serve`. On the Photo Gallery tab, click the Camera button. If your computer has a webcam of any sort, a modal window appears. Take a selfie!
+
+
+
+_(Your selfie is probably much better than mine)_
+
+After taking a photo, it disappears right away. We need to display it within our app and save it for future access.
+
+## Displaying Photos
+
+Outside of the `PhotoService` class definition (the very bottom of the file), create a new interface, `UserPhoto`, to hold our photo metadata:
+
+```tsx
+export interface UserPhoto {
+ filepath: string;
+ webviewPath: string;
+}
+```
+
+Back at the top of the file, define an array of Photos, which will contain a reference to each photo captured with the Camera.
+
+```tsx
+export class PhotoService {
+ public photos: UserPhoto[] = [];
+
+ // other code
+}
+```
+
+Over in the `addNewToGallery` function, add the newly captured photo to the beginning of the Photos array.
+
+```tsx
+ const capturedPhoto = await Camera.getPhoto({
+ resultType: CameraResultType.Uri,
+ source: CameraSource.Camera,
+ quality: 100
+ });
+
+ this.photos.unshift({
+ filepath: "soon...",
+ webviewPath: capturedPhoto.webPath
+ });
+}
+```
+
+Next, move over to `tab2.page.html` so we can display the image on the screen. Add a [Grid component](https://ionicframework.com/docs/api/grid) so that each photo will display nicely as photos are added to the gallery, and loop through each photo in the `PhotoServices`'s Photos array, adding an Image component (``) for each. Point the `src` (source) at the photoâs path:
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+```
+
+Save all files. Within the web browser, click the Camera button and take another photo. This time, the photo is displayed in the Photo Gallery!
+
+Up next, weâll add support for saving the photos to the filesystem, so they can be retrieved and displayed in our app at a later time.
diff --git a/versioned_docs/version-v6/angular/your-first-app/3-saving-photos.md b/versioned_docs/version-v6/angular/your-first-app/3-saving-photos.md
new file mode 100644
index 00000000000..27109d61432
--- /dev/null
+++ b/versioned_docs/version-v6/angular/your-first-app/3-saving-photos.md
@@ -0,0 +1,81 @@
+---
+sidebar_label: Saving Photos
+---
+
+# Saving Photos to the Filesystem
+
+Weâre now able to take multiple photos and display them in a photo gallery on the second tab of our app. These photos, however, are not currently being stored permanently, so when the app is closed, they will be deleted.
+
+## Filesystem API
+
+Fortunately, saving them to the filesystem only takes a few steps. Begin by creating a new class method, `savePicture()`, in the `PhotoService` class (`src/app/services/photo.service.ts`). We pass in the `photo` object, which represents the newly captured device photo:
+
+```tsx
+private async savePicture(photo: Photo) { }
+```
+
+We can use this new method immediately in `addNewToGallery()`:
+
+```tsx
+public async addNewToGallery() {
+ // Take a photo
+ const capturedPhoto = await Camera.getPhoto({
+ resultType: CameraResultType.Uri, // file-based data; provides best performance
+ source: CameraSource.Camera, // automatically take a new photo with the camera
+ quality: 100 // highest quality (0 to 100)
+ });
+
+ // Save the picture and add it to photo collection
+ const savedImageFile = await this.savePicture(capturedPhoto);
+ this.photos.unshift(savedImageFile);
+}
+```
+
+Weâll use the Capacitor [Filesystem API](https://capacitorjs.com/docs/apis/filesystem) to save the photo to the filesystem. To start, convert the photo to base64 format, then feed the data to the Filesystemâs `writeFile` function. As youâll recall, we display each photo on the screen by setting each imageâs source path (`src` attribute) in `tab2.page.html` to the webviewPath property. So, set it then return the new Photo object.
+
+```tsx
+private async savePicture(photo: Photo) {
+ // Convert photo to base64 format, required by Filesystem API to save
+ const base64Data = await this.readAsBase64(photo);
+
+ // Write the file to the data directory
+ const fileName = new Date().getTime() + '.jpeg';
+ const savedFile = await Filesystem.writeFile({
+ path: fileName,
+ data: base64Data,
+ directory: Directory.Data
+ });
+
+ // Use webPath to display the new image instead of base64 since it's
+ // already loaded into memory
+ return {
+ filepath: fileName,
+ webviewPath: photo.webPath
+ };
+}
+```
+
+`readAsBase64()` is a helper function weâll define next. It's useful to organize via a separate method since it requires a small amount of platform-specific (web vs. mobile) logic - more on that in a bit. For now, implement the logic for running on the web:
+
+```tsx
+private async readAsBase64(photo: Photo) {
+ // Fetch the photo, read as a blob, then convert to base64 format
+ const response = await fetch(photo.webPath!);
+ const blob = await response.blob();
+
+ return await this.convertBlobToBase64(blob) as string;
+}
+
+private convertBlobToBase64 = (blob: Blob) => new Promise((resolve, reject) => {
+ const reader = new FileReader();
+ reader.onerror = reject;
+ reader.onload = () => {
+ resolve(reader.result);
+ };
+ reader.readAsDataURL(blob);
+});
+```
+
+Obtaining the camera photo as base64 format on the web appears to be a bit trickier than on mobile. In reality, weâre just using built-in web APIs: [fetch()](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) as a neat way to read the file into blob format, then FileReaderâs [readAsDataURL()](https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL) to convert the photo blob to base64.
+
+There we go! Each time a new photo is taken, itâs now automatically saved to the filesystem.
diff --git a/versioned_docs/version-v6/angular/your-first-app/4-loading-photos.md b/versioned_docs/version-v6/angular/your-first-app/4-loading-photos.md
new file mode 100644
index 00000000000..1e6896557cf
--- /dev/null
+++ b/versioned_docs/version-v6/angular/your-first-app/4-loading-photos.md
@@ -0,0 +1,69 @@
+---
+sidebar_label: Loading Photos
+---
+
+# Loading Photos from the Filesystem
+
+Weâve implemented photo taking and saving to the filesystem. Thereâs one last piece of functionality missing: the photos are stored in the filesystem, but we need a way to save pointers to each file so that they can be displayed again in the photo gallery.
+
+Fortunately, this is easy: weâll leverage the Capacitor [Preferences API](https://capacitorjs.com/docs/apis/preferences) to store our array of Photos in a key-value store.
+
+## Preferences API
+
+Begin by defining a constant variable that will act as the key for the store:
+
+```tsx
+export class PhotoService {
+ public photos: UserPhoto[] = [];
+ private PHOTO_STORAGE: string = 'photos';
+
+ // other code
+}
+```
+
+Next, at the end of the `addNewToGallery` function, add a call to `Preferences.set()` to save the Photos array. By adding it here, the Photos array is stored each time a new photo is taken. This way, it doesnât matter when the app user closes or switches to a different app - all photo data is saved.
+
+```tsx
+Preferences.set({
+ key: this.PHOTO_STORAGE,
+ value: JSON.stringify(this.photos),
+});
+```
+
+With the photo array data saved, create a function called `loadSaved()` that can retrieve that data. We use the same key to retrieve the photos array in JSON format, then parse it into an array:
+
+```tsx
+public async loadSaved() {
+ // Retrieve cached photo array data
+ const photoList = await Preferences.get({ key: this.PHOTO_STORAGE });
+ this.photos = JSON.parse(photoList.value) || [];
+
+ // more to come...
+}
+```
+
+On mobile (coming up next!), we can directly set the source of an image tag - `
` - to each photo file on the Filesystem, displaying them automatically. On the web, however, we must read each image from the Filesystem into base64 format, using a new `base64` property on the `Photo` object. This is because the Filesystem API uses [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API) under the hood. Below is the code you need to add in the `loadSaved()` function you just added:
+
+```tsx
+// Display the photo by reading into base64 format
+for (let photo of this.photos) {
+ // Read each saved photo's data from the Filesystem
+ const readFile = await Filesystem.readFile({
+ path: photo.filepath,
+ directory: Directory.Data,
+ });
+
+ // Web platform only: Load the photo as base64 data
+ photo.webviewPath = `data:image/jpeg;base64,${readFile.data}`;
+}
+```
+
+After, call this new method in `tab2.page.ts` so that when the user first navigates to Tab 2 (the Photo Gallery), all photos are loaded and displayed on the screen.
+
+```tsx
+async ngOnInit() {
+ await this.photoService.loadSaved();
+}
+```
+
+Thatâs it! Weâve built a complete Photo Gallery feature in our Ionic app that works on the web. Next up, weâll transform it into a mobile app for iOS and Android!
diff --git a/versioned_docs/version-v6/angular/your-first-app/5-adding-mobile.md b/versioned_docs/version-v6/angular/your-first-app/5-adding-mobile.md
new file mode 100644
index 00000000000..72ef3429132
--- /dev/null
+++ b/versioned_docs/version-v6/angular/your-first-app/5-adding-mobile.md
@@ -0,0 +1,117 @@
+---
+strip_number_prefixes: false
+---
+
+# Adding Mobile
+
+Our photo gallery app wonât be complete until it runs on iOS, Android, and the web - all using one codebase. All it takes is some small logic changes to support mobile platforms, installing some native tooling, then running the app on a device. Letâs go!
+
+## Import Platform API
+
+Letâs start with making some small code changes - then our app will âjust workâ when we deploy it to a device.
+
+Import the Ionic [Platform API](https://ionicframework.com/docs/angular/platform) into `photo.service.ts`, which is used to retrieve information about the current device. In this case, itâs useful for selecting which code to execute based on the platform the app is running on (web or mobile):
+
+```tsx
+import { Platform } from '@ionic/angular';
+
+export class PhotoService {
+ public photos: UserPhoto[] = [];
+ private PHOTO_STORAGE: string = 'photos';
+ private platform: Platform;
+
+ constructor(platform: Platform) {
+ this.platform = platform;
+ }
+
+ // other code
+}
+```
+
+## Platform-specific Logic
+
+First, weâll update the photo saving functionality to support mobile. In the `readAsBase64()` function, check which platform the app is running on. If itâs âhybridâ (Capacitor or Cordova, two native runtimes), then read the photo file into base64 format using the Filesystem `readFile()` method. Otherwise, use the same logic as before when running the app on the web:
+
+```tsx
+private async readAsBase64(photo: Photo) {
+ // "hybrid" will detect Cordova or Capacitor
+ if (this.platform.is('hybrid')) {
+ // Read the file into base64 format
+ const file = await Filesystem.readFile({
+ path: photo.path
+ });
+
+ return file.data;
+ }
+ else {
+ // Fetch the photo, read as a blob, then convert to base64 format
+ const response = await fetch(photo.webPath);
+ const blob = await response.blob();
+
+ return await this.convertBlobToBase64(blob) as string;
+ }
+}
+```
+
+Next, update the `savePicture()` method. When running on mobile, set `filepath` to the result of the `writeFile()` operation - `savedFile.uri`. When setting the `webviewPath`, use the special `Capacitor.convertFileSrc()` method ([details here](https://ionicframework.com/docs/core-concepts/webview#file-protocol)).
+
+```tsx
+// Save picture to file on device
+ private async savePicture(photo: Photo) {
+ // Convert photo to base64 format, required by Filesystem API to save
+ const base64Data = await this.readAsBase64(photo);
+
+ // Write the file to the data directory
+ const fileName = new Date().getTime() + '.jpeg';
+ const savedFile = await Filesystem.writeFile({
+ path: fileName,
+ data: base64Data,
+ directory: Directory.Data
+ });
+
+ if (this.platform.is('hybrid')) {
+ // Display the new image by rewriting the 'file://' path to HTTP
+ // Details: https://ionicframework.com/docs/building/webview#file-protocol
+ return {
+ filepath: savedFile.uri,
+ webviewPath: Capacitor.convertFileSrc(savedFile.uri),
+ };
+ }
+ else {
+ // Use webPath to display the new image instead of base64 since it's
+ // already loaded into memory
+ return {
+ filepath: fileName,
+ webviewPath: photo.webPath
+ };
+ }
+ }
+```
+
+Next, head back over to the `loadSaved()` function we implemented for the web earlier. On mobile, we can directly set the source of an image tag - `` - to each photo file on the Filesystem, displaying them automatically. Thus, only the web requires reading each image from the Filesystem into base64 format. Update this function to add an _if statement_ around the Filesystem code:
+
+```tsx
+public async loadSaved() {
+ // Retrieve cached photo array data
+ const photoList = await Preferences.get({ key: this.PHOTO_STORAGE });
+ this.photos = JSON.parse(photoList.value) || [];
+
+ // Easiest way to detect when running on the web:
+ // âwhen the platform is NOT hybrid, do thisâ
+ if (!this.platform.is('hybrid')) {
+ // Display the photo by reading into base64 format
+ for (let photo of this.photos) {
+ // Read each saved photo's data from the Filesystem
+ const readFile = await Filesystem.readFile({
+ path: photo.filepath,
+ directory: Directory.Data
+ });
+
+ // Web platform only: Load the photo as base64 data
+ photo.webviewPath = `data:image/jpeg;base64,${readFile.data}`;
+ }
+ }
+}
+```
+
+Our Photo Gallery now consists of one codebase that runs on the web, Android, and iOS. Next up, the part youâve been waiting for - deploying the app to a device.
diff --git a/versioned_docs/version-v6/angular/your-first-app/6-deploying-mobile.md b/versioned_docs/version-v6/angular/your-first-app/6-deploying-mobile.md
new file mode 100644
index 00000000000..e30d8acd79d
--- /dev/null
+++ b/versioned_docs/version-v6/angular/your-first-app/6-deploying-mobile.md
@@ -0,0 +1,114 @@
+---
+title: Deploying to iOS and Android
+sidebar_label: Deploying Mobile
+---
+
+
+ Deploying to iOS and Android Apps - Capacitor Setup on Ionic
+
+
+
+Since we added Capacitor to our project when it was first created, thereâs only a handful of steps remaining until the Photo Gallery app is on our device! Remember, you can find the complete source code for this app [here](https://github.com/ionic-team/photo-gallery-capacitor-ng).
+
+## Capacitor Setup
+
+Capacitor is Ionicâs official app runtime that makes it easy to deploy web apps to native platforms like iOS, Android, and more. If youâve used Cordova in the past, consider reading more about the differences [here](https://capacitorjs.com/docs/cordova#differences-between-capacitor-and-cordova).
+
+If youâre still running `ionic serve` in the terminal, cancel it. Complete a fresh build of your Ionic project, fixing any errors that it reports:
+
+```shell
+ionic build
+```
+
+Next, create both the iOS and Android projects:
+
+```shell
+$ ionic cap add ios
+$ ionic cap add android
+```
+
+Both android and ios folders at the root of the project are created. These are entirely standalone native projects that should be considered part of your Ionic app (i.e., check them into source control, edit them using their native tooling, etc.).
+
+Every time you perform a build (e.g. `ionic build`) that updates your web directory (default: `www`), you'll need to copy those changes into your native projects:
+
+```shell
+ionic cap copy
+```
+
+Note: After making updates to the native portion of the code (such as adding a new plugin), use the `sync` command:
+
+```shell
+ionic cap sync
+```
+
+## iOS Deployment
+
+:::note
+To build an iOS app, youâll need a Mac computer.
+:::
+
+Capacitor iOS apps are configured and managed through Xcode (Appleâs iOS/Mac IDE), with dependencies managed by [CocoaPods](https://cocoapods.org/). Before running this app on an iOS device, there's a couple of steps to complete.
+
+First, run the Capacitor `open` command, which opens the native iOS project in Xcode:
+
+```shell
+ionic cap open ios
+```
+
+In order for some native plugins to work, user permissions must be configured. In our photo gallery app, this includes the Camera plugin: iOS displays a modal dialog automatically after the first time that `Camera.getPhoto()` is called, prompting the user to allow the app to use the Camera. The permission that drives this is labeled âPrivacy - Camera Usage.â To set it, the `Info.plist` file must be modified ([more details here](https://capacitorjs.com/docs/ios/configuration)). To access it, click "Info," then expand "Custom iOS Target Properties."
+
+
+
+Each setting in `Info.plist` has a low-level parameter name and a high-level name. By default, the property list editor shows the high-level names, but it's often useful to switch to showing the raw, low-level names. To do this, right-click anywhere in the property list editor and toggle "Raw Keys/Values."
+
+Add the `NSCameraUsageDescription` Key and set the Value to something that describes why the app needs to use the camera, such as "To Take Photos." The Value field is displayed to the app user when the permission prompt opens.
+
+Follow the same process to add the other two Keys required of the Camera plugin: `NSPhotoLibraryAddUsageDescription` and `NSPhotoLibraryUsageDescription`.
+
+Next, click on `App` in the Project Navigator on the left-hand side, then within the `Signing & Capabilities` section, select your Development Team.
+
+
+
+With permissions in place and Development Team selected, we are ready to try out the app on a real device! Connect an iOS device to your Mac computer, select it (`App -> Matthewâs iPhone` for me) then click the "Build" button to build, install, and launch the app on your device:
+
+
+
+Upon tapping the Camera button on the Photo Gallery tab, the permission prompt will display. Tap OK, then take a picture with the Camera. Afterward, the photo shows in the app!
+
+
+
+## Android Deployment
+
+Capacitor Android apps are configured and managed through Android Studio. Before running this app on an Android device, there's a couple of steps to complete.
+
+First, run the Capacitor `open` command, which opens the native Android project in Android Studio:
+
+```shell
+ionic cap open android
+```
+
+Similar to iOS, we must enable the correct permissions to use the Camera. Configure these in the `AndroidManifest.xml` file. Android Studio will likely open this file automatically, but in case it doesn't, locate it under `android/app/src/main/`.
+
+
+
+Scroll to the `Permissions` section and ensure these entries are included:
+
+```xml
+
+
+```
+
+Save the file. With permissions in place, we are ready to try out the app on a real device! Connect an Android device to your computer. Within Android Studio, click the "Run" button, select the attached Android device, then click OK to build, install, and launch the app on your device.
+
+
+
+Once again, upon tapping the Camera button on the Photo Gallery tab, the permission prompt should be displayed. Tap OK, then take a picture with the Camera. Afterward, the photo should appear in the app.
+
+
+
+Our Photo Gallery app has just been deployed to Android and iOS devices. ð
+
+In the next portion of this tutorial, weâll use the Ionic CLIâs Live Reload functionality to quickly implement photo deletion - thus completing our Photo Gallery feature.
diff --git a/versioned_docs/version-v6/angular/your-first-app/7-live-reload.md b/versioned_docs/version-v6/angular/your-first-app/7-live-reload.md
new file mode 100644
index 00000000000..26fe3b4fbf0
--- /dev/null
+++ b/versioned_docs/version-v6/angular/your-first-app/7-live-reload.md
@@ -0,0 +1,114 @@
+---
+title: Rapid App Development with Live Reload
+sidebar_label: Live Reload
+---
+
+
+
+
+
+So far, weâve seen how easy it is to develop a cross-platform app that works everywhere. The development experience is pretty quick, but what if I told you there was a way to go faster?
+
+We can use the Ionic CLIâs [Live Reload functionality](https://ionicframework.com/docs/cli/livereload) to boost our productivity when building Ionic apps. When active, Live Reload will reload the browser and/or WebView when changes in the app are detected.
+
+## Live Reload
+
+Remember `ionic serve`? That was Live Reload working in the browser, allowing us to iterate quickly.
+
+We can also use it when developing on iOS and Android devices. This is particularly useful when writing code that interacts with native plugins - we must run it on a device to verify that it works. Therefore, being able to quickly write, build, test, and deploy code is crucial to keeping up our development speed.
+
+Letâs use Live Reload to implement photo deletion, the missing piece of our Photo Gallery feature. Select your platform of choice (iOS or Android) and connect a device to your computer. Next, run either command in a terminal, based on your chosen platform:
+
+```shell
+$ ionic cap run ios -l --external
+
+$ ionic cap run android -l --external
+```
+
+The Live Reload server will start up, and the native IDE of choice will open if not opened already. Within the IDE, click the Play button to launch the app onto your device.
+
+## Deleting Photos
+
+With Live Reload running and the app open on your device, letâs implement photo deletion functionality. Open `tab2.page.html` and add a new click handler to each `` element. When the app user taps on a photo in our gallery, weâll display an [Action Sheet](https://ionicframework.com/docs/api/action-sheet) dialog with the option to either delete the selected photo or cancel (close) the dialog.
+
+```html
+
+
+
+```
+
+Over in `tab2.page.ts`, import Action Sheet and add it to the constructor:
+
+```tsx
+import { ActionSheetController } from '@ionic/angular';
+
+constructor(public photoService: PhotoService,
+ public actionSheetController: ActionSheetController) {}
+```
+
+Add `UserPhoto` to the import statement.
+
+```tsx
+import { PhotoService, UserPhoto } from '../services/photo.service';
+```
+
+Next, implement the `showActionSheet()` function. We add two options: `Delete` that calls PhotoServiceâs `deletePicture()` function (to be added next) and `Cancel`, which when given the role of âcancelâ will automatically close the action sheet:
+
+```tsx
+public async showActionSheet(photo: UserPhoto, position: number) {
+ const actionSheet = await this.actionSheetController.create({
+ header: 'Photos',
+ buttons: [{
+ text: 'Delete',
+ role: 'destructive',
+ icon: 'trash',
+ handler: () => {
+ this.photoService.deletePicture(photo, position);
+ }
+ }, {
+ text: 'Cancel',
+ icon: 'close',
+ role: 'cancel',
+ handler: () => {
+ // Nothing to do, action sheet is automatically closed
+ }
+ }]
+ });
+ await actionSheet.present();
+}
+```
+
+Save both of the files we just edited. The Photo Gallery app will reload automatically, and now when we tap on one of the photos in the gallery, the action sheet displays. Tapping âDeleteâ doesnât do anything yet, so head back into your code editor.
+
+In `src/app/services/photo.service.ts`, add the `deletePicture()` function:
+
+```tsx
+public async deletePicture(photo: UserPhoto, position: number) {
+ // Remove this photo from the Photos reference data array
+ this.photos.splice(position, 1);
+
+ // Update photos array cache by overwriting the existing photo array
+ Preferences.set({
+ key: this.PHOTO_STORAGE,
+ value: JSON.stringify(this.photos)
+ });
+
+ // delete photo file from filesystem
+ const filename = photo.filepath
+ .substr(photo.filepath.lastIndexOf('/') + 1);
+
+ await Filesystem.deleteFile({
+ path: filename,
+ directory: Directory.Data
+ });
+}
+```
+
+The selected photo is removed from the Photos array first. Then, we use the Capacitor Preferences API to update the cached version of the Photos array. Finally, we delete the actual photo file itself using the Filesystem API.
+
+Save this file, then tap on a photo again and choose the âDeleteâ option. This time, the photo is deleted! Implemented much faster using Live Reload. ðª
+
+In the final portion of this tutorial, weâll walk you through the basics of the Appflow product used to build and deploy your application to users' devices.
diff --git a/versioned_docs/version-v6/angular/your-first-app/8-distribute.md b/versioned_docs/version-v6/angular/your-first-app/8-distribute.md
new file mode 100644
index 00000000000..44b3781b476
--- /dev/null
+++ b/versioned_docs/version-v6/angular/your-first-app/8-distribute.md
@@ -0,0 +1,100 @@
+---
+sidebar_label: Distribute
+---
+
+# Build and Deploy your App
+
+Now that you have built your first app, you are going to want to get it distributed so everyone can start using it. The mechanics of building and deploying your application can be quite cumbersome. That is where [Appflow](https://ionic.io/docs/appflow/) comes into play. Appflow allows you to effectively generate web and native builds, push out live app updates, publish your app to the app stores, and automate the whole process. The entire Quickstart guide can be found [here](https://ionic.io/docs/appflow/quickstart).
+
+Below we will run through an overview of the steps.
+
+## Connect Your Repo
+
+Appflow works directly with Git version control and uses your existing code base as the source of truth for Deploy and Package builds. You will first need to integrate with your hosting service, such as GitHub or Bitbucket, or you can push your code directly to Appflow. Once this is completed, Appflow will have access to your code.
+
+For more on connecting your code repository to Appflow, checkout the [Connect your Repo](https://ionic.io/docs/appflow/quickstart/connect) section inside the Appflow docs.
+
+## Install the Appflow SDK
+
+The Appflow SDK (also known as Ionic Deploy plugin) will allow you to take advantage of arguably two of the best Appflow features: deploying live updates to your app and bypassing the app stores. Ionic Appflow's Live Update feature is shipped with Appflow SDK and features the capabilities of detecting and syncing the updates for your app that you have pushed to your identified channels within the dashboard.
+
+To get the Appflow SDK plugin added to your project, you can follow the install instructions within the Appflow Dashboard by clicking on "Install Instructions" inside of the `Deploy > Destinations` section. Alternatively, you can install the plugin manually by excuting the following command in your app's root directory:
+
+```shell
+ionic deploy add \
+ --app-id="YOUR_APP_ID" \
+ --channel-name="YOUR_CHANNEL_NAME" \
+ --update-method="background|auto|none" \
+```
+
+For prerequisite and additional instructions on installing the Appflow SDK, visit the [Install the Appflow SDK](https://ionic.io/docs/appflow/quickstart/installation) section inside the Appflow docs.
+
+## Push a Commit
+
+In order for Appflow to access the latest and greatest changes to your code, you will need to push a commit via the version control integration of your choosing. For those that use GitHub or Bitbucket, this would look as follows:
+
+```shell
+git add . # stage any changes
+git commit -m "added appflow sdk" # commit staged changes
+git push origin main # push the changes from the main branch to your git host
+```
+
+After the push is made, you will then see your commit under the `Commits` tab of the Appflow Dashboard. For more on this, take a look at the [Push a Commit](https://ionic.io/docs/appflow/quickstart/push) section inside the Appflow docs.
+
+## Deploy a Live Update
+
+With the Appflow SDK installed and your commit pushed up to the Dashboard, you are ready to deploy a live update to a device. The Live Update feature uses the installed Appflow SDK with your native application to listen to a particular Deploy Channel Destination. When a live update is assigned to a Channel Destination, that update will be deployed to user devices running binaries that are configured to listen to that specific Channel Destination.
+
+To get the live update deployed, a Web build will need to be created. This can be done through the `Start build` icon from the `Commits` tab or by clicking the `New build` button in the top right corner of the `Build > Builds` tab. After selecting the correct commit to deploy, select the `Web` target platform and the `Latest` build stack. Depending on your Appflow plan, you will then be able to include custom environments, if any are configured. Finally, you can enable `Live Update` and pick the Channel to automatically assign the build to once it successfully completes.
+
+Upon completion of the Web Build, additional versioning options are available to you. After completing this section and you have a successful Deploy build, you can then assign it to the same Channel you configured the Appflow SDK to listen to when you installed it by clicking the `Deploy live updates` button in the build detail page. The same can be done by clicking the `Deploy live updates` icon on the build in the `Build > Builds` tab and select the Channel from the dropdown.
+
+To receive this live update, you will need to run the app on a device or an emulator. The quickest and easiest way to do this is through the following command:
+
+```shell
+ionic [cordova | cap] run [ios | android] [options]
+```
+
+Assuming the app is configured correctly to listen to the channel you deployed too, the app should immediately update on startup if you have chosen the auto update method during setup. If the background update method was chosen, be sure to stay in the app for about 30 seconds to ensure the update was downloaded. Then, close the application, reopen it, and you will see the updates applied!
+
+To dive into more details on the steps to deploy a live update, as well as additional information such as disabling deploy for development, check out the [Deploy a Live Update](https://ionic.io/docs/appflow/quickstart/deploy) section inside the Appflow docs.
+
+## Build a Native Binary
+
+Next up is a native binary for your app build and deploy process. This is done via the [Ionic Package](https://ionic.io/docs/appflow/package/intro) service. First things first, you will need to create a [Package build](https://ionic.io/docs/appflow/package/builds). This can be done by clicking the `Start build` icon from the `Commits` tab or by clicking the `New build` button in the top right from the `Build > Builds` tab. Then you will select the proper commit for your build and fill in all of the several required fields and any optional fields that you want to specify. After filling in all of the information and the build begins, you can check out it's progress and review the logs if you encounter any errors.
+
+Given a successful Package build, an iOS binary (`.ipa` or IPA) or/and an Android binary (`.apk` or APK) file becomes available to you. The file can subsequently be downloaded so you can install it on a device by clicking the file name in the `Artifacts` section in the right of the build detail page or clicking the `Download IPA/APK` icon on the build in the `Build > Builds` tab.
+
+Further information regarding building native binaries can be found inside of the [Build a Native Binary](https://ionic.io/docs/appflow/quickstart/package) section inside the Appflow docs.
+
+## Create an Automation
+
+[Automations](https://ionic.io/docs/appflow/automation/intro) enable you and your team to utilize the full CI/CD powers of Appflow. You can create automations that trigger [Package builds](https://ionic.io/docs/appflow/package/builds) and [Deploy builds](https://ionic.io/docs/appflow/deploy/builds) every time your team commits new code to a given branch. The automations can also be configured to use different environments and native configurations for building different versions of your app for development, staging, QA and production.
+
+For more information, visit the [Create an Automation](https://ionic.io/docs/appflow/quickstart/automation) section within the Appflow docs. There you will see details on creating a single automation. However, you can create multiple automations for different branches or workflows and customize them to fit your needs. An important note is that the ability to create an automation is available for those on our [Basic plans](https://ionic.io/pricing) and above.
+
+## Create an Environment
+
+[Package builds](https://ionic.io/docs/appflow/package/builds) and [Deploy builds](https://ionic.io/docs/appflow/deploy/builds) can be futher customized via [Environments](https://ionic.io/docs/appflow/automation/environments). This powerful feature allows you to create different configurations based on the environment variables passed in at build time. When combined with the [Automation](https://ionic.io/docs/appflow/automation/intro) feature, development teams can easily configure development, staging, and production build configurations, allowing them to embrace DevOps best practices and ship better quality updates faster than ever.
+
+Creating an Environment is available for those on our [Basic plans](https://ionic.io/pricing) and above. More information on this can be found in the [Create an Environment](https://ionic.io/docs/appflow/quickstart/environment) section within the Appflow docs.
+
+## Create a Native Configuration
+
+[Native Configurations](https://ionic.io/docs/appflow/package/native-configs) allow you to easily modify common configuration values that can change between different environments (development, production, staging, etc.) so you do not need to use extra logic or manually commit them to version control. Native configurations can be attached to any [Package build](https://ionic.io/docs/appflow/package/intro) or [Automation](https://ionic.io/docs/appflow/automation/intro).
+
+Native configs can be used to:
+
+- Overwrite the unique bundle identifier or [id attribute](https://cordova.apache.org/docs/en/latest/config_ref/#widget) in `config.xml`
+- Overwrite the App Name as it will appear on the home screen of a device
+- Overwrite the [Appflow SDK (Deploy Plugin) variables and preferences](https://ionic.io/docs/appflow/deploy/api#plugin-variables)
+
+For access to the ability to create a Native Configuration, you will need to be on our [Basic plans](https://ionic.io/pricing) and above. Additional details of this feature can be found in the [Create a Native Configuration](https://ionic.io/docs/appflow/quickstart/native-config) section within the Appflow docs.
+
+## Whatâs Next?
+
+Congratulations! You developed a complete cross-platform Photo Gallery app that runs on the web, iOS, and Android. Not only that, you have also then built the app and deployed it to your users devices!
+
+There are many paths to follow from here. Try adding another [Ionic UI component](https://ionicframework.com/docs/components) to the app, or more [native functionality](https://capacitorjs.com/docs/apis). The skyâs the limit. Once you have added another feature, run the the build and deploy process again through Appflow to get it out to your users.
+
+Happy app building! ð
diff --git a/versioned_docs/version-v6/api.md b/versioned_docs/version-v6/api.md
new file mode 100644
index 00000000000..45e4c1d8d19
--- /dev/null
+++ b/versioned_docs/version-v6/api.md
@@ -0,0 +1,17 @@
+---
+title: API Index
+---
+
+import APIList from '@components/page/api/APIList';
+
+
+ API Index | Ionic Docs API Index for all API Custom Elements
+
+
+
+Each Ionic [component](/docs/components) consists of one or more [custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements). Each custom element, in turn, may expose properties, methods, events, and CSS custom properties.
+
+
diff --git a/versioned_docs/version-v6/api/accordion-group.md b/versioned_docs/version-v6/api/accordion-group.md
new file mode 100644
index 00000000000..80dac608394
--- /dev/null
+++ b/versioned_docs/version-v6/api/accordion-group.md
@@ -0,0 +1,63 @@
+---
+title: 'ion-accordion-group'
+---
+
+import Props from '@ionic-internal/component-api/v6/accordion-group/props.md';
+import Events from '@ionic-internal/component-api/v6/accordion-group/events.md';
+import Methods from '@ionic-internal/component-api/v6/accordion-group/methods.md';
+import Parts from '@ionic-internal/component-api/v6/accordion-group/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/accordion-group/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/accordion-group/slots.md';
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+
+
+Accordion group is a container for accordion instances. It manages the state of the accordions and provides keyboard navigation.
+
+See the [Accordion](./accordion) documentation for more information.
+
+## Interfaces
+
+### AccordionGroupChangeEventDetail
+
+```typescript
+interface AccordionGroupChangeEventDetail {
+ value: T;
+}
+```
+
+### AccordionGroupCustomEvent
+
+While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component.
+
+```typescript
+interface AccordionGroupCustomEvent extends CustomEvent {
+ detail: AccordionGroupChangeEventDetail;
+ target: HTMLIonAccordionGroupElement;
+}
+```
+
+## Properties
+
+
+
+## Events
+
+
+
+## Methods
+
+
+
+## CSS Shadow Parts
+
+
+
+## CSS Custom Properties
+
+
+
+## Slots
+
+
diff --git a/versioned_docs/version-v6/api/accordion.md b/versioned_docs/version-v6/api/accordion.md
new file mode 100644
index 00000000000..3cf53e1823f
--- /dev/null
+++ b/versioned_docs/version-v6/api/accordion.md
@@ -0,0 +1,220 @@
+---
+title: 'ion-accordion'
+---
+
+import Props from '@ionic-internal/component-api/v6/accordion/props.md';
+import Events from '@ionic-internal/component-api/v6/accordion/events.md';
+import Methods from '@ionic-internal/component-api/v6/accordion/methods.md';
+import Parts from '@ionic-internal/component-api/v6/accordion/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/accordion/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/accordion/slots.md';
+
+
+ Ion-Accordion Components: How to Build & Examples | Ionic
+
+
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+
+
+Accordions provide collapsible sections in your content to reduce vertical space while providing a way of organizing and grouping information. All `ion-accordion` components should be grouped inside `ion-accordion-group` components.
+
+## Basic Usage
+
+import Basic from '@site/static/usage/v6/accordion/basic/index.md';
+
+
+
+## Toggle Accordions
+
+Which accordion is open is controlled by setting the `value` property on `ion-accordion-group`. Setting this property allows developers to programmatically expand or collapse certain accordions.
+
+import Toggle from '@site/static/usage/v6/accordion/toggle/index.md';
+
+
+
+## Listen for Accordion State Changes
+
+Developers can listen for the `ionChange` event to be notified when accordions expand or collapse.
+
+import ListenChanges from '@site/static/usage/v6/accordion/listen-changes/index.md';
+
+
+
+## Multiple Accordions
+
+Developers can allow multiple accordions to be open at once with the `multiple` property.
+
+import Multiple from '@site/static/usage/v6/accordion/multiple/index.md';
+
+
+
+## Disabling Accordions
+
+### Individual Accordion
+
+Individual accordions can be disabled with the `disabled` property on `ion-accordion`.
+
+import DisableIndividual from '@site/static/usage/v6/accordion/disable/individual/index.md';
+
+
+
+### Accordion Group
+
+The accordion group can be disabled with the `disabled` property on `ion-accordion-group`.
+
+import DisableGroup from '@site/static/usage/v6/accordion/disable/group/index.md';
+
+
+
+## Readonly Accordions
+
+### Individual Accordion
+
+Individual accordions can be disabled with the `readonly` property on `ion-accordion`.
+
+import ReadonlyIndividual from '@site/static/usage/v6/accordion/readonly/individual/index.md';
+
+
+
+### Accordion Group
+
+The accordion group can be disabled with the `readonly` property on `ion-accordion-group`.
+
+import ReadonlyGroup from '@site/static/usage/v6/accordion/readonly/group/index.md';
+
+
+
+## Anatomy
+
+### Header
+
+The `header` slot is used as the toggle that will expand or collapse your accordion. We recommend you use an `ion-item` here to take advantage of the accessibility and theming functionalities.
+
+When using `ion-item` in the `header` slot, the `ion-item`'s `button` prop is set to `true` and the `detail` prop is set to `false`. In addition, we will also automatically add a toggle icon to the `ion-item`. This icon will automatically be rotated when you expand or collapse the accordion. See [Customizing Icons](#icons) for more information.
+
+### Content
+
+The `content` slot is used as the part of the accordion that is revealed or hidden depending on the state of your accordion. You can place anything here except for another `ion-content` instance as only one instance of `ion-content` should be added per page.
+
+## Customization
+
+### Expansion Styles
+
+There are two built in expansion styles: `compact` and `inset`. This expansion style is set via the `expand` property on `ion-accordion-group`.
+
+When `expand="inset"`, the accordion group is given a border radius. On `md` mode, the entire accordion will shift down when it is opened.
+
+import ExpansionStyles from '@site/static/usage/v6/accordion/customization/expansion-styles/index.md';
+
+
+
+### Advanced Expansion Styles
+
+You can customize the expansion behavior by styling based on the accordion's state. There are four state classes applied to `ion-accordion`. Styling using these classes can allow you to create advanced state transitions:
+
+| Class Name | Description |
+| ----------------------- | ------------------------------------------------- |
+| `.accordion-expanding` | Applied when the accordion is actively expanding |
+| `.accordion-expanded` | Applied when the accordion is fully expanded |
+| `.accordion-collapsing` | Applied when the accordion is actively collapsing |
+| `.accordion-collapsed` | Applied when the accordion is fully collapsed |
+
+If you need to target specific pieces of the accordion, we recommend targeting the element directly. For example, if you want to customize the ion-item in your header slot when the accordion is expanded, you can use the following selector:
+
+```css
+ion-accordion.accordion-expanding ion-item[slot='header'],
+ion-accordion.accordion-expanded ion-item[slot='header'] {
+ --color: red;
+}
+```
+
+import AdvancedExpansionStyles from '@site/static/usage/v6/accordion/customization/advanced-expansion-styles/index.md';
+
+
+
+### Icons
+
+When using an `ion-item` in the `header` slot, we automatically add an `ion-icon`. The type of icon used can be controlled by the `toggleIcon` property, and the slot it is added to can be controlled with the `toggleIconSlot` property.
+
+If you would like to manage the icon yourself or use an icon that is not an `ion-icon`, you can add the `ion-accordion-toggle-icon` class to the icon element.
+
+Regardless of which option you choose, the icon will automatically be rotated when you expand or collapse the accordion.
+
+import Icons from '@site/static/usage/v6/accordion/customization/icons/index.md';
+
+
+
+### Theming
+
+Since `ion-accordion` acts as a shell around the header and content elements, you can easily theme the accordion however you would like. You can theme the header by targeting the slotted `ion-item`. Since you are using `ion-item`, you also have access to all of the [ion-item CSS Variables](./item#css-custom-properties) and [ion-item Shadow Parts](./item#css-shadow-parts). Theming the content is also easily achieved by targeting the element that is in the `content` slot.
+
+import Theming from '@site/static/usage/v6/accordion/customization/theming/index.md';
+
+
+
+## Accessibility
+
+### Animations
+
+By default, animations are enabled when expanding or collapsing an accordion item. Animations will be automatically disabled when the `prefers-reduced-motion` media query is supported and set to `reduce`. For browsers that do not support this, animations can be disabled by setting the `animated` config in your Ionic Framework app.
+
+import AccessibilityAnimations from '@site/static/usage/v6/accordion/accessibility/animations/index.md';
+
+
+
+### Keyboard Navigation
+
+When used inside an `ion-accordion-group`, `ion-accordion` has full keyboard support for interacting with the component. The following table details what each key does:
+
+| Key | Function |
+| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `Space` or `Enter` | When focus is on the accordion header, the accordion will collapse or expand depending on the state of the component. |
+| `Tab` | Moves focus to the next focusable element. |
+| `Shift` + `Tab` | Moves focus to the previous focusable element. |
+| `Down Arrow` | - When focus is on an accordion header, moves focus to the next accordion header.
- When focus is on the last accordion header, moves focus to the first accordion header. |
+| `Up Arrow` | - When focus is on an accordion header, moves focus to the previous accordion header.
- When focus is on the first accordion header, moves focus to the last accordion header. |
+| `Home` | When focus is on an accordion header, moves focus to the first accordion header. |
+| `End` | When focus is on an accordion header, moves focus to the last accordion header. |
+
+## Performance
+
+### Animations
+
+The accordion animation works by knowing the height of the `content` slot when the animation starts. The accordion expects that this height will remain consistent throughout the animation. As a result, developers should avoid performing any operation that may change the height of the content during the animation.
+
+For example, using [ion-img](./img) may cause layout shifts as it lazily loads images. This means that as the animation plays, `ion-img` will load the image data, and the dimensions of `ion-img` will change to account for the loaded image data. This can result in the height of the `content` slot changing. Developers have a few options for avoiding this:
+
+1. Use an `img` element without any lazy loading. `ion-img` always uses lazy loading, but `img` does not use lazy loading by default. This is the simplest option and works well if you have small images that do not significantly benefit from lazy loading.
+
+2. Set a minimum width and height on `ion-img`. If you need to use lazy loading and know the dimensions of the images ahead of time (such as if you are loading icons of the same size), you can set the `ion-img` to have a minimum width or height using CSS. This gives developers the benefit of lazy loading while avoiding layout shifts. This works when using an `img` element with `loading="lazy"` too!
+
+3. If neither of these options are applicable, developers may want to consider disabling animations altogether by using the `animated` property on [ion-accordion-group](./accordion-group).
+
+## Properties
+
+
+
+## Events
+
+
+
+## Methods
+
+
+
+## CSS Shadow Parts
+
+
+
+## CSS Custom Properties
+
+
+
+## Slots
+
+
diff --git a/versioned_docs/version-v6/api/action-sheet.md b/versioned_docs/version-v6/api/action-sheet.md
new file mode 100644
index 00000000000..67d0b6d193b
--- /dev/null
+++ b/versioned_docs/version-v6/api/action-sheet.md
@@ -0,0 +1,132 @@
+---
+title: 'ion-action-sheet'
+---
+
+import Props from '@ionic-internal/component-api/v6/action-sheet/props.md';
+import Events from '@ionic-internal/component-api/v6/action-sheet/events.md';
+import Methods from '@ionic-internal/component-api/v6/action-sheet/methods.md';
+import Parts from '@ionic-internal/component-api/v6/action-sheet/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/action-sheet/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/action-sheet/slots.md';
+
+
+ ion-action-sheet | Action Sheet Dialog for iOS and Android Apps
+
+
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+
+
+An Action Sheet is a dialog that displays a set of options. It appears on top of the app's content, and must be manually dismissed by the user before they can resume interaction with the app. Destructive options are made obvious in `ios` mode. There are multiple ways to dismiss the action sheet, including tapping the backdrop or hitting the escape key on desktop.
+
+import Basic from '@site/static/usage/v6/action-sheet/basic/index.md';
+
+
+
+## Buttons
+
+A button's `role` property can either be `destructive` or `cancel`. Buttons without a role property will have the default look for the platform. Buttons with the `cancel` role will always load as the bottom button, no matter where they are in the array. All other buttons will be displayed in the order they have been added to the `buttons` array. Note: We recommend that `destructive` buttons are always the first button in the array, making them the top button. Additionally, if the action sheet is dismissed by tapping the backdrop, then it will fire the handler from the button with the cancel role.
+
+A button can also be passed data via the `data` property on `ActionSheetButton`. This will populate the `data` field in the return value of the `onDidDismiss` method.
+
+## Theming
+
+Action Sheet uses scoped encapsulation, which means it will automatically scope its CSS by appending each of the styles with an additional class at runtime. Overriding scoped selectors in CSS requires a [higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) selector.
+
+### Styling
+
+We recommend passing a custom class to `cssClass` in the `create` method and using that to add custom styles to the host and inner elements. This property can also accept multiple classes separated by spaces.
+
+```css
+/* DOES NOT WORK - not specific enough */
+.action-sheet-group {
+ background: #e5e5e5;
+}
+
+/* Works - pass "my-custom-class" in cssClass to increase specificity */
+.my-custom-class .action-sheet-group {
+ background: #e5e5e5;
+}
+```
+
+import Styling from '@site/static/usage/v6/action-sheet/theming/styling/index.md';
+
+
+
+### CSS Custom Properties
+
+Any of the defined [CSS Custom Properties](#css-custom-properties-1) can be used to style the Action Sheet without needing to target individual elements.
+
+import CssCustomProperties from '@site/static/usage/v6/action-sheet/theming/css-properties/index.md';
+
+
+
+## Accessibility
+
+Action Sheets are given a `role` of [`dialog`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role). In order to align with the ARIA spec, either the `aria-label` or `aria-labelledby` attribute must be set.
+
+It is strongly recommended that every Action Sheet have the `header` property defined, as Ionic will automatically set `aria-labelledby` to point to the header element. However, if you choose not to include a `header`, an alternative is to use the `htmlAttributes` property to provide a descriptive `aria-label` or set a custom `aria-labelledby` value.
+
+## Interfaces
+
+### ActionSheetButton
+
+```typescript
+interface ActionSheetButton {
+ text?: string;
+ role?: 'cancel' | 'destructive' | 'selected' | string;
+ icon?: string;
+ cssClass?: string | string[];
+ handler?: () => boolean | void | Promise;
+ data?: T;
+}
+```
+
+### ActionSheetOptions
+
+```typescript
+interface ActionSheetOptions {
+ header?: string;
+ subHeader?: string;
+ cssClass?: string | string[];
+ buttons: (ActionSheetButton | string)[];
+ backdropDismiss?: boolean;
+ translucent?: boolean;
+ animated?: boolean;
+ mode?: Mode;
+ keyboardClose?: boolean;
+ id?: string;
+ htmlAttributes?: { [key: string]: any };
+
+ enterAnimation?: AnimationBuilder;
+ leaveAnimation?: AnimationBuilder;
+}
+```
+
+## Properties
+
+
+
+## Events
+
+
+
+## Methods
+
+
+
+## CSS Shadow Parts
+
+
+
+## CSS Custom Properties
+
+
+
+## Slots
+
+
diff --git a/versioned_docs/version-v6/api/alert.md b/versioned_docs/version-v6/api/alert.md
new file mode 100644
index 00000000000..d146d911aa0
--- /dev/null
+++ b/versioned_docs/version-v6/api/alert.md
@@ -0,0 +1,254 @@
+---
+title: 'ion-alert'
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+import Props from '@ionic-internal/component-api/v6/alert/props.md';
+import Events from '@ionic-internal/component-api/v6/alert/events.md';
+import Methods from '@ionic-internal/component-api/v6/alert/methods.md';
+import Parts from '@ionic-internal/component-api/v6/alert/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/alert/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/alert/slots.md';
+
+
+ ion-alert: Ionic API Alert Buttons with Custom Message Prompts
+
+
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+
+
+An Alert is a dialog that presents users with information or collects information from the user using inputs. An alert appears on top of the app's content, and must be manually dismissed by the user before they can resume interaction with the app. It can also optionally have a `header`, `subHeader` and `message`.
+
+## Presenting
+
+### Controller
+
+import Controller from '@site/static/usage/v6/alert/presenting/controller/index.md';
+
+
+
+### Inline
+
+When using Ionic with React or Vue, `ion-alert` can also be placed directly in the template through use of the `isOpen` property. Note that `isOpen` must be set to `false` manually when the alert is dismissed; it will not be updated automatically.
+
+
+
+
+```tsx
+import React, { useState } from 'react';
+import { IonAlert, IonButton, IonContent } from '@ionic/react';
+
+function Example() {
+ const [showAlert, setShowAlert] = useState(false);
+
+ return (
+
+ setShowAlert(true)}>Click Me
+ setShowAlert(false)}
+ header="Alert"
+ subHeader="Important message"
+ message="This is an alert!"
+ buttons={['OK']}
+ />
+
+ );
+}
+```
+
+
+
+
+```html
+
+
+ Show Alert
+
+
+
+
+
+```
+
+
+
+
+## Buttons
+
+In the array of `buttons`, each button includes properties for its `text`, and optionally a `handler`. If a handler returns `false` then the alert will not automatically be dismissed when the button is clicked. All buttons will show up in the order they have been added to the `buttons` array from left to right. Note: The right most button (the last one in the array) is the main button.
+
+Optionally, a `role` property can be added to a button, such as `cancel`. If a `cancel` role is on one of the buttons, then if the alert is dismissed by tapping the backdrop, then it will fire the handler from the button with a cancel role.
+
+import Buttons from '@site/static/usage/v6/alert/buttons/index.md';
+
+
+
+## Inputs
+
+Alerts can also include several different inputs whose data can be passed back to the app. Inputs can be used as a simple way to prompt users for information. Radios, checkboxes and text inputs are all accepted, but they cannot be mixed. For example, an alert could have all radio button inputs, or all checkbox inputs, but the same alert cannot mix radio and checkbox inputs. Do note however, different types of "text" inputs can be mixed, such as `url`, `email`, `text`, `textarea` etc. If you require a complex form UI which doesn't fit within the guidelines of an alert then we recommend building the form within a modal instead.
+
+### Text Inputs Example
+
+import TextInputs from '@site/static/usage/v6/alert/inputs/text-inputs/index.md';
+
+
+
+### Radio Example
+
+import Radios from '@site/static/usage/v6/alert/inputs/radios/index.md';
+
+
+
+## Customization
+
+Alert uses scoped encapsulation, which means it will automatically scope its CSS by appending each of the styles with an additional class at runtime. Overriding scoped selectors in CSS requires a [higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) selector.
+
+We recommend passing a custom class to `cssClass` in the `create` method and using that to add custom styles to the host and inner elements. This property can also accept multiple classes separated by spaces.
+
+```css
+/* DOES NOT WORK - not specific enough */
+.alert-wrapper {
+ background: #e5e5e5;
+}
+
+/* Works - pass "my-custom-class" in cssClass to increase specificity */
+.my-custom-class .alert-wrapper {
+ background: #e5e5e5;
+}
+```
+
+Any of the defined [CSS Custom Properties](#css-custom-properties) can be used to style the Alert without needing to target individual elements:
+
+```css
+.my-custom-class {
+ --background: #e5e5e5;
+}
+```
+
+import Customization from '@site/static/usage/v6/alert/customization/index.md';
+
+
+
+:::note
+If you are building an Ionic Angular app, the styles need to be added to a global stylesheet file.
+:::
+
+## Accessibility
+
+Ionic automatically sets the Alert's `role` to either [`alertdialog`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alertdialog_role) if there are any inputs or buttons included, or [`alert`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alert_role) if there are none.
+
+If the `header` property is defined for the Alert, the `aria-labelledby` attribute will be automatically set to the header's ID. The `subHeader` element will be used as a fallback if `header` is not defined. Similarly, the `aria-describedby` attribute will be automatically set to the ID of the `message` element if that property is defined.
+
+It is strongly recommended that your Alert have a `message`, as well as either a `header` or `subHeader`, in order to align with the ARIA spec. If you choose not to include a `header` or `subHeader`, an alternative is to provide a descriptive `aria-label` using the `htmlAttributes` property.
+
+All ARIA attributes can be manually overwritten by defining custom values in the `htmlAttributes` property of the Alert.
+
+## Interfaces
+
+### AlertButton
+
+```typescript
+interface AlertButton {
+ text: string;
+ role?: 'cancel' | 'destructive' | string;
+ cssClass?: string | string[];
+ handler?: (value: any) => boolean | void | { [key: string]: any };
+}
+```
+
+### AlertInput
+
+```typescript
+interface AlertInput {
+ type?: TextFieldTypes | 'checkbox' | 'radio' | 'textarea';
+ name?: string;
+ placeholder?: string;
+ value?: any;
+ label?: string;
+ checked?: boolean;
+ disabled?: boolean;
+ id?: string;
+ handler?: (input: AlertInput) => void;
+ min?: string | number;
+ max?: string | number;
+ cssClass?: string | string[];
+ attributes?: { [key: string]: any };
+ tabindex?: number;
+}
+```
+
+### AlertOptions
+
+```typescript
+interface AlertOptions {
+ header?: string;
+ subHeader?: string;
+ message?: string | IonicSafeString;
+ cssClass?: string | string[];
+ inputs?: AlertInput[];
+ buttons?: (AlertButton | string)[];
+ backdropDismiss?: boolean;
+ translucent?: boolean;
+ animated?: boolean;
+ htmlAttributes?: { [key: string]: any };
+
+ mode?: Mode;
+ keyboardClose?: boolean;
+ id?: string;
+
+ enterAnimation?: AnimationBuilder;
+ leaveAnimation?: AnimationBuilder;
+}
+```
+
+## Properties
+
+
+
+## Events
+
+
+
+## Methods
+
+
+
+## CSS Shadow Parts
+
+
+
+## CSS Custom Properties
+
+
+
+## Slots
+
+
diff --git a/versioned_docs/version-v6/api/app.md b/versioned_docs/version-v6/api/app.md
new file mode 100644
index 00000000000..144734dd1c6
--- /dev/null
+++ b/versioned_docs/version-v6/api/app.md
@@ -0,0 +1,55 @@
+---
+title: 'ion-app'
+---
+
+import Props from '@ionic-internal/component-api/v6/app/props.md';
+import Events from '@ionic-internal/component-api/v6/app/events.md';
+import Methods from '@ionic-internal/component-api/v6/app/methods.md';
+import Parts from '@ionic-internal/component-api/v6/app/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/app/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/app/slots.md';
+
+
+ ion-app: Container Element for an Ionic Application
+
+
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+App is a container element for an Ionic application. There should only be one `` element per project. An app can have many Ionic components including menus, headers, content, and footers. The overlay components get appended to the `` when they are presented.
+
+Using `ion-app` enables the following behaviors:
+
+- [Keyboard Lifecycle Events](../developing/keyboard#keyboard-lifecycle-events) without the need for any native plugins
+- [Hardware Back Button Listeners](../developing/hardware-back-button) for customizing the hardware back button behavior on Android devices
+- Status bar support in Capacitor or Cordova which allows users to scroll to the top of the view by tapping the status bar
+- Scroll assist utilities which scroll the content so focused text inputs are not covered by the on-screen keyboard
+- [Ripple effect](./ripple-effect) when activating buttons on Material Design mode
+- Other tap and focus utilities which make the experience of using an Ionic app feel more native
+
+## Properties
+
+
+
+## Events
+
+
+
+## Methods
+
+
+
+## CSS Shadow Parts
+
+
+
+## CSS Custom Properties
+
+
+
+## Slots
+
+
diff --git a/versioned_docs/version-v6/api/avatar.md b/versioned_docs/version-v6/api/avatar.md
new file mode 100644
index 00000000000..da0f858dabc
--- /dev/null
+++ b/versioned_docs/version-v6/api/avatar.md
@@ -0,0 +1,76 @@
+---
+title: 'ion-avatar'
+---
+
+import Props from '@ionic-internal/component-api/v6/avatar/props.md';
+import Events from '@ionic-internal/component-api/v6/avatar/events.md';
+import Methods from '@ionic-internal/component-api/v6/avatar/methods.md';
+import Parts from '@ionic-internal/component-api/v6/avatar/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/avatar/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/avatar/slots.md';
+
+
+ ion-avatar: Circular Application Avatar Icon Component
+
+
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+
+
+Avatars are circular components that usually wrap an image or icon. They can be used to represent a person or an object.
+
+Avatars can be used by themselves or inside of any element. If placed inside of an `ion-chip` or `ion-item`, the avatar will resize to fit the parent component. To position an avatar on the left or right side of an item, set the slot to `start` or `end`, respectively.
+
+## Basic Usage
+
+import Basic from '@site/static/usage/v6/avatar/basic/index.md';
+
+
+
+## Chip Avatar
+
+import Chip from '@site/static/usage/v6/avatar/chip/index.md';
+
+
+
+## Item Avatar
+
+import Item from '@site/static/usage/v6/avatar/item/index.md';
+
+
+
+## Theming
+
+### Colors
+
+import Colors from '@site/static/usage/v6/card/theming/colors/index.md';
+
+
+
+### CSS Custom Properties
+
+import CSSProps from '@site/static/usage/v6/card/theming/css-properties/index.md';
+
+
+
+## Properties
+
+
+
+## Events
+
+
+
+## Methods
+
+
+
+## CSS Shadow Parts
+
+
+
+## CSS Custom Properties
+
+
+
+## Slots
+
+
diff --git a/versioned_docs/version-v6/api/checkbox.md b/versioned_docs/version-v6/api/checkbox.md
new file mode 100644
index 00000000000..727c09811c9
--- /dev/null
+++ b/versioned_docs/version-v6/api/checkbox.md
@@ -0,0 +1,90 @@
+---
+title: 'ion-checkbox'
+---
+
+import Props from '@ionic-internal/component-api/v6/checkbox/props.md';
+import Events from '@ionic-internal/component-api/v6/checkbox/events.md';
+import Methods from '@ionic-internal/component-api/v6/checkbox/methods.md';
+import Parts from '@ionic-internal/component-api/v6/checkbox/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/checkbox/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/checkbox/slots.md';
+
+
+ ion-checkboxes: Ionic App Component to Select Multiple Options
+
+
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+
+
+Checkboxes allow the selection of multiple options from a set of options. They appear as checked (ticked) when activated. Clicking on a checkbox will toggle the `checked` property. They can also be checked programmatically by setting the `checked` property.
+
+## Basic Usage
+
+import Basic from '@site/static/usage/v6/checkbox/basic/index.md';
+
+
+
+## Indeterminate Checkboxes
+
+import Indeterminate from '@site/static/usage/v6/checkbox/indeterminate/index.md';
+
+
+
+## Theming
+
+### CSS Custom Properties
+
+import CSSProps from '@site/static/usage/v6/checkbox/theming/css-properties/index.md';
+
+
+
+## Interfaces
+
+### CheckboxChangeEventDetail
+
+```typescript
+interface CheckboxChangeEventDetail {
+ value: T;
+ checked: boolean;
+}
+```
+
+### CheckboxCustomEvent
+
+While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component.
+
+```typescript
+interface CheckboxCustomEvent extends CustomEvent {
+ detail: CheckboxChangeEventDetail;
+ target: HTMLIonCheckboxElement;
+}
+```
+
+## Properties
+
+
+
+## Events
+
+
+
+## Methods
+
+
+
+## CSS Shadow Parts
+
+
+
+## CSS Custom Properties
+
+
+
+## Slots
+
+
diff --git a/versioned_docs/version-v6/api/chip.md b/versioned_docs/version-v6/api/chip.md
new file mode 100644
index 00000000000..91f6bb5e264
--- /dev/null
+++ b/versioned_docs/version-v6/api/chip.md
@@ -0,0 +1,74 @@
+---
+title: 'ion-chip'
+---
+
+import Props from '@ionic-internal/component-api/v6/chip/props.md';
+import Events from '@ionic-internal/component-api/v6/chip/events.md';
+import Methods from '@ionic-internal/component-api/v6/chip/methods.md';
+import Parts from '@ionic-internal/component-api/v6/chip/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/chip/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/chip/slots.md';
+
+
+ ion-chip: Name, Text, Icon and Avatar for Ionic Framework Apps
+
+
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+
+
+Chips represent complex entities in small blocks, such as a contact. A chip can contain several different elements such as avatars, text, and icons.
+
+## Basic Usage
+
+import Basic from '@site/static/usage/v6/chip/basic/index.md';
+
+
+
+## Slotting Components and Icons
+
+import SlotExample from '@site/static/usage/v6/chip/slots/index.md';
+
+
+
+## Theming
+
+### Colors
+
+import Colors from '@site/static/usage/v6/chip/theming/colors/index.md';
+
+
+
+### CSS Custom Properties
+
+import CSSProps from '@site/static/usage/v6/chip/theming/css-properties/index.md';
+
+
+
+## Properties
+
+
+
+## Events
+
+
+
+## Methods
+
+
+
+## CSS Shadow Parts
+
+
+
+## CSS Custom Properties
+
+
+
+## Slots
+
+
diff --git a/versioned_docs/version-v6/api/col.md b/versioned_docs/version-v6/api/col.md
new file mode 100644
index 00000000000..5a19f67b49b
--- /dev/null
+++ b/versioned_docs/version-v6/api/col.md
@@ -0,0 +1,54 @@
+---
+title: 'ion-col'
+---
+
+import Props from '@ionic-internal/component-api/v6/col/props.md';
+import Events from '@ionic-internal/component-api/v6/col/events.md';
+import Methods from '@ionic-internal/component-api/v6/col/methods.md';
+import Parts from '@ionic-internal/component-api/v6/col/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/col/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/col/slots.md';
+
+
+ ion-col: Column Component Padding, Size and Other Properties
+
+
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+
+
+Columns are cellular components of the [grid](./grid) system and go inside of a [row](./row). They will expand to fill the row. All content within a grid should go inside of a column.
+
+See the [grid](./grid) documentation for more information.
+
+## Column Alignment
+
+By default, columns will stretch to fill the entire height of the row. Columns are [flex items](https://developer.mozilla.org/en-US/docs/Glossary/Flex_Item), so there are several [CSS classes](/docs/layout/css-utilities#flex-item-properties) that can be applied to a column to customize this behavior.
+
+## Properties
+
+
+
+## Events
+
+
+
+## Methods
+
+
+
+## CSS Shadow Parts
+
+
+
+## CSS Custom Properties
+
+
+
+## Slots
+
+
diff --git a/versioned_docs/version-v6/api/content.md b/versioned_docs/version-v6/api/content.md
new file mode 100644
index 00000000000..912c05d4515
--- /dev/null
+++ b/versioned_docs/version-v6/api/content.md
@@ -0,0 +1,158 @@
+---
+title: 'ion-content'
+---
+
+import Props from '@ionic-internal/component-api/v6/content/props.md';
+import Events from '@ionic-internal/component-api/v6/content/events.md';
+import Methods from '@ionic-internal/component-api/v6/content/methods.md';
+import Parts from '@ionic-internal/component-api/v6/content/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/content/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/content/slots.md';
+
+
+ ion-content: Scrollable CSS Component for Ionic App Content Areas
+
+
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+
+
+The content component provides an easy to use content area with some useful methods
+to control the scrollable area. There should only be one content in a single
+view.
+
+Content, along with many other Ionic components, can be customized to modify its padding, margin, and more using the global styles provided in the [CSS Utilities](/docs/layout/css-utilities) or by individually styling it using CSS and the available [CSS Custom Properties](#css-custom-properties).
+
+## Basic Usage
+
+import Basic from '@site/static/usage/v6/content/basic/index.md';
+
+
+
+## Header & Footer
+
+Content can be the only top-level component in a page, or it can be used alongside a [header](./header), [footer](./footer), or both. When used with a header or footer, it will adjust its size to fill the remaining height.
+
+import HeaderFooter from '@site/static/usage/v6/content/header-footer/index.md';
+
+
+
+## Fullscreen Content
+
+By default, content fills the space between a [header](./header) and [footer](./footer) but does not go behind them. In certain cases, it may be desired to have the content scroll behind the header and footer, such as when the `translucent` property is set on either of them, or `opacity` is set on the toolbar. This can be achieved by setting the `fullscreen` property on the content to `true`.
+
+import Fullscreen from '@site/static/usage/v6/content/fullscreen/index.md';
+
+
+
+## Fixed Content
+
+To place elements outside of the scrollable area, assign them to the `fixed` slot. Doing so will [absolutely position](https://developer.mozilla.org/en-US/docs/Web/CSS/position#absolute_positioning) the element to the top left of the content. In order to change the position of the element, it can be styled using the [top, right, bottom, and left](https://developer.mozilla.org/en-US/docs/Web/CSS/position) CSS properties.
+
+import Fixed from '@site/static/usage/v6/content/fixed/index.md';
+
+
+
+## Scroll Methods
+
+Content provides [methods](#methods) that can be called to scroll the content to the bottom, top, or to a specific point. They can be passed a `duration` in order to smoothly transition instead of instantly changing the position.
+
+import ScrollMethods from '@site/static/usage/v6/content/scroll-methods/index.md';
+
+
+
+## Scroll Events
+
+Scroll events are disabled by default for content due to performance. However, they can be enabled by setting `scrollEvents` to `true`. This is necessary before listening to any of the scroll [events](#events).
+
+import ScrollEvents from '@site/static/usage/v6/content/scroll-events/index.md';
+
+
+
+## Theming
+
+### Colors
+
+import Colors from '@site/static/usage/v6/content/theming/colors/index.md';
+
+
+
+### CSS Shadow Parts
+
+import CSSParts from '@site/static/usage/v6/content/theming/css-shadow-parts/index.md';
+
+
+
+### CSS Custom Properties
+
+import CSSProps from '@site/static/usage/v6/content/theming/css-properties/index.md';
+
+
+
+## Interfaces
+
+### ScrollBaseDetail
+
+```typescript
+interface ScrollBaseDetail {
+ isScrolling: boolean;
+}
+```
+
+### ScrollDetail
+
+```typescript
+interface ScrollDetail extends GestureDetail, ScrollBaseDetail {
+ scrollTop: number;
+ scrollLeft: number;
+}
+```
+
+### ScrollBaseCustomEvent
+
+While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing on the `ionScrollStart` and `ionScrollEnd` events.
+
+```typescript
+interface ScrollBaseCustomEvent extends CustomEvent {
+ detail: ScrollBaseDetail;
+ target: HTMLIonContentElement;
+}
+```
+
+### ScrollCustomEvent
+
+While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing on the `ionScroll` event.
+
+```typescript
+interface ScrollCustomEvent extends ScrollBaseCustomEvent {
+ detail: ScrollDetail;
+}
+```
+
+## Properties
+
+
+
+## Events
+
+
+
+## Methods
+
+
+
+## CSS Shadow Parts
+
+
+
+## CSS Custom Properties
+
+
+
+## Slots
+
+
diff --git a/versioned_docs/version-v6/api/datetime-button.md b/versioned_docs/version-v6/api/datetime-button.md
new file mode 100644
index 00000000000..dd76005abc2
--- /dev/null
+++ b/versioned_docs/version-v6/api/datetime-button.md
@@ -0,0 +1,82 @@
+---
+title: 'ion-datetime-button'
+---
+
+import Props from '@ionic-internal/component-api/v6/datetime-button/props.md';
+import Events from '@ionic-internal/component-api/v6/datetime-button/events.md';
+import Methods from '@ionic-internal/component-api/v6/datetime-button/methods.md';
+import Parts from '@ionic-internal/component-api/v6/datetime-button/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/datetime-button/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/datetime-button/slots.md';
+
+
+ ion-datetime-button: Ionic API Input for interacting with Datetime picker
+
+
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+
+
+Datetime Button links with a [Datetime](./datetime) component to display the formatted date and time. It also provides buttons to present the datetime in a modal, popover, and more.
+
+## Overview
+
+Datetime Button should be used when space is constrained. This component displays buttons which show the current date and time values. When the buttons are tapped, the date or time pickers open in the overlay.
+
+When using Datetime Button with a JavaScript framework such as Angular, React, or Vue be sure to use the [keepContentsMounted property on ion-modal](./modal#keepcontentsmounted) or the [keepContentsMounted property on ion-popover](./popover#keepcontentsmounted). This allows the linked datetime instance to be mounted even if the overlay has not been presented yet.
+
+## Basic Usage
+
+import Basic from '@site/static/usage/v6/datetime-button/basic/index.md';
+
+
+
+## Localization
+
+The localized text on `ion-datetime-button` is determined by the `locale` property on the associated `ion-datetime` instance. See [Datetime Localization](./datetime#localization) for more details.
+
+## Usage with Modals and Popovers
+
+`ion-datetime-button` must be associated with a mounted `ion-datetime` instance. As a result, [Inline Modals](./modal#inline-modals-recommended) and [Inline Popovers](./popover#inline-popovers) with the `keepContentsMounted` property set to `true` must be used.
+
+
+
+## Properties
+
+
+
+## Events
+
+
+
+## Methods
+
+
+
+## CSS Shadow Parts
+
+
+
+## CSS Custom Properties
+
+
+
+## Slots
+
+
diff --git a/versioned_docs/version-v6/api/datetime.md b/versioned_docs/version-v6/api/datetime.md
new file mode 100644
index 00000000000..3199fa22bac
--- /dev/null
+++ b/versioned_docs/version-v6/api/datetime.md
@@ -0,0 +1,464 @@
+---
+title: 'ion-datetime'
+---
+
+import Props from '@ionic-internal/component-api/v6/datetime/props.md';
+import Events from '@ionic-internal/component-api/v6/datetime/events.md';
+import Methods from '@ionic-internal/component-api/v6/datetime/methods.md';
+import Parts from '@ionic-internal/component-api/v6/datetime/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/datetime/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/datetime/slots.md';
+
+import Basic from '@site/static/usage/v6/datetime/basic/index.md';
+
+import MaxMin from '@site/static/usage/v6/datetime/date-constraints/max-min/index.md';
+import Values from '@site/static/usage/v6/datetime/date-constraints/values/index.md';
+import Advanced from '@site/static/usage/v6/datetime/date-constraints/advanced/index.md';
+
+import CustomLocale from '@site/static/usage/v6/datetime/localization/custom-locale/index.md';
+import HourCycle from '@site/static/usage/v6/datetime/localization/hour-cycle/index.md';
+import FirstDayOfWeek from '@site/static/usage/v6/datetime/localization/first-day-of-week/index.md';
+import LocaleExtensionTags from '@site/static/usage/v6/datetime/localization/locale-extension-tags/index.md';
+import TimeLabel from '@site/static/usage/v6/datetime/localization/time-label/index.md';
+
+import MonthAndYear from '@site/static/usage/v6/datetime/presentation/month-and-year/index.md';
+import Time from '@site/static/usage/v6/datetime/presentation/time/index.md';
+import Date from '@site/static/usage/v6/datetime/presentation/date/index.md';
+
+import ShowingDefaultTitle from '@site/static/usage/v6/datetime/title/showing-default-title/index.md';
+import CustomizingTitle from '@site/static/usage/v6/datetime/title/customizing-title/index.md';
+
+import ShowingConfirmationButtons from '@site/static/usage/v6/datetime/buttons/showing-confirmation-buttons/index.md';
+import CustomizingButtons from '@site/static/usage/v6/datetime/buttons/customizing-buttons/index.md';
+import CustomizingButtonTexts from '@site/static/usage/v6/datetime/buttons/customizing-button-texts/index.md';
+
+import HighlightedDatesArray from '@site/static/usage/v6/datetime/highlightedDates/array/index.md';
+import HighlightedDatesCallback from '@site/static/usage/v6/datetime/highlightedDates/callback/index.md';
+
+import MultipleDateSelection from '@site/static/usage/v6/datetime/multiple/index.md';
+
+import Theming from '@site/static/usage/v6/datetime/theming/index.md';
+
+
+ ion-datetime: Ionic API Input for Datetime Format Picker
+
+
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+
+
+Datetimes present a calendar interface and time wheel, making it easy for users to select dates and times. Datetimes are similar to the native `input` elements of `datetime-local`, however, Ionic Framework's Datetime component makes it easy to display the date and time in the preferred format, and manage the datetime values.
+
+## Overview
+
+Historically, handling datetime values within JavaScript, or even within HTML
+inputs, has always been a challenge. Specifically, JavaScript's `Date` object is
+notoriously difficult to correctly parse apart datetime strings or to format
+datetime values. Even worse is how different browsers and JavaScript versions
+parse various datetime strings differently, especially per locale.
+
+Fortunately, Ionic Framework's datetime input has been designed so developers can avoid
+the common pitfalls, allowing developers to easily manipulate datetime values and give the user a simple datetime picker for a great user experience.
+
+### ISO 8601 Datetime Format: YYYY-MM-DDTHH:mmZ
+
+Ionic Framework uses the [ISO 8601 datetime format](https://www.w3.org/TR/NOTE-datetime)
+for its value. The value is simply a string, rather than using JavaScript's
+`Date` object. Using the ISO datetime format makes it easy to serialize
+and parse within JSON objects and databases.
+
+Below are some examples of ISO 8601 formats that can be used with `ion-datetime`:
+
+| Description | Format | Datetime Value Example |
+| --------------- | ---------------------- | ------------------------- |
+| Year | YYYY | 1994 |
+| Year and Month | YYYY-MM | 1994-12 |
+| Complete Date | YYYY-MM-DD | 1994-12-15 |
+| Date and Time | YYYY-MM-DDTHH:mm | 1994-12-15T13:47 |
+| UTC Timezone | YYYY-MM-DDTHH:mm:ssZ | 1994-12-15T13:47:20Z |
+| Timezone Offset | YYYY-MM-DDTHH:mm:ssTZD | 1994-12-15T13:47:20+05:00 |
+| Hour and Minute | HH:mm | 13:47 |
+
+Note that the year is always four-digits, milliseconds (if it's added) is always
+three-digits, and all others are always two-digits. So the number representing
+January always has a leading zero, such as `01`. Additionally, the hour is
+always in the 24-hour format, so `00` is `12am` on a 12-hour clock, `13` means
+`1pm`, and `23` means `11pm`.
+
+:::note
+While seconds and milliseconds can be specified using the ISO 8601 datetime format, `ion-datetime` does not provide an interface for second and millisecond selection. Any second or millisecond values provided will be ignored.
+:::
+
+## Basic Usage
+
+
+
+## Usage with Datetime Button
+
+If you need to present a datetime in an overlay such as a modal or a popover, we recommend using [ion-datetime-button](./datetime-button). `ion-datetime-button` should be used when space is constrained. This component displays buttons which show the current date and time values. When the buttons are tapped, the date or time pickers open in the overlay.
+
+## Date Constraints
+
+### Max and Min Dates
+
+To customize the minimum and maximum datetime values, the `min` and `max` component properties can be provided which may make more sense for the app's use-case. Following the same IS0 8601 format listed in the table above, each component can restrict which dates can be selected by the user.
+
+The following example restricts date selection to March 2022 through May 2022 only.
+
+
+
+### Selecting Specific Values
+
+While the `min` and `max` properties allow you to restrict date selection to a certain range, the `monthValues`, `dayValues`, `yearValues`, `hourValues`, and `minuteValues` properties allow you choose specific days and times that users can select.
+
+The following example allows minutes to be selected in increments of 15. It also allows for days to be selected in increments of 5.
+
+
+
+### Advanced Date Constraints
+
+With the `isDateEnabled` property, developers can customize the `ion-datetime` to disable a specific day, range of dates, weekends or any custom rule using an ISO 8601 date string.
+The `isDateEnabled` property accepts a function returning a boolean, indicating if a date is enabled. The function is called for each rendered calendar day, for the previous, current and next month. Custom implementations should be optimized for performance to avoid jank.
+
+The following example shows how to disable all weekend dates. For more advanced date manipulation, we recommend using a date utility such as `date-fns`.
+
+
+
+## Localization
+
+Ionic Framework makes use of the [Intl.DatetimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DatetimeFormat) Web API which allows us to automatically localize the month and day names according to the language and region set on the user's device.
+
+### Custom Locale
+
+For instances where you need a specific locale, you can use the `locale` property to set it. The locale controls both the language and the date and time formats that are displayed.
+
+The following example shows how to set the locale to Spanish (Spain).
+
+
+
+:::note
+The time label is not automatically localized. See [Time Label](#time-label) for more information.
+:::
+
+### Hour Cycle
+
+`ion-datetime` will use the hour cycle that is specified by the `locale` property by default. For example, if `locale` is set to `en-US`, then `ion-datetime` will use a 12 hour cycle.
+
+There are 4 primary hour cycle types:
+
+| Hour cycle type | Description |
+| --------------- | -------------------------------------------------------------------------------------------------------------- |
+| `'h12'` | Hour system using 1â12; corresponds to 'h' in patterns. The 12 hour clock, with midnight starting at 12:00 am. |
+| `'h23'` | Hour system using 0â23; corresponds to 'H' in patterns. The 24 hour clock, with midnight starting at 0:00. |
+| `'h11'` | Hour system using 0â11; corresponds to 'K' in patterns. The 12 hour clock, with midnight starting at 0:00 am. |
+| `'h24'` | Hour system using 1â24; corresponds to 'k' in pattern. The 24 hour clock, with midnight starting at 24:00. |
+
+:::note
+Source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/hourCycle
+:::
+
+There may be scenarios where you need to have more control over which hour cycle is used. This is where the `hourCycle` property can help.
+
+In the following example, we can use the `hourCycle` property to force `ion-datetime` to use the 12 hour cycle even though the locale is `en-GB`, which uses a 24 hour cycle by default:
+
+
+
+### First Day of the Week
+
+For `ion-datetime`, the default first day of the week is Sunday. As of 2022, there is no browser API that lets Ionic automatically determine the first day of the week based on a device's locale, though there is on-going work regarding this (see: [TC39 GitHub](https://github.com/tc39/ecma402/issues/6)).
+
+
+
+### Time Label
+
+The time label is not automatically localized. Fortunately, Ionic makes it easy to provide custom localizations with the `time-label` slot.
+
+
+
+### Locale Extension Tags
+
+`ion-datetime` also supports [locale extension tags](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale) as part of the `Intl.Locale` API. These tags let you encode information about the locale in the locale string itself. Developers may prefer to use the extension tag approach if they are using the [Intl.Locale API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale) in their apps.
+
+For example, if you wanted to use a 12 hour cycle with the `en-GB` locale, you could provide extension tags instead of using both the `locale` and `hourCycle` properties:
+
+
+
+:::note
+Be sure to check the [Browser Compatibility Chart](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale#browser_compatibility) for `Intl.Locale` before using it in your app.
+:::
+
+## Presentation
+
+By default, `ion-datetime` allows users to select both date and time. In addition, users have access to selecting the specific month, year, hour, and minute.
+
+Some use cases may call for only date selection or only time selection. The `presentation` property allows you to specify which pickers to show and the order to show them in. For example, setting `date-time` will have the calendar picker appear before the time picker. Setting `time-date` will have the calendar picker appear after the time picker.
+
+### Month and Year Selection
+
+Month and year selection is available by passing `month-year`, `year-month`, `month`, or `year` to the `presentation` property.
+
+This example shows a datetime with the `month-year` configuration.
+
+
+
+### Time Selection
+
+Time selection is available by passing `date-time`, `time-date`, or `time` to the `presentation` property.
+
+This example shows a datetime with the `time` configuration.
+
+
+
+### Date Selection
+
+Date selection is available by passing `date-time`, `time-date`, or `date` to the `presentation` property.
+
+This example shows a datetime with the `date` configuration.
+
+
+
+### Wheel Style Pickers
+
+By default, Ionic will prefer to show a grid style layout when using `presentation`. However, it is possible to show a wheel style using the `preferWheel` property. When `preferWheel` is `true`, Ionic will prefer to show the wheel style layout when possible.
+
+Certain `presentation` options have both grid and wheel styles that developers can choose from with the `preferWheel` property. Other `presentation` values only have a wheel style and will never show a grid style. The table below shows which `presentation` values have grid or wheel styles.
+
+| `presentation` | Has Grid Style? | Has Wheel Style? |
+| -------------- | --------------- | ---------------- |
+| `date` | Yes | Yes |
+| `date-time` | Yes | Yes |
+| `month` | No | Yes |
+| `month-year` | No | Yes |
+| `time` | No | Yes |
+| `time-date` | Yes | Yes |
+| `year` | No | Yes |
+
+The example below shows the wheel picker with `presentation="date-time"`.
+
+import Wheel from '@site/static/usage/v6/datetime/presentation/wheel/index.md';
+
+
+
+## Multiple Date Selection
+
+If the `multiple` property is set to `true`, multiple dates can be selected from the calendar picker. Clicking a selected date will deselect it.
+
+:::note
+This property is only supported when using `presentation="date"` and `preferWheel="false"`.
+:::
+
+
+
+## Titles
+
+By default, `ion-datetime` does not show any header or title associated with the component. Developers can use the `showDefaultTitle` property to show the default title/header configuration. They can also use the `title` slot to customize what is rendered in the header.
+
+### Showing the Default Title
+
+
+
+### Customizing the Title
+
+
+
+## Buttons
+
+By default, `ionChange` is emitted with the new datetime value whenever a new date is selected. To require user confirmation before emitting `ionChange`, you can either set the `showDefaultButtons` property to `true` or use the `buttons` slot to pass in a custom confirmation button. When passing in custom buttons, the confirm button must call the `confirm` method on `ion-datetime` for `ionChange` to be emitted.
+
+### Showing Confirmation Buttons
+
+The default Done and Cancel buttons are already preconfigured to call the [`confirm`](#confirm) and [`cancel`](#cancel) methods, respectively.
+
+
+
+### Customizing Button Texts
+
+For simple use cases, developers can provide custom button text to the confirmation and cancel values through the `doneText` and `cancelText` properties. We recommend doing this when you only need to change the button text and do not need any custom behavior.
+
+
+
+### Customizing Button Elements
+
+Developers can provide their own buttons for advanced custom behavior.
+
+`ion-datetime` has `confirm`, `cancel`, and `reset` methods that developers can call when clicking on custom buttons. The `reset` method also allows developers to provide a date to reset the datetime to.
+
+
+
+## Highlighting Specific Dates
+
+Using the `highlightedDates` property, developers can style particular dates with custom text or background colors. This property can be defined as either an array of dates and their colors, or a callback that receives an ISO string and returns the colors to use.
+
+When specifying colors, any valid CSS color format can be used. This includes hex codes, rgba, [color variables](../theming/colors), etc.
+
+To maintain a consistent user experience, the style of selected date(s) will always override custom highlights.
+
+:::note
+This property is only supported when `preferWheel="false"`, and using a `presentation` of either `"date"`, `"date-time"`, or `"time-date"`.
+:::
+
+### Using Array
+
+An array is better when the highlights apply to fixed dates, such as due dates.
+
+
+
+### Using Callback
+
+A callback is better when the highlighted dates are recurring, such as birthdays or recurring meetings.
+
+
+
+## Theming
+
+Ionic's powerful theming system can be used to easily change your entire app to match a certain theme. In this example, we used the [Color Creator](../theming/colors#new-color-creator) and the [Stepped Color Generator](../theming/themes#stepped-color-generator) to create a rose color palette that we can use for `ion-datetime`.
+
+The benefit of this approach is that every component, not just `ion-datetime`, can automatically take advantage of this theme.
+
+
+
+## Time Zones
+
+Ionic's `ion-datetime` follows the [datetime-local](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local) behavior of not manipulating or setting the time zone inside of a datetime control. In other words, a time value of "07:00" will not be adjusted according to different time zones.
+
+We recommend using a library such as [date-fns-tz](https://github.com/marnusw/date-fns-tz) to convert a datetime value to the desired time zone.
+
+Below is an example of formatting an ISO-8601 string to display in the time zone set on a user's device:
+
+```typescript
+import { format, utcToZonedTime } from 'date-fns-tz';
+
+// Get the time zone set on the user's device
+const userTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+
+// Create a date object from a UTC date string
+const date = new Date('2014-10-25T10:46:20Z');
+
+// Use date-fns-tz to convert from UTC to a zoned time
+const zonedTime = dateFnsTz.utcToZonedTime(date, userTimeZone);
+
+// Create a formatted string from the zoned time
+format(zonedTime, 'yyyy-MM-dd HH:mm:ssXXX', { timeZone: userTimeZone });
+```
+
+### Parsing Date Values
+
+The `ionChange` event will emit the date value as an ISO-8601 string in the event payload. It is the developer's responsibility to format it based on their application needs. We recommend using [date-fns](https://date-fns.org) to format the date value.
+
+Below is an example of formatting an ISO-8601 string to display the month, date and year:
+
+```typescript
+import { format, parseISO } from 'date-fns';
+
+/**
+ * This is provided in the event
+ * payload from the `ionChange` event.
+ *
+ * The value is an ISO-8601 date string.
+ */
+const dateFromIonDatetime = '2021-06-04T14:23:00-04:00';
+const formattedString = format(parseISO(dateFromIonDatetime), 'MMM d, yyyy');
+
+console.log(formattedString); // Jun 4, 2021
+```
+
+See https://date-fns.org/docs/format for a list of all the valid format tokens.
+
+## Advanced Datetime Validation and Manipulation
+
+The datetime picker provides the simplicity of selecting an exact format, and
+persists the datetime values as a string using the standardized [ISO 8601
+datetime format](https://www.w3.org/TR/NOTE-datetime). However, it's important
+to note that `ion-datetime` does not attempt to solve all situations when
+validating and manipulating datetime values. If datetime values need to be
+parsed from a certain format, or manipulated (such as adding 5 days to a date,
+subtracting 30 minutes, etc.), or even formatting data to a specific locale,
+then we highly recommend using [date-fns](https://date-fns.org) to work with
+dates in JavaScript.
+
+## Accessibility
+
+### Keyboard Navigation
+
+`ion-datetime` has full keyboard support for navigating between focusable elements inside of the component. The following table details what each key does:
+
+| Key | Function |
+| ------------------ | ---------------------------------------------- |
+| `Tab` | Moves focus to the next focusable element. |
+| `Shift` + `Tab` | Moves focus to the previous focusable element. |
+| `Space` or `Enter` | Clicks the focusable element. |
+
+#### Date Grid
+
+| Key | Function |
+| -------------------- | ------------------------------------------------- |
+| `ArrowUp` | Moves focus to the same day of the previous week. |
+| `ArrowDown` | Moves focus to the same day of the next week. |
+| `ArrowRight` | Moves focus to the next day. |
+| `ArrowLeft` | Moves focus to the previous day. |
+| `Home` | Moves focus to the first day of the current week. |
+| `End` | Moves focus to the last day of the current week. |
+| `PageUp` | Changes the grid of dates to the previous month. |
+| `PageDown` | Changes the grid of dates to the next month. |
+| `Shift` + `PageUp` | Changes the grid of dates to the previous year. |
+| `Shift` + `PageDown` | Changes the grid of dates to the next year. |
+
+#### Time, Month, and Year Wheels
+
+When using the time wheel picker, you can use the number keys to select hour and minute values when the columns are focused.
+
+| Key | Function |
+| ----------- | ---------------------------- |
+| `ArrowUp` | Scroll to the previous item. |
+| `ArrowDown` | Scroll to the next item. |
+| `Home` | Scroll to the first item. |
+| `End` | Scroll to the last item. |
+
+## Interfaces
+
+### DatetimeChangeEventDetail
+
+```typescript
+interface DatetimeChangeEventDetail {
+ value?: string | null;
+}
+```
+
+### DatetimeCustomEvent
+
+While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component.
+
+```typescript
+interface DatetimeCustomEvent extends CustomEvent {
+ detail: DatetimeChangeEventDetail;
+ target: HTMLIonDatetimeElement;
+}
+```
+
+## Properties
+
+
+
+## Events
+
+
+
+## Methods
+
+
+
+## CSS Shadow Parts
+
+
+
+## CSS Custom Properties
+
+
+
+## Slots
+
+
diff --git a/versioned_docs/version-v6/api/fab-button.md b/versioned_docs/version-v6/api/fab-button.md
new file mode 100644
index 00000000000..bd1c98cc848
--- /dev/null
+++ b/versioned_docs/version-v6/api/fab-button.md
@@ -0,0 +1,52 @@
+---
+title: 'ion-fab-button'
+---
+
+import Props from '@ionic-internal/component-api/v6/fab-button/props.md';
+import Events from '@ionic-internal/component-api/v6/fab-button/events.md';
+import Methods from '@ionic-internal/component-api/v6/fab-button/methods.md';
+import Parts from '@ionic-internal/component-api/v6/fab-button/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/fab-button/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/fab-button/slots.md';
+
+
+ Floating Action Button | Ionic FAB Button Icon for Primary Action
+
+
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+
+
+Floating Action Buttons (FABs) represent the primary action in an application. By default, they have a circular shape. When pressed, the button may open more related actions.
+
+As the name suggests, FABs generally float over the content in a fixed position. This is achieved by wrapping the fab button in a [fab](./fab) component. If the button is not wrapped with a fab, it will scroll with the content.
+
+For usage examples, see the [fab documentation](./fab).
+
+## Properties
+
+
+
+## Events
+
+
+
+## Methods
+
+
+
+## CSS Shadow Parts
+
+
+
+## CSS Custom Properties
+
+
+
+## Slots
+
+
diff --git a/versioned_docs/version-v6/api/fab-list.md b/versioned_docs/version-v6/api/fab-list.md
new file mode 100644
index 00000000000..36d1040bda6
--- /dev/null
+++ b/versioned_docs/version-v6/api/fab-list.md
@@ -0,0 +1,42 @@
+---
+title: 'ion-fab-list'
+---
+
+import Props from '@ionic-internal/component-api/v6/fab-list/props.md';
+import Events from '@ionic-internal/component-api/v6/fab-list/events.md';
+import Methods from '@ionic-internal/component-api/v6/fab-list/methods.md';
+import Parts from '@ionic-internal/component-api/v6/fab-list/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/fab-list/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/fab-list/slots.md';
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+
+
+The fab list component is a container for multiple [fab buttons](./fab-button). It contains actions related to the main fab button and is flung out on click. To specify what side the buttons should appear on, set the `side` property to `"start"`, `"end"`, `"top"`, or `"bottom"`.
+
+For usage examples, see the [fab documentation](./fab).
+
+## Properties
+
+
+
+## Events
+
+
+
+## Methods
+
+
+
+## CSS Shadow Parts
+
+
+
+## CSS Custom Properties
+
+
+
+## Slots
+
+
diff --git a/versioned_docs/version-v6/api/fab.md b/versioned_docs/version-v6/api/fab.md
new file mode 100644
index 00000000000..008063d0f2e
--- /dev/null
+++ b/versioned_docs/version-v6/api/fab.md
@@ -0,0 +1,98 @@
+---
+title: 'ion-fab'
+---
+
+import Props from '@ionic-internal/component-api/v6/fab/props.md';
+import Events from '@ionic-internal/component-api/v6/fab/events.md';
+import Methods from '@ionic-internal/component-api/v6/fab/methods.md';
+import Parts from '@ionic-internal/component-api/v6/fab/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/fab/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/fab/slots.md';
+
+
+ ion-fab: Floating Action Button for Android and iOS Ionic Apps
+
+
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+
+
+Fabs are container elements that contain one or more [fab buttons](./fab-button). They should be placed in a fixed position that does not scroll with the content. Fabs should have one main fab button. Fabs can also contain one or more [fab lists](./fab-list) which contain related buttons that show when the main fab button is clicked.
+
+## Basic Usage
+
+import BasicUsage from '@site/static/usage/v6/fab/basic/index.md';
+
+
+
+## List Side
+
+The `side` property of the [fab list](./fab-list) component controls where it appears relative to the main fab button. A single fab can have multiple fab lists as long as they all have different values for `side`.
+
+import ListSide from '@site/static/usage/v6/fab/list-side/index.md';
+
+
+
+## Positioning
+
+In order to place the fab in a fixed position, it should be assigned to the `fixed` slot of the outer [content](./content) component. Use the `vertical` and `horizontal` props to control the alignment of the fab in the viewport. The `edge` prop will cause the fab button to overlap with the app's header or footer.
+
+import Positioning from '@site/static/usage/v6/fab/positioning/index.md';
+
+
+
+## Button Sizing
+
+Setting the `size` property of the main fab button to `"small"` will render it at a mini size. Note that this property will not have an effect when used with the inner fab buttons.
+
+import ButtonSizing from '@site/static/usage/v6/fab/button-sizing/index.md';
+
+
+
+## Theming
+
+### Colors
+
+import Colors from '@site/static/usage/v6/fab/theming/colors/index.md';
+
+
+
+### CSS Custom Properties
+
+import CSSCustomProperties from '@site/static/usage/v6/fab/theming/css-custom-properties/index.md';
+
+
+
+### CSS Shadow Parts
+
+import CSSShadowParts from '@site/static/usage/v6/fab/theming/css-shadow-parts/index.md';
+
+
+
+## Properties
+
+
+
+## Events
+
+
+
+## Methods
+
+
+
+## CSS Shadow Parts
+
+
+
+## CSS Custom Properties
+
+
+
+## Slots
+
+
diff --git a/versioned_docs/version-v6/api/footer.md b/versioned_docs/version-v6/api/footer.md
new file mode 100644
index 00000000000..a2c7b74fad8
--- /dev/null
+++ b/versioned_docs/version-v6/api/footer.md
@@ -0,0 +1,84 @@
+---
+title: 'ion-footer'
+---
+
+import Props from '@ionic-internal/component-api/v6/footer/props.md';
+import Events from '@ionic-internal/component-api/v6/footer/events.md';
+import Methods from '@ionic-internal/component-api/v6/footer/methods.md';
+import Parts from '@ionic-internal/component-api/v6/footer/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/footer/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/footer/slots.md';
+
+
+ Page Footer | Ionic App Footer: Wrapper Root Page Component
+
+
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+Footer is a root component of a page that aligns itself to the bottom of the page. It is recommended to be used as a wrapper for one or more [toolbars](./toolbar), but it can be used to wrap any element. When a toolbar is used inside of a footer, the content will be adjusted so it is sized correctly, and the footer will account for any device safe areas.
+
+## Basic Usage
+
+import Basic from '@site/static/usage/v6/footer/basic/index.md';
+
+
+
+## Translucent Footer
+
+Footers can match the transparency found in native iOS applications by setting the `translucent` property. In order to see the content scrolling behind the footer, the `fullscreen` property needs to be set on the content. This effect will only apply when the mode is `"ios"` and the device supports [backdrop-filter](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#browser_compatibility).
+
+import Translucent from '@site/static/usage/v6/footer/translucent/index.md';
+
+
+
+## Fade Footer
+
+Many native iOS applications have a fade effect on the toolbar. This can be achieved by setting the `collapse` property on the footer to `"fade"`. When the content is scrolled to the end, the background and border on the footer will fade away. This effect will only apply when the mode is `"ios"`.
+
+import Fade from '@site/static/usage/v6/footer/fade/index.md';
+
+
+
+### Usage with Virtual Scroll
+
+A fade footer requires a scroll container to work properly. When using a virtual scrolling solution, a custom scroll target needs to be provided. Scrolling on the content needs to be disabled and the `.ion-content-scroll-host` class needs to be added to the element responsible for scrolling.
+
+import CustomScrollTarget from '@site/static/usage/v6/footer/custom-scroll-target/index.md';
+
+
+
+## Borders
+
+In `"md"` mode, the footer will have a `box-shadow` on the top. In `"ios"` mode, it will receive a `border` on the top. These can be removed by adding the `.ion-no-border` class to the footer.
+
+import NoBorder from '@site/static/usage/v6/footer/no-border/index.md';
+
+
+
+## Properties
+
+
+
+## Events
+
+
+
+## Methods
+
+
+
+## CSS Shadow Parts
+
+
+
+## CSS Custom Properties
+
+
+
+## Slots
+
+
diff --git a/versioned_docs/version-v6/api/grid.md b/versioned_docs/version-v6/api/grid.md
new file mode 100644
index 00000000000..9eedd1955ab
--- /dev/null
+++ b/versioned_docs/version-v6/api/grid.md
@@ -0,0 +1,217 @@
+---
+title: 'ion-grid'
+---
+
+import Props from '@ionic-internal/component-api/v6/grid/props.md';
+import Events from '@ionic-internal/component-api/v6/grid/events.md';
+import Methods from '@ionic-internal/component-api/v6/grid/methods.md';
+import Parts from '@ionic-internal/component-api/v6/grid/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/grid/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/grid/slots.md';
+
+
+ Ion-Grid: Display Grids to Build Mobile-First Custom App Layout
+
+
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+
+
+The grid is a powerful mobile-first flexbox system for building custom layouts. It is composed of three units â a grid, [row(s)](row.md) and [column(s)](col.md). Columns will expand to fill the row, and will resize to fit additional columns. It is based on a 12 column layout with different breakpoints based on the screen size. The number of columns can be customized using CSS.
+
+## Overview
+
+- Grids act as a container for all rows and columns. Grids take up the full width of their container,
+ but adding the `fixed` property will set the width based on the screen size, see [Fixed Grid](#fixed-grid) below.
+- Rows are horizontal groups of columns that line the columns up properly.
+- Content should be placed within columns, and only columns may be immediate children of rows.
+- The `size` property indicates the number of columns to use out of the default 12 per row.
+ So, `size="4"` can be added to a column in order to take up 1/3 of the grid, or 4 of the 12 columns.
+- Columns without a value for size will automatically have equal widths. For example, four columns will each automatically be 25% wide.
+- Column widths are set as a percentage, so theyâre always fluid and sized relative to their parent element.
+- There is padding between individual columns. However, the padding can be removed from the grid and
+ columns by adding the `ion-no-padding` class to the grid. See the [CSS Utilities](../layout/css-utilities) for more styles that can be applied to the grid.
+- There are five grid tiers, one for each responsive breakpoint: all breakpoints (extra small), small, medium, large, and extra large.
+- Grid tiers are based on minimum widths, meaning they apply to their tier and all those larger than them
+ (e.g., `size-sm="4"` applies to small, medium, large, and extra large devices).
+- Grids can be customized via CSS variables. See [Customizing the Grid](#customizing-the-grid).
+
+## Default Breakpoints
+
+The default breakpoints for the grid and the corresponding properties are defined in the table below. Breakpoint values can not be customized at this time. For more information on why they can't be customized, see [Variables in Media Queries](../theming/advanced#variables-in-media-queries).
+
+| Name | Value | Width Property | Offset Property | Push Property | Pull Property | Description |
+| ---- | ------ | -------------- | --------------- | ------------- | ------------- | ------------------------------------ |
+| xs | 0 | `size` | `offset` | `push` | `pull` | Set columns when (min-width: 0) |
+| sm | 576px | `sizeSm` | `offsetSm` | `pushSm` | `pullSm` | Set columns when (min-width: 576px) |
+| md | 768px | `sizeMd` | `offsetMd` | `pushMd` | `pullMd` | Set columns when (min-width: 768px) |
+| lg | 992px | `sizeLg` | `offsetLg` | `pushLg` | `pullLg` | Set columns when (min-width: 992px) |
+| xl | 1200px | `sizeXl` | `offsetXl` | `pushXl` | `pullXl` | Set columns when (min-width: 1200px) |
+
+## Basic Usage
+
+By default, columns will take up equal width inside of a row for all devices and screen sizes.
+
+import Basic from '@site/static/usage/v6/grid/basic/index.md';
+
+
+
+## Fixed Grid
+
+Grids take up 100% width of their container. By adding the `fixed` property to the grid, the width will be set based on the screen size. The width of the grid for each breakpoint is listed in the table below, but it can be customized. For more information, see [Customizing the Grid](#customizing-the-grid). Open the below example in StackBlitz and resize the screen to see the grid width change.
+
+| Name | Value | Description |
+| ---- | ------ | ------------------------------------------------- |
+| xs | 100% | Width is 100% for xs screens |
+| sm | 540px | Set grid width to 540px when (min-width: 576px) |
+| md | 720px | Set grid width to 720px when (min-width: 768px) |
+| lg | 960px | Set grid width to 960px when (min-width: 992px) |
+| xl | 1140px | Set grid width to 1140px when (min-width: 1200px) |
+
+import Fixed from '@site/static/usage/v6/grid/fixed/index.md';
+
+
+
+## Column Size
+
+Columns can be set to specific sizes to take up a certain number out of the total number of columns, or resize their width based on the content. The default number of columns is 12, but this can be customized. See the [Number of Columns](#number-of-columns) section below for more information.
+
+### Content-based size
+
+By setting the `size` to `"auto"` the column can size itself based on the natural width of its content. This is necessary when setting a column to an absolute width, such as a specific number of pixels. The columns next to the auto-width column will resize to fill the row.
+
+import SizeAuto from '@site/static/usage/v6/grid/size-auto/index.md';
+
+
+
+### Specified size
+
+Set the `size` of a column and the others will automatically resize around it. If a size is specified on all of the columns and it doesn't add up to the total number of columns, there will be empty space after the columns.
+
+import Size from '@site/static/usage/v6/grid/size/index.md';
+
+
+
+### Responsive size
+
+The `size` property will change the column width for all [breakpoints](#default-breakpoints). Column also provides several size properties with the breakpoint name appended to the end of "size". These properties can be used to change the width of the column based on the screen size. Open the below example in StackBlitz and resize the screen to see the column widths change.
+
+import SizeResponsive from '@site/static/usage/v6/grid/size-responsive/index.md';
+
+
+
+## Column Offset
+
+Columns can be offset to shift to the right by a certain number of columns out of the total number of columns.
+
+### Specified offset
+
+Columns can be moved to the right by using the `offset` property. This property increases the left margin of the column by the number of specified columns. It also shifts the columns to the right of it, if any exist.
+
+import Offset from '@site/static/usage/v6/grid/offset/index.md';
+
+
+
+### Responsive offset
+
+The `offset` property will change the column's left margin for all [breakpoints](#default-breakpoints). Column also provides several offset properties with the breakpoint name appended to the end of "offset". These properties can be used to change the offset of the column based on the screen size. Open the below example in StackBlitz and resize the screen to see the column offsets change.
+
+import OffsetResponsive from '@site/static/usage/v6/grid/offset-responsive/index.md';
+
+
+
+## Column Push & Pull
+
+Columns can be pushed to to the right or pulled to the left by a certain number of columns out of the total number of columns.
+
+### Specified push & pull
+
+Reorder the columns by adding the `push` and `pull` properties. These properties adjust the `left` and `right` of the columns by the specified number of columns making it easy to reorder columns. This will cause columns to overlap if they are shifted to where another column is positioned.
+
+import PushPull from '@site/static/usage/v6/grid/push-pull/index.md';
+
+
+
+### Responsive push & pull
+
+The `push` and `pull` properties will change the column's position for all [breakpoints](#default-breakpoints). Column also provides several `push` and `pull` properties with the breakpoint name appended to the end of "push" / "pull". These properties can be used to change the position of the column based on the screen size. Open the below example in StackBlitz and resize the screen to see the column positions change.
+
+import PushPullResponsive from '@site/static/usage/v6/grid/push-pull-responsive/index.md';
+
+
+
+## Alignment
+
+### Vertical Alignment
+
+All columns can be vertically aligned inside of a row by adding different classes to the row. For a list of available classes, see [css utilities](/layout/css-utilities#flex-container-properties).
+
+import VerticalAlignment from '@site/static/usage/v6/grid/vertical-alignment/index.md';
+
+
+
+### Horizontal Alignment
+
+All columns can be horizontally aligned inside of a row by adding different classes to the row. For a list of available classes, see [css utilities](/layout/css-utilities.md#flex-container-properties).
+
+import HorizontalAlignment from '@site/static/usage/v6/grid/horizontal-alignment/index.md';
+
+
+
+## Customizing the Grid
+
+Using our built-in CSS variables, itâs possible to customize the predefined grid attributes. Change the values of the padding, the number of columns, and more.
+
+### Fixed Width
+
+The width of a fixed grid can be set for all breakpoints with the `--ion-grid-width` CSS variable. To override individual breakpoints, use the `--ion-grid-width-{breakpoint}` CSS variables. The default value for each of the breakpoints can be found in the [Fixed Grid](#fixed-grid) section. Open the below example in StackBlitz and resize the screen to see the grid width change.
+
+import Width from '@site/static/usage/v6/grid/customizing/width/index.md';
+
+
+
+### Number of Columns
+
+The number of grid columns can be modified with the `--ion-grid-columns` CSS variable. By default there are 12 grid columns, but this can be changed to any positive integer and be used to calculate the width of each individual column.
+
+import ColumnNumber from '@site/static/usage/v6/grid/customizing/column-number/index.md';
+
+
+
+### Padding
+
+The padding on the grid container can be set for all breakpoints with the `--ion-grid-padding` CSS variable. To override individual breakpoints, use the `--ion-grid-padding-{breakpoint}` CSS variables.
+
+The padding on the columns can be set for all breakpoints with the `--ion-grid-column-padding` CSS variable. To override individual breakpoints, use the `--ion-grid-column-padding-{breakpoint}` CSS variables.
+
+import Padding from '@site/static/usage/v6/grid/customizing/padding/index.md';
+
+
+
+## Properties
+
+
+
+## Events
+
+
+
+## Methods
+
+
+
+## CSS Shadow Parts
+
+
+
+## CSS Custom Properties
+
+
+
+## Slots
+
+
diff --git a/versioned_docs/version-v6/api/header.md b/versioned_docs/version-v6/api/header.md
new file mode 100644
index 00000000000..d3305b4c027
--- /dev/null
+++ b/versioned_docs/version-v6/api/header.md
@@ -0,0 +1,94 @@
+---
+title: 'ion-header'
+---
+
+import Props from '@ionic-internal/component-api/v6/header/props.md';
+import Events from '@ionic-internal/component-api/v6/header/events.md';
+import Methods from '@ionic-internal/component-api/v6/header/methods.md';
+import Parts from '@ionic-internal/component-api/v6/header/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/header/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/header/slots.md';
+
+
+ ion-header: Header Parent Component for Ionic Framework Apps
+
+
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+Header is a root component of a page that aligns itself to the top of the page. It is recommended to be used as a wrapper for one or more [toolbars](./toolbar), but it can be used to wrap any element. When a toolbar is used inside of a header, the content will be adjusted so it is sized correctly, and the header will account for any device safe areas.
+
+## Basic Usage
+
+import Basic from '@site/static/usage/v6/header/basic/index.md';
+
+
+
+## Translucent Header
+
+Headers can match the transparency found in native iOS applications by setting the `translucent` property. In order to see the content scrolling behind the header, the `fullscreen` property needs to be set on the content. This effect will only apply when the mode is `"ios"` and the device supports [backdrop-filter](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#browser_compatibility).
+
+import Translucent from '@site/static/usage/v6/header/translucent/index.md';
+
+
+
+## Condensed Header
+
+Ionic provides the functionality found in native iOS applications to show a large toolbar title and then collapse it to a small title when scrolling. This can be done by adding two headers, one above the content and one inside of the content, and then setting the `collapse` property to `"condense"` on the header inside of the content. This effect will only apply when the mode is "ios".
+
+import Condense from '@site/static/usage/v6/header/condense/index.md';
+
+
+
+## Fade Header
+
+Many native iOS applications have a fade effect on the toolbar. This can be achieved by setting the `collapse` property on the header to `"fade"`. When the page is first loaded, the background and border on the header will be hidden. As the content is scrolled, the header will fade back in. This effect will only apply when the mode is "ios".
+
+This functionality can be combined with a [Condensed Header](#condensed-header) as well. The `collapse` property with a value set to `"fade"` should be on the header outside of the content.
+
+import Fade from '@site/static/usage/v6/header/fade/index.md';
+
+
+
+### Usage with Virtual Scroll
+
+A fade header requires a scroll container to work properly. When using a virtual scrolling solution, a custom scroll target needs to be provided. Scrolling on the content needs to be disabled and the `.ion-content-scroll-host` class needs to be added to the element responsible for scrolling.
+
+import CustomScrollTarget from '@site/static/usage/v6/header/custom-scroll-target/index.md';
+
+
+
+## Borders
+
+In `"md"` mode, the header will have a `box-shadow` on the bottom. In `"ios"` mode, it will receive a `border` on the bottom. These can be removed by adding the `.ion-no-border` class to the header.
+
+import NoBorder from '@site/static/usage/v6/header/no-border/index.md';
+
+
+
+## Properties
+
+
+
+## Events
+
+
+
+## Methods
+
+
+
+## CSS Shadow Parts
+
+
+
+## CSS Custom Properties
+
+
+
+## Slots
+
+
diff --git a/versioned_docs/version-v6/api/icon.md b/versioned_docs/version-v6/api/icon.md
new file mode 100644
index 00000000000..92984ef6acd
--- /dev/null
+++ b/versioned_docs/version-v6/api/icon.md
@@ -0,0 +1,21 @@
+---
+title: 'ion-icon'
+---
+
+
+ ion-icon: Icon Component for Ionic Framework Apps
+
+
+
+Icon is a simple component made available through the Ionicons library, which comes pre-packaged by default with all Ionic Framework applications. It can be used to display any icon from the Ionicons set, or a custom SVG. It also has support for styling such as size and color.
+
+For a list of all available icons, see ionic.io/ionicons. For more information including styling and custom SVG usage, see the Usage page.
+
+## Basic Usage
+
+import Basic from '@site/static/usage/v6/icon/basic/index.md';
+
+
\ No newline at end of file
diff --git a/versioned_docs/version-v6/api/img.md b/versioned_docs/version-v6/api/img.md
new file mode 100644
index 00000000000..44e3adbb1d3
--- /dev/null
+++ b/versioned_docs/version-v6/api/img.md
@@ -0,0 +1,54 @@
+---
+title: 'ion-img'
+---
+
+import Props from '@ionic-internal/component-api/v6/img/props.md';
+import Events from '@ionic-internal/component-api/v6/img/events.md';
+import Methods from '@ionic-internal/component-api/v6/img/methods.md';
+import Parts from '@ionic-internal/component-api/v6/img/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/img/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/img/slots.md';
+
+
+ Img Tag to Lazy Load Images in Viewport | ion-img Tag
+
+
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+
+
+Img is a tag that will lazily load an image whenever the tag is in the viewport. This is extremely useful when generating a large list as images are only loaded when they're visible. The component uses [Intersection Observer](https://caniuse.com/#feat=intersectionobserver) internally, which is supported in most modern browsers, but falls back to a `setTimeout` when it is not supported.
+
+## Basic Usage
+
+import Basic from '@site/static/usage/v6/img/basic/index.md';
+
+
+
+## Properties
+
+
+
+## Events
+
+
+
+## Methods
+
+
+
+## CSS Shadow Parts
+
+
+
+## CSS Custom Properties
+
+
+
+## Slots
+
+
diff --git a/versioned_docs/version-v6/api/infinite-scroll-content.md b/versioned_docs/version-v6/api/infinite-scroll-content.md
new file mode 100644
index 00000000000..53b4829e731
--- /dev/null
+++ b/versioned_docs/version-v6/api/infinite-scroll-content.md
@@ -0,0 +1,40 @@
+---
+title: 'ion-infinite-scroll-content'
+---
+
+import Props from '@ionic-internal/component-api/v6/infinite-scroll-content/props.md';
+import Events from '@ionic-internal/component-api/v6/infinite-scroll-content/events.md';
+import Methods from '@ionic-internal/component-api/v6/infinite-scroll-content/methods.md';
+import Parts from '@ionic-internal/component-api/v6/infinite-scroll-content/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/infinite-scroll-content/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/infinite-scroll-content/slots.md';
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+The `ion-infinite-scroll-content` component is the default child used by the `ion-infinite-scroll`. It displays an infinite scroll spinner that looks best based on the platform and changes the look depending on the infinite scroll's state. The default spinner can be changed and text can be added by setting the `loadingSpinner` and `loadingText` properties.
+
+For more information as well as usage, see the [Infinite Scroll Documentation](./infinite-scroll.md#infinite-scroll-content).
+
+## Properties
+
+
+
+## Events
+
+
+
+## Methods
+
+
+
+## CSS Shadow Parts
+
+
+
+## CSS Custom Properties
+
+
+
+## Slots
+
+
diff --git a/versioned_docs/version-v6/api/infinite-scroll.md b/versioned_docs/version-v6/api/infinite-scroll.md
new file mode 100644
index 00000000000..e8788dde143
--- /dev/null
+++ b/versioned_docs/version-v6/api/infinite-scroll.md
@@ -0,0 +1,119 @@
+---
+title: 'ion-infinite-scroll'
+---
+
+import Props from '@ionic-internal/component-api/v6/infinite-scroll/props.md';
+import Events from '@ionic-internal/component-api/v6/infinite-scroll/events.md';
+import Methods from '@ionic-internal/component-api/v6/infinite-scroll/methods.md';
+import Parts from '@ionic-internal/component-api/v6/infinite-scroll/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/infinite-scroll/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/infinite-scroll/slots.md';
+
+
+ Infinite Scroller | ion-infinite-scroll Action Component
+
+
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+The Infinite Scroll component calls an action to be performed when the user scrolls a specified distance from the bottom or top of the page.
+
+The expression assigned to the `ionInfinite` event is called when the user reaches that defined distance. When this expression has finished any and all tasks, it should call the `complete()` method on the infinite scroll instance.
+
+import Basic from '@site/static/usage/v6/infinite-scroll/basic/index.md';
+
+
+
+## Loading Text and Spinner
+
+The `ion-infinite-scroll-content` is responsible for the visual display of the infinite scroll interaction. By default this component changes its look depending on the infinite scroll's state. It displays a spinner that looks best based on the platform the user is on. Both the spinner and loading text can be customized by setting properties on the `ion-infinite-scroll-content` component.
+
+import InfiniteScrollContent from '@site/static/usage/v6/infinite-scroll/infinite-scroll-content/index.md';
+
+
+
+## Custom Content
+
+Separating the `ion-infinite-scroll` and `ion-infinite-scroll-content` components allows developers to create their own content components, if desired. This content can contain anything, from an SVG element to elements with unique CSS animations.
+
+import CustomContent from '@site/static/usage/v6/infinite-scroll/custom-infinite-scroll-content/index.md';
+
+
+
+## Usage with Virtual Scroll
+
+Infinite scroll requires a scroll container to function. When using a virtual scrolling solution, you will need to disable scrolling on the `ion-content` and indicate which element container is responsible for the scroll container with the `.ion-content-scroll-host` class target.
+
+```html
+
+
+
+
+
+
+
+
+```
+
+## Accessibility
+
+Developers should assign the `role="feed"` attribute to the scrollable list of items that are added to or removed from as the user scrolls.
+
+Individual list items should either have `role="article"` or use the `` element directly.
+
+For example, when rendering a collection of items in an `ion-list`:
+
+```html
+
+
+ First item
+ Second item
+ ...
+
+
+
+
+
+
+```
+
+Please refer to the [ARIA: feed role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/feed_role) documentation for additional information.
+
+## Interfaces
+
+### InfiniteScrollCustomEvent
+
+While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component.
+
+```typescript
+interface InfiniteScrollCustomEvent extends CustomEvent {
+ target: HTMLIonInfiniteScrollElement;
+}
+```
+
+## Properties
+
+
+
+## Events
+
+
+
+## Methods
+
+
+
+## CSS Shadow Parts
+
+
+
+## CSS Custom Properties
+
+
+
+## Slots
+
+
diff --git a/versioned_docs/version-v6/api/input.md b/versioned_docs/version-v6/api/input.md
new file mode 100644
index 00000000000..3f439459ada
--- /dev/null
+++ b/versioned_docs/version-v6/api/input.md
@@ -0,0 +1,153 @@
+---
+title: 'ion-input'
+---
+
+import Props from '@ionic-internal/component-api/v6/input/props.md';
+import Events from '@ionic-internal/component-api/v6/input/events.md';
+import Methods from '@ionic-internal/component-api/v6/input/methods.md';
+import Parts from '@ionic-internal/component-api/v6/input/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/input/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/input/slots.md';
+
+
+ ion-input: Custom Input Value Type Styling and CSS Properties
+
+
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+
+
+The input component is a wrapper to the HTML input element with custom styling and additional functionality. It accepts most of the same properties as the HTML input, but works great on desktop devices and integrates with the keyboard on mobile devices.
+
+## Basic Usage
+
+import Basic from '@site/static/usage/v6/input/basic/index.md';
+
+
+
+## Types
+
+The input component is meant for text type inputs only, such as `"text"`, `"password"`, `"email"`, `"number"`, `"search"`, `"tel"`, and `"url"`. It supports all standard text input events including keyup, keydown, keypress, and more. The default `type` is `"text"`.
+
+import Types from '@site/static/usage/v6/input/types/index.md';
+
+
+
+## Label Positioning
+
+Labels will take up the width of their content by default. This positioning can be changed to be a fixed width, stacked, or floating label.
+
+import Labels from '@site/static/usage/v6/input/labels/index.md';
+
+
+
+## Clear Options
+
+Inputs offer two options for clearing the input based on how you interact with it. The first way is by adding the `clearInput` property which will show a clear button when the input has a `value`. The second way is the `clearOnEdit` property which will clear the input after it has been blurred and then typed in again. Inputs with a `type` set to `"password"` will have `clearOnEdit` enabled by default.
+
+import Clear from '@site/static/usage/v6/input/clear/index.md';
+
+
+
+## Filled Inputs
+
+Material Design offers filled styles for an input when it is inside of an item. The `fill` property on the item can be set to either `"solid"` or `"outline"`.
+
+import Fill from '@site/static/usage/v6/input/fill/index.md';
+
+
+
+## Helper & Error Text
+
+Helper & error text can be used inside of an item with an input by slotting a note in the `"helper"` and `"error"` slots. The error slot will not be displayed unless the `ion-invalid` class is added to the `ion-item`. In Angular, this is done automatically through form validation. In JavaScript, React and Vue, the class needs to be manually added based on your own validation.
+
+
+
+import HelperError from '@site/static/usage/v6/item/helper-error/index.md';
+
+
+
+## Item Counter
+
+The item counter is helper text that displays under an input to notify the user of how many characters have been entered out of the total that the input will accept. When adding counter, the default behavior is to format the value that gets displayed as `inputLength` / `maxLength`. This behavior can be customized by passing in a formatter function to the `counterFormatter` property.
+
+
+
+import Counter from '@site/static/usage/v6/item/counter/index.md';
+
+
+
+## Filtering User Input
+
+Developers can use the `ionInput` event to update the input value in response to user input such as a keypress. This is useful for filtering out invalid or unwanted characters.
+
+When storing the value in a state variable, we recommend updating both the state variable and the `ion-input` component value. This ensures that the state variable and the `ion-input` component value remain in sync.
+
+import FilteringData from '@site/static/usage/v6/input/filtering/index.md';
+
+
+
+## Theming
+
+### Colors
+
+import Colors from '@site/static/usage/v6/input/theming/colors/index.md';
+
+
+
+### CSS Custom Properties
+
+Input uses scoped encapsulation, which means it will automatically scope its CSS by appending each of the styles with an additional class at runtime. Overriding scoped selectors in CSS requires a [higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) selector. Targeting the `ion-input` for customization will not work; therefore we recommend adding a class and customizing it that way.
+
+import CSSProps from '@site/static/usage/v6/input/theming/css-properties/index.md';
+
+
+
+## Interfaces
+
+### InputChangeEventDetail
+
+```typescript
+interface InputChangeEventDetail {
+ value: string | undefined | null;
+}
+```
+
+### InputCustomEvent
+
+While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component.
+
+```typescript
+interface InputCustomEvent extends CustomEvent {
+ detail: InputChangeEventDetail;
+ target: HTMLIonInputElement;
+}
+```
+
+## Properties
+
+
+
+## Events
+
+
+
+## Methods
+
+
+
+## CSS Shadow Parts
+
+
+
+## CSS Custom Properties
+
+
+
+## Slots
+
+
diff --git a/versioned_docs/version-v6/api/item-divider.md b/versioned_docs/version-v6/api/item-divider.md
new file mode 100644
index 00000000000..cf5cb8cad4a
--- /dev/null
+++ b/versioned_docs/version-v6/api/item-divider.md
@@ -0,0 +1,68 @@
+---
+title: 'ion-item-divider'
+---
+
+import Props from '@ionic-internal/component-api/v6/item-divider/props.md';
+import Events from '@ionic-internal/component-api/v6/item-divider/events.md';
+import Methods from '@ionic-internal/component-api/v6/item-divider/methods.md';
+import Parts from '@ionic-internal/component-api/v6/item-divider/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/item-divider/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/item-divider/slots.md';
+
+
+ Item Divider | List Item Divider Block Element for Ionic Apps
+
+
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+
+
+Item dividers are block elements that can be used to separate [items](./item) in a list. They are similar to list headers, but instead of only being placed at the top of a list, they should go in between groups of items.
+
+## Basic Usage
+
+import Basic from '@site/static/usage/v6/item-divider/basic/index.md';
+
+
+
+## Theming
+
+### Colors
+
+import Colors from '@site/static/usage/v6/item-divider/theming/colors/index.md';
+
+
+
+### CSS Custom Properties
+
+import CSSProps from '@site/static/usage/v6/item-divider/theming/css-properties/index.md';
+
+
+
+## Properties
+
+
+
+## Events
+
+
+
+## Methods
+
+
+
+## CSS Shadow Parts
+
+
+
+## CSS Custom Properties
+
+
+
+## Slots
+
+
diff --git a/versioned_docs/version-v6/api/item-group.md b/versioned_docs/version-v6/api/item-group.md
new file mode 100644
index 00000000000..c4909aa35b8
--- /dev/null
+++ b/versioned_docs/version-v6/api/item-group.md
@@ -0,0 +1,58 @@
+---
+title: 'ion-item-group'
+---
+
+import Props from '@ionic-internal/component-api/v6/item-group/props.md';
+import Events from '@ionic-internal/component-api/v6/item-group/events.md';
+import Methods from '@ionic-internal/component-api/v6/item-group/methods.md';
+import Parts from '@ionic-internal/component-api/v6/item-group/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/item-group/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/item-group/slots.md';
+
+
+ ion-item-group: Group Items to Divide into Multiple Sections
+
+
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+Item groups are containers that organize similar [items](./item) together. They can contain [item dividers](./item-divider) to divide the items into multiple sections. They can also be used to group [sliding items](./item-sliding).
+
+## Basic Usage
+
+import Basic from '@site/static/usage/v6/item-group/basic/index.md';
+
+
+
+## Sliding Items
+
+import SlidingItems from '@site/static/usage/v6/item-group/sliding-items/index.md';
+
+
+
+## Properties
+
+
+
+## Events
+
+
+
+## Methods
+
+
+
+## CSS Shadow Parts
+
+
+
+## CSS Custom Properties
+
+
+
+## Slots
+
+
diff --git a/versioned_docs/version-v6/api/item-option.md b/versioned_docs/version-v6/api/item-option.md
new file mode 100644
index 00000000000..8ef658c9bd8
--- /dev/null
+++ b/versioned_docs/version-v6/api/item-option.md
@@ -0,0 +1,50 @@
+---
+title: 'ion-item-option'
+---
+
+import Props from '@ionic-internal/component-api/v6/item-option/props.md';
+import Events from '@ionic-internal/component-api/v6/item-option/events.md';
+import Methods from '@ionic-internal/component-api/v6/item-option/methods.md';
+import Parts from '@ionic-internal/component-api/v6/item-option/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/item-option/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/item-option/slots.md';
+
+
+ ion-item-options: Option Button Components for Ionic Apps
+
+
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+
+
+The item option component is an button for a sliding item. It must be placed inside of [item options](./item-options). The `ionSwipe` event and the `expandable` property can be combined to create a full swipe action for the item.
+
+See the [item sliding](./item-sliding) documentation for more information.
+
+## Properties
+
+
+
+## Events
+
+
+
+## Methods
+
+
+
+## CSS Shadow Parts
+
+
+
+## CSS Custom Properties
+
+
+
+## Slots
+
+
diff --git a/versioned_docs/version-v6/api/item-options.md b/versioned_docs/version-v6/api/item-options.md
new file mode 100644
index 00000000000..6035574119c
--- /dev/null
+++ b/versioned_docs/version-v6/api/item-options.md
@@ -0,0 +1,55 @@
+---
+title: 'ion-item-options'
+---
+
+import Props from '@ionic-internal/component-api/v6/item-options/props.md';
+import Events from '@ionic-internal/component-api/v6/item-options/events.md';
+import Methods from '@ionic-internal/component-api/v6/item-options/methods.md';
+import Parts from '@ionic-internal/component-api/v6/item-options/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/item-options/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/item-options/slots.md';
+
+
+ ion-item-options: Option Button Components for Ionic Apps
+
+
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+The item options component is a container for the [item option](./item-option) buttons in a sliding item. These buttons can be placed either on the [start or end side](#side-description).
+
+See the [item sliding](./item-sliding) documentation for more information.
+
+## Side Description
+
+| Side | Position | Swipe Direction |
+| ------- | --------------------------------------------------------------- | ----------------------------------------------------------------- |
+| `start` | To the `left` of the content in LTR, and to the `right` in RTL. | From `left` to `right` in LTR, and from `right` to `left` in RTL. |
+| `end` | To the `right` of the content in LTR, and to the `left` in RTL. | From `right` to `left` in LTR, and from `left` to `right` in RTL. |
+
+## Properties
+
+
+
+## Events
+
+
+
+## Methods
+
+
+
+## CSS Shadow Parts
+
+
+
+## CSS Custom Properties
+
+
+
+## Slots
+
+
diff --git a/versioned_docs/version-v6/api/item-sliding.md b/versioned_docs/version-v6/api/item-sliding.md
new file mode 100644
index 00000000000..62e496d51e8
--- /dev/null
+++ b/versioned_docs/version-v6/api/item-sliding.md
@@ -0,0 +1,82 @@
+---
+title: 'ion-item-sliding'
+---
+
+import Props from '@ionic-internal/component-api/v6/item-sliding/props.md';
+import Events from '@ionic-internal/component-api/v6/item-sliding/events.md';
+import Methods from '@ionic-internal/component-api/v6/item-sliding/methods.md';
+import Parts from '@ionic-internal/component-api/v6/item-sliding/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/item-sliding/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/item-sliding/slots.md';
+
+
+ Slide Buttons | Slide Right to Left with ion-item-sliding
+
+
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+A sliding item contains an item that can be dragged to reveal option buttons. It requires an [item](./item) component as a child. All options to reveal should be placed in the [item options](./item-options) element.
+
+## Basic Usage
+
+Sliding item options are placed on the `"end"` side of the item by default. This means that options are revealed when the item is swiped from end to start, i.e. from right to left in LTR, but from left to right in RTL. To place them on the opposite side, so that they are revealed when swiping in the opposite direction, set the side attribute to `"start"` on the [item options](./item-options) element. Up to two item options can be used at the same time in order to reveal two different sets of options depending on the swiping direction.
+
+import Basic from '@site/static/usage/v6/item-sliding/basic/index.md';
+
+
+
+## Icon Options
+
+When an icon is placed alongside text in the [item option](./item-option), it will display the icon on top of the text by default. The slot on the icon can be changed to any of the available [item option slots](./item-option#slots) to change its position.
+
+import Icons from '@site/static/usage/v6/item-sliding/icons/index.md';
+
+
+
+## Expandable Options
+
+Options can be expanded to take up the full width of the item if you swipe past a certain point. This can be combined with the `ionSwipe` event on the [item options](./item-options) to call a method when the item is fully swiped.
+
+import Expandable from '@site/static/usage/v6/item-sliding/expandable/index.md';
+
+
+
+## Interfaces
+
+### ItemSlidingCustomEvent
+
+While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component.
+
+```typescript
+interface ItemSlidingCustomEvent extends CustomEvent {
+ target: HTMLIonItemSlidingElement;
+}
+```
+
+## Properties
+
+
+
+## Events
+
+
+
+## Methods
+
+
+
+## CSS Shadow Parts
+
+
+
+## CSS Custom Properties
+
+
+
+## Slots
+
+
diff --git a/versioned_docs/version-v6/api/item.md b/versioned_docs/version-v6/api/item.md
new file mode 100644
index 00000000000..cb318d9fb04
--- /dev/null
+++ b/versioned_docs/version-v6/api/item.md
@@ -0,0 +1,168 @@
+---
+title: 'ion-item'
+---
+
+import Props from '@ionic-internal/component-api/v6/item/props.md';
+import Events from '@ionic-internal/component-api/v6/item/events.md';
+import Methods from '@ionic-internal/component-api/v6/item/methods.md';
+import Parts from '@ionic-internal/component-api/v6/item/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/item/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/item/slots.md';
+
+
+ ion-item: Input, Edit, or Delete iOS and Android Item Elements
+
+
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+
+
+Items are elements that can contain text, icons, avatars, images, inputs, and any other native or custom elements. Generally they are placed in a [list](./list) with other items. Items can be swiped, deleted, reordered, edited, and more.
+
+## Basic Usage
+
+Items left align text and add an ellipsis when the text is wider than the item. We can modify this behavior using the CSS Utilities provided by Ionic Framework, such as using `.ion-text-wrap` in the below example. See the [CSS Utilities Documentation](/docs/layout/css-utilities) for more classes that can be added to an item to transform the text.
+
+import Basic from '@site/static/usage/v6/item/basic/index.md';
+
+
+
+## Clickable Items
+
+An item is considered "clickable" if it has an `href` or `button` property set. Clickable items have a few visual differences that indicate they can be interacted with. For example, a clickable item receives the ripple effect upon activation in `md` mode, has a highlight when activated in `ios` mode, and has a [detail arrow](#detail-arrows) by default in `ios` mode.
+
+import Clickable from '@site/static/usage/v6/item/clickable/index.md';
+
+
+
+## Detail Arrows
+
+By default [clickable items](#clickable-items) will display a right arrow icon on `ios` mode. To hide the right arrow icon on clickable elements, set the `detail` property to `false`. To show the right arrow icon on an item that doesn't display it naturally, set the `detail` property to `true`.
+
+import DetailArrows from '@site/static/usage/v6/item/detail-arrows/index.md';
+
+
+
+
+
+## Item Lines
+
+Items show an inset bottom border by default. The border has padding on the left and does not appear under any content that is slotted in the `"start"` slot. The `lines` property can be modified to `"full"` or `"none"` which will show a full width border or no border, respectively.
+
+import Lines from '@site/static/usage/v6/item/lines/index.md';
+
+
+
+## Media Items
+
+[Avatars](./avatar) and [Thumbnails](./thumbnail) can be slotted inside of an item. This is useful when making lists of images and text.
+
+import Media from '@site/static/usage/v6/item/media/index.md';
+
+
+
+## Buttons in Items
+
+Buttons are styled smaller inside of items than when they are outside of them. To make the button size match buttons outside of an item, set the `size` attribute to `"default"`.
+
+import Buttons from '@site/static/usage/v6/item/buttons/index.md';
+
+
+
+## Icons in Items
+
+import Icons from '@site/static/usage/v6/item/icons/index.md';
+
+
+
+## Item Inputs
+
+import Inputs from '@site/static/usage/v6/item/inputs/index.md';
+
+
+
+## Helper & Error Text
+
+Helper & error text can be used inside of an item with an input by slotting a note in the `"helper"` and `"error"` slots. The error slot will not be displayed unless the `ion-invalid` class is added to the `ion-item`. In Angular, this is done automatically through form validation. In JavaScript, React and Vue, the class needs to be manually added based on your own validation.
+
+import HelperError from '@site/static/usage/v6/item/helper-error/index.md';
+
+
+
+## Item Counter
+
+The item counter is helper text that displays under an input to notify the user of how many characters have been entered out of the total that the input will accept. When adding `counter`, the default behavior is to format the value that gets displayed as `inputLength / maxLength`. This behavior can be customized by passing in a formatter function to the `counterFormatter` property.
+
+import Counter from '@site/static/usage/v6/item/counter/index.md';
+
+
+
+## Theming
+
+### Colors
+
+import Colors from '@site/static/usage/v6/item/theming/colors/index.md';
+
+
+
+### CSS Shadow Parts
+
+import CSSParts from '@site/static/usage/v6/item/theming/css-shadow-parts/index.md';
+
+
+
+### CSS Custom Properties
+
+import CSSProps from '@site/static/usage/v6/item/theming/css-properties/index.md';
+
+
+
+### Input Highlight
+
+Items containing an input will highlight the bottom border of the input with a different color when focused, valid, or invalid. By default, `md` items have a highlight with a height set to `2px` and `ios` has no highlight (technically the height is set to `0`). The height can be changed using the `--highlight-height` CSS property. To turn off the highlight, set this variable to `0`.
+
+The highlight color changes based on the item state, but all of the states use Ionic colors by default. When focused, the input highlight will use the `primary` color. If the input is valid it will use the `success` color, and invalid inputs will use the `danger` color. This can be customized using the provided CSS properties.
+
+import InputHighlight from '@site/static/usage/v6/item/theming/input-highlight/index.md';
+
+
+
+## Properties
+
+
+
+## Events
+
+
+
+## Methods
+
+
+
+## CSS Shadow Parts
+
+
+
+## CSS Custom Properties
+
+
+
+## Slots
+
+
diff --git a/versioned_docs/version-v6/api/label.md b/versioned_docs/version-v6/api/label.md
new file mode 100644
index 00000000000..4b17032fe56
--- /dev/null
+++ b/versioned_docs/version-v6/api/label.md
@@ -0,0 +1,74 @@
+---
+title: 'ion-label'
+---
+
+import Props from '@ionic-internal/component-api/v6/label/props.md';
+import Events from '@ionic-internal/component-api/v6/label/events.md';
+import Methods from '@ionic-internal/component-api/v6/label/methods.md';
+import Parts from '@ionic-internal/component-api/v6/label/parts.md';
+import CustomProps from '@ionic-internal/component-api/v6/label/custom-props.md';
+import Slots from '@ionic-internal/component-api/v6/label/slots.md';
+
+
+ Item Label Color and Properties for Applications | ion-label
+
+
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+
+
+Label is a wrapper element that can be used in combination with `ion-item`, `ion-input`, `ion-toggle`, and more. The position of the label inside of an item can be inline, fixed, stacked, or floating.
+
+## Basic Usage
+
+import Basic from '@site/static/usage/v6/label/basic/index.md';
+
+
+
+## Item Labels
+
+import Item from '@site/static/usage/v6/label/item/index.md';
+
+