Using Components

User Guide → Using Components

Using Components

MarkBind provides a number of components (e.g., expandable panels, tabbed displays, navigation bars, etc.) that you can use to enhance the appearance/behavior of your pages.

To use a component, just use the corresponding markup in your file. For example, to create a Panel, you just need to use the markup:

<panel header="Click to expand" type="seamless">
  Panel Content.
</panel>

Badges

CODE:

Normal:
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>
<br>Pills:
<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-secondary">Secondary</span>
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-danger">Danger</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-light">Light</span>
<span class="badge badge-pill badge-dark">Dark</span>

OUTPUT:

Normal: Primary Secondary Success Danger Warning Info Light Dark
Pills: Primary Secondary Success Danger Warning Info Light Dark

You can use Badges in combination with headings, buttons, links, etc.

CODE:

Links:
<a href="#" class="badge badge-primary">Primary</a>
<a href="#" class="badge badge-pill badge-warning">Warning</a>

Buttons:
<button type="button" class="btn btn-primary">
  Difficulty Level <span class="badge badge-light">4</span>
</button>

Headings:

### Feature X <span class="badge badge-danger">beta</span> {.no-index}
##### Feature Y <span class="badge badge-pill badge-success">stable</span> {.no-index}

OUTPUT:

Links: Primary Warning

Buttons:

Headings:

Feature X beta

Feature Y stable

You can refer to Bootstrap documentation to find more information about Badges.

<span class="badge badge-primary">Primary</span>
<span class="badge badge-pill badge-success">Success</span>
<button type="button" class="btn btn-primary">
  Difficulty Level <span class="badge badge-light">4</span>
</button>

Primary Success

Feature Y stable

Boxes

Boxes come with different built-in types.

CODE:

<box>
    default
</box>
<box type="info">
    info
</box>
<box type="warning">
    warning
</box>
<box type="success">
    success
</box>
<box type="important">
    important
</box>
<box type="wrong">
    wrong
</box>
<box type="tip">
    tip
</box>
<box type="definition">
    definition
</box>
<box type="info" dismissible>
    dismissible info
</box>
<box type="success" header="#### Header :rocket:" icon-size="2x">

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  <box type="warning" header="You can use **markdown** here! :pizza:" dismissible>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </box>
</box>

OUTPUT:

default
info
warning
success
important
wrong
tip
definition
dismissible info

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

You can use markdown here! 🍕

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Markbind also supports a light color scheme for boxes

CODE:

<box light>
    default light
</box>
<box type="info" light>
    info light
</box>
<box type="warning" light>
    warning light
</box>
<box type="success" light>
    success light
</box>
<box type="important" light>
    important light
</box>
<box type="wrong" light>
    wrong light
</box>
<box type="tip" light>
    tip light
</box>
<box type="definition" light>
    definition light
</box>
<box type="definition" header="##### Header markdown :rocket:" light>
    definition light with header markdown
</box>

OUTPUT:

default light
info light
warning light
success light
important light
wrong light
tip light
definition light
Header markdown 🚀
definition light with header markdown

MarkBind also supports a seamless style of boxes

As light and seamless are mutually exclusive styles, light takes priority over seamless.

CODE:

<box seamless>
    default seamless
</box>
<box type="info" seamless>
    info seamless
</box>
<box type="warning" seamless>
    warning seamless
</box>
<box type="success" seamless>
    success seamless
</box>
<box type="important" seamless>
    important seamless
</box>
<box type="wrong" seamless>
    wrong seamless
</box>
<box type="tip" seamless>
    tip seamless
</box>
<box type="definition" seamless dismissible>
    dismissible definition seamless
</box>
<box type="definition" header="##### Header markdown :rocket:" seamless>
    success seamless with header markdown
</box>

OUTPUT:

default seamless
info seamless
warning seamless
success seamless
important seamless
wrong seamless
tip seamless
dismissible definition seamless
Header markdown 🚀
success seamless with header markdown

You can further customize the Box's appearance.

CODE:

<box background-color="#ffca6a" border-color="grey" border-left-color="#8b5a01">
default type, styled as an orange box with a brown left border
</box>
<box type="info" color="red" icon=":rocket:">

info, with a custom markdown rocket icon and `red` colored text.

You can use any inline markdown in the `icon` property.
</box>

OUTPUT:

default type, styled as an orange box with a brown left border
🚀

info, with a custom markdown rocket icon and red colored text.

You can use any inline markdown in the icon property.

You can remove the background, icon and borders of preset styles.

CODE:

<box no-icon no-background type="success">
    success box without a tick icon and backgound
</box>

<box no-border type="definition" light>
    definition type box, light style without border
</box>

OUTPUT:

success box without a tick icon and backgound
definition type box, light style without border

Note

Custom styles ( background-color, border-color, border-left-color, icon ) as introduced in the previous section, takes precedence over the no-background, no-border, no-icon attributes.

You can also use icons, resize them and change their color accordingly.

CODE:

<box type="success" icon=":fas-camera:">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit
</box>
<box type="warning" icon=":fas-camera:" icon-size="2x">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</box>
<box type="definition" icon=":fas-camera:" icon-size="3x">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</box>
<box type="info" icon=":fas-camera:" icon-color="red" icon-size="3x">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</box>

OUTPUT:

Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Options

Name Type Default Description
background-color String null
border-color String null
border-left-color String null Overrides border-color for the left border.
color String null Color of the text.
dismissible Boolean false Adds a button to close the box to the top right corner.
icon [S] String null Inline MarkDown text of the icon displayed on the left.
icon-size String null Resizes the icon. Supports integer-scaling of the icon dimensions e.g. 2x, 3x, 4x, etc.
icon-color String null Color of the icon.
header [S]
heading
(deprecated)
String null Markdown text of the box header.
type String '' Supports: info, warning, success, important, wrong, tip, definition, or empty for default.
light Boolean false Uses a light color scheme for the box.
seamless Boolean false Uses a seamless style for the box. If light is specified, this style will not be activated.
no-border Boolean false Removes border, except if styled by border-color or border-left-color.
no-backgound Boolean false Removes background, except if styled by backgound-color option.
no-icon Boolean false Removes icon, except if icon is displayed via icon option.
<box type="warning">
  warning
</box>
default
info
warning
success
important
wrong
tip
definition

Diagrams

You can use the PlantUML syntax to add diagrams.

Java and Graphviz must be installed to use this feature

  • Java 8 or later (required to run the PlantUML JAR executable)
  • Graphviz v2.38 or later (required to generate all diagrams)

CODE:

<puml width="300">
@startuml
alice -> bob ++ : hello
bob -> bob ++ : self call
bob -> bib ++  #005500 : hello
bob -> george ** : create
return done
return rc
bob -> george !! : delete
return success
@enduml
</puml>

OUTPUT:

Alternatively, a PlantUML diagram can be specified in a separate .puml file and inserted into a page using a <puml> tag.

CODE:

diagrams/sequence.puml:

@startuml
alice -> bob ++ : hello
bob -> bob ++ : self call
bob -> bib ++  #005500 : hello
bob -> george ** : create
return done
return rc
bob -> george !! : delete
return success
@enduml

in another file:

<puml src="diagrams/sequence.puml" width="300"></puml>

OUTPUT:

The full PlantUML syntax reference can be found at plantuml.com/guide

More examples


Options

Name Type Description
alt string The alternative text of the diagram.
height string The height of the diagram in pixels.
name string The name of the output file.
src string The URL of the diagram if your diagram is in another .puml file.
The URL can be specified as absolute or relative references. More info in: Intra-Site Links
width string The width of the diagram in pixels.
If both width and height are specified, width takes priority over height. It is to maintain the diagram's aspect ratio.
<puml width=300>
@startuml
alice -> bob ++ : hello
bob -> bob ++ : self call
@enduml
</puml>

Sequence Diagram:

Use Case Diagram:

Class Diagram:

Activity Diagram:

Component Diagram:

State Diagram:

Object Diagram:

Gantt Diagram:

Entity Relation Diagram:

Ditaa Diagram:

Archimate Diagram:


You can use Dropdowns as a top level component.

CODE:

<!--Notice how header attribute supports inline MarkDown-->
<dropdown header="*Action*" type="primary">
  <li><a href="#dropdown" class="dropdown-item">Action</a></li>
  <li><a href="#dropdown" class="dropdown-item">Another action</a></li>
  <li><a href="#dropdown" class="dropdown-item">Something else here</a></li>
  <li role="separator" class="dropdown-divider"></li>
  <li><a href="#dropdown" class="dropdown-item">Separated link</a></li>
</dropdown>

<!-- For segmented dropdown, ignore header and add a "before" slot -->
<dropdown type="info">
  <button slot="before" type="button" class="btn btn-info">Segmented</button>
  <li><a href="#dropdown" class="dropdown-item">...</a></li>
</dropdown>

<!-- Right aligned list -->
<dropdown header="Right aligned list" type="primary" menu-align-right>
  <li><a href="#dropdown" class="dropdown-item">Something else here</a></li>
</dropdown>

OUTPUT:

You can also use Dropdowns as a nested component (e.g. part of a button group).

CODE:

<!-- In a button group -->
<div class="btn-group d-flex" role="group">
  <a href="#dropdown" class="btn btn-danger w-100" role="button">Left</a>
  <!-- With slots you can handle some elements as native bootstrap -->
  <dropdown class="w-100">
    <button slot="button" type="button" class="btn btn-warning dropdown-toggle w-100">
      Action
      <span class="caret"></span>
    </button>
    <ul slot="dropdown-menu" class="dropdown-menu">
      <li><a href="#dropdown" class="dropdown-item">Action</a></li>
      <li><a href="#dropdown" class="dropdown-item">Another action</a></li>
      <li><a href="#dropdown" class="dropdown-item">Something else here</a></li>
      <li role="separator" class="dropdown-divider"></li>
      <li><a href="#dropdown" class="dropdown-item">Separated link</a></li>
    </ul>
  </dropdown>
  <a href="#dropdown" class="btn btn-success w-100" role="button">Right</a>
</div>

OUTPUT:

You can also create multi-level submenus by nesting Dropdowns.

CODE:

<!-- Nest the dropdown syntax to create dropdown submenus -->
<dropdown header="*Multi-Level Dropdown*" type="primary">
  <li><a href="#dropdown" class="dropdown-item">Item</a></li>
  <li><a href="#dropdown" class="dropdown-item">Another item</a></li>
  <dropdown header="*Submenu*">
    <li><a href="#dropdown" class="dropdown-item">Item</a></li>
    <li><a href="#dropdown" class="dropdown-item">Another item</a></li>
  </dropdown>
</dropdown>

OUTPUT:

Options

Name Type Default Description
disabled Boolean false Whether Dropdown can be opened.
menu-align-right Boolean false Whether the dropdown list will be right-aligned.
header [S]
text
(deprecated)
String '' Dropdown button header text. (Supports inline MarkDown syntax)
type String default Supports: default, primary, danger, info, warning, success.

You may refer to this documentation regarding how you can use the Bootstrap buttons, and how to style them.

<dropdown header="Action" type="primary">
  <li><a href="#dropdown" class="dropdown-item">Action</a></li>
  <li><a href="#dropdown" class="dropdown-item">Another action</a></li>
  <li role="separator" class="dropdown-divider"></li>
  <li><a href="#dropdown" class="dropdown-item">Separated link</a></li>
</dropdown>


Modals

Modals are to be used together with the Trigger component for activation.

CODE:

More about <trigger for="modal:loremipsum">trigger</trigger>.
<modal header="**Modal header** :rocket:" id="modal:loremipsum">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
  magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</modal>
<br>
This is the same <trigger for="modal:loremipsum">trigger</trigger> as last one.

<trigger for="modal:centered">This is a trigger for a centered modal</trigger>.

<modal header="**Centered** :rocket:" id="modal:centered" center>
  Centered
</modal>

<trigger for="modal:ok-text">This is a trigger for a modal with a custom OK button</trigger>.

<modal header="OK button visible!" id="modal:ok-text" ok-text="Custom OK">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
  magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</modal>

OUTPUT:

More about trigger.


This is the same trigger as last one.

This is a trigger for a centered modal.

This is a trigger for a modal with a custom OK button.

More about triggers


Options

Name type Default Description
header [S]
title
(deprecated)
String '' Header of the Modal component. Supports inline markdown text.
footer
modal-footer
(deprecated)
Slot empty Specifying this will override the ok-text attribute, and the OK button will not render.
ok-text String '' Text for the OK button.
effect String zoom Supports: zoom, fade.
id String Used by Trigger to activate the Modal by id.large
small Boolean false Creates a small Modal.
large Boolean false Creates a large Modal.
center Boolean false Vertically centers the modal (in addition to the horizontal centering by default).
backdrop Boolean true Enables closing the Modal by clicking on the backdrop.
Click <trigger trigger="click" for="modal:unused">here</trigger> to open a modal.
<modal header="Modal header" id="modal:unused">
    Modal content
</modal>

Hover here to open a modal.


Navbar allows visitors of your website to navigate through pages easily.

Navbars support link highlighting; link highlighting can be customised by specifying rules.

  • Define default-highlight-on in <navbar> to specify fallback highlight rules.
  • Define data-highlight in <a> tags with the class nav-link or dropdown-item to specify individual highlight rules.

Note: Navbars should be placed within a header file to ensure that they are correctly positioned at the top of the page, above the site navigation and page navigation menus.

CODE:

<navbar type="primary">
  <!-- Brand as slot -->
  <a slot="brand" href="/" title="Home" class="navbar-brand">MarkBind</a>
  <li><a href="/userGuide/usingComponents.html#navbars" class="nav-link">Highlighted Link</a></li>
  <!-- You can use dropdown component -->
  <dropdown header="Dropdown" class="nav-link">
    <li><a href="#navbar" class="dropdown-item">Option</a></li>
  </dropdown>
  <!-- For right positioning use slot -->
  <li slot="right">
    <a href="https://github.com/MarkBind/markbind" target="_blank" class="nav-link">Fork...</a>
  </li>
</navbar>

<navbar type="dark">
  <!-- Brand as slot -->
  <a slot="brand" href="/" title="Home" class="navbar-brand">MarkBind</a>
  <li><a href="/userGuide/usingComponents.html#navbars" class="nav-link">Highlighted Link</a></li>
  <!-- You can use dropdown component -->
  <dropdown header="Dropdown" class="nav-link">
    <li><a href="#navbar" class="dropdown-item">Option</a></li>
  </dropdown>
  <!-- For right positioning use slot -->
  <li slot="right">
    <a href="https://github.com/MarkBind/markbind" target="_blank" class="nav-link">Fork...</a>
  </li>
</navbar>

<navbar type="light">
  <!-- Brand as slot -->
  <a slot="brand" href="/" title="Home" class="navbar-brand">MarkBind</a>
  <li><a href="/userGuide/usingComponents.html#navbars" class="nav-link">Highlighted Link</a></li>
  <!-- You can use dropdown component -->
  <dropdown header="Dropdown" class="nav-link">
    <li><a href="#navbar" class="dropdown-item">Option</a></li>
  </dropdown>
  <!-- For right positioning use slot -->
  <li slot="right">
    <a href="https://github.com/MarkBind/markbind" target="_blank" class="nav-link">Fork...</a>
  </li>
</navbar>

OUTPUT:

Options

Name Type Default Description
type String primary Supports: primary, dark, light, none.
default-highlight-on String sibling-or-child Supports: sibling-or-child, sibling, child, exact, none. Specifies link highlight rules for navbars.

If you wish to further customize your navbar beyond the primary, dark, and light theme colors, specify the type="none" attribute and insert your own custom styles or use built-in background styles via the add-class attribute.

Navbar Link Highlighting

<head-bottom>
  <link rel="stylesheet" href="/css/main.css">
</head-bottom>

<header fixed>
  <navbar type="dark">
    <a slot="brand" href="/index.html" title="Home" class="navbar-brand"><img src="/images/logo-darkbackground.png" height="20"></a>
    <li><a highlight-on="exact" href="/index.html" class="nav-link">HOME</a></li>
    <div tags="environment--ug"><li><a highlight-on="sibling-or-child" href="/userGuide/index.html" class="nav-link">USER GUIDE</a></li></div>
    <div tags="environment--dg"><li><a highlight-on="sibling-or-child" href="/devGuide/index.html" class="nav-link">DEVELOPER GUIDE</a></li></div>
    <li><a highlight-on="exact" href="/showcase.html" class="nav-link">SHOWCASE</a></li>
    <li><a highlight-on="exact" href="/about.html" class="nav-link">ABOUT</a></li>
    <li>
      <a href="https://github.com/MarkBind/markbind" target="_blank" class="nav-link"><md>:fab-github:</md></a>
    </li>
    <li slot="right">
      <form class="navbar-form">
        <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback" menu-align-right></searchbar>
      </form>
    </li>
  </navbar>
</header>

Highlight Options

Name Description
child Highlights link if URL in address bar is a child of the link. E.g foo/bar is a child of foo.
sibling Highlights link if URL in address bar is a sibling of the link. E.g foo/bar and foo/bear are siblings.
sibling-or-child Highlights link if URL in address bar is a sibling or child of the link.
exact Highlights link if URL in address bar exactly matches link.
none No highlighting.
<navbar type="primary">
  <!-- Brand as slot -->
  <a slot="brand" href="/" title="Home" class="navbar-brand">MarkBind</a>
  <li><a href="/userGuide/usingComponents.html#navbars" class="nav-link">Highlighted Link</a></li>
  <!-- You can use dropdown component -->
  <dropdown header="Dropdown" class="nav-link">
    <li><a href="#navbar" class="dropdown-item">Option</a></li>
  </dropdown>
  <!-- For right positioning use slot -->
  <li slot="right">
    <a href="https://github.com/MarkBind/markbind" target="_blank" class="nav-link">Fork...</a>
  </li>
</navbar>

Mobile page and site navigation menus

The navbar component also provides access to MarkBind's site navigation and page navigation menu components if used in the page's layout. No additional setup is required!

If you are viewing the documentation on a larger device, resize the window to see what it looks like.

Alternatively, if you want to display e.g. adding an image to the site navadditional content in these navigation menus, the navbar is also able to "pull in" any container element with a html id of "site-nav" or "page-nav". You may refer to the layouts section for an example.

The navbar component auto-detects if the MarkBind's navigation components or your element containers has any <a> tags in particularlinks.
If absent, the navigation buttons to open the menus are automatically hidden.

Mobile navigation menu button placement

If you wish to alter the button placement on the navbar, you may use the <site-nav-button /> and <page-nav-button /> components in the lower-navbar slot.

By default, if the lower-navbar slot is not specified, the site and page navigation buttons are simply placed as such.

<navbar>
  <!-- Any normal navbar items -->
  <a slot="brand" href="/" title="Home" class="navbar-brand">MarkBind</a>
  <li><a href="/userGuide/usingComponents.html#navbars" class="nav-link">Highlighted Link</a></li>
  <!-- Use slot to wrap the buttons in the lower navbar -->
  <div slot="lower-navbar" class="nav-menu-container">
    <site-nav-button />
    <page-nav-button />
  </div>
</navbar>
Component Description
page-nav-button Pulls any element with an identifier, id=page-nav into the menu. If no such element exists, it pulls any page navigation menu used in the layout.
site-nav-button Pulls any element with an identifier, id=site-nav into the menu. If no such element exists, it pulls all site navigation menu components used in the layout.

Styling the mobile page and site navigation menus

You may also wish to style your navigation content differently on mobile view. By default, MarkBind already provides some reasonable overrides for smaller screens, applied over any styles you might have for the mobile navigation content identified above.

Css class attached to the root navigation element
.mb-mobile-nav {
    display: block !important;
    margin: 0 !important;
    border: none !important;
    padding: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
}

If you require greater customisation, you may simply compose the respective selectors with the .mb-mobile-nav element.

Example

#site-nav.mb-mobile-nav {
  /* Be sure to add the !important css rule when overriding .mb-mobile-nav's properties! */
  border: 1px solid black !important;
  /* For other properties, there is no need. */
  color: red;
}

Refer to the layouts section to find out how to add custom css files to a page!


Panels

Panel is a flexible container that supports collapsing and expanding its content. It is expandable by default.

CODE:

<panel header="This is your header for a Panel, click me to expand!">
  Lorem ipsum ...
</panel>

OUTPUT:

This is your header for a Panel, click me to expand!


With minimized attribute, panel is minimized into an inline block element. The alt attribute is for you to specify the minimized block header.

CODE:

<panel header="How to cultivate a tomato plant at home" alt="Tomatoes" minimized>
  Lorem ipsum ...
</panel>

OUTPUT:

With expanded attribute, you can set the panels to be expanded when loaded in.

CODE:

<panel header="Have your readers click less to see the Panel's contents" expanded>
  Lorem ipsum ...
</panel>

OUTPUT:

Have your readers click less to see the Panel's contents

Lorem ipsum ...

With the expand-headerless attribute, you can hide the panel header when it is expanded.

CODE:

<panel header="This header will only show when the Panel is collapsed" expand-headerless>
  Lorem ipsum ...
</panel>

OUTPUT:

This header will only show when the Panel is collapsed


With the peek attribute, you may showcase part of your content without expanding the panel.

CODE:

<panel header="Give your readers a peek of the content without expanding Panel" peek>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
  magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  Curabitur ornare ipsum eu ex congue egestas. Maecenas pretium nibh sed enim ornare finibus. Mauris quis metus 
  facilisis, mattis tellus nec, pulvinar mi. Quisque at vehicula lectus. Ut ac lacus mi. Donec mattis nec velit 
  eget tincidunt. Maecenas vel mauris mattis nisl tempor sollicitudin. Orci varius natoque penatibus et magnis 
  dis parturient montes, nascetur ridiculus mus. Duis tincidunt diam eu dolor pellentesque, eget dignissim tortor 
  pellentesque. 
</panel>

OUTPUT:

Give your readers a peek of the content without expanding Panel

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Curabitur ornare ipsum eu ex congue egestas. Maecenas pretium nibh sed enim ornare finibus. Mauris quis metus facilisis, mattis tellus nec, pulvinar mi. Quisque at vehicula lectus. Ut ac lacus mi. Donec mattis nec velit eget tincidunt. Maecenas vel mauris mattis nisl tempor sollicitudin. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis tincidunt diam eu dolor pellentesque, eget dignissim tortor pellentesque.

Panel provides many types that change its appearance.

CODE:

<panel header="**light type panel (DEFAULT)**" type="light" minimized>
  ...
</panel>
<panel header="**dark type panel**" type="dark" minimized>
  ...
</panel>
<panel header="**primary type panel**" type="primary" minimized>
  ...
</panel>
<panel header="**secondary type panel**" type="secondary" minimized>
  ...
</panel>
<panel header="**info type panel**" type="info" minimized>
  ...
</panel>
<panel header="**danger type panel**" type="danger" minimized>
  ...
</panel>
<panel header="**warning type panel**" type="warning" minimized>
  ...
</panel>
<panel header="**success type panel**" type="success" minimized>
  ...
</panel>
<panel header="**seamless type panel**" type="seamless" minimized>
  ...
</panel>
<panel header="**minimal type panel**" type="minimal" minimized>
  ...
</panel>

OUTPUT:

Show/Hide buttons using no-switch or no-close.

CODE:

<panel header="This panel does not have a switch button" no-switch>
  ...
</panel>
<panel header="This panel does not have a close button" no-close>
  ...
</panel>
<panel header="This panel does not have either buttons" no-close no-switch>
  ...
</panel>

OUTPUT:

This panel does not have a switch button


This panel does not have a close button


This panel does not have either buttons


Use markdown in the header (only inline level markdown are supported).

CODE:

<panel header="**Bold text** :rocket: ![](https://markbind.org/images/logo-lightbackground.png =x20)" type="seamless">
  ...
</panel>

OUTPUT:

Bold text 🚀


If src attribute is provided, the panel will take content from the src specified and add it to the Panel body.

CODE:

<panel header="Content loaded in from 'src'" src="extra/loadContent.html#fragment" minimized></panel>

OUTPUT:

If popup-url attribute is provided, a popup button will be shown. If clicked, it opens the specified url in a new window.

CODE:

<panel header="Try clicking on my pop-up button" popup-url="/userGuide/syntax/extra/loadContent.html">
  This panel has a popup.
</panel>

OUTPUT:

Try clicking on my pop-up button


If preload attribute is provided, the panel body will load the HTML when the page renders instead of after being expanded.

CODE:

<panel header="Right click and inspect my HTML before expanding me!" src="extra/loadContent.html#fragment" preload>
  <p>You should be able to find this text before expanding the Panel.</p>
</panel>

OUTPUT:

Right click and inspect my HTML before expanding me!

You should be able to find this text before expanding the Panel.

Loading...

You can nest Panels or other components within a Panel.

CODE:

<panel header="Parent Panel">
  <panel header="Level 1 Nested Panel">
    <panel header="Level 2 Nested Panel">
      <tip-box type="success">
        I'm a nested tip-box
      </tip-box>
      <panel header="Level 3 Nested Panel" type="minimal">
        minimal-type panel
      </panel>
    </panel>
  </panel>
  <panel header="Level 1 Nested Panel" type="info">
    Some Text
  </panel>
</panel>

OUTPUT:

Parent Panel


Options

Name Type Default Description
header [S] String '' The clickable text on the Panel's header. Supports MarkDown text.
alt String Panel header The clickable text on the minimised Panel. Supports MarkDown text.
expandable Boolean true Whether Panel is expandable.
expanded Boolean false Whether Panel is expanded or collapsed when loaded in.
minimized Boolean false Whether Panel is minimized.
expand-headerless Boolean false Whether to hide the header text when the Panel is expanded.
peek Boolean false Whether to show part of the content when the Panel is collapsed.
no-close Boolean false Whether to show the close button.
no-switch Boolean false Whether to show the expand switch.
bottom-switch Boolean true Whether to show an expand switch at the bottom of the panel. Independent of no-switch.
popup-url String The url that the popup window will navigate to. The url can be absolute or relative.
preload Boolean false Whether the content is loaded immediately from src.
src String The url to the remote page to be loaded as the content of the panel.
type String light The type or color scheme of the panel (single).
Supports: light, dark, primary, secondary, info, success, warning, danger, seamless, minimal.
<panel header="primary type panel" type="primary" >
  ...
</panel>

minimal type panel

seamless type panel


info type panel

...

danger type panel


warning type panel


success type panel



Pictures

A pic component allows you to add captions below the image.

CODE:

<pic src="https://markbind.org/images/logo-lightbackground.png" width="300" alt="Logo">
  MarkBind Logo
</pic>

<pic src="https://markbind.org/images/logo-lightbackground.png" width="300" alt="Logo" eager>
  MarkBind Logo
</pic>

OUTPUT:

Logo MarkBind Logo Logo MarkBind Logo

Options

Name Type Default Description
alt string This must be specified.
The alternative text of the image.
height string The height of the image in pixels.
src string This must be specified.
The URL of the image.
The URL can be specified as absolute or relative references. More info in: Intra-Site Links
width string The width of the image in pixels.
If both width and height are specified, width takes priority over height. It is to maintain the image's aspect ratio.
eager boolean false The <pic> component lazy loads its images by default.
If you want to eagerly load the images, simply specify this attribute.
<pic src="https://markbind.org/images/logo-lightbackground.png" width="300" alt="Logo">
  MarkBind Logo
</pic>
Logo MarkBind Logo

Popovers

CODE:

<popover effect="fade" content="Lorem ipsum dolor sit amet" placement="top">
  <button class="btn btn-secondary">Popover on top</button>
</popover>
<popover effect="fade" content="Lorem ipsum dolor sit amet" placement="left">
  <button class="btn btn-secondary">Popover on left</button>
</popover>
<popover effect="fade" content="Lorem ipsum dolor sit amet" placement="right">
  <button class="btn btn-secondary">Popover on right</button>
</popover>
<popover effect="fade" content="Lorem ipsum dolor sit amet" placement="bottom">
  <button class="btn btn-secondary">Popover on bottom</button>
</popover>
<hr>
<h4 class="no-index">Header</h4>
<popover effect="fade" header="Header" content="Lorem ipsum dolor sit amet" placement="top">
  <button class="btn btn-secondary">Popover on top</button>
</popover>
<popover effect="fade" header="Header" content="Lorem ipsum dolor sit amet" placement="left">
  <button class="btn btn-secondary">Popover on left</button>
</popover>
<popover effect="fade" header="Header" content="Lorem ipsum dolor sit amet" placement="right">
  <button class="btn btn-secondary">Popover on right</button>
</popover>
<popover effect="fade" header="Header" content="Lorem ipsum dolor sit amet" placement="bottom">
  <button class="btn btn-secondary">Popover on bottom</button>
</popover>
<hr />
<h4 class="no-index">Trigger</h4>
<p>
  <popover effect="scale" header="Header" content="Lorem ipsum dolor sit amet" placement="top" trigger="hover">
    <button class="btn btn-secondary">Mouseenter</button>
  </popover>
</p>
<h4 class="no-index">Markdown</h4>
<p>
  <popover effect="scale" header="**Emoji header** :rocket:" content="!!emoji!! content :cat:">
    <button class="btn btn-secondary">Hover</button>
  </popover>
</p>
<h4 class="no-index">Content using slot</h4>
<popover effect="scale" header="**Emoji header** :rocket:">
  <div slot="content">
    This is a long content...
  </div>
  <button class="btn btn-secondary">Hover</button>
</popover>
<br />
<br />
<h4 class="no-index">Wrap Text</h4>
<popover header="false" content="Nice!">What do you say</popover>

OUTPUT:

Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet

Header

HeaderLorem ipsum dolor sit amet HeaderLorem ipsum dolor sit amet HeaderLorem ipsum dolor sit amet HeaderLorem ipsum dolor sit amet

Trigger

HeaderLorem ipsum dolor sit amet

Markdown

Emoji header 🚀emoji content 🐱

Content using slot

Emoji header 🚀
This is a long content...


Wrap Text

falseNice!What do you say

Using trigger for Popover:

CODE:

More about <trigger for="pop:trigger_id">trigger</trigger>.
<popover id="pop:trigger_id" content="This popover is triggered by a trigger"></popover>
<br>
This is the same <trigger for="pop:trigger_id">trigger</trigger> as last one.

OUTPUT:

More about trigger. This popover is triggered by a trigger
This is the same trigger as last one.

More about triggers


Options

Name Type Default Description
trigger String hover How the Popover is triggered.
Supports: click, focus, hover.
header
title
(deprecated)
String '' Popover header, supports inline markdown text.
content String '' Popover content, supports inline markdown text.
placement String top How to position the Popover.
Supports: top, left, right, bottom.
Hover over the <trigger for="pop:context-target">keyword</trigger> to see the popover.

<popover id="pop:context-target" header="Popover header" placement="top">
<div slot="content">

description :+1:

</div>
</popover>

Hover over the keyword to see the popover.

Popover header

description 👍


Questions and Quizzes

Question and quiz components provide an easy way to test readers on the relevant content topic in the page.

Introduction

Question components (<question>) can be one of the following types: MCQ, Checkbox or Text.

In all cases, content directly inserted in between <question>...</question> will be inserted into the question body.

You can also insert markdown into the header or hint box, by using the header and hint attributes respectively. Click the hint button below to see how the hint box turns out!

CODE:

Header and Hint syntax
<!-- Insert markdown into the header and hint using the respective attributes -->
<question type="checkbox" header="Which of the following is correct?" hint="Think out of the box! :fas-box:">

  <!-- Anything you place directly under a question not in a slot is inserted into the question body! -->
  <small>Adapted from [Daily Mail](https://www.dailymail.co.uk/femail/article-4702868/Can-pass-intelligence-test.html)
  </small>
  </pic>

  <!-- Several hidden checkbox q-option components explained later -->
</question>

OUTPUT:

Which of the following is correct?

math question image

Adapted from Daily Mail

If you require more expressive formatting for your header or hint markup, you can use the <div slot="header"> and <div slot="hint"> slots. Expand the panel below to see an example!

Header and Hint example with slots

Placing the question into the header is entirely optional. You may also wish to include the question directly in the question body, omitting the header entirely.

Options and Slots common to all question types

Name Type Default Description
type String '' The type of question. Supports mcq, checkbox or text.
header [S] String '' The markup to insert into the question header. The header is omitted if this is not provided.
hint [S] String '' The content to display in the hint box.

MCQ and Checkbox Questions

MCQ and checkbox questions are indicated with the type="mcq" or type="checkbox" attribute.

In both instances, you can include the possible answers using the <q-option> component, placed anywhere inside the if you wish, you could place it in the header mentioned above as well!question. To indicate the correct option(s), add the <q-option correct> attribute.

Optionally, you can provide the reason for the particular option using the <q-option reason="..."> attribute, or the <div slot="reason"> slot for more expressive formatting, similar to the hint and header options and slots.

MCQ Questions

CODE:

<question type="mcq" header="Which of these **contradicts** the heuristics recommended when creating test cases with multiple inputs?">
  <!-- Insert the reason for the option using the reason attribute -->
  <q-option reason="This is **correct**. We need to figure out if a positive test case works!">
    Each valid test input should appear at least once in a test case that doesn’t have any invalid inputs.
  </q-option>
  <q-option>
    It is ok to combine valid values for different inputs.
  </q-option>
  <q-option>
    No more than one invalid test input should be in a given test case.
  </q-option>
  <!-- Use the 'correct' attribute to indicate an option as correct. -->
  <q-option correct>
    All invalid test inputs must be tested together.
    <!-- Optionally, you may use a reason slot instead of a reason attribute. -->
    <div slot="reason">
    If you test all invalid test inputs together, you will not know if each one of the invalid inputs are handled
    correctly by the SUT.
    This is because most SUTs return an error message upon encountering the first invalid input.
    </div>
  </q-option>
  <div slot="hint">
  How do you figure out which inputs are wrong? (or correct)
  </div>
</question>

OUTPUT:

Which of these contradicts the heuristics recommended when creating test cases with multiple inputs?

Each valid test input should appear at least once in a test case that doesn’t have any invalid inputs.
It is ok to combine valid values for different inputs.
No more than one invalid test input should be in a given test case.
All invalid test inputs must be tested together.
MCQ questions can have multiple correct options!

Checkbox Questions

CODE:

<question type="checkbox" hint="Use your calculator! :fas-calculator:">

  ##### Which of the following is true?

  <br>
  <q-option reason="lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum">
    1 + 1 = 11
  </q-option>
  <q-option reason="Division by zero is **undefined**!">
    1 / 0 = infinity
  </q-option>
  <q-option correct>
  11 / 11 = 1
  </q-option>
</question>

OUTPUT:

Which of the following is true?

q-option Options and Slots

Name Type Default Description
correct Boolean false Whether this option (placed under either a MCQ or checkbox question) is correct. You may have multiple correct answers in either case.
reason [S] String '' The explanation markup to display for the option once the answer is checked.

Text Questions

Text questions are specified with the type="text" attribute.

Unlike MCQ and checkbox questions, answer checking is performed by providing keywords to check for in the user's answer through the keywords attribute. If no keywords are provided, the answer will always be marked as correct when placed in quizzes.

Keywords are validated by simply looking for the keyword as a pattern in the user's answer! This works well for some When does validation work?cases When the keywords specified are rather long (eg. requirements), it reduces the chance that this keyword can be mistakenly validated.

In contrast, something short and common like take which can easily be part of another word (eg. mis-take-nly) would be mistakenly validated.
and not others.

You can provide your answer in the answer attribute, or similarly, the <div slot="answer"> slot for more expressive formatting.

CODE:

<question type="text" header="Which country did the Hawaiian pizza originate from?"
          keywords="hawaii" threshold="0.5" answer="It originated from Hawaii!">
  <div slot="hint">

  Watch some pizza commercials! :tv:

  :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza:
  </div>
</question>

OUTPUT:

Which country did the Hawaiian pizza originate from?

Since the validation is imperfect, the minimum proportion of keywords that need to be matched can also be changed using the threshold attribute.

If you don't want to validate the answer at all, you may also omit the keywords attribute entirely. Doing so also always marks the question as correct inside quizzes.

Text Question specific Options and Slots

Name Type Default Description
keywords String '' Comma delimited string of keywords or phrases to match the user's answer against.
threshold Number 0.5 Minimum proportion of keywords that have to be matched in the user's answer for the answer to be marked as correct.
answer [S] String '' The answer or explanation to display when the user clicks the check button.

Deprecation notes

  • The old has-input attributes translate to type="text", but will be deprecated in a future version.
  • <question>s without a type (or an unrecognised one) will always be marked correct when placed in quizzes.

Quizzes

You can also build a series of questions out of multiple <question> components.

Simply place the <question> components you want to include into the <quiz> component! No extra configuration is needed.

CODE:

<quiz>
  <question type="mcq">...</question>
  <question type="checkbox">...</question>
  <question type="text">...</question>
</quiz>

OUTPUT:

Click start to begin

0 questions


Quiz Options and Slots

Name Type Default Description
intro String '' Quiz intro markup above the question count.
intro Slot Click start to begin Quiz intro markup. Overrides the intro attribute if both are present.
MCQ and Checkbox questions
<!-- use type="checkbox" for checkbox questions -->

<question type="mcq" header="Which of these **contradicts** the heuristics recommended when creating test cases with multiple inputs?">
  <!-- Insert the reason for the option using the reason attribute -->
  <q-option reason="This is **correct**. We need to figure out if a positive test case works!">
    Each valid test input should appear at least once in a test case that doesn’t have any invalid inputs.
  </q-option>
  <q-option>
    It is ok to combine valid values for different inputs.
  </q-option>
  <q-option>
    No more than one invalid test input should be in a given test case.
  </q-option>
  <!-- Use the 'correct' attribute to indicate an option as correct. -->
  <q-option correct>
    All invalid test inputs must be tested together.
    <!-- Optionally, you may use a reason slot instead of a reason attribute. -->
    <div slot="reason">
    If you test all invalid test inputs together, you will not know if each one of the invalid inputs are handled
    correctly by the SUT.
    This is because most SUTs return an error message upon encountering the first invalid input.
    </div>
  </q-option>
  <div slot="hint">
  How do you figure out which inputs are wrong? (or correct)
  </div>
</question>

Text questions

<question type="text" header="Which country did the Hawaiian pizza originate from?"
          keywords="hawaii" threshold="0.5" answer="It originated from Hawaii!">
  <div slot="hint">

  Watch some pizza commercials! :tv:

  :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza:
  </div>
</question>

Quiz
<quiz>
  <question type="mcq">...</question>
  <question type="checkbox">...</question>
  <question type="text">...</question>
</quiz>

Click start to begin

0 questions


Search Bars

The searchbar component allows users to search all headings within any page on the site.

CODE:

<searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback"></searchbar>
<searchbar :data="searchData" placeholder="Search (Right-aligned dropdown)" :on-hit="searchCallback" menu-align-right></searchbar>

To use the searchbar within a navbar, add the following markup to your file. The searchbar can be positioned using the slot attribute for the list. The following markup adds a searchbar to the right side of the navbar with appropriate styling.

<li slot="right">
  <form class="navbar-form">
    <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback"></searchbar>
  </form>
</li>

OUTPUT:

Enter a search term (eg. 'search bar') to see the search result dropdown.


Options

Name Type Default Description
algolia Boolean false Whether the searchbar should be connected to Algolia DocSearch.
data Array The local data source for suggestions. Expected to be a primitive array. To use MarkBind's search functionality, set this value to "searchData".
menu-align-right Boolean false Whether the search bar's dropdown list will be right-aligned.
on-hit Function A callback function when you click or hit return on an item. To use MarkBind's search functionality, set this value to "searchCallback".
placeholder String '' The placeholder text shown when no keywords are entered in the search bar.

Note: If you are using MarkBind's search functionality, then enableSearch must be set to true in site.json.

See: User Guide: Site Configuration → enableSearch.

Related topic: User Guide: Making the Site Searchable.

Related topic: User Guide: Using Plugins → Algolia: Enabling Algolia DocSearch.

<searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback" menu-align-right></searchbar>
<li slot="right">
  <form class="navbar-form">
    <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback"></searchbar>
  </form>
</li>

Tabs

CODE:

<tabs>
  <tab header="First tab">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper ultrices lobortis.
  </tab>
  <tab header="Disabled second tab :x:" disabled>
  </tab>
  <tab header="Tab not printed" class="d-print-none">
    This tab will not be printed.
  </tab>
  <tab-group header="Third tab group :milky_way:">
    <tab header="Stars :star:">
      Some stuff about stars ...
    </tab>
    <tab header="Disabled Moon :new_moon:" disabled>
    </tab>
  </tab-group>
  <tab-group header="Disabled fourth tab group" disabled>
    <tab header="Hidden tab">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper ultrices lobortis.
    </tab>
  </tab-group>
</tabs>

OUTPUT:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper ultrices lobortis.

This tab will not be printed.
Third tab group 🌌
Some stuff about stars ...

Disabled fourth tab group
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper ultrices lobortis.

Options

tabs:

Name Type Default Description
active Number 0 Active Tab index (0-based)

tab:

Name Type Default Description
header String null Tab title.
disabled Boolean false Whether Tab is clickable and can be activated.

tab-group:

Name Type Default Description
header String null Tab Group title.
disabled Boolean false Whether Tab Group is clickable and can be activated.

Tabs, tab group and individual tab can be omitted during printing by adding bootstrap's display property class="d-print-none" to the respective components.

<tabs>
  <tab header="First tab">
    Content of the first tab
  </tab>
  <tab header="Second tab">
    Contents of the second tab
  </tab>
  <tab-group header="Third tab group :tv:">
    <tab header="Stars :star:">
      Some stuff about stars ...
    </tab>
    <tab header="Moon">
      Some stuff about the moon ...
    </tab>
  </tab-group>
</tabs>
Content of the first tab
Contents of the second tab
Third tab group 📺
Some stuff about stars ...
Some stuff about the moon ...

Thumbnails

A thumbnail component allows you to insert thumbnails using text, images, or icons.

CODE:

<thumbnail circle src="../../images/deer.jpg" size="100"/>
<thumbnail circle text=":book:" background="#dff5ff" size="100"/>
<thumbnail circle text="___CS___" background="#333" font-color="white" size="100"/>
<thumbnail circle text=":fas-book:" font-color="darkgreen" border="3px solid darkgreen" size="100"/>

<thumbnail src="../../images/deer.jpg" size="100"/>
<thumbnail text=":book:" background="#dff5ff" size="100"/>
<thumbnail text="___CS___" background="#333" font-color="white" size="100"/>
<thumbnail text=":fas-book:" font-color="darkgreen" border="3px solid darkgreen" size="100"/>

OUTPUT:

📖 CS 📖 CS

Options

Name Type Default Description
alt string This must be specified if src is specified
The alternative text of the image.
background string Specifies the background color.
Accepts any valid CSS background property
border string Specifies the border thickness, type, and color.
Accepts any valid CSS border property
circle boolean false If this option is enabled, the thumbnail will be circle shaped instead of square
font-color string The color of the text, affects normal text and icons (but not emojis)
font-size string Text size, defaults to half of size, affects text, icons and emojis
size string 100 The size of the thumbnail in pixels
src string The URL of the image.
The URL can be specified as absolute or relative references. More info in: Intra-Site Links
text string The text to use in the thumbnail, icons, emojis and markdown are supported here

If both text and src are specified, src will take higher priority.

<thumb circle src="https://markbind.org/images/logo-lightbackground.png" size="100"/>

Tooltips

CODE:

<tooltip content="Lorem ipsum dolor sit amet" placement="top">
  <button class="btn btn-secondary">Popover on top</button>
</tooltip>
<tooltip content="Lorem ipsum dolor sit amet" placement="left">
  <button class="btn btn-secondary">Popover on left</button>
</tooltip>
<tooltip content="Lorem ipsum dolor sit amet" placement="right">
  <button class="btn btn-secondary">Popover on right</button>
</tooltip>
<tooltip content="Lorem ipsum dolor sit amet" placement="bottom">
  <button class="btn btn-secondary">Popover on bottom</button>
</tooltip>
<hr />
Trigger
<p>
  <tooltip content="Lorem ipsum dolor sit amet" placement="top" trigger="click">
    <button class="btn btn-secondary">Click</button>
  </tooltip>
  <br />
  <br />
  <tooltip content="Lorem ipsum dolor sit amet" placement="top" trigger="focus">
    <input placeholder="Focus"></input>
  </tooltip>
</p>

**Markdown**:
<tooltip content="*Hello* **World**">
  <a href="">Hover me</a>
</tooltip>
<br />

**Free Text**:
<tooltip content="coupling is the degree of interdependence between software modules; a measure of how closely connected two routines or modules are; the strength of the relationships between modules."><i>coupling</i></tooltip>

OUTPUT:

Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
Trigger

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Markdown: Hello World Hover me

Free Text: coupling is the degree of interdependence between software modules; a measure of how closely connected two routines or modules are; the strength of the relationships between modules.coupling

Using trigger for Tooltip:

CODE:

More about <trigger for="tt:trigger_id">trigger</trigger>.
<tooltip id="tt:trigger_id" content="This tooltip triggered by a trigger"></tooltip>
<br>
This is the same <trigger for="tt:trigger_id">trigger</trigger> as last one.

OUTPUT:

More about trigger. This tooltip triggered by a trigger
This is the same trigger as last one.

More about triggers


Options

Name Type Default Description
trigger String hover How the tooltip is triggered.
Supports: click, focus, hover.
content String '' Text content of the tooltip.
placement String top How to position the tooltip.
Supports: top, left, right, bottom.
Hover <tooltip content="An explanation, **supports simple Markdown**">here</tooltip> to see a tooltip.

Hover An explanation, supports simple Markdownhere to see a tooltip.


A Site Navigation Menu (siteNav for short) can be used to show a road map of the main pages of your site.

Steps to add a siteNav:

  1. Format your siteNav as an unordered Markdown list
  2. Include it under a <site-nav> element.
  3. (Optional) To make siteNav accessible on smaller screens, you can use the <site-nav-button /> component in the navbar.

CODE:

<site-nav>
* [**Getting Started**](/userGuide/gettingStarted.html)
* **Authoring Contents** :expanded:
  * [Overview](/userGuide/authoringContents.html)
  * [Adding Pages](/userGuide/addingPages.html)
  * [MarkBind Syntax Overview](/userGuide/markBindSyntaxOverview.html)
  * [Formatting Contents](/userGuide/formattingContents.html)
  * [Using Components](/userGuide/usingComponents.html)
</site-nav>

OUTPUT:

MarkBind has styles nested lists with additional padding and smaller text sizes up to 4 nesting levels. Beyond that, you'd have to include your own styles.

Expanding menu items by default

You can append the :expanded: to a a menu item with sub menu-itemsparent menu item to make it expand by default. In the example above, * Docs :expanded: will make the menu item Docs expand by default.

A parent menu item that is also linked will not be collapsible e.g., the Search menu item in the above example.


A Page Navigation Menu (pageNav for short) a list of the current page's headings. Page navigation menus are only available for use in layouts.

Adding a pageNav

  1. Specify the smallest heading level you want to be included within the <frontmatter> of a page with The value default will use headingIndexingLevel within site.json."default" or a HTML defines six levels of headings, numbered from
    1 to 6.
    heading level
    .

    The default level uses the headingIndexingLevel property of your site configuration file.

  2. (Optional) You may also specify a page navigation title within <frontmatter> that will be placed at the top of the page navigation menu.

  3. Position the page navigation menu within your layout using the <page-nav /> component.

  4. (Optional) To make pageNav accessible on smaller screens, you can use the <page-nav-button /> component in the navbar.

Example In the page that you want to have page navigation, you may show only <h1> and <h2> headings in the pageNav, and set a custom pageNav title like so:

<frontmatter>
  pageNav: 2
  pageNavTitle: "Chapters of This Page"
</frontmatter>

Then, in your layout file, use the <page-nav /> component to position the pageNav.

Example Example usage of the <page-nav /> component

You can see an example of a Page Navigation Bar on the right side of this page.


Advanced Tips and Tricks

Richer formatting of attributes using slots

Most component attributes allow a richer form of formatting using slots, denoted by an attribute[S] superscript in the respective components' tables. In other cases, when the option is of type "Slot", only the slot option is available.

You can define such a slot within the component by adding a slot="slot_name" attribute to any element within the slot.

Example

CODE:

<panel expanded>
  <p slot="header" class="card-title">
    <i><strong>
      <span style="color:#FF0000;">R</span>
      <span style="color:#FF7F00;">A</span>
      <span style="color:#FFFF00;">I</span>
      <span style="color:#00FF00;">N</span>
      <span style="color:#0000FF;">B</span>
      <span style="color:#4B0082;">O</span>
      <span style="color:#9400D3;">W</span>
    </strong></i>
  </p>
  As shown in this panel, using the header slot
  allows you to customize the Panel's header using HTML.
</panel>

OUTPUT:

R A I N B O W

As shown in this panel, using the header slot allows you to customize the Panel's header using HTML.

Other examples of slots in use

Example Custom modal header

CODE:

<trigger for="modal:tip-example" trigger="click">Click here to show Modal.</trigger>

<modal id="modal:tip-example">
  <span slot="header" class="modal-title text-center">
    <span style="font-size:20pt"><span style="color:red;">BIG</span> header</span>
  </span>
    Modal allows you to style both header and footer individually, with style classes and inline styles.
  <span slot="footer" class="text-center">
    <span style="font-size:10pt">Tiny <span style="color:green;">footer</span></span>
  </span>
</modal>

OUTPUT:

Click here to show Modal.

Example Override the default icon for a certain type of box.

<box type="info">
    <span slot="icon" class="text-danger"><md>:fas-home:</md></span>
    info
</box>
info

Example Use pictures (or even gifs) as the icon for a box.

<box type="info" seamless>
    <img slot="icon" src="https://icons8.com/vue-static/landings/animated-icons/icons/cloud/cloud.gif"></img>
    some very useful info
</box>
some very useful info

Example Use thumbnail as the icon.

<box type="info" light>
    <thumbnail circle slot="icon" text=":book:" background="#dff5ff" size="50"/>
    use thumbnail as the icon
</box>
📖
use thumbnail as the icon

Inserting custom classes into components

Every component documented in our user guide allows you to insert your own defined CSS classes. This is done by adding the add-class attribute to a component along with the desired class names.

Example
Easily apply Bootstrap classes without using a wrapper!
Markup
<tip-box type="info" add-class="lead font-italic text-center">
  Easily apply Bootstrap classes without using a wrapper!
</tip-box>