Widgets
chart
The chart function allows you to easily create chartist charts with a cyclops
style and feel. It does all the heavy lifting of setting the numeruos configuration options
for you.
$(function(){
$('.myChart').chart({ type: 'Line', data: data })
})
<div class="myChart"></div>
Options
| Name | Type | Default | Description |
|---|---|---|---|
| type | String | Line | What type of chart. Possible types |
| isLoading | boolean | Observable boolean | false | Is the data loading still |
| isErrored | boolean | Observable boolean | false | Was there an error loading the data |
| data | object | observable object | required | The data for the chart. The shape is determined by the chart type. |
| getLoadingMessageHtml | function | fetching data… | function that returns text to display while loading data |
| getErrorMessageHtml | function | Unable to fetch data. | function that returns text to display when loading has failed |
| getEmptyMessageHtml | function | No data at this time. | function that returns text to display when there is no data |
| chartOptions | object | { fullWidth: true } | Possible options |
| responsiveOptions | object | none | Possible options |
copyable
The copyable widget is used to give users an easy way to
copy a value from a button or input field to their clipboard.
See the copy to clipboard button and copy to clipboard input to see this in action.
$(function(){
$('.copyable').copyable()
})
<input type="text" class="copyable" data-bind="widget:'copyable'">
inlineConfirm
The inlineConfirm widget is used to request user confirmation for an action
without disrupting the workflow by presenting a modal dialog. Not every action or event
needs to be confirmed only ones that have potentially negative side effects.
To use this you simply wire up the button like there was no confirm. This means just
adding a handler to the buttons click event, many handlers are supported if you need
more than one, and adding the appropriate classes btn-danger,
btn-primary, etc. Once the button is all set up you just need to call the
widget on the button and it will take care of the rest. This can be done in javaScript
or as a knockout binding. Keep in mind that for knockout binding executes in order so
the widget binding will need to come after the click binding.
$(function(){
$('.btn-danger').inlineConfirm()
})
<button class="btn btn-danger" data-bind="click: deleteHandler, widget:'inlineConfirm'">Delete</button>
Options
| Name | Type | Default | Description |
|---|---|---|---|
| messageHtml | HTML String | Are you sure? | Message (can be HTML) to be displayed to the the left of the "yes" "no" buttons |
| yesHtml | HTML String | YES | Text (can be HTML) to be displayed on the "yes" button |
| noHtml | HTML String | NO | Text (can be HTML) to be displayed on the "no" button |
| timeout | number | 3000 | Time in milliseconds to leave the confirmation open after the mouse leaves the area before reseting the control. |
| classes | string | none | Used to style the yes button. Defaults to same style of the main button. Use inline-confirm-default, inline-confirm-primary or inline-confirm-danger to force the style. |
overflowMenu
The overflow widget takes a menu and automatically places items in the menu into a "actions" overflow dropdown, when there isn't enough horizontal screen resolution to view the entire menu.
This is meant to be used in conjunction with the action toolbar.
$(function(){
$('.action-toolbar').overflowMenu()
})
Options
| Name | Type | Default | Description |
|---|---|---|---|
| threshold | number | 2 | requires this many items before kicking in |
| cutoff | number | 0 | how many items are left before putting everything in the dropdown |
| linkText | html string | more… | text of the dropdown button |
| linkTitle | string | View More | title of the dropdown button |
| linkTextAll | html string | actions… | text of the dropdown button when all items are in it |
| linkTitleAll | string | View More | Open/Close Menu |
actionToolbarConfirm
The actionToolbarConfirm is wired up exactly like the inlineConfirm.
See above for more information on how to wire it up.
This is meant to be used in conjunction with the action toolbar.
$(function(){
$('.action-toolbar-left a').actionToolbarConfirm()
})
<ol class="action-toolbar-left" data-bind="widget: 'overflowMenu'">
<li><a href="#" data-bind="click: handler, widget: 'actionToolbarConfirm'"><svg class="cyclops-icon" aria-hidden="true"><use xlink:href='#icon-play'></svg> start</a></li>
<li><a href="#" data-bind="click: handler, widget: 'actionToolbarConfirm'"><svg class="cyclops-icon" aria-hidden="true"><use xlink:href='#icon-refresh'></svg> restart</a></li>
<li><a href="#" data-bind="click: handler, widget: 'actionToolbarConfirm'"><svg class="cyclops-icon" aria-hidden="true"><use xlink:href='#icon-archive'></svg> archive</a></li>
</ol>
Options
| Name | Type | Default | Description |
|---|---|---|---|
| messageHtml | HTML String | Are you sure? | Message (can be HTML) to be displayed to the the left of the "yes" "no" buttons |
| yesHtml | HTML String | YES | Text (can be HTML) to be displayed on the "yes" button |
| noHtml | HTML String | NO | Text (can be HTML) to be displayed on the "no" button |
| timeout | number | 3000 | Time in milliseconds to leave the confirmation open after the mouse leaves the area before reseting the control. |
| classes | string | action-toolbar-confirm-primary | Used to style the yes button, these match the default button pattern with primary, default, and danger. |