apility/laravel-bootstrap

Laravel Blade的Bootstrap组件

v1.0.9 2022-09-14 07:56 UTC

This package is auto-updated.

Last update: 2024-09-14 12:39:55 UTC


README

Packagist Packagist package.json version

目录

安装

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"  />

属性