Alpine.js / Улучшение / Плагины Bootstrap

Версия: v3.14.9

Каталог: Плагины Bootstrap

Категория: Улучшение

Bootstrap: 3, 4, 5

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop, Shopify, PHP

Язык: Английский

Вес файла: 1.54 Mb

Уникальный ID: 6737

Посмотрели: 93 раз

Скачать бесплатно

Посетить Демо страница

Помощь: установка & настройка

Скачали бесплатно: 5 раз

Прокомментировали: 0 раз

Рейтинг: 5.0 / 5 - 1 голосов

Тип лицензии: CC BY 4.0

Авторство: https://github.com/alpinejs/alpine

Информация: Пользователям

Информация: Правообладателям

Теги: Alpine.js, plugin, alpine

Поделился: BootstrapТема

Добавлено: 2025-08-05 в 16:10

Метка: 1754403301

⇄ ⇅

<!DOCTYPE html>
<html lang="ru" x-data="app()">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Alpine.js | BootstrapTema</title>
 
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
 
 <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.12.0/dist/cdn.min.js"></script>
 <style>
 .custom-tooltip {
 --bs-tooltip-bg: var(--bs-primary);
 }
 [x-cloak] { display: none !important; }
 </style>
</head>
<body class="bg-light" x-cloak>
 <div class="container py-5">
 <h1 class="mb-4">Bootstrap + Alpine.js</h1>
 <p class="lead">Демонстрация совместной работы Bootstrap компонентов и Alpine.js</p>
 
 
 <section class="mb-5">
 <h2 class="h4 mb-3">1. Модальное окно</h2>
 <button @click="showModal = true" class="btn btn-primary">
 Открыть модальное окно
 </button>
 
 
 <div class="modal fade" :class="{ 'show d-block': showModal }" x-show="showModal" tabindex="-1">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <h5 class="modal-title">Форма обратной связи</h5>
 <button type="button" class="btn-close" @click="showModal = false"></button>
 </div>
 <div class="modal-body">
 <form @submit.prevent="submitForm">
 <div class="mb-3">
 <label for="name" class="form-label">Имя</label>
 <input type="text" class="form-control" id="name" x-model="formData.name">
 </div>
 <div class="mb-3">
 <label for="email" class="form-label">Email</label>
 <input type="email" class="form-control" id="email" x-model="formData.email">
 </div>
 <div class="mb-3">
 <label for="message" class="form-label">Сообщение</label>
 <textarea class="form-control" id="message" rows="3" x-model="formData.message"></textarea>
 </div>
 </form>
 </div>
 <div class="modal-footer">
 <button type="button" class="btn btn-secondary" @click="showModal = false">Закрыть</button>
 <button type="button" class="btn btn-primary" @click="submitForm">Отправить</button>
 </div>
 </div>
 </div>
 </div>
 <div class="modal-backdrop fade" :class="{ 'show': showModal }" x-show="showModal"></div>
 
 <div class="mt-3" x-show="formSubmitted">
 <div class="alert alert-success">
 Форма отправлена! Имя: <span x-text="formData.name"></span>, Email: <span x-text="formData.email"></span>
 </div>
 </div>
 </section>
 
 
 <section class="mb-5">
 <h2 class="h4 mb-3">2. Табы</h2>
 
 <ul class="nav nav-tabs mb-3">
 <li class="nav-item">
 <button class="nav-link" :class="{ 'active': activeTab === 'home' }" @click="activeTab = 'home'">Главная</button>
 </li>
 <li class="nav-item">
 <button class="nav-link" :class="{ 'active': activeTab === 'profile' }" @click="activeTab = 'profile'">Профиль</button>
 </li>
 <li class="nav-item">
 <button class="nav-link" :class="{ 'active': activeTab === 'contact' }" @click="activeTab = 'contact'">Контакты</button>
 </li>
 </ul>
 
 <div class="tab-content p-3 border border-top-0 rounded-bottom">
 <div x-show="activeTab === 'home'" class="tab-pane fade" :class="{ 'show active': activeTab === 'home' }">
 <h3>Главная</h3>
 <p>Это содержимое главной вкладки. Текущий счетчик: <span x-text="counter"></span></p>
 <button @click="counter++" class="btn btn-sm btn-outline-primary">Увеличить счетчик</button>
 </div>
 <div x-show="activeTab === 'profile'" class="tab-pane fade" :class="{ 'show active': activeTab === 'profile' }">
 <h3>Профиль</h3>
 <p>Информация о профиле пользователя.</p>
 <div class="form-check form-switch">
 <input class="form-check-input" type="checkbox" id="flexSwitchCheck" x-model="notificationsEnabled">
 <label class="form-check-label" for="flexSwitchCheck">Уведомления <span x-text="notificationsEnabled ? 'включены' : 'выключены'"></span></label>
 </div>
 </div>
 <div x-show="activeTab === 'contact'" class="tab-pane fade" :class="{ 'show active': activeTab === 'contact' }">
 <h3>Контакты</h3>
 <p>Свяжитесь с нами по email: example@example.com</p>
 </div>
 </div>
 </section>
 
 
 <section class="mb-5">
 <h2 class="h4 mb-3">3. Аккордеон</h2>
 
 <div class="accordion" id="accordionExample">
 <template x-for="(item, index) in accordionItems" :key="index">
 <div class="accordion-item">
 <h2 class="accordion-header">
 <button class="accordion-button" :class="{ 'collapsed': !item.isOpen }" 
 type="button" @click="toggleAccordion(index)">
 <span x-text="item.title"></span>
 </button>
 </h2>
 <div class="accordion-collapse" :class="{ 'show': item.isOpen }" x-show="item.isOpen">
 <div class="accordion-body">
 <p x-text="item.content"></p>
 <small class="text-muted">Открыто <span x-text="item.openCount"></span> раз</small>
 </div>
 </div>
 </div>
 </template>
 </div>
 
 <button @click="addAccordionItem()" class="btn btn-sm btn-outline-success mt-3">
 Добавить элемент
 </button>
 </section>
 
 
 <section class="mb-5">
 <h2 class="h4 mb-3">4. Карусель</h2>
 
 <div class="carousel slide" data-bs-ride="carousel" x-data="carousel()">
 
 <div class="carousel-indicators">
 <template x-for="(slide, index) in slides" :key="index">
 <button type="button" 
 :data-bs-target="'#carouselExample'" 
 :data-bs-slide-to="index" 
 :class="{ 'active': currentSlide === index }"
 @click="goToSlide(index)"></button>
 </template>
 </div>
 
 
 <div class="carousel-inner rounded" style="height: 300px;">
 <template x-for="(slide, index) in slides" :key="index">
 <div class="carousel-item h-100" :class="{ 'active': currentSlide === index }">
 <div class="d-flex justify-content-center align-items-center h-100" :class="slide.bgClass">
 <div class="text-center text-white">
 <h3 x-text="slide.title"></h3>
 <p x-text="slide.text"></p>
 </div>
 </div>
 </div>
 </template>
 </div>
 
 
 <button class="carousel-control-prev" type="button" @click="prevSlide()">
 <span class="carousel-control-prev-icon"></span>
 </button>
 <button class="carousel-control-next" type="button" @click="nextSlide()">
 <span class="carousel-control-next-icon"></span>
 </button>
 </div>
 
 <div class="mt-3">
 <button @click="addSlide()" class="btn btn-sm btn-outline-primary me-2">
 Добавить слайд
 </button>
 <button @click="removeSlide()" class="btn btn-sm btn-outline-danger" :disabled="slides.length <= 1">
 Удалить слайд
 </button>
 </div>
 </section>
 
 
 <section class="mb-5">
 <h2 class="h4 mb-3">5. Подсказки и попапы</h2>
 
 <div class="d-flex gap-3 flex-wrap">
 
 <button class="btn btn-secondary" 
 data-bs-toggle="tooltip" 
 :data-bs-title="tooltipText"
 @mouseenter="updateTooltip()">
 Подсказка (наведи)
 </button>
 
 
 <button class="btn btn-info" 
 data-bs-toggle="popover" 
 :data-bs-title="popoverTitle"
 :data-bs-content="popoverContent">
 Попап (нажми)
 </button>
 
 
 <button class="btn btn-warning" @click="updatePopupContent()">
 Обновить контент попапа
 </button>
 </div>
 
 <div class="mt-3">
 <input type="text" class="form-control" x-model="popoverContent" placeholder="Измените текст попапа">
 </div>
 </section>
 </div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
 
 <script>
 function app() {
 return {
 // Для модального окна
 showModal: false,
 formData: {
 name: '',
 email: '',
 message: ''
 },
 formSubmitted: false,
 
 // Для табов
 activeTab: 'home',
 counter: 0,
 notificationsEnabled: true,
 
 // Для аккордеона
 accordionItems: [
 {
 title: 'Первый элемент',
 content: 'Содержимое первого элемента аккордеона.',
 isOpen: true,
 openCount: 1
 },
 {
 title: 'Второй элемент',
 content: 'Содержимое второго элемента аккордеона.',
 isOpen: false,
 openCount: 0
 },
 {
 title: 'Третий элемент',
 content: 'Содержимое третьего элемента аккордеона.',
 isOpen: false,
 openCount: 0
 }
 ],
 
 // Для подсказок и попапов
 tooltipText: 'Стандартный текст подсказки',
 popoverTitle: 'Динамический попап',
 popoverContent: 'Этот контент можно изменить',
 
 // Методы
 submitForm() {
 if (this.formData.name && this.formData.email) {
 this.formSubmitted = true;
 this.showModal = false;
 // Здесь обычно AJAX-запрос
 console.log('Форма отправлена:', this.formData);
 }
 },
 
 toggleAccordion(index) {
 this.accordionItems[index].isOpen = !this.accordionItems[index].isOpen;
 if (this.accordionItems[index].isOpen) {
 this.accordionItems[index].openCount++;
 }
 },
 
 addAccordionItem() {
 const newIndex = this.accordionItems.length + 1;
 this.accordionItems.push({
 title: 'Новый элемент ' + newIndex,
 content: 'Это динамически добавленный элемент аккордеона №' + newIndex,
 isOpen: false,
 openCount: 0
 });
 },
 
 updateTooltip() {
 this.tooltipText = 'Обновлено: ' + new Date().toLocaleTimeString();
 // Инициализация/обновление подсказки
 const tooltipEl = document.querySelector('[data-bs-toggle="tooltip"]');
 if (tooltipEl) {
 const tooltip = bootstrap.Tooltip.getInstance(tooltipEl) || 
 new bootstrap.Tooltip(tooltipEl);
 tooltip.setContent({ '.tooltip-inner': this.tooltipText });
 }
 },
 
 updatePopupContent() {
 // Инициализация/обновление попапа
 const popoverEl = document.querySelector('[data-bs-toggle="popover"]');
 if (popoverEl) {
 const popover = bootstrap.Popover.getInstance(popoverEl) || 
 new bootstrap.Popover(popoverEl);
 popover.setContent({ 
 '.popover-header': this.popoverTitle,
 '.popover-body': this.popoverContent 
 });
 }
 }
 }
 }
 
 function carousel() {
 return {
 currentSlide: 0,
 slides: [
 {
 title: 'Первый слайд',
 text: 'Это содержимое первого слайда',
 bgClass: 'bg-primary'
 },
 {
 title: 'Второй слайд',
 text: 'Это содержимое второго слайда',
 bgClass: 'bg-success'
 },
 {
 title: 'Третий слайд',
 text: 'Это содержимое третьего слайда',
 bgClass: 'bg-danger'
 }
 ],
 nextSlide() {
 this.currentSlide = (this.currentSlide + 1) % this.slides.length;
 },
 prevSlide() {
 this.currentSlide = (this.currentSlide - 1 + this.slides.length) % this.slides.length;
 },
 goToSlide(index) {
 this.currentSlide = index;
 },
 addSlide() {
 const colors = ['bg-info', 'bg-warning', 'bg-secondary', 'bg-dark'];
 const newIndex = this.slides.length + 1;
 this.slides.push({
 title: 'Новый слайд ' + newIndex,
 text: 'Динамически добавленный слайд',
 bgClass: colors[Math.floor(Math.random() * colors.length)]
 });
 },
 removeSlide() {
 if (this.slides.length > 1) {
 if (this.currentSlide === this.slides.length - 1) {
 this.currentSlide--;
 }
 this.slides.pop();
 }
 }
 }
 }
 
 // Инициализация подсказок и попапов после загрузки страницы
 document.addEventListener('DOMContentLoaded', function() {
 // Подсказки
 const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
 tooltipTriggerList.map(function (tooltipTriggerEl) {
 return new bootstrap.Tooltip(tooltipTriggerEl);
 });
 
 // Попапы
 const popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
 popoverTriggerList.map(function (popoverTriggerEl) {
 return new bootstrap.Popover(popoverTriggerEl);
 });
 });
 </script>
</body>
</html>

BootstrapTema

Alpine.js

Скриншот

Подробнее

Похожие материалы

Просмотренные материалы

Всего комментариев: 0