КРЕАТИВНЫЕ САЙТЫ И ПРИЛОЖЕНИЯ,
КАЧЕСТВЕННЫЕ WEB-УСЛУГИ
phone

SwInput

Компонент SwInput представляет собой поле ввода
с возможностью настройки внешнего вида и поведения.

Свойства

Имя Тип Значения/Описание
`class` `String` Добавляет пользовательский CSS-класс к компоненту.
`size` `String` Размер поля: `'large'`, `'small'`.
`type` `String` Тип поля: 'text'- по умолчанию, 'phone'- телефон, 'password' - пароль
`name` `String` Обязателен! нужен для связывания через id input и label.
`before` `String` Название svg в спрайте загружаемое в начале.
`required` `Boolean` Признак обязательно ли для заполнения false - по умолчанию.
`after` `String` Название svg в спрайте загружаемое в конце.
`placeholder` `String` Текст Placeholder.
`label` `String` Текст в Label.

Слоты

#prefix - вставка при отсутствии before не обязательно / Insertion when before is not used (optional).

#suffix - вставка при отсутствии after не обязательно / Insertion when after is not used (optional).

События

prefix - клик иконке before

suffix - клик иконке after

Пример использования

<sw-input 
  name="input"
  class="custom-class" 
  size="large" 
  type="phone"
  before="phone"
  after=""
  placeholder="input"
  label="input"
  @prefix="console.log('before')"
>
  <template #suffix>#</template>
</sw-input>