|
| 1 | +--- |
| 2 | +title: ActionItem |
| 3 | +apiRef: https://docs.nativescript.org/api-reference/classes/_ui_action_bar_.actionitem |
| 4 | +contributors: [rigor789] |
| 5 | +--- |
| 6 | + |
| 7 | +The ActionItem component is used to add additional action buttons to the ActionBar. |
| 8 | + |
| 9 | +--- |
| 10 | + |
| 11 | +```html |
| 12 | +<ActionBar title="My App"> |
| 13 | + <ActionItem @tap="onTapShare" |
| 14 | + ios.systemIcon="9" ios.position="left" |
| 15 | + android.systemIcon="ic_menu_share" android.position="actionBar" /> |
| 16 | + <ActionItem @tap="onTapDelete" |
| 17 | + ios.systemIcon="16" ios.position="right" |
| 18 | + text="delete" android.position="popup" /> |
| 19 | +</ActionBar> |
| 20 | +``` |
| 21 | + |
| 22 | +#### Conditionally showing action items |
| 23 | + |
| 24 | +ActionItems can be displayed based on a condition using the `v-show` directive. |
| 25 | + |
| 26 | +```html |
| 27 | +<ActionBar title="My App"> |
| 28 | + <ActionItem @tap="onTapEdit" |
| 29 | + v-show="!isEditing" |
| 30 | + ios.systemIcon="2" ios.position="right" |
| 31 | + android.systemIcon="ic_menu_edit" /> |
| 32 | + <ActionItem @tap="onTapSave" |
| 33 | + v-show="isEditing" |
| 34 | + ios.systemIcon="3" ios.position="right" |
| 35 | + android.systemIcon="ic_menu_save" /> |
| 36 | + <ActionItem @tap="onTapCancel" |
| 37 | + v-show="isEditing" |
| 38 | + ios.systemIcon="1" |
| 39 | + android.systemIcon="ic_menu_close_clear_cancel" /> |
| 40 | +</ActionBar> |
| 41 | +``` |
| 42 | + |
| 43 | +## Props |
| 44 | + |
| 45 | +| name | type | description | |
| 46 | +|------|------|-------------| |
| 47 | +| `ios.systemIcon` | `String` | Sets the icon for iOS. |
| 48 | +| `android.systemIcon` | `String` | Sets the icon for Android. |
| 49 | +| `ios.position` | `String` | Sets the position for iOS.<br>Possible values:<br>- `left` (default): Puts the item on the left side of the ActionBar.<br>- `right`: Puts the item on the right side of the ActionBar. |
| 50 | +| `android.position` | `String` | Sets the position for Android.<br>Possible values:<br>- `actionBar` (default): Puts the item in the ActionBar.<br>- `popup`: Puts the item in the options menu. Items will be rendered as text.<br>- `actionBarIfRoom`: Puts the item in the ActionBar if there is room for it. Otherwise, puts it in the options menu. |
| 51 | + |
| 52 | +## Events |
| 53 | + |
| 54 | +| name | description | |
| 55 | +|------|-------------| |
| 56 | +| `tap`| Emitted when the ActionItem has been tapped. |
0 commit comments