apility / laravel-bootstrap
Bootstrap components for Laravel Blade
Installs: 152
Dependents: 0
Suggesters: 0
Security: 0
Stars: 1
Watchers: 0
Forks: 0
Open Issues: 0
pkg:composer/apility/laravel-bootstrap
Requires
- php: ^7.0|^8.0
- illuminate/support: ^7.0|^8.0|^9.0
- illuminate/view: ^7.0|^8.0|^9.0
README
Table of Contents
Installation
composer require apility/laravel-bootstrap
Configuration
To override the default configuration, you must first publish it
php artisan vendor:publish --provider="Bootstrap\Providers\BootstrapServiceProvider" --tag="config"
This will add a bootstrap.php file to your config directory.
The only supported option you can configure currently, is the 'prefix' property. This changes the names of the components.
The default prefix is bs, if you change it to e.g. bootstrap you will have to use the provided components like this:
<x-bootstrap-alert>...</x-bootstrap-alert>
Customization
To customize the provided component's views, you must first publish them
php artisan vendor:publish --provider="Bootstrap\Providers\BootstrapServiceProvider" --tag="views"
Components
Alert
<x-bs-alert variant="success" dismissible> Hello! </x-bs-alert>
Attributes
| Name | Type | Default | Description |
|---|---|---|---|
| variant | string | primary |
The color variant of the alert. |
| dismissible | boolean | false |
Whether the alert is dismissible. |
| fade | boolean | true |
Whether the alert should fade out. |
| show | boolean | true |
Whether the alert should be visible. |
AlertHeading
<x-bs-alert-heading> Hello! </x-bs-alert-heading>
Button
<x-bs-button variant="primary" large href="#test"> Hello! </x-bs-button>
If the href attribute is set, the button will be rendered as an <a> element.
Attributes
| Name | Type | Default | Description |
|---|---|---|---|
| variant | string | primary |
The color variant of the alert. |
| type | string | null |
Sets the button type when used as a regular button, e.g. submit |
| href | string | null |
Sets the href attribute, and makes the button into a link |
| outline | boolean | false |
Whether the alert should appear outlined |
| large | boolean | false |
Whether the alert should be large |
| small | boolean | false |
Whether the alert should be small |
| disabled | boolean | false |
Whether the alert is disabled |
Card Header
<x-bs-card-header> Card title! </x-bs-card-header>
Card Image
<x-bs-card-image src="https://via.placeholder.com/150x150" />
Attributes
| Name | Type | Default | Description |
|---|---|---|---|
| src | string | null |
The image source |
| image | array | null |
An associative array, or object containing 'src', 'title' and 'alt' properties |
| placement | string | 'top' |
The placement of the image, either 'top' or 'bottom' |
Card title
<x-bs-card-title> Card title! </x-bs-card-title>
Card
<x-bs-card header="Header" title="Title" image="https://via.placeholder.com/150" :link="['href' => 'https://example.com', 'title' => 'Read more']" > Card body text </x-bs-card>
Attributes
| Name | Type | Default | Description |
|---|---|---|---|
| header | string | null |
The header of the card |
| title | string | null |
The title of the card |
| image | string | null |
Either an image source url, or an associate array or object that can be used as an Image |
| link | array | null |
An associative array, or object containing 'href' and 'title' properties |
Nav
<x-bs-nav :links="[['href' => '/', 'title' => 'Home'], ['href' => '/articles', 'Articles']]" />
Attributes
| Name | Type | Default | Description |
|---|---|---|---|
| links | array | [] |
An array or collection of links |
The links can be passed either as a collection or a regular array.
The items can be either Bootstrap\Models\Link instances, associative arrays, or standard objects. They will internally be transformed to Bootstrap\Models\Link instances.
| Name | Type | Default | Description |
|---|---|---|---|
| url | string | # |
The link url |
| title | string | '' |
The link title |
| target | string | '_self' |
The link target |
| active | boolean | false |
Whether the link is active |
| disabled | boolean | false |
Whether the link is disabled |
| children | array | [] |
The link children, same format as above |
Navbar
<x-bs-navbar light variant="success" :links="[['href' => '/', 'title' => 'Home'], ['href' => '/articles', 'Articles']]" />
Attributes
| Name | Type | Default | Description |
|---|---|---|---|
| links | array | [] |
Links to render, see Nav |
| variant | string | primary |
The background color variant of the navbar |
| light | boolean | false |
Whether the navbar content is light |
| dark | boolean | false |
Whether the navbar content is dark |
NavbarBrand
<x-bs-navbar-brand href="/"> Hello! </x-bs-navbar-brand>
Attributes
| Name | Type | Default | Description |
|---|---|---|---|
| href | string | # |
The link of the brand |
NavDropdown
This component is used internally when rendering Nav components, it extends the NavLink component.
<x-bs-nav-dropdown :link="['url' => '/', 'title' => 'Articles', 'children' => [['url' => '/a', 'title' => 'A']]]"> Home </x-bs-nav-dropdown>
NavLink
This component is used internally when rendering Nav components.
<x-bs-nav-link :link="['url' => '/', 'title' => 'Articles']"> Home </x-bs-nav-link>
Search
Renders a search form for use in the Navbar. It will submit the query string as query to the given url using the given method.
<x-bs-search action="/submit" method="POST" placeholder="Search..." label="Search" />
Attributes
| Name | Type | Default | Description |
|---|---|---|---|
| action | string | ? |
The action of the form |
| method | string | GET |
The method of the form |
| placeholder | string | Search... |
The placeholder of the search input |
| label | string | Search |
The label of the search submit button |