title | isDefaultIndex | generated |
---|---|---|
ActionBarItem |
false |
true |
import MemberInfo from '@site/src/components/MemberInfo'; import GenerationInfo from '@site/src/components/GenerationInfo'; import MemberDescription from '@site/src/components/MemberDescription';
A button in the ActionBar area at the top of one of the list or detail views.
interface ActionBarItem {
id: string;
label: string;
locationId: ActionBarLocationId;
disabled?: Observable<boolean>;
buttonState?: (context: ActionBarContext) => Observable<ActionBarButtonState>;
onClick?: (event: MouseEvent, context: ActionBarContext) => void;
routerLink?: RouterLinkDefinition;
buttonColor?: 'primary' | 'success' | 'warning';
buttonStyle?: 'solid' | 'outline' | 'link';
icon?: string;
requiresPermission?: string | string[];
}
<MemberInfo kind="property" type={string
} />
A unique identifier for the item.
<MemberInfo kind="property" type={string
} />
The label to display for the item. This can also be a translation token,
e.g. invoice-plugin.print-invoice
.
<MemberInfo kind="property" type={<a href='/reference/admin-ui-api/action-bar/action-bar-location-id#actionbarlocationid'>ActionBarLocationId</a>
} />
The location in the UI where this button should be displayed.
<MemberInfo kind="property" type={Observable<boolean>
} />
Deprecated since v2.1.0 - use buttonState
instead.
<MemberInfo kind="property" type={(context: <a href='/reference/admin-ui-api/action-bar/action-bar-context#actionbarcontext'>ActionBarContext</a>) => Observable<ActionBarButtonState>
} since="2.1.0" />
A function which returns an observable of the button state, allowing you to dynamically enable/disable or show/hide the button.
<MemberInfo kind="property" type={(event: MouseEvent, context: <a href='/reference/admin-ui-api/action-bar/action-bar-context#actionbarcontext'>ActionBarContext</a>) => void
} />
<MemberInfo kind="property" type={<a href='/reference/admin-ui-api/action-bar/router-link-definition#routerlinkdefinition'>RouterLinkDefinition</a>
} />
<MemberInfo kind="property" type={'primary' | 'success' | 'warning'
} />
<MemberInfo kind="property" type={'solid' | 'outline' | 'link'
} />
<MemberInfo kind="property" type={string
} />
An optional icon to display in the button. The icon should be a valid shape name from the Clarity Icons set.
<MemberInfo kind="property" type={string | string[]
} />
Control the display of this item based on the user permissions. Note: if you attempt to pass a PermissionDefinition object, you will get a compilation error. Instead, pass the plain string version. For example, if the permission is defined as:
export const MyPermission = new PermissionDefinition('ProductReview');
then the generated permission strings will be:
CreateProductReview
ReadProductReview
UpdateProductReview
DeleteProductReview