@neirokin/egal-togglers-widgets-dev NPM

egal-widgets: Togglers

Этот пакет включает в себя такие компоненты, как:

Кнопка
Чекбокс
Радио кнопка
Переключатель (toggle)

Кнопка

Параметы

Параметр	Тип	По умолчанию	Возможные значения	Описание
`disabled`	Boolean	`false`	`true`, `false`	Состояние кнопки (включена/выключена)
`rounded`	Boolean	`false`	`true`, `false`	Внешний вид кнопки (круглые/обычные углы )
`size`	String	`md`	`sm`, `md`, `lg`	Размер кнопки
`softColors`	Boolean	`false`	`true`, `false`	Цветовая схема кнопки
`leftIcon`	String	-	Любое имя иконки, которое есть в Bootstrap (`circle-fill`, `chevron-right`, и т.д.)	Иконка слева. Если значение пустое, то иконка не отображается
`rightIcon`	String	-	Любое имя иконки, которое есть в Bootstrap (`circle-fill`, `chevron-right`, и т.д.)	Иконка справа. Если значение пустое, то иконка не отображается
`styleConfig`	Object	`{}`	`{ backgroundColor: 'black' hover: { backgroundColor: ''white } }`	Объект для кастомизации. Использует объектный синтаксис Vue для inline-стилей Дополнительно добавлена обработка свойств с именем состояний (`hover`, `active`, `disabled`)

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

Чтобы кастомизировать кнопку, нужно передать в styleConfig объект в виде:

Использует нативные события кнопки

{
  backgroundColor: 'red',
  hover: {
    backgroundColor: 'green'
  },
  active: {
    backgroundColor: 'blue',
  },
  disbled: {
    backgroundColor: 'gray',
  },
}

hover, active и disabled устанавливают стили для соответсвтующих состояний

Чекбокс

Параметры

Параметр	Тип	По умолчанию	Возможные значения	Описание
`checked`	Boolean	`false`	`true`, `false`	Стандартный параметр отвечающий за значение чекбокса (отмечен/ не отмечен)
`disabled`	Boolean	`false`	`true`, `false`	Состояние чекбокса (включена/выключена)
`size`	String	`md`	`sm`, `md`, `lg`	Размер чекбокса
`checkboxRight`	Boolean	`false`	`true`, `false`	Расположение чекбокса относительно лэйбла (`false` - чекбокс слева, `true` - чекбокс справа )
`labelStyle`	Object	`{}`	Inline-стили,допустимые Vue	Объект для кастомизации лэйбла чекбокса
`inputStyle`	Object	`{}`	`{ backgroundColor: 'black' hover: { backgroundColor: ''white } }`	Объект для кастомизации чекбокса. Использует объектный синтаксис Vue для inline-стилей Дополнительно добавлена обработка свойств с именем состояний (`hover`, `active`, `disabled`). Кастомизируются только `border-color` и `background-color`!

События

Название	Тип параметров	Описание
`change`	Boolean	Вызывается при нажатии на чекбокс. Передаёт булево значение

Радиокнопка

Параметры

Параметр	Тип	По умолчанию	Возможные значения	Описание
`name`	String	-	Любая строка	Стандартный парамет радиокнопки. Используется для группировки радиокнопок (см. Создание группы радиокнопок - MDN)
`checked`	Boolean	`false`	`true`, `false`	Стандартный параметр отвечающий за состояние радиокнопки (отмечен/ не отмечен)
`disabled`	Boolean	`false`	`true`, `false`	Состояние радикнопки (включена/выключена)
`value`	String	-	Любая строка	Стандартный параметр радиокнопки. Значение радиокнопки
`size`	String	`md`	`sm`, `md`, `lg`	Размер радиокнопки
`radioRight`	Boolean	`false`	`true`, `false`	Расположение радиокнопки относительно лэйбла (`false` - радиокнопка слева, `true` - радиокнопка справа )
`labelStyle`	Object	`{}`	Inline-стили,допустимые Vue	Объект для кастомизации лэйбла радиокнопки
`inputStyle`	Object	`{}`	`{ backgroundColor: 'black' hover: { backgroundColor: ''white } }`	Объект для кастомизации радикнопки. Использует объектный синтаксис Vue для inline-стилей Дополнительно добавлена обработка свойств с именем состояний (`hover`, `active`, `disabled`). Кастомизируются только `border-color` и `background-color`!

События

Название	Тип параметров	Описание
`change`	String	Вызывается при нажатии на радиокнопку. Передаёт `value`

Переключатель (toggler)

Параметры

Параметр	Тип	По умолчанию	Возможные значения	Описание
`active`	Boolean	`false`	`true`, `false`	Стандартный параметр отвечающий за состояние переключателя (активный/ неактивный)
`disabled`	Boolean	`false`	`true`, `false`	Состояние переключателя (включена/выключена)
`size`	String	`md`	`sm`, `md`, `lg`	Размер переключателя
`toggleRight`	Boolean	`false`	`true`, `false`	Расположение переключателся относительно лэйбла (`false` - переключатель слева, `true` - переключатель справа )
`labelStyle`	Object	`{}`	Inline-стили,допустимые Vue	Объект для кастомизации лэйбла переключателя
`inputStyle`	Object	`{}`	`{ backgroundColor: 'black' hover: { backgroundColor: ''white } }`	Объект для кастомизации переключателя. Использует объектный синтаксис Vue для inline-стилей Дополнительно добавлена обработка свойств с именем состояний (`hover`, `active`, `disabled`). Кастомизируются только `border-color` и `background-color`!

События

Название	Тип параметров	Описание
`change`	Boolean	Вызывается при нажатии на переключатель. Передаёт булево значение

@dvuckovic/vue3-bootstrap-icons core-js vue

@infinitebrahmanuniverse/nolb-_nei @everything-registry/sub-chunk-638

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago