Describes the properties of a Annotation Toolbar Item.
Check out our guides for more examples.
Members
Members
Useful to set a custom CSS class name on the parent. The class is applied based on the following logic:
-
For built-in toolbar items, the
className
is appended to the default item ones. -
For custom items, it is applied to the parent of the
node
you passed. -
For custom items, the icon's parent gets the same classname with an
-Icon
suffix.
For eg: If you have passed a custom item with an icon, the icon's parent will
get the classname my-custom-item-Icon
if you passed the classname
as my-custom-item
.
For default items theclassName
is appended to the default item ones.
Type:
- string
Whether the item is disabled or not.
The property can be used to force a built in toolbar item to be disabled by
setting it to true
.
Type:
- boolean
Icon for the custom item.
In case of mobile devices, the icon is displayed on the first level of the
annotation toolbar. Once you click on the icon, the node
element
opens on the second level.
If you do not pass the icon
, the node is present on the first
level.
Type:
- string
Unique identifier for the item.
This is required for custom
items.
Type:
- string
Example
PSPDFKit.load({
...otherOptions,
annotationToolbarItems: (annotation, { defaultAnnotationToolbarItems }) => {
return [...defaultAnnotationToolbarItems, { type: 'custom', id: "my-button", ... }]
}
});
Note: It is ***not*** possible to override this option for built-in toolbar items.
The custom
tool items can define a DOM node. PSPDFKit renders
this node instead of a standard tool button.
In this case the tool item is rendered inside of a container which gets the
title
and className
attributes set.
The selected
and disabled
are used just to toggle
the PSPDFKit-Tool-Node-active and PSPDFKit-Tool-Node-disabled class names but
making the node effectively selected or disabled is up to the implementation
of the item.
The onPress
event is registered and fires any time the item is
either clicked or tapped (on touch devices).
Type:
- Node
Callback to invoke when the item is clicked or tapped (on touch devices). It
gets the event
as first argument, the id
of the tool
item as the second for custom
items.
Type:
- function
Title for the tool items. It is shown on hover.
Type:
- string
required
The type of an annotation toolbar item.
It can either be custom
for user defined items, or one of the
built-in annotation toolbar types.
The built-in types are:
stroke-color
fill-color
background-color
opacity
line-width
line-style
linecaps-dasharray
blend-mode
delete
spacer
annotation-note
border-style
border-width
border-color
apply-redactions
color
font
outline-color
overlay-text
note-icon
Different annotations have different built-in toolbar items but all of them
belong to the one mentioned above. If you pass a type
that isn't
supported by an annotation, you will get an error.
Note: It is not possible to override this option for built-in toolbar items.
Type:
- string
Example
PSPDFKit.load({
...otherOptions,
annotationToolbarItems: (annotation, { defaultAnnotationToolbarItems }) => {
return [...defaultAnnotationToolbarItems, { type: 'custom', ... }]
}
});