From ef6fba11058da05f0e7e63757c9b5b1f16a9892f Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Fri, 21 Oct 2022 12:57:51 -0400 Subject: [PATCH 01/14] docs(content): add basic playground --- static/usage/content/basic/angular.md | 12 ++++++++++ static/usage/content/basic/demo.html | 29 ++++++++++++++++++++++++ static/usage/content/basic/index.md | 13 +++++++++++ static/usage/content/basic/javascript.md | 12 ++++++++++ static/usage/content/basic/react.md | 20 ++++++++++++++++ static/usage/content/basic/vue.md | 23 +++++++++++++++++++ 6 files changed, 109 insertions(+) create mode 100644 static/usage/content/basic/angular.md create mode 100644 static/usage/content/basic/demo.html create mode 100644 static/usage/content/basic/index.md create mode 100644 static/usage/content/basic/javascript.md create mode 100644 static/usage/content/basic/react.md create mode 100644 static/usage/content/basic/vue.md diff --git a/static/usage/content/basic/angular.md b/static/usage/content/basic/angular.md new file mode 100644 index 00000000000..31d6c7b092c --- /dev/null +++ b/static/usage/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/content/basic/demo.html b/static/usage/content/basic/demo.html new file mode 100644 index 00000000000..ea44b3903b0 --- /dev/null +++ b/static/usage/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.

+ + + + + diff --git a/static/usage/content/basic/index.md b/static/usage/content/basic/index.md new file mode 100644 index 00000000000..ab1c88ac36d --- /dev/null +++ b/static/usage/content/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/content/basic/javascript.md b/static/usage/content/basic/javascript.md new file mode 100644 index 00000000000..31d6c7b092c --- /dev/null +++ b/static/usage/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/content/basic/react.md b/static/usage/content/basic/react.md new file mode 100644 index 00000000000..2ece824eea4 --- /dev/null +++ b/static/usage/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/content/basic/vue.md b/static/usage/content/basic/vue.md new file mode 100644 index 00000000000..84e2e35470e --- /dev/null +++ b/static/usage/content/basic/vue.md @@ -0,0 +1,23 @@ +```html + + + +``` From 32f7e812685c90b2c387d57b81aaeab76052c94c Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Fri, 21 Oct 2022 13:02:09 -0400 Subject: [PATCH 02/14] docs(content): add header & footer playground --- static/usage/content/header-footer/angular.md | 26 +++++++++++ static/usage/content/header-footer/demo.html | 43 +++++++++++++++++++ static/usage/content/header-footer/index.md | 13 ++++++ .../usage/content/header-footer/javascript.md | 26 +++++++++++ static/usage/content/header-footer/react.md | 36 ++++++++++++++++ static/usage/content/header-footer/vue.md | 37 ++++++++++++++++ 6 files changed, 181 insertions(+) create mode 100644 static/usage/content/header-footer/angular.md create mode 100644 static/usage/content/header-footer/demo.html create mode 100644 static/usage/content/header-footer/index.md create mode 100644 static/usage/content/header-footer/javascript.md create mode 100644 static/usage/content/header-footer/react.md create mode 100644 static/usage/content/header-footer/vue.md diff --git a/static/usage/content/header-footer/angular.md b/static/usage/content/header-footer/angular.md new file mode 100644 index 00000000000..4a177d1d58f --- /dev/null +++ b/static/usage/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/content/header-footer/demo.html b/static/usage/content/header-footer/demo.html new file mode 100644 index 00000000000..5dfee53b98c --- /dev/null +++ b/static/usage/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 + + + + + + + diff --git a/static/usage/content/header-footer/index.md b/static/usage/content/header-footer/index.md new file mode 100644 index 00000000000..baca0fad424 --- /dev/null +++ b/static/usage/content/header-footer/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/content/header-footer/javascript.md b/static/usage/content/header-footer/javascript.md new file mode 100644 index 00000000000..4a177d1d58f --- /dev/null +++ b/static/usage/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/content/header-footer/react.md b/static/usage/content/header-footer/react.md new file mode 100644 index 00000000000..4ffff834f2a --- /dev/null +++ b/static/usage/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/content/header-footer/vue.md b/static/usage/content/header-footer/vue.md new file mode 100644 index 00000000000..8bd052a6460 --- /dev/null +++ b/static/usage/content/header-footer/vue.md @@ -0,0 +1,37 @@ +```html + + + +``` From 2fc67e77aee0f9628ca504d15add73ebb6518316 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Fri, 21 Oct 2022 14:34:16 -0400 Subject: [PATCH 03/14] docs(content): add fullscreen playground --- static/usage/content/fullscreen/angular.md | 39 +++++++++++++ static/usage/content/fullscreen/demo.html | 56 +++++++++++++++++++ static/usage/content/fullscreen/index.md | 13 +++++ static/usage/content/fullscreen/javascript.md | 39 +++++++++++++ static/usage/content/fullscreen/react.md | 50 +++++++++++++++++ static/usage/content/fullscreen/vue.md | 50 +++++++++++++++++ 6 files changed, 247 insertions(+) create mode 100644 static/usage/content/fullscreen/angular.md create mode 100644 static/usage/content/fullscreen/demo.html create mode 100644 static/usage/content/fullscreen/index.md create mode 100644 static/usage/content/fullscreen/javascript.md create mode 100644 static/usage/content/fullscreen/react.md create mode 100644 static/usage/content/fullscreen/vue.md diff --git a/static/usage/content/fullscreen/angular.md b/static/usage/content/fullscreen/angular.md new file mode 100644 index 00000000000..82fc2e6e7d0 --- /dev/null +++ b/static/usage/content/fullscreen/angular.md @@ -0,0 +1,39 @@ +```html + + + + Header + + + + +

Animal Facts

+ +

Rhinoceros

+ rhino standing near grass +

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

+ brown sea turtle in water +

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

+ giraffe sticking its tongue out +

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

+ two grey elephants on grass plains during sunset +

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

+ black and white dolphin in water +

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/content/fullscreen/demo.html b/static/usage/content/fullscreen/demo.html new file mode 100644 index 00000000000..e33cdb82241 --- /dev/null +++ b/static/usage/content/fullscreen/demo.html @@ -0,0 +1,56 @@ + + + + + + + Content + + + + + + + + + + + + Header + + + + +

Animal Facts

+ +

Rhinoceros

+ rhino standing near grass +

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

+ brown sea turtle in water +

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

+ giraffe sticking its tongue out +

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

+ two grey elephants on grass plains during sunset +

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

+ black and white dolphin in water +

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/content/fullscreen/index.md b/static/usage/content/fullscreen/index.md new file mode 100644 index 00000000000..36072fa58e3 --- /dev/null +++ b/static/usage/content/fullscreen/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/content/fullscreen/javascript.md b/static/usage/content/fullscreen/javascript.md new file mode 100644 index 00000000000..8afa8007b5f --- /dev/null +++ b/static/usage/content/fullscreen/javascript.md @@ -0,0 +1,39 @@ +```html + + + + Header + + + + +

Animal Facts

+ +

Rhinoceros

+ rhino standing near grass +

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

+ brown sea turtle in water +

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

+ giraffe sticking its tongue out +

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

+ two grey elephants on grass plains during sunset +

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

+ black and white dolphin in water +

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/content/fullscreen/react.md b/static/usage/content/fullscreen/react.md new file mode 100644 index 00000000000..98b5f02b574 --- /dev/null +++ b/static/usage/content/fullscreen/react.md @@ -0,0 +1,50 @@ +```tsx +import React from 'react'; +import { IonContent, IonFooter, IonHeader, IonTitle, IonToolbar } from '@ionic/react'; + +function Example() { + return ( + <> + + + + Header + + + + + +

Animal Facts

+ +

Rhinoceros

+ rhino standing near grass +

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

+ brown sea turtle in water +

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

+ giraffe sticking its tongue out +

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

+ two grey elephants on grass plains during sunset +

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

+ black and white dolphin in water +

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/content/fullscreen/vue.md b/static/usage/content/fullscreen/vue.md new file mode 100644 index 00000000000..08713f54b78 --- /dev/null +++ b/static/usage/content/fullscreen/vue.md @@ -0,0 +1,50 @@ +```html + + + +``` From 3c0d05f83162a1d142871116f2187eee5b84388e Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Fri, 21 Oct 2022 16:32:36 -0400 Subject: [PATCH 04/14] docs(content): add fixed content playground --- static/usage/content/fixed/angular.md | 14 +++++++ .../fixed/angular/example_component_css.md | 6 +++ .../fixed/angular/example_component_html.md | 14 +++++++ static/usage/content/fixed/demo.html | 38 +++++++++++++++++++ static/usage/content/fixed/index.md | 33 ++++++++++++++++ static/usage/content/fixed/javascript.md | 21 ++++++++++ static/usage/content/fixed/react.md | 22 +++++++++++ static/usage/content/fixed/react/main_css.md | 6 +++ static/usage/content/fixed/react/main_tsx.md | 24 ++++++++++++ static/usage/content/fixed/vue.md | 32 ++++++++++++++++ 10 files changed, 210 insertions(+) create mode 100644 static/usage/content/fixed/angular.md create mode 100644 static/usage/content/fixed/angular/example_component_css.md create mode 100644 static/usage/content/fixed/angular/example_component_html.md create mode 100644 static/usage/content/fixed/demo.html create mode 100644 static/usage/content/fixed/index.md create mode 100644 static/usage/content/fixed/javascript.md create mode 100644 static/usage/content/fixed/react.md create mode 100644 static/usage/content/fixed/react/main_css.md create mode 100644 static/usage/content/fixed/react/main_tsx.md create mode 100644 static/usage/content/fixed/vue.md diff --git a/static/usage/content/fixed/angular.md b/static/usage/content/fixed/angular.md new file mode 100644 index 00000000000..178d8338f25 --- /dev/null +++ b/static/usage/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/content/fixed/angular/example_component_css.md b/static/usage/content/fixed/angular/example_component_css.md new file mode 100644 index 00000000000..e5931e4d94f --- /dev/null +++ b/static/usage/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/content/fixed/angular/example_component_html.md b/static/usage/content/fixed/angular/example_component_html.md new file mode 100644 index 00000000000..178d8338f25 --- /dev/null +++ b/static/usage/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/content/fixed/demo.html b/static/usage/content/fixed/demo.html new file mode 100644 index 00000000000..7b791156020 --- /dev/null +++ b/static/usage/content/fixed/demo.html @@ -0,0 +1,38 @@ + + + + + + + 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.

+ + + + + diff --git a/static/usage/content/fixed/index.md b/static/usage/content/fixed/index.md new file mode 100644 index 00000000000..9c3d34deb6e --- /dev/null +++ b/static/usage/content/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/content/fixed/javascript.md b/static/usage/content/fixed/javascript.md new file mode 100644 index 00000000000..2a577f1d76a --- /dev/null +++ b/static/usage/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/content/fixed/react.md b/static/usage/content/fixed/react.md new file mode 100644 index 00000000000..d8e115e5491 --- /dev/null +++ b/static/usage/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/content/fixed/react/main_css.md b/static/usage/content/fixed/react/main_css.md new file mode 100644 index 00000000000..e5931e4d94f --- /dev/null +++ b/static/usage/content/fixed/react/main_css.md @@ -0,0 +1,6 @@ +```css +ion-button[slot="fixed"] { + top: 50%; + right: 20px; +} +``` diff --git a/static/usage/content/fixed/react/main_tsx.md b/static/usage/content/fixed/react/main_tsx.md new file mode 100644 index 00000000000..542f79deeb8 --- /dev/null +++ b/static/usage/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/content/fixed/vue.md b/static/usage/content/fixed/vue.md new file mode 100644 index 00000000000..2c44fd0b289 --- /dev/null +++ b/static/usage/content/fixed/vue.md @@ -0,0 +1,32 @@ +```html + + + + + +``` From 9b6d81ccf03e373e7bb76051e7e1b9ede664c63f Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Fri, 21 Oct 2022 16:36:53 -0400 Subject: [PATCH 05/14] docs(content): add playgrounds to content api page --- docs/api/content.md | 203 +++++++------------------------------------- 1 file changed, 30 insertions(+), 173 deletions(-) diff --git a/docs/api/content.md b/docs/api/content.md index add18a8e3f6..adb94304ad8 100644 --- a/docs/api/content.md +++ b/docs/api/content.md @@ -1,13 +1,6 @@ --- title: "ion-content" -hide_table_of_contents: true -demoUrl: "/docs/demos/api/content/index.html" -demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/content/index.html" --- -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import TOCInline from '@theme/TOCInline'; - import Props from '@site/static/auto-generated/content/props.md'; import Events from '@site/static/auto-generated/content/events.md'; import Methods from '@site/static/auto-generated/content/methods.md'; @@ -24,14 +17,6 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; -

Contents

- - - - 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 @@ -40,9 +25,35 @@ 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/content/basic/index.md'; + + + + +## Header & Footer + +import HeaderFooter from '@site/static/usage/content/header-footer/index.md'; + + + + +## Fullscreen Content + +import Fullscreen from '@site/static/usage/content/fullscreen/index.md'; + + + + ## Fixed Content -In order to place elements outside of the scrollable area, `slot="fixed"` can be added to the element. This will absolutely position the element placing it in the top left. In order to place the element in a different position, style it using [top, right, bottom, and left](https://developer.mozilla.org/en-US/docs/Web/CSS/position). +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/content/fixed/index.md'; + + + ## Interfaces @@ -63,7 +74,7 @@ interface ScrollDetail extends GestureDetail, ScrollBaseDetail { } ``` -### ScrollBaseCustomEvent +### ScrollBaseCustomEvent While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing on the `ionScrollStart` and `ionScrollEnd` events. @@ -74,7 +85,7 @@ interface ScrollBaseCustomEvent extends CustomEvent { } ``` -### ScrollCustomEvent +### ScrollCustomEvent While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing on the `ionScroll` event. @@ -85,160 +96,6 @@ interface ScrollCustomEvent extends ScrollBaseCustomEvent { ``` - - -## Usage - - - - - -```html - -

Main Content

- -
-

Fixed Content

-
- -``` - - - - - - - - -```html - -

Main Content

- -
-

Fixed Content

-
- -``` - -```javascript -var content = document.querySelector('ion-content'); -content.scrollEvents = true; -content.addEventListener('ionScrollStart', () => console.log('scroll start')); -content.addEventListener('ionScroll', (ev) => console.log('scroll', ev.detail)); -content.addEventListener('ionScrollEnd', () => console.log('scroll end')); -``` - - - - - - - -```tsx -import React from 'react'; -import { IonContent } from '@ionic/react'; - -const ContentExample: React.FC = () => ( - {}} - onIonScroll={() => {}} - onIonScrollEnd={() => {}}> -

Main Content

- -
-

Fixed Content

-
- -); -``` - - - - - - - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'content-example', - styleUrl: 'content-example.css' -}) -export class ContentExample { - logScrollStart() { - console.log('Scroll start'); - } - - logScrolling(ev) { - console.log('Scrolling', ev); - } - - logScrollEnd() { - console.log('Scroll end'); - } - - render() { - return [ - this.logScrollStart()} - onIonScroll={(ev) => this.logScrolling(ev)} - onIonScrollEnd={() => this.logScrollEnd()}> -

Main Content

- -
-

Fixed Content

-
- - ]; - } -} -``` - - - - - - - -```html - - - - -``` - - - - - - - ## Properties @@ -255,4 +112,4 @@ export default defineComponent({ ## Slots - \ No newline at end of file + From 435986058c3b17cdcce8b384d084aa16dd6e909d Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Fri, 21 Oct 2022 17:35:18 -0400 Subject: [PATCH 06/14] docs(content): add scroll methods playground --- docs/api/content.md | 6 +++ .../angular/example_component_html.md | 15 ++++++ .../angular/example_component_ts.md | 24 ++++++++++ static/usage/content/scroll-methods/demo.html | 48 +++++++++++++++++++ static/usage/content/scroll-methods/index.md | 25 ++++++++++ .../content/scroll-methods/javascript.md | 31 ++++++++++++ static/usage/content/scroll-methods/react.md | 37 ++++++++++++++ static/usage/content/scroll-methods/vue.md | 34 +++++++++++++ 8 files changed, 220 insertions(+) create mode 100644 static/usage/content/scroll-methods/angular/example_component_html.md create mode 100644 static/usage/content/scroll-methods/angular/example_component_ts.md create mode 100644 static/usage/content/scroll-methods/demo.html create mode 100644 static/usage/content/scroll-methods/index.md create mode 100644 static/usage/content/scroll-methods/javascript.md create mode 100644 static/usage/content/scroll-methods/react.md create mode 100644 static/usage/content/scroll-methods/vue.md diff --git a/docs/api/content.md b/docs/api/content.md index adb94304ad8..71915c8f341 100644 --- a/docs/api/content.md +++ b/docs/api/content.md @@ -54,6 +54,12 @@ import Fixed from '@site/static/usage/content/fixed/index.md'; +## Scroll Methods + +import ScrollMethods from '@site/static/usage/content/scroll-methods/index.md'; + + + ## Interfaces diff --git a/static/usage/content/scroll-methods/angular/example_component_html.md b/static/usage/content/scroll-methods/angular/example_component_html.md new file mode 100644 index 00000000000..ffa8c913e3e --- /dev/null +++ b/static/usage/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/content/scroll-methods/angular/example_component_ts.md b/static/usage/content/scroll-methods/angular/example_component_ts.md new file mode 100644 index 00000000000..cd595635cd9 --- /dev/null +++ b/static/usage/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 bottom instead of instantly + this.content.scrollToTop(500); + } +} +``` diff --git a/static/usage/content/scroll-methods/demo.html b/static/usage/content/scroll-methods/demo.html new file mode 100644 index 00000000000..c5983316135 --- /dev/null +++ b/static/usage/content/scroll-methods/demo.html @@ -0,0 +1,48 @@ + + + + + + + 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 + + + + + + + diff --git a/static/usage/content/scroll-methods/index.md b/static/usage/content/scroll-methods/index.md new file mode 100644 index 00000000000..e2768ef20cf --- /dev/null +++ b/static/usage/content/scroll-methods/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/content/scroll-methods/javascript.md b/static/usage/content/scroll-methods/javascript.md new file mode 100644 index 00000000000..81bf4ba4867 --- /dev/null +++ b/static/usage/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/content/scroll-methods/react.md b/static/usage/content/scroll-methods/react.md new file mode 100644 index 00000000000..4d7799f6ab3 --- /dev/null +++ b/static/usage/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 bottom 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/content/scroll-methods/vue.md b/static/usage/content/scroll-methods/vue.md new file mode 100644 index 00000000000..0dcfff9c7de --- /dev/null +++ b/static/usage/content/scroll-methods/vue.md @@ -0,0 +1,34 @@ +```html + + + +``` From 4d4d417b8ee46673f747bbeb6e38da1e9406ff54 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Fri, 21 Oct 2022 17:55:59 -0400 Subject: [PATCH 07/14] docs(content): add scroll events playground --- docs/api/content.md | 7 ++++ .../angular/example_component_html.md | 17 ++++++++ .../angular/example_component_ts.md | 22 +++++++++++ static/usage/content/scroll-events/demo.html | 39 +++++++++++++++++++ static/usage/content/scroll-events/index.md | 25 ++++++++++++ .../usage/content/scroll-events/javascript.md | 22 +++++++++++ static/usage/content/scroll-events/react.md | 36 +++++++++++++++++ static/usage/content/scroll-events/vue.md | 38 ++++++++++++++++++ 8 files changed, 206 insertions(+) create mode 100644 static/usage/content/scroll-events/angular/example_component_html.md create mode 100644 static/usage/content/scroll-events/angular/example_component_ts.md create mode 100644 static/usage/content/scroll-events/demo.html create mode 100644 static/usage/content/scroll-events/index.md create mode 100644 static/usage/content/scroll-events/javascript.md create mode 100644 static/usage/content/scroll-events/react.md create mode 100644 static/usage/content/scroll-events/vue.md diff --git a/docs/api/content.md b/docs/api/content.md index 71915c8f341..a27afbdc439 100644 --- a/docs/api/content.md +++ b/docs/api/content.md @@ -60,6 +60,13 @@ import ScrollMethods from '@site/static/usage/content/scroll-methods/index.md'; +## Scroll Events + + +import ScrollEvents from '@site/static/usage/content/scroll-events/index.md'; + + + ## Interfaces diff --git a/static/usage/content/scroll-events/angular/example_component_html.md b/static/usage/content/scroll-events/angular/example_component_html.md new file mode 100644 index 00000000000..3187e741e3a --- /dev/null +++ b/static/usage/content/scroll-events/angular/example_component_html.md @@ -0,0 +1,17 @@ +```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/content/scroll-events/angular/example_component_ts.md b/static/usage/content/scroll-events/angular/example_component_ts.md new file mode 100644 index 00000000000..7e3f7625f57 --- /dev/null +++ b/static/usage/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/content/scroll-events/demo.html b/static/usage/content/scroll-events/demo.html new file mode 100644 index 00000000000..e9e5225f265 --- /dev/null +++ b/static/usage/content/scroll-events/demo.html @@ -0,0 +1,39 @@ + + + + + + + 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.

+ + + + + + + diff --git a/static/usage/content/scroll-events/index.md b/static/usage/content/scroll-events/index.md new file mode 100644 index 00000000000..abc114673be --- /dev/null +++ b/static/usage/content/scroll-events/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/content/scroll-events/javascript.md b/static/usage/content/scroll-events/javascript.md new file mode 100644 index 00000000000..f9dedda10d3 --- /dev/null +++ b/static/usage/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/content/scroll-events/react.md b/static/usage/content/scroll-events/react.md new file mode 100644 index 00000000000..d770c541ede --- /dev/null +++ b/static/usage/content/scroll-events/react.md @@ -0,0 +1,36 @@ +```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 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/content/scroll-events/vue.md b/static/usage/content/scroll-events/vue.md new file mode 100644 index 00000000000..4c79719e411 --- /dev/null +++ b/static/usage/content/scroll-events/vue.md @@ -0,0 +1,38 @@ +```html + + + +``` From b5b3b3c4d369574a755c50967d63877beb4747d3 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Fri, 21 Oct 2022 18:03:39 -0400 Subject: [PATCH 08/14] docs(content): update code comment --- .../content/scroll-events/angular/example_component_html.md | 1 + static/usage/content/scroll-events/demo.html | 2 +- static/usage/content/scroll-events/javascript.md | 2 +- static/usage/content/scroll-events/react.md | 1 + static/usage/content/scroll-events/vue.md | 1 + 5 files changed, 5 insertions(+), 2 deletions(-) diff --git a/static/usage/content/scroll-events/angular/example_component_html.md b/static/usage/content/scroll-events/angular/example_component_html.md index 3187e741e3a..a1c3aac558f 100644 --- a/static/usage/content/scroll-events/angular/example_component_html.md +++ b/static/usage/content/scroll-events/angular/example_component_html.md @@ -1,4 +1,5 @@ ```html + Scroll to fire the scroll events and view them in the console. + + + + + + + + +
+ +

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/content/theming/colors/index.md b/static/usage/content/theming/colors/index.md new file mode 100644 index 00000000000..9418e4ac97e --- /dev/null +++ b/static/usage/content/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/content/theming/colors/javascript.md b/static/usage/content/theming/colors/javascript.md new file mode 100644 index 00000000000..4b2489b6dae --- /dev/null +++ b/static/usage/content/theming/colors/javascript.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/content/theming/colors/react.md b/static/usage/content/theming/colors/react.md new file mode 100644 index 00000000000..5a24d44a829 --- /dev/null +++ b/static/usage/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/content/theming/colors/vue.md b/static/usage/content/theming/colors/vue.md new file mode 100644 index 00000000000..1bbcc99834e --- /dev/null +++ b/static/usage/content/theming/colors/vue.md @@ -0,0 +1,49 @@ +```html + + + +``` From 140c158b0a20190d74155f7cf3fb58d2531f01d5 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Mon, 24 Oct 2022 10:04:12 -0400 Subject: [PATCH 10/14] docs(content): add css shadow parts playground --- docs/api/content.md | 13 +++++++ .../angular/example_component_css.md | 9 +++++ .../angular/example_component_html.md | 12 ++++++ .../theming/css-shadow-parts/demo.html | 39 +++++++++++++++++++ .../content/theming/css-shadow-parts/index.md | 33 ++++++++++++++++ .../theming/css-shadow-parts/javascript.md | 22 +++++++++++ .../css-shadow-parts/react/main_css.md | 9 +++++ .../css-shadow-parts/react/main_tsx.md | 22 +++++++++++ .../content/theming/css-shadow-parts/vue.md | 33 ++++++++++++++++ 9 files changed, 192 insertions(+) create mode 100644 static/usage/content/theming/css-shadow-parts/angular/example_component_css.md create mode 100644 static/usage/content/theming/css-shadow-parts/angular/example_component_html.md create mode 100644 static/usage/content/theming/css-shadow-parts/demo.html create mode 100644 static/usage/content/theming/css-shadow-parts/index.md create mode 100644 static/usage/content/theming/css-shadow-parts/javascript.md create mode 100644 static/usage/content/theming/css-shadow-parts/react/main_css.md create mode 100644 static/usage/content/theming/css-shadow-parts/react/main_tsx.md create mode 100644 static/usage/content/theming/css-shadow-parts/vue.md diff --git a/docs/api/content.md b/docs/api/content.md index eb745045d03..51c7d30b096 100644 --- a/docs/api/content.md +++ b/docs/api/content.md @@ -67,6 +67,7 @@ import ScrollEvents from '@site/static/usage/content/scroll-events/index.md'; + ## Theming ### Colors @@ -75,6 +76,18 @@ import Colors from '@site/static/usage/content/theming/colors/index.md'; +### CSS Shadow Parts + +import CSSParts from '@site/static/usage/content/theming/css-shadow-parts/index.md'; + + + + + ## Interfaces diff --git a/static/usage/content/theming/css-shadow-parts/angular/example_component_css.md b/static/usage/content/theming/css-shadow-parts/angular/example_component_css.md new file mode 100644 index 00000000000..29c3d353879 --- /dev/null +++ b/static/usage/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/content/theming/css-shadow-parts/angular/example_component_html.md b/static/usage/content/theming/css-shadow-parts/angular/example_component_html.md new file mode 100644 index 00000000000..31d6c7b092c --- /dev/null +++ b/static/usage/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/content/theming/css-shadow-parts/demo.html b/static/usage/content/theming/css-shadow-parts/demo.html new file mode 100644 index 00000000000..b1f06e8a099 --- /dev/null +++ b/static/usage/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.

+ + + + + diff --git a/static/usage/content/theming/css-shadow-parts/index.md b/static/usage/content/theming/css-shadow-parts/index.md new file mode 100644 index 00000000000..d64984aa9e8 --- /dev/null +++ b/static/usage/content/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/content/theming/css-shadow-parts/javascript.md b/static/usage/content/theming/css-shadow-parts/javascript.md new file mode 100644 index 00000000000..74124e4fdb3 --- /dev/null +++ b/static/usage/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/content/theming/css-shadow-parts/react/main_css.md b/static/usage/content/theming/css-shadow-parts/react/main_css.md new file mode 100644 index 00000000000..29c3d353879 --- /dev/null +++ b/static/usage/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/content/theming/css-shadow-parts/react/main_tsx.md b/static/usage/content/theming/css-shadow-parts/react/main_tsx.md new file mode 100644 index 00000000000..33f0e53433b --- /dev/null +++ b/static/usage/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/content/theming/css-shadow-parts/vue.md b/static/usage/content/theming/css-shadow-parts/vue.md new file mode 100644 index 00000000000..129f3ec615a --- /dev/null +++ b/static/usage/content/theming/css-shadow-parts/vue.md @@ -0,0 +1,33 @@ +```html + + + + + +``` From 1fe5847601f9617157c33c42379a1b89c8e227ea Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Mon, 24 Oct 2022 10:07:42 -0400 Subject: [PATCH 11/14] docs(content): add css properties playground --- docs/api/content.md | 4 +-- .../angular/example_component_css.md | 6 ++++ .../angular/example_component_html.md | 12 +++++++ .../content/theming/css-properties/demo.html | 36 +++++++++++++++++++ .../content/theming/css-properties/index.md | 33 +++++++++++++++++ .../theming/css-properties/javascript.md | 19 ++++++++++ .../theming/css-properties/react/main_css.md | 6 ++++ .../theming/css-properties/react/main_tsx.md | 22 ++++++++++++ .../content/theming/css-properties/vue.md | 30 ++++++++++++++++ 9 files changed, 166 insertions(+), 2 deletions(-) create mode 100644 static/usage/content/theming/css-properties/angular/example_component_css.md create mode 100644 static/usage/content/theming/css-properties/angular/example_component_html.md create mode 100644 static/usage/content/theming/css-properties/demo.html create mode 100644 static/usage/content/theming/css-properties/index.md create mode 100644 static/usage/content/theming/css-properties/javascript.md create mode 100644 static/usage/content/theming/css-properties/react/main_css.md create mode 100644 static/usage/content/theming/css-properties/react/main_tsx.md create mode 100644 static/usage/content/theming/css-properties/vue.md diff --git a/docs/api/content.md b/docs/api/content.md index 51c7d30b096..b538e9ef202 100644 --- a/docs/api/content.md +++ b/docs/api/content.md @@ -82,11 +82,11 @@ import CSSParts from '@site/static/usage/content/theming/css-shadow-parts/index. - + ## Interfaces diff --git a/static/usage/content/theming/css-properties/angular/example_component_css.md b/static/usage/content/theming/css-properties/angular/example_component_css.md new file mode 100644 index 00000000000..be9b9d8063c --- /dev/null +++ b/static/usage/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/content/theming/css-properties/angular/example_component_html.md b/static/usage/content/theming/css-properties/angular/example_component_html.md new file mode 100644 index 00000000000..31d6c7b092c --- /dev/null +++ b/static/usage/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/content/theming/css-properties/demo.html b/static/usage/content/theming/css-properties/demo.html new file mode 100644 index 00000000000..4232d52adea --- /dev/null +++ b/static/usage/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.

+ + + + + diff --git a/static/usage/content/theming/css-properties/index.md b/static/usage/content/theming/css-properties/index.md new file mode 100644 index 00000000000..1eb8c9d5a82 --- /dev/null +++ b/static/usage/content/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/content/theming/css-properties/javascript.md b/static/usage/content/theming/css-properties/javascript.md new file mode 100644 index 00000000000..2ad2211af87 --- /dev/null +++ b/static/usage/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/content/theming/css-properties/react/main_css.md b/static/usage/content/theming/css-properties/react/main_css.md new file mode 100644 index 00000000000..be9b9d8063c --- /dev/null +++ b/static/usage/content/theming/css-properties/react/main_css.md @@ -0,0 +1,6 @@ +```css +ion-content { + --background: #d31373; + --color: #fff; +} +``` diff --git a/static/usage/content/theming/css-properties/react/main_tsx.md b/static/usage/content/theming/css-properties/react/main_tsx.md new file mode 100644 index 00000000000..33f0e53433b --- /dev/null +++ b/static/usage/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/content/theming/css-properties/vue.md b/static/usage/content/theming/css-properties/vue.md new file mode 100644 index 00000000000..09322711dfd --- /dev/null +++ b/static/usage/content/theming/css-properties/vue.md @@ -0,0 +1,30 @@ +```html + + + + + +``` From 1ad4bbe020574975e74f3ec153ca1b38a6042bb1 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Mon, 24 Oct 2022 11:59:05 -0400 Subject: [PATCH 12/14] docs(content): update section descriptions --- docs/api/content.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/docs/api/content.md b/docs/api/content.md index b538e9ef202..fff65c335ce 100644 --- a/docs/api/content.md +++ b/docs/api/content.md @@ -34,6 +34,8 @@ import Basic from '@site/static/usage/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/content/header-footer/index.md'; @@ -41,6 +43,8 @@ import HeaderFooter from '@site/static/usage/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. This can be achieved by setting the `fullscreen` property on the content to `true`. + import Fullscreen from '@site/static/usage/content/fullscreen/index.md'; @@ -56,12 +60,15 @@ import Fixed from '@site/static/usage/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/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/content/scroll-events/index.md'; From 1316e7ee98f4254b0733b0e8a69823c9ecf8bb73 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Tue, 25 Oct 2022 15:41:23 -0400 Subject: [PATCH 13/14] docs(content): add opacity instead of translucent headers --- docs/api/content.md | 2 +- static/usage/content/fullscreen/angular.md | 39 --------------- .../angular/example_component_css.md | 9 ++++ .../angular/example_component_html.md | 25 ++++++++++ static/usage/content/fullscreen/demo.html | 40 +++++++-------- static/usage/content/fullscreen/index.md | 26 ++++++++-- static/usage/content/fullscreen/javascript.md | 40 +++++++-------- static/usage/content/fullscreen/react.md | 50 ------------------- .../content/fullscreen/react/main_css.md | 9 ++++ .../content/fullscreen/react/main_tsx.md | 37 ++++++++++++++ static/usage/content/fullscreen/vue.md | 40 +++++++-------- 11 files changed, 158 insertions(+), 159 deletions(-) delete mode 100644 static/usage/content/fullscreen/angular.md create mode 100644 static/usage/content/fullscreen/angular/example_component_css.md create mode 100644 static/usage/content/fullscreen/angular/example_component_html.md delete mode 100644 static/usage/content/fullscreen/react.md create mode 100644 static/usage/content/fullscreen/react/main_css.md create mode 100644 static/usage/content/fullscreen/react/main_tsx.md diff --git a/docs/api/content.md b/docs/api/content.md index fff65c335ce..8838a16786b 100644 --- a/docs/api/content.md +++ b/docs/api/content.md @@ -43,7 +43,7 @@ import HeaderFooter from '@site/static/usage/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. This can be achieved by setting the `fullscreen` property on the content to `true`. +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/content/fullscreen/index.md'; diff --git a/static/usage/content/fullscreen/angular.md b/static/usage/content/fullscreen/angular.md deleted file mode 100644 index 82fc2e6e7d0..00000000000 --- a/static/usage/content/fullscreen/angular.md +++ /dev/null @@ -1,39 +0,0 @@ -```html - - - - Header - - - - -

Animal Facts

- -

Rhinoceros

- rhino standing near grass -

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

- brown sea turtle in water -

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

- giraffe sticking its tongue out -

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

- two grey elephants on grass plains during sunset -

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

- black and white dolphin in water -

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/content/fullscreen/angular/example_component_css.md b/static/usage/content/fullscreen/angular/example_component_css.md new file mode 100644 index 00000000000..68ecdbc19dc --- /dev/null +++ b/static/usage/content/fullscreen/angular/example_component_css.md @@ -0,0 +1,9 @@ +```css +ion-content { + --background: linear-gradient(#c0ff33, #d31373); +} + +ion-toolbar { + --opacity: .5 +} +``` diff --git a/static/usage/content/fullscreen/angular/example_component_html.md b/static/usage/content/fullscreen/angular/example_component_html.md new file mode 100644 index 00000000000..c5cf5a10dd9 --- /dev/null +++ b/static/usage/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/content/fullscreen/demo.html b/static/usage/content/fullscreen/demo.html index e33cdb82241..fced77f6d6f 100644 --- a/static/usage/content/fullscreen/demo.html +++ b/static/usage/content/fullscreen/demo.html @@ -9,11 +9,21 @@ + + - + Header @@ -21,29 +31,15 @@ -

Animal Facts

- -

Rhinoceros

- rhino standing near grass -

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

- brown sea turtle in water -

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

- giraffe sticking its tongue out -

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

- two grey elephants on grass plains during sunset -

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.

+

Scroll the content and notice that the text goes behind the header and footer.

-

Dolphin

- black and white dolphin in water -

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.

+

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/content/fullscreen/index.md b/static/usage/content/fullscreen/index.md index 36072fa58e3..015ddad0a04 100644 --- a/static/usage/content/fullscreen/index.md +++ b/static/usage/content/fullscreen/index.md @@ -1,12 +1,32 @@ import Playground from '@site/src/components/global/Playground'; import javascript from './javascript.md'; -import react from './react.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 from './angular.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; + Header @@ -7,33 +7,29 @@ -

Animal Facts

+

Scroll the content and notice that the text goes behind the header and footer.

-

Rhinoceros

- rhino standing near grass -

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

- brown sea turtle in water -

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

- giraffe sticking its tongue out -

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

- two grey elephants on grass plains during sunset -

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

- black and white dolphin in water -

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.

+

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/content/fullscreen/react.md b/static/usage/content/fullscreen/react.md deleted file mode 100644 index 98b5f02b574..00000000000 --- a/static/usage/content/fullscreen/react.md +++ /dev/null @@ -1,50 +0,0 @@ -```tsx -import React from 'react'; -import { IonContent, IonFooter, IonHeader, IonTitle, IonToolbar } from '@ionic/react'; - -function Example() { - return ( - <> - - - - Header - - - - - -

Animal Facts

- -

Rhinoceros

- rhino standing near grass -

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

- brown sea turtle in water -

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

- giraffe sticking its tongue out -

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

- two grey elephants on grass plains during sunset -

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

- black and white dolphin in water -

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/content/fullscreen/react/main_css.md b/static/usage/content/fullscreen/react/main_css.md new file mode 100644 index 00000000000..68ecdbc19dc --- /dev/null +++ b/static/usage/content/fullscreen/react/main_css.md @@ -0,0 +1,9 @@ +```css +ion-content { + --background: linear-gradient(#c0ff33, #d31373); +} + +ion-toolbar { + --opacity: .5 +} +``` diff --git a/static/usage/content/fullscreen/react/main_tsx.md b/static/usage/content/fullscreen/react/main_tsx.md new file mode 100644 index 00000000000..ca324631897 --- /dev/null +++ b/static/usage/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/content/fullscreen/vue.md b/static/usage/content/fullscreen/vue.md index 08713f54b78..e163fde2d75 100644 --- a/static/usage/content/fullscreen/vue.md +++ b/static/usage/content/fullscreen/vue.md @@ -1,6 +1,6 @@ ```html