Brainshaker95/simple-form-elements

Simple-form-elements

Table of contents

Getting Started

• Prerequisites
• Installing
• Commands

Usage

• Implementation
• Common options

Simple Form Elements

• Simple Select
• Simple Checkbox
• Simple Radio
• Simple File

---

Prerequisites

• Yarn

Installing

  yarn

Commands

  # Build project (development)
  yarn run dev

  # Build project (production)
  yarn run build

  # Watch js and css files
  yarn run watch

---

Implementation

See index.html and app.js for implementation examples.

Common options

const opts = {
// adds namespace to all css classes, if they are not overriden from below
classNamespace: 'simple-',

// class for checkmark icon
classCheckmark: 'checkmark',

// class for radiomark icon
classRadiomark: 'radiomark',

// class of the container of the checkbox element
classCheckboxContainer: 'checkbox-container',

// class of the container of the file input element
classFileContainer: 'file-container',

// class of the container of the radio option element
classRadioContainer: 'radio-container',

// class of the container of the select element
classSelectContainer: 'select-container',
}

---

simple-select

Methods

  init(select, opts)
  open(select)
  close(select)
  clear(select)
  destroy(select)

Options

const opts = {
  animationSpeed: 250,
  animationType: 'ease',
  allowClear: false,
  closeOnDocumentClick: true,
  closeOnOpenAnother: true,
  placeholder: null,
  showValue: true,
}

'data-placeholder' attribute on select tag also works

Events

• init
• change
• open
• close
• clear
• destroy

---

simple-checkbox

Methods

  init(checkbox, opts)
  check(checkbox)

Events

• init
• change

---

simple-radio

Methods

  init(radio, opts)
  check(radio, opts)

Events

• init
• change

---

simple-file

Methods

  init(file, opts)
  clear(file, opts)

Options

const opts = {
  allowClear: false,
  placeholder: 'No file selected',
}

'data-placeholder' attribute on file tag also works

Events

• init
• change
• clear