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

feat(core): nativescript.config and webpack updates (#8801)

Browse Source
This commit is contained in:
Nathan Walker
2020-09-01 15:53:37 -07:00
committed by GitHub
parent 757a2ffdf7
commit 54cce4f20c
1093 changed files with 332 additions and 316 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
apps/ui/src/button/background-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 */

12
apps/ui/src/button/background-page.ts Normal file
View File

@ -0,0 +1,12 @@
import { View, Page } from '@nativescript/core';
export function applyTap(args) {
var page = <Page>(<View>args.object).page;
var css = '#test-element { ' + args.object.tag + ' }';
page.css = css;
}
export function resetTap(args) {
var page = <Page>(<View>args.object).page;
page.css = '';
}

51
apps/ui/src/button/background-page.xml Normal file
View File

@ -0,0 +1,51 @@
<Page>
<GridLayout rows="240, *">
<GridLayout automationText="test-element" id="test-element" width="290" iosOverflowSafeArea="false"></GridLayout>
<WrapLayout row="1">
<Button width="40" height="40" text="r" tap="resetTap"/>
<!-- Background and Border -->
<Button width="40" height="40" text="1" tap="applyTap" tag="margin: 20; background-color: lightgreen;"/>
<Button width="40" height="40" text="21" tap="applyTap" tag="margin: 20; background-color: lightgreen; border-color: lightpink; border-radius: 20; border-width: 40;"/>
<Button width="40" height="40" text="22" tap="applyTap" tag="margin: 20; background-color: lightgreen; border-color: lightpink; border-radius: 40; border-width: 40;"/>
<Button width="40" height="40" text="23" tap="applyTap" tag="margin: 20; background-color: lightgreen; border-color: lightpink; border-radius: 40; border-width: 20;"/>
<!-- Repeat -->
<Button width="40" height="40" text="31" tap="applyTap" tag="margin: 20; background-image: url('~/resources/images/test2.png');"/>
<Button width="40" height="40" text="32" tap="applyTap" tag="margin: 20; background-image: url('~/resources/images/test2.png'); background-repeat:repeat-y;"/>
<Button width="40" height="40" text="33" tap="applyTap" tag="margin: 20; background-image: url('~/resources/images/test2.png'); background-repeat:repeat-x;"/>
<!-- Position -->
<Button width="40" height="40" text="41" tap="applyTap" tag="margin: 20; background-image: url('~/resources/images/test2.png'); background-repeat:no-repeat;"/>
<Button width="40" height="40" text="42" tap="applyTap" tag="margin: 20; background-image: url('~/resources/images/test2.png'); background-repeat:no-repeat; background-position: right top;"/>
<Button width="40" height="40" text="43" tap="applyTap" tag="margin: 20; background-image: url('~/resources/images/test2.png'); background-repeat:no-repeat; background-position: center center;"/>
<Button width="40" height="40" text="44" tap="applyTap" tag="margin: 20; background-image: url('~/resources/images/test2.png'); background-repeat:no-repeat; background-position: left bottom;"/>
<Button width="40" height="40" text="45" tap="applyTap" tag="margin: 20; background-image: url('~/resources/images/test2.png'); background-repeat:no-repeat; background-position: 20% 80%;"/>
<Button width="40" height="40" text="46" tap="applyTap" tag="margin: 20; background-image: url('~/resources/images/test2.png'); background-repeat:no-repeat; background-position: 20 80;"/>
<Button width="40" height="40" text="47" tap="applyTap" tag="margin: 20; background-image: url('~/resources/images/test2.png'); background-repeat:no-repeat; background-position: -10 20;"/>
<Button width="40" height="40" text="48" tap="applyTap" tag="margin: 20; background-image: url('~/resources/images/test2.png'); background-repeat:no-repeat; background-position: 10 -20;"/>
<Button width="40" height="40" text="49" tap="applyTap" tag="margin: 20; background-image: url('~/resources/images/test2.png'); background-repeat:no-repeat; background-position: -10 -20;"/>
<Button width="40" height="40" text="50" tap="applyTap" tag="margin: 20; background-image: url('~/resources/images/test2.png'); background-repeat:no-repeat; background-position: center;"/>
<Button width="40" height="40" text="51" tap="applyTap" tag="margin: 20; background-image: url('~/resources/images/test2.png'); background-repeat:no-repeat; background-position: left;"/>
<Button width="40" height="40" text="52" tap="applyTap" tag="margin: 20; background-image: url('~/resources/images/test2.png'); background-repeat:no-repeat; background-position: bottom;"/>
<!-- Size -->
<Button width="40" height="40" text="61" tap="applyTap" tag="margin: 20; background-color: lightgreen; background-image: url('~/resources/images/test2.png'); background-repeat:no-repeat; background-position: center center; background-size: 100px 100px;"/>
<Button width="40" height="40" text="62" tap="applyTap" tag="margin: 20; background-color: lightgreen; background-image: url('~/resources/images/test2.png'); background-repeat:no-repeat; background-position: center center; background-size: 100% 100%;"/>
<Button width="40" height="40" text="63" tap="applyTap" tag="margin: 20; background-color: lightgreen; background-image: url('~/resources/images/test2.png'); background-repeat:no-repeat; background-position: center center; background-size: cover;"/>
<Button width="40" height="40" text="64" tap="applyTap" tag="margin: 20; background-color: lightgreen; background-image: url('~/resources/images/test2.png'); background-repeat:no-repeat; background-position: center center; background-size: contain;"/>
<!-- All -->
<Button width="40" height="40" text="71" tap="applyTap" tag="margin: 20; background-color: lightgreen; background-image: url('~/resources/images/test2.png'); background-repeat:repeat-x; background-position: 20% 80%; background-size: 25% 50%; border-radius: 20; border-width: 4; border-color: lightpink;"/>
<Button width="40" height="40" text="72" tap="applyTap" tag="margin: 20; background-color: lightgreen; background-image: url('~/resources/images/test2.png'); background-repeat:repeat-y; background-position: 80 20; background-size: 50 25; border-radius: 20; border-width: 4; border-color: lightpink; opacity: 0.5;"/>
<!-- Antialiasing -->
<Button width="40" height="40" text="73" tap="applyTap" tag="margin: 20; background-color: lightgreen; background-image: url('~/resources/images/test2.png'); background-repeat:repeat-x; background-position: -15% -15%; background-size: 50% 50%; border-radius: 9; border-width: 3; border-color: black;"/>
<Button width="40" height="40" text="74" tap="applyTap" tag="margin: 20; background-color: lightgreen; background-image: url('~/resources/images/test2.png'); background-repeat:repeat-y; background-position: -15% -15%; background-size: 50% 50%; border-radius: 9; border-width: 3; border-color: black;"/>
<Button width="40" height="40" text="75" tap="applyTap" tag="margin: 20; background-color: lightgreen; background-image: url('~/resources/images/test2.png'); background-repeat:repeat; background-position: -15% -15%; background-size: 50% 50%; border-radius: 9; border-width: 3; border-color: black;"/>
<Button width="40" height="40" text="76" tap="applyTap" tag="margin: 20; background-color: lightgreen; background-image: url('~/resources/images/test2.png'); background-repeat:no-repeat; background-position: -15% -15%; background-size: 50% 50%; border-radius: 9; border-width: 3; border-color: black;"/>
<Button width="40" height="40" text="77" tap="applyTap" tag="margin: 20; background-color: #FF00FF00; background-image: url('~/resources/images/test2.png'); background-repeat:no-repeat; background-position: -15% -15%; background-size: 50% 50%; border-radius: 20; border-width: 10; border-color: #66FF0000;"/>
<Button width="40" height="40" text="78" tap="applyTap" tag="margin: 20; background-color: #FF00FF00; background-image: url('~/resources/images/test2.png'); background-repeat:no-repeat; background-position: -15% -15%; background-size: 50% 50%; border-width: 10; border-color: #66FF0000;"/>
</WrapLayout>
</GridLayout>
</Page>

13
apps/ui/src/button/border-playground-page.css Normal file
View File

@ -0,0 +1,13 @@
StackLayout {
background-color: lightgray;
}
Button {
font-size: 8;
width: 70;
height: 40;
}
TextView {
font-size: 8;
}

34
apps/ui/src/button/border-playground-page.ts Normal file
View File

@ -0,0 +1,34 @@
import { EventData, Frame, Button, ScrollView, TextView, Color, View } from '@nativescript/core';
let red = new Color('red');
let green = new Color('green');
export function onToggle(args: EventData) {
let button = <Button>args.object;
let target = button.page.getViewById<View>('target');
let debugConsole = button.page.getViewById<TextView>('debugConsole');
let scrollView = button.page.getViewById<ScrollView>('scrollView');
if (button.text === 'Color') {
target[button.id] = target[button.id] ? undefined : red;
debugConsole.text += `> border-color: ${target.borderColor}\n`;
} else if (button.text === 'Width') {
target[button.id] = target[button.id] ? 0 : 10;
debugConsole.text += `> border-width: ${target.borderWidth}\n`;
} else if (button.text === 'Radius') {
target[button.id] = target[button.id] ? 0 : 10;
debugConsole.text += `> border-radius: ${target.borderRadius}\n`;
} else if (button.text === 'BGColor') {
target.backgroundColor = target.backgroundColor ? undefined : green;
debugConsole.text += `> background-color: ${target.backgroundColor}\n`;
} else if (button.text === 'BGImage') {
target.backgroundImage = target.backgroundImage ? undefined : `~/resources/images/test2.png`;
debugConsole.text += `> background-image: ${target.backgroundImage}\n`;
} else if (button.text === 'BGGradient') {
const gradient = 'linear-gradient(to right, purple, red)';
target.backgroundImage = typeof target.backgroundImage === 'object' ? undefined : gradient;
debugConsole.text += `> background-image: ${gradient} \n`;
}
scrollView.scrollToVerticalOffset(scrollView.scrollableHeight, true);
}

40
apps/ui/src/button/border-playground-page.xml Normal file
View File

@ -0,0 +1,40 @@
<Page>
<GridLayout rows="*,*,*,auto" columns="*,*,*">
<StackLayout id="top-left" class="button-container" row="0" col="0">
<Button text="Radius" id="borderTopLeftRadius" tap="onToggle"/>
</StackLayout>
<StackLayout id="top" class="button-container" row="0" col="1">
<Button text="Color" id="borderTopColor" tap="onToggle"/>
<Button text="Width" id="borderTopWidth" tap="onToggle"/>
</StackLayout>
<StackLayout id="top-right" class="button-container" row="0" col="2">
<Button text="Radius" id="borderTopRightRadius" tap="onToggle"/>
</StackLayout>
<StackLayout id="left" class="button-container" row="1" col="0">
<Button text="Color" id="borderLeftColor" tap="onToggle"/>
<Button text="Width" id="borderLeftWidth" tap="onToggle"/>
</StackLayout>
<StackLayout id="target" row="1" col="1">
<Button text="BGColor" tap="onToggle"/>
<Button text="BGImage" tap="onToggle"/>
<Button text="BGGradient" tap="onToggle"/>
</StackLayout>
<StackLayout id="right" class="button-container" row="1" col="2">
<Button text="Color" id="borderRightColor" tap="onToggle"/>
<Button text="Width" id="borderRightWidth" tap="onToggle"/>
</StackLayout>
<StackLayout id="bottom-left" class="button-container" row="2" col="0">
<Button text="Radius" id="borderBottomLeftRadius" tap="onToggle"/>
</StackLayout>
<StackLayout id="bottom" class="button-container" row="2" col="1">
<Button text="Color" id="borderBottomColor" tap="onToggle"/>
<Button text="Width" id="borderBottomWidth" tap="onToggle"/>
</StackLayout>
<StackLayout id="bottom-right" class="button-container" row="2" col="2">
<Button text="Radius" id="borderBottomRightRadius" tap="onToggle"/>
</StackLayout>
<ScrollView id="scrollView" row="3" col="0" colSpan="3" height="200">
<TextView id="debugConsole" text=""/>
</ScrollView>
</GridLayout>
</Page>

13
apps/ui/src/button/btn-wrap-text-alignment-4266-page.xml Normal file
View File

@ -0,0 +1,13 @@
<Page>
<Page.actionBar>
<ActionBar title="{{ exampleName }}">
<NavigationButton text="Go Back" android.systemIcon="ic_menu_back"></NavigationButton>
</ActionBar>
</Page.actionBar>
<GridLayout rows="*,*,*,*">
<Button text="This a test of a wrapping button [CENTER]" textWrap="true" style="text-align:center; width:100" />
<Button row="1" text="This a test of a wrapping button [RIGHT]" textWrap="true" style="text-align:right;width:100" />
<Button row="2" text="This a test of a wrapping button [LEFT]" textWrap="true" style="text-align:left;width:100" />
<Button row="3" text="&#xf8ff; This a test of a wrapping button [CENTER ICON]" textWrap="true" style="text-align:center;width:100" />
</GridLayout>
</Page>

103
apps/ui/src/button/button-border-page.css Normal file
View File

@ -0,0 +1,103 @@
Button {
font-size: 6;
width: 80;
height: 80;
color: black;
}
#s0 {
border-width: 5;
}
#s1 {
border-width: 5;
border-color: red;
}
#s2 {
border-width: 5;
border-color: red red red green;
}
#s3 {
border-width: 5;
border-color: red;
border-radius: 5;
}
#s4 {
border-width: 5;
border-color: red;
border-radius: 50;
}
#s5 {
border-width: 5 10 15 20;
border-color: red;
}
#s6 {
border-width: 5;
border-color: red green blue yellow;
}
#s7 {
border-width: 5 10 15 20;
border-color: red green blue yellow;
}
#s8 {
border-width: 5 10;
border-color: red green;
}
#s9 {
border-width: 15 10 5;
border-color: red green blue;
}
#s10 {
android-elevation: 0;
border-width: 5 0;
border-color: black;
}
#s11 {
background-color: magenta;
}
#s12 {
border-width: 5 10 15 20;
border-color: red green blue yellow;
border-radius: 5 10 15 20;
}
#s13 {
border-width: 5 10 15 20;
border-color: red green blue yellow;
border-radius: 5;
}
#s14 {
border-width: 5 10 15 20;
border-color: red green blue yellow;
background-color: magenta;
}
#s15 {
border-width: 5 10 15 20;
border-color: red green blue yellow;
background-image: url('~/resources/images/test2.png');
}
#s16 {
border-width: 5;
border-color: red;
padding: 5;
}
#s17 {
border-width: 5 6 7 8;
border-color: red green blue yellow;
padding: 5 6 7 8;
}

22
apps/ui/src/button/button-border-page.xml Normal file
View File

@ -0,0 +1,22 @@
<Page>
<GridLayout rows="*,*,*,*,*,*" columns="*,*,*">
<Button id="s0" row="0" col="0" textWrap="true" text="border-width: 5;"/>
<Button id="s1" row="0" col="1" textWrap="true" text="border-width: 5; border-color: red;"/>
<Button id="s2" row="0" col="2" textWrap="true" text="border-width: 5; border-color: red red red green;"/>
<Button id="s3" row="1" col="0" textWrap="true" text="border-width: 5; border-color: red; border-radius: 5;"/>
<Button id="s4" row="1" col="1" textWrap="true" text="border-width: 5; border-color: red; border-radius: 50;"/>
<Button id="s5" row="1" col="2" textWrap="true" text="border-width: 5 10 15 20; border-color: red;"/>
<Button id="s6" row="2" col="0" textWrap="true" text="border-width: 5; border-color: red green blue yellow;"/>
<Button id="s7" row="2" col="1" textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow;"/>
<Button id="s8" row="2" col="2" textWrap="true" text="border-width: 5 10; border-color: red green;"/>
<Button id="s9" row="3" col="0" textWrap="true" text="border-width: 15 10 5; border-color: red green blue;"/>
<Button id="s10" row="3" col="1" textWrap="true" text="border-width: 5 0; border-color: black;"/>
<Button id="s11" row="3" col="2" textWrap="true" text="background-color: magenta;"/>
<Button id="s12" row="4" col="0" textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5 10 15 20;"/>
<Button id="s13" row="4" col="1" textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5;"/>
<Button id="s14" row="4" col="2" textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow; background-color: magenta;"/>
<Button id="s15" row="5" col="0" textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow; background-image: url('~/resources/images/test2.png');"/>
<Button id="s16" row="5" col="1" textWrap="true" text="border-width: 5; border-color: red; padding: 5;"/>
<Button id="s17" row="5" col="2" textWrap="true" text="border-width: 5 6 7 8; border-color: red green blue yellow; padding: 5 6 7 8;"/>
</GridLayout>
</Page>

7
apps/ui/src/button/highlight-4740/highlight-4740-page.css Normal file
View File

@ -0,0 +1,7 @@
.btn {
font-size: 18;
}
.btn:highlighted {
background-color: red
}

5
apps/ui/src/button/highlight-4740/highlight-4740-page.ts Normal file
View File

@ -0,0 +1,5 @@
import * as frame from '@nativescript/core/ui/frame';
export function onTap() {
frame.topmost().navigate('button/highlight-4740/sub-page');
}

7
apps/ui/src/button/highlight-4740/highlight-4740-page.xml Normal file
View File

@ -0,0 +1,7 @@
<Page
xmlns="http://schemas.nativescript.org/tns.xsd" class="page">
<StackLayout class="p-20">
<Button text="go to sub" tap="onTap" class="btn"/>
</StackLayout>
</Page>

5
apps/ui/src/button/highlight-4740/sub-page.ts Normal file
View File

@ -0,0 +1,5 @@
import * as frame from '@nativescript/core/ui/frame';
export function goBack() {
frame.goBack();
}

4
apps/ui/src/button/highlight-4740/sub-page.xml Normal file
View File

@ -0,0 +1,4 @@
<Page
xmlns="http://www.nativescript.org/tns.xsd">
<Button text="goBack" tap="goBack" />
</Page>

28
apps/ui/src/button/issue-4287-page.xml Normal file
View File

@ -0,0 +1,28 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page">
<GridLayout columns="auto * auto" rows="auto *" borderWidth="1" borderColor="black" iosOverflowSafeArea="false">
<StackLayout borderWidth="1" borderColor="black" verticalAlignment="top" width="150">
<Label text="textWrap: false" horizontalAlignment="center"/>
<Button textWrap="false" backgroundColor="lightgreen" horizontalAlignment="left" text="1 2 3"/>
<Button textWrap="false" backgroundColor="lightblue" horizontalAlignment="left" text="1 2 3" style="padding: 5"/>
<Button textWrap="false" backgroundColor="lightgreen" horizontalAlignment="left" text="1 2 3" style="padding: 10; border-width: 10; border-color: blue;"/>
<Button textWrap="false" backgroundColor="lightblue" horizontalAlignment="left" text="1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6"/>
<Button textWrap="false" backgroundColor="lightgreen" horizontalAlignment="left" text="1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6" style="padding: 5"/>
<Button textWrap="false" backgroundColor="lightblue" horizontalAlignment="left" text="1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6" style="padding: 10; border-width: 10; border-color: blue;"/>
</StackLayout>
<StackLayout col="2" borderWidth="1" borderColor="black" verticalAlignment="top" width="150">
<Label text="textWrap: true" horizontalAlignment="center" />
<Button textWrap="true" backgroundColor="lightgreen" horizontalAlignment="left" text="1 2 3"/>
<Button textWrap="true" backgroundColor="lightblue" horizontalAlignment="left" text="1 2 3" style="padding: 5"/>
<Button textWrap="true" backgroundColor="lightgreen" horizontalAlignment="left" text="1 2 3" style="padding: 10; border-width: 10; border-color: blue;"/>
<Button textWrap="true" backgroundColor="lightblue" horizontalAlignment="left" text="1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6"/>
<Button textWrap="true" backgroundColor="lightgreen" horizontalAlignment="left" text="1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6" style="padding: 5"/>
<Button textWrap="true" backgroundColor="lightblue" horizontalAlignment="left" text="1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6" style="padding: 10; border-width: 10; border-color: blue;"/>
</StackLayout>
</GridLayout>
</Page>

4
apps/ui/src/button/issue-4385-page.css Normal file
View File

@ -0,0 +1,4 @@
.btnIcon {
font-family: "FontAwesome";
font-size: 60;
}

21
apps/ui/src/button/issue-4385-page.ts Normal file
View File

@ -0,0 +1,21 @@
import { EventData, Page, Observable, Frame } from '@nativescript/core';
export function navigatingTo(args: EventData) {
const page = <Page>args.object;
page.bindingContext = new TestPage();
}
export function onNavBtnTap(args) {
Frame.topmost().goBack();
}
export class TestPage extends Observable {
constructor() {
super();
}
// new line of span can be set with \n from code behind
get test(): string {
return '\ntest';
}
}

35
apps/ui/src/button/issue-4385-page.xml Normal file
View File

@ -0,0 +1,35 @@
<Page
xmlns="http://schemas.nativescript.org/tns.xsd" loaded="navigatingTo">
<Page.actionBar>
<ActionBar title="4385">
<NavigationButton text="Go Back" android.systemIcon="ic_menu_back" tap="onNavBtnTap"/>
</ActionBar>
</Page.actionBar>
<StackLayout>
<!--In xml the new line can be set with &#xA;-->
<Button style="text-align:center; background-color:yellow" textWrap="true" class="btnIcon" >
<Button.formattedText>
<formattedString>
<formattedString.spans>
<Span text="&#xf1ec; text-align: center" fontSize="14">
</Span>
<Span text="&#xA;new line">
</Span>
</formattedString.spans>
</formattedString>
</Button.formattedText>
</Button>
<Button style="text-align:center; background-color:green" textWrap="true" class="btnIcon" >
<button.formattedText>
<formattedString>
<formattedString.spans>
<Span text="code behind" fontSize="14">
</Span>
<Span text="{{ test }}">
</Span>
</formattedString.spans>
</formattedString>
</button.formattedText>
</Button>
</StackLayout>
</Page>

22
apps/ui/src/button/main-page.ts Normal file
View File

@ -0,0 +1,22 @@
import { SubMainPageViewModel } from '../sub-main-page-view-model';
import { EventData, Page, WrapLayout } from '@nativescript/core';
export function pageLoaded(args: EventData) {
const page = <Page>args.object;
const wrapLayout = <WrapLayout>page.getViewById('wrapLayoutWithExamples');
page.bindingContext = new SubMainPageViewModel(wrapLayout, loadExamples());
}
export function loadExamples() {
const examples = new Map<string, string>();
examples.set('btn-wrap-text-alignment-4266', 'button/btn-wrap-text-alignment-4266-page');
examples.set('button-border', 'button/button-border-page');
examples.set('background', 'button/background-page');
examples.set('border-playground', 'button/border-playground-page');
examples.set('issue-4287', 'button/issue-4287-page');
examples.set('issue-4385', 'button/issue-4385-page');
examples.set('highlight-4740', 'button/highlight-4740/highlight-4740-page');
examples.set('tappable-span', 'button/tappable-span-page');
return examples;
}

6
apps/ui/src/button/main-page.xml Normal file
View File

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

25
apps/ui/src/button/tappable-span-page.ts Normal file
View File

@ -0,0 +1,25 @@
import { EventData, Page, TextBase, Label } from '@nativescript/core';
export function foxTap(args: EventData) {
let page = <Page>(<any>args.object).page;
let foxTapped = page.getViewById<Label>('foxTapped');
foxTapped.visibility = 'visible';
setTimeout(() => {
foxTapped.visibility = 'hidden';
}, 1000);
console.log('foxTap');
}
export function dogTap(args: EventData) {
let page = <Page>(<any>args.object).page;
let dogTapped = page.getViewById<Label>('dogTapped');
dogTapped.visibility = 'visible';
setTimeout(() => {
dogTapped.visibility = 'hidden';
}, 1000);
console.log('dogTap');
}

19
apps/ui/src/button/tappable-span-page.xml Normal file
View File

@ -0,0 +1,19 @@
<Page>
<StackLayout style="font-size: 50">
<Label automationText="formattedText" id="formattedText" textWrap="true" style="text-transform: capitalize;">
<Label.formattedText>
<FormattedString>
<FormattedString.spans>
<Span text="The quick brown " style="font-weight: bold; color: green;" />
<Span text="fox" style="font-weight: italic; color: green;" linkTap="foxTap"/>
<Span text=" jumps over the lazy " style="font-weight: bold; color: red;" />
<Span text="dog" style="font-weight: bold; color: blue;" linkTap="dogTap"/>
<Span text="." style="font-weight: bold; color: green;" />
</FormattedString.spans>
</FormattedString>
</Label.formattedText>
</Label>
<Label id="foxTapped" text="Fox tapped" visibility="hidden" color="green"/>
<Label id="dogTapped" text="Dog tapped" visibility="hidden" color="blue"/>
</StackLayout>
</Page>