Panel dropdowns
Our action dropdowns for pages, files and users are all loaded on request. This way, we can load and evaluate permissions individually from the API and then disable items in the dropdowns that should not be accessible.
As part of your Panel area extension, you can also define custom dropdowns easily on the backend and use them in your Panel frontend code with a simple single call.
The backend code for this is very straightforward as well and is defined as part of our areas
Option settings
The dropdown definition returns an array of dropdown options. Each option can define a set of parameters to control how the option is displayed and what happens on click.
Parameter | Type | Description |
---|---|---|
click |
string |
The name of the event that will be triggered on click |
dialog |
string |array |
Either a single path to a dialog or dialog settings |
disabled |
bool |
Enable/disable the item |
icon |
string |
The name of the option icon |
link |
string |
An optional url/path to create a link instead of a button |
target |
string |
A link target (i.e. _blank) |
text |
string |
The label for the option |
Custom dropdowns
Of course, you can create your own dropdowns for your plugins as part of your Panel area extension:
Your dropdown options can then be loaded in your Vue code like this:
Extending dropdowns
Pages, files and users have dynamic option dropdowns. Those dropdowns show all the available options like changing titles, sorting pages, deleting stuff, etc.
Those dropdowns can be extended or modified to add additional options, remove options or simply change what's normally shown.
Reusing core code
When you plan to extend a dropdown, you might want to fall back to Kirby's core behaviour in some cases. This can be done by loading the core code:
The core models (page, user and file) all have a separate $model->panel()->dropdown()
method for their own dropdown. While the code above is the correct way to load core code for any part of an area, you can simplify this for dropdowns by reusing the dropdown method.
Core dropdowns
Area | Dropdown name |
---|---|
site |
page |
site |
page.file |
site |
site.file |
users |
user |
users |
user.file |