Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/bastinald/laravel-bootstrap-components

Laravel Bootstrap Blade components.
https://github.com/bastinald/laravel-bootstrap-components

blade bootstrap bootstrap5 components css laravel laravel-blade laravel-blade-component

Last synced: about 2 months ago
JSON representation

Laravel Bootstrap Blade components.

Host: GitHub
URL: https://github.com/bastinald/laravel-bootstrap-components
Owner: bastinald
Created: 2021-06-01T23:14:55.000Z (over 3 years ago)
Default Branch: master
Last Pushed: 2024-02-20T16:01:15.000Z (10 months ago)
Last Synced: 2024-10-22T20:12:13.614Z (2 months ago)
Topics: blade, bootstrap, bootstrap5, components, css, laravel, laravel-blade, laravel-blade-component
Language: Blade
Homepage:
Size: 82 KB
Stars: 41
Watchers: 2
Forks: 25
Open Issues: 4
Metadata Files:
- Readme: readme.md

Awesome Lists containing this project

README

# Laravel Bootstrap Components

This package contains a set of useful Bootstrap Laravel Blade components. It promotes DRY principles and allows you to keep your HTML nice and clean. Components include alerts, badges, buttons, form inputs (with automatic error feedback), dropdowns, navs, pagination (responsive), and more. The components come with Laravel Livewire integration built in, so you can use them with or without Livewire.

## Documentation

- [Requirements](#requirements)
- [Installation](#installation)
- [Components](#components)
- [Alert](#alert)
- [Badge](#badge)
- [Button](#button)
- [Check](#check)
- [Close](#close)
- [Color](#color)
- [Datalist](#datalist)
- [Dropdown](#dropdown)
- [Dropdown Item](#dropdown-item)
- [Icon](#icon)
- [Image](#image)
- [Input](#input)
- [Link](#link)
- [Nav Dropdown](#nav-dropdown)
- [Nav Link](#nav-link)
- [Pagination](#pagination)
- [Progress](#progress)
- [Radio](#radio)
- [Select](#select)
- [Textarea](#textarea)
- [Traits](#traits)
- [WithModel](#withmodel)
- [Publishing Assets](#publishing-assets)
- [Custom Views](#custom-views)
- [Custom Icons](#custom-icons)

## Requirements

- Bootstrap 5 must be installed via webpack first
- Font Awesome must be installed to use icons

## Installation

Require the package via composer:

```console
composer require bastinald/laravel-bootstrap-components
```

## Components

### Alert

A Bootstrap alert:

```html

```

#### Available Props & Slots

---

### Badge

A Bootstrap badge:

```html

```

#### Available Props & Slots

- `icon`: Font Awesome icon to show before label e.g. `cog`, `envelope`
- `label`: label to display, can also be placed in the `slot`
- `color`: Bootstrap color e.g. `primary`, `danger`, `success`

---

### Button

A Bootstrap button:

```html

```

#### Available Props & Slots

- `icon`: Font Awesome icon to show before label e.g. `cog`, `envelope`
- `label`: label to display, can also be placed in the `slot`
- `color`: Bootstrap color e.g. `primary`, `danger`, `success`
- `size`: Bootstrap button size e.g. `sm`, `lg`
- `type`: button type e.g. `button`, `submit`
- `route`: sets the `href` to a route
- `url`: sets the `href` to a url
- `href`: sets the `href`
- `dismiss`: a `data-bs-dismiss` value e.g. `alert`, `modal`
- `toggle`: a `data-bs-toggle` value e.g. `collapse`, `dropdown`
- `click`: Livewire action on click
- `confirm`: prompts the user for confirmation on click

---

### Check

A Bootstrap checkbox input:

```html

```

#### Available Props & Slots

- `label`: label to display above the input
- `checkLabel`: label to display beside the input
- `help`: helper label to display under the input
- `switch`: style the input as a switch
- `model`: Livewire model property key
- `lazy`: bind Livewire data on change

---

### Close

A Bootstrap close button:

```html

```

#### Available Props & Slots

- `color`: Bootstrap close color e.g. `white`
- `dismiss`: a `data-bs-dismiss` value e.g. `alert`, `modal`

---

### Color

A Bootstrap color picker input:

```html

```

#### Available Props & Slots

- `label`: label to display above the input
- `icon`: Font Awesome icon to show before input e.g. `cog`, `envelope`
- `prepend`: addon to display before input, can be used via named slot
- `append`: addon to display after input, can be used via named slot
- `size`: Bootstrap input size e.g. `sm`, `lg`
- `help`: helper label to display under the input
- `model`: Livewire model property key
- `lazy`: bind Livewire data on change

---

### Datalist

A Bootstrap datalist input:

```html

```

#### Available Props & Slots

- `label`: label to display above the input
- `options`: array of input options e.g. `['Red', 'Blue']`
- `icon`: Font Awesome icon to show before input e.g. `cog`, `envelope`
- `prepend`: addon to display before input, can be used via named slot
- `append`: addon to display after input, can be used via named slot
- `size`: Bootstrap input size e.g. `sm`, `lg`
- `help`: helper label to display under the input
- `model`: Livewire model property key
- `debounce`: time in ms to bind Livewire data on keyup e.g. `500`
- `lazy`: bind Livewire data on change

---

### Desc

A description list:

```html

```

#### Available Props & Slots

- `tern`: the description list term
- `details`: the description list details, can also be placed in the `slot`
- `date`: date to use instead of details (for use with [Laravel Timezone](https://github.com/jamesmills/laravel-timezone))

---

### Dropdown

A Bootstrap dropdown:

```html

```

#### Available Props & Slots

- `icon`: Font Awesome icon to show before label e.g. `cog`, `envelope`
- `label`: dropdown label to display, can be used via named slot
- `items`: dropdown items, can also be placed in the `slot`
- `color`: Bootstrap color e.g. `primary`, `danger`, `success`
- `size`: Bootstrap button size e.g. `sm`, `lg`

---

### Dropdown Item

A Bootstrap dropdown menu item:

```html

```

#### Available Props & Slots

- `icon`: Font Awesome icon to show before label e.g. `cog`, `envelope`
- `label`: label to display, can also be placed in the `slot`
- `route`: sets the `href` to a route
- `url`: sets the `href` to a url
- `href`: sets the `href`

---

### Form

A Bootstrap form:

```html

```

#### Available Props & Slots

- `submit`: Livewire action on submit

### Icon

A Font Awesome icon:

```html

```

#### Available Props & Slots

- `name`: Font Awesome icon name e.g. `cog`, `rocket`
- `style`: Font Awesome icon style e.g. `solid`, `regular`, `brands`
- `size`: Font Awesome icon size e.g. `sm`, `lg`, `3x`, `5x`
- `color`: Bootstrap color e.g. `primary`, `danger`, `success`
- `spin`: sets the icon to use a spin animation
- `pulse`: sets the icon to use a pulse animation

---

### Image

An image:

```html

```

#### Available Props & Slots

- `asset`: sets the `src` to an asset
- `src`: sets the `src`
- `fluid`: sets the image to be fluid width
- `thumbnail`: sets the image to use thumbnail styling
- `rounded`: sets the image to have rounded corners

---

### Input

A Bootstrap text input:

```html

```

#### Available Props & Slots

- `label`: label to display above the input
- `type`: input type e.g. `text`, `email`
- `icon`: Font Awesome icon to show before input e.g. `cog`, `envelope`
- `prepend`: addon to display before input, can be used via named slot
- `append`: addon to display after input, can be used via named slot
- `size`: Bootstrap input size e.g. `sm`, `lg`
- `help`: helper label to display under the input
- `model`: Livewire model property key
- `debounce`: time in ms to bind Livewire data on keyup e.g. `500`
- `lazy`: bind Livewire data on change

---

### Link

A hyperlink:

```html

```

#### Available Props & Slots

---

### Nav Dropdown

A Bootstrap nav dropdown:

```html

```

#### Available Props & Slots

- `icon`: Font Awesome icon to show before label e.g. `cog`, `envelope`
- `label`: dropdown label to display, can be used via named slot
- `items`: dropdown items, can also be placed in the `slot`

---

### Nav Link

A Bootstrap nav link:

```html

```

#### Available Props & Slots

---

### Pagination

Responsive Bootstrap pagination links:

```html

```

#### Available Props & Slots

- `links`: paginated Laravel models
- `justify`: Bootstrap justification e.g. `start`, `end`

---

### Progress

A Bootstrap progress bar:

```html

```

#### Available Props & Slots

- `label`: label to display inside the progress bar
- `percent`: percentage of the progress bar
- `color`: Bootstrap color e.g. `primary`, `danger`, `success`
- `height`: height of the progress bar in pixels
- `animated`: animate the progress bar
- `striped`: use striped styling for the progress bar

---

### Radio

A Bootstrap radio input:

```html

```

#### Available Props & Slots

- `label`: label to display above the input
- `options`: array of input options e.g. `['Red', 'Blue']`
- `help`: helper label to display under the input
- `switch`: sets the input to use a switch style
- `model`: Livewire model property key
- `lazy`: bind Livewire data on change

---

### Select

A Bootstrap select input:

```html

```

#### Available Props & Slots

- `label`: label to display above the input
- `placeholder`: placeholder to use for the empty first option
- `options`: array of input options e.g. `['Red', 'Blue']`
- `icon`: Font Awesome icon to show before input e.g. `cog`, `envelope`
- `prepend`: addon to display before input, can be used via named slot
- `append`: addon to display after input, can be used via named slot
- `size`: Bootstrap input size e.g. `sm`, `lg`
- `help`: helper label to display under the input
- `model`: Livewire model property key
- `lazy`: bind Livewire data on change

---

### Textarea

A Bootstrap textarea input:

```html

```

#### Available Props & Slots

## Traits

### WithModel

This trait makes form data model manipulation a breeze. No more having to create a Livewire component property for every single form input. All form data will be placed inside the `$model` property array.

#### Getting Model Data

Get the model data as a collection:

```php
$collection = $this->model();
```

#### Setting Model Data

Set a single value:

```php
$this->setModel('name', 'Kevin');
```

Set values using Eloquent model data:

```php
$this->setModel(User::first());
```

Set values using an array:

```php
$this->setModel([
'name' => 'Kevin',
'email' => '[email protected]',
]);
```

#### Working With Arrays

Add an empty array item:

```php
$this->addModelItem('locations');
```

Remove an array item by its key:

```php
$this->removeModelItem('locations', 3);
```

Order an array item by its key & direction:

```php
$this->orderModelItem('locations', 3, 'up');
```

The direction should be `up` or `down`.

#### Binding Model Data

Package components work with this trait via the `model` attribute:

```html

```

#### Validating Model Data

Use the `validateModel` method to validate model data:

```php
$this->validateModel([
'name' => ['required'],
'email' => ['required', 'email'],
]);
```

This method works just like the Livewire `validate` method, so you can specify your rules in a separate `rules` method if you prefer.

## Publishing Assets

### Custom Views

Use your own component views by publishing the package views:

```console
php artisan vendor:publish --tag=laravel-bootstrap-components:views
```

Now edit the files inside `resources/views/vendor/bs`. The package will use these files to render the components.

### Custom Icons

Use your own font icons by publishing the package config:

```console
php artisan vendor:publish --tag=laravel-bootstrap-components:config
```

Now edit the `icon_class_prefix` value inside `config/laravel-bootstrap-components.php`. The package will use this class to render the icons.