iC Icons
<div style="font-size: 250%">
<!-- White Icons -->
<div style="background: #333; color: white; margin-bottom: 30px;">
<i class="ic-icon-add"></i>
<i class="ic-icon-edit"></i>
<i class="ic-icon-duplicate"></i>
<i class="ic-icon-copypaste"></i>
<i class="ic-icon-tickets"></i>
<i class="ic-icon-trashcan"></i>
<i class="ic-icon-drag"></i>
<i class="ic-icon-success"></i>
<i class="ic-icon-error"></i>
<i class="ic-icon-delete"></i>
<i class="ic-icon-header-next"></i>
<i class="ic-icon-header-prev"></i>
<i class="ic-icon-fold"></i>
<i class="ic-icon-unfold"></i>
<i class="ic-icon-next"></i>
<i class="ic-icon-prev"></i>
<i class="ic-icon-folder"></i>
<i class="ic-icon-loading ic-icon--spin"></i>
<i class="ic-icon-lock"></i>
<i class="ic-icon-unlock"></i>
<i class="ic-icon-radio-empty"></i>
<i class="ic-icon-radio-half"></i>
<i class="ic-icon-radio-selected"></i>
<i class="ic-icon-picture"></i>
<i class="ic-icon-printer"></i>
<i class="ic-icon-cash"></i>
<i class="ic-icon-credit-card"></i>
<i class="ic-icon-ctbc-direct"></i>
<i class="ic-icon-ctbc-mpos"></i>
<i class="ic-icon-custom-pay"></i>
<i class="ic-icon-pause"></i>
<i class="ic-icon-play"></i>
<i class="ic-icon-inline-success"></i>
<i class="ic-icon-inline-loading ic-icon--spin"></i>
<i class="ic-icon-inline-error"></i>
</div>
<!-- Black Icons -->
<div>
<i class="ic-icon-add"></i>
<i class="ic-icon-edit"></i>
<i class="ic-icon-duplicate"></i>
<i class="ic-icon-copypaste"></i>
<i class="ic-icon-tickets"></i>
<i class="ic-icon-trashcan"></i>
<i class="ic-icon-drag"></i>
<i class="ic-icon-success"></i>
<i class="ic-icon-error"></i>
<i class="ic-icon-delete"></i>
<i class="ic-icon-header-next"></i>
<i class="ic-icon-header-prev"></i>
<i class="ic-icon-fold"></i>
<i class="ic-icon-unfold"></i>
<i class="ic-icon-next"></i>
<i class="ic-icon-prev"></i>
<i class="ic-icon-folder"></i>
<i class="ic-icon-loading ic-icon--spin"></i>
<i class="ic-icon-lock"></i>
<i class="ic-icon-unlock"></i>
<i class="ic-icon-radio-empty"></i>
<i class="ic-icon-radio-half"></i>
<i class="ic-icon-radio-selected"></i>
<i class="ic-icon-picture"></i>
<i class="ic-icon-printer"></i>
<i class="ic-icon-cash"></i>
<i class="ic-icon-credit-card"></i>
<i class="ic-icon-ctbc-direct"></i>
<i class="ic-icon-ctbc-mpos"></i>
<i class="ic-icon-custom-pay"></i>
<i class="ic-icon-pause"></i>
<i class="ic-icon-play"></i>
<i class="ic-icon-inline-success"></i>
<i class="ic-icon-inline-loading ic-icon--spin"></i>
<i class="ic-icon-inline-error"></i>
</div>
</div>
[Important]
.ic-btn is now deprecated and renamed to .ic-button, will be removed on 2.0 release.
New .ic-button should contains ic-flex-layout as default.
<!-- Button | simple text -->
<div>
<button class="ic-button">
Default
</button>
<button class="ic-button ic-button--blue">
Blue
</button>
<button class="ic-button ic-button--red">
Red
</button>
<button class="ic-button ic-button--white">
White
</button>
<button class="ic-button ic-button--black">
Black
</button>
<button class="ic-button" disabled>
Disabled
</button>
</div>
<!-- Solid Button | simple text -->
<div style="margin-top: 10px;">
<button class="ic-button ic-button--solid">
Solid
</button>
<button class="ic-button ic-button--solid ic-button--blue">
Blue
</button>
<button class="ic-button ic-button--solid ic-button--red">
Red
</button>
<button class="ic-button ic-button--solid ic-button--white">
White
</button>
<button class="ic-button ic-button--solid ic-button--black">
Black
</button>
</div>
<!-- Solid Button | Disabled -->
<div style="margin-top: 10px;">
<button class="ic-button ic-button--solid" disabled>
Solid
</button>
<button class="ic-button ic-button--solid ic-button--blue" disabled>
Blue
</button>
<button class="ic-button ic-button--solid ic-button--red" disabled>
Red
</button>
<button class="ic-button ic-button--solid ic-button--white" disabled>
White
</button>
<button class="ic-button ic-button--solid ic-button--black" disabled>
Black
</button>
</div>
<!-- Button | icon + text + aside + states -->
<div style="margin-top: 30px;">
<button class="ic-button">
<div class="ic-flex-layout">
<div class="ic-flex-cell">
<i class="ic-icon ic-icon-prev"></i>
</div>
<div class="ic-flex-cell ic-flex-cell--grow ic-flex-cell--shrink">
<div class="ic-text-layout">
<div class="ic-text-layout__body">
<div class="ic-text-layout__basic">
<div class="ic-flex-layout">
<div class="ic-flex-cell">
Prev
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</button>
<button class="ic-button">
<div class="ic-flex-layout">
<div class="ic-flex-cell ic-flex-cell--grow ic-flex-cell--shrink">
<div class="ic-text-layout">
<div class="ic-text-layout__body">
<div class="ic-text-layout__basic">
<div class="ic-flex-layout">
<div class="ic-flex-cell">
Next
</div>
</div>
</div>
</div>
</div>
</div>
<div class="ic-flex-cell">
<i class="ic-icon ic-icon-next"></i>
</div>
</div>
</button>
<button class="ic-button">
<div class="ic-flex-layout">
<div class="ic-flex-cell">
<i class="ic-icon ic-icon-add"></i>
</div>
<div class="ic-flex-cell ic-flex-cell--grow ic-flex-cell--shrink">
<div class="ic-text-layout">
<div class="ic-text-layout__body">
<div class="ic-text-layout__basic">
<div class="ic-flex-layout">
<div class="ic-flex-cell ic-flex-cell--shrink">
Create
</div>
<div class="ic-flex-cell">
<span class="ic-status">
<i class="ic-icon ic-icon-inline-loading ic-icon--spin ic-icon--gray"></i>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</button>
<button class="ic-button">
<div class="ic-flex-layout">
<div class="ic-flex-cell">
<i class="ic-icon ic-icon-prev"></i>
</div>
<div class="ic-flex-cell ic-flex-cell--grow ic-flex-cell--shrink">
<div class="ic-text-layout">
<div class="ic-text-layout__body">
<div class="ic-text-layout__basic">
<div class="ic-flex-layout">
<div class="ic-flex-cell ic-flex-cell--shrink">
Printer
</div>
<div class="ic-flex-cell">
<div class="ic-tag">Online</div>
</div>
<div class="ic-flex-cell">
<span class="ic-status">
<i class="ic-icon ic-icon-inline-success ic-icon--blue"></i>
</span>
</div>
</div>
</div>
<div class="ic-text-layout__aside">
00:11:22:33:aa:bb
</div>
</div>
</div>
</div>
</div>
</button>
<button class="ic-button ic-state-error">
<div class="ic-flex-layout">
<div class="ic-flex-cell">
<i class="ic-icon ic-icon-duplicate"></i>
</div>
<div class="ic-flex-cell ic-flex-cell--grow ic-flex-cell--shrink">
<div class="ic-text-layout">
<div class="ic-text-layout__body">
<div class="ic-text-layout__basic">
<div class="ic-flex-layout">
<div class="ic-flex-cell ic-flex-cell--shrink">
Copy
</div>
</div>
</div>
<div class="ic-text-layout__aside">
Error messages are appearing here...
</div>
</div>
</div>
</div>
</div>
</button>
</div>
<!-- Button | icon only -->
<div style="margin-top: 30px;">
<button class="ic-button ic-button--icon">
<i class="ic-icon ic-icon-edit"></i>
</button>
<button class="ic-button ic-button--solid ic-button--icon">
<i class="ic-icon ic-icon-printer"></i>
</button>
<button class="ic-button ic-button--icon">
<span class="ic-icon-stack">
<i class="ic-icon ic-icon-drag"></i>
<span class="ic-status ic-status--corner">
<i class="ic-icon ic-icon-inline-loading ic-icon--spin ic-icon--gray"></i>
</span>
</span>
</button>
<button class="ic-button ic-button--icon">
<span class="ic-icon-stack">
<i class="ic-icon ic-icon-drag"></i>
<span class="ic-status ic-status--corner">
<i class="ic-icon ic-icon-inline-success ic-icon--blue"></i>
</span>
</span>
</button>
</div>
<!-- Button Group -->
<div style="margin-top: 30px;">
<div class="ic-button-group">
<button class="ic-button">
<div class="ic-flex-layout ic-flex-layout--center">
<div class="ic-flex-cell">
<div class="ic-text-layout">
<div class="ic-text-layout__body">
<div class="ic-text-layout__basic">
<div class="ic-flex-layout">
<div class="ic-flex-cell">
Block
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</button>
</div>
<div class="ic-button-group" style="margin-top: 10px;">
<button class="ic-button ic-button--solid ic-button--blue">
<div class="ic-flex-layout ic-flex-layout--center">
<div class="ic-flex-cell">
<div class="ic-text-layout">
<div class="ic-text-layout__body">
<div class="ic-text-layout__basic">
<div class="ic-flex-layout">
<div class="ic-flex-cell">
Confirm
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</button>
<button class="ic-button ic-button--solid ic-button--red">
<div class="ic-flex-layout ic-flex-layout--center">
<div class="ic-flex-cell">
<div class="ic-text-layout">
<div class="ic-text-layout__body">
<div class="ic-text-layout__basic">
<div class="ic-flex-layout">
<div class="ic-flex-cell">
Cancel
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</button>
</div>
</div>
Tags (Previously Labels)
Tags doesn't have their own colors. They should follow the state color of their own parents.
The .ic-label class is now deprecated, and will be removed on 2.0 release.
<span class="ic-tag">Tag default</span>
<span class="ic-state-editable">
<span class="ic-tag">Tag blue</span>
</span>
<span class="ic-state-error">
<span class="ic-tag">Tag red</span>
</span>
<span disabled>
<span class="ic-tag">Tag disabled</span>
</span>
Modal Window
<button class="ic-button ic-button--red" onclick="showDemoModal()">Show Modal</button>
<div class="ic-modal" style="display: none;">
<div class="ic-modal__backdrop" onclick="closeDemoModal()"></div>
<div class="ic-modal__container">
<header class="ic-modal__header ic-header">
<h1 class="ic-header__title">Modal Title</h1>
<div class="ic-header__left"></div>
<div class="ic-header__right">
<button class="ic-header__btn" onclick="closeDemoModal()">Close</button>
</div>
</header>
<div class="ic-modal__body ic-modal__body--padding">
Hello, I am modal body.
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam enim sunt sapiente molestias, sed dicta inventore consectetur beatae asperiores, aliquid laboriosam animi, praesentium repudiandae et, quam saepe sint cupiditate reiciendis.</p>
</div>
</div>
</div>
<script type="text/javascript">
var demoModalId = '';
function showDemoModal() {
demoModalId = 'modal-' + Math.floor((Math.random() * 100) + 1);
$('.ic-modal')
.clone()
.appendTo('body')
.css('display', '')
.addClass('ic-modal--active')
.attr('id', demoModalId);
// Prevents body from scrolling while a Popup or Modal is open.
$('body').addClass('ic-has-backdrop');
// Listening Esc keyup event
$(document).on('keyup', closeDemoModalByKeycode);
}
function closeDemoModal() {
$('#' + demoModalId).remove();
$('body').removeClass('ic-has-backdrop');
// Turn-off Esc keyup event
$(document).off('keyup', closeDemoModalByKeycode);
}
function closeDemoModalByKeycode(event) {
if (event.keyCode === 27) {
closeDemoModal();
}
return;
}
</script>
Popup Alarm
<button class="ic-button ic-button--red" onclick="showDemoPopup('.ic-popup--red')">
Show Red Popup
</button>
<button class="ic-button ic-button--blue" onclick="showDemoPopup('.ic-popup--blue')">
Show Blue Popup
</button>
<div class="ic-popup ic-popup--red" style="display: none;">
<div class="ic-popup__backdrop"></div>
<div class="ic-popup__container">
<div class="ic-popup__body">
<div class="ic-popup__icon">
<i class="ic-icon-error ic-icon--large"></i>
</div>
<p class="ic-popup__message">
Are you sure to delete selecte items?
</p>
</div>
<div class="ic-popup__footer">
<button class="ic-popup__button">Cancel</button>
<button class="ic-popup__button ic-popup__button--primary">Yes, I'm sure.</button>
</div>
</div>
</div>
<div class="ic-popup ic-popup--blue" style="display: none;">
<div class="ic-popup__backdrop"></div>
<div class="ic-popup__container">
<div class="ic-popup__body">
<div class="ic-popup__icon">
<i class="ic-icon-success ic-icon--large"></i>
</div>
<p class="ic-popup__message">
Store ID has been updated successfully.
</p>
</div>
<div class="ic-popup__footer">
<button class="ic-popup__button">Awesome.</button>
</div>
</div>
</div>
<script type="text/javascript">
var demoPopupId = '';
function showDemoPopup(popupSelector) {
demoPopupId = 'popup-' + Math.floor((Math.random() * 100) + 1);
$(popupSelector)
.clone()
.appendTo('body')
.css('display', '')
.addClass('ic-popup--active')
.attr('id', demoPopupId)
.on('click', '.ic-popup__button', closeDemoPopup);
// Prevents body from scrolling while a Popup or Modal is open.
$('body').addClass('ic-has-backdrop');
// Listening Esc keyup event
$(document).on('keyup', closeDemoPopupByKeycode);
}
function closeDemoPopup() {
$('#' + demoPopupId).remove();
$('body').removeClass('ic-has-backdrop');
// Turn-off Esc keyup event
$(document).off('keyup', closeDemoPopupByKeycode);
}
function closeDemoPopupByKeycode(event) {
if (event.keyCode === 27) {
closeDemoPopup();
}
return;
}
</script>
Popover
<div class="ic-popover ic-popover--bottom" style="margin: 5px;">
<span class="ic-popover__arrow"></span>
<div class="ic-popover__container">
<ul class="ic-list">
<li class="ic-list__item">
<div class="ic-list__item-container">
<div class="ic-list__item-body">
<div class="ic-list__item-label">Demo Input</div>
</div>
</div>
</li>
<li class="ic-list__item">
<div class="ic-list__item-container">
<div class="ic-list__item-body">
<div class="ic-list__item-label">Demo Input</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="ic-popover ic-popover--top" style="margin: 5px;">
<span class="ic-popover__arrow"></span>
<div class="ic-popover__container">
<ul class="ic-list">
<li class="ic-list__item">
<div class="ic-list__item-container">
<div class="ic-list__item-body">
<div class="ic-list__item-label">Demo Input</div>
</div>
</div>
</li>
<li class="ic-list__item">
<div class="ic-list__item-container">
<div class="ic-list__item-body">
<div class="ic-list__item-label">Demo Input</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="ic-popover ic-popover--right" style="margin: 5px;">
<span class="ic-popover__arrow"></span>
<div class="ic-popover__container">
<ul class="ic-list">
<li class="ic-list__item">
<div class="ic-list__item-container">
<div class="ic-list__item-body">
<div class="ic-list__item-label">Demo Input</div>
</div>
</div>
</li>
<li class="ic-list__item">
<div class="ic-list__item-container">
<div class="ic-list__item-body">
<div class="ic-list__item-label">Demo Input</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="ic-popover ic-popover--left" style="margin: 5px;">
<span class="ic-popover__arrow"></span>
<div class="ic-popover__container">
<ul class="ic-list">
<li class="ic-list__item">
<div class="ic-list__item-container">
<div class="ic-list__item-body">
<div class="ic-list__item-label">Demo Input</div>
</div>
</div>
</li>
<li class="ic-list__item">
<div class="ic-list__item-container">
<div class="ic-list__item-body">
<div class="ic-list__item-label">Demo Input</div>
</div>
</div>
</li>
</ul>
</div>
</div>
Tooltip
<div class="ic-tooltip ic-tooltip--top" style="margin: 5px;">
<span class="ic-tooltip__arrow"></span>
<div class="ic-tooltip__container">
tooltip at top
</div>
</div>
<div class="ic-tooltip ic-tooltip--bottom" style="margin: 5px;">
<span class="ic-tooltip__arrow"></span>
<div class="ic-tooltip__container">
tooltip at bottom
</div>
</div>
<div class="ic-tooltip ic-tooltip--left" style="margin: 5px;">
<span class="ic-tooltip__arrow"></span>
<div class="ic-tooltip__container">
tooltip at left
</div>
</div>
<div class="ic-tooltip ic-tooltip--right" style="margin: 5px;">
<span class="ic-tooltip__arrow"></span>
<div class="ic-tooltip__container">
tooltip at right
</div>
</div>
<div class="ic-tooltip ic-tooltip--top" style="margin: 5px;">
<span class="ic-tooltip__arrow"></span>
<div class="ic-tooltip__container">
tooltip that to longgggggg and its max width is 320px
</div>
</div>
Image Editor
<!-- Normal Image Editor -->
<div>
<div class="ic-image-editor">
<div class="ic-image-editor__image">
<div class="ic-image-editor__placeholder">
<span class="ic-icon ic-icon-picture ic-icon--large"></span>
</div>
</div>
<div class="ic-image-editor__control">
<input type="range" class="ic-slider" value="80" min="0" max="100" />
</div>
</div>
</div>
<!-- Image Editor inside List -->
<div style="margin-top: 60px;">
<ul class="ic-list ic-list--setting">
<li class="ic-list__item">
<div class="ic-list__item-container">
<div class="ic-list__item-body">
<!-- Image Editor: start -->
<div class="ic-image-editor">
<div class="ic-image-editor__image">
<div class="ic-image-editor__placeholder">
<span class="ic-icon ic-icon-picture ic-icon--large"></span>
</div>
</div>
<div class="ic-image-editor__control">
<input type="range" class="ic-slider" value="80" min="0" max="100" />
</div>
</div>
<!-- Image Editor: end -->
</div>
</div>
</li>
<li class="ic-list__item ic-list__item--fulllink">
<a class="ic-list__item-container" href="#">
<span class="ic-list__item-body">
<span class="ic-list__item-label">
Upload Image...
</span>
</span>
</a>
</li>
</ul>
</div>
<!-- Image Editor with max-width inside List -->
<div style="margin-top: 60px;">
<ul class="ic-list ic-list--setting">
<li class="ic-list__item">
<div class="ic-list__item-container">
<div class="ic-list__item-body">
<!-- Image Editor: start -->
<div class="ic-image-editor" style="max-width: 408px;">
<div class="ic-image-editor__image">
<div class="ic-image-editor__placeholder" style="height: 60px;">
<span class="ic-icon ic-icon-picture" style="font-size: 60px;"></span>
</div>
</div>
<div class="ic-image-editor__control">
<input type="range" class="ic-slider" value="80" min="0" max="100" />
</div>
</div>
<!-- Image Editor: end -->
</div>
</div>
</li>
<li class="ic-list__item ic-list__item--fulllink">
<a class="ic-list__item-container" href="#">
<span class="ic-list__item-body">
<span class="ic-list__item-label">
Upload Image...
</span>
</span>
</a>
</li>
</ul>
</div>
HTML5 Inputs
<style>
.demo-input-textlabel {
display: inline-block;
border: 1px solid lightgrey;
vertical-align: top;
}
</style>
<!-- Text Input -->
<div>
<div class="ic-text-input">
<input type="text" class="ic-text-input__input" placeholder="Text input" />
</div>
<div class="ic-text-input">
<input type="email" class="ic-text-input__input" value="foo.bar@ichef.com.tw" placeholder="Email input" />
</div>
<div class="ic-text-input">
<input type="datetime-local" class="ic-text-input__input" value="2016-11-11T11:11" placeholder="DateTime(local) input" />
</div>
</div>
<!-- Text Input with ic-text-label -->
<div style="margin-top: 30px;">
<div class="demo-input-textlabel">
<div class="ic-text-input">
<div class="ic-flex-layout ic-flex-layout--right">
<div class="ic-flex-cell">
<div class="ic-text-layout ic-text-layout--right">
<div class="ic-text-layout__body">
<div class="ic-text-layout__basic">
<div class="ic-flex-layout ic-flex-layout--reverse">
<div class="ic-flex-cell">
<input type="text" class="ic-text-input__input" placeholder="Text" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="demo-input-textlabel">
<div class="ic-text-input">
<div class="ic-flex-layout">
<div class="ic-flex-cell">
<div class="ic-text-layout">
<div class="ic-text-layout__body">
<div class="ic-text-layout__basic">
<div class="ic-flex-layout">
<div class="ic-flex-cell">
<input type="text" class="ic-text-input__input" placeholder="Left-aligned Input" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="demo-input-textlabel">
<div class="ic-text-input ic-state-error">
<div class="ic-flex-layout ic-flex-layout--right">
<div class="ic-flex-cell">
<div class="ic-text-layout ic-text-layout--right">
<div class="ic-text-layout__body">
<div class="ic-text-layout__basic">
<div class="ic-flex-layout ic-flex-layout--reverse">
<div class="ic-flex-cell">
<input type="text" class="ic-text-input__input" placeholder="Text" value="Error text" />
</div>
</div>
</div>
<div class="ic-text-layout__aside">
Error messages...
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Inline Text Input -->
<div style="margin-top: 30px;">
Here we have
<div class="ic-component--inline ic-text-input">
<input type="number" class="ic-text-input__input" value="1" placeholder="Number input" />
</div>
option(s).
</div>
<!-- Light Text Input with dark background -->
<div class="ic-list-row ic-state-highlight">
<div class="ic-text-input">
<input type="text" class="ic-text-input__input" value="Input inside a highlighted Row" placeholder="Text input" />
</div>
</div>
<!-- Textarea -->
<div style="margin-top: 30px">
<div class="ic-textarea">
<textarea class="ic-textarea__input" placeholder="Please type some comments here..."></textarea>
</div>
</div>
Should use .ic-flex-layout to wrapping div text.
<!-- Icon-only checkbox -->
<div>
<div class="ic-checkbox ic-component--inline">
<span class="ic-checkbox__icon-wrapper">
<input type="checkbox" class="ic-checkbox__input" />
<span class="ic-checkbox__button"></span>
</span>
</div>
<div class="ic-checkbox ic-component--inline">
<span class="ic-checkbox__icon-wrapper">
<input type="checkbox" class="ic-checkbox__input" />
<span class="ic-checkbox__button"></span>
<span class="ic-status ic-status--corner">
<i class="ic-icon ic-icon-inline-loading ic-icon--spin ic-icon--gray"></i>
</span>
</span>
</div>
<div class="ic-checkbox ic-component--inline">
<span class="ic-checkbox__icon-wrapper">
<input type="checkbox" class="ic-checkbox__input" checked />
<span class="ic-checkbox__button"></span>
<span class="ic-status ic-status--corner">
<i class="ic-icon ic-icon-inline-success ic-icon--blue"></i>
</span>
</span>
</div>
</div>
<!-- Checkbox with div text -->
<div style="margin-top: 30px;">
<div class="ic-checkbox">
<div class="ic-flex-layout">
<div class="ic-flex-cell">
<span class="ic-checkbox__icon-wrapper">
<input type="checkbox" class="ic-checkbox__input" />
<span class="ic-checkbox__button"></span>
</span>
</div>
<div class="ic-flex-cell">
<div class="ic-text-layout">
<div class="ic-text-layout__body">
<div class="ic-text-layout__basic">
<div class="ic-flex-layout">
<div class="ic-flex-cell ic-flex-cell--shrink">
Checkbox
</div>
<div class="ic-flex-cell">
<span class="ic-status">
<i class="ic-icon ic-icon-inline-loading ic-icon--spin ic-icon--gray"></i>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="ic-checkbox">
<div class="ic-flex-layout">
<div class="ic-flex-cell">
<span class="ic-checkbox__icon-wrapper">
<input type="checkbox" class="ic-checkbox__input" checked />
<span class="ic-checkbox__button"></span>
</span>
</div>
<div class="ic-flex-cell">
<div class="ic-text-layout">
<div class="ic-text-layout__body">
<div class="ic-text-layout__basic">
<div class="ic-flex-layout">
<div class="ic-flex-cell ic-flex-cell--shrink">
Checked
</div>
<div class="ic-flex-cell">
<span class="ic-status">
<i class="ic-icon ic-icon-inline-success ic-icon--blue"></i>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="ic-checkbox ic-state-disabled">
<div class="ic-flex-layout">
<div class="ic-flex-cell">
<span class="ic-checkbox__icon-wrapper">
<input type="checkbox" class="ic-checkbox__input" checked disabled />
<span class="ic-checkbox__button"></span>
</span>
</div>
<div class="ic-flex-cell">
<div class="ic-text-layout">
<div class="ic-text-layout__body">
<div class="ic-text-layout__basic">
<div class="ic-flex-layout">
<div class="ic-flex-cell ic-flex-cell--shrink">
Disabled
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="ic-checkbox">
<div class="ic-flex-layout">
<div class="ic-flex-cell">
<span class="ic-checkbox__icon-wrapper">
<input
type="checkbox"
class="ic-checkbox__input"
id="demo-indeterminate-checkbox"
onclick="ts(this)" />
<span class="ic-checkbox__button"></span>
</span>
</div>
<div class="ic-flex-cell">
<div class="ic-text-layout">
<div class="ic-text-layout__body">
<div class="ic-text-layout__basic">
<div class="ic-flex-layout">
<div class="ic-flex-cell ic-flex-cell--shrink">
Indeterminate
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Checkbox with error state -->
<div style="margin-top: 30px;">
<div class="ic-checkbox ic-state-error">
<div class="ic-flex-layout">
<div class="ic-flex-cell">
<span class="ic-checkbox__icon-wrapper">
<input type="checkbox" class="ic-checkbox__input" checked />
<span class="ic-checkbox__button"></span>
</span>
</div>
<div class="ic-flex-cell">
<div class="ic-text-layout">
<div class="ic-text-layout__body">
<div class="ic-text-layout__basic">
<div class="ic-flex-layout">
<div class="ic-flex-cell ic-flex-cell--shrink">
Error
</div>
<div class="ic-flex-cell">
<span class="ic-status">
<i class="ic-icon ic-icon-inline-error ic-icon--red"></i>
</span>
</div>
</div>
</div>
<div class="ic-text-layout__aside">
Error messages appear here...
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
// @ref: https://css-tricks.com/indeterminate-checkboxes/
document.getElementById("demo-indeterminate-checkbox").indeterminate = true;
function ts(cb) {
if (cb.readOnly) cb.checked = cb.readOnly = false;
else if (!cb.checked) cb.readOnly = cb.indeterminate = true;
}
</script>
Switch
<!-- Switch only -->
<div>
<label class="ic-switch ic-component--inline">
<input type="checkbox" class="ic-switch__input" />
<span class="ic-switch__button"></span>
</label>
<label class="ic-switch ic-component--inline">
<span class="ic-switch__icon-wrapper">
<input type="checkbox" class="ic-switch__input" />
<span class="ic-switch__button"></span>
<span class="ic-status ic-status--corner">
<i class="ic-icon ic-icon-inline-loading ic-icon--spin ic-icon--gray"></i>
</span>
</span>
</label>
<label class="ic-switch ic-component--inline">
<span class="ic-switch__icon-wrapper">
<input type="checkbox" class="ic-switch__input" />
<span class="ic-switch__button"></span>
<span class="ic-status ic-status--corner">
<i class="ic-icon ic-icon-inline-success ic-icon--blue"></i>
</span>
</span>
</label>
<label class="ic-switch ic-component--inline ic-state-error">
<div class="ic-flex-layout ic-flex-layout--reverse">
<div class="ic-flex-cell">
<span class="ic-switch__icon-wrapper">
<input type="checkbox" class="ic-switch__input" />
<span class="ic-switch__button"></span>
<span class="ic-status ic-status--corner">
<i class="ic-icon ic-icon-inline-error ic-icon--red"></i>
</span>
</span>
</div>
<div class="ic-flex-cell ic-flex-cell--grow ic-flex-cell--shrink">
<div class="ic-text-layout">
<div class="ic-text-layout__body">
<div class="ic-text-layout__aside">
Error messages here...
</div>
</div>
</div>
</div>
</div>
</label>
</div>
<!-- Switch + loading status -->
<div style="margin-top: 30px;">
<label class="ic-switch ic-component--inline">
<div class="ic-flex-layout ic-flex-layout--reverse">
<div class="ic-flex-cell">
<input type="checkbox" class="ic-switch__input" checked />
<span class="ic-switch__button"></span>
</div>
<div class="ic-flex-cell ic-flex-cell--shrink">
<div class="ic-text-layout">
<div class="ic-text-layout__body ic-text-layout--right">
<div class="ic-text-layout__basic">
<div class="ic-flex-layout ic-flex-layout--reverse">
<div class="ic-flex-cell ic-flex-cell--shrink">
Demo Switch
</div>
<div class="ic-flex-cell">
<span class="ic-status">
<i class="ic-icon ic-icon-inline-loading ic-icon--spin ic-icon--gray"></i>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</label>
</div>
<!-- Switch + text label -->
<div style="margin-top: 10px;">
<label class="ic-switch ic-component--inline">
<div class="ic-flex-layout ic-flex-layout--reverse">
<div class="ic-flex-cell">
<input type="checkbox" class="ic-switch__input" checked />
<span class="ic-switch__button"></span>
</div>
<div class="ic-flex-cell ic-flex-cell--shrink">
<div class="ic-text-layout ic-text-layout--right">
<div class="ic-text-layout__body">
<div class="ic-text-layout__basic">
<div class="ic-flex-layout ic-flex-layout--reverse">
<div class="ic-flex-cell ic-flex-cell--shrink">
Demo Switch
</div>
<div class="ic-flex-cell">
<div class="ic-tag">Online</div>
</div>
<div class="ic-flex-cell">
<span class="ic-status">
<i class="ic-icon ic-icon-inline-success ic-icon--blue"></i>
</span>
</div>
</div>
</div>
<div class="ic-text-layout__aside">
00:11:22:33:aa:bb
</div>
</div>
</div>
</div>
</div>
</label>
</div>
<!-- Error switch + text label -->
<div style="margin-top: 10px;">
<label class="ic-switch ic-component--inline ic-state-error">
<div class="ic-flex-layout ic-flex-layout--reverse">
<div class="ic-flex-cell">
<input type="checkbox" class="ic-switch__input" checked />
<span class="ic-switch__button"></span>
</div>
<div class="ic-flex-cell ic-flex-cell--shrink">
<div class="ic-text-layout ic-text-layout--right">
<div class="ic-text-layout__body">
<div class="ic-text-layout__basic">
<div class="ic-flex-layout ic-flex-layout--reverse">
<div class="ic-flex-cell ic-flex-cell--shrink">
Demo Switch
</div>
<div class="ic-flex-cell">
<div class="ic-tag">Online</div>
</div>
</div>
</div>
<div class="ic-text-layout__aside">
Error messages are appearing here...
</div>
</div>
</div>
</div>
</div>
</label>
</div>
<!-- Disabled Switch -->
<div style="margin-top: 10px;">
<label class="ic-switch ic-component--inline ic-state-disabled">
<div class="ic-flex-layout ic-flex-layout--right">
<div class="ic-flex-cell">
<input type="checkbox" class="ic-switch__input" checked disabled />
<span class="ic-switch__button ic-switch__button--left"></span>
</div>
<div class="ic-flex-cell ic-flex-cell--shrink">
<div class="ic-text-layout">
<div class="ic-text-layout__body ic-text-layout--right">
<div class="ic-text-layout__basic">
<div class="ic-flex-layout ic-flex-layout--reverse">
<div class="ic-flex-cell ic-flex-cell--shrink">
Demo Switch
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</label>
</div>
<script>
// To enable :active state in mobile safari.
// (Ref: https://goo.gl/2lVpTV)
document.addEventListener('touchstart', function() {});
</script>
Slider
<!-- Basic Slider -->
<div>
<input type="range" id="ic-slider-demo__input" class="ic-slider" min="0" max="50" />
</div>
<div style="margin-top: 15px">
Value: <span id="ic-slider-demo__value-label"></span>
</div>
<script>
(function() {
var input = document.getElementById('ic-slider-demo__input'),
label = document.getElementById('ic-slider-demo__value-label');
input.addEventListener('input', function(event) {
label.innerText = event.target.value;
});
label.innerText = input.value;
})();
</script>
Basic list with rounded border, used in Setting Column
<ul class="ic-list ic-list--setting">
<!-- Minimal list item -->
<li class="ic-list__item">
<div class="ic-list__item-container">
<span class="ic-list__item-body">
<span class="ic-list__item-label">
Demo row
</span>
</span>
</div>
</li>
<!-- List item with value -->
<li class="ic-list__item">
<div class="ic-list__item-container">
<span class="ic-list__item-body">
<span class="ic-list__item-label">
Demo row
</span>
<span class="ic-list__item-value">
<input class="ic-input" type="text"
placeholder="Text" value="TEXT ME" />
</span>
</span>
</div>
</li>
<!-- Clickable list item with value -->
<li class="ic-list__item">
<a class="ic-list__item-container" href="#">
<span class="ic-list__item-body">
<span class="ic-list__item-label">
Demo row
</span>
<span class="ic-list__item-value">
TEXT
</span>
</span>
<span class="ic-list__item-right">
<i class="ic-icon ic-icon-next"></i>
</span>
</a>
</li>
<!-- Editing List item with value -->
<li class="ic-list__item ic-state-editing">
<div class="ic-list__item-container">
<span class="ic-list__item-body">
<span class="ic-list__item-label">
Demo row
</span>
<span class="ic-list__item-value">
<input class="ic-input ic-input--inverted" type="text"
placeholder="Text" value="TEXT ME" />
</span>
</span>
</div>
</li>
<!-- Saving list item with value + state_indicator -->
<li class="ic-list__item ic-state-loading">
<div class="ic-list__item-container">
<span class="ic-list__item-body">
<span class="ic-list__item-label">
<div class="ic-text-group">
<span class="ic-text-group__text">Demo row</span>
<i class="ic-icon ic-icon-loading ic-icon--spin ic-text-group__icon"></i>
</div>
</span>
<span class="ic-list__item-value">
<input class="ic-input" type="text"
placeholder="Text" value="TEXT ME" />
</span>
</span>
</div>
</li>
<!-- Error list item with value -->
<li class="ic-list__item ic-state-error">
<div class="ic-list__item-container">
<span class="ic-list__item-body">
<span class="ic-list__item-label">
Demo row
<div class="ic-text ic-text--aside">
錯誤：你知道事情的嚴重性嗎?世新妹學士服照正翻，山獅被看門狗追，變調情人節，張根碩被指哈蒼井空，的行為，救救長毛驢。
</div>
</span>
<span class="ic-list__item-value">
<input class="ic-input" type="text"
placeholder="Text" value="TEXT ME" />
</span>
</span>
</div>
</li>
<!-- Error list item with value + retry button -->
<li class="ic-list__item ic-state-error">
<div class="ic-list__item-container">
<span class="ic-list__item-body">
<span class="ic-list__item-label">
Demo row
<div class="ic-text ic-text--aside">
錯誤：你知道事情的嚴重性嗎?世新妹學士服照正翻，山獅被看門狗追，變調情人節，張根碩被指哈蒼井空，的行為，救救長毛驢。
</div>
</span>
<span class="ic-list__item-value">
<input class="ic-input" type="text"
placeholder="Text" value="TEXT ME" />
</span>
</span>
<span class="ic-list__item-right">
<button class="ic-list__item-btn">
<i class="ic-icon-retry"></i>
</button>
</span>
</div>
</li>
<!-- Success list item with value + state_indicator -->
<li class="ic-list__item ic-state-success">
<div class="ic-list__item-container">
<span class="ic-list__item-body">
<span class="ic-list__item-label">
<div class="ic-text-group">
<span class="ic-text-group__text">Demo row</span>
<i class="ic-icon ic-icon-success ic-text-group__icon"></i>
</div>
</span>
<span class="ic-list__item-value">
<input class="ic-input" type="text"
placeholder="Text" value="TEXT ME" />
</span>
</span>
</div>
</li>
<!-- List item with checkbox + sort handle -->
<li class="ic-list__item">
<label class="ic-list__item-container">
<span class="ic-list__item-left">
<label class="ic-checkbox">
<input type="checkbox" class="ic-checkbox__input" />
<span class="ic-checkbox__button"></span>
</label>
</span>
<span class="ic-list__item-body">
<span class="ic-list__item-label">
Demo row
</span>
</span>
<span class="ic-list__item-right">
<button class="ic-list__item-btn ic-list__item-btn--drag">
<i class="ic-icon-drag"></i>
</button>
</span>
</label>
</li>
<!-- List item with switch + sort handle -->
<li class="ic-list__item">
<div class="ic-list__item-container">
<span class="ic-list__item-left">
<label class="ic-switch">
<input type="checkbox" class="ic-switch__input" checked />
<span class="ic-switch__button"></span>
</label>
</span>
<span class="ic-list__item-body">
<span class="ic-list__item-label">
Demo row
</span>
</span>
<span class="ic-list__item-right">
<button class="ic-list__item-btn ic-list__item-btn--drag">
<i class="ic-icon-drag"></i>
</button>
</span>
</div>
</li>
<!-- Active list item with value -->
<li class="ic-list__item ic-state-active">
<div class="ic-list__item-container">
<span class="ic-list__item-body">
<span class="ic-list__item-label">
Demo row
</span>
<span class="ic-list__item-value">
<input class="ic-input" type="text"
placeholder="Text" value="TEXT ME" />
</span>
</span>
</div>
</li>
<!-- Disabled list item with value -->
<li class="ic-list__item ic-state-disabled">
<div class="ic-list__item-container">
<span class="ic-list__item-body">
<span class="ic-list__item-label">
Demo row
</span>
<span class="ic-list__item-value">
<input class="ic-input" type="text"
placeholder="Text" value="TEXT ME" disabled />
</span>
</span>
</div>
</li>
<!-- Disabled-clickable list item with value -->
<li class="ic-list__item ic-state-disabled">
<a class="ic-list__item-container" href="#">
<span class="ic-list__item-body">
<span class="ic-list__item-label">
Demo row
</span>
<span class="ic-list__item-value">
TEXT
</span>
</span>
<span class="ic-list__item-right">
<i class="ic-icon ic-icon-next"></i>
</span>
</a>
</li>
<!-- Disabled list item with switch + sort handle -->
<li class="ic-list__item ic-state-disabled">
<div class="ic-list__item-container">
<span class="ic-list__item-left">
<label class="ic-switch">
<input type="checkbox" class="ic-switch__input" checked disabled />
<span class="ic-switch__button"></span>
</label>
</span>
<span class="ic-list__item-body">
<span class="ic-list__item-label">
Demo row
</span>
</span>
<span class="ic-list__item-right">
<button class="ic-list__item-btn ic-list__item-btn--drag">
<i class="ic-icon-drag"></i>
</button>
</span>
</div>
</li>
</ul>
Transparent Border List, used in List Column
<ul class="ic-list ic-list--transparent">
<!-- Minimal list item -->
<li class="ic-list__item">
<div class="ic-list__item-container">
<span class="ic-list__item-body">
<span class="ic-list__item-label">
Demo row
</span>
</span>
</div>
</li>
<!-- List item with icon -->
<li class="ic-list__item">
<div class="ic-list__item-container">
<span class="ic-list__item-body">
<span class="ic-list__item-icon">
<i class="ic-icon-printer"></i>
</span>
<span class="ic-list__item-label">
Demo ABCDEDFHIJKLMNOPQRSTUVWXYZ
</span>
</span>
</div>
</li>
<!-- List item with icon + label -->
<li class="ic-list__item">
<div class="ic-list__item-container">
<span class="ic-list__item-body">
<span class="ic-list__item-icon">
<i class="ic-icon-printer"></i>
</span>
<span class="ic-list__item-label">
<div class="ic-text-group">
<span class="ic-text-group__text">Demo row</span>
<span class="ic-label ic-text-group__icon">LABEL</span>
</div>
</span>
</span>
</div>
</li>
<!-- List item with icon + aside -->
<li class="ic-list__item">
<div class="ic-list__item-container">
<span class="ic-list__item-body">
<span class="ic-list__item-icon">
<i class="ic-icon-printer"></i>
</span>
<span class="ic-list__item-label">
Demo row
<div class="ic-text ic-text--aside">
11:22:33:44:55:66
</div>
</span>
<span class="ic-list__item-value">
<input class="ic-input" type="text"
placeholder="Text" value="TEXT ME" />
</span>
</span>
</div>
</li>
<!-- List item with icon + aside + label -->
<li class="ic-list__item">
<div class="ic-list__item-container">
<span class="ic-list__item-body">
<span class="ic-list__item-icon">
<i class="ic-icon-printer"></i>
</span>
<span class="ic-list__item-label">
<div class="ic-text-group">
<span class="ic-text-group__text">Demo row</span>
<span class="ic-label ic-text-group__icon">LABEL</span>
</div>
<div class="ic-text ic-text--aside">
11:22:33:44:55:66
</div>
</span>
</span>
</div>
</li>
<!-- List item with icon + aside + right buttons -->
<li class="ic-list__item">
<div class="ic-list__item-container">
<span class="ic-list__item-body">
<span class="ic-list__item-icon">
<i class="ic-icon-printer"></i>
</span>
<span class="ic-list__item-label">
Demo ABCDEDFHIJKLMNOPQRSTUVWXYZ
<div class="ic-text ic-text--aside">
11:22:33:44:55:66
</div>
</span>
</span>
<div class="ic-list__item-right">
<button class="ic-list__item-btn ic-list__item-btn--autohide">
<i class="ic-icon-edit"></i>
</button>
<button class="ic-list__item-btn ic-list__item-btn--drag">
<i class="ic-icon-drag"></i>
</button>
<button class="ic-list__item-btn">
<i class="ic-icon-next"></i>
</button>
</div>
</div>
</li>
<!-- Active list item with icon + aside + right buttons -->
<li class="ic-list__item ic-state-active">
<div class="ic-list__item-container">
<span class="ic-list__item-body">
<span class="ic-list__item-icon">
<i class="ic-icon-printer"></i>
</span>
<span class="ic-list__item-label">
Demo row
<div class="ic-text ic-text--aside">
11:22:33:44:55:66
</div>
</span>
</span>
<div class="ic-list__item-right">
<button class="ic-list__item-btn ic-list__item-btn--autohide">
<i class="ic-icon-edit"></i>
</button>
<button class="ic-list__item-btn ic-list__item-btn--drag">
<i class="ic-icon-drag"></i>
</button>
<button class="ic-list__item-btn">
<i class="ic-icon-next"></i>
</button>
</div>
</div>
</li>
<!-- Highlight list item with icon + aside + right buttons -->
<li class="ic-list__item ic-state-highlight">
<div class="ic-list__item-container">
<span class="ic-list__item-body">
<span class="ic-list__item-icon">
<i class="ic-icon-printer"></i>
</span>
<span class="ic-list__item-label">
Demo row
<div class="ic-text ic-text--aside">
11:22:33:44:55:66
</div>
</span>
</span>
<div class="ic-list__item-right">
<button class="ic-list__item-btn ic-list__item-btn--autohide ic-list__item-btn--active">
<i class="ic-icon-edit"></i>
</button>
<button class="ic-list__item-btn ic-list__item-btn--drag">
<i class="ic-icon-drag"></i>
</button>
<button class="ic-list__item-btn">
<i class="ic-icon-next"></i>
</button>
</div>
</div>
</li>
<!-- List item with checkbox + icon -->
<li class="ic-list__item">
<div class="ic-list__item-container">
<span class="ic-list__item-left">
<label class="ic-checkbox">
<input type="checkbox" class="ic-checkbox__input" checked />
<span class="ic-checkbox__button"></span>
</label>
</span>
<span class="ic-list__item-body">
<span class="ic-list__item-icon">
<i class="ic-icon-printer"></i>
</span>
<span class="ic-list__item-label">
Demo row
</span>
</span>
</div>
</li>
<!-- List item with icon + inline-edit -->
<li class="ic-list__item ic-state-editing">
<div class="ic-list__item-container">
<span class="ic-list__item-body">
<span class="ic-list__item-icon">
<i class="ic-icon-printer"></i>
</span>
<span class="ic-list__item-label">
<input class="ic-input" type="text"
placeholder="Text" value="Demo row" />
</span>
</span>
</div>
</li>
<!-- List item with icon + aside + state_indicator -->
<li class="ic-list__item">
<div class="ic-list__item-container">
<span class="ic-list__item-body">
<span class="ic-list__item-icon">
<i class="ic-icon-printer"></i>
</span>
<span class="ic-list__item-label">
<div class="ic-text-group">
<span class="ic-text-group__text">Demo row</span>
<span class="ic-label ic-text-group__icon">LABEL</span>
<i class="ic-icon ic-icon-loading ic-icon--spin ic-text-group__icon"></i>
</div>
<div class="ic-text ic-text--aside">
11:22:33:44:55:66
</div>
</span>
</span>
</div>
</li>
<!-- List item with icon + aside + state_indicator -->
<li class="ic-list__item">
<div class="ic-list__item-container">
<span class="ic-list__item-body">
<span class="ic-list__item-icon">
<i class="ic-icon-printer"></i>
</span>
<span class="ic-list__item-label">
<div class="ic-text-group">
<span class="ic-text-group__text">Demo row</span>
<span class="ic-label ic-text-group__icon">LABEL</span>
<i class="ic-icon ic-icon-success ic-text-group__icon"></i>
</div>
<div class="ic-text ic-text--aside">
11:22:33:44:55:66
</div>
</span>
</span>
</div>
</li>
<!-- List item with icon + aside + state_indicator + sort_handle -->
<li class="ic-list__item">
<div class="ic-list__item-container">
<span class="ic-list__item-body">
<span class="ic-list__item-icon">
<i class="ic-icon-printer"></i>
</span>
<span class="ic-list__item-label">
<div class="ic-text-group">
<span class="ic-text-group__text">
反正我就是總而言之名字很長的範例
</span>
<span class="ic-label ic-text-group__icon">LABEL</span>
<i class="ic-icon ic-icon-success ic-text-group__icon"></i>
</div>
<div class="ic-text ic-text--aside">
11:22:33:44:55:66
</div>
</span>
</span>
<span class="ic-list__item-right">
<button class="ic-list__item-btn ic-list__item-btn--drag">
<i class="ic-icon-drag"></i>
</button>
</span>
</div>
</li>
<!-- Error List item with icon + aside + sort handle -->
<li class="ic-list__item ic-state-error">
<div class="ic-list__item-container">
<span class="ic-list__item-body">
<span class="ic-list__item-icon">
<i class="ic-icon-printer"></i>
</span>
<span class="ic-list__item-label">
Demo row
<div class="ic-text ic-text--aside">
錯誤：你知道事情的嚴重性嗎?世新妹學士服照正翻，張根碩被指哈蒼井空。
</div>
</span>
</span>
<span class="ic-list__item-right">
<button class="ic-list__item-btn ic-list__item-btn--drag">
<i class="ic-icon-drag"></i>
</button>
</span>
</div>
</li>
<!-- Error List item with icon + aside + sort handle + retry btn -->
<li class="ic-list__item ic-state-error">
<div class="ic-list__item-container">
<span class="ic-list__item-body">
<span class="ic-list__item-icon">
<i class="ic-icon-printer"></i>
</span>
<span class="ic-list__item-label">
Demo row
<div class="ic-text ic-text--aside">
錯誤：你知道事情的嚴重性嗎?世新妹學士服照正翻，張根碩被指哈蒼井空。
</div>
</span>
</span>
<span class="ic-list__item-right">
<button class="ic-list__item-btn ic-list__item-btn--drag">
<i class="ic-icon-drag"></i>
</button>
<button class="ic-list__item-btn">
<i class="ic-icon-retry"></i>
</button>
</span>
</div>
</li>
</ul>
sortable list by Sortable
<ul id="demo-sortable-list" class="ic-list ic-list--setting">
<li class="ic-list__item">
<div class="ic-list__item-container">
<span class="ic-list__item-body">
<span class="ic-list__item-icon">
<i class="ic-icon-picture"></i>
</span>
<span class="ic-list__item-label">
Row
</span>
</span>
<span class="ic-list__item-right">
<button class="ic-list__item-btn ic-list__item-btn--drag">
<i class="ic-icon-drag"></i>
</button>
</span>
</div>
</li>
</ul>
<!-- https://github.com/RubaXa/Sortable -->
<script src="//rubaxa.github.io/Sortable/Sortable.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var $li = $('#demo-sortable-list li').clone();
for (var i = 0; i < 10; i++) {
$('#demo-sortable-list').append($li.clone());
}
setTimeout(function() {
var demoSortableList = document.getElementById('demo-sortable-list');
Sortable.create(demoSortableList, {
animation: 150,
forceFallback: true,
fallbackOnBody: true,
handle: '.ic-list__item-btn--drag',
ghostClass: 'ic-list__item--js-sortable-ghost',
chosenClass: 'ic-list__item--js-sortable-chosen',
fallbackClass: 'ic-list__item--js-sortable-fallback'
});
}, 100);
});
</script>
Tree List with checkbox
<ul class="ic-list ic-list--setting" id="ic-demo-tree-list">
<li class="ic-list__item">
<label class="ic-list__item-container">
<span class="ic-list__item-left">
<label class="ic-checkbox">
<input type="checkbox" class="ic-checkbox__input" />
<span class="ic-checkbox__button"></span>
</label>
</span>
<span class="ic-list__item-body">
<span class="ic-list__item-label">
Tree A
</span>
</span>
<span class="ic-list__item-right">
<button class="ic-list__item-btn">
<i class="ic-icon-fold"></i>
</button>
</span>
</label>
<!-- Sub tree -->
<ul>
<li class="ic-list__item">
<label class="ic-list__item-container">
<span class="ic-list__item-left">
<label class="ic-checkbox">
<input type="checkbox" class="ic-checkbox__input" />
<span class="ic-checkbox__button"></span>
</label>
</span>
<span class="ic-list__item-body">
<span class="ic-list__item-label">
Leaf 1
</span>
</span>
</label>
</li>
<li class="ic-list__item">
<label class="ic-list__item-container">
<span class="ic-list__item-left">
<label class="ic-checkbox">
<input type="checkbox" class="ic-checkbox__input" />
<span class="ic-checkbox__button"></span>
</label>
</span>
<span class="ic-list__item-body">
<span class="ic-list__item-label">
Leaf 2
</span>
</span>
<span class="ic-list__item-right">
<button class="ic-list__item-btn">
<i class="ic-icon-fold"></i>
</button>
</span>
</label>
<ul>
<li class="ic-list__item">
<label class="ic-list__item-container">
<span class="ic-list__item-left">
<label class="ic-checkbox">
<input type="checkbox" class="ic-checkbox__input" />
<span class="ic-checkbox__button"></span>
</label>
</span>
<span class="ic-list__item-body">
<span class="ic-list__item-label">
Grandchild 1
</span>
</span>
</label>
</li>
</ul>
</li>
<li class="ic-list__item">
<label class="ic-list__item-container">
<span class="ic-list__item-left">
<label class="ic-checkbox">
<input type="checkbox" class="ic-checkbox__input" />
<span class="ic-checkbox__button"></span>
</label>
</span>
<span class="ic-list__item-body">
<span class="ic-list__item-label">
Leaf 3
</span>
</span>
</label>
</li>
</ul>
</li>
<li class="ic-list__item">
<label class="ic-list__item-container">
<span class="ic-list__item-left">
<label class="ic-checkbox">
<input type="checkbox" class="ic-checkbox__input" />
<span class="ic-checkbox__button"></span>
</label>
</span>
<span class="ic-list__item-body">
<span class="ic-list__item-label">
Tree B
</span>
</span>
</label>
</li>
</ul>
<script>
document.addEventListener('DOMContentLoaded', function() {
$('#ic-demo-tree-list').on('click', '.ic-list__item-btn', function(event) {
$(event.currentTarget).closest('.ic-list__item').toggleClass('ic-state-folded');
$(event.currentTarget).children('i').toggleClass('ic-icon-fold ic-icon-unfold')
});
});
</script>
Basic Section
<section class="ic-section">
<h3 class="ic-section__title">Demo Settings</h3>
<div class="ic-section__container">
<ul class="ic-list ic-list--setting">
<li class="ic-list__item">
<div class="ic-list__item-container">
<div class="ic-list__item-body">
<div class="ic-list__item-label">Store ID</div>
<div class="ic-list__item-value">RESTAURANT 1</div>
</div>
</div>
</li>
</ul>
</div>
<div class="ic-section__comment">
Hey I am a comment.<br/> Hey I am a comment. Hey I am a comment. Hey I am a comment. Hey I am a comment. <br/> Hey I am a comment. Hey I am a comment. Hey I am a comment. Hey I am a comment. Hey I am a comment. Hey I am a comment.
</div>
</section>
Multi Sections
<section class="ic-section">
<h3 class="ic-section__title">Demo Settings</h3>
<div class="ic-section__container">
<ul class="ic-list ic-list--setting">
<li class="ic-list__item">
<div class="ic-list__item-container">
<div class="ic-list__item-body">
<div class="ic-list__item-label">Store ID</div>
<div class="ic-list__item-value">RESTAURANT 1</div>
</div>
</div>
</li>
<li class="ic-list__item">
<div class="ic-list__item-container">
<div class="ic-list__item-body">
<div class="ic-list__item-label">Store ID</div>
<div class="ic-list__item-value">RESTAURANT 2</div>
</div>
</div>
</li>
<li class="ic-list__item">
<div class="ic-list__item-container">
<div class="ic-list__item-body">
<div class="ic-list__item-label">Store ID</div>
<div class="ic-list__item-value">RESTAURANT 3</div>
</div>
</div>
</li>
</ul>
</div>
</section>
<section class="ic-section">
<h3 class="ic-section__title">Demo Settings 2</h3>
<div class="ic-section__container">
<ul class="ic-list ic-list--setting">
<li class="ic-list__item">
<div class="ic-list__item-container">
<div class="ic-list__item-body">
<div class="ic-list__item-label">Store ID</div>
<div class="ic-list__item-value">RESTAURANT 1</div>
</div>
</div>
</li>
<li class="ic-list__item">
<div class="ic-list__item-container">
<div class="ic-list__item-body">
<div class="ic-list__item-label">Store ID</div>
<div class="ic-list__item-value">RESTAURANT 2</div>
</div>
</div>
</li>
</ul>
</div>
<div class="ic-section__comment">
Hey I am a comment. Hey I am a comment. Hey I am a comment. Hey I am a comment. <br/> Hey I am a comment. Hey I am a comment.
</div>
</section>
Hey I am a comment. Hey I am a comment. Hey I am a comment. Hey I am a comment.
Hey I am a comment. Hey I am a comment. Hey I am a comment. Hey I am a comment. Hey I am a comment. Hey I am a comment.