Switcher

Компонент выключатель может быть использован в настройках для включения/выключения функций и процессов. Выключатель не требует подтверждения действия кнопкой Применить, в отличие, например от Чекбокса.

Использование

HTML

<ds-switcher
  id="switch"
  text="Основной текст"
  subtext="Дополнительный текст"
></ds-switcher>

<script>
  // Демонстрация получения ввода на элементе
  const switch = document.getElementById('switch');
  if (switch) {
    switch.addEventListener('input', (e) => {
      // Если в атрибут value приходит null - переключатель включен
      console.log('Ввод:', e.target?.getAttribute('value') === null);
    });
  }
</script>

React

import { useState, useCallback } from 'react';
import { Input } from '@rir/ds-library';

function Component() {
  const [value, setValue] = useState(false);

  const onInput = useCallback((e: Event) => {
    console.log('Событие input на элементе Switcher!', e);
    // Если в атрибут value приходит null - переключатель включен
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-expect-error
    setValue(e.target.getAttribute('value') === null);
  }, []);

  return (
    <>
      <Switcher
        text="Основной текст"
        subtext="Дополнительный текст"
        onInput={onInput}
      ></Switcher>
    </>
  );
}

export default Component;

API

Props

Name	Type	Description	Default
value	String	Актуальный ввод	''
text	String	Основной текст	''
subtext	String	Дополнительный текст	''
message	String	Текст сообщения об ошибке	''
error	Boolean	Показывается ошибка?	false
_error	undefined, String: ['true', 'false']	Дублирующий литеральный атбрибут	undefined
disabled	Boolean	Неактивная, "выключенная" кнопка?	false
_disabled	undefined, String: ['true', 'false']	Дублирующий литеральный атбрибут	undefined

Events

Name	Description
input	Событие на изменение ввода

Примеры проектов

React

Angular

Vue