I'm new to nativescript.I don't know how to give border and border-radius to stacklayout.
Below I have posted what I tried so far:
component.html:
<StackLayout class ="stackBorder" orientation="horizontal">
<Label text="Label 1" width="50" height="50" > </Label>
<Label text="Label 2" width="50" height="50" > </Label>
<Label text="Label 3" width="50" height="50" backgroundColor="white"> </Label>
<Label text="Label 4" width="50" height="50" backgroundColor="white"> </Label>
</StackLayout>
component.css:
StackLayout {
margin: 10;
background-color: green;
}
.stackBorder {
border: 2px solid red;
border-radius: 8px;
}
component.ts:
@Component({
selector: "sdk-child-component",
moduleId: module.id,
templateUrl: "./component.html",
styleUrls: ["./component.css"]
})
Finally I'm unable to see the border in stacklayout.
Via html:
<StackLayout borderRadius="30" borderColor="red" borderWidth="3"></StackLayout>
Via css:
StackLayout {
border-color: red;
border-width: 3;
border-radius: 30;
}
In nativescript supported css properties are border-width, border-color and border-radius. Tag border alone is not possible nor any solid selection.
More info:
https://docs.nativescript.org/ui/styling
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With