css 如何在nativescript中为stacklayout给予边框和边框半径

j91ykkif  于 2022-12-15  发布在  其他
关注(0)|答案(3)|浏览(187)

我是nativescript的新手,我不知道如何给stacklayout给予边框和边框半径。
下面我已经张贴了我到目前为止尝试:

组件.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>

组件。css:

StackLayout {
  margin: 10;
  background-color: green;

}

.stackBorder {
 border: 2px solid red;
   border-radius: 8px;
}

组件.ts:

@Component({
    selector: "sdk-child-component",
    moduleId: module.id,
    templateUrl: "./component.html",
    styleUrls: ["./component.css"]
})

最后我在stacklayout中看不到边框。

gojuced7

gojuced71#

通过html:

<StackLayout borderRadius="30" borderColor="red" borderWidth="3"></StackLayout>

通过CSS:

StackLayout {
  border-color: red;
  border-width: 3;
  border-radius: 30;
}

更多详情:https://docs.nativescript.org/ui-and-styling.html#supported-css-properties

zlwx9yxi

zlwx9yxi2#

nativescript支持的css属性有border-width,border-color和border-radius。单独标记border是不可能的,也不能进行任何实体选择。
更多信息:
https://docs.nativescript.org/ui/styling

相关问题