The Shortcode UI plugin provides several useful UI elements for Grav as shortcodes. As such it requires the Shortcode Core plugin to function.
It currently provides:
Typically a plugin should be installed via GPM (Grav Package Manager):
$ bin/gpm install shortcode-ui
Alternatively it can be installed via the Admin Plugin
There is currently only one main plugin option for Shortcode UI and that is to set a default theme for the tabs shortcode. As this plugin requires the Shortcode Core functionality there are some configuration options there that will effect this one. For example setting the default active
state to false
will also cause this plugin to not function.
enabled: true
theme:
tabs: default # default|lite|badges
You can change the tabs theme per-page by providing custom page headers:
shortcode-ui:
theme:
tabs: lite
This plugin provides a variety of plugins, each with a specific purpose:
NOTE: Requires JQuery to be loaded
An example of the Tabs shortcode is as follows:
[ ui-tabs position="top-left" active="0" theme="lite"]
[ ui-tab title="First Tab"]
In tempor sed sapien eu porttitor. Aliquam cursus facilisis ante. Etiam neque nunc, blandit vel lacus et, faucibus accumsan lacus. Proin posuere varius purus quis faucibus. Quisque et enim vitae orci [placerat tincidunt](#) id ac eros. Fusce et gravida libero.
Phasellus cursus odio ex, in **mattis lorem tincidunt** vel. Donec nibh odio, dapibus non ligula a, semper ornare massa. Nulla consectetur eu nunc sed ultrices. Integer at turpis dolor.
[ /ui-tab]
[ ui-tab title="Second Tab"]
In tempor sed sapien **eu porttitor**. Aliquam cursus facilisis ante. Etiam neque nunc, blandit vel lacus et, faucibus accumsan lacus. Proin posuere varius purus quis faucibus. [Quisque et enim](#) vitae orci placerat tincidunt id ac eros. Fusce et gravida libero.
Phasellus cursus odio ex, in mattis lorem tincidunt vel. [Donec nibh odio](#), dapibus non ligula a, semper ornare massa. Nulla consectetur eu nunc sed ultrices. Integer at turpis dolor.
[ /ui-tab]
[ /ui-tabs]
The [ ui-tabs]
shortcode has some optional parameters:
position
- top-left | top-right | bottom-left | bottom-rightactive
- 0-index number of initial active tab state. 0 to (number of tabs - 1)theme
- default | lite | badgesThe [ ui-tab]
shortcode that defines each tab has the following parameters:
title
- The text to display for the actual tab titleYou can use whatever markdown you wish in the tab itself. They are auto-adjusting and fully responsive.
An example of the Accordion shortcode is as follows:
Bacon ipsum dolor amet beef burgdoggen shoulder, meatball prosciutto kevin brisket chicken turkey. Kevin rump pancetta short loin capicola brisket landjaeger fatback picanha pork belly ribeye. Strip steak chuck turducken kevin t-bone ribeye cupim capicola alcatra rump. Venison pork chop biltong cupim pig rump meatloaf sausage pork. Strip steak kevin tongue brisket ball tip, venison turducken flank frankfurter corned beef pancetta fatback drumstick ham. Drumstick pastrami leberkas meatball flank tongue turkey ground round pork belly doner frankfurter porchetta jowl.
Short loin swine shankle flank picanha andouille burgdoggen landjaeger hamburger drumstick. Beef ham tail, tri-tip flank ham hock meatball picanha corned beef t-bone shank turkey ball tip shoulder. Flank corned beef chicken, meatloaf venison ball tip ham hock tail salami jowl short ribs pork belly drumstick. Meatball chicken hamburger beef filet mignon doner pork picanha pork chop fatback rump ham tri-tip ball tip landjaeger. Sausage leberkas shoulder tongue short loin shankle. Prosciutto tri-tip frankfurter shoulder drumstick capicola. Pork loin shank strip steak pork belly tongue cow.
Bacon ipsum dolor amet beef burgdoggen shoulder, meatball prosciutto kevin brisket chicken turkey. Kevin rump pancetta short loin capicola brisket landjaeger fatback picanha pork belly ribeye. Strip steak chuck turducken kevin t-bone ribeye cupim capicola alcatra rump. Venison pork chop biltong cupim pig rump meatloaf sausage pork. Strip steak kevin tongue brisket ball tip, venison turducken flank frankfurter corned beef pancetta fatback drumstick ham. Drumstick pastrami leberkas meatball flank tongue turkey ground round pork belly doner frankfurter porchetta jowl.
The [ ui-accordion]
shortcode has some optional parameters:
open
- accordion item # starting from 0
(e.g. 1
= 2nd item) | none
= all closed | all
= all openindependent
- true
| false
(default) = determines if panels can be opened independently from one-anotherThe [ ui-accordion-item]
shortcode that defines each accordion-item has the following parameters:
title
- The text to display for the actual accordion itemThis shortcode wraps content (image, text, whatever) with a HTML/CSS Browser frame.
[ ui-browser address="http://getgrav.org" class="p-4"]
![](getgrav.png)
[ /ui-browser]
NOTE: Address is displayed in the browser location field, and class is optional but is applied to the browser window.
The
shortcode has some optional parameters:
address
- URL to display in the fake address bar of the browserNOTE: Requires JQuery to be loaded
The [ ui-callout]
shortcode is intended to be able to provide numbered callout badges on an image and allow you to hover over an image and see a tooltip describing a particular feature. This is particularly useful when describing a user interface or provide notes or tips for an image.
Each [ ui-callout-item]
defines a particular item or tip that exists for the image.
[ ui-callout]
[ ui-callout-item title="Outlines" position="15%, 20%, se"]
This administrative panel lists displays the current theme's outlines, giving you quick access
to edit, rename, duplicate, and delete them.
[ /ui-callout-item]
[ ui-callout-item title="Menu Editor" position="60%, 85%, nw"]
This administrative panel gives you the ability to enhance the platform's
menu by altering styling, rearranging links, and creating menu items that sit outside of the
CMS's integrated Menu Manager.
[ /ui-callout-item]
![](affinity.jpg)
[ /ui-callout]
You can see this image has 2 items
The [ ui-callout]
has no parameters.
The [ ui-callout-item]
shortcode that defines each item has the following parameters:
title
- The title of the calloutposition
- format Y%, X%, TIP_ORIENTATION
. The Y% and X% are measured from the top left corner. That being 0%, 0%
, and the bottom right corner being 100%, 100%
. The tip orientation should be one of these values: ne, nw, se, sw
You can use whatever markdown you wish in the item itself. These will be represented as tooltips on hover.
You can also combine this shortcode with Animate.css by including the CSS class in your theme or page, and then adding top-level class entries:
[ ui-callout class="pulse infinite animated"]
...
[ /ui-callout]
NOTE: Requires JQuery to be loaded
This shortcode takes two images and provides a simple way to compare them via a draggable handle that lets you slide one image over the other.
Source: https://codyhouse.co/gem/css-jquery-image-comparison-slider/
[ ui-image-compare]
![Original](original.jpg?cache)
![Modified](modified.jpg?cache)
[ /ui-image-compare]
Simple provide two images, each on a newline between this shortcode. The Alt
text for the image will be used for the title.
This shortcode displays an image in a polaroid frame which can be customized in various ways.
[ ui-polaroid angle="-3" margin="30px 50px 20px 0" position="left" title="How's this for embarrasing!"]
![](my-image.jpg)
[ /ui-polaroid]
angle
can be a positive or negative value that represents the degree of rotation (3 by default)margin
is the margin value applied to the bounding-box. Use standard CSS values. (browser defaults)postion
can be left
or right
(right by default)gloss
overlay effect can be true
or false
- (true by default)title
is the text displayed below the imageclass
optional classes to pass to the wrapperNOTE: Requires JQuery to be loaded
This shortcode creates an attractive animated text effect with a few simple options. By default, the animated text is appended to the end of the provided text. However you can use the %WORDS%
text token to insert the animated text anywhere in your string.
Source: https://codyhouse.co/gem/css-animated-headlines/
The
shortcode has some parameters:
words
- Various words in a comma separated list to animate throughanimation
- rotate-1 | rotate-2 | rotate-3 | type | loading-bar | slide | scale | clip | zoom | push
element
- HTML element to wrap the text, for example h1
[ ui-animated-text words="pizza, chips, steak" animation="rotate-1" element="h2"]
cool
funky
fresh
is my favorite food
[ ui-animated-text words="pizza, chips, steak" animation="loading-bar" element="h2"]My favorite food is[/ui-animated-text]
[ ui-animated-text words="pizza, chips, steak" animation="slide" element="h2"]My favorite food is[/ui-animated-text]
[ ui-animated-text words="pizza, chips, steak" animation="clip" element="h2"]My favorite food is[/ui-animated-text]
My favorite food is
pizza
chips
steak
[ ui-animated-text words="pizza, chips, steak" animation="push" element="h2"]My favorite food is[/ui-animated-text]
[ ui-animated-text words="pizza, chips, steak" animation="letters rotate-2" element="h2"]My favorite food is[/ui-animated-text]
[ ui-animated-text words="pizza, chips, steak" animation="letters type" element="h2"]My favorite food is[/ui-animated-text]
[ ui-animated-text words="pizza, chips, steak" animation="letters rotate-3" element="h2"]My favorite food is[/ui-animated-text]
[ ui-animated-text words="pizza, chips, steak" animation="letters scale" element="h2"]My favorite food is[/ui-animated-text]