Examples

Intro

Component examples can be used as a starting point for your own component library or app.

npm install @conductorlab/tonic
npm install @conductorlab/components

const Tonic = require('@conductorlab/tonic')
const registerComponents = require('@conductorlab/components')

registerComponents(Tonic) // registers all the components for you

See the github link in each example and the docs page for more details.

Accordion

The Accordion component creates a set of interactive headings that hide and show content sections, with Keyboard Support

Demo

Add the multiple property to the tonic-accordion component to allow multiple sections to be expanded at one time.

Code

HTML

  <tonic-accordion>
    <tonic-accordion-section
      name="bucket-test-1"
      id="bucket-test-1"
      data="preview"
      label="Accordion Test 1">
      Whatever
    </tonic-accordion-section>
    <tonic-accordion-section
      name="bucket-test-2"
      id="bucket-test-2"
      label="Accordion Test 2">
      Some Content
    </tonic-accordion-section>
    <tonic-accordion-section
      name="bucket-test-3"
      id="bucket-test-3"
      label="Accordion Test 3">
      The visual design includes features intended to help users understand that the accordion provides enhanced keyboard navigation functions. When an accordion header button has keyboard focus, the styling of the accordion container and all its header buttons is changed.
    </tonic-accordion-section>
  </tonic-accordion>

Api

Properties

for TonicAccordion

for TonicAccordionSection

Instance Members

Badge

The Badge component creates a notification badge with a counter and unread alert.

Demo

Code

To update the notification count, pass in the count property.

HTML

<tonic-badge></tonic-badge>

JS

tonicBadge.value = 5

Api

Properties

Instance Members

Button

The Button component creates a button.

Demo

Code

HTML

<tonic-button
  async="true"
  id="tonic-button-example"
  value="click-me">Click me
</tonic-button>

JS

const button = document.getElementById('tonic-button-example')
button.addEventListener('click', e => {
  setTimeout(() => {
    button.loading(false)
  }, 3e3)
})

Api

Properties

Instance Methods & Members

Chart

An example component that uses chart.js 2.8.0.

Code

HTML

Options is optional and contains any valid chartjs configuration options.

const opts = {
  tooltips: {
    enabled: false
  },
  legend: {
    display: false
  },
  drawTicks: true,
  drawBorder: true
}

<tonic-chart
  type="horizontalBar"
  width="300"
  height="150px"
  options=${opts}
  src="/chartdata.json">
</tonic-chart>

JSON

{
  "labels": ["Foo", "Bar", "Bazz"],
  "datasets": [{
    "label": "Quxx (millions)",
    "backgroundColor": ["#c3c3c3", "#f06653", "#8f8f8f"],
    "data": [278, 467, 34]
  }]
}

Api

Properties

Instance Methods & Members

Checkbox

The Checkbox component is used to create a styled checkbox, with or without a label. You can also create a custom checkbox using SVG icons.

Note: This component requires the tonic-sprite component.

Demo

Code

HTML

<tonic-checkbox
  id="tonic-checkbox-example"
  label="Checkbox with Label">
</tonic-checkbox>

Api

Properties

Instance Properties

Static Methods

Dialog

A Dialog is not a component, it is a base class. You can extend it to create your own dialog class which can be registered and then used as a tag.

Note: This component requires the tonic-sprite component.

Demo

Code

HTML

<tonic-dialog id="example-dialog" message="Click update for timestamp">
</tonic-dialog>

JS

class TonicDialog extends Tonic.Dialog {
  willConnect () {
    this.state.message = this.props.message
  }

  click (e) {
    if (!Tonic.match(e.target, '#update')) return

    this.setState(state => ({
      ...state,
      message: `Date stamp ${Date.now()}`
    }))

    this.reRender()
  }

  render () {
    return `
      <header>Dialog</header>
      <main>
        ${this.state.message}
      </main>
      <footer>
        <tonic-button id="update">Update</tonic-button>
      </footer>
    `
  }
}

Tonic.add(TonicDialog)

const link = document.getElementById('example-dialog-link')
const dialog = document.getElementById('example-dialog')

link.addEventListener('click', e => dialog.show())

Api

Properties

Instance Methods & Members

Icon

The Icon component is used to create an SVG icon with a custom size and color.

Your single SVG sprite file should have the following base structure, using <symbol> and an id to refer to the specific icon:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <symbol id="example">
    <path />
  </symbol>
</svg>

Demo

Code

HTML

<tonic-icon
  symbol-id="example"
  src="/sprite.svg"
  fill="red"
  size="40px">
</tonic-icon>

Api

Properties

Input

The Input component creates an input that can be invalidated.

Demo

Code

HTML

<tonic-input
  label="Email Address"
  type="email"
  width="280px"
  id="tonic-input-example"
  placeholder="Enter a valid email address"
  spellcheck="false"
  error-message="Invalid Email">
</tonic-input>

The input will validate automatically if you specify the type or the pattern attribute.

You can also validate or invalidate an input with Javascript using the methods setValid() and setInvalid()

JS

setInvalid.addEventListener('click', (e) => {
  input.setInvalid('There was a problem')
})

Api

Properties

Instance Methods

Instance Members

Panel

A Panel is not a component, it is a base class. You can extend it to create your own panel class which can be registered and then used as a tag.

Note: This component requires the tonic-sprite component.

Demo

Code

HTML

<tonic-panel
  id="content-panel-example"
  overlay="true">
</tonic-panel>

JS

const fetch = require('node-fetch')

class TonicPanel extends Tonic.Panel { /* global Tonic */
  async getArticle (title) {
    try {
      const res = await fetch(`https://en.wikipedia.org/w/api.php?format=json&action=query&prop=extracts&exintro=&explaintext=&titles=${title}&origin=*`)
      return Object.values((await res.json()).query.pages)[0]
    } catch (err) {
      return { title: 'Error', extract: err.message }
    }
  }

  async click (e) {
    if (e.target.value === 'close') {
      return this.hide()
    }

    if (e.target.value === 'get') {
      const page = await this.getArticle('HTML')

      this.reRender(props => ({
        ...props,
        ...page
      }))
    }
  }

  async * render () {
    return `
      <div class="tonic--header">Panel Example</div>
      <div class="tonic--main">
        <h3>${this.props.title || 'Hello'}
        <p>${this.props.extract || 'Click "get" to fetch the content from Wikipedia.'}</p>
      </div>
      <div class="tonic--footer">
        <tonic-button value="close">Close</tonic-button>
        <tonic-button value="get" async="true">Get</tonic-button>
      </div>
    `
  }
}

Tonic.add(TonicPanel)

//
// For this example, a button element will trigger the
// `.show()` method on the panel when it is clicked.
//
const panelLink = document.getElementById('content-panel-link-example')
const panel = document.getElementById('content-panel-example')

panelLink.addEventListener('click', e => panel.show())

Api

Properties

Instance Methods & Members

Popover

The popover component creates a popover activated by a click event. It is positioned in relation to the trigger.

Demo

Code

HTML

<tonic-popover id="popover-example" width="175px" for="popover-example-trigger">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</tonic-popover>

Api

Properties

Instance Methods & Members

ProfileImage

The ProfileImage component is used to create an SVG icon with a custom size and color.

Note: This component requires the tonic-sprite component.

Demo

Code

HTML

<tonic-profile-image
  id="profile-image-example-editable"
  size="150px"
  editable="true">
</tonic-profile-image>

JS

const profile = document.getElementById('profile-image-example-editable')

profile.addEventListener('change', e => console.log(e.data))
profile.addEventListener('error', e => console.log(e.message))

Api

Properties

Events

ProgressBar

The ProgressBar component creates an updatable progress bar.

Demo

Code

HTML

<tonic-progress-bar id="progress-bar-example">
</tonic-progress-bar>

Api

Properties

Instance Methods

Instance Members

Range

The Range component creates a range input, or slider.

Demo

Code

HTML

<tonic-range
  label="The value is %i%"
  id="tonic-range-example">
</tonic-range>

Api

Properties

Instance Members

Router

The Router component will render its children components if the browser's current url matches its path property. This component will detect pushstate, popstate and replacestate events and re-render with the attributes of the url as props.

Demo

Code

HTML

<tonic-router id="page1" path="/examples.html">
  <i>Hello, World</i>
</tonic-router>

<tonic-router id="page2" path="/bar/:number">
  <b>number</b> prop has the value <b id="page2-number"></b>.
</tonic-router>

<tonic-router none>404</tonic-router>

JS

const select = document.getElementById('tonic-router-select')
const page2 = document.getElementById('page2')

select.addEventListener('change', e => {
  window.history.pushState({}, '', select.value)
})

page2.addEventListener('match', () => {
  const { number } = page2.getState()
  const el = document.getElementById('page2-number')
  el.textContent = number
})

Api

Properties

Events

Select

The Select component creates a select input.

Demo

Code

HTML

<tonic-select>
  <option value="a">Option A</option>
  <option value="b">Option B</option>
  <option value="c">Option C</option>
</tonic-select>

JS

const select = document.getElementById('options-example-1')
const notification = document.getElementsByTagName('tonic-toaster')[0]

select.addEventListener('change', ({ target }) => {
  notification.create({
    type: 'success',
    message: `Selected option was "${select.value}".`,
    title: 'Selection',
    duration: 2000
  })
})

Api

Properties

Instance Methods

Instance Members

Sprite

The Sprite component produces an inline svg that contains symbols which can be referred to by other components.

You should include the tonic-sprite once, somewhere in the body, but before other components that use it.

HTML

<tonic-sprite></tonic-sprite>

To use a symbol from another component, you can refer to the symbol by its id property, for example...

JS

class MyComponent extends Tonic {
  render () {
    return this.html`
      <tonic-icon symbol-id="close" size="40px"></tonic-icon>
    `
  }
}

Tabs

The tonic-tabs and tonic-tab-panel components create a tab list that activates sections when clicked on.

Demo

Code

The tabs are grouped under the tonic-tabs component. Each tab should be a tonic-tab element, and is associated to a tonic-tab-panel id with the for element.

The selected tab should specified by providing an id as the value for the selected attribute on the tonic-tabs component.

HTML

<tonic-tabs selected="tab-2">

  <tonic-tab
    id="tab-1"
    for="tab-panel-1">
    One
  </tonic-tab>

  <tonic-tab
    id="tab-2"
    for="tab-panel-2">
    Two
  </tonic-tab>

  <tonic-tab
    id="tab-3"
    for="tab-panel-3">
    Three
  </tonic-tab>

</tonic-tabs>

HTML

<tonic-tab-panel id="tab-panel-1">
  Content One
</tonic-tab-panel>

<tonic-tab-panel id="tab-panel-2">
  Content Two
</tonic-tab-panel>

<tonic-tab-panel id="tab-panel-3">
  Content Three
</tonic-tab-panel>

API

Properties

for tonic-tabs

for tonic-tab

for tonic-tab-panel

Instance Methods & Members

for tonic-tabs

Textarea

The Textarea component creates a text area.

Demo

Code

Html

<tonic-textarea
  placeholder="Placeholder"
  rows="6"
  label="Text Area">
  <!-- Content Goes Here -->
</tonic-textarea>

Api

Properties

Instance Methods & Members

Toaster

The Toaster component creates a container for all toaster items to be added to.

Note: This component requires the tonic-sprite component.

Demo

Code

The following code should be included once on the page:

HTML

<tonic-toaster id="tonic-toaster-example"></tonic-toaster>

To create a new toaster item:

JS

const notification = document.querySelector('tonic-toaster')

document
  .getElementById('tonic-toaster-example')
  .addEventListener('click', e => {
    notification.create({
      type: 'success',
      title: 'Greetings',
      message: 'Hello, World'
    })
  })

Api

Properties

Instance Methods & Members

ToasterInline

The ToasterInline component creates an inline toaster item that appears on the screen either for a duration or until the user acknowledges it.

Note: This component requires the tonic-sprite component.

Demo

Code

HTML

<tonic-toaster-inline id="toaster-1">
</tonic-toaster-inline>

JS

const toaster1 = document.getElementById('toaster-1')
const toasterLink1 = document.getElementById('toaster-link-1')

toasterLink1.addEventListener('click', e => {
  toaster1.show()
})

An inline toaster that is displayed initially:

HTML

<tonic-toaster-inline
  id="toaster-2"
  dismiss="false"
  display="true">
  Displayed initially. Uses HTML.
</tonic-toaster-inline>

NOTE: An inline toaster item that is displayed initially must declare each property in the HTML and display it using display="true". This will create the notification.

Otherwise, the properties for the toaster item to be created must be specified in the javascript, where it is created.

Api

Properties

Instance Methods & Members

Toggle

The Toggle component creates a toggle.

Demo

Code

HTML

<tonic-toggle
  id="toggle-example"
  label="Change">
</tonic-toggle>

Api

Properties

Instance Methods

Instance Members

Tooltip

The Tooltip component creates a dynamically positioned pop-up tooltip filled with custom content that shows during the hover state of the corresponding trigger element.

Demo

Example

Hover over this text

Code

The element that will be used to trigger the display of the tooltip must contain an id that matches the for attribute on the tonic-tooltip element.

HTML

<span id="tonic-tooltip-example">Hover over this text</span>

<tonic-tooltip for="tonic-tooltip-example">
  <img src="./tonic.svg" width="100px">
</tonic-tooltip>

Api

Properties

Instance Methods & Members

Windowed

A base class used for creating a windowed component.

If you need to render large data sets (hundreds of thousands of rows for example), you can use a technique known as windowing. This technique renders a subset of your data, while giving the user the impression that all the data has been rendered.

Demo

This demo generates the data after you click the overlay. Generating 500000 rows of data can take a second or two.

Code

HTML

<tonic-windowed row-height=30>
</tonic-windowed>

JS

class TonicWindowed extends Tonic.Windowed { /* global Tonic */
  async click (e) {
    const row = Tonic.match(e.target, '[data-id]')

    if (row) {
      console.log(await this.getRow(+row.dataset.id))
    }
  }

  renderRow (row) {
    return `
      <div class="tr" data-id="${row.id}">
        <div class="td">${row.title}</div>
        <div class="td">${row.date}</div>
        <div class="td">${row.random}</div>
      </div>
    `
  }

  render () {
    return `
      <div class="th">
        <div class="td">Title</div>
        <div class="td">Date</div>
        <div class="td">Random</div>
      </div>
      ${super.render()}
    `
  }
}

Tonic.add(TonicWindowed)

//
// This demo generates the data after you click the overlay instead of
// on page load since 500K rows of data can take a few seconds to create.
//
const windowed = document.getElementsByTagName('tonic-windowed')[0]
const overlay = document.getElementById('click-to-load')

overlay.addEventListener('click', e => {
  const rows = []

  for (let i = 1; i < 500001; i++) {
    rows.push({
      id: i - 1,
      title: `Row #${i}`,
      date: String(new Date()),
      random: Math.random().toString(16).slice(2)
    })
  }

  overlay.classList.add('hidden')
  windowed.load(rows)
})

Api

Properties

Instance Methods

Instance Methods For Implementers