Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
OpenHarmony
Docs
提交
cbd807ae
D
Docs
项目概览
OpenHarmony
/
Docs
1 年多 前同步成功
通知
159
Star
292
Fork
28
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
D
Docs
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
未验证
提交
cbd807ae
编写于
7月 28, 2022
作者:
O
openharmony_ci
提交者:
Gitee
7月 28, 2022
浏览文件
操作
浏览文件
下载
差异文件
!7354 断链修改
Merge pull request !7354 from LiAn/cherry-pick-1659005867
上级
607487a8
10f7b647
变更
2
展开全部
隐藏空白更改
内联
并排
Showing
2 changed file
with
441 addition
and
440 deletion
+441
-440
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-button.md
...tion-dev/reference/arkui-ts/ts-basic-components-button.md
+25
-24
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-web.md
...ication-dev/reference/arkui-ts/ts-basic-components-web.md
+416
-416
未找到文件。
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-button.md
浏览文件 @
cbd807ae
...
...
@@ -3,7 +3,7 @@
按钮组件,可快速创建不同样式的按钮。
> **说明:**
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
>
该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 权限列表
...
...
@@ -21,44 +21,44 @@
-
Button(options?: {type?: ButtonType, stateEffect?: boolean})
**表1**
options参数说明
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| type | ButtonType | 否 | Capsule | 描述按钮风格。 |
| stateEffect | boolean | 否 | true | 按钮按下时是否开启切换效果,当状态置为false时,点击效果关闭。 |
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----------- | ---------- | ---- | ------- | --------------------------------- |
| type | ButtonType | 否 | Capsule | 描述按钮风格。 |
| stateEffect | boolean | 否 | true | 按钮按下时是否开启切换效果,当状态置为false时,点击效果关闭。 |
-
Button(label?:
[
ResourceStr
](
../../ui/ts-types.md
)
, options?: { type?: ButtonType, stateEffect?: boolean })
-
Button(label?: ResourceStr, options?: { type?: ButtonType, stateEffect?: boolean })
使用文本内容创建相应的按钮组件,此时Button无法包含子组件。
**表2**
value参数说明
| 参数名
| 参数类型 | 必填 | 默认值 | 参数描述
|
| -------
- | -------- | -------- | -------- |
-------- |
| label
|
[
ResourceStr
](
../../ui/ts-types.md
)
| 否 | - | 按钮文本内容。
|
| options | Object
| 否 | -
| 见options参数说明。 |
| 参数名
| 参数类型 | 必填 | 默认值 | 参数描述
|
| -------
| ----------------------------------- | ---- | ---- | -----
-------- |
| label
|
[
ResourceStr
](
../../ui/ts-types.md
)
| 否 | - | 按钮文本内容。
|
| options | Object
| 否 | -
| 见options参数说明。 |
## 属性
| 名称
| 参数类型 | 默认值 | 描述
|
| --------
| -------- | -------- |
-------- |
| type
| ButtonType | Capsule | 设置Button样式。
|
| stateEffect | boolean
| true
| 状态切换时是否开启切换效果,当状态置为false时,点击效果关闭。 |
| 名称
| 参数类型 | 默认值 | 描述
|
| --------
--- | ---------- | ------- | -------------------------
-------- |
| type
| ButtonType | Capsule | 设置Button样式。
|
| stateEffect | boolean
| true
| 状态切换时是否开启切换效果,当状态置为false时,点击效果关闭。 |
-
ButtonType枚举说明
| 名称
| 描述
|
| -------
- |
-------- |
| 名称
| 描述
|
| -------
| ----------
-------- |
| Capsule | 胶囊型按钮(圆角默认为高度的一半)。 |
| Circle
| 圆形按钮。
|
| Normal
| 普通按钮(默认不带圆角)。
|
| Circle
| 圆形按钮。
|
| Normal
| 普通按钮(默认不带圆角)。
|
> **说明:**
> - 按钮圆角通过[通用属性borderRadius设置](ts-universal-attributes-border.md)(不支持通过border接口设置圆角)。
> - 当按钮类型为Capsule时,borderRadius设置不生效,按钮圆角始终为高度的一半。
> - 当按钮类型为Circle时,borderRadius即为按钮半径,若未设置borderRadius按钮半径则为宽、高中较小值的一半。
> - 按钮文本通过[通用文本样式](ts-universal-attributes-text-style.md)进行设置。
>
- 按钮圆角通过[通用属性borderRadius设置](ts-universal-attributes-border.md)(不支持通过border接口设置圆角)。
>
- 当按钮类型为Capsule时,borderRadius设置不生效,按钮圆角始终为高度的一半。
>
- 当按钮类型为Circle时,borderRadius即为按钮半径,若未设置borderRadius按钮半径则为宽、高中较小值的一半。
>
- 按钮文本通过[通用文本样式](ts-universal-attributes-text-style.md)进行设置。
## 示例
...
...
@@ -75,6 +75,7 @@ struct ButtonExample {
Button
(
'
Ok
'
,
{
type
:
ButtonType
.
Normal
,
stateEffect
:
true
}).
borderRadius
(
8
).
backgroundColor
(
0x317aff
).
width
(
90
)
Button
({
type
:
ButtonType
.
Normal
,
stateEffect
:
true
})
{
Row
()
{
// 图片建议通过$r创建Resource对象引入
Image
(
$r
(
'
app.media.loading
'
)).
width
(
20
).
height
(
20
).
margin
({
left
:
12
})
Text
(
'
loading
'
).
fontSize
(
12
).
fontColor
(
0xffffff
).
margin
({
left
:
5
,
right
:
12
})
}.
alignItems
(
VerticalAlign
.
Center
)
...
...
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-web.md
浏览文件 @
cbd807ae
此差异已折叠。
点击以展开。
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录