CreditCardForm

Виджет CreditCardForm позволяет пользователям вводить данные своей кредитной карты, такие как номер карты, срок действия и CVV.

Состояние виджета

Прежде чем приступать к виджетам формы, ознакомьтесь с нашим руководством по Состоянию виджета для эффективного управления состоянием и поведением ваших элементов формы.

Добавление виджета CreditCardForm

Вот пример того, как вы можете добавить виджет CreditCardForm в свой проект:

1. Сначала перетащите виджет CreditCardForm из вкладки Элементы формы (в панели виджетов) или добавьте его непосредственно из дерева виджетов.
2. При вводе номера карты он будет скрыт (цифры заменяются на •). Чтобы отключить эту функцию и позволить пользователям видеть полный номер, перейдите в панель свойств, найдите переключатель Скрыть номер карты и отключите его.

Настройка

Вы можете настроить поведение и внешний вид этого виджета, используя различные свойства, доступные в панели свойств.

Скрытие CVV

По умолчанию номер CVV виден при вводе. Важно скрыть его (цифры заменяются на •).

Чтобы скрыть CVV:

1. Выберите виджет CreditCardForm из дерева виджетов или области холста.
2. Перейдите в панель свойств, найдите переключатель Скрыть CVV и включите его.

Добавление цвета фона

Чтобы изменить цвет фона полей:

1. Выберите CreditCardForm из дерева виджетов или области холста.
2. Перейдите в панель свойств и прокрутите вниз до раздела Свойства оформления ввода.
3. Найдите переключатель Заполнение и включите его.
4. Теперь найдите свойство Цвет заполнения, щелкните на поле рядом с Не установлено, выберите цвет, затем нажмите Использовать цвет или щелкните на Не установлено и введите код Hex непосредственно. Можно также выбрать цвет, щелкнув кнопки "Палитра" и "Просто".

Настройка границы

Для настройки границы вокруг полей кредитной карты:

1. Выберите CreditCardForm из дерева виджетов или области холста.
2. Перейдите в панель свойств и прокрутите вниз до раздела Свойства оформления ввода.
3. Выберите из выпадающего списка Тип границы ввода.
   1. Выберите Контур, чтобы добавить границу вокруг всего поля.
   2. Выберите Подчеркивание, чтобы добавить границу только снизу поля.
   3. Выберите Отсутствует, чтобы убрать границу.
4. Прокрутите немного вниз, чтобы найти свойство Цвет границы, щелкните на поле рядом с уже выбранным цветом, выберите цвет, затем нажмите Использовать цвет или щелкните на уже выбранном цвете и введите код Hex непосредственно. Можно также выбрать цвет, щелкнув кнопки "Палитра" и "Просто".
5. Найдите свойство Ширина границы ниже и введите желаемое значение.
6. Теперь введите свойство Радиус границы и укажите значение 50. По умолчанию значение 50 будет установлено для всех углов (TL - верхний левый, TR - верхний правый, BL - нижний левый и BR - нижний правый). Щелкните на иконку замка, чтобы изменить каждый угол отдельно.

Добавление заполнения контента

Заполнение контента добавляет пространство между текстом поля и границей.

Чтобы добавить заполнение контента:

1. Выберите CreditCardForm из дерева виджетов или области холста.
2. Перейдите в панель свойств (справа на вашем экране) и прокрутите вниз до раздела Свойства оформления ввода.
3. Найдите свойство Заполнение контента и введите значения в поля ввода L (слева), T (сверху), R (справа) и B (снизу).

Уменьшение высоты поля

Возможно, вам захочется уменьшить высоту поля в соответствии с вашим дизайном. Используя свойство dense, вы можете уменьшить высоту поля до предопределенного размера.

Чтобы уменьшить высоту поля:

1. Выберите CreditCardForm из дерева виджетов или области холста.
2. Перейдите в панель свойств (справа на вашем экране) и прокрутите вниз до раздела Свойства оформления ввода.
3. Найдите переключатель Плотный и включите его.