@@ -69,3 +69,55 @@ Example:
6969- ` element-{type} ` - Custom element rendering (e.g., ` element-signature ` )
7070- ` custom ` - Fallback for elements without specific type
7171- ` actions ` - Custom action buttons
72+
73+ #### ` actions ` slot props
74+
75+ The ` actions ` slot receives:
76+
77+ - ` object `
78+ - ` onDelete `
79+ - ` onDuplicate `
80+ - ` toolbarClass ` (` pdf-elements-actions-toolbar ` )
81+ - ` actionClass ` (` pdf-elements-action-btn ` )
82+ - ` actionAttrs ` (` { 'data-pdf-elements-action': 'true' } ` )
83+
84+ Use these hooks to style third-party button components consistently (for example, Nextcloud ` NcButton ` ) without relying on internal scoped selectors.
85+
86+ Example:
87+
88+ ``` vue
89+ <template #actions="slotProps">
90+ <NcButton
91+ :class="slotProps.actionClass"
92+ v-bind="slotProps.actionAttrs"
93+ type="button"
94+ variant="tertiary"
95+ @click.stop="slotProps.onDuplicate"
96+ >
97+ Duplicate
98+ </NcButton>
99+ </template>
100+ ```
101+
102+ ### Theme variables
103+
104+ Action toolbar and action buttons can be themed via CSS variables and follow host theme tokens by default.
105+
106+ | Variable | Description |
107+ | ---| ---|
108+ | ` --pdf-elements-toolbar-gap ` | Toolbar button gap |
109+ | ` --pdf-elements-toolbar-padding ` | Toolbar padding |
110+ | ` --pdf-elements-toolbar-background ` | Toolbar background color |
111+ | ` --pdf-elements-toolbar-color ` | Toolbar text/icon color |
112+ | ` --pdf-elements-toolbar-border-color ` | Toolbar border color |
113+ | ` --pdf-elements-toolbar-border-radius ` | Toolbar border radius |
114+ | ` --pdf-elements-toolbar-shadow ` | Toolbar shadow |
115+ | ` --pdf-elements-action-btn-border ` | Action button border |
116+ | ` --pdf-elements-action-btn-background ` | Action button background |
117+ | ` --pdf-elements-action-btn-color ` | Action button text/icon color |
118+ | ` --pdf-elements-action-btn-padding ` | Action button padding |
119+ | ` --pdf-elements-action-btn-radius ` | Action button border radius |
120+ | ` --pdf-elements-action-btn-min-height ` | Action button min height |
121+ | ` --pdf-elements-action-btn-min-width ` | Action button min width |
122+ | ` --pdf-elements-action-btn-shadow ` | Action button shadow |
123+ | ` --pdf-elements-action-btn-hover-background ` | Action button hover background |
0 commit comments