mirror of
https://github.com/NativeScript/NativeScript.git
synced 2025-08-23 09:01:10 +08:00
25 lines
2.6 KiB
XML
25 lines
2.6 KiB
XML
<Page>
|
|
<GridLayout columns="*,*" rows="*,*,*,*" automationText="clipPath">
|
|
<StackLayout col="0" colSpan="2" row="0" width="100" height="100" style.backgroundColor="magenta">
|
|
<Button text="no clip-path" width="100" height="100" style="background-image: url('~/ui-tests-app/css/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;"/>
|
|
</StackLayout>
|
|
<StackLayout col="0" row="1" width="100" height="100" style.backgroundColor="magenta">
|
|
<Button text="rect" width="100" height="100" style="clip-path: rect(10% 90 90% 10); background-image: url('~/ui-tests-app/css/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;"/>
|
|
</StackLayout>
|
|
<StackLayout col="1" row="1" width="100" height="100" style.backgroundColor="magenta">
|
|
<Button text="inset" width="100" height="100" style="clip-path: inset(15%); background-image: url('~/ui-tests-app/css/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;"/>
|
|
</StackLayout>
|
|
<StackLayout col="0" row="2" width="100" height="100" style.backgroundColor="magenta">
|
|
<Button text="circle" width="100" height="100" style="clip-path: circle(80% at 55% 40%); background-image: url('~/ui-tests-app/css/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;"/>
|
|
</StackLayout>
|
|
<StackLayout col="1" row="2" width="100" height="100" style.backgroundColor="magenta">
|
|
<Button text="ellipse" width="100" height="100" style=" clip-path: ellipse(45% 25% at 45% 55%); background-image: url('~/ui-tests-app/css/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;"/>
|
|
</StackLayout>
|
|
<StackLayout col="0" row="3" width="100" height="100" style.backgroundColor="magenta">
|
|
<Button text="polygon" width="100" height="100" style=" clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);background-image: url('~/ui-tests-app/css/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;"/>
|
|
</StackLayout>
|
|
<StackLayout col="1" row="3" width="100" height="100" style.backgroundColor="magenta">
|
|
<Button text="image polygon" width="100" height="100" style=" clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);background-image: url('~/ui-tests-app/css/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;"/>
|
|
</StackLayout>
|
|
</GridLayout>
|
|
</Page> |