Description Usage Arguments Value Examples
Create a box with additional UI elements.
1 2 3 4 5 6 7 8 9 10 11 12 |
... |
UI elements to include within the box. |
title |
Label of the box. |
color |
Color of the box. One of |
ribbon |
Should label be presented as ribbon. |
title_side |
Side of a label. One of |
collapsible |
Should minimize button be added to label. |
width |
Width of the box. |
id |
ID of the box. |
collapse_icon |
Icon class to be used for collapsing (when |
expand_icon |
Icon class to be used for expanding (when |
A box that can be passed to dashboardBody
1 2 3 |
Attaching package: ‘semantic.dashboard’
The following object is masked from ‘package:graphics’:
box
<div class="eleven wide column">
<div class="ui segment raised blue">
<div id="box_085289473087098947043618984223" class="ui accordion">
<div class="title" style="cursor: auto">
<div class="ui top right ribbon label blue">
<i class="minus icon" style="cursor: pointer;"></i>
Sample box
</div>
</div>
<div class="content active">
<div>This is a box content</div>
</div>
</div>
</div>
<script>$(document).ready(function() { $('#box_085289473087098947043618984223').accordion({
selector: { trigger: '.title .icon' },
onOpening: function() { $('#box_085289473087098947043618984223').find('.label .icon').removeClass('plus').addClass('minus'); },
onClosing: function() { $('#box_085289473087098947043618984223').find('.label .icon').removeClass('minus').addClass('plus'); }
}); })</script>
</div>
Add the following code to your website.
For more information on customizing the embed code, read Embedding Snippets.