Advanced Component Usage

User Guide → Advanced Component Usage

Advanced

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 
<box type="info" add-class="lead font-italic text-center">
  Easily apply Bootstrap classes without using a wrapper!
</box>

Other Components

Using HTML, JavaScript, CSS