luojianingfix: add beta notes in markdown

Button

Note:

Currently in the beta phase.

A Button is a button component typically used to respond to user click actions. It comes in various types including capsule buttons, circular buttons, and standard buttons. When used as a container, a Button can incorporate child components to create buttons containing elements such as text and images. For specific usage, please refer to Button.

Creating a Button

Buttons are created by calling interfaces, which can be done in two forms:

Creating a button without child components by specifying a label and ButtonOptions. Examples include the shape and stateEffect properties in ButtonOptions.
```
init(label: String, options: ButtonOptions)
```
Here, label sets the button text, type defines the Button type, and the stateEffect property determines whether the Button has click feedback.
```
Button('Ok', ButtonOptions(shape: ButtonType.Normal, stateEffect: true))
    .borderRadius(8)
    .backgroundColor(0x317aff)
    .width(90)
    .height(40)
```

Creating a button with child components using ButtonOptions. Examples include the shape and stateEffect properties in ButtonOptions.

init(options: ButtonOptions, content: () -> Unit)

Only one child component is supported, which can be either a basic component or a container component.

Button(ButtonOptions(shape: ButtonType.Normal, stateEffect: true)){
    Row() {
        Image(@r(app.media.loading)).width(20).height(40).margin(left: 12)
        Text('loading').fontSize(12).fontColor(0xffffff).margin(left: 5, right: 12)
    }.alignItems(VerticalAlign.Center)
}
.borderRadius(8)
.backgroundColor(0x317aff)
.width(90)
.height(40)

Button2

Setting Button Types

Buttons have four optional types: Capsule, Circle, Normal, and ROUNDED_RECTANGLE, configured via the shape property.

Capsule Button (default type).

The corners of this button type are automatically set to half the height, and cannot be reconfigured using the borderRadius property.
```
Button('Disable', ButtonOptions(shape: ButtonType.Capsule, stateEffect: false))
    .backgroundColor(0x317aff)
    .width(90)
    .height(40)
```

Circular Button.

This button type is perfectly round and does not support corner reconfiguration via the borderRadius property.

Button('Circle', ButtonOptions(shape: ButtonType.Circle, stateEffect: false))
    .backgroundColor(0x317aff)
    .width(90)
    .height(90)

Button4

Standard Button.

This button type has default square corners (radius 0) and supports corner customization via the borderRadius property.

Button('Ok', ButtonOptions(shape: ButtonType.Normal, stateEffect: true))
    .borderRadius(8)
    .backgroundColor(0x317aff)
    .width(90)
    .height(40)

Button5

Customizing Styles

Setting Border Radius.

Use universal attributes to customize button styles. For example, configure the border radius via the borderRadius property.
```
Button('circle border', ButtonOptions(shape: ButtonType.Normal))
    .borderRadius(20)
    .height(40)
```

Setting Text Styles.

Apply text styles to customize the button's text display.

Button('font style', ButtonOptions(shape: ButtonType.Normal))
    .fontSize(20)
    .fontColor(0xffffc0cb)

Button7

Setting Background Color.

Use the backgroundColor property to define the button's background color.
```
Button('background color').backgroundColor(0xF55A42)
```

Creating Functional Buttons.

Create a button for delete operations.

Button(ButtonOptions(shape: ButtonType.Circle, stateEffect: true)) {
    Image(@r(app.media.ic_public_delete_filled))
      .width(30)
      .height(30)
}
.width(55)
.height(55)
.margin(left:20)
.backgroundColor(0xF55A42)

Button9

Adding Events

Button components are typically used to trigger actions. You can bind the onClick event to define custom behaviors upon click.

  Button('Ok', ButtonOptions(shape: ButtonType.Normal, stateEffect: true))
      .onClick({ evt =>
      Hilog.info(0, '', 'Button onClick')
  })

Usage Examples

Form Submission.

On user login/registration pages, use buttons for login or registration actions.

package ohos_app_cangjie_entry
import kit.ArkUI.*
import ohos.arkui.state_macro_manage.*

@Entry
@Component
class EntryView {
    func build() {
        Column() {
            TextInput(placeholder: 'input your username')
              .margin(top: 20)
            TextInput(placeholder: 'input your password')
              .margin(top: 20)
            Button('Register')
              .width(300)
              .margin(top: 20)
              .onClick({ evt =>
                  // Action to perform
                  })
        }
        .padding(20)
    }
}

Button10

Floating Button.

In scrollable interfaces, maintain a floating button that stays visible during scrolling.

package ohos_app_cangjie_entry
import kit.ArkUI.*
import ohos.arkui.state_macro_manage.*
import kit.LocalizationKit.AppResource
import ohos.resource.__GenerateResource__

@Entry
@Component
class EntryView {
    private var arr: Array<Int64> = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
    func build() {
        Stack() {
            List(space: 20, initialIndex: 0) {
                ForEach(
                    this.arr,
                    itemGeneratorFunc: {
                        item: Int64, _: Int64 => ListItem() {
                            Text("${item}")
                                .width(100.percent)
                                .height(100)
                                .fontSize(16)
                                .textAlign(TextAlign.Center)
                                .borderRadius(10)
                                .backgroundColor(0xFFFFFF)
                        }
                    }
                )
            }.width(90.percent)

            Button() {
                Image(@r(app.media.startIcon))
                    .width(50)
                    .height(50)
            }
            .shape(ButtonType.Circle)
            .width(60)
            .height(60)
            .position(x: 80.percent, y: 600)
            .shadow(radius: 10.0)
            .onClick ({
                evt =>
                // Action to perform
            })
        }
        .width(100.percent)
        .height(100.percent)
        .backgroundColor(0xDCDCDC)
        .padding(top: 5)
    }
}

floating_button