Elements

Buttons

Входные параметры

type TButtonData = {
	view?: 'link' | 'form-button' | 'scroll-link',
	classes?: string,
	url?: string,
	title?: string,
	dataTitle?: string,
	dataFormName?: string,
	icon?: string,
	iconClasses?: string,
  ...rest?: Attr
}

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

---
import Button from '@/ui/button/Button.astro';
---

<Button
  classes="popup-link flex flex-row-reverse items-center gap-3"
  url="#common-modal"
  title="Button with icon"
  dataTitle="Title for modal"
  dataFormName="Form name"
  icon="mdi:alert-circle-outline"
  iconClasses="text-2xl"
  disabled
/>

Input Field

Входные параметры

interface Props {
    type?: string,
    name?: string,
    classes?: string,
    placeholder?: string,
    required?: boolean,
    errorText?: string,
    errorClasses?: string,
}

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

---
import Input from '@/ui/input/Input.astro';
---

<Input
  type="tel"
  name="phone"
  classes="border-gray-100"
  placeholder="+7 (999) 999-99-99*"
  required
  errorText="Введите корректный номер телефона"
  errorClasses="text-red-500"
/>

Select

Входные параметры

interface Props {
	name: string;
	placeholder?: string;
	required?: boolean;
	errorMessage?: string;
	options?: {id: string | number; name: string;}[];
}

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

---
import FormSelect from '@/ui/form-select/FormSelect.astro';
---

<FormSelect
  name="dealer"
  placeholder="Выберите дилерский центр"
  required={true}
  errorMessage="Чтобы продолжить, выберите дилерский центр"
  options={[
    {id: 1, name: 'Дилерский центр 1'},
    {id: 2, name: 'Дилерский центр 2'},
    {id: 3, name: 'Дилерский центр 3'},
    {id: 4, name: 'Дилерский центр 4'},
    {id: 5, name: 'Дилерский центр 5'},
    {id: 6, name: 'Дилерский центр 6'},
    {id: 7, name: 'Дилерский центр 7'},
    {id: 8, name: 'Дилерский центр 8'},
    {id: 9, name: 'Дилерский центр 9'},
    {id: 10, name: 'Дилерский центр 10'}
  ]}
/>

Checkbox & Radio

Входные параметры

interface Props {
	type?: any;
	name?: string;
	value?: string;
	label?: string;
	color?: string;
	required?: boolean;
	errorText?: string;
	errorClasses?: string;
	classes?: string;
}

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

---
import Checkbox from '@/ui/checkbox/Checkbox.astro';
---

<Checkbox
  name="agree"
  label="Я согласен на обработку персональных данных"
  color="black"
  required
  errorClasses="text-red-500 w-full"
  errorText="Чтобы продолжить, установите флажок"
/>