1# LocationButton 2 3The **LocationButton** security component represents a location button that allows you to obtain temporary, precise location permissions from users with a simple button touch, eliminating the need for a permission request dialog box. 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> - Since API version 15, the **LocationButton** component is deprecated. You are advised to call [requestPermissionsFromUser](../../apis-ability-kit/js-apis-abilityAccessCtrl.md#requestpermissionsfromuser9-1) to open a dialog box to request the required permissions from users. 10 11## Child Components 12 13Not supported 14 15## APIs 16 17### LocationButton 18 19LocationButton() 20 21Creates a **LocationButton** component with an icon, text, and background. 22 23You 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. 24 25**Atomic service API**: This API can be used in atomic services since API version 11. 26 27**System capability**: SystemCapability.ArkUI.ArkUI.Full 28 29### LocationButton 30 31LocationButton(options:LocationButtonOptions) 32 33Creates a **LocationButton** component that contains the specified elements. 34 35You 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. 36 37**Atomic service API**: This API can be used in atomic services since API version 11. 38 39**System capability**: SystemCapability.ArkUI.ArkUI.Full 40 41**Parameters** 42 43| Name| Type| Mandatory| Description| 44| -------- | -------- | -------- | -------- | 45| options | [LocationButtonOptions](#locationbuttonoptions) | Yes| Options of the **LocationButton** component.| 46 47## LocationButtonOptions 48 49Describes the icon, text, and other specific elements for the **LocationButton** component. 50 51> **NOTE** 52> 53> - At least one of **icon** or **text** must be provided.<br> 54> - If neither **icon** nor **text** is provided, the **options** parameter in [LocationButton](#locationbutton-1) will not take effect, and the created **LocationButton** component will use the default style: 55> 56> The default value of **LocationIconStyle** is **LINES**. 57> 58> The default style of **LocationDescription** is **CURRENT_LOCATION**. 59> 60> The default value of **ButtonType** is **Capsule**. 61> - The **icon**, **text**, and **buttonType** parameters do not support dynamic modification. 62 63**Atomic service API**: This API can be used in atomic services since API version 11. 64 65**System capability**: SystemCapability.ArkUI.ArkUI.Full 66 67| Name| Type| Mandatory| Description| 68| -------- | -------- | -------- | -------- | 69| icon | [LocationIconStyle](#locationiconstyle) | No| Icon style of the **LocationButton** component.<br>If this parameter is not specified, there is no icon.| 70| text | [LocationDescription](#locationdescription) | No| Text on the **LocationButton** component.<br>If this parameter is not specified, there is no text description.| 71| buttonType | [ButtonType](ts-basic-components-button.md#buttontype) | No| Background type of the **LocationButton** component.<br>If this parameter is not specified, the button takes on the capsule type.| 72 73## LocationIconStyle 74 75**Atomic service API**: This API can be used in atomic services since API version 11. 76 77**System capability**: SystemCapability.ArkUI.ArkUI.Full 78 79| Name| Value| Description| 80| -------- | -------- | -------- | 81| FULL_FILLED | 0 | Filled style icon.| 82| LINES | 1 | Line style icon.| 83 84## LocationDescription 85 86**Atomic service API**: This API can be used in atomic services since API version 11. 87 88**System capability**: SystemCapability.ArkUI.ArkUI.Full 89 90| Name| Value| Description| 91| -------- | -------- | -------- | 92| CURRENT_LOCATION | 0 | The text on the **LocationButton** component is **Current location**.| 93| ADD_LOCATION | 1 | The text on the **LocationButton** component is **Add location**.| 94| SELECT_LOCATION | 2 | The text on the **LocationButton** component is **Select location**.| 95| SHARE_LOCATION | 3 | The text on the **LocationButton** component is **Share location**.| 96| SEND_LOCATION | 4 | The text on the **LocationButton** component is **Send location**.| 97| LOCATING | 5 | The text on the **LocationButton** component is **Locate**.| 98| LOCATION | 6 | The text on the **LocationButton** component is **Location**.| 99| SEND_CURRENT_LOCATION | 7 | The text on the **LocationButton** component is **Send current location**.| 100| RELOCATION | 8 | The text on the **LocationButton** component is **Relocate**.| 101| PUNCH_IN | 9 | The text on the **LocationButton** component is **Punch in**.| 102| CURRENT_POSITION | 10 | The text on the **LocationButton** component is **Current position**.| 103 104## LocationButtonOnClickResult 105 106**Atomic service API**: This API can be used in atomic services since API version 11. 107 108**System capability**: SystemCapability.ArkUI.ArkUI.Full 109 110| Name| Value| Description| 111| -------- | -------- | -------- | 112| SUCCESS | 0 | The **LocationButton** component is touched successfully.| 113| TEMPORARY_AUTHORIZATION_FAILED | 1 | Temporary authorization fails after the **LocationButton** component is touched.| 114 115## Attributes 116 117This component can only inherit the [universal attributes of security components](ts-securitycomponent-attributes.md). 118 119## Events 120 121Only the following events are supported. 122 123### onClick 124 125onClick(event: (event: ClickEvent, result: LocationButtonOnClickResult) => void) 126 127Called when a click event occurs. 128 129**Atomic service API**: This API can be used in atomic services since API version 11. 130 131**System capability**: SystemCapability.ArkUI.ArkUI.Full 132 133**Parameters** 134 135| Name| Type | Mandatory| Description | 136|------------|------|-------|---------| 137| event | [ClickEvent](ts-universal-events-click.md#clickevent) |Yes|See **ClickEvent**.| 138| result | [LocationButtonOnClickResult](#locationbuttononclickresult)| Yes| Authorization result.| 139 140## Example 141 142```ts 143// xxx.ets 144@Entry 145@Component 146struct Index { 147 build() { 148 Row() { 149 Column({space:10}) { 150 // Create a default Location button with an icon, text, and background. 151 LocationButton().onClick((event: ClickEvent, result: LocationButtonOnClickResult)=>{ 152 console.info("result " + result) 153 }) 154 // 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. 155 LocationButton({icon:LocationIconStyle.LINES}) 156 // 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. 157 LocationButton({icon:LocationIconStyle.LINES, buttonType:ButtonType.Capsule}) 158 .backgroundColor(0x10007dff) 159 // 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. 160 LocationButton({icon:LocationIconStyle.LINES, text:LocationDescription.CURRENT_LOCATION, buttonType:ButtonType.Capsule}) 161 // 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. 162 LocationButton({icon:LocationIconStyle.LINES, text:LocationDescription.CURRENT_LOCATION, buttonType:ButtonType.Capsule}) 163 .fontSize(16) 164 .width(30) 165 // 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. 166 LocationButton({icon:LocationIconStyle.LINES, text:LocationDescription.CURRENT_LOCATION, buttonType:ButtonType.Capsule}) 167 .fontSize(16) 168 .size({width: 30, height: 30}) 169 // 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. 170 LocationButton({icon:LocationIconStyle.LINES, text:LocationDescription.CURRENT_LOCATION, buttonType:ButtonType.Capsule}) 171 .fontSize(16) 172 .constraintSize({minWidth: 0, maxWidth: 30, minHeight: 0, maxHeight: 30}) 173 }.width('100%') 174 }.height('100%') 175 } 176} 177``` 178 179 180
