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

fix: safeguards against invalid values

Browse Source
This commit is contained in:
Igor Randjelovic
2021-02-26 18:49:50 +01:00
committed by Nathan Walker
parent 1dfa5a6025
commit f5db58414a
6 changed files with 154 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
apps/toolbox/src/box-shadow.ts
View File

@@ -11,13 +11,17 @@ export class BoxShadowModel extends Observable {
private _selectedBackgroundType: string;
private _selectedBorderType: string;
private _selectedAnimation: string;
private _boxShadow: string;
private _boxShadow: string = '5 5 1 1 rgba(255, 0, 0, .9)';
background: string;
borderWidth: number;
borderRadius: number;
appliedBoxShadow: string;
get boxShadow(): string {
return this._boxShadow;
}
constructor() {
super();
}

63
apps/toolbox/src/box-shadow.xml
View File

@@ -9,14 +9,14 @@
<!-- layouts -->
<ScrollView height="100%" visibility="{{ selectedComponentType === 'layouts' ? 'visible' : 'collapsed' }}">
<StackLayout>
<StackLayout
<StackLayout
width="300"
height="100"
class="demo-component"
boxShadow="{{ appliedBoxShadow }}"
borderWidth="{{ borderWidth }}"
borderRadius="{{ borderRadius }}"
backgroundColor="{{ background }}"
background="{{ background }}"
tap="{{ toggleAnimation }}"
>
<Label text="StackLayout"></Label>
@@ -29,7 +29,7 @@
boxShadow="{{ appliedBoxShadow }}"
borderWidth="{{ borderWidth }}"
borderRadius="{{ borderRadius }}"
backgroundColor="{{ background }}"
background="{{ background }}"
tap="{{ toggleAnimation }}"
>
<Label text="GridLayout"></Label>
@@ -42,7 +42,7 @@
boxShadow="{{ appliedBoxShadow }}"
borderWidth="{{ borderWidth }}"
borderRadius="{{ borderRadius }}"
backgroundColor="{{ background }}"
background="{{ background }}"
tap="{{ toggleAnimation }}"
>
<Label text="AbsoluteLayout"></Label>
@@ -55,7 +55,7 @@
boxShadow="{{ appliedBoxShadow }}"
borderWidth="{{ borderWidth }}"
borderRadius="{{ borderRadius }}"
backgroundColor="{{ background }}"
background="{{ background }}"
tap="{{ toggleAnimation }}"
>
<Label text="DockLayout"></Label>
@@ -68,17 +68,33 @@
boxShadow="{{ appliedBoxShadow }}"
borderWidth="{{ borderWidth }}"
borderRadius="{{ borderRadius }}"
backgroundColor="{{ background }}"
background="{{ background }}"
tap="{{ toggleAnimation }}"
>
<Label text="FlexboxLayout"></Label>
</FlexboxLayout>
<GridLayout
width="300"
height="100"
padding="4"
boxShadow="{{ appliedBoxShadow }}"
tap="{{ toggleAnimation }}"
>
<StackLayout
borderWidth="4"
borderRadius="20"
backgroundColor="white"
>
<Label text="BorderRadius + BoxShadow on parent container"></Label>
</StackLayout>
</GridLayout>
</StackLayout>
</ScrollView>
<!-- labels -->
<GridLayout
<GridLayout
rows="*"
height="100%"
visibility="{{ selectedComponentType === 'labels' ? 'visible' : 'collapsed' }}">
@@ -90,32 +106,53 @@
boxShadow="{{ appliedBoxShadow }}"
borderWidth="{{ borderWidth }}"
borderRadius="{{ borderRadius }}"
backgroundColor="{{ background }}"
background="{{ background }}"
tap="{{ toggleAnimation }}"
text="Label"></Label>
</GridLayout>
<!-- buttons -->
<GridLayout
<GridLayout
rows="*"
height="100%"
visibility="{{ selectedComponentType === 'buttons' ? 'visible' : 'collapsed' }}">
<Button
<Button
horizontalAlignment="center"
verticalAlignment="center"
class="demo-component"
boxShadow="{{ appliedBoxShadow }}"
borderWidth="{{ borderWidth }}"
borderRadius="{{ borderRadius }}"
backgroundColor="{{ background }}"
background="{{ background }}"
tap="{{ toggleAnimation }}"
text="button"
></Button>
</GridLayout>
<!-- images -->
<GridLayout
rows="*"
height="100%"
visibility="{{ selectedComponentType === 'images' ? 'visible' : 'collapsed' }}">
<ContentView width="100"
height="100"
horizontalAlignment="center"
verticalAlignment="center"
class="demo-component"
boxShadow="{{ appliedBoxShadow }}"
borderWidth="{{ borderWidth }}"
borderRadius="{{ borderRadius }}"
tap="{{ toggleAnimation }}">
<Image src="https://raw.githubusercontent.com/NativeScript/artwork/main/logo/export/NativeScript_Logo_Blue_Transparent.png"></Image>
</ContentView>
</GridLayout>
</StackLayout>
<GridLayout
@@ -130,6 +167,7 @@
<TextField
col="1"
placeholder="box-shadow"
text="{{ boxShadow }}"
textChange="{{ textChange }}"
>
</TextField>
@@ -146,6 +184,7 @@
<Button text="Layouts" componentType="layouts" tap="{{ selectComponentType }}"></Button>
<Button text="Labels" componentType="labels" selectedAttr="{{ selectedComponentType }}" tap="{{ selectComponentType }}"></Button>
<Button text="Buttons" componentType="buttons" selectedAttr="{{ selectedComponentType == 'buttons' }}" tap="{{ selectComponentType }}"></Button>
<Button text="Images" componentType="images" selectedAttr="{{ selectedComponentType == 'images' }}" tap="{{ selectComponentType }}"></Button>
</FlexboxLayout>
<Label text="Background"></Label>
@@ -172,7 +211,7 @@
<Button text="Scale" animationType="scale" tap="{{ selectAnimationType }}"></Button>
<Button text="Rotate" animationType="rotate" tap="{{ selectAnimationType }}"></Button>
</FlexboxLayout>
</StackLayout>
</ScrollView>
</GridLayout>