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: expose missing css background* properties on View (#7032)

Browse Source
This commit is contained in:
Manol Donev
2019-03-15 17:42:03 +02:00
committed by GitHub
parent 91d90ccd0f
commit 88f224272b
4 changed files with 57 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
apps/app/ui-tests-app/css/background-image.css Normal file
View File

@@ -0,0 +1,5 @@
.testBtn {
background-image: url("res://icon");
background-repeat: no-repeat;
color: black;
}

29
apps/app/ui-tests-app/css/background-image.xml Normal file
View File

@@ -0,0 +1,29 @@
<Page>
<GridLayout rows="*,*,*,*,*,*" >
<Button backgroundImage="url('~/ui-tests-app/resources/images/no-image.png')"
borderRadius='125' borderWidth='2' borderColor='black'
backgroundRepeat="repeat" backgroundSize="contain"
/>
<Button row="1" backgroundImage="url('~/ui-tests-app/resources/images/no-image.png')"
borderRadius='5' borderWidth='2' borderColor='black'
backgroundRepeat="repeat-y"
/>
<Button row="2" backgroundImage="url('~/ui-tests-app/resources/images/no-image.png')"
borderRadius='25' borderWidth='2' borderColor='black'
backgroundRepeat="repeat-x"
/>
<Button row="3" backgroundImage="url('res://icon')"
borderRadius='10' borderWidth='2' borderColor='black'
backgroundRepeat="no-repeat"
backgroundSize="contain"
height="80" width="180"
/>
<Button row="4" text="css background no-repeat" class="testBtn"/>
<Button row="5" backgroundImage="url('res://icon')"
borderRadius='10' borderWidth='2' borderColor='black'
style="background-repeat: no-repeat"
backgroundSize="contain"
height="80" width="180"
/>
</GridLayout>
</Page>

1
apps/app/ui-tests-app/css/main-page.ts
View File

@@ -43,5 +43,6 @@ export function loadExamples() {
examples.set("missing-background-image", "css/missing-background-image");
examples.set("background-shorthand", "css/background-shorthand");
examples.set("background-image-linear-gradient", "css/background-image-linear-gradient");
examples.set("background-image", "css/background-image");
return examples;
}

22
tns-core-modules/ui/core/view/view-common.ts
View File

@@ -24,6 +24,7 @@ import {
import { createViewFromEntry } from "../../builder";
import { StyleScope } from "../../styling/style-scope";
import { LinearGradient } from "../../styling/linear-gradient";
import { BackgroundRepeat } from "../../styling/style-properties";
export * from "../../styling/style-properties";
export * from "../view-base";
@@ -472,6 +473,27 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
this.style.backgroundImage = value;
}
get backgroundSize(): string {
return this.style.backgroundSize;
}
set backgroundSize(value: string) {
this.style.backgroundSize = value;
}
get backgroundPosition(): string {
return this.style.backgroundPosition;
}
set backgroundPosition(value: string) {
this.style.backgroundPosition = value;
}
get backgroundRepeat(): BackgroundRepeat {
return this.style.backgroundRepeat;
}
set backgroundRepeat(value: BackgroundRepeat) {
this.style.backgroundRepeat = value;
}
get minWidth(): Length {
return this.style.minWidth;
}