Wiki source code of Drawer
Version 3.2 by Lucas Charpentier (Sereza7) on 2023/11/15
Show last authors
| author | version | line-number | content |
|---|---|---|---|
| 1 | {{version since="XWiki 15.10"}} It's possible to reuse the behavior implemented for the main menu drawer in custom drawers.{{/version}} | ||
| 2 | |||
| 3 | == How to use == | ||
| 4 | The different parts of the drawer 'pattern' must be set up in the page HTML: | ||
| 5 | 1. A drawer opener button, with: | ||
| 6 | 1*. a reference to the ID of the drawer container in its attribute 'aria-control' | ||
| 7 | 1*. the class '.drawer-opener' | ||
| 8 | 1. A drawer container, with: | ||
| 9 | 1*. a `dialog` HTML nature | ||
| 10 | 1*. a unique ID (same as the 'aria-controls' value of the drawer opener) | ||
| 11 | 1*. the class 'drawer-nav' (for basic style) | ||
| 12 | 1*. an accessible name that describes the function of the drawer | ||
| 13 | 1*. The content to display inside | ||
| 14 | 1. (Optional) A drawer close button: | ||
| 15 | 1*. Inside the drawer container | ||
| 16 | 1*. With the class '.drawer-close | ||
| 17 | |||
| 18 | Additionally, style should be added for the new drawer. As of now, it's recommended to reuse [[the content of this block from the drawer.less stylesheet>>https://github.com/xwiki/xwiki-platform/blob/86dbb3e0984a127e985006537bf781adc7417f79/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/less/drawer.less#L29]]. This can be reused either by: | ||
| 19 | * Adding your own drawer ID on line 29 of the file. | ||
| 20 | * Copying the style block to your own LESS stylesheet and changing #tmDrawer to your own drawer ID | ||
| 21 | |||
| 22 | |||
| 23 | == Example == | ||
| 24 | |||
| 25 | I updated the ##drawer.vm## template to add my own template. [[Here is a paste of the updated file>>https://up1.xwikisas.com/#ZALQU0iN1unVl4AHzA0WQg]]. Here are the details of my modifications on this file: | ||
| 26 | * L102->104: I added a button in the main drawer to open the custom drawer | ||
| 27 | * L107->113: I added the custom drawer container, which is a dialog with a unique ID, and added some of the content I want to display in it. | ||
| 28 | |||
| 29 | In this example, I decided to add my own drawer ID on line 29 of ##drawer.less##. [[Here is a paste of the updated file>>https://up1.xwikisas.com/#ufUizsdxpqw7Baz0bk7tOw]] | ||
| 30 | |||
| 31 | [[Video demo of how updating those two files allows to add a fully interactive drawer>>https://up1.xwikisas.com/#qqmSesR1-5yJSW6NTJVW0Q]]. |
