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

feat: implement BoxShadowDrawable

Browse Source
This commit is contained in:
Igor Randjelovic
2021-03-15 18:08:12 +01:00
committed by Nathan Walker
parent a822f2affb
commit 9a7d3ecb34
7 changed files with 234 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -7,11 +7,13 @@ export function navigatingTo(args: EventData) {
}
export class BoxShadowModel extends Observable {
private _selectedComponentType: string;
private _selectedComponentType: string = 'buttons';
private _selectedBackgroundType: string;
private _selectedBorderType: string;
private _selectedAnimation: string;
private _boxShadow: string = '5 5 1 1 rgba(255, 0, 0, .9)';
private _boxShadow: string = '0 10 15 -3 rgba(200, 0, 0, 0.4)';
// private _boxShadow: string = '5 5 1 1 rgba(255, 0, 0, .9)';
// private _boxShadow: string = '5 5 5 10 rgba(255, 0, 0, .9)';
background: string;
borderWidth: number;

20
apps/toolbox/src/pages/box-shadow.xml
View File

@@ -5,10 +5,10 @@
</Page.actionBar>
<GridLayout rows="*, auto, *" class="box-shadow-demo">
<StackLayout backgroundColor="#ededed" row="0" padding="20" id="boxShadowDemo">
<StackLayout backgroundColor="#ededed" row="0" id="boxShadowDemo">
<!-- layouts -->
<ScrollView height="100%" visibility="{{ selectedComponentType === 'layouts' ? 'visible' : 'collapsed' }}">
<StackLayout>
<StackLayout padding="20">
<StackLayout
width="300"
height="100"
@@ -74,22 +74,6 @@
<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>