Skip to content

D
Docs

OpenHarmony / Docs
大约 1 年 前同步成功

通知 159
Star 292
Fork 28
D
Docs

体验新版 GitCode，发现更多精彩内容 >>

提交 ec8dff57 编写于 作者: L libing23
浏览文件
操作

添加安全控件-位置控件的资料 

Signed-off-by: Nlibing23 <libing23@huawei.com>
上级 f96e9ea0
隐藏空白更改
内联 并排
Showing with 448 addition and 6 deletion
zh-cn/application-dev/reference/arkui-ts/Readme-CN.md
浏览文件 @ ec8dff57
......@@ -50,6 +50,7 @@
- [全屏模态转场](ts-universal-attributes-modal-transition.md)
- [半模态转场](ts-universal-attributes-sheet-transition.md)
- [文本通用属性](ts-universal-attributes-text-style.md)
- [安全控件通用属性](ts-universal-attributes-securitycomponent.md)
- 手势处理
- [绑定手势方法](ts-gesture-settings.md)
- 基础手势
......@@ -92,6 +93,9 @@
- [RichText](ts-basic-components-richtext.md)
- [ScrollBar](ts-basic-components-scrollbar.md)
- [Search](ts-basic-components-search.md)
- [SecLocationButton](ts-basic-components-seclocationbutton.md)
- [SecPasteButton](ts-basic-components-secpastebutton.md)
- [SecSaveButton](ts-basic-components-secsavebutton.md)
- [Select](ts-basic-components-select.md)
- [Slider](ts-basic-components-slider.md)
- [Span](ts-basic-components-span.md)
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-seclocationbutton.md 0 → 100644
浏览文件 @ ec8dff57
# SecLocationButton
安全控件的位置按钮，用户通过点击该位置按钮，可以临时获取精准定位权限，而不需要权限弹框授权确认。
> **说明：**
>
> 该组件从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 子组件
不支持。
## 接口
**方法1：** SecLocationButton()
默认创建带有图标、文本、背景的位置按钮。
**方法2：** SecLocationButton(option:{icon?: LocationIconStyle, text?: LocationDescription, background?: BackgroundButtonType})
创建包含指定元素的位置按钮。
**参数：**
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ------ | ----------------------------------- | ---- | -------------- |
| icon | [LocationIconStyle](#locationiconstyle枚举说明) |否 | 设置位置按钮的图标风格<br/>不传入该参数表示没有图标，icon和text至少存在一个。 |
| text | [LocationDescription](#locationdescription枚举说明) | 否 | 设置位置按钮的文本描述<br/>不传入该参数表示没有文字描述，icon和text至少存在一个。 |
| background | [BackgroundButtonType](#backgroundbuttontype枚举说明) | 否 | 设置位置按钮的背景样式<br/>不传入该参数表示没有背景。 |
## LocationIconStyle枚举说明
| 名称 | 描述 |
| ------------------- | ------------------ |
| FULL_FILLED | 位置按钮展示填充样式图标。 |
| LINES | 位置按钮展示线条样式图标。 |
## LocationDescription枚举说明
| 名称 | 描述 |
| ------------------- | ------------------ |
| CURRENT_LOCATION | 位置按钮的文字描述为“当前位置”。 |
| ADD_LOCATION | 位置按钮的文字描述为“添加位置”。 |
| SELECT_LOCATION | 位置按钮的文字描述为“选择位置”。 |
| SHARE_LOCATION | 位置按钮的文字描述为“共享位置”。 |
| SEND_LOCATION | 位置按钮的文字描述为“发送位置”。 |
| LOCATING | 位置按钮的文字描述为“定位”。 |
| LOCATION | 位置按钮的文字描述为“位置”。 |
| SEND_CURRENT_LOCATION | 位置按钮的文字描述为“发送实时位置”。 |
| RELOCATION | 位置按钮的文字描述为“重定位”。 |
| PUNCH_IN | 位置按钮的文字描述为“打卡定位”。 |
| CURRENT_POSITION | 位置按钮的文字描述为“所在位置”。 |
## BackgroundButtonType枚举说明
| 名称 | 描述 |
| ------------------- | ------------------ |
| CAPSULE_BACKGROUND | 位置按钮的背景样式为胶囊状。 |
| CIRCLE_BACKGROUND | 位置按钮的背景样式为圆状。 |
| NORMAL_BACKGROUND | 位置按钮的背景样式为矩形。 |
## SecLocationButtonLayoutOrder枚举说明
| 名称 | 描述 |
| ------------------- | ------------------ |
| ICON_FIRST | 图标的排列顺序先于文字。 |
| TEXT_FIRST | 文字的排列顺序先于图标。 |
## SecLocationButtonLayoutDirection枚举说明
| 名称 | 描述 |
| ------------------- | ------------------ |
| HORIZONTAL | 位置按钮上图标和文字分布的方向为水平排列。 |
| VERTICAL | 位置按钮上图标和文字分布的方向为垂直排列。 |
## SecLocationButtonOnClickResult枚举说明
| 名称 | 描述 |
| ------------------- | ------------------ |
| LOCATION_BUTTON_CLICK_SUCCESS | 位置按钮点击成功。 |
| LOCATION_BUTTON_CLICK_GRANT_FAILED | 位置按钮点击后位置权限授权失败。 |
## 属性
不支持通用属性，仅支持以下属性：
| 名称 | 参数类型 | 必填 | 描述 |
| ----------- | ------ | ---- | ---------------------------------------- |
| iconSize | [Length](ts-types.md#length) | 否 | 设置位置按钮上图标的尺寸。<br/> 默认值：16vp |
| layoutDirection | [SecLocationButtonLayoutDirection](#seclocationbuttonlayoutdirection枚举说明) | 否 | 设置位置按钮上图标和文字分布的方向。 <br/> 默认值：SecLocationButtonLayoutDirection.HORIZONTAL|
| layoutOrder | [SecLocationButtonLayoutOrder](#seclocationbuttonlayoutorder枚举说明) | 否 | 设置位置按钮上图标和文字分布的顺序。 <br/> 默认值：SecLocationButtonLayoutOrder.ICON_FIRST|
| position | [Position](ts-types.md#position8) | 否 | 设置绝对定位，设置位置按钮的左上角相对于父容器左上角的偏移位置。<br/> 默认值：<br/>{ <br/>x: 0,<br/>y: 0<br/>}|
| markAnchor | [Position](ts-types.md#position8) | 否 | 设置绝对定位的锚点，以位置按钮的左上角作为基准点进行偏移。 <br/> 默认值：<br/>{ <br/>x: 0,<br/>y: 0<br/>}||
| offset | [Position](ts-types.md#position8) | 否 | 设置相对定位，位置按钮相对于自身的偏移量。 <br/> 默认值：<br/>{ <br/>x: 0,<br/>y: 0<br/>}||
| fontSize | [Length](ts-types.md#length) | 否 | 设置位置按钮上文字的尺寸。<br/> 默认值：16fp |
| fontStyle | [FontStyle](ts-appendix-enums.md#fontstyle) | 否 | 设置位置按钮上文字的样式。<br/> 默认值：FontStyle.Normal |
| fontWeight | number \| [FontWeight](ts-appendix-enums.md#fontweight) \| string | 否 | 设置位置按钮上文字粗细。 <br/> 默认值：FontWeight.Medium |
| fontFamily | string \| [Resource](ts-types.md#resource类型) | 否 | 设置位置按钮上文字的字体。 <br/> 默认字体：'HarmonyOS Sans' |
| fontColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 设置位置按钮上文字的颜色。<br/> 默认值：#ffffffff |
| iconColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 设置位置按钮上图标的颜色。<br/> 默认值：#ffffffff |
| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 设置位置按钮的背景颜色。 <br/> 默认值：#007dff |
| borderStyle | [BorderStyle](ts-appendix-enums.md#borderstyle) | 否 | 设置位置按钮的边框的样式。 <br/> 默认不设置边框样式 |
| borderWidth | [Length](ts-types.md#length) | 否 | 设置位置按钮的边框的宽度。 <br/> 默认不设置边框宽度 |
| borderColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 设置位置按钮的边框的颜色。 <br/> 默认不设置边框颜色 |
| borderRadius | [Length](ts-types.md#length) | 否 | 设置位置按钮的边框圆角半径。<br/> 默认值：1/2 按钮整高 |
| backgroundPadding | [Padding](ts-types.md#padding) \| [Length](ts-types.md#length) | 否 | 设置位置按钮的内边距。 <br/> 默认值：上下8vp, 左右24vp |
| textIconPadding | [Length](ts-types.md#length) | 否 | 设置位置按钮中图标和文字的间距。 <br/> 默认值：4vp |
## 事件
不支持通用事件，仅支持以下事件：
| 名称 | 功能描述 |
| ------------------------------------------------------------ | ------------------------------------------------------------ |
| onClick((result: [SecLocationButtonOnClickResult](#seclocationbuttononclickresult枚举说明), event?: [ClickEvent](ts-universal-events-click.md#clickevent对象说明)) => void) | 点击动作触发该回调。<br/>result：位置权限的授权结果。<br/>event：见ClickEvent对象说明。 |
## 示例
```ts
// xxx.ets
@Entry
@Component
struct Index {
build() {
Row() {
Column({space:10}) {
// 默认位置按钮
SecLocationButton()
// 生成默认位置按钮，包含图标+文字+背景
SecLocationButton()
.fontSize(35)
.fontColor(Color.White)
.iconSize(30)
.layoutDirection(SecLocationButtonLayoutDirection.HORIZONTAL)
.layoutOrder(SecLocationButtonLayoutOrder.TEXT_FIRST)
.borderWidth(1)
.borderStyle(BorderStyle.Dashed)
.borderColor(Color.Blue)
.borderRadius(20)
.fontWeight(100)
.iconColor(Color.White)
.backgroundPadding({ left: 50, top: 50, bottom: 50, right: 50 })
.textIconPadding(20)
.backgroundColor(0x3282f6)
.onClick((result: SecLocationButtonOnClickResult) => {
console.error("result " + result)
})
// 生成定制图标、文字、背景的位置按钮
SecLocationButton({icon:LocationIconStyle.LINES, text:LocationDescription.CURRENT_POSITION, background:BackgroundButtonType.NORMAL_BACKGROUND})
.fontSize(35)
.fontColor(0x3282f6)
.iconSize(30)
.layoutDirection(SecLocationButtonLayoutDirection.VERTICAL)
.layoutOrder(SecLocationButtonLayoutOrder.ICON_FIRST)
.borderWidth(1)
.borderStyle(BorderStyle.Dashed)
.borderColor(0x9ffcfd)
.borderRadius(20)
.fontWeight(100)
.iconColor(0x3282f6)
.backgroundPadding({left:50, top:50, bottom:50, right:50})
.textIconPadding(20)
.backgroundColor(0x9ffcfd)
.onClick((result: SecLocationButtonOnClickResult)=>{
console.error("result " + result)
})
}.width('100%')
}.height('100%')
}
}
```
![seclocatonbutton1](figures/seclocationbutton1.png)
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-secpastebutton.md 0 → 100644
浏览文件 @ ec8dff57
# SecPasteButton
安全控件的粘贴按钮，用户通过点击该粘贴按钮，可以临时获取读取剪贴板权限，而不会触发toast提示。
> **说明：**
>
> 该组件从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 子组件
不支持。
## 接口
**方法1：** SecPasteButton()
默认创建带有图标、文本、背景的粘贴按钮。
**方法2：** SecPasteButton(option:{icon?: PasteIconStyle, text?: PasteDescription, buttonType?: ButtonType})
创建包含指定元素的粘贴按钮。
**参数：**
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ------ | ----------------------------------- | ---- | -------------- |
| icon | [PasteIconStyle](#pasteiconstyle枚举说明) |否 | 设置粘贴按钮的图标风格。<br/>不传入该参数表示没有图标，icon和text至少存在一个。 |
| text | [PasteDescription](#pastedescription枚举说明) | 否 | 设置粘贴按钮的文本描述。<br/>不传入该参数表示没有文字描述，icon和text至少存在一个。 |
| buttonType | [ButtonType](ts-basic-components-button.md#ButtonType枚举说明) | 否 | 设置粘贴按钮的背景样式。<br/>不传入该参数表示没有背景。 |
## 属性
不支持通用属性，仅继承[安全控件通用属性](ts-universal-attributes-securitycomponent.md#属性)。
## PasteIconStyle枚举说明
| 名称 | 描述 |
| ------------------- | ------------------ |
| LINES | 粘贴按钮展示线条样式图标。 |
## PasteDescription枚举说明
| 名称 | 描述 |
| ------------------- | ------------------ |
| PASTE | 粘贴按钮的文字描述为“粘贴”。 |
## SecPasteButtonOnClickResult枚举说明
| 名称 | 描述 |
| ------------------- | ------------------ |
| SUCCESS | 粘贴按钮点击成功。 |
| TEMPORARY_AUTHORIZATION_FAILED | 粘贴按钮点击后权限授权失败。 |
## 事件
不支持通用事件，仅支持以下事件：
| 名称 | 功能描述 |
| ------------------------------------------------------------ | ------------------------------------------------------------ |
| onClick((result: [SecPasteButtonOnClickResult](#secpastebuttononclickresult枚举说明), event?: [ClickEvent](ts-universal-events-click.md#clickevent对象说明)) => void) | 点击动作触发该回调。<br/>result：剪贴板权限的授权结果，授权后可以读取当前剪贴板内容，如果内容发生变化再次读取仍需授权。<br/>event：见ClickEvent对象说明。 |
## 示例
```ts
// xxx.ets
@Entry
@Component
struct Index {
build() {
Row() {
Column({space:10}) {
// 默认参数下，图标、文字、背景都存在
SecPasteButton()
// 传入参数即表示元素存在，不传入的参数表示元素不存在，例如：只显示图标
SecPasteButton({icon:PasteIconStyle.LINES})
// 只显示图标+背景
SecPasteButton({icon:PasteIconStyle.LINES, buttonType:ButtonType.Capsule})
// 图标、文字、背景都存在
SecPasteButton({icon:PasteIconStyle.LINES, text:PasteDescription.PASTE, buttonType:ButtonType.Capsule})
}.width('100%')
}.height('100%')
}
}
```
![SecPasteButton1](figures/secpastebutton1.png)
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-secsavebutton.md 0 → 100644
浏览文件 @ ec8dff57
# SecSaveButton
安全控件的保存按钮，用户通过点击该保存按钮，可以临时获取存储权限，而不需要权限弹框授权确认。
> **说明：**
>
> 该组件从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 子组件
不支持。
## 接口
**方法1：** SecSaveButton()
默认创建带有图标、文本、背景的保存按钮。
**方法2：** SecSaveButton(option:{icon?: SaveIconStyle, text?: SaveDescription, buttonType?: ButtonType})
创建包含指定元素的保存按钮。
**参数：**
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ------ | ----------------------------------- | ---- | -------------- |
| icon | [SaveIconStyle](#saveiconstyle枚举说明) |否 | 设置保存按钮的图标风格<br/>不传入该参数表示没有图标，icon和text至少存在一个。 |
| text | [SaveDescription](#savedescription枚举说明) | 否 | 设置保存按钮的文本描述<br/>不传入该参数表示没有文字描述，icon和text至少存在一个。 |
| buttonType | [ButtonType](ts-basic-components-button.md#ButtonType枚举说明) | 否 | 设置保存按钮的背景样式<br/>不传入该参数表示没有背景。 |
## SaveIconStyle枚举说明
| 名称 | 描述 |
| ------------------- | ------------------ |
| FULL_FILLED | 保存按钮展示填充样式图标。 |
| LINES | 保存按钮展示线条样式图标。 |
## SaveDescription枚举说明
| 名称 | 描述 |
| ------------------- | ------------------ |
| DOWNLOAD | 保存按钮的文字描述为“下载”。 |
| DOWNLOAD_FILES | 保存按钮的文字描述为“下载文件”。 |
| SAVE | 保存按钮的文字描述为“保存”。 |
| SAVE_IMAGES | 保存按钮的文字描述为“保存图片”。 |
| SAVE_FILES | 保存按钮的文字描述为“保存文件”。 |
| DOWNLOAD_AND_SHARE | 保存按钮的文字描述为“下载分享”。 |
| RECEIVE | 保存按钮的文字描述为“接收”。 |
| CONTINUE_TO_RECEIVE | 保存按钮的文字描述为“继续接收”。 |
## SecSaveButtonOnClickResult枚举说明
| 名称 | 描述 |
| ------------------- | ------------------ |
| SUCCESS | 保存按钮点击成功。 |
| TEMPORARY_AUTHORIZATION_FAILED | 保存按钮点击后权限授权失败。 |
## 属性
不支持通用属性，仅继承[安全控件通用属性](ts-universal-attributes-securitycomponent.md#属性)。
## 事件
不支持通用事件，仅支持以下事件：
| 名称 | 功能描述 |
| ------------------------------------------------------------ | ------------------------------------------------------------ |
| onClick((result: [SecSaveButtonOnClickResult](#secsavebuttononclickresult枚举说明), event?: [ClickEvent](ts-universal-events-click.md#clickevent对象说明)) => void) | 点击动作触发该回调。<br/>result：存储权限的授权结果，授权方式为5秒单次，即触发点击后，可以在5秒中之内调用媒体库接口一次，超出5秒或者调用次数超出一次都会鉴权失败。<br/>event：见ClickEvent对象说明。 |
## 示例
```ts
// xxx.ets
@Entry
@Component
struct Index {
build() {
Row() {
Column({space:10}) {
// 默认参数下，图标、文字、背景都存在
SecSaveButton()
// 传入参数即表示元素存在，不传入的参数表示元素不存在，例如：只显示图标
SecSaveButton({icon:SaveIconStyle.FULL_FILLED})
// 只显示图标+背景
SecSaveButton({icon:SaveIconStyle.FULL_FILLED, buttonType:ButtonType.Capsule})
// 图标、文字、背景都存在
SecSaveButton({icon:SaveIconStyle.FULL_FILLED, text:SaveDescription.DOWNLOAD, buttonType:ButtonType.Capsule})
}.width('100%')
}.height('100%')
}
}
```
![secsavebutton1](figures/secsavebutton1.png)
zh-cn/application-dev/reference/arkui-ts/ts-components-summary.md
浏览文件 @ ec8dff57
......@@ -22,7 +22,7 @@
## 堆叠Flex与栅格
- [Stack](ts-container-stack.md)
- [Stack](ts-container-stack.md)
堆叠容器组件，子组件按照顺序依次入栈，后一个子组件覆盖前一个子组件。
- [Flex](ts-container-flex.md)
......@@ -63,7 +63,7 @@
## 滚动与滑动
- [Scroll](ts-container-scroll.md)
- [Scroll](ts-container-scroll.md)
可滚动的容器组件，当子组件的布局尺寸超过父组件的尺寸时，内容可以滚动。
- [Swiper](ts-container-swiper.md)
......@@ -79,9 +79,9 @@
## 导航
- [Navigator](ts-container-navigator.md)
- [Navigator](ts-container-navigator.md)
路由容器组件，提供路由跳转能力。
路由容器组件，提供路由跳转能力。
- [Navigation](ts-basic-components-navigation.md)
一般作为Page页面的根容器，通过属性设置来展示页面的标题栏、工具栏、导航栏等。
......@@ -234,7 +234,7 @@
提供画布组件，用于自定义绘制图形。
- [Circle](ts-drawing-components-circle.md)
用于绘制圆形的组件。
用于绘制圆形的组件。
- [Ellipse](ts-drawing-components-ellipse.md)
椭圆绘制组件。
......@@ -281,7 +281,7 @@
可滑动面板，提供一种轻量的内容展示窗口，方便在不同尺寸中切换。
- [Refresh](ts-container-refresh.md)
可以进行页面下拉操作并显示刷新动效的容器组件。
可以进行页面下拉操作并显示刷新动效的容器组件。
- [AbilityComponent](ts-container-ability-component.md)
独立显示Ability的容器组件。
......@@ -300,3 +300,12 @@
- [MenuItemGroup](ts-basic-components-menuitemgroup.md)
用来展示菜单MenuItem的分组。
- [SecLocationButton](ts-basic-components-seclocationbutton.md)
安全控件的位置按钮，用户通过点击该位置按钮，可以临时获取精准定位权限，而不需要权限弹框授权确认。
- [SecPasteButton](ts-basic-components-secpastebutton.md)
安全控件的粘贴按钮，用户通过点击该粘贴按钮，可以临时获取读取剪贴板权限，而不会触发toast提示。
- [SecSaveButton](ts-basic-components-secsavebutton.md)
安全控件的保存按钮，用户通过点击该保存按钮，可以临时获取存储权限，而不需要权限弹框授权确认。
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-securitycomponent.md 0 → 100644
浏览文件 @ ec8dff57
# SecurityComponent
安全控件的基础属性，用于设置安全控件通用的属性。
> **说明：**
>
> 该组件从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 属性
| 名称 | 参数类型 | 必填 | 描述 |
| ----------- | ------ | ---- | ---------------------------------------- |
| iconSize | [Length](ts-types.md#length) | 否 | 设置安全控件上图标的尺寸。<br/> 默认值：16vp |
| layoutDirection | [SecurityComponentLayoutDirection](#securitycomponentlayoutdirection枚举说明) | 否 | 设置安全控件上图标和文字分布的方向。 <br/> 默认值：SecurityComponentLayoutDirection.HORIZONTAL|
| layoutOrder | [SecurityComponentLayoutOrder](#securitycomponentlayoutorder枚举说明) | 否 | 设置安全控件上图标和文字分布的顺序。 <br/> 默认值：SecurityComponentLayoutOrder.ICON_FIRST|
| position | [Position](ts-types.md#position8) | 否 | 设置绝对定位，设置安全控件的左上角相对于父容器左上角的偏移位置。<br/> 默认值：<br/>{ <br/>x: 0,<br/>y: 0<br/>} |
| markAnchor | [Position](ts-types.md#position8) | 否 | 设置绝对定位的锚点，以安全控件的左上角作为基准点进行偏移。<br/> 默认值：<br/>{ <br/>x: 0,<br/>y: 0<br/>} |
| offset | [Position](ts-types.md#position8) | 否 | 设置相对定位，安全控件相对于自身的偏移量。<br/> 默认值：<br/>{ <br/>x: 0,<br/>y: 0<br/>} |
| fontSize | [Length](ts-types.md#length) | 否 | 设置安全控件上文字的尺寸。<br/> 默认值：16fp |
| fontStyle | [FontStyle](ts-appendix-enums.md#fontstyle) | 否 | 设置安全控件上文字的样式。<br/> 默认值：FontStyle.Normal |
| fontWeight | number \| [FontWeight](ts-appendix-enums.md#fontweight) \| string | 否 | 设置安全控件上文字粗细。 <br/> 默认值：FontWeight.Medium |
| fontFamily | string \| [Resource](ts-types.md#resource类型) | 否 | 设置安全控件上文字的字体。 <br/>默认字体：'HarmonyOS Sans' |
| fontColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 设置安全控件上文字的颜色。<br/> 默认值：#ffffffff |
| iconColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 设置安全控件上图标的颜色。<br/> 默认值：#ffffffff |
| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 设置安全控件的背景颜色。 <br/> 默认值：#007dff |
| borderStyle | [BorderStyle](ts-appendix-enums.md#borderstyle) | 否 | 设置安全控件的边框的样式。 <br/> 默认不设置边框样式 |
| borderWidth | [Length](ts-types.md#length) | 否 | 设置安全控件的边框的宽度。 <br/> 默认不设置边框宽度 |
| borderColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 设置安全控件的边框的颜色。 <br/> 默认不设置边框颜色 |
| borderRadius | [Length](ts-types.md#length) | 否 | 设置安全控件的边框圆角半径。<br/> 默认值：1/2 按钮整高 |
| padding | [Padding](ts-types.md#padding) \| [Length](ts-types.md#length) | 否 | 设置安全控件的内边距。 <br/> 默认值：上下8vp, 左右24vp |
| textIconSpace | [Length](ts-types.md#length) | 否 | 设置安全控件中图标和文字的间距。 <br/> 默认值：4vp |
## SecurityComponentLayoutDirection枚举说明
| 名称 | 描述 |
| ------------------- | ------------------ |
| HORIZONTAL | 安全控件上图标和文字分布的方向为水平排列。 |
| VERTICAL | 安全控件上图标和文字分布的方向为垂直排列。 |
## SecurityComponentLayoutOrder枚举说明
| 名称 | 描述 |
| ------------------- | ------------------ |
| ICON_FIRST | 图标的排列顺序先于文字。 |
| TEXT_FIRST | 文字的排列顺序先于图标。 |
## 示例
```ts
// xxx.ets
@Entry
@Component
struct Index {
build() {
Row() {
Column() {
// 生成一个保存按钮，并设置它的SecurityComponent属性
SecSaveButton()
.fontSize(35)
.fontColor(Color.White)
.iconSize(30)
.layoutDirection(SecurityComponentLayoutDirection.HORIZONTAL)
.layoutOrder(SecurityComponentLayoutOrder.TEXT_FIRST)
.borderWidth(1)
.borderStyle(BorderStyle.Dashed)
.borderColor(Color.Blue)
.borderRadius(20)
.fontWeight(100)
.iconColor(Color.White)
.padding({left:50, top:50, bottom:50, right:50})
.textIconSpace(20)
.backgroundColor(0x3282f6)
}.width('100%')
}.height('100%')
}
}
```
![securitycomponent1](figures/securitycomponent1.png)
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或