• HOME
  • USER GUIDE
  • SHOWCASE
  • ABOUT
  • 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>
    ##### Feature Y <span class="badge badge-pill badge-success">stable</span>
    

    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

    Box comes 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>
    

    OUTPUT:

    default info warning success important wrong tip definition dismissible info

    You can customize the TipBox's appearance.

    CODE:

    <box background-color="white" border-color="grey" border-left-color="blue">
        default, styled as empty box with blue left border
    </box>
    <box type="info" icon=":rocket:">
        info, with rocket icon
    </box>
    

    OUTPUT:

    default, styled as empty box with blue left border info, with rocket icon

    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 String null
    type String 'none' Supports: info, warning, success, important, wrong, tip, definition, or empty for default.
    ```html warning ``` default info warning success important wrong tip definition

    You can use Dropdowns as a top level component.

    CODE:

    <dropdown text="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 text 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 text="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:

    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.
    text String '' Dropdown button text.
    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 text="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>
              
              
              
    Action
  • Action
  • Another action
  • Something else here
  • Separated link
  • ...

  • Modals

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

    CODE:

    More about <trigger for="modal:loremipsum">trigger</trigger>.
    <modal title="**Modal title** :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 title="**Centered** :rocket:" id="modal:centered" center>
      Centered
    </modal>
    
    

    OUTPUT:

    More about trigger. 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.
    This is the same trigger as last one.

    This is a trigger for a centered modal.

    Centered

    Triggers

    Trigger provides more flexibility in triggering contextual overlay via Tooltip, Popover or Modal.

    You could embed a Trigger within the text, and define the Tooltip, Popover or Modal at a separate location, which allows for a cleaner authoring flow.

    Specify the id attribute on the Tooltip, Popover or Modal component, and use the same id in the for attribute of the Trigger to allow the Trigger to invoke the specific overlay elements. Additionally, multiple Triggers could share the same overlay by providing them with the same id.

    Trigger's trigger attribute (which defaults to hover) is independent of the target's.

    Options

    Name Type Default Description
    trigger String hover How the overlay view is triggered.
    Supports: click, focus, hover, contextmenu.
    for String null The id for the overlay view to be shown.

    Options

    Name type Default Description
    title String '' Title of the Modal component.
    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.
    width Number, String, or null null Passing a Number will be translated to pixels.
    String can be passed CSS units, ( e.g. '50in' or '30vw' ).
    null will default to Bootstrap's responsive sizing.
    large Boolean false Creates a large Modal.
    small Boolean false Creates a small 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 title="Modal title" id="modal:unused">
            Modal content
            </modal>
            
            

    Hover here to open a modal. Modal content


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

    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>
      <!-- You can use dropdown component -->
      <dropdown text="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>
      <!-- You can use dropdown component -->
      <dropdown text="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>
      <!-- You can use dropdown component -->
      <dropdown text="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.

    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 via the add-class attribute.

    <navbar type="primary">
            <!-- Brand as slot -->
            <a slot="brand" href="/" title=
            "Home" class="navbar-brand">MarkBind</a>
            <!-- You can use dropdown component -->
            <dropdown text="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>
            
            
    MarkBind
  • Option
  • Fork...
  • MarkBind
  • Option
  • Fork...
  • MarkBind
  • Option
  • Fork...

  • A Page Navigation Menu (pageNav for short) is a fixed menu on the right edge of your page contents. You can use a pageNav to show a list of the current page's headings.

    Steps to add a pageNav:

    1. Specify your pageNav within the <frontmatter> of a page with "default" or a heading level.
    2. (Optional) You may also specify a page navigation title within <frontmatter> that will be placed at the top of the page navigation menu.

    Example: In the page that you want to have page navigation:

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

    The example above will create a page navigation containing only heading levels of 1 and 2.

    A pageNav has a fixed width of 300 pixels for its contents. It is responsive by design and will be completely hidden when the screen size is smaller than 1300 pixels.

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

    You can see an example of a Page Navigation Bar on the right side of this 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!">
      ...
    </panel>
    

    OUTPUT:

    Lorem ipsum ...

    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>
      ...
    </panel>
    

    OUTPUT:

    Lorem ipsum ...

    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>
    

    OUTPUT:

    Lorem ipsum ...

    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>
    

    OUTPUT:

    Click the Panels to see the expanded style.

    Lorem ipsum ... Lorem ipsum ... Lorem ipsum ... Lorem ipsum ... Lorem ipsum ... Lorem ipsum ... Lorem ipsum ... Lorem ipsum ... Lorem ipsum ...

    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:

    ... ... ...

    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:

    ...

    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:

    This panel has a popup.

    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:

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

    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>
      </panel>
      <panel header="Level 1 Nested Panel" type="info">
        Some Text
      </panel>
    </panel>
    

    OUTPUT:

    I'm a nested tip-box Some Text

    Options

    Name Type Default Description
    header String '' The clickable text on the Panel's header.
    alt String Panel header The clickable text on the minimised Panel.
    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.
    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 of color for the tab (single).
    Supports: light, dark, primary, secondary, info, success, warning, danger, seamless.
    <panel header="primary type panel" type="primary"        >
            ...
            </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>
    

    OUTPUT:

    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.
    <pic src="https://markbind.org/images/logo-lightbackground.png" width=
            "300" alt="Logo">
            MarkBind Logo
            </pic>
            
            
    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>Title</h4>
    <popover effect="fade" header title="Title" content="Lorem ipsum dolor sit amet" placement="top">
      <button class="btn btn-secondary">Popover on top</button>
    </popover>
    <popover effect="fade" header title="Title" content="Lorem ipsum dolor sit amet" placement="left">
      <button class="btn btn-secondary">Popover on left</button>
    </popover>
    <popover effect="fade" header title="Title" content="Lorem ipsum dolor sit amet" placement="right">
      <button class="btn btn-secondary">Popover on right</button>
    </popover>
    <popover effect="fade" header title="Title" content="Lorem ipsum dolor sit amet" placement="bottom">
      <button class="btn btn-secondary">Popover on bottom</button>
    </popover>
    <hr />
    <h4>Trigger</h4>
    <p>
      <popover effect="scale" title="Title" content="Lorem ipsum dolor sit amet" placement="top" trigger="hover">
        <button class="btn btn-secondary">Mouseenter</button>
      </popover>
      <popover effect="scale" title="Title" content="Lorem ipsum dolor sit amet" placement="top" trigger="contextmenu">
        <button class="btn btn-secondary">Contextmenu (right click)</button>
      </popover>
    </p>
    <h4>Markdown</h4>
    <p>
      <popover effect="scale" title="**Emoji title** :rocket:" content="++emoji++ content :cat:">
        <button class="btn btn-secondary">Hover</button>
      </popover>
    </p>
    <h4>Content using slot</h4>
    <popover effect="scale" title="**Emoji title** :rocket:">
      <div slot="content">
        This is a long content...
      </div>
      <button class="btn btn-secondary">Hover</button>
    </popover>
    <br />
    <br />
    <h4>Wrap Text</h4>
    <popover header="false" content="Nice!">What do you say</popover>
    

    OUTPUT:


    Title


    Trigger

    Markdown

    Content using slot

    This is a long content...


    Wrap Text

    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 is the same trigger as last one.

    Triggers

    Trigger provides more flexibility in triggering contextual overlay via Tooltip, Popover or Modal.

    You could embed a Trigger within the text, and define the Tooltip, Popover or Modal at a separate location, which allows for a cleaner authoring flow.

    Specify the id attribute on the Tooltip, Popover or Modal component, and use the same id in the for attribute of the Trigger to allow the Trigger to invoke the specific overlay elements. Additionally, multiple Triggers could share the same overlay by providing them with the same id.

    Trigger's trigger attribute (which defaults to hover) is independent of the target's.

    Options

    Name Type Default Description
    trigger String hover How the overlay view is triggered.
    Supports: click, focus, hover, contextmenu.
    for String null The id for the overlay view to be shown.

    Options

    Name Type Default Description
    trigger String hover How the Popover is triggered.
    Supports: click, focus, hover, contextmenu.
    effect String fade Transition effect for Popover.
    Supports: scale, fade.
    title String '' Popover title, supports inline markdown text.
    content String '' Popover content, supports inline markdown text.
    header Boolean true Whether to show the header.
    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" title="Popover title"
            placement=
              "top">
              <div slot="content">
    
              description :+1:
    
              </div>
              </popover>
              
              

    Hover over the keyword to see the popover.

    description 👍


    Questions

    Question component consists of a question body, a hint and an answer.

    CODE:

    <question>
      The question body. <md>:grey_question:</md>
      <div slot="hint">
        Question hint. <md>:crystal_ball:</md>
      </div>
      <div slot="answer">
        Question answer. <md>:pencil:</md>
      </div>
    </question>
    

    OUTPUT:

    The question body.
    Question hint. 🔮
    Question answer. 📝

    If you leave the hint and answer <div> blank, a default hint and answer will be provided instead.

    CODE:

    <question>
      This question has no hint or answer.
      <div slot="hint"></div>
      <div slot="answer"></div>
    </question>
    

    OUTPUT:

    This question has no hint or answer.

    Use the has-input attribute to add a text input box for users to enter their answer.

    CODE:

    <question has-input>
      What is the distance from Earth to the Moon in kilometers? (Give your answer in 3 s.f)
      <div slot="hint">It is between 300,000 and 400,000 km</div>
      <div slot="answer">384,000 km <md>:full_moon:</md></div>
    </question>
    

    OUTPUT:

    What is the distance from Earth to the Moon in kilometers? (Give your answer in 3 s.f)
    It is between 300,000 and 400,000 km
    384,000 km 🌕

    You are able to omit the hint or answer <div> independently, and they will not render.

    CODE:

    <question>
      This question with an omitted hint.
      <div slot="answer">42 <md>:star:</md></div>
    </question>
    
    <question>
      This question with an omitted answer.
      <div slot="hint">The number of exponent bits in a 64-bit Floating Point. <md>:computer:</md></div>
    </question>
    
    <question>
      This question only has the question body.
    </question>
    

    OUTPUT:

    This question with an omitted hint.
    42 ⭐️
    This question with an omitted answer.
    The number of exponent bits in a 64-bit Floating Point. 💻
    This question only has the question body.

    Use the minimized Panel component to create and group questions inline.

    CODE:

    <panel header="Q1 :crown:" minimized>
      <question has-input>
        Who is the first king of Thailand?
      </question>
    </panel>
    <panel header="Q2 :pizza:" minimized>
      <question has-input>
        Which country did the Hawaiian pizza originate from?
        <div slot="hint">
          Not Italy or Haiwaii <md>:smirk:</md>
        </div>
      </question>
    </panel>
    

    OUTPUT:

    Who is the first king of Thailand? Which country did the Hawaiian pizza originate from?
    Not Italy or Haiwaii 😏

    Questions can also be loaded in from another file using Panel's src attribute.

    CODE:

    <panel header="Questions loaded in from `quiz.md`" src="extra/quiz.md"></panel>
    

    OUTPUT:

    Options

    Name Type Default Description
    has-input Boolean false Whether Question has a text input box.
    <question>
            The question body
            <div slot="hint">
            Question hint.
            </div>
            <div slot="answer">
            Question answer.
            </div>
            </question>
            
            
    The question body
    Question hint.
    Question answer.

    A Site Navigation Menu (siteNav for short) is a fixed menu on the left edge of a page, that 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 and save it inside the _markbind/navigation directory.
    2. Specify the file as the value of the siteNav attribute in the <frontmatter> of the page.

    Example: Here is an example siteNav code saved in _markbind/navigation/mySiteNav.md file:

    * [:house: Home]({{ baseUrl }}/index.html)
    * Docs
      * [User Guide]({{ baseUrl }}/ug.html)
      * [Dev Guide]({{ baseUrl }}/dg.html)
    * [Search]({{ baseUrl }}/search.html)
      * [Google Search](https://www.google.com/)
      * [YouTube Search](https://www.youtube.com/)
    * [Contact]({{ baseUrl }}/contact.html)

    Here's how another page can make use of the above siteNav:

    <frontmatter>
      siteNav: mySiteNav.md
    </frontmatter>
    ...
    

    Here's how the above siteNav will appear:

    You can append the :expanded: to a parent 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.

    You may have additional HTML and Markdown content in a siteNav file, in which case the code for the siteNav should be enclosed in a <navigation> tag. There should only be one <navigation> tag in the file.

    Example: A siteNav code using a <navigation> tag.

    # Site Map
    <navigation>
    * [:house: Home]({{ baseUrl }}/index.html)
    * Docs
      * [User Guide]({{ baseUrl }}/ug.html)
      * [Dev Guide]({{ baseUrl }}/dg.html)
    * [Search]({{ baseUrl }}/search.html)
    </navigation>

    More than one siteNav file can be in _markbind/navigation/ directory but a page may not have more than one siteNav.

    A siteNav has a fixed width of 300 pixels for its contents. A siteNavs is responsive in that it will collapse to a menu button when the screen width is smaller than 992 pixels. It will then be completely hidden when the screen size is smaller than 576 pixels.

    There is no limit to the number of nesting levels or the number of items in the menu, but note that any content exceeding a height of 1000 pixels will be cut off.

    # Site Map
    <navigation>
    * [:house: Home]({{ baseUrl }}/index.html)
    * Docs :expanded:
      * [User Guide]({{ baseUrl }}/ug.html)
      * [Dev Guide]({{ baseUrl }}/dg.html)
    * [Search]({{ baseUrl }}/search.html)
    </navigation>
    <frontmatter>
      siteNav: mySiteNav.md
    </frontmatter>
    ...
    

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


    Tabs

    CODE:

    <tabs>
      <tab header="First tab">
        ...
      </tab>
      <tab header="Disabled second tab :x:" disabled>
      </tab>
      <tab-group header="Third tab group :milky_way:">
        <tab header="Stars :star:">
          star facts
        </tab>
        <tab header="Disabled Moon :new_moon:" disabled>
        </tab>
      </tab-group>
      <tab-group header="Disabled fourth tab group" disabled>
        <tab header="Hidden tab">
          ...
        </tab>
      </tab-group>
    </tabs>
    

    OUTPUT:

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper ultrices lobortis. Aenean leo lacus, congue vel auctor a, tincidunt sed nunc. Integer in odio sed nunc porttitor venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam fringilla tincidunt augue a pulvinar. Some stuff about stars ... 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 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 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 header content="Lorem ipsum dolor sit amet" placement="top">
      <button class="btn btn-secondary">Popover on top</button>
    </tooltip>
    <tooltip header content="Lorem ipsum dolor sit amet" placement="left">
      <button class="btn btn-secondary">Popover on left</button>
    </tooltip>
    <tooltip header content="Lorem ipsum dolor sit amet" placement="right">
      <button class="btn btn-secondary">Popover on right</button>
    </tooltip>
    <tooltip header content="Lorem ipsum dolor sit amet" placement="bottom">
      <button class="btn btn-secondary">Popover on bottom</button>
    </tooltip>
    <hr />
    Trigger
    <p>
      <tooltip effect="scale" content="Lorem ipsum dolor sit amet" placement="top" trigger="click">
        <button class="btn btn-secondary">Click</button>
      </tooltip>
      <tooltip effect="scale" content="Lorem ipsum dolor sit amet" placement="top" trigger="contextmenu">
        <button class="btn btn-secondary">Contextmenu (right click)</button>
      </tooltip>
      <br />
      <br />
      <tooltip effect="scale" content="Lorem ipsum dolor sit amet" placement="top" trigger="focus">
        <input placeholder="Focus"></input>
      </tooltip>
    </p>
    <h4>Markdown</h4>
    <tooltip effect="scale" content="*Hello* **World**">
      <a href="">Hover me</a>
    </tooltip>
    <br />
    <br />
    <h4>Free Text</h4>
    <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:


    Trigger



    Markdown: Hover me

    Free Text: 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 is the same trigger as last one.

    Triggers

    Trigger provides more flexibility in triggering contextual overlay via Tooltip, Popover or Modal.

    You could embed a Trigger within the text, and define the Tooltip, Popover or Modal at a separate location, which allows for a cleaner authoring flow.

    Specify the id attribute on the Tooltip, Popover or Modal component, and use the same id in the for attribute of the Trigger to allow the Trigger to invoke the specific overlay elements. Additionally, multiple Triggers could share the same overlay by providing them with the same id.

    Trigger's trigger attribute (which defaults to hover) is independent of the target's.

    Options

    Name Type Default Description
    trigger String hover How the overlay view is triggered.
    Supports: click, focus, hover, contextmenu.
    for String null The id for the overlay view to be shown.

    Options

    Name Type Default Description
    trigger String hover How the tooltip is triggered.
    Supports: click, focus, hover, contextmenu.
    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 here to see a tooltip.


    Advanced Tips and Tricks

    Rich formatting in headings/titles

    Using the normal syntax, you are only able to use markdown formatting on headings. If you would like more styling options, you can define an element within the component that acts as your heading. This is done by adding a slot attribute with the correct name to that element.

    Example

    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.
    Example
    Click here to show Modal. Modal allows you to style both header and footer individually, with style classes and inline styles.
    Tiny footer
    Markup
    <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>
    
    <trigger for="modal:tip-example" trigger="click">Click here to show Modal.</trigger>
    
    <modal id="modal:tip-example">
      <div slot="modal-header" class="modal-title text-center">
        <span style="font-size:20pt"><span style="color:red;">BIG</span> header</span>
      </div>
        Modal allows you to style both header and footer individually, with style classes and inline styles.
      <div slot="modal-footer" class="text-center">
        <span style="font-size:10pt">Tiny <span style="color:green;">footer</span></span>
      </div>
    </modal>
    

    Panel Slot Options:

    Slot name Default class Notes
    header card-title Aligning text to the center of the panel is not possible, as the header element does not take up the entire container.

    Modal Slot Options: When using slots for Modals, you need to add a single blank line before each <modal> tag, in order for the customization to render correctly.

    Slot name Default class Notes
    modal-header modal-title
    modal-footer modal-footer Specifying modal-footer will override the ok-text attribute, and the OK button will not render.

    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>
    


    PlantUML Diagrams

    Using HTML, JavaScript, CSS