Introduction

This section contains the first steps of getting started with CoralUI.

What browsers can I use?

CoralUI is designed to support the following browsers

  • Chrome (latest)

  • Safari (latest)

  • Firefox (latest)

  • Edge (latest)

  • IE 11

  • iOS 7+

  • Android 4.4+

Getting Started

The following information is intended to get you up and running quickly with CoralUI.

How do I work with CoralUI Components?

Most components in CoralUI are JavaScript components, which offer more functionality and are often more complex. CoralUI has a large number of components that you can view in the Components section.

Alert Example

Below are some examples of how to use Coral.Alert, which is a typical CoralUI component. The markup for an Alert is as follows:

 <coral-alert>
   <coral-alert-header>INFO</coral-alert-header>
   <coral-alert-content>This is is an alert.</coral-alert-content>
 </coral-alert>
INFO This is an alert

Alternately, you can instantiate components using the JavaScript new operator or by calling document.createElement().

JavaScript Examples

Using document.createElement:

var alert = document.createElement('coral-alert');

Using document.createElement:

var alert = new Coral.Alert();

Extending Native Elements

A few CoralUI components use the is attribute to extend a native element. Here is an example using <button> via markup. The resulting DOM element is the identical to one instantiated with JavaScript and will have the same methods and properties.

 <button is="coral-button">Default Button</button>

Instantiation using createElement is a bit special for these type of components due to the fact that Coral.Button extends the native HTMLButtonElement. The createElement function takes the is attribute as a second parameter.

var button = document.createElement('button', 'coral-Button');

You may still use the new operator for these components:

var button = new Coral.Button();

In some cases, you may need to wait for a component to be upgraded. Do this by passing a callback to Coral.commons.nextFrame(). It is advised that you use the new operator or createElement when building elements in JavaScript. If you are rendering a template, be sure to pass attributes for anything that needs to be set dynamically and wait until the next animation frame before setting or getting the element's properties.

Tabs in CoralUI

Here is an example of how create tabs in CoralUI. This requires a Coral.TabView container, which holds a Coral.TabList and a Coral.PanelStack.

<coral-tabview>
  <coral-tablist target="coral-demo-panel-1">
    <coral-tab>Tab 1
    </coral-tab>
    <coral-tab>Tab 2
    </coral-tab>
    <coral-tab>Tab 3
    </coral-tab>
    <coral-tab>Tab 4
    </coral-tab>
  </coral-tablist>
  <coral-panelstack id="coral-demo-panel-1">
    <coral-panel class="coral-Well">Tab 1 Content
    </coral-panel>
    <coral-panel class="coral-Well">Tab 2 Content
    </coral-panel>
    <coral-panel class="coral-Well">Tab 3 Content
    </coral-panel>
    <coral-panel class="coral-Well">Tab 4 Content
    </coral-panel>
  </coral-panelstack>
</coral-tabview>
Tab1 Tab2 Tab3 Tab4 (disabled) Tab 1 Content Tab 2 Content Tab 3 Content Tab 4 Content (disabled)

You can also initialize a tabbed UI directly in JavaScript. First, the Coral.TabList and Coral.PanelStack are created. Finally, a Coral.TabView is created to contain the first two elements.

  // new Coral.TabList()
  var tablist = new Coral.TabList().set({
    target: 'coral-demo-panel-3'
  });
  tablist.items.add({
    label: {
      innerHTML: 'Tab 1'
    }
    selected: true
  });
  tablist.items.add({
    label: {
      innerHTML: 'Tab 2'
    }
  });
  tablist.items.add({
    label: {
      innerHTML: 'Tab 3'
    }
  });
  tablist.items.add({
    label: {
      innerHTML: 'Tab 4 (disabled)'
    }
    disabled: true
  });
  // new Coral.PanelStack()
  var panelstack = new Coral.PanelStack().set({
    id: 'coral-demo-panel-3'
  });
  panelstack.items.add({
    content.innerHTML: 'Tab 1 Content.',
  });
  panelstack.items.add({
    content.innerHTML: 'Tab 2 Content.',
  });
  panelstack.items.add({
    content.innerHTML: 'Tab 3 Content.',
  });
  panelstack.items.add({
    content.innerHTML: 'Tab 4 Content.',
  });
  // new Coral.TabView()
  var tabview = new Coral.TabView().set({
    panelStack: panelstack,
    tabList: tablist
  });

How do I work with CoralUI Styles?

There are still some CoralUI components that are markup and CSS only. These are documented in the Styles section of this site. They are not custom elements, and as such are used by setting CSS selectors on normal HTML markup. An example of this would be the Well component:

 <section class="coral-Well">Well content goes here.</section>
Well content goes here.