Badge of openharmony container components

Badge: a new event marker component that provides event information display capabilities on the component
Badge(value: {count: number, position?: BadgePosition, maxCount?: number, style?:BadgeStyle})

count: Set the number of reminder messages
position: Set the display position of the cue point (BadgePosition)
BadgePosition: RightTop (the dot is displayed in the upper right corner), Right (the dot is displayed in the vertical center on the right), Left (the dot is displayed in the vertical center on the left)
maxCount: the maximum number of messages, only maxCount+
style: The Badge component can be styled, and supports setting text color, size, dot color and size (BadgeStyle)
BadgeStyle:
  color         Text color
      fontSize     Text size
badgeSize Badge size
BadgeColor badge color

The effect is as shown:

Code:

@[email protected] BadgeT {@State counts: number = [email protected] message: string = 'new'build() {Column() {Flex({ justifyContent: FlexAlign. SpaceAround }) {//Display the number of messages, click to increase the number of messagesBadge({count: this.counts,maxCount: 99,style: { color: 0xffffff, fontSize: 16, badgeSize: 20, badgeColor: Color.Red }}) {Button('message').onClick(() => {this.counts++}).width(100).height(50).backgroundColor(0x317aa)}.width(100).height(50)/ / Display the message in the upper right corner, display the message contentBadge({value: this.message,style: { color: 0xffffff, fontSize: 9, badgeSize: 20, badgeColor: Color.Blue } }) {Text('message').width(80).height(50).fontSize(16).lineHeight(37).borderRadius(10).textAlign(TextAlign.Center).backgroundColor(0xf3f4ED)}.width(80).height(50)//Display the message dot on the rightBadge({value: ' ',position: BadgePosition.Right, style: { badgeSize: 6, badgeColor: Color.Red } }) {Text("message").width(90).height(50).fontSize(16).lineHeight(37).borderRadius(10).textAlign(TextAlign.Center).backgroundColor(0xf3f4ED)}.width(90).height(50)}}.width('100%').height('100%').margin({ top: 10 })}}