Wiki source code of Drawer
Last modified by Lucas Charpentier on 2023/11/15 15:32
Show last authors
| author | version | line-number | content |
|---|---|---|---|
| 1 | {{version since="XWiki 15.10"}} | ||
| 2 | It's possible to reuse the behavior implemented for the main menu drawer in custom drawers. | ||
| 3 | {{/version}} | ||
| 4 | |||
| 5 | == How to use == | ||
| 6 | |||
| 7 | The different parts of the drawer 'pattern' must be set up in the page HTML: | ||
| 8 | |||
| 9 | 1. A drawer opener button, with: | ||
| 10 | 1*. a reference to the ID of the drawer container in its attribute 'aria-control' | ||
| 11 | 1*. the class '.drawer-opener' | ||
| 12 | 1. A drawer container, with: | ||
| 13 | 1*. a `dialog` HTML nature | ||
| 14 | 1*. a unique ID (same as the 'aria-controls' value of the drawer opener) | ||
| 15 | 1*. the class 'drawer-nav' (for basic style) | ||
| 16 | 1*. an accessible name that describes the function of the drawer | ||
| 17 | 1*. The content to display inside | ||
| 18 | 1. (Optional) A drawer close button: | ||
| 19 | 1*. Inside the drawer container | ||
| 20 | 1*. With the class '.drawer-close | ||
| 21 | |||
| 22 | 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: | ||
| 23 | |||
| 24 | * Adding your own drawer ID on line 29 of the file. | ||
| 25 | * Copying the style block to your own LESS stylesheet and changing #tmDrawer to your own drawer ID | ||
| 26 | * {{{Using the rules as a mixin in another LESS file:}}} | ||
| 27 | * {{code}}#customDrawer.drawer-nav { | ||
| 28 | #tmDrawer.drawer-nav | ||
| 29 | }{{/code}} | ||
| 30 | |||
| 31 | ((( | ||
| 32 | |||
| 33 | ))) | ||
| 34 | |||
| 35 | == Example == | ||
| 36 | |||
| 37 | I updated the [[##drawer.vm##>>attach:drawer.vm]] template to add my own template. Here are the details of my modifications on this file: | ||
| 38 | |||
| 39 | * L102->104: I added a button in the main drawer to open the custom drawer | ||
| 40 | * 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. | ||
| 41 | |||
| 42 | In this example, I decided to add my own drawer ID on line 29 of [[##drawer.less##>>attach:drawer.less]]. | ||
| 43 | |||
| 44 | [[Video demo of how updating those two files allows to add a fully interactive drawer>>attach:18007-doc.mp4]]. |
