• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# PasteButton
2
3The **PasteButton** security component represents a paste button that allows you to obtain temporary pasteboard permissions from users with a simple button touch.
4
5> **NOTE**
6>
7> This component is supported since API version 10. Updates will be marked with a superscript to indicate their earliest API version.
8
9## Child Components
10
11Not supported
12
13## APIs
14
15### PasteButton
16
17PasteButton()
18
19Creates a **PasteButton** component with an icon, text, and background.
20
21You may want to learn the [restrictions on security component styles](../../../security/AccessToken/security-component-overview.md#constraints) to avoid authorization failures caused by incompliant styles.
22
23**Atomic service API**: This API can be used in atomic services since API version 11.
24
25**System capability**: SystemCapability.ArkUI.ArkUI.Full
26
27### PasteButton
28
29PasteButton(options: PasteButtonOptions)
30
31Creates a **PasteButton** component that contains the specified elements.
32
33You may want to learn the [restrictions on security component styles](../../../security/AccessToken/security-component-overview.md#constraints) to avoid authorization failures caused by incompliant styles.
34
35**Atomic service API**: This API can be used in atomic services since API version 11.
36
37**System capability**: SystemCapability.ArkUI.ArkUI.Full
38
39**Parameters**
40
41| Name| Type| Mandatory| Description|
42| -------- | -------- | -------- | -------- |
43| options | [PasteButtonOptions](#pastebuttonoptions) | Yes| Options for creating the **PasteButton** component.<br>Default value:<br>{<br>icon: PasteIconStyle.LINES,<br>text: PasteDescription.PASTE,<br>buttonType: ButtonType.Capsule <br>} |
44
45## PasteButtonOptions
46
47Describes the icon, text, and other specific elements for the **PasteButton** component.
48
49> **NOTE**
50>
51> - At least one of **icon** or **text** must be provided.<br>
52> - If neither **icon** nor **text** is provided, the **options** parameter in [PasteButton](#pastebutton-1) will not take effect, and the created **PasteButton** component will use the default style:
53>
54>   The default value of **PasteIconStyle** is **LINES**.
55>
56>   The default style of **PasteDescription** is **PASTE**.
57>
58>   The default value of **ButtonType** is **Capsule**.
59> - The **icon**, **text**, and **buttonType** parameters do not support dynamic modification.
60
61**Atomic service API**: This API can be used in atomic services since API version 11.
62
63**System capability**: SystemCapability.ArkUI.ArkUI.Full
64
65| Name| Type| Mandatory| Description|
66| -------- | -------- | -------- | -------- |
67| icon | [PasteIconStyle](#pasteiconstyle) | No| Icon style of the **PasteButton** component.<br>If this parameter is not specified, there is no icon.|
68| text | [PasteDescription](#pastedescription) | No| Text on the **PasteButton** component.<br>If this parameter is not specified, there is no text description.|
69| buttonType | [ButtonType](ts-securitycomponent-attributes.md#buttontype) | No| Background style of the **PasteButton** component.<br>If this parameter is not specified, the system uses a capsule-type button.|
70
71## Attributes
72
73This component can only inherit the [universal attributes of security components](ts-securitycomponent-attributes.md).
74
75## PasteIconStyle
76
77**Atomic service API**: This API can be used in atomic services since API version 11.
78
79**System capability**: SystemCapability.ArkUI.ArkUI.Full
80
81| Name| Value| Description|
82| -------- | -------- | -------- |
83| LINES | 0 | Line style icon.|
84
85## PasteDescription
86
87**Atomic service API**: This API can be used in atomic services since API version 11.
88
89**System capability**: SystemCapability.ArkUI.ArkUI.Full
90
91| Name| Value| Description|
92| -------- | -------- | -------- |
93| PASTE | 0 | The text on the **PasteButton** component is **Paste**.|
94
95## PasteButtonOnClickResult
96
97**Atomic service API**: This API can be used in atomic services since API version 11.
98
99**System capability**: SystemCapability.ArkUI.ArkUI.Full
100
101| Name| Value| Description|
102| -------- | -------- | -------- |
103| SUCCESS | 0 | The **PasteButton** component is touched successfully.|
104| TEMPORARY_AUTHORIZATION_FAILED | 1 | Temporary authorization fails after the **PasteButton** component is touched.|
105
106## PasteButtonCallback<sup>18+</sup>
107
108type PasteButtonCallback = (event: ClickEvent, result: PasteButtonOnClickResult, error?: BusinessError&lt;void&gt;) =&gt; void
109
110Triggered when the **PasteButton** component is clicked.
111
112**Atomic service API**: This API can be used in atomic services since API version 18.
113
114**System capability**: SystemCapability.ArkUI.ArkUI.Full
115
116| Name| Type                  | Mandatory| Description                  |
117|------------|------|-------|---------|
118| event | [ClickEvent](ts-universal-events-click.md#clickevent) |Yes|See **ClickEvent**.|
119| result | [PasteButtononClickResult](#pastebuttononclickresult)| Yes| Authorization result. After the authorization, the pasteboard content can be read.|
120| error | [BusinessError&lt;void&gt;](../../apis-basic-services-kit/js-apis-base.md#businesserror) | No| Error code and message when the component is clicked.<br>Error code 0 indicates successful authorization.<br>Error code 1 indicates an internal system error.<br>Error code 2 indicates attribute setting errors, including but not limited to:<br>1. The font or icon size is too small.<br>2. The font or icon color is too similar to the background color.<br>3. The font or icon color is too transparent.<br>4. The padding is negative.<br>5. The component is obscured by other components or windows.<br>6. The text exceeds the background range.<br>7. The component exceeds the window or screen bounds.<br>8. The component size is too large.<br>9. The component text is truncated and not fully displayed.<br>10. Related attribute settings affect the display of security components.|
121
122## Events
123
124Only the following events are supported.
125
126### onClick
127
128onClick(event: PasteButtonCallback)
129
130Called when a click event occurs.
131
132**Atomic service API**: This API can be used in atomic services since API version 11.
133
134**System capability**: SystemCapability.ArkUI.ArkUI.Full
135
136**Parameters**
137
138| Name| Type                  | Mandatory| Description                  |
139|------------|------|-------|---------|
140| event | [PasteButtonCallback](#pastebuttoncallback18) |Yes|See **PasteButtonCallback**.<br>In API versions 10 to 17, the parameter type is event: [ClickEvent](ts-universal-events-click.md#clickevent), result: [PasteButtononClickResult](#pastebuttononclickresult)) => void.<br>Since API version 18, the parameter type changes into PasteButtonCallback.|
141
142## Example
143
144```ts
145// xxx.ets
146import { BusinessError } from '@kit.BasicServicesKit';
147
148@Entry
149@Component
150struct Index {
151  handlePasteButtonClick: PasteButtonCallback =
152    (event: ClickEvent, result: PasteButtonOnClickResult, error: BusinessError<void>) => {
153      if (result == PasteButtonOnClickResult.SUCCESS) {
154        console.info("success");
155      } else {
156        console.info("errCode: " + error.code);
157        console.info("errMessage: " + error.message);
158      }
159    };
160
161  build() {
162    Row() {
163      Column({ space: 10 }) {
164        // Create a default button with an icon, text, and background.
165        PasteButton().onClick(this.handlePasteButtonClick)
166        // Whether an element is contained depends on whether the parameter corresponding to the element is specified. If buttonType is not passed in, the button uses the ButtonType.Capsule settings.
167        PasteButton({ icon: PasteIconStyle.LINES })
168        // Create a button with only an icon and background. If the alpha value of the most significant eight bits of the background color is less than 0x1A, the system forcibly adjusts the alpha value to 0xFF.
169        PasteButton({ icon: PasteIconStyle.LINES, buttonType: ButtonType.Capsule })
170          .backgroundColor(0x10007dff)
171        // Create a button with an icon, text, and background. If the alpha value of the most significant eight bits of the background color is less than 0x1A, the system forcibly adjusts the alpha value to 0xFF.
172        PasteButton({ icon: PasteIconStyle.LINES, text: PasteDescription.PASTE, buttonType: ButtonType.Capsule })
173        // Create a button with an icon, text, and background. If the set width is less than the minimum allowed, the button's text will wrap to guarantee full text display.
174        PasteButton({ icon: PasteIconStyle.LINES, text: PasteDescription.PASTE, buttonType: ButtonType.Capsule })
175          .fontSize(16)
176          .width(30)
177        // Create a button with an icon, text, and background. If the set width is less than the minimum allowed, the button's text will wrap to guarantee full text display.
178        PasteButton({ icon: PasteIconStyle.LINES, text: PasteDescription.PASTE, buttonType: ButtonType.Capsule })
179          .fontSize(16)
180          .size({ width: 30, height: 30 })
181        // Create a button with an icon, text, and background. If the set width is less than the minimum allowed, the button's text will wrap to guarantee full text display.
182        PasteButton({ icon: PasteIconStyle.LINES, text: PasteDescription.PASTE, buttonType: ButtonType.Capsule })
183          .fontSize(16)
184          .constraintSize({
185            minWidth: 0,
186            maxWidth: 30,
187            minHeight: 0,
188            maxHeight: 30
189          })
190      }.width('100%')
191    }.height('100%')
192  }
193}
194```
195
196![en-us_image_0000001593677984](figures/en-us_image_0000001593677984.png)
197