How to set a single border of a component in ArkTS? (Developed by Huawei Hongmeng) How to set only one border

Let me tell you how to set a single border in ArkTS

The effect is as follows :

 The top component, only the bottom has a green border

Code example:

Row(){//顶部栏
  Text("理  论  街  道")
    .fontSize('32').layoutWeight(8)

  Image('/pictures/search.jpg')//右上角插入的图标,与案例无关,可以无视
    .layoutWeight(2)
}
.width('100%').height('10%')
.border({
  width: {bottom: '30lpx' },//可以看到我们只填写了botton一个属性
  color: {bottom: Color.Green },
})

Summarize:

It can be seen that we only need to write specific positions for attributes such as width in the border.

If we need other borders, we can continue to add left, right, top, if not written, all four borders exist by default

.border({ 
    width: { left: '5lpx', right: '10lpx', top: '20lpx', bottom: '30lpx' }, 
    color: { left: '#e3bbbb', right: Color.Blue, top: Color.Red, bottom: Color.Green },
})

Official documents for reference:

Huawei Hongmeng Development - Border Settings: Documentation Center

Excellent blog for reference: OpenHarmony Application Development - Border/Image Border/Background/Transparency Setting and Visibility Control-Open Source Basic Software Community-51CTO.COM