Skip to content

Commit 0579bba

Browse files
committed
docs(content): update docs
1 parent 5cb9d65 commit 0579bba

File tree

1 file changed

+55
-63
lines changed

1 file changed

+55
-63
lines changed

src/components/content/content.ts

Lines changed: 55 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,61 @@ import { isTrueProperty } from '../../util/util';
4444
* }
4545
* ```
4646
*
47+
* @advanced
48+
*
49+
* Resizing the content
50+
*
51+
*
52+
* ```ts
53+
* @Component({
54+
* template: `
55+
* <ion-header>
56+
* <ion-navbar>
57+
* <ion-title>Main Navbar</ion-title>
58+
* </ion-navbar>
59+
* <ion-toolbar *ngIf="showToolbar">
60+
* <ion-title>Dynamic Toolbar</ion-title>
61+
* </ion-toolbar>
62+
* </ion-header>
63+
* <ion-content>
64+
* <button (click)="toggleToolbar()">Toggle Toolbar</button>
65+
* </ion-content>
66+
* `})
67+
*
68+
* class E2EPage {
69+
* @ViewChild(Content) content: Content;
70+
* showToolbar: boolean = false;
71+
*
72+
* toggleToolbar() {
73+
* this.showToolbar = !this.showToolbar;
74+
* this.content.resize();
75+
* }
76+
* }
77+
* ```
78+
*
79+
*
80+
* Scroll to a specific position
81+
*
82+
* ```ts
83+
* import { Component, ViewChild } from '@angular/core';
84+
* import { Content } from 'ionic-angular';
85+
*
86+
* @Component({
87+
* template: `<ion-content>
88+
* <button (click)="scrollTo()">Down 500px</button>
89+
* </ion-content>`
90+
* )}
91+
* export class MyPage{
92+
* @ViewChild(Content) content: Content;
93+
*
94+
* scrollTo() {
95+
* // set the scrollLeft to 0px, and scrollTop to 500px
96+
* // the scroll duration should take 200ms
97+
* this.content.scrollTo(0, 500, 200);
98+
* }
99+
* }
100+
* ```
101+
*
47102
*/
48103
@Component({
49104
selector: 'ion-content',
@@ -244,25 +299,6 @@ export class Content extends Ion {
244299
/**
245300
* Scroll to the specified position.
246301
*
247-
* ```ts
248-
* import { Component, ViewChild } from '@angular/core';
249-
* import { Content } from 'ionic-angular';
250-
*
251-
* @Component({
252-
* template: `<ion-content>
253-
* <button (click)="scrollTo()">Down 500px</button>
254-
* </ion-content>`
255-
* )}
256-
* export class MyPage{
257-
* @ViewChild(Content) content: Content;
258-
*
259-
* scrollTo() {
260-
* // set the scrollLeft to 0px, and scrollTop to 500px
261-
* // the scroll duration should take 200ms
262-
* this.content.scrollTo(0, 500, 200);
263-
* }
264-
* }
265-
* ```
266302
* @param {number} x The x-value to scroll to.
267303
* @param {number} y The y-value to scroll to.
268304
* @param {number} [duration] Duration of the scroll animation in milliseconds. Defaults to `300`.
@@ -275,23 +311,6 @@ export class Content extends Ion {
275311
/**
276312
* Scroll to the top of the content component.
277313
*
278-
* ```ts
279-
* import { Component, ViewChild } from '@angular/core';
280-
* import { Content } from 'ionic-angular';
281-
*
282-
* @Component({
283-
* template: `<ion-content>
284-
* <button (click)="scrollToTop()">Scroll to top</button>
285-
* </ion-content>`
286-
* )}
287-
* export class MyPage{
288-
* @ViewChild(Content) content: Content;
289-
*
290-
* scrollToTop() {
291-
* this.content.scrollToTop();
292-
* }
293-
* }
294-
* ```
295314
* @param {number} [duration] Duration of the scroll animation in milliseconds. Defaults to `300`.
296315
* @returns {Promise} Returns a promise which is resolved when the scroll has completed.
297316
*/
@@ -446,33 +465,6 @@ export class Content extends Ion {
446465
* Tell the content to recalculate its dimensions. This should be called
447466
* after dynamically adding headers, footers, or tabs.
448467
*
449-
* ```ts
450-
* @Component({
451-
* template: `
452-
* <ion-header>
453-
* <ion-navbar>
454-
* <ion-title>Main Navbar</ion-title>
455-
* </ion-navbar>
456-
* <ion-toolbar *ngIf="showToolbar">
457-
* <ion-title>Dynamic Toolbar</ion-title>
458-
* </ion-toolbar>
459-
* </ion-header>
460-
* <ion-content>
461-
* <button (click)="toggleToolbar()">Toggle Toolbar</button>
462-
* </ion-content>
463-
* `})
464-
*
465-
* class E2EPage {
466-
* @ViewChild(Content) content: Content;
467-
* showToolbar: boolean = false;
468-
*
469-
* toggleToolbar() {
470-
* this.showToolbar = !this.showToolbar;
471-
* this.content.resize();
472-
* }
473-
* }
474-
* ```
475-
*
476468
*/
477469
resize() {
478470
nativeRaf(() => {

0 commit comments

Comments
 (0)