ActionItem
<actionItem>
is a UI component that lets you add action buttons to the <actionBar>
component.
See also:
Basic use
/** @jsx createElement */
<actionBar title="My App">
<actionItem
onTap={onTapShare}
ios={{
systemIcon: 9,
position: "left"
}}
android={{
systemIcon: "ic_menu_share",
position: "actionBar"
}}
/>
<actionItem
onTap={onTapDelete}
ios={{
systemIcon: 16,
position: "right"
}}
android={{
position: "popup"
}}
text="delete"
/>
</actionBar>
Conditionally showing action items
You can use the visibility
prop (inherited from View
) to show <actionItem>
components based on a condition.
/** @jsx createElement */
<actionBar title="My App">
<actionItem
onTap={onTapEdit}
visibility={isEditing ? "hidden" : "visible"}
ios={{
systemIcon: 2,
position: "right"
}}
android={{
systemIcon: "ic_menu_edit"
}}
/>
<actionItem
onTap={onTapSave}
visibility={isEditing ? "visible" : "hidden"}
ios={{
systemIcon: 3,
position: "right"
}}
android={{
systemIcon: "ic_menu_save"
}} />
<actionItem
onTap={onTapCancel}
visibility={isEditing ? "visible" : "hidden"}
ios={{
systemIcon: 1,
position: "ic_menu_close_clear_cancel"
}}
/>
</actionBar>
Props
Name | Type | Description |
---|---|---|
ios.systemIcon | number | Sets the icon of the ActionItem for iOS. The value must be a number from the UIBarButtonSystemItem enumeration. |
android.systemIcon | string | Sets the icon of the ActionItem for Android. The value must be the name of a drawable resource. |
ios.position | string | Sets the position of the ActionItem within the ActionBar for iOS.Valid values: left or right .Default value is left . |
android.position | string | Sets the position of the ActionItem within the ActionBar for Android.Valid values: actionBar (places the item in the ActionBar)popup (places the item in the options menu; renders items as text)actionBarIfRoom (places the item in the ActionBar if there is enough room for it there; otherwise, placess it in the options menu)Default value is actionBar . |
onTap | (args: EventData ) => void | Emitted when the ActionItem is tapped. |
Native component
Android | iOS |
---|---|
android.widget.Toolbar | UINavigationItem |