Navigation Block Macro
Last modified by Андрей Калиновский on 2022/05/16 17:07
- Manage
-
Copy
- Actions
-
Export
-
Annotate
-
Print Preview
- Viewers
-
Source
-
Siblings
-
Attachments (1)
-
History
-
Information
-
Likes
This Macro displays a nice block with links under it. It is possible to add an image and a title in the block. This macro uses bootstrap so it is possible to pass bootstrap classes to the macro in order to control the behavior of the blocks on all devices.
The bootstrap classes look like .col-screensize-nbblocks, with screensize being one of xs,sm,md,lg and the nbblocks a value between 1 and 12. For example if you choose to add "col-md-4,col-lg-1" it will make your block take either 4/12 or 1/12 of the width of the area where your block is put depending if you are on a smaller screen device or on a larger screen device. It's only on the larger screen that you would use 1/12 of the screen width.
Sample block macro code
{{block title="XWiki" image="xwiki.png" top-bgcolor="blue" top-height="150" link-height="200" image-width="50" image-height="50" top-bgcolor="blue" link-bgcolor="black" classes="col-lg-3 col-md-4 col-sm-6"}}
* [[XWiki.org>>url:http://www.xwiki.org]]
* [[XWiki SAS>>url:http://www.xwiki.com]]
{{/block}}
* [[XWiki.org>>url:http://www.xwiki.org]]
* [[XWiki SAS>>url:http://www.xwiki.com]]
{{/block}}
Sample block macro with 6 blocks with constant height
Sample block macro with 3 blocks with variable height
0