Testcases for Onsen CSS Components

Switch

Show code snippets
<label class="switch">
  <input type="checkbox" class="switch__input">
  <div class="switch__toggle"></div>
</label>
<label class="switch">
  <input type="checkbox" class="switch__input" checked>
  <div class="switch__toggle"></div>
</label>
<label class="switch">
  <input type="checkbox" class="switch__input" disabled>
  <div class="switch__toggle"></div>
</label>

Range

Show code snippets
<input type="range" class="range">
<input type="range" class="range" disabled>

Android-like Navigation Bar

Show code snippets
<div class="navigation-bar navigation-bar--android">
  <div class="navigation-bar__left navigation-bar--android__left">
    <span class="toolbar-button navigation-bar__line-height" style="padding:0 5px 0 5px;"><i class="ion-android-arrow-back" style="font-size:20px;"></i></span>
  </div>
  <div class="navigation-bar__center navigation-bar--android__center">
    <span class="toolbar-button navigation-bar__line-height" style="padding:0">
      <i class="ion-cube" style="font-size:20px;"></i> App Bar
    </span>
  </div>
  <div class="navigation-bar__right navigation-bar--android__right">
    <span class="toolbar-button--quiet navigation-bar__line-height">
      <i class="ion-android-share" style="font-size:20px;"></i>
    </span>
    <span class="toolbar-button--quiet navigation-bar__line-height">
      <i class="ion-android-more" style="font-size:20px;"></i>
    </span>
  </div>
</div>

Android-like Navigation Bar(2)

Show code snippets
<div class="navigation-bar navigation-bar--android">
  <div class="navigation-bar__left navigation-bar--android__left">
    <span class="toolbar-button navigation-bar__line-height" style="padding:0 5px 0 0;"><i class="ion-android-drawer" style="font-size:20px;"></i></span>
  </div>
  <div class="navigation-bar__center navigation-bar--android__center">
    App Bar
  </div>
  <div class="navigation-bar__right navigation-bar--android__right">
    <span class="toolbar-button--quiet navigation-bar__line-height">
      <i class="ion-android-star" style="font-size:20px;"></i>
    </span>
    <span class="toolbar-button--quiet navigation-bar__line-height">
      <i class="ion-android-search" style="font-size:20px;"></i>
    </span>
    <span class="toolbar-button--quiet navigation-bar__line-height">
      <i class="ion-android-more" style="font-size:20px;"></i>
    </span>
  </div>
</div>

Transparent Navigation Bar

Show code snippets
<div class="navigation-bar navigation-bar--transparent">
  <div class="navigation-bar__left">
    <span class="toolbar-button--quiet navigation-bar__line-height">
      <i class="ion-navicon" style="font-size:32px; vertical-align:-6px;"></i>
    </span>
  </div>
  <div class="navigation-bar__center">
    Navigation Bar
  </div>
  <div class="navigation-bar__right">
    <span class="toolbar-button--quiet navigation-bar__line-height">Label</span>
  </div>
</div>

Transparent Navigation Bar

Show code snippets
<!-- Prerequisite=This example use ionicons(http://ionicons.com) to display icons. -->
<div class="navigation-bar navigation-bar--transparent">
  <div class="navigation-bar__left">
    <span class="toolbar-button--quiet navigation-bar__line-height">
      <i class="ion-navicon" style="font-size:32px; vertical-align:-6px;"></i>
    </span>
  </div>
  <div class="navigation-bar__center">
    Navigation Bar
  </div>
  <div class="navigation-bar__right">
    <span class="toolbar-button--quiet navigation-bar__line-height">Label</span>
  </div>
</div>

Bottom Bar

Bottom Toolbar
Show code snippets
<div class="bottom-bar">
  <div class="bottom-bar__line-height" style="text-align:center">Bottom Toolbar</div>
</div>

Button

Show code snippets
<button class="button">Button</button>
<button class="button" disabled>Button</button>

Outline Button

Show code snippets
<button class="button button--outline">Button</button>
<button class="button button--outline" disabled>Button</button>

Light Button

Show code snippets
<button class="button button--light">Button</button>
<button class="button button--light" disabled>Button</button>

Quiet Button

Show code snippets
<button class="button--quiet">Button</button>
<button class="button--quiet" disabled>Button</button>

Call To Action Button

Show code snippets
<button class="button--cta">Button</button>
<button class="button--cta" disabled>Button</button>

Large Button

Large Quiet Button

Large Call To Action Button

Button Bar

Show code snippets
<div class="button-bar" style="width:280px;margin:0 auto;">
  <div class="button-bar__item">
    <button class="button-bar__button">One</button>
  </div>
  <div class="button-bar__item">
    <button class="button-bar__button">Two</button>
  </div>
  <div class="button-bar__item">
    <button class="button-bar__button">Three</button>
  </div>
</div>

Segment

Show code snippets
<div class="button-bar" style="width:280px;margin:0 auto;">
  <div class="button-bar__item">
    <input type="radio" name="segment-a" checked>
    <button class="button-bar__button">One</button>
  </div>
  <div class="button-bar__item">
    <input type="radio" name="segment-a">
    <button class="button-bar__button">Two</button>
  </div>
  <div class="button-bar__item">
    <input type="radio" name="segment-a">
    <button class="button-bar__button">Three</button>
  </div>
</div>

Icon Tab Bar

Show code snippets
<!-- Prerequisite=This example use ionicons(http://ionicons.com) to display icons. -->
<div class="tab-bar">
  <label class="tab-bar__item">
    <input type="radio" name="tab-bar-a" checked="checked">
    <button class="tab-bar__button">
      <i class="tab-bar__icon ion-stop"></i>
      <div class="tab-bar__label">One</div>
    </button>
  </label>

  <label class="tab-bar__item">
    <input type="radio" name="tab-bar-a">
    <button class="tab-bar__button">
      <i class="tab-bar__icon ion-record"></i>
      <div class="tab-bar__label">Two</div>
    </button>
  </label>

  <label class="tab-bar__item">
    <input type="radio" name="tab-bar-a">
    <button class="tab-bar__button">
      <i class="tab-bar__icon ion-star"></i>
      <div class="tab-bar__label">Three</div>
    </button>
  </label>
</div>

Tab Bar

Show code snippets
<div class="tab-bar">
  <label class="tab-bar__item">
    <input type="radio" name="tab-bar-c" checked="checked">
    <button class="tab-bar__button">
      <div class="tab-bar__label">One</div>
    </button>
  </label>

  <label class="tab-bar__item">
    <input type="radio" name="tab-bar-c">
    <button class="tab-bar__button">
      <div class="tab-bar__label">Two</div>
    </button>
  </label>

  <label class="tab-bar__item">
    <input type="radio" name="tab-bar-c">
    <button class="tab-bar__button">
      <div class="tab-bar__label">Three</div>
    </button>
  </label>
</div>

Icon Only Tab Bar

Show code snippets
<!-- Prerequisite=This example use ionicons(http://ionicons.com) to display icons. -->
<div class="tab-bar">
  <label class="tab-bar__item">
    <input type="radio" name="tab-bar-b" checked="checked">
    <button class="tab-bar__button">
      <i class="tab-bar__icon ion-stop"></i>
    </button>
  </label>

  <label class="tab-bar__item">
    <input type="radio" name="tab-bar-b">
    <button class="tab-bar__button">
      <i class="tab-bar__icon ion-record"></i>
    </button>
  </label>

  <label class="tab-bar__item">
    <input type="radio" name="tab-bar-b">
    <button class="tab-bar__button">
      <i class="tab-bar__icon ion-star"></i>
    </button>
  </label>

  <label class="tab-bar__item">
    <input type="radio" name="tab-bar-b">
    <button class="tab-bar__button">
      <i class="tab-bar__icon ion-ios-cloud-outline"></i>
    </button>
  </label>

  <label class="tab-bar__item">
    <input type="radio" name="tab-bar-b">
    <button class="tab-bar__button">
      <i class="tab-bar__icon ion-ios-pie"></i>
    </button>
  </label>
</div>

Top Tab Bar

Show code snippets
<div class="tab-bar tab-bar--top">
  <label class="tab-bar__item">
    <input type="radio" name="top-tab-bar-a" checked="checked">
    <button class="tab-bar__button">
      <i class="tab-bar__icon ion-stop"></i>
    </button>
  </label>

  <label class="tab-bar__item">
    <input type="radio" name="top-tab-bar-a">
    <button class="tab-bar__button">
      <i class="tab-bar__icon ion-record"></i>
    </button>
  </label>

  <label class="tab-bar__item">
    <input type="radio" name="top-tab-bar-a">
    <button class="tab-bar__button">
      <i class="tab-bar__icon ion-star"></i>
    </button>
  </label>
</div>

Bordered Top Tab Bar

Show code snippets
<div class="tab-bar tab-bar--top tab-bar--top-border">
  <label class="tab-bar__item tab-bar--top-border__item">
    <input type="radio" name="top-tab-bar-b" checked="checked">
    <button class="tab-bar__button tab-bar--top-border__button">
      Home
    </button>
  </label>

  <label class="tab-bar__item tab-bar--top-border__item">
    <input type="radio" name="top-tab-bar-b">
    <button class="tab-bar__button tab-bar--top-border__button">
      Comments
    </button>
  </label>

  <label class="tab-bar__item tab-bar--top-border__item">
    <input type="radio" name="top-tab-bar-b">
    <button class="tab-bar__button tab-bar--top-border__button">
      Activity
    </button>
  </label>
</div>

Notification

1 10 999
Show code snippets
<span class="notification">1</span>
<span class="notification">10</span>
<span class="notification">999</span>

Toolbar Button

Show code snippets
<!-- Prerequisite=This example use font-awesome(http://fortawesome.github.io/Font-Awesome/) to display icons. -->
<button class="toolbar-button">
  <i class="fa fa-bell" style="font-size:17px"></i> Label
</button>

<button class="toolbar-button toolbar-button--outline">
  <i class="fa fa-bell" style="font-size:17px"></i> Label
</button>

Checkbox

Show code snippets
<label class="checkbox">
  <input type="checkbox">
  <div class="checkbox__checkmark"></div>
  OFF
</label>

<label class="checkbox">
  <input type="checkbox" checked="checked">
  <div class="checkbox__checkmark"></div>
  ON
</label>

<label class="checkbox">
  <input type="checkbox" disabled>
  <div class="checkbox__checkmark"></div>
  Disabled
</label>

No border Checkbox

Show code snippets
<label class="checkbox--noborder">
  <input type="checkbox">
  <div class="checkbox__checkmark"></div>
  OFF
</label>

<label class="checkbox--noborder">
  <input type="checkbox" checked="checked">
  <div class="checkbox__checkmark"></div>
  ON
</label>

<label class="checkbox--noborder">
  <input type="checkbox" disabled checked="checked">
  <div class="checkbox__checkmark"></div>
  Disabled
</label>

Radio Button

Show code snippets
<label class="radio-button">
  <input type="radio" name="r" checked="checked">
  <div class="radio-button__checkmark"></div>
  Label
</label>

<label class="radio-button">
  <input type="radio" name="r">
  <div class="radio-button__checkmark"></div>
  Label
</label>

<label class="radio-button">
  <input type="radio" name="r">
  <div class="radio-button__checkmark"></div>
  Label
</label>

List

  • Item
  • Item
Show code snippets
<ul class="list">
  <li class="list__item">
    <span class="list__item__line-height">Item</span>
  </li>
  <li class="list__item">
    <span class="list__item__line-height">Item</span>
  </li>
</ul>

Noborder List

  • Item
  • Item
Show code snippets
<ul class="list list--noborder">
  <li class="list__item">
    <span class="list__item__line-height">Item</span>
  </li>
  <li class="list__item">
    <span class="list__item__line-height">Item</span>
  </li>
</ul>

Category List Header

  • Header
  • Item
  • Header
  • Item
Show code snippets
<ul class="list">
  <li class="list__header">
    Header
  </li>
  <li class="list__item">
    Item
  </li>
  <li class="list__header">
    Header
  </li>
  <li class="list__item">
    Item
  </li>
</ul>

Tappable List

  • Tappable Item
Show code snippets
<ul class="list">
  <li class="list__item list__item--tappable">
    Tappable Item
  </li>
</ul>

Switch in List Item

  • Label
  • Label
Show code snippets
<ul class="list">
  <li class="list__item">
    Label
    <label class="switch switch--list-item">
      <input type="checkbox" class="switch__input" checked>
      <div class="switch__toggle"></div>
    </label>
  </li>
  <li class="list__item">
    Label
    <label class="switch switch--list-item">
      <input type="checkbox" class="switch__input">
      <div class="switch__toggle"></div>
    </label>
  </li>
</ul>

List Item with Chevron

  • Tappable Item
  • Tappable Item
Show code snippets
<ul class="list">
  <li class="list__item list__item--chevron">
    Tappable Item
  </li>
  <li class="list__item list__item--chevron">
    Tappable Item
  </li>
</ul>

Inset List

  • List Item with Chevron
  • List Item with Chevron
Show code snippets
<ul class="list list--inset">
  <li class="list__item list--inset__item list__item--chevron">
    List Item with Chevron
  </li>
  <li class="list__item list--inset__item list__item--chevron">
    List Item with Chevron
  </li>
</ul>

Radio Button in List Item

Show code snippets
<ul class="list">
  <li class="list__item list__item--tappable">
    <label class="radio-button radio-button--list-item">
      <input type="radio" name="b" checked="checked">
      <div class="radio-button__checkmark radio-button--list-item__checkmark"></div>
      Radio Button
    </label>
  </li>
  <li class="list__item list__item--tappable">
    <label class="radio-button radio-button--list-item">
      <input type="radio" name="b">
      <div class="radio-button__checkmark radio-button--list-item__checkmark"></div>
      Radio Button
    </label>
  </li>
</ul>

Checkbox in List Item

Show code snippets
<ul class="list">
  <li class="list__item list__item--tappable">
    <label class="checkbox checkbox--list-item">
      <input type="checkbox">
      <div class="checkbox__checkmark checkbox--list-item__checkmark"></div>
      Checkbox
    </label>
  </li>
  <li class="list__item list__item--tappable">
    <label class="checkbox checkbox--list-item">
      <input type="checkbox" checked>
      <div class="checkbox__checkmark checkbox--list-item__checkmark"></div>
      Checkbox
    </label>
  </li>
</ul>

No border Checkbox in List Item

Show code snippets
<ul class="list">
  <li class="list__item list__item--tappable">
    <label class="checkbox checkbox--noborder checkbox--list-item">
      <input type="checkbox">
      <div class="checkbox__checkmark checkbox--noborder checkbox--list-item__checkmark"></div>
      Checkbox
    </label>
  </li>
  <li class="list__item list__item--tappable">
    <label class="checkbox checkbox--noborder checkbox--list-item">
      <input type="checkbox" checked>
      <div class="checkbox__checkmark checkbox--noborder checkbox--list-item__checkmark"></div>
      Checkbox
    </label>
  </li>
</ul>

Text Input in List Item

Show code snippets
<ul class="list">
  <li class="list__item">
    <input type="text" class="text-input text-input--transparent" style="width:100%; margin-top:4px;" placeholder="name">
  </li>
  <li class="list__item">
    <input type="text" class="text-input text-input--transparent" style="width:100%; margin-top:4px;" placeholder="email">
  </li>
</ul>

Textarea in List Item

Show code snippets
<ul class="list">
  <li class="list__item">
    <textarea class="textarea textarea--transparent" style="width:100%;height:50px;margin-top:4px;" placeholder="text message"></textarea>
  </li>
</ul>

Right Label in List Item

  • Label
    Label
Show code snippets
<ul class="list">
  <li class="list__item">
    <div class="list__right-label">Label</div>
    Label
  </li>
</ul>

Search Input

Show code snippets
<input type="search" value="" placeholder="Search" class="search-input">

Text Input


Show code snippets
<input type="text" class="text-input" placeholder="text" value="">
<br>
<input type="text" class="text-input" placeholder="text" value="" disabled>

Transparent Text Input


Show code snippets
<input type="text" class="text-input--transparent" placeholder="text" value="">
<br>
<input type="text" class="text-input--transparent" placeholder="text" value="" disabled>

Underbar Text Input


Show code snippets
<input type="text" class="text-input--underbar" placeholder="text" value="">
<br>
<input type="text" class="text-input--underbar" placeholder="text" value="" disabled>

Textarea

Show code snippets
<textarea class="textarea" rows="3" placeholder="Textarea"></textarea>

Textarea Transparent

Show code snippets
<textarea class="textarea--transparent" rows="3" placeholder="Textarea"></textarea>

Dialog

Content

Show code snippets
<div class="dialog-mask"></div>
<div class="dialog">
  <div class="page">
    <p style="text-align:center;margin-top:40px;opacity:0.4;">Content</p>
  </div>
</div>

Alert Dialog

Alert
Hello World!
Show code snippets
<div class="alert-dialog-mask"></div>
<div class="alert-dialog">
  <div class="alert-dialog-title">Alert</div>

  <div class="alert-dialog-content">
    Hello World!
  </div>

  <div class="alert-dialog-footer">
    <button class="alert-dialog-button alert-dialog-button--primal">OK</button>
  </div>
</div>

Alert Dialog without Title

Hello World!
Show code snippets
<div class="alert-dialog-mask"></div>
<div class="alert-dialog">
  <div class="alert-dialog-content">
    Hello World!
  </div>

  <div class="alert-dialog-footer">
    <button class="alert-dialog-button alert-dialog-button--primal">OK</button>
  </div>
</div>

Alert Dialog with Multiple Buttons

Hello World!
Show code snippets
<div class="alert-dialog-mask"></div>
<div class="alert-dialog">
  <div class="alert-dialog-content">
    Hello World!
  </div>

  <div class="alert-dialog-footer">
    <button class="alert-dialog-button">Cancel</button>
    <button class="alert-dialog-button alert-dialog-button--primal">OK</button>
  </div>
</div>

Alert Dialog with Multiple Buttons 2

Alert
Hello World!
Show code snippets
<div class="alert-dialog-mask"></div>
<div class="alert-dialog">
  <div class="alert-dialog-title">Alert</div>

  <div class="alert-dialog-content">
    Hello World!
  </div>

  <div class="alert-dialog-footer alert-dialog-footer--one">
    <button class="alert-dialog-button alert-dialog-button--one">Left</button>
    <button class="alert-dialog-button alert-dialog-button--primal alert-dialog-button--one">Center</button>
    <button class="alert-dialog-button alert-dialog-button--one">Right</button>
  </div>
</div>

Android-like Alert Dialog

Alert
Hello World!
Show code snippets
<div class="alert-dialog-mask"></div>

<div class="alert-dialog alert-dialog--android">
  <div class="alert-dialog-title alert-dialog-title--android">
    Alert
  </div>

  <div class="alert-dialog-content alert-dialog-content--android">
    Hello World!
  </div>

  <div class="alert-dialog-footer alert-dialog-footer--one">
    <button class="alert-dialog-button alert-dialog-button--one">Cancel</button>
    <button class="alert-dialog-button alert-dialog-button--primal alert-dialog-button--one">Ok</button>
  </div>
</div>

Popover

Content
Show code snippets
<div class="popover-mask"></div>
<div class="popover popover--up" style="bottom:20px;left:50px;">
  <div class="popover__bottom-arrow"></div>
  <div class="popover__content">
    <div style="text-align:center;opacity:0.4;margin-top:40px">Content</div>
  </div>
</div>

Popover(down)

Content
Show code snippets
<div class="popover-mask"></div>
<div class="popover popover--down" style="top:20px;left:50px;">
  <div class="popover__top-arrow"></div>
  <div class="popover__content">
    <div style="text-align:center;opacity:0.4;margin-top:40px">Content</div>
  </div>
</div>

Popover(left)

Content
Show code snippets
<div class="popover-mask"></div>
<div class="popover popover--left" style="top:20px;right:20px;">
  <div class="popover__right-arrow"></div>
  <div class="popover__content">
    <div style="text-align:center;opacity:0.4;margin-top:40px">Content</div>
  </div>
</div>

Popover(right)

Content
Show code snippets
<div class="popover-mask"></div>
<div class="popover popover--right" style="top:20px;left:20px;">
  <div class="popover__left-arrow"></div>
  <div class="popover__content">
    <div style="text-align:center;opacity:0.4;margin-top:40px">Content</div>
  </div>
</div>

Android-like Popover

Content
Show code snippets
<div class="popover-mask"></div>
<div class="popover popover--up popover" style="top:10px;right:10px;">
  <div class="popover__content popover__content--android">
    <div style="text-align:center;opacity:0.4;margin-top:40px">Content</div>
  </div>
</div>