# Components

The design system components are standard-compliant HTML web components. Stencil augments these web components with Virtual DOM, JSX, and async rendering to give them a more reactive experience.

# Setting props

Most component props can be set as attributes in your template/markup, as long as you are passing a string, number, or boolean.

<mx-input label="Input label" disabled />

However, the method to pass an array, object, or function varies depending on your framework. The below examples show how to set the options and data props for the mx-chart component using various frameworks.

# Vue

Most of the examples in the MDS documentation are for Vue since the docs are built with VuePress. Passing an array or object requires using v-bind (or the : shorthand) with the .prop modifier.

<!-- Vue -->
<template>
  <mx-chart
    :options.prop="optionsObject"
    :data.prop="{
      labels: ['Jan', 'Feb', 'Mar'],
      datasets: [
        {
          label: 'Example data',
          data: [435, 321, 532],
        },
      ],
    }"
  />
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# React / JSX

If you're using React or another framework that supports JSX, passing an object is straightforward.

// JSX
<MxChart
  options={optionsObject}
  data={{
    labels: ['Jan', 'Feb', 'Mar'],
    datasets: [
      {
        label: 'Example data',
        data: [435, 321, 532],
      },
    ],
  }}
/>

1
2
3
4
5
6
7
8
9
10
11
12
13

# Vanilla JavaScript & Angular

In vanilla JavaScript and Angular, the components are simply custom elements. You must get a reference to the element in your script, and then assign the properties to it.

<!-- HTML -->
<mx-chart id="my-chart" />

1
2

// JS
const chartOptions = { maintainAspectRatio: false };
const chartData = {
  labels: ['Jan', 'Feb', 'Mar'],
  datasets: [
    {
      label: 'Example data',
      data: [435, 321, 532],
    },
  ],
};

const chart = document.getElementById('my-chart');
chart.data = chartData;
chart.options = chartOptions;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# jQuery

If you're using jQuery, you can use the prop() method to set properties on the custom element.

<!-- HTML -->
<mx-chart id="my-chart"></mx-chart>

1
2

// JS
const chartOptions = { maintainAspectRatio: false };
const chartData = {
  labels: ['Jan', 'Feb', 'Mar'],
  datasets: [
    {
      label: 'Example data',
      data: [435, 321, 532],
    },
  ],
};

$('#my-chart').prop('data', chartData);
$('#my-chart').prop('options', chartOptions);

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# Adding event handlers

Many of the components emit custom events that can be listened for in your app. Below are some examples using various frameworks.

# Vue

<!-- Vue -->
<template>
  <mx-search @mxClear="myHandler" />
</template>

1
2
3
4

# React

// JSX
<MxSearch onMxClear={myHandler} />

1
2

# Vanilla JavaScript & Angular

<!-- HTML -->
<mx-search id="my-search"></mx-search>

1
2

// JS
function myHandler(e) {
  // Do something
}

const search = document.getElementById('my-search');
search.addEventListener('mxClear', myHandler);

1
2
3
4
5
6
7

# jQuery

<!-- HTML -->
<mx-search id="my-search"></mx-search>

1
2

// JS
function myHandler(e) {
  // Do something
}

$('#my-search').on('mxClear', myHandler);

1
2
3
4
5
6