Download the PHP package tdkomplekt/laravel-bootstrap-components without Composer
On this page you can find all versions of the php package tdkomplekt/laravel-bootstrap-components. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download tdkomplekt/laravel-bootstrap-components
More information about tdkomplekt/laravel-bootstrap-components
Files in tdkomplekt/laravel-bootstrap-components
Package laravel-bootstrap-components
Short Description Laravel Bootstrap Blade Components
License MIT
Homepage https://github.com/tdkomplekt/laravel-bootstrap-components
Informations about the package laravel-bootstrap-components
Laravel Bootstrap Components
Этот пакет содержит набор полезных компонентов Bootstrap Laravel Blade. Он продвигает принципы DRY и позволяет вам сохранять ваш HTML красивым и чистым. Компоненты включают оповещения, значки, кнопки, формы ввода (с автоматической обратной связью об ошибках), раскрывающиеся списки, навигацию, нумерацию страниц (адаптивную) и многое другое. Компоненты поставляются со встроенной интеграцией Laravel Livewire, поэтому вы можете использовать их с Livewire или без него.
Документация
- Требования
- Установка
- Примеры использования
- Компоненты
- Alert
- Badge
- Button
- Card
- Check
- Close
- Datalist
- Desc
- Dropdown
- Form
- Icon
- Img
- Input
- Input-addon
- Input-group
- Input-floating
- Link
- Nav-dropdown
- Nav-link
- Pagination
- Progress
- Radio
- Select
- Spinner
- SVG
- Textarea
Требования
- php 8
- Laravel 10
- Сначала необходимо установить Bootstrap 5 через веб-пакет laravel/ui
- Для использования значков должен быть установлен Font Awesome v6 или ниже.
Установка
Примеры
Ссылка с изображением:
«Спиннер» стандартного черного цвета (для смены цвета используем аттрибут color):
Компоненты
Alert
Оповещение:
Доступные аттрибуты и слоты
icon
: Font Awesome название иконкиcog
,envelope
и т.д.label
: метка для отображения, также можно поместить вslot
color
: Bootstrap цветprimary
,danger
,success
-
dismissible
: добавить кнопку закрытия
Badge
Бейдж / Значок:
Доступные аттрибуты и слоты
icon
: Font Awesome название иконкиcog
,envelope
и т.д.label
: метка для отображения, также можно поместить вslot
color
: Bootstrap цветprimary
,danger
,success
-
rounded
: круглый стиль
Button
Кнопка:
Доступные аттрибуты и слоты
icon
: Font Awesome название иконкиcog
,envelope
и т.д.label
: метка для отображения, также можно поместить вslot
color
: Bootstrap цветprimary
,danger
,success
size
: размерsm
,lg
type
: типbutton
,submit
route
: устанавливает вhref
путьurl
: устанавливает вhref
ссылкуhref
: устанавливает вhref
что-то свое (#)dismiss
: аттр.data-bs-dismiss
значениеalert
,modal
toggle
: аттр.data-bs-toggle
значениеcollapse
,dropdown
click
: Livewire действие на клик-
confirm
: запрашивает у пользователя подтверждение при нажатии
Card
Карточка:
Доступные аттрибуты и слоты
label
: метка для отображения, также можно поместить вslot
border
: цвет обводкиprimary
,danger
,success
title
: заголовокsubtitle
: подзаголовок-
image
: ссылка на изображение
Check
Чекбокс:
Доступные аттрибуты и слоты
label
: метка для отображения над вводомcheckLabel
: метка для отображения рядом с вводомhelp
: вспомогательная метка для отображения под вводомis_checked
: устанавливает статус переключателяswitch
: оформить как переключательmodel
: Livewire model keylazy
: привязать данные Livewire при измененииhelper_title
: добавить иконку помощника (tooltip при наведении)helper_icon
: иконка помощника-
helper_placement
: направление tooltip
Close
Кнопка закрытия:
Доступные аттрибуты и слоты
color
: Bootstrap цвет иконкиwhite
-
dismiss
: аттр.data-bs-dismiss
значениеalert
,modal
Color
Выбор цвета:
Доступные аттрибуты и слоты
label
: метка для отображения над вводомicon
: Font Awesome название иконкиcog
,envelope
и т.д.prepend
: аддон для отображения перед вводом, можно использовать через именованный слотappend
: аддон для отображения после ввода, можно использовать через именованный слотsize
: размерsm
,lg
help
: вспомогательная метка для отображения под вводомmodel
: Livewire model keylazy
: привязать данные Livewire при измененииhelper_title
: добавить иконку помощника (tooltip при наведении)helper_icon
: иконка помощника-
helper_placement
: направление tooltip
Datalist
Список данных:
Доступные аттрибуты и слоты
label
: метка для отображения над вводомoptions
: массив опций ввода, например.['Red', 'Blue']
icon
: Font Awesome название иконкиcog
,envelope
и т.д.prepend
: аддон для отображения перед вводом, можно использовать через именованный слотappend
: аддон для отображения после ввода, можно использовать через именованный слотsize
: размерsm
,lg
help
: вспомогательная метка для отображения под вводомmodel
: Livewire model keydebounce
: время в мс для привязки данных Livewire к клавиатуре, например.500
lazy
: привязать данные Livewire при измененииhelper_title
: добавить иконку помощника (tooltip при наведении)helper_icon
: иконка помощника-
helper_placement
: направление tooltip
Desc
Список описания:
Доступные аттрибуты и слоты
tern
: термин списка описанийdetails
: детали списка описаний также можно поместить вslot
-
date
: дата для использования вместо подробностей (для использования с Laravel Timezone)
Dropdown
Выпадающий список:
Доступные аттрибуты и слоты
icon
: Font Awesome название иконкиcog
,envelope
и т.д.label
: метка раскрывающегося списка для отображения, может использоваться через именованный слотitems
: выпадающие элементы, также можно поместить вslot
color
: цветprimary
,danger
,success
size
: размерsm
,lg
dropdown_class
: классы для родительского dropdowndropdown_menu_class
: классы для меню dropdown-
icon_toggle
: показывать стрелочку
Dropdown Item
Элемент выпадающего списка:
Доступные аттрибуты и слоты
icon
: Font Awesome название иконкиcog
,envelope
и т.д.label
: метка раскрывающегося списка для отображения, может использоваться через именованный слотroute
: устанавливает вhref
путьurl
: устанавливает вhref
ссылку-
href
: устанавливает вhref
что-то свое (#)
Form
Форма (с полями):
Доступные аттрибуты и слоты
route
: устанавливает вhref
путьurl
: устанавливает вhref
ссылкуhref
: устанавливает вhref
что-то свое (#)-
submit
: Действие Livewire при отправке
Icon
Font Awesome иконка:
Доступные аттрибуты и слоты
name
: Font Awesome название иконкиcog
,rocket
и т.д.style
: Font Awesome стиль иконкиsolid
,regular
,brands
size
: Font Awesome размер иконкиsm
,lg
,3x
,5x
color
: Bootstrap цветprimary
,danger
,success
spin
: устанавливает для иконки анимацию вращенияpulse
: устанавливает для иконки анимацию пульсацииbeat
: устанавливает для иконки анимацию битаflip
: устанавливает для иконки анимацию переворотаshake
: устанавливает для иконки анимацию тряскиrotate_90
: поворачивает иконку на 90° (по часовой)rotate_180
: поворачивает иконку на 180° (по часовой)-
rotate_270
: поворачивает иконку на 270° (по часовой)
Img
Изображение:
Доступные аттрибуты и слоты
asset
: устанавливает вsrc
ссылку/содержимоеsrc
: устанавливает вsrc
fluid
: устанавливает изображение полной шириныthumbnail
: устанавливает для изображения стиль миниатюр-
rounded
: устанавливает изображение с закругленными углами
Input
Поле ввода:
Доступные аттрибуты и слоты
label
: метка для отображения над вводомtype
: тип поляtext
,email
icon
: Font Awesome название иконкиcog
,envelope
и т.д.prepend
: аддон для отображения перед вводом, можно использовать через именованный слотappend
: аддон для отображения после ввода, можно использовать через именованный слотsize
: размерsm
,lg
help
: вспомогательная метка для отображения под вводомmodel
: Livewire model keydebounce
: время в мс для привязки данных Livewire к клавиатуре, например.500
lazy
: привязать данные Livewire при измененииhelper_title
: добавить иконку помощника (tooltip при наведении)helper_icon
: иконка помощника-
helper_placement
: направление tooltip
Input-floating
Поле ввода:
Доступные аттрибуты и слоты
label
: метка для отображения над вводомtype
: тип поляtext
,email
help
: вспомогательная метка для отображения под вводомmodel
: Livewire model keydebounce
: время в мс для привязки данных Livewire к клавиатуре, например.500
lazy
: привязать данные Livewire при измененииhelper_title
: добавить иконку помощника (tooltip при наведении)helper_icon
: иконка помощника-
helper_placement
: направление tooltip
Link
Ссылка:
Доступные аттрибуты и слоты
icon
: Font Awesome название иконкиcog
,envelope
и т.д.label
: метка для отображения, также можно поместить вslot
route
: устанавливает вhref
путьurl
: устанавливает вhref
ссылку-
href
: устанавливает вhref
что-то свое (#)
Nav Dropdown
Выпадающий список в навигации:
Доступные аттрибуты и слоты
icon
: Font Awesome название иконкиcog
,envelope
и т.д.label
: метка раскрывающегося списка для отображения, может использоваться через именованный слотitems
: выпадающие элементы, также можно поместить вslot
Nav Link
Ссылка в навигации:
Доступные аттрибуты и слоты
icon
: Font Awesome название иконкиcog
,envelope
и т.д.label
: метку для отображения, также можно поместить вslot
route
: устанавливает вhref
путьurl
: устанавливает вhref
ссылку-
href
: устанавливает вhref
что-то свое (#)
Pagination
Адаптивные ссылки страниц:
Доступные аттрибуты и слоты
links
: модели Laravel с постраничной разбивкой-
justify
: Bootstrap положение на страницеstart
,end
Progress
Полоса прогресса:
Доступные аттрибуты и слоты
label
: метка для отображения внутри индикатора выполненияpercent
: процент индикатора выполненияcolor
: Bootstrap цветprimary
,danger
,success
height
: высота индикатора выполнения в пикселяхanimated
: анимировать индикатор выполнения-
striped
: используйте полосатый стиль для индикатора выполнения
Radio
Радио выбор:
Доступные аттрибуты и слоты
label
: метка для отображения над вводомoptions
: массив выбора['Red', 'Blue']
help
: вспомогательная метка для отображения под вводомswitch
: устанавливает ввод для использования стиля переключенияmodel
: Livewire model keylazy
: привязать данные Livewire при измененииhelper_title
: добавить иконку помощника (tooltip при наведении)helper_icon
: иконка помощника-
helper_placement
: направление tooltip
Select
Выпадающий список:
Доступные аттрибуты и слоты
label
: метка для отображения над вводомplaceholder
: заполнитель для пустого первого вариантаoptions
: массив выбора['Red', 'Blue']
icon
: Font Awesome название иконкиcog
,envelope
и т.д.prepend
: аддон для отображения перед вводом, можно использовать через именованный слотappend
: аддон для отображения после ввода, можно использовать через именованный слотsize
: размерsm
,lg
help
: вспомогательная метка для отображения под вводомmodel
: Livewire model keylazy
: привязать данные Livewire при измененииhelper_title
: добавить иконку помощника (tooltip при наведении)helper_icon
: иконка помощника-
helper_placement
: направление tooltip
Spinner
Спиннер (индикатор загрузки):
Доступные аттрибуты и слоты
spinner
: тип иконкиborder
,grow
color
: Bootstrap цветprimary
,danger
,success
text
: текст-
size
: размерsm
,lg
SVG
Импорт SVG изображений (в код):
Доступные аттрибуты и слоты
icon
: название картинки/файла, которое находится по пути config('laravel-bootstrap-components.svg_icons_public_path')-
path
: дополнительный путь к файлу (относительно пути в конфиге)
Textarea
Текстовая область:
Доступные аттрибуты и слоты
label
: метка для отображения над вводомicon
: Font Awesome название иконкиcog
,envelope
и т.д.prepend
: аддон для отображения перед вводом, можно использовать через именованный слотappend
: аддон для отображения после ввода, можно использовать через именованный слотsize
: размерsm
,lg
help
: вспомогательная метка для отображения под вводомmodel
: Livewire model keylazy
: привязать данные Livewire при измененииdebounce
: время в мс для привязки данных Livewire к клавиатуре, например.500
helper_title
: добавить иконку помощника (tooltip при наведении)helper_icon
: иконка помощника-
helper_placement
: направление tooltip
Пользовательские изменения
View
Используйте свои собственные представления, опубликовав представления пакета:
Теперь можете отредактировать файлы внутри resources/views/vendor/bs
.
Пакет будет использовать эти файлы для рендеринга компонентов.
Icons
Используйте свои собственные значки шрифтов, опубликовав конфигурацию пакета:
Теперь можете отредактировать значение icon_class_prefix
внутри config/laravel-bootstrap-components.php
.
Пакет будет использовать этот класс для рендеринга значков.