Styling

By default, Regate components' default markup are compatible with Bootstrap framework. Anyway it doesn't mean you should use bootstrap. You can use any frameworks out there, or your custome one.

Introduction

Consider RegateText component for example. When you build the markup, it will generate a HTML code for you.

Regate.RegateText.markup('sample')

<input
  id='sample__input'
  type='text'
  class='form-control'
/>

Getting Markup

You can change this default markup for each component individually. First of all, you need the current raw markup. Call the following method to get it:

Regate.RegateText.getMarkup()

The output will be:

<input
  id='{id}__input'
  type='text'
  class='form-control'
/>

The {id} will be replaced by the user specified id when using the Regate.RegateText.init method.

Setting Markup

You can use the setMarkup method to change the markup.

Regate.RegateText.setMarkup(`
  <input
    id='{id}__input'
    type='text'
  />
`)

In this case, when you are using the component, it will use your desired markup, not the default one. So the following code:

Regate.RegateText.markup('sample')

Will generate the following output:

<input
  id='sample__input'
  type='text'
/>