Skip to content

Commit a662b5d

Browse files
committed
docs: document action slot hooks and theme variables
Signed-off-by: Vitor Mattos <1079143+vitormattos@users.noreply.github.com>
1 parent 00bde20 commit a662b5d

1 file changed

Lines changed: 52 additions & 0 deletions

File tree

README.md

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -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

Comments
 (0)