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 id="my-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 id="my-badge"></tonic-badge>

Api

Properties

Instance Members

Button

A Button component with a built-in loading state.

Demo

Code

HTML

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

CSS

An example of how to modify a button with a specific class.

tonic-button.danger {
  --tonic-button-text: rgba(255, 255, 255, 1);
  --tonic-button-background: rgba(240, 102, 83, 1);
  --tonic-button-background-hover: rgba(250, 112, 93, 1);
  --tonic-button-background-focus: rgba(245, 106, 88, 1);
}

Api

Properties

Instance Methods & Members

Chart

An example component that uses chart.js 2.8.0.

Demo

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}"
  chart-library="${require('chart.js')}"
  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

All dialogs have different use cases. Anything could go inside them. So this class tries to accomodate a wide range of use cases by being the minimum of what is needed to start with.

Note: This component requires the tonic-sprite component.

Demo

Code

HTML

<button id="open-dialog">Open Dialog</button>

<tonic-dialog id="example-dialog">
  <show-random>
  </show-random>
</tonic-dialog>

JS

class ShowRandom extends Tonic {
  async click (e) {
    if (Tonic.match(e.target, '#update')) {
      this.state.message = String(Math.random())
      this.reRender()
    }
  }

  render () {
    return this.html`
      <header>Dialog</header>

      <main>
        ${this.state.message || 'Ready'}
      </main>

      <footer>
        <tonic-button id="update">Update</tonic-button>
      </footer>
    `
  }
}

Tonic.add(ShowRandom)

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

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

CSS

Example styles that a project might set up outside the component's css.

.tonic--dialog {
  display: grid;
  grid-template-rows: 44px 1fr 80px;
}

.tonic--dialog > header {
  user-select: none;
  line-height 44px;
  text-align center;
  color var(--tonic-medium);
  display block;
}

.tonic--dialog > main {
  padding 0 30px 10px;
  position relative;
  text-align center;
}

.tonic--dialog > footer {
  user-select: none;
  text-align center;
  background-color var(--tonic-window);
  padding 16px;
  text-align center;
  width 100%;
  display block;
}

Api

Properties

Instance Methods & Members

Form

The form component implements input and change events that collect the values of any child component that has the data-key attribute. The values colected are stored on the tonic-form state and accessible from the value property.

The value of data-key expects a dot notation to determine what the value on the form will be.

Demo

Code

HTML

<tonic-form id="form-example">
  <tonic-input data-key="ka" required="true" id="a">
  </tonic-input>
  <tonic-select
    data-key="foo.kb"
    id="b"
    required="true"
  >
    <option value="" selected="true" disabled="true">Select One</option>
    <option value="a">a</option>
    <option value="b">b</option>
  </tonic-select>
  <tonic-input id="c" value="vc">
  </tonic-input>
  <tonic-input required="true" data-key="bar.0.buzz" id="d" value="vd">
  </tonic-input>
  <tonic-button disabled="true" id="form-submit">Submit</tonic-button>
</tonic-form>

JS

const form = document.getElementById('form-example')
const expected = {
  ka: 'va',
  foo: {
    kb: 'vb'
  },
  bar: [{ buzz: 'vd' }]
}

assert(form.value === expected)

Api

Properties

Instance Methods

Instance 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="/images/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>

Native auto-complete is also supported.

<tonic-input
  label="Email Address"
  type="email"
  id="tonic-input-example"
>
  <option value="a">primary@foo.com</option>
  <option value="b">secondary@foo.com</option>
</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

Loader

Renders an animated SVG-based loader. Placed inside a relative or absolute positioned container, it will center itself.

Demo

Code

HTML

<tonic-loader>
</tonic-loader>

Api

Properties

Panel

Similar to dialog, just a wrapper with hide and show.

Note: This component requires the tonic-sprite component.

Demo

Code

HTML

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

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>

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

Relative-Time

The Relative-Time component creates a relative text representation of a date value. This is almost entirely based on Github's Time Elements.

Demo

Code

HTML

<tonic-relative-time
  date="${new Date()}"
  refresh="1e4"
  locale="en"
</tonic-relative-time>

Api

Properties

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>

Api

Properties

Events

Select

The Select component creates a select input.

Demo

Code

HTML

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

API

Properties

Instance Methods

Instance Members

Split

A resizable Split component that can contain any number of deeply nested splits or child components (doesn't currently work on mobile).

Demo

Code

HTML

<tonic-split id="split-main" type="vertical">
  <tonic-split-left width="40%">
    <tonic-split id="split-secondary" type="horizontal">
      <tonic-split-top height="60%">
        <section>
          Hello, World.
        </section>
      </tonic-split-top>
      <tonic-split-bottom height="40%">
        <section>
          Hello, World.
        </section>
      </tonic-split-bottom>
    </tonic-split>
  </tonic-split-left>
  <tonic-split-right width="60%">
    <section>
      Hello, World.
    </section>
  </tonic-split-right>
</tonic-split>

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" id="my-tabs">
  <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

Events

for tonic-tabs

Textarea

The Textarea component creates a text area.

Demo

Code

Html

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

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

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

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

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="https://socketsupply.co/images/monogram.png" 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

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

Api

Properties

Instance Methods

Instance Methods For Implementers