!19065 添加安全控件资料

Merge pull request !19065 from libing23/master

!19065 添加安全控件资料
Merge pull request !19065 from libing23/master
3e6ba403 · openharmony_ci · Gitee · bbde4626 · ec8dff57 · 3e6ba403
10 changed file
--- a/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md
+++ b/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md
@@ -51,6 +51,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)
    - 基础手势
@@ -93,6 +94,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)

--- a/zh-cn/application-dev/reference/arkui-ts/figures/seclocationbutton1.png
+++ b/zh-cn/application-dev/reference/arkui-ts/figures/seclocationbutton1.png
--- a/zh-cn/application-dev/reference/arkui-ts/figures/secpastebutton1.png
+++ b/zh-cn/application-dev/reference/arkui-ts/figures/secpastebutton1.png
--- a/zh-cn/application-dev/reference/arkui-ts/figures/secsavebutton1.png
+++ b/zh-cn/application-dev/reference/arkui-ts/figures/secsavebutton1.png
--- a/zh-cn/application-dev/reference/arkui-ts/figures/securitycomponent1.png
+++ b/zh-cn/application-dev/reference/arkui-ts/figures/securitycomponent1.png
--- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-seclocationbutton.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-seclocationbutton.md
+# 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)
--- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-secpastebutton.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-secpastebutton.md
+# 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)
--- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-secsavebutton.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-secsavebutton.md
+# 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)
--- a/zh-cn/application-dev/reference/arkui-ts/ts-components-summary.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-components-summary.md
@@ -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)
+
+    安全控件的保存按钮，用户通过点击该保存按钮，可以临时获取存储权限，而不需要权限弹框授权确认。
--- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-securitycomponent.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-securitycomponent.md
+# 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)