Kickstand UI

# Using Components

Just like a standard HTML element, there are two ways of interacting with Kickstand UI's components.

The first is directly in the markup:

<ks-modal size="sm">
    <!-- modal content -->
</ks-modal>

The second is programmatically through JavaScript:

let $modal = document.querySelector('ks-modal');

$modal.size = 'sm';

// using DOM utilities
let $modal = $('ks-modal');

$modal.size = 'sm';

NOTE

Be sure to check out Kickstand UI's DOM Utilities to help keep your code clean and easy to read.

There are three main types of interaction available for each component - Properties, Methods, and Events. In the documentation for the components you will find information for each of these interactions that are available for the component.

# Properties

Properties (or Props) are custom attributes you can modify to create specific behavior on a component. Standard HTML attributes like class or id are still available for these custom elements, but there customizable attributes that will allow you to change the default behavior.

The example above shows how you can change the size of the modal using the size prop.

# Methods

Methods are used to expose functionality for the component. An example would be how you can open or close the modal using the API provided when the element is selected.

let $modal = document.querySelector('ks-modal');

$modal.show();
// or
$modal.hide();

# Events

Events are available for executing your own logic when an event happens. When an event occurs, data and a JavaScript event will be emitted.

<ks-form-field label="First Name" id="first_name"></ks-form-field>

let $firstNameInput = document.getElementById('first_name');

$firstNameInput.addEventListener('updated', event => {
    /* your logic */
});

// using DOM utilities
$('first_name').on('updated', event => {
    /* your logic */
});

An custom data provided by the component will be located in the detail property on the event (event.detail).

# TypeScript

Using TypeScript will follow the same pattern as outlined in above, however Kickstand UI provides type definition files for each of the components. If you are using TypeScript, this will provide validation and autocomplete for components.

The pattern for the element type is as follows:

HTML + Tag (in Pascal Case) + Element

<ks-modal id="my_modal">
    <!-- modal content -->
</ks-modal>

let $modal = document.querySelector<HTMLKsModalElement>('#my_modal');

// using DOM utilities
let $modal = $<HTMLKsModalElement>('#my_modal');

or

let $modal = document.querySelector('#my_modal') as HTMLKsModalElement;

← Framework Overview →