Wiki source code of Drawer
Last modified by Lucas Charpentier (Sereza7) on 2023/11/15
Hide last authors
| author | version | line-number | content |
|---|---|---|---|
 |
6.1 | 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}} | ||
| |
1.2 | 4 | |
| |
2.1 | 5 | == How to use == |
| |
6.1 | 6 | |
| |
2.1 | 7 | The different parts of the drawer 'pattern' must be set up in the page HTML: |
| |
6.1 | 8 | |
| |
1.2 | 9 | 1. A drawer opener button, with: |
 |
3.1 | 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 | ||
| |
1.2 | 21 | |
| |
1.5 | 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: |
| |
6.1 | 23 | |
| |
1.2 | 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 | ||
| |
10.1 | 26 | * {{{Using the rules as a mixin in another LESS file:}}} |
| 27 | * {{code}}#customDrawer.drawer-nav { | ||
| 28 | #tmDrawer.drawer-nav | ||
| 29 | }{{/code}} | ||
| |
1.2 | 30 | |
| |
10.1 | 31 | ((( |
| |
9.1 | 32 | |
| 33 | ))) | ||
| 34 | |||
| |
1.6 | 35 | == Example == |
| |
1.2 | 36 | |
| |
6.1 | 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 | |||
| |
1.6 | 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. | ||
| |
1.2 | 41 | |
| |
6.1 | 42 | In this example, I decided to add my own drawer ID on line 29 of [[##drawer.less##>>attach:drawer.less]]. |
| |
1.6 | 43 | |
| |
8.1 | 44 | [[Video demo of how updating those two files allows to add a fully interactive drawer>>attach:18007-doc.mp4]]. |
