ALPINE / ДАННЫЕ → ИНТЕРФЕЙС

Соберите живую карточку

Изменяйте данные и наблюдайте, как Alpine обновляет текст, цену, список и кнопки. Затем заберите HTML с вашим вариантом.

Попробуйте: установите цену 1 500 ₽ и количество 3 — итог станет 4 500 ₽. Скройте подробности, добавьте пункт «Настройка уведомлений», затем измените цвет карточки.

1. Измените данные

x-model

Ввод сразу отражается в карточке. Отдельное применение не требуется.

До 6 пунктов. Каждый имеет свой ключ, поэтому удаление не меняет соседние строки.

Список пуст. Добавьте пункт — он сразу появится в карточке.

К карточке ↓

2. Смотрите результат

Alpine.js 3.17.5
К настройкам ↑
ВАШ ВАРИАНТ

Итог

Что входит

Состав услуги пока не заполнен.

Демонстрация: кнопка подтверждает выбор только в этой карточке.

Что обновляет Alpine

x-data
Хранит состояние и методы карточки.
x-model
Связывает поля с данными. Модификатор .number преобразует числовой ввод.
x-text
Выводит название и рассчитанную сумму как текст.
x-show
Показывает или скрывает подробности, сохраняя элементы в DOM.
:class
Меняет цветовую тему. Это короткая запись x-bind:class.
:disabled
Блокирует выбор, пока данные неверны.
@click
Вызывает метод по нажатию. Это сокращение x-on:click.
x-for
Создаёт пункты списка из массива со стабильными ключами.

ЗАБРАТЬ СВОЙ ВАРИАНТ

3. Данные и работающий код

Разметка показывает директивы и требует зарегистрированного компонента. Полный HTML содержит стили, Alpine и всю логику карточки: скачанный файл можно открыть без интернета и продолжить менять параметры.

Исправьте название, цену или количество, чтобы скопировать или скачать рабочий пример.

Изменения хранятся в этой вкладке до перезагрузки. В экспорт попадают текущие данные, а сброс скачанной страницы возвращает именно сохранённый вариант.