From 373a97283f38b41759206860bc96330814fa025d Mon Sep 17 00:00:00 2001 From: mhartington Date: Thu, 24 May 2018 13:23:39 -0400 Subject: [PATCH] docs(): add more docs about virtual-scroll and ion-img --- core/src/components/img/readme.md | 96 +------------------ core/src/components/img/usage/angular.md | 10 ++ core/src/components/virtual-scroll/readme.md | 2 +- .../virtual-scroll/usage/angular.md | 66 +++++++++++++ 4 files changed, 79 insertions(+), 95 deletions(-) create mode 100644 core/src/components/img/usage/angular.md create mode 100644 core/src/components/virtual-scroll/usage/angular.md diff --git a/core/src/components/img/readme.md b/core/src/components/img/readme.md index e145b21d2d..02b8905441 100644 --- a/core/src/components/img/readme.md +++ b/core/src/components/img/readme.md @@ -1,98 +1,6 @@ -# ion-fab +# ion-img -Fabs are container elements that contain one or more fab buttons. They should be placed in a fixed position that does not scroll with the content. The following attributes can be used to position the fab with respect to the content: - -| Value | Alignment | Details | -|--------------|------------|---------------------------------------------------------------------------| -| `top` | vertical | Places the container at the top of the content. | -| `bottom` | vertical | Places the container at the bottom of the content. | -| `middle` | vertical | Places the container in the middle vertically. | -| `edge` | vertical | Used to place the container between the content and the header/footer. | -| `left` | horizontal | Places the container on the left. | -| `right` | horizontal | Places the container on the right. | -| `center` | horizontal | Places the container in the center horizontally. | - -The fab should have one main fab button. Fabs can also contain fab lists which contain related buttons that show when the main fab button is clicked. The same fab container can contain several [fab list](../../fab-list/FabList) elements with different side values. - -```html - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -``` +Img is a tag that will lazyily load an image when ever the tag is in the viewport. This is extremely useful when generating a large list as images are only loaded when they're visible. The component uses [Intersection Observer](https://caniuse.com/#feat=intersectionobserver) internally, which is supported in most modern browser, but falls back to a `setTimeout` when it is not supported. diff --git a/core/src/components/img/usage/angular.md b/core/src/components/img/usage/angular.md new file mode 100644 index 0000000000..d2e1301082 --- /dev/null +++ b/core/src/components/img/usage/angular.md @@ -0,0 +1,10 @@ +```html + + + + + + {{item.text}} + + +``` diff --git a/core/src/components/virtual-scroll/readme.md b/core/src/components/virtual-scroll/readme.md index 44d0d4e943..b92efff921 100644 --- a/core/src/components/virtual-scroll/readme.md +++ b/core/src/components/virtual-scroll/readme.md @@ -17,7 +17,7 @@ The `virtualScroll` and `*virtualItem` properties can be added to any element. ```html - {% raw %}{{ item }}{% endraw %} + {{ item }} ``` diff --git a/core/src/components/virtual-scroll/usage/angular.md b/core/src/components/virtual-scroll/usage/angular.md new file mode 100644 index 0000000000..df10c211a5 --- /dev/null +++ b/core/src/components/virtual-scroll/usage/angular.md @@ -0,0 +1,66 @@ +```html + + + +
+ +
+ + {{ item.name }} + + {{ item.content }} + + + +``` + +```typescript +export class VirtualScrollPageComponent { + items: any[] = []; + + constructor() { + for (let i = 0; i < 1000; i++) { + this.items.push({ + name: i + ' - ' + images[rotateImg], + imgSrc: getImgSrc(), + avatarSrc: getImgSrc(), + imgHeight: Math.floor(Math.random() * 50 + 150), + content: lorem.substring(0, Math.random() * (lorem.length - 100) + 100) + }); + + rotateImg++; + if (rotateImg === images.length) { + rotateImg = 0; + } + } + } +} + +const lorem = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, seddo eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`; + +const images = [ + 'bandit', + 'batmobile', + 'blues-brothers', + 'bueller', + 'delorean', + 'eleanor', + 'general-lee', + 'ghostbusters', + 'knight-rider', + 'mirth-mobile' +]; + +function getImgSrc() { + const src = `https://dummyimage.com/600x400/${Math.round( + Math.random() * 99999 + )}/fff.png`; + rotateImg++; + if (rotateImg === images.length) { + rotateImg = 0; + } + return src; +} + +let rotateImg = 0; +```