You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The content component provides an easy to use content area with some useful methods
37
22
to control the scrollable area. There should only be one content in a single
@@ -40,204 +25,117 @@ view.
40
25
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).
41
26
42
27
43
-
## Fixed Content
28
+
## Basic Usage
44
29
45
-
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).
30
+
import Basic from '@site/static/usage/content/basic/index.md';
46
31
47
-
## Interfaces
32
+
<Basic />
48
33
49
-
### ScrollBaseDetail
50
34
51
-
```typescript
52
-
interfaceScrollBaseDetail {
53
-
isScrolling:boolean;
54
-
}
55
-
```
35
+
## Header & Footer
56
36
57
-
### ScrollDetail
37
+
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';
67
40
68
-
While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing on the `ionScrollStart` and `ionScrollEnd` events.
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`.
89
47
90
-
## Usage
48
+
import Fullscreen from '@site/static/usage/content/fullscreen/index.md';
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.
109
56
57
+
import Fixed from '@site/static/usage/content/fixed/index.md';
110
58
59
+
<Fixed />
111
60
112
-
</TabItem>
61
+
## Scroll Methods
113
62
63
+
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.
114
64
115
-
<TabItemvalue="javascript">
65
+
import ScrollMethods from '@site/static/usage/content/scroll-methods/index.md';
116
66
117
-
```html
118
-
<ion-content>
119
-
<h1>Main Content</h1>
67
+
<ScrollMethods />
120
68
121
-
<divslot="fixed">
122
-
<h1>Fixed Content</h1>
123
-
</div>
124
-
</ion-content>
125
-
```
69
+
## Scroll Events
126
70
127
-
```javascript
128
-
var content =document.querySelector('ion-content');
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).
134
72
73
+
import ScrollEvents from '@site/static/usage/content/scroll-events/index.md';
135
74
136
-
</TabItem>
75
+
<ScrollEvents />
137
76
138
77
139
-
<TabItemvalue="react">
78
+
## Theming
140
79
141
-
```tsx
142
-
importReactfrom'react';
143
-
import { IonContent } from'@ionic/react';
80
+
### Colors
144
81
145
-
const ContentExample:React.FC= () => (
146
-
<IonContent
147
-
scrollEvents={true}
148
-
onIonScrollStart={() => {}}
149
-
onIonScroll={() => {}}
150
-
onIonScrollEnd={() => {}}>
151
-
<h1>Main Content</h1>
82
+
import Colors from '@site/static/usage/content/theming/colors/index.md';
152
83
153
-
<divslot="fixed">
154
-
<h1>Fixed Content</h1>
155
-
</div>
156
-
</IonContent>
157
-
);
158
-
```
84
+
<Colors />
159
85
86
+
### CSS Shadow Parts
160
87
161
-
</TabItem>
88
+
import CSSParts from '@site/static/usage/content/theming/css-shadow-parts/index.md';
162
89
90
+
<CSSParts />
163
91
164
-
<TabItemvalue="stencil">
92
+
### CSS Custom Properties
165
93
166
-
```tsx
167
-
import { Component, h } from'@stencil/core';
94
+
import CSSProps from '@site/static/usage/content/theming/css-properties/index.md';
While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing on the `ionScrollStart` and `ionScrollEnd` events.
0 commit comments