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+

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:

Markup Example

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

Result

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.

Markup Example

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

Result

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.

Markup Example

<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>

Result

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.

JavaScript example

  // 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:

Markup Example

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

Result