WeAreDevelopers

WAD UI Components

Buttons

Primary
class: wad-button--primary
Secondary
class: wad-button--secondary

Without loader

<button class="wad-button--primary" :class="{'wad-button--primary-disabled': disabled}"> 
   BUTTON LABEL
</button>

With loader

<button class="wad-button--primary" :class="{'wad-button--primary-disabled': disabled}"> 
   <md-progress-spinner v-if="loading" v-show="loading" :md-diameter="20" :md-stroke="3" md-mode="indeterminate" />
   <span v-show="!loading">BUTTON LABEL</span>
</button>
Stacked buttons

Inputs

Single line
Helper text
class: md-field md-field-wad 
<md-field class="md-field-wad" :class="{
      'md-invalid': inputs.single.warning || inputs.single.error,
      'md-field-wad_warning': inputs.single.warning,
      'md-field-wad_error': inputs.single.error,
    }">
   <label>Field label</label>
   <md-input type="text" placeholder="Single line input label" v-model="inputs.single.value"/>
   <div class="md-helper-text">Helper text</div>
   <div class="md-error md-error-wad_warning" v-show="inputs.single.warning">Warning message</div>
   <div class="md-error md-error-wad_error" v-show="inputs.single.error">Error message</div>
</md-field>
Multiple line
Helper text
class: md-field md-field-wad 
<md-field class="md-field-wad" :class="{
      'md-invalid': inputs.single.warning || inputs.single.error,
      'md-field-wad_warning': inputs.single.warning,
      'md-field-wad_error': inputs.single.error,
    }">
   <label>Field label</label>
   <md-input type="text" placeholder="Single line input label" v-model="inputs.single.value"/>
   <div class="md-helper-text">Helper text</div>
   <div class="md-error md-error-wad_warning" v-show="inputs.single.warning">Warning message</div>
   <div class="md-error md-error-wad_error" v-show="inputs.single.error">Error message</div>
</md-field>
Multiple line
(wad-textarea)
Enter multiple lines of text
<wad-textarea
            :error="inputs.wadTextArea.status === 'error' ? 'The input is not valid' : null"
            :placeholder="'Text area'"
            :label="'Text area'"
            :helperText="'Enter multiple lines of text'"
            v-model="inputs.wadTextArea.value"/>
Multiple line auto-size
(wad-textarea)
Enter multiple lines of text
<wad-textarea
            :error="inputs.wadTextArea.status === 'error' ? 'The input is not valid' : null"
            :placeholder="'Text area'"
            :label="'Text area'"
            :helperText="'Enter multiple lines of text'"
            :autoResize="true"
            :collapsed-height="200"
            v-model="inputs.wadTextArea.value"/>
Notes
(wad-textarea)
<wad-textarea
            :error="inputs.wadTextArea.status === 'error' ? 'The input is not valid' : null"
            :placeholder="'Click to add notes'"
            :autoResize="true"
            :empty-eight="54"
            :collapsed-height="200"
            v-model="inputs.wadTextArea.value"/>
Select
Start typing to search
Helper text
class: md-field md-field-wad 
<md-field class="md-field-wad" :class="{
  'md-invalid': inputs.select.warning || inputs.select.error,
  'md-field-wad_warning': inputs.select.warning,
  'md-field-wad_error': inputs.select.error,
}">
  <label>Select label</label>
  <multiselect data-upper-placeholder="Select label" open-direction="bottom"
               v-model="inputs.select.value"
               :class="{'multiselect--has-value': inputs.select.value !== null}"
               :options="inputs.select.options"
               :placeholder="''"
               :showLabels="false"
               :clear-on-select="false"
               :close-on-select="true">
    <template v-slot:placeholder>
      Start typing to search
    </template>
  </multiselect>
  <div class="md-helper-text">Helper text</div>
  <div class="md-error md-error-wad_warning" v-show="inputs.select.warning">Warning message</div>
  <div class="md-error md-error-wad_error" v-show="inputs.select.error">Error message</div>
</md-field>
Google Autocomplete
Select a place
Place id: 
<md-field class="md-field-wad">
  <label>Field label</label>
  <md-input type="text" v-google-place-autocomplete @placeChanged="googlePlaceChanged" placeholder="Choose a place" v-model="inputs.place.value"/>
  <div class="md-helper-text">Select a place</div>
</md-field>
<md-field class="md-field-wad">
  <label>Field label</label>
  <md-input type="text" v-google-place-autocomplete.address @placeChanged="googlePlaceChanged" placeholder="Choose a place" v-model="inputs.place.value"/>
  <div class="md-helper-text">Select a place</div>
</md-field>
<md-field class="md-field-wad">
  <label>Field label</label>
  <md-input type="text" v-google-place-autocomplete.city @placeChanged="googlePlaceChanged" placeholder="Choose a place" v-model="inputs.place.value"/>
  <div class="md-helper-text">Select a place</div>
</md-field>

Radio


Radio value: test-radio-1

Radio group

Selected value: hogan

Checkbox

Checkbox is selected: No

Checkbox with customized label slot

Checkbox is selected: Yes

Checkbox group

Selected value: hogan,boss

Tooltip component

face Label
Info text

Steps indicator

Hulk

BACK and NEXT buttons are for testing purposes only

Range slider

Hogan

Selected value: Hogan

Range slider with array of objects

0 - 100

Selected value:

Accordion

  • done 30 days duration
  • done Interactive job advertisement
  • done Automated matching
  • clear Unlimited number of applicants
  • clear Easy-to-use applicant tracking dashboard
  • done Quality check of your job ad by our talent experts
About ・ Terms & Privacy ・ Cookie Manager ・ Imprint
© 2017-2023 WeAreDevelopers