apility / laravel-bootstrap
Laravel Blade的Bootstrap组件
v1.0.9
2022-09-14 07:56 UTC
Requires
- php: ^7.0|^8.0
- illuminate/support: ^7.0|^8.0|^9.0
- illuminate/view: ^7.0|^8.0|^9.0
README
目录
安装
composer require apility/laravel-bootstrap
配置
要覆盖默认配置,您必须首先发布它
php artisan vendor:publish --provider="Bootstrap\Providers\BootstrapServiceProvider" --tag="config"
这将在您的config
目录中添加一个bootstrap.php
文件。
您目前可以配置的唯一选项是'prefix'属性。这会更改组件的名称。默认前缀是bs
,如果您将其更改为例如bootstrap
,则必须像这样使用提供的组件:
<x-bootstrap-alert>...</x-bootstrap-alert>
自定义
要自定义提供的组件视图,您必须首先发布它们
php artisan vendor:publish --provider="Bootstrap\Providers\BootstrapServiceProvider" --tag="views"
组件
警告框
<x-bs-alert variant="success" dismissible> Hello! </x-bs-alert>
属性
警告框标题
<x-bs-alert-heading> Hello! </x-bs-alert-heading>
按钮
<x-bs-button variant="primary" large href="#test"> Hello! </x-bs-button>
如果设置了href
属性,则按钮将渲染为<a>
元素。
属性
卡片头部
<x-bs-card-header> Card title! </x-bs-card-header>
卡片图片
<x-bs-card-image src="https://via.placeholder.com/150x150" />
属性
卡片标题
<x-bs-card-title> Card title! </x-bs-card-title>
卡片
<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>
属性
导航
<x-bs-nav :links="[['href' => '/', 'title' => 'Home'], ['href' => '/articles', 'Articles']]" />
属性
链接可以作为集合或常规数组传递。项可以是Bootstrap\Models\Link
实例、关联数组或标准对象。它们将被内部转换为Bootstrap\Models\Link
实例。
导航栏
<x-bs-navbar light variant="success" :links="[['href' => '/', 'title' => 'Home'], ['href' => '/articles', 'Articles']]" />
属性
导航栏品牌
<x-bs-navbar-brand href="/"> Hello! </x-bs-navbar-brand>
属性
导航下拉菜单
当渲染导航组件时,此组件在内部使用,它扩展了导航链接组件。
<x-bs-nav-dropdown :link="['url' => '/', 'title' => 'Articles', 'children' => [['url' => '/a', 'title' => 'A']]]"> Home </x-bs-nav-dropdown>
导航链接
当渲染导航组件时,此组件在内部使用。
<x-bs-nav-link :link="['url' => '/', 'title' => 'Articles']"> Home </x-bs-nav-link>
搜索
渲染一个用于在导航栏中使用的搜索表单。它将查询字符串作为query
提交到指定的URL,使用指定的方法。
<x-bs-search action="/submit" method="POST" placeholder="Search..." label="Search" />