javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-11-05 13:26:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: cleanup

Browse Source
This commit is contained in:
Nathan Walker
2020-07-23 14:03:37 -07:00
parent 6d039909af
commit 1e6fccf272
1534 changed files with 45656 additions and 45945 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
apps/ui/app/flexbox/flexbox-4143-page.css Normal file
View File

@@ -0,0 +1,6 @@
.bg-background {
background-image: url("~/resources/images/gravatar.png");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

6
apps/ui/app/flexbox/flexbox-4143-page.xml Normal file
View File

@@ -0,0 +1,6 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd">
<FlexboxLayout flexDirection="column" class="legend-wrapper bg-background" flexGrow="1">
<Label text="TyFitt" class="title"></Label>
<Label text="Workout is a life style." class="legend"></Label>
</FlexboxLayout>
</Page>

14
apps/ui/app/flexbox/flexbox-4834-page.css Normal file
View File

@@ -0,0 +1,14 @@
image {
width: 40;
height: 40;
flex-grow: 0;
flex-shrink: 0;
}
Label {
border-width: 1;
border-color: black;
padding: 0;
flex-grow: 1;
flex-shrink: 1;
}

55
apps/ui/app/flexbox/flexbox-4834-page.xml Normal file
View File

@@ -0,0 +1,55 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd" class="page">
<StackLayout width="200" class="p-20">
<!-- Android -->
<FlexboxLayout>
<Label textWrap="true" text="a b c d e f g h i j k l m n o p q r s t" />
</FlexboxLayout>
<FlexboxLayout>
<Image src="https://placehold.it/40x40" />
<Label textWrap="true" text="a b c d e f g h i j k l m n o p" />
</FlexboxLayout>
<FlexboxLayout flexWrap="wrap">
<Label textWrap="true" text="a b c d e f g h i j k l m n o p q r s t" />
<Label textWrap="true" text="a b c d e f g h i j k l m n o p q r s t" />
</FlexboxLayout>
<!-- iOS -->
<FlexboxLayout>
<Label textWrap="true" text="a b c d e f g h i j k l m n o p" />
</FlexboxLayout>
<FlexboxLayout>
<Label textWrap="true" text="a b c d e f g h i j k l m n o p q" />
</FlexboxLayout>
<FlexboxLayout>
<Image src="https://placehold.it/40x40" />
<Label textWrap="true" text="a b c d e f g h i j k l m" />
</FlexboxLayout>
<FlexboxLayout>
<Image src="https://placehold.it/40x40" />
<Label textWrap="true" text="a b c d e f g h i j k l m n" />
</FlexboxLayout>
<FlexboxLayout flexWrap="wrap">
<Label textWrap="true" text="a b c d e f g h i j k l m n o p" />
<Label textWrap="true" text="a b c d e f g h i j k l m n o p q" />
</FlexboxLayout>
<!-- Common -->
<FlexboxLayout alignItems="flex-start">
<Label textWrap="true" text="a b" style="flex-shrink:0;" />
<Label textWrap="true" text="a b c d e f g h i" />
<Label textWrap="true" text="a b c d e f g h i j" />
<Label textWrap="true" text="a b c d e f g h i j k" />
</FlexboxLayout>
</StackLayout>
</Page>

1
apps/ui/app/flexbox/flexbox-css-page.css Normal file
View File

@@ -0,0 +1 @@
/* Empty CSS to avoid styles leaking from the page - https://github.com/NativeScript/NativeScript/issues/8143 */

20
apps/ui/app/flexbox/flexbox-css-page.ts Normal file
View File

@@ -0,0 +1,20 @@
export function resetStyles(args) {
args.object.page.css = '#container { border-color: black; border-width: 1; margin: 5; } #container>Label { border-width: 2; border-color: black; border-radius: 5; }';
}
export const flexFlow = applyCss();
function applyCss() {
return function (args) {
let boxCss = ' #container { ' + args.object.tag + ' }';
// console.log(boxCss);
args.object.page.addCss(boxCss);
// console.log(args.object.page.css);
};
}
export function applyStyles(args) {
resetStyles(args);
// console.log(args.object.tag);
args.object.page.addCss(args.object.tag);
}

43
apps/ui/app/flexbox/flexbox-css-page.xml Normal file
View File

@@ -0,0 +1,43 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd" android:actionBarHidden="true" loaded="resetStyles">
<GridLayout rows="200, *">
<FlexboxLayout style="flex-wrap: wrap;">
<Button text="r" tap="resetStyles" automationText="reset" />
<!--container-->
<Button text="f" tag="flex-flow: row-reverse wrap-reverse;" tap="flexFlow" automationText="flexFlow" />
<!--items-->
<Button text="o1" tag="#container { flex-wrap: wrap; } #itemRowReverse-0 { order: 0; } #itemRowReverse-1 { order: 2; }" tap="applyStyles" automationText="o1" />
<Button text="g1" tag="#container { flex-wrap: wrap; } #itemColumnReverse-0 { flex-grow: 1; } #itemColumnReverse-1 { flex-grow: 1; }" tap="applyStyles" automationText="g1" />
<Button text="s1" tag="#container { flex-wrap: nowrap; } #itemColumnReverse-0 { flex-shrink: 0; } #itemColumnReverse-1 { flex-shrink: 0; }" tap="applyStyles" automationText="s1" />
<Button text="a1" tag="#container { flex-wrap: nowrap; } .one { align-self: center; }" tap="applyStyles" automationText="a1" />
<!--flex-->
<Button text="f0" tag="#container { flex-wrap: nowrap; } #itemRowReverse-1 { flex: 0 1; } #itemColumn-1 { flex: 0 1; } #itemColumnReverse-1 { flex: 0 1; }" tap="applyStyles" automationText="f0" />
<Button text="f1" tag="#container { flex-wrap: wrap; } #itemRowReverse-1 { flex: 3; } #itemColumn-1 { flex: 2; } #itemColumnReverse-1 { flex: 1; }" tap="applyStyles" automationText="f1" />
<Button text="f2" tag="#container { flex-wrap: nowrap; } #itemRowReverse-1 { flex: 3 0; } #itemColumn-1 { flex: 2 0; } #itemColumnReverse-1 { flex: 1 0; }" tap="applyStyles" automationText="f2" />
</FlexboxLayout>
<FlexboxLayout row="1" id="container" automationText="container">
<Label text="row" tap="select" backgroundColor="yellow" automationText="itemRow-0" id="itemRow-0" class="zero" margin="10" />
<Label text="row-reverse" tap="select" backgroundColor="lightgreen" automationText="itemRowReverse-0" id="itemRowReverse-0" class="zero" />
<Label text="column" tap="select" backgroundColor="lightblue" automationText="itemColumn-0" id="itemColumn-0" class="zero" />
<Label text="column-reverse" tap="select" backgroundColor="lightsalmon" automationText="itemColumnReverse-0" id="itemColumnReverse-0" class="zero" />
<Label text="row" tap="select" backgroundColor="yellow" automationText="itemRow-1" id="itemRow-1" class="one" />
<Label text="row-reverse" tap="select" backgroundColor="lightgreen" automationText="itemRowReverse-1" id="itemRowReverse-1" class="one" />
<Label text="column" tap="select" backgroundColor="lightblue" automationText="itemColumn-1" id="itemColumn-1" class="one" />
<Label text="column-reverse" tap="select" backgroundColor="lightsalmon" automationText="itemColumnReverse-1" id="itemColumnReverse-1" class="one" />
<!--
<Label text="row" tap="select" backgroundColor="yellow" automationText="itemRow-2" id="itemRow-2" class="two" />
<Label text="row-reverse" tap="select" backgroundColor="lightgreen" automationText="itemRowReverse-2" id="itemRowReverse-2" class="two" />
<Label text="column" tap="select" backgroundColor="lightblue" automationText="itemColumn-2" id="itemColumn-2" class="two" />
<Label text="column-reverse" tap="select" backgroundColor="lightsalmon" automationText="itemColumnReverse-2" id="itemColumnReverse-2" class="two" />
-->
</FlexboxLayout>
</GridLayout>
</Page>

26
apps/ui/app/flexbox/flexbox-demo-page.css Normal file
View File

@@ -0,0 +1,26 @@
#body {
flex-flow: row wrap;
}
.flex-item {
align-items: center;
justify-content: center;
}
.header,
.footer {
flex: 1;
width: 100%;
background-color: lightgreen;
}
.main {
flex: 5;
height: 60%;
background-color: lightsalmon;
}
.sidebar {
flex: 1;
background-color: lightblue;
}

19
apps/ui/app/flexbox/flexbox-demo-page.xml Normal file
View File

@@ -0,0 +1,19 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd">
<FlexboxLayout id="body">
<FlexboxLayout class="flex-item header">
<Label text="Header" />
</FlexboxLayout>
<FlexboxLayout class="flex-item sidebar">
<Label text="Sidebar" />
</FlexboxLayout>
<FlexboxLayout class="flex-item main">
<Label text="Main" />
</FlexboxLayout>
<FlexboxLayout class="flex-item sidebar">
<Label text="Sidebar" />
</FlexboxLayout>
<FlexboxLayout class="flex-item footer">
<Label text="Footer" />
</FlexboxLayout>
</FlexboxLayout>
</Page>

23
apps/ui/app/flexbox/flexbox-main-page.ts Normal file
View File

@@ -0,0 +1,23 @@
import { EventData } from '@nativescript/core/data/observable';
import { SubMainPageViewModel } from '../sub-main-page-view-model';
import { WrapLayout } from '@nativescript/core/ui/layouts/wrap-layout';
import { Page } from '@nativescript/core/ui/page';
export function pageLoaded(args: EventData) {
const page = <Page>args.object;
const wrapLayout = <WrapLayout>page.getViewById('wrapLayout');
page.bindingContext = new SubMainPageViewModel(wrapLayout, loadExamples());
}
export function loadExamples() {
const examples = new Map<string, string>();
examples.set('flexboxall', 'flexbox/flexbox-page');
examples.set('flexboxcss', 'flexbox/flexbox-css-page');
examples.set('flexboxdemo', 'flexbox/flexbox-demo-page');
examples.set('flexrepeat', 'flexbox/flexbox-repeater-page');
examples.set('flex-perf', 'flexbox/flexbox-perf-comparison-page');
examples.set('flexbox-4143', 'flexbox/flexbox-4143-page');
examples.set('flexbox-4834', 'flexbox/flexbox-4834-page');
return examples;
}

6
apps/ui/app/flexbox/flexbox-main-page.xml Normal file
View File

@@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8" ?>
<Page loaded="pageLoaded">
<ScrollView>
<WrapLayout id="wrapLayout"/>
</ScrollView>
</Page>

33
apps/ui/app/flexbox/flexbox-page.css Normal file
View File

@@ -0,0 +1,33 @@
#container {
border-color: black;
border-width: 1;
margin: 5;
}
#container>Label {
border-width: 2;
border-color: black;
border-radius: 5;
}
#container>Label[selected="yes"] {
border-color: gray;
}
.control {
font-size: 11;
}
.control FlexboxLayout {
border-width: 0 0 1 1;
border-color: gray;
}
.control Button {
android-elevation: 0;
border-width: 1 1 0 0;
border-color: gray;
font-size: 9;
padding: 0;
height: 0;
}

39
apps/ui/app/flexbox/flexbox-page.ts Normal file
View File

@@ -0,0 +1,39 @@
import { FlexboxLayout } from '@nativescript/core/ui/layouts/flexbox-layout';
function set(what: string) {
return function (args) {
let containerCss = ' #container { ' + args.object.tag + ' }';
args.object.page.addCss(containerCss);
};
}
export const flexDirection = set('flexDirection');
export const flexWrap = set('flexWrap');
export const justifyContent = set('justifyContent');
export const alignItems = set('alignItems');
export const alignContent = set('alignContent');
let lastSelection = null;
export function select(args) {
if (lastSelection) {
lastSelection.selected = 'no';
lastSelection.notify({ eventName: 'selectedChange', object: lastSelection });
}
lastSelection = args.object;
if (lastSelection) {
lastSelection.selected = 'yes';
lastSelection.notify({ eventName: 'selectedChange', object: lastSelection });
}
}
let whenSelected = (handler) => (args) => lastSelection && handler(args);
let setProperty = (setter) => (value) => setter(lastSelection, value);
let intHandler = (handler) => ({ object }) => handler(parseInt(object.text));
let stringHandler = (handler) => ({ object }) => handler(object.text);
let booleanHandler = (handler) => ({ object }) => handler(object.text === 'true');
export const order = whenSelected(intHandler(setProperty(FlexboxLayout.setOrder)));
export const flexGrow = whenSelected(intHandler(setProperty(FlexboxLayout.setFlexGrow)));
export const flexShrink = whenSelected(intHandler(setProperty(FlexboxLayout.setFlexShrink)));
export const alignSelf = whenSelected(stringHandler(setProperty(FlexboxLayout.setAlignSelf)));
export const flexWrapBefore = whenSelected(booleanHandler(setProperty(FlexboxLayout.setFlexWrapBefore)));

123
apps/ui/app/flexbox/flexbox-page.xml Normal file
View File

@@ -0,0 +1,123 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd" android:actionBarHidden="true">
<GridLayout rows="auto, *">
<GridLayout class="control" columns="auto, *" rows="25, 15, 25, 15, 25, 15, 15, 15, 15, 25, 15">
<Label row="0" text="flexDirection" verticalAlignment="center" />
<!--default=row-->
<FlexboxLayout row="0" col="1">
<Button text="row" tag="flex-direction: row;" tap="flexDirection" flexGrow="1" automationText="flexDirection-row" />
<Button text="row-reverse" tag="flex-direction: row-reverse;" tap="flexDirection" flexGrow="1" automationText="flexDirection-row-reverse" />
<Button text="column" tag="flex-direction: column;" tap="flexDirection" flexGrow="1" automationText="flexDirection-column" />
<Button text="column-reverse" tag="flex-direction: column-reverse;" tap="flexDirection" flexGrow="1" automationText="flexDirection-column-reverse" />
</FlexboxLayout>
<Label row="1" text="flexWrap" verticalAlignment="center" />
<!--default=nowrap-->
<FlexboxLayout row="1" col="1">
<Button text="nowrap" tag="flex-wrap: nowrap;" tap="flexWrap" flexGrow="1" automationText="flexWrap-nowrap" />
<Button text="wrap" tag="flex-wrap: wrap;" tap="flexWrap" flexGrow="1" automationText="flexWrap-wrap" />
<Button text="wrap-reverse" tag="flex-wrap: wrap-reverse;" tap="flexWrap" flexGrow="1" automationText="flexWrap-wrap-reverse" />
</FlexboxLayout>
<Label row="2" text="justifyContent" verticalAlignment="center" />
<!--defeault=flex-start-->
<FlexboxLayout row="2" col="1">
<Button text="flex-start" tag="justify-content: flex-start;" tap="justifyContent" flexGrow="1" automationText="justifyContent-flex-start" />
<Button text="flex-end" tag="justify-content: flex-end;" tap="justifyContent" flexGrow="1" automationText="justifyContent-flex-end" />
<Button text="center" tag="justify-content: center;" tap="justifyContent" flexGrow="1" automationText="justifyContent-center" />
<Button text="space-between" tag="justify-content: space-between;" tap="justifyContent" flexGrow="1" automationText="justifyContent-space-between" />
<Button text="space-around" tag="justify-content: space-around;" tap="justifyContent" flexGrow="1" automationText="justifyContent-space-around" />
</FlexboxLayout>
<Label row="3" text="alignItems" verticalAlignment="center" />
<!--default=stretch-->
<FlexboxLayout row="3" col="1">
<Button text="flex-start" tag="align-items: flex-start;" tap="alignItems" flexGrow="1" automationText="alignItems-flex-start" />
<Button text="flex-end" tag="align-items: flex-end;" tap="alignItems" flexGrow="1" automationText="alignItems-flex-end" />
<Button text="center" tag="align-items: center;" tap="alignItems" flexGrow="1" automationText="alignItems-center" />
<Button text="baseline" tag="align-items: baseline;" tap="alignItems" flexGrow="1" automationText="alignItems-baseline" />
<Button text="stretch" tag="align-items: stretch;" tap="alignItems" flexGrow="1" automationText="alignItems-stretch" />
</FlexboxLayout>
<Label row="4" text="alignContent" verticalAlignment="center" />
<!--default=stretch-->
<FlexboxLayout row="4" col="1">
<Button text="flex-start" tag="align-content: flex-start;" tap="alignContent" flexGrow="1" automationText="alignContent-flex-start" />
<Button text="flex-end" tag="align-content: flex-end;" tap="alignContent" flexGrow="1" automationText="alignContent-flex-end" />
<Button text="center" tag="align-content: center;" tap="alignContent" flexGrow="1" automationText="alignContent-center" />
<Button text="space-between" tag="align-content: space-between;" tap="alignContent" flexGrow="1" automationText="alignContent-space-between" />
<Button text="space-around" tag="align-content: space-around;" tap="alignContent" flexGrow="1" automationText="alignContent-space-around" />
<Button text="stretch" tag="align-content: stretch;" tap="alignContent" flexGrow="1" automationText="alignContent-stretch" />
</FlexboxLayout>
<Label row="5" colSpan="2" text="--- selected item properties ---" />
<Label text="order" row="6" />
<!--default=1-->
<FlexboxLayout row="6" col="1">
<Button text="0" tap="order" flexGrow="1" automationText="order-0" />
<Button text="1" tap="order" flexGrow="1" automationText="order-1" />
<Button text="2" tap="order" flexGrow="1" automationText="order-2" />
<Button text="3" tap="order" flexGrow="1" automationText="order-3" />
<Button text="4" tap="order" flexGrow="1" automationText="order-4" />
</FlexboxLayout>
<Label text="flexGrow" row="7" />
<!--default=0-->
<FlexboxLayout row="7" col="1">
<Button text="0" tap="flexGrow" flexGrow="1" automationText="flexGrow-0" />
<Button text="1" tap="flexGrow" flexGrow="1" automationText="flexGrow-1" />
<Button text="2" tap="flexGrow" flexGrow="1" automationText="flexGrow-2" />
<Button text="3" tap="flexGrow" flexGrow="1" automationText="flexGrow-3" />
<Button text="4" tap="flexGrow" flexGrow="1" automationText="flexGrow-4" />
</FlexboxLayout>
<Label text="flexShrink" row="8" />
<!--default=1-->
<FlexboxLayout row="8" col="1">
<Button text="0" tap="flexShrink" flexGrow="1" automationText="flexShrink-0" />
<Button text="1" tap="flexShrink" flexGrow="1" automationText="flexShrink-1" />
<Button text="2" tap="flexShrink" flexGrow="1" automationText="flexShrink-2" />
<Button text="3" tap="flexShrink" flexGrow="1" automationText="flexShrink-3" />
<Button text="4" tap="flexShrink" flexGrow="1" automationText="flexShrink-4" />
</FlexboxLayout>
<Label row="9" text="alignSelf" verticalAlignment="center" />
<!--defaut=stretch-->
<FlexboxLayout row="9" col="1">
<Button text="auto" tap="alignSelf" flexGrow="1" automationText="alignSelf-auto" />
<Button text="flex-start" tap="alignSelf" flexGrow="1" automationText="alignSelf-flex-start" />
<Button text="flex-end" tap="alignSelf" flexGrow="1" automationText="alignSelf-flex-end" />
<Button text="center" tap="alignSelf" flexGrow="1" automationText="alignSelf-center" />
<Button text="baseline" tap="alignSelf" flexGrow="1" automationText="alignSelf-baseline" />
<Button text="stretch" tap="alignSelf" flexGrow="1" automationText="alignSelf-stretch" />
</FlexboxLayout>
<Label row="10" text="flexWrapBefore" verticalAlignment="center" />
<FlexboxLayout row="10" col="1">
<Button text="true" tap="flexWrapBefore" flexGrow="1" automationText="flexWrapBefore-true" />
<Button text="false" tap="flexWrapBefore" flexGrow="1" automationText="flexWrapBefore-false" />
</FlexboxLayout>
</GridLayout>
<FlexboxLayout id="container" row="1">
<Label text="row" tap="select" backgroundColor="yellow" automationText="itemRow-0" margin="10" />
<Label text="row-reverse" tap="select" backgroundColor="lightgreen" automationText="itemRowReverse-0" />
<Label text="column" tap="select" backgroundColor="lightblue" automationText="itemColumn-0" />
<Label text="column-reverse" tap="select" backgroundColor="lightsalmon" automationText="itemColumnReverse-0" />
<Label text="row" tap="select" backgroundColor="yellow" automationText="itemRow-1" />
<Label text="row-reverse" tap="select" backgroundColor="lightgreen" automationText="itemRowReverse-1" />
<Label text="column" tap="select" backgroundColor="lightblue" automationText="itemColumn-1" />
<Label text="column-reverse" tap="select" backgroundColor="lightsalmon" automationText="itemColumnReverse-1" />
<!--
<Label text="row" tap="select" backgroundColor="yellow" automationText="itemRow-2" />
<Label text="row-reverse" tap="select" backgroundColor="lightgreen" automationText="itemRowReverse-2" />
<Label text="column" tap="select" backgroundColor="lightblue" automationText="itemColumn-2" />
<Label text="column-reverse" tap="select" backgroundColor="lightsalmon" automationText="itemColumnReverse-2" />
-->
</FlexboxLayout>
</GridLayout>
</Page>

64
apps/ui/app/flexbox/flexbox-perf-comparison-page.ts Normal file
View File

@@ -0,0 +1,64 @@
import { TabView } from '@nativescript/core/ui/tab-view';
import * as utils from '@nativescript/core/utils/utils';
const titles = ['Etiam lacinia', 'Imperdiet ante', 'A interdum', 'Quisque tempus', 'Sodales viverra'];
const bodies = [
'Vivamus ipsum neque, commodo rutrum finibus sit amet, cursus id sapien.',
'Duis et iaculis odio. Class aptent taciti.',
'Sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.',
'Etiam vitae lacinia purus. Vestibulum laoreet nibh a porta aliquet.',
'Vivamus ut eros vitae felis volutpat aliquet.',
'Aliquam fermentum mauris consequat hendrerit elementum.',
'Nam odio tortor, malesuada congue diam volutpat, placerat ullamcorper risus.',
'Curabitur eget nunc viverra justo bibendum rutrum ut nec lectus.',
'Pellentesque et lacus vel turpis suscipit posuere sed non sapien.',
'Integer eget ornare nunc. In lacinia congue sollicitudin.',
'Quisque lobortis quam in risus porttitor, ac laoreet lacus auctor.',
];
const items = [];
for (var i = 0; i < 64; i++) {
items.push({
icon: '~/flexbox/icons/icon' + (1 + (i % 3)) + '.jpg',
title: titles[i % titles.length],
body: bodies[i % bodies.length],
up: (i * 991) % 100,
down: (i * 997) % 100,
});
}
export function selectionChanged(args) {
clear(args);
}
let repeaterIds = ['repeaterFlexGrid', 'repeaterGrid', 'repeaterFlexStack', 'repeaterStack'];
export function clear(args) {
repeaterIds
.map((name) => args.object.page.getViewById(name))
.forEach((repeater) => {
repeater.bindingContext = null;
});
args.object.page.getViewById('title').text = '---';
utils.GC();
}
export function generate(args) {
let tab: TabView = args.object.page.getViewById('tabview');
let index = tab.selectedIndex;
let repeater = args.object.page.getViewById(repeaterIds[index]);
clear(args);
setTimeout(() => {
let start = Date.now();
repeater.bindingContext = items;
setTimeout(() => {
let end = Date.now();
args.object.page.getViewById('title').text = (end - start).toString();
console.log('Duration: ' + (end - start));
});
});
}

87
apps/ui/app/flexbox/flexbox-perf-comparison-page.xml Normal file
View File

@@ -0,0 +1,87 @@
<Page>
<ActionBar id="actionbar">
<Label id="title" text="---" />
<ActionItem ios.systemIcon="17" android.systemIcon="ic_menu_play_clip" tap="generate" ios.position="right" />
</ActionBar>
<TabView id="tabview" selectedIndexChanged="selectionChanged">
<TabView.items>
<TabViewItem title="flex-grid">
<TabViewItem.view>
<ScrollView>
<!-- Fix this: style="flex: 1 0; height: 0;"-->
<Repeater id="repeaterFlexGrid" items="{{ $value }}">
<Repeater.itemTemplate>
<FlexboxLayout flexDirection="row" flexWrap="wrap" alignItems="center" borderWidth="0 0 1 0" borderColor="#EEEEEE">
<Image src="{{ icon }}" flexGrow="0" flexShrink="1" margin="6 4 4 4" borderWidth="1" borderColor="gray" borderRadius="16" width="32" height="32" />
<Label text="{{ title }}" flexGrow="1" flexShrink="0" width="0" margin="1 4 0 0" />
<Label text="{{ body }}" textWrap="true" width="100%" margin="4 4 6 4" fontSize="11" />
<Image src="~/flexbox/icons/thumbsdown.png" width="18" height="18" margin="4" />
<Label text="{{ up }}" flexGrow="1" flexShrink="0" width="0" fontSize="13" />
<Image src="~/flexbox/icons/thumbsup.png" width="18" height="18" margin="4" />
<Label text="{{ down }}" flexGrow="1" flexShrink="0" width="0" fontSize="13" />
</FlexboxLayout>
</Repeater.itemTemplate>
</Repeater>
</ScrollView>
</TabViewItem.view>
</TabViewItem>
<TabViewItem title="grid">
<TabViewItem.view>
<ScrollView>
<Repeater id="repeaterGrid" items="{{ $value }}">
<Repeater.itemTemplate>
<GridLayout columns="*, *" rows="auto, auto, auto" borderWidth="0 0 1 0" borderColor="#EEEEEE">
<Image src="{{ icon }}" colSpan="2" horizontalAlignment="left" width="32" height="32" margin="6 4 4 4" borderWidth="1" borderRadius="16" borderColor="16" borderColor="gray" />
<Label text="{{ title }}" colSpan="2" margin="4 4 0 41" verticalAlignment="center" />
<Label text="{{ body }}" colSpan="2" row="1" textWrap="true" margin="4 4 6 4" fontSize="11" />
<Image src="~/thumbsdown.png" row="2" width="18" height="18" margin="4" horizontalAlignment="left" />
<Label text="{{ up }}" row="2" fontSize="13" margin="0 0 0 26" verticalAlignment="center" />
<Image src="~/thumbsup.png" row="2" col="1" width="18" height="18" margin="4" horizontalAlignment="left" />
<Label text="{{ down }}" row="2" col="1" fontSize="13" margin="0 0 0 26" verticalAlignment="center" />
</GridLayout>
</Repeater.itemTemplate>
</Repeater>
</ScrollView>
</TabViewItem.view>
</TabViewItem>
<TabViewItem title="flex-stack">
<TabViewItem.view>
<ScrollView>
<Repeater id="repeaterFlexStack" items="{{ $value }}">
<Repeater.itemTemplate>
<FlexboxLayout flexDirection="column">
<Image src="{{ icon }}" alignSelf="center" width="32" height="32" margin="4" borderWidth="1" borderRadius="16" borderColor="16" borderColor="gray" />
<Label text="{{ title }}" margin="4" />
<Label text="{{ body }}" textWrap="true" margin="4" fontSize="11" />
<Image src="~/thumbsdown.png" width="18" height="18" margin="4" />
<Label text="{{ up }}" fontSize="13" alignSelf="center" />
<Image src="~/thumbsup.png" width="18" height="18" margin="4" />
<Label text="{{ down }}" fontSize="13" alignSelf="center" />
</FlexboxLayout>
</Repeater.itemTemplate>
</Repeater>
</ScrollView>
</TabViewItem.view>
</TabViewItem>
<TabViewItem title="stack">
<TabViewItem.view>
<ScrollView>
<Repeater id="repeaterStack" items="{{ $value }}">
<Repeater.itemTemplate>
<StackLayout>
<Image src="{{ icon }}" horizontalAlignment="center" width="32" height="32" margin="4" borderWidth="1" borderRadius="16" borderColor="16" borderColor="gray" />
<Label text="{{ title }}" margin="4" />
<Label text="{{ body }}" textWrap="true" margin="4" fontSize="11" />
<Image src="~/thumbsdown.png" width="18" height="18" margin="4" />
<Label text="{{ up }}" fontSize="13" horizontalAlignment="center" />
<Image src="~/thumbsup.png" width="18" height="18" margin="4" />
<Label text="{{ down }}" fontSize="13" horizontalAlignment="center" />
</StackLayout>
</Repeater.itemTemplate>
</Repeater>
</ScrollView>
</TabViewItem.view>
</TabViewItem>
</TabView.items>
</TabView>
</Page>

8
apps/ui/app/flexbox/flexbox-repeater-page.ts Normal file
View File

@@ -0,0 +1,8 @@
export function pageLoaded(args) {
var page = args.object;
var itemsArray = [];
for (var i = 1; i <= 55; i++) {
itemsArray.push({ number: 'item ' + i });
}
page.bindingContext = { items: itemsArray };
}

14
apps/ui/app/flexbox/flexbox-repeater-page.xml Normal file
View File

@@ -0,0 +1,14 @@
<?xml version="1.0" encoding="UTF-8" ?>
<Page loaded="pageLoaded">
<Repeater items="{{ items }}">
<Repeater.itemsLayout>
<FlexboxLayout flexDirection="column" flexWrap="wrap" justifyContent="center" alignItems="center" alignContent="stretch" />
</Repeater.itemsLayout>
<Repeater.itemTemplate>
<FlexboxLayout flexDirection="row">
<Label text="{{ number }}" backgroundColor="lightgreen" />
<Label text="{{ number }}" backgroundColor="lightblue" />
</FlexboxLayout>
</Repeater.itemTemplate>
</Repeater>
</Page>

BIN
apps/ui/app/flexbox/icons/icon1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
apps/ui/app/flexbox/icons/icon2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 937 B

BIN
apps/ui/app/flexbox/icons/icon3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
apps/ui/app/flexbox/icons/thumbsdown.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.0 KiB

BIN
apps/ui/app/flexbox/icons/thumbsup.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.0 KiB