adriatic

<template>
  <require from="./integration-with-editors.css"></require>
  <div id="example">
    <div class="demo-section k-content wide">
        <h4>Customize the element</h4>
        <ak-toolbar id="toolbar"
                   k-resizable.bind="false"
                   k-on-toggle.delegate="onToggle($event.detail)">
          <ak-toolbar-item>
            <ak-template>

adriatic

<template>
  <div id="example">
    <div class="demo-section k-content wide">
      <ak-toolbar k-widget.bind="toolbar">
        <ak-toolbar-item k-type="buttonGroup" k-id="playerControls" k-text="Button">
          <ak-toolbar-item-button k-id="play" k-text="play" k-togglable.bind="true" k-group="player"></ak-toolbar-item-button>
          <ak-toolbar-item-button k-id="pause" k-text="pause" k-togglable.bind="true" k-group="player" k-selected.bind="true"></ak-toolbar-item-button>
          <ak-toolbar-item-button k-id="stop" k-text="stop" k-togglable.bind="true" k-group="player"></ak-toolbar-item-button>
        </ak-toolbar-item>
        <ak-toolbar-item k-type="button" k-togglable.bind="true" k-id="repeat" k-text="repeat"></ak-toolbar-item>

adriatic

<template>
  <require from="./logger.js"></require>
  <div id="example">
    <div class="demo-section k-content wide">
      <ak-toolbar k-on-click.delegate="click($event.detail)"
                 k-on-toggle.delegate="toggle($event.detail)"
                 k-on-overflow-open.delegate="overflowOpen($event.detail)"
                 k-on-overflow-close.delegate="overflowClose($event.detail)"
                 k-on-open.delegate="open($event.detail)"
                 k-on-close.delegate="close($event.detail)">

adriatic

<template>
  <div id="example">
    <div class="demo-section k-content wide">
      <ak-toolbar>
        <ak-toolbar-item k-overflow="never">
          <ak-template>
            <img src='http://demos.telerik.com/kendo-ui/content/web/toolbar/user.png' class='user-image'/>
          </ak-template>
        </ak-toolbar-item>
        <ak-toolbar-item k-type="button" k-text="Send" k-overflow="never"></ak-toolbar-item>

adriatic

<template>
  <require from="./images.css"></require>
  <div id="example">
    <div class="demo-section k-content">

      <h4>Menu with images</h4>

      <ul id="menu-images" ak-menu="k-data-source.bind: dataSource"></ul>
    </div>

adriatic

<template>
    <div id="example">
        <div class="box wide">
            <div class="box-col">
                <h4>Set / Get Value</h4>
                <ul class="options">
                    <li>
                        <input id="value" ak-timepicker="k-value.bind : '10:30 AM'; k-widget.two-way: valueTimePicker" style="float:none"/>
                        <button id="set" class="k-button" click.delegate="setValue()">Set value</button>
                    </li>

adriatic

<!-- app.html  -->

adriatic

<template>
  <div id="example">
      <div class="demo-section k-content">
          <h4>Set alarm time</h4>
          <input id="timepicker" ak-timepicker="k-value: 10:00AM" style="width: 100%;" />

          <h4 style="padding-top: 2em;">Alarm descriprion</h4>
          <input id="descr" class="k-textbox" type="text" value="Wake up" style="width: 100%" />
      </div>
  </div>

adriatic

<template>
  <div id="example">

    <div class="box wide">
      <div class="box-col">
        <h4>Select</h4>
        <ul class="options">
          <li>
            <input type="text" value.bind="tabIndex" class="k-textbox"/>
            <button ak-button click.delegate="selectTab()">Select</button>

adriatic

<template>
  <require from="./logger.js"></require>
  <require from="./events.css"></require>
  <div id="example">
    <div class="demo-section k-content">
      <div id="tabstrip" ak-tabstrip="k-content-urls.bind: contentUrls"
           k-on-select.delegate="select($event.detail)"
           k-on-activate.delegate="onActivate($event.detail)"
           k-on-show.delegate="show($event.detail)"
           k-on-content-load.delegate="contentLoad($event.detail)"