[增添]添加了datasource的setting数据库以及默认值
This commit is contained in:
makotocc0107
36
vendor/filament/support/docs/09-blade-components/01-overview.md
vendored
Normal file
36
vendor/filament/support/docs/09-blade-components/01-overview.md
vendored
Normal file
@@ -0,0 +1,36 @@
|
||||
---
|
||||
title: Overview
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
Filament packages consume a set of core Blade components that aim to provide a consistent and maintainable foundation for all interfaces. Some of these components are also available for use in your own applications and Filament plugins.
|
||||
|
||||
## Available UI components
|
||||
|
||||
- [Avatar](avatar)
|
||||
- [Badge](badge)
|
||||
- [Breadcrumbs](breadcrumbs)
|
||||
- [Loading indicator](loading-indicator)
|
||||
- [Section](section)
|
||||
- [Tabs](tabs)
|
||||
|
||||
### UI components for actions
|
||||
|
||||
- [Button](button)
|
||||
- [Dropdown](dropdown)
|
||||
- [Icon button](icon-button)
|
||||
- [Link](link)
|
||||
- [Modal](modal)
|
||||
|
||||
### UI components for forms
|
||||
|
||||
- [Checkbox](checkbox)
|
||||
- [Fieldset](fieldset)
|
||||
- [Input](input)
|
||||
- [Input wrapper](input-wrapper)
|
||||
- [Select](select)
|
||||
|
||||
### UI components for tables
|
||||
|
||||
- [Pagination](pagination)
|
||||
47
vendor/filament/support/docs/09-blade-components/02-avatar.md
vendored
Normal file
47
vendor/filament/support/docs/09-blade-components/02-avatar.md
vendored
Normal file
@@ -0,0 +1,47 @@
|
||||
---
|
||||
title: Avatar Blade component
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
The avatar component is used to render a circular or square image, often used to represent a user or entity as their "profile picture":
|
||||
|
||||
```blade
|
||||
<x-filament::avatar
|
||||
src="https://filamentphp.com/dan.jpg"
|
||||
alt="Dan Harrin"
|
||||
/>
|
||||
```
|
||||
|
||||
## Setting the rounding of an avatar
|
||||
|
||||
Avatars are fully rounded by default, but you may make them square by setting the `circular` attribute to `false`:
|
||||
|
||||
```blade
|
||||
<x-filament::avatar
|
||||
src="https://filamentphp.com/dan.jpg"
|
||||
alt="Dan Harrin"
|
||||
:circular="false"
|
||||
/>
|
||||
```
|
||||
|
||||
## Setting the size of an avatar
|
||||
|
||||
By default, the avatar will be "medium" size. You can set the size to either `sm`, `md`, or `lg` using the `size` attribute:
|
||||
|
||||
```blade
|
||||
<x-filament::avatar
|
||||
src="https://filamentphp.com/dan.jpg"
|
||||
alt="Dan Harrin"
|
||||
size="lg"
|
||||
/>
|
||||
```
|
||||
|
||||
You can also pass your own custom size classes into the `size` attribute:
|
||||
|
||||
```blade
|
||||
<x-filament::avatar
|
||||
src="https://filamentphp.com/dan.jpg"
|
||||
alt="Dan Harrin"
|
||||
size="w-12 h-12"
|
||||
/>
|
||||
74
vendor/filament/support/docs/09-blade-components/02-badge.md
vendored
Normal file
74
vendor/filament/support/docs/09-blade-components/02-badge.md
vendored
Normal file
@@ -0,0 +1,74 @@
|
||||
---
|
||||
title: Badge Blade component
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
The badge component is used to render a small box with some text inside:
|
||||
|
||||
```blade
|
||||
<x-filament::badge>
|
||||
New
|
||||
</x-filament::badge>
|
||||
```
|
||||
|
||||
## Setting the size of a badge
|
||||
|
||||
By default, the size of a badge is "medium". You can make it "extra small" or "small" by using the `size` attribute:
|
||||
|
||||
```blade
|
||||
<x-filament::badge size="xs">
|
||||
New
|
||||
</x-filament::badge>
|
||||
|
||||
<x-filament::badge size="sm">
|
||||
New
|
||||
</x-filament::badge>
|
||||
```
|
||||
|
||||
## Changing the color of the badge
|
||||
|
||||
By default, the color of a badge is "primary". You can change it to be `danger`, `gray`, `info`, `success` or `warning` by using the `color` attribute:
|
||||
|
||||
```blade
|
||||
<x-filament::badge color="danger">
|
||||
New
|
||||
</x-filament::badge>
|
||||
|
||||
<x-filament::badge color="gray">
|
||||
New
|
||||
</x-filament::badge>
|
||||
|
||||
<x-filament::badge color="info">
|
||||
New
|
||||
</x-filament::badge>
|
||||
|
||||
<x-filament::badge color="success">
|
||||
New
|
||||
</x-filament::badge>
|
||||
|
||||
<x-filament::badge color="warning">
|
||||
New
|
||||
</x-filament::badge>
|
||||
```
|
||||
|
||||
## Adding an icon to a badge
|
||||
|
||||
You can add an [icon](https://blade-ui-kit.com/blade-icons?set=1#search) to a badge by using the `icon` attribute:
|
||||
|
||||
```blade
|
||||
<x-filament::badge icon="heroicon-m-sparkles">
|
||||
New
|
||||
</x-filament::badge>
|
||||
```
|
||||
|
||||
You can also change the icon's position to be after the text instead of before it, using the `icon-position` attribute:
|
||||
|
||||
```blade
|
||||
<x-filament::badge
|
||||
icon="heroicon-m-sparkles"
|
||||
icon-position="after"
|
||||
>
|
||||
New
|
||||
</x-filament::badge>
|
||||
```
|
||||
18
vendor/filament/support/docs/09-blade-components/02-breadcrumbs.md
vendored
Normal file
18
vendor/filament/support/docs/09-blade-components/02-breadcrumbs.md
vendored
Normal file
@@ -0,0 +1,18 @@
|
||||
---
|
||||
title: Breadcrumbs Blade component
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
The breadcrumbs component is used to render a simple, linear navigation that informs the user of their current location within the application:
|
||||
|
||||
```blade
|
||||
<x-filament::breadcrumbs :breadcrumbs="[
|
||||
'/' => 'Home',
|
||||
'/dashboard' => 'Dashboard',
|
||||
'/dashboard/users' => 'Users',
|
||||
'/dashboard/users/create' => 'Create User',
|
||||
]" />
|
||||
```
|
||||
|
||||
The keys of the array are URLs that the user is able to click on to navigate, and the values are the text that will be displayed for each link.
|
||||
141
vendor/filament/support/docs/09-blade-components/02-button.md
vendored
Normal file
141
vendor/filament/support/docs/09-blade-components/02-button.md
vendored
Normal file
@@ -0,0 +1,141 @@
|
||||
---
|
||||
title: Button Blade component
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
The button component is used to render a clickable button that can perform an action:
|
||||
|
||||
```blade
|
||||
<x-filament::button wire:click="openNewUserModal">
|
||||
New user
|
||||
</x-filament::button>
|
||||
```
|
||||
|
||||
## Using a button as an anchor link
|
||||
|
||||
By default, a button's underlying HTML tag is `<button>`. You can change it to be an `<a>` tag by using the `tag` attribute:
|
||||
|
||||
```blade
|
||||
<x-filament::button
|
||||
href="https://filamentphp.com"
|
||||
tag="a"
|
||||
>
|
||||
Filament
|
||||
</x-filament::button>
|
||||
```
|
||||
|
||||
## Setting the size of a button
|
||||
|
||||
By default, the size of a button is "medium". You can make it "extra small", "small", "large" or "extra large" by using the `size` attribute:
|
||||
|
||||
```blade
|
||||
<x-filament::button size="xs">
|
||||
New user
|
||||
</x-filament::button>
|
||||
|
||||
<x-filament::button size="sm">
|
||||
New user
|
||||
</x-filament::button>
|
||||
|
||||
<x-filament::button size="lg">
|
||||
New user
|
||||
</x-filament::button>
|
||||
|
||||
<x-filament::button size="xl">
|
||||
New user
|
||||
</x-filament::button>
|
||||
```
|
||||
|
||||
## Changing the color of a button
|
||||
|
||||
By default, the color of a button is "primary". You can change it to be `danger`, `gray`, `info`, `success` or `warning` by using the `color` attribute:
|
||||
|
||||
```blade
|
||||
<x-filament::button color="danger">
|
||||
New user
|
||||
</x-filament::button>
|
||||
|
||||
<x-filament::button color="gray">
|
||||
New user
|
||||
</x-filament::button>
|
||||
|
||||
<x-filament::button color="info">
|
||||
New user
|
||||
</x-filament::button>
|
||||
|
||||
<x-filament::button color="success">
|
||||
New user
|
||||
</x-filament::button>
|
||||
|
||||
<x-filament::button color="warning">
|
||||
New user
|
||||
</x-filament::button>
|
||||
```
|
||||
|
||||
## Adding an icon to a button
|
||||
|
||||
You can add an [icon](https://blade-ui-kit.com/blade-icons?set=1#search) to a button by using the `icon` attribute:
|
||||
|
||||
```blade
|
||||
<x-filament::button icon="heroicon-m-sparkles">
|
||||
New user
|
||||
</x-filament::button>
|
||||
```
|
||||
|
||||
You can also change the icon's position to be after the text instead of before it, using the `icon-position` attribute:
|
||||
|
||||
```blade
|
||||
<x-filament::button
|
||||
icon="heroicon-m-sparkles"
|
||||
icon-position="after"
|
||||
>
|
||||
New user
|
||||
</x-filament::button>
|
||||
```
|
||||
|
||||
## Making a button outlined
|
||||
|
||||
You can make a button use an "outlined" design using the `outlined` attribute:
|
||||
|
||||
```blade
|
||||
<x-filament::button outlined>
|
||||
New user
|
||||
</x-filament::button>
|
||||
```
|
||||
|
||||
## Adding a tooltip to a button
|
||||
|
||||
You can add a tooltip to a button by using the `tooltip` attribute:
|
||||
|
||||
```blade
|
||||
<x-filament::button tooltip="Register a user">
|
||||
New user
|
||||
</x-filament::button>
|
||||
```
|
||||
|
||||
## Adding a badge to a button
|
||||
|
||||
You can render a [badge](badge) on top of a button by using the `badge` slot:
|
||||
|
||||
```blade
|
||||
<x-filament::button>
|
||||
Mark notifications as read
|
||||
|
||||
<x-slot name="badge">
|
||||
3
|
||||
</x-slot>
|
||||
</x-filament::button>
|
||||
```
|
||||
|
||||
You can [change the color](badge#changing-the-color-of-the-badge) of the badge using the `badge-color` attribute:
|
||||
|
||||
```blade
|
||||
<x-filament::button badge-color="danger">
|
||||
Mark notifications as read
|
||||
|
||||
<x-slot name="badge">
|
||||
3
|
||||
</x-slot>
|
||||
</x-filament::button>
|
||||
```
|
||||
41
vendor/filament/support/docs/09-blade-components/02-checkbox.md
vendored
Normal file
41
vendor/filament/support/docs/09-blade-components/02-checkbox.md
vendored
Normal file
@@ -0,0 +1,41 @@
|
||||
---
|
||||
title: Checkbox Blade component
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
You can use the checkbox component to render a checkbox input that can be used to toggle a boolean value:
|
||||
|
||||
```blade
|
||||
<label>
|
||||
<x-filament::input.checkbox wire:model="isAdmin" />
|
||||
|
||||
<span>
|
||||
Is Admin
|
||||
</span>
|
||||
</label>
|
||||
```
|
||||
|
||||
## Triggering the error state of the checkbox
|
||||
|
||||
The checkbox has special styling that you can use if it is invalid. To trigger this styling, you can use either Blade or Alpine.js.
|
||||
|
||||
To trigger the error state using Blade, you can pass the `valid` attribute to the component, which contains either true or false based on if the checkbox is valid or not:
|
||||
|
||||
```blade
|
||||
<x-filament::input.checkbox
|
||||
wire:model="isAdmin"
|
||||
:valid="! $errors->has('isAdmin')"
|
||||
/>
|
||||
```
|
||||
|
||||
Alternatively, you can use an Alpine.js expression to trigger the error state, based on if it evaluates to `true` or `false`:
|
||||
|
||||
```blade
|
||||
<div x-data="{ errors: ['isAdmin'] }">
|
||||
<x-filament::input.checkbox
|
||||
x-model="isAdmin"
|
||||
alpine-valid="! errors.includes('isAdmin')"
|
||||
/>
|
||||
</div>
|
||||
```
|
||||
172
vendor/filament/support/docs/09-blade-components/02-dropdown.md
vendored
Normal file
172
vendor/filament/support/docs/09-blade-components/02-dropdown.md
vendored
Normal file
@@ -0,0 +1,172 @@
|
||||
---
|
||||
title: Dropdown Blade component
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
The dropdown component allows you to render a dropdown menu with a button that triggers it:
|
||||
|
||||
```blade
|
||||
<x-filament::dropdown>
|
||||
<x-slot name="trigger">
|
||||
<x-filament::button>
|
||||
More actions
|
||||
</x-filament::button>
|
||||
</x-slot>
|
||||
|
||||
<x-filament::dropdown.list>
|
||||
<x-filament::dropdown.list.item wire:click="openViewModal">
|
||||
View
|
||||
</x-filament::dropdown.list.item>
|
||||
|
||||
<x-filament::dropdown.list.item wire:click="openEditModal">
|
||||
Edit
|
||||
</x-filament::dropdown.list.item>
|
||||
|
||||
<x-filament::dropdown.list.item wire:click="openDeleteModal">
|
||||
Delete
|
||||
</x-filament::dropdown.list.item>
|
||||
</x-filament::dropdown.list>
|
||||
</x-filament::dropdown>
|
||||
```
|
||||
|
||||
## Using a dropdown item as an anchor link
|
||||
|
||||
By default, a dropdown item's underlying HTML tag is `<button>`. You can change it to be an `<a>` tag by using the `tag` attribute:
|
||||
|
||||
```blade
|
||||
<x-filament::dropdown.list.item
|
||||
href="https://filamentphp.com"
|
||||
tag="a"
|
||||
>
|
||||
Filament
|
||||
</x-filament::dropdown.list.item>
|
||||
```
|
||||
|
||||
## Changing the color of a dropdown item
|
||||
|
||||
By default, the color of a dropdown item is "gray". You can change it to be `danger`, `info`, `primary`, `success` or `warning` by using the `color` attribute:
|
||||
|
||||
```blade
|
||||
<x-filament::dropdown.list.item color="danger">
|
||||
Edit
|
||||
</x-filament::dropdown.list.item>
|
||||
|
||||
<x-filament::dropdown.list.item color="info">
|
||||
Edit
|
||||
</x-filament::dropdown.list.item>
|
||||
|
||||
<x-filament::dropdown.list.item color="primary">
|
||||
Edit
|
||||
</x-filament::dropdown.list.item>
|
||||
|
||||
<x-filament::dropdown.list.item color="success">
|
||||
Edit
|
||||
</x-filament::dropdown.list.item>
|
||||
|
||||
<x-filament::dropdown.list.item color="warning">
|
||||
Edit
|
||||
</x-filament::dropdown.list.item>
|
||||
```
|
||||
|
||||
## Adding an icon to a dropdown item
|
||||
|
||||
You can add an [icon](https://blade-ui-kit.com/blade-icons?set=1#search) to a dropdown item by using the `icon` attribute:
|
||||
|
||||
```blade
|
||||
<x-filament::dropdown.list.item icon="heroicon-m-pencil">
|
||||
Edit
|
||||
</x-filament::dropdown.list.item>
|
||||
```
|
||||
|
||||
### Changing the icon color of a dropdown item
|
||||
|
||||
By default, the icon color uses the [same color as the item itself](#changing-the-color-of-a-dropdown-item). You can override it to be `danger`, `info`, `primary`, `success` or `warning` by using the `icon-color` attribute:
|
||||
|
||||
```blade
|
||||
<x-filament::dropdown.list.item icon="heroicon-m-pencil" icon-color="danger">
|
||||
Edit
|
||||
</x-filament::dropdown.list.item>
|
||||
|
||||
<x-filament::dropdown.list.item icon="heroicon-m-pencil" icon-color="info">
|
||||
Edit
|
||||
</x-filament::dropdown.list.item>
|
||||
|
||||
<x-filament::dropdown.list.item icon="heroicon-m-pencil" icon-color="primary">
|
||||
Edit
|
||||
</x-filament::dropdown.list.item>
|
||||
|
||||
<x-filament::dropdown.list.item icon="heroicon-m-pencil" icon-color="success">
|
||||
Edit
|
||||
</x-filament::dropdown.list.item>
|
||||
|
||||
<x-filament::dropdown.list.item icon="heroicon-m-pencil" icon-color="warning">
|
||||
Edit
|
||||
</x-filament::dropdown.list.item>
|
||||
```
|
||||
|
||||
## Adding an image to a dropdown item
|
||||
|
||||
You can add a circular image to a dropdown item by using the `image` attribute:
|
||||
|
||||
```blade
|
||||
<x-filament::dropdown.list.item image="https://filamentphp.com/dan.jpg">
|
||||
Dan Harrin
|
||||
</x-filament::dropdown.list.item>
|
||||
```
|
||||
|
||||
## Adding a badge to a dropdown item
|
||||
|
||||
You can render a [badge](badge) on top of a dropdown item by using the `badge` slot:
|
||||
|
||||
```blade
|
||||
<x-filament::dropdown.list.item>
|
||||
Mark notifications as read
|
||||
|
||||
<x-slot name="badge">
|
||||
3
|
||||
</x-slot>
|
||||
</x-filament::dropdown.list.item>
|
||||
```
|
||||
|
||||
You can [change the color](badge#changing-the-color-of-the-badge) of the badge using the `badge-color` attribute:
|
||||
|
||||
```blade
|
||||
<x-filament::dropdown.list.item badge-color="danger">
|
||||
Mark notifications as read
|
||||
|
||||
<x-slot name="badge">
|
||||
3
|
||||
</x-slot>
|
||||
</x-filament::dropdown.list.item>
|
||||
```
|
||||
|
||||
## Setting the placement of a dropdown
|
||||
|
||||
The dropdown may be positioned relative to the trigger button by using the `placement` attribute:
|
||||
|
||||
```blade
|
||||
<x-filament::dropdown placement="top-start">
|
||||
{{-- Dropdown items --}}
|
||||
</x-filament::dropdown>
|
||||
```
|
||||
|
||||
## Setting the width of a dropdown
|
||||
|
||||
The dropdown may be set to a width by using the `width` attribute. Options correspond to [Tailwind's max-width scale](https://tailwindcss.com/docs/max-width). The options are `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`, `4xl`, `5xl`, `6xl` and `7xl`:
|
||||
|
||||
```blade
|
||||
<x-filament::dropdown width="xs">
|
||||
{{-- Dropdown items --}}
|
||||
</x-filament::dropdown>
|
||||
```
|
||||
|
||||
## Controlling the maximum height of a dropdown
|
||||
|
||||
The dropdown content can have a maximum height using the `max-height` attribute, so that it scrolls. You can pass a [CSS length](https://developer.mozilla.org/en-US/docs/Web/CSS/length):
|
||||
|
||||
```blade
|
||||
<x-filament::dropdown max-height="400px">
|
||||
{{-- Dropdown items --}}
|
||||
</x-filament::dropdown>
|
||||
```
|
||||
17
vendor/filament/support/docs/09-blade-components/02-fieldset.md
vendored
Normal file
17
vendor/filament/support/docs/09-blade-components/02-fieldset.md
vendored
Normal file
@@ -0,0 +1,17 @@
|
||||
---
|
||||
title: Fieldset Blade component
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
You can use a fieldset to group multiple form fields together, optionally with a label:
|
||||
|
||||
```blade
|
||||
<x-filament::fieldset>
|
||||
<x-slot name="label">
|
||||
Address
|
||||
</x-slot>
|
||||
|
||||
{{-- Form fields --}}
|
||||
</x-filament::fieldset>
|
||||
```
|
||||
135
vendor/filament/support/docs/09-blade-components/02-icon-button.md
vendored
Normal file
135
vendor/filament/support/docs/09-blade-components/02-icon-button.md
vendored
Normal file
@@ -0,0 +1,135 @@
|
||||
---
|
||||
title: Icon button Blade component
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
The button component is used to render a clickable button that can perform an action:
|
||||
|
||||
```blade
|
||||
<x-filament::icon-button
|
||||
icon="heroicon-m-plus"
|
||||
wire:click="openNewUserModal"
|
||||
label="New label"
|
||||
/>
|
||||
```
|
||||
|
||||
## Using an icon button as an anchor link
|
||||
|
||||
By default, an icon button's underlying HTML tag is `<button>`. You can change it to be an `<a>` tag by using the `tag` attribute:
|
||||
|
||||
```blade
|
||||
<x-filament::icon-button
|
||||
icon="heroicon-m-arrow-top-right-on-square"
|
||||
href="https://filamentphp.com"
|
||||
tag="a"
|
||||
label="Filament"
|
||||
/>
|
||||
```
|
||||
|
||||
## Setting the size of an icon button
|
||||
|
||||
By default, the size of an icon button is "medium". You can make it "extra small", "small", "large" or "extra large" by using the `size` attribute:
|
||||
|
||||
```blade
|
||||
<x-filament::icon-button
|
||||
icon="heroicon-m-plus"
|
||||
size="xs"
|
||||
label="New label"
|
||||
/>
|
||||
|
||||
<x-filament::icon-button
|
||||
icon="heroicon-m-plus"
|
||||
size="sm"
|
||||
label="New label"
|
||||
/>
|
||||
|
||||
<x-filament::icon-button
|
||||
icon="heroicon-s-plus"
|
||||
size="lg"
|
||||
label="New label"
|
||||
/>
|
||||
|
||||
<x-filament::icon-button
|
||||
icon="heroicon-s-plus"
|
||||
size="xl"
|
||||
label="New label"
|
||||
/>
|
||||
```
|
||||
|
||||
## Changing the color of an icon button
|
||||
|
||||
By default, the color of an icon button is "primary". You can change it to be `danger`, `gray`, `info`, `success` or `warning` by using the `color` attribute:
|
||||
|
||||
```blade
|
||||
<x-filament::icon-button
|
||||
icon="heroicon-m-plus"
|
||||
color="danger"
|
||||
label="New label"
|
||||
/>
|
||||
|
||||
<x-filament::icon-button
|
||||
icon="heroicon-m-plus"
|
||||
color="gray"
|
||||
label="New label"
|
||||
/>
|
||||
|
||||
<x-filament::icon-button
|
||||
icon="heroicon-m-plus"
|
||||
color="info"
|
||||
label="New label"
|
||||
/>
|
||||
|
||||
<x-filament::icon-button
|
||||
icon="heroicon-m-plus"
|
||||
color="success"
|
||||
label="New label"
|
||||
/>
|
||||
|
||||
<x-filament::icon-button
|
||||
icon="heroicon-m-plus"
|
||||
color="warning"
|
||||
label="New label"
|
||||
/>
|
||||
```
|
||||
|
||||
## Adding a tooltip to an icon button
|
||||
|
||||
You can add a tooltip to an icon button by using the `tooltip` attribute:
|
||||
|
||||
```blade
|
||||
<x-filament::icon-button
|
||||
icon="heroicon-m-plus"
|
||||
tooltip="Register a user"
|
||||
label="New label"
|
||||
/>
|
||||
```
|
||||
|
||||
## Adding a badge to an icon button
|
||||
|
||||
You can render a [badge](badge) on top of an icon button by using the `badge` slot:
|
||||
|
||||
```blade
|
||||
<x-filament::icon-button
|
||||
icon="heroicon-m-x-mark"
|
||||
label="Mark notifications as read"
|
||||
>
|
||||
<x-slot name="badge">
|
||||
3
|
||||
</x-slot>
|
||||
</x-filament::icon-button>
|
||||
```
|
||||
|
||||
You can [change the color](badge#changing-the-color-of-the-badge) of the badge using the `badge-color` attribute:
|
||||
|
||||
```blade
|
||||
<x-filament::icon-button
|
||||
icon="heroicon-m-x-mark"
|
||||
label="Mark notifications as read"
|
||||
badge-color="danger"
|
||||
>
|
||||
<x-slot name="badge">
|
||||
3
|
||||
</x-slot>
|
||||
</x-filament::icon-button>
|
||||
```
|
||||
116
vendor/filament/support/docs/09-blade-components/02-input-wrapper.md
vendored
Normal file
116
vendor/filament/support/docs/09-blade-components/02-input-wrapper.md
vendored
Normal file
@@ -0,0 +1,116 @@
|
||||
---
|
||||
title: Input wrapper Blade component
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
The input wrapper component should be used as a wrapper around the [input](input) or [select](select) components. It provides a border and other elements such as a prefix or suffix.
|
||||
|
||||
```blade
|
||||
<x-filament::input.wrapper>
|
||||
<x-filament::input
|
||||
type="text"
|
||||
wire:model="name"
|
||||
/>
|
||||
</x-filament::input.wrapper>
|
||||
|
||||
<x-filament::input.wrapper>
|
||||
<x-filament::input.select wire:model="status">
|
||||
<option value="draft">Draft</option>
|
||||
<option value="reviewing">Reviewing</option>
|
||||
<option value="published">Published</option>
|
||||
</x-filament::input.select>
|
||||
</x-filament::input.wrapper>
|
||||
```
|
||||
|
||||
## Triggering the error state of the input
|
||||
|
||||
The component has special styling that you can use if it is invalid. To trigger this styling, you can use either Blade or Alpine.js.
|
||||
|
||||
To trigger the error state using Blade, you can pass the `valid` attribute to the component, which contains either true or false based on if the input is valid or not:
|
||||
|
||||
```blade
|
||||
<x-filament::input.wrapper :valid="! $errors->has('name')">
|
||||
<x-filament::input
|
||||
type="text"
|
||||
wire:model="name"
|
||||
/>
|
||||
</x-filament::input.wrapper>
|
||||
```
|
||||
|
||||
Alternatively, you can use an Alpine.js expression to trigger the error state, based on if it evaluates to `true` or `false`:
|
||||
|
||||
```blade
|
||||
<div x-data="{ errors: ['name'] }">
|
||||
<x-filament::input.wrapper alpine-valid="! errors.includes('name')">
|
||||
<x-filament::input
|
||||
type="text"
|
||||
wire:model="name"
|
||||
/>
|
||||
</x-filament::input.wrapper>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Disabling the input
|
||||
|
||||
To disable the input, you must also pass the `disabled` attribute to the wrapper component:
|
||||
|
||||
```blade
|
||||
<x-filament::input.wrapper disabled>
|
||||
<x-filament::input
|
||||
type="text"
|
||||
wire:model="name"
|
||||
disabled
|
||||
/>
|
||||
</x-filament::input.wrapper>
|
||||
```
|
||||
|
||||
## Adding affix text aside the input
|
||||
|
||||
You may place text before and after the input using the `prefix` and `suffix` slots:
|
||||
|
||||
```blade
|
||||
<x-filament::input.wrapper>
|
||||
<x-slot name="prefix">
|
||||
https://
|
||||
</x-slot>
|
||||
|
||||
<x-filament::input
|
||||
type="text"
|
||||
wire:model="domain"
|
||||
/>
|
||||
|
||||
<x-slot name="suffix">
|
||||
.com
|
||||
</x-slot>
|
||||
</x-filament::input.wrapper>
|
||||
```
|
||||
|
||||
### Using icons as affixes
|
||||
|
||||
You may place an [icon](https://blade-ui-kit.com/blade-icons?set=1#search) before and after the input using the `prefix-icon` and `suffix-icon` attributes:
|
||||
|
||||
```blade
|
||||
<x-filament::input.wrapper suffix-icon="heroicon-m-globe-alt">
|
||||
<x-filament::input
|
||||
type="url"
|
||||
wire:model="domain"
|
||||
/>
|
||||
</x-filament::input.wrapper>
|
||||
```
|
||||
|
||||
#### Setting the affix icon's color
|
||||
|
||||
Affix icons are gray by default, but you may set a different color using the `prefix-icon-color` and `affix-icon-color` attributes:
|
||||
|
||||
```blade
|
||||
<x-filament::input.wrapper
|
||||
suffix-icon="heroicon-m-check-circle"
|
||||
suffix-icon-color="success"
|
||||
>
|
||||
<x-filament::input
|
||||
type="url"
|
||||
wire:model="domain"
|
||||
/>
|
||||
</x-filament::input.wrapper>
|
||||
```
|
||||
18
vendor/filament/support/docs/09-blade-components/02-input.md
vendored
Normal file
18
vendor/filament/support/docs/09-blade-components/02-input.md
vendored
Normal file
@@ -0,0 +1,18 @@
|
||||
---
|
||||
title: Input Blade component
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
The input component is a wrapper around the native `<input>` element. It provides a simple interface for entering a single line of text.
|
||||
|
||||
```blade
|
||||
<x-filament::input.wrapper>
|
||||
<x-filament::input
|
||||
type="text"
|
||||
wire:model="name"
|
||||
/>
|
||||
</x-filament::input.wrapper>
|
||||
```
|
||||
|
||||
To use the input component, you must wrap it in an "input wrapper" component, which provides a border and other elements such as a prefix or suffix. You can learn more about customizing the input wrapper component [here](input-wrapper).
|
||||
131
vendor/filament/support/docs/09-blade-components/02-link.md
vendored
Normal file
131
vendor/filament/support/docs/09-blade-components/02-link.md
vendored
Normal file
@@ -0,0 +1,131 @@
|
||||
---
|
||||
title: Link Blade component
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
The link component is used to render a clickable link that can perform an action:
|
||||
|
||||
```blade
|
||||
<x-filament::link :href="route('users.create')">
|
||||
New user
|
||||
</x-filament::link>
|
||||
```
|
||||
|
||||
## Using a link as a button
|
||||
|
||||
By default, a link's underlying HTML tag is `<a>`. You can change it to be a `<button>` tag by using the `tag` attribute:
|
||||
|
||||
```blade
|
||||
<x-filament::link
|
||||
wire:click="openNewUserModal"
|
||||
tag="button"
|
||||
>
|
||||
New user
|
||||
</x-filament::link>
|
||||
```
|
||||
|
||||
## Setting the size of a link
|
||||
|
||||
By default, the size of a link is "medium". You can make it "small", "large", "extra large" or "extra extra large" by using the `size` attribute:
|
||||
|
||||
```blade
|
||||
<x-filament::link size="sm">
|
||||
New user
|
||||
</x-filament::link>
|
||||
|
||||
<x-filament::link size="lg">
|
||||
New user
|
||||
</x-filament::link>
|
||||
|
||||
<x-filament::link size="xl">
|
||||
New user
|
||||
</x-filament::link>
|
||||
|
||||
<x-filament::link size="2xl">
|
||||
New user
|
||||
</x-filament::link>
|
||||
```
|
||||
|
||||
## Changing the color of a link
|
||||
|
||||
By default, the color of a link is "primary". You can change it to be `danger`, `gray`, `info`, `success` or `warning` by using the `color` attribute:
|
||||
|
||||
```blade
|
||||
<x-filament::link color="danger">
|
||||
New user
|
||||
</x-filament::link>
|
||||
|
||||
<x-filament::link color="gray">
|
||||
New user
|
||||
</x-filament::link>
|
||||
|
||||
<x-filament::link color="info">
|
||||
New user
|
||||
</x-filament::link>
|
||||
|
||||
<x-filament::link color="success">
|
||||
New user
|
||||
</x-filament::link>
|
||||
|
||||
<x-filament::link color="warning">
|
||||
New user
|
||||
</x-filament::link>
|
||||
```
|
||||
|
||||
## Adding an icon to a link
|
||||
|
||||
You can add an [icon](https://blade-ui-kit.com/blade-icons?set=1#search) to a link by using the `icon` attribute:
|
||||
|
||||
```blade
|
||||
<x-filament::link icon="heroicon-m-sparkles">
|
||||
New user
|
||||
</x-filament::link>
|
||||
```
|
||||
|
||||
You can also change the icon's position to be after the text instead of before it, using the `icon-position` attribute:
|
||||
|
||||
```blade
|
||||
<x-filament::link
|
||||
icon="heroicon-m-sparkles"
|
||||
icon-position="after"
|
||||
>
|
||||
New user
|
||||
</x-filament::link>
|
||||
```
|
||||
|
||||
## Adding a tooltip to a link
|
||||
|
||||
You can add a tooltip to a link by using the `tooltip` attribute:
|
||||
|
||||
```blade
|
||||
<x-filament::link tooltip="Register a user">
|
||||
New user
|
||||
</x-filament::link>
|
||||
```
|
||||
|
||||
## Adding a badge to a link
|
||||
|
||||
You can render a [badge](badge) on top of a link by using the `badge` slot:
|
||||
|
||||
```blade
|
||||
<x-filament::link>
|
||||
Mark notifications as read
|
||||
|
||||
<x-slot name="badge">
|
||||
3
|
||||
</x-slot>
|
||||
</x-filament::link>
|
||||
```
|
||||
|
||||
You can [change the color](badge#changing-the-color-of-the-badge) of the badge using the `badge-color` attribute:
|
||||
|
||||
```blade
|
||||
<x-filament::link badge-color="danger">
|
||||
Mark notifications as read
|
||||
|
||||
<x-slot name="badge">
|
||||
3
|
||||
</x-slot>
|
||||
</x-filament::link>
|
||||
```
|
||||
11
vendor/filament/support/docs/09-blade-components/02-loading-indicator.md
vendored
Normal file
11
vendor/filament/support/docs/09-blade-components/02-loading-indicator.md
vendored
Normal file
@@ -0,0 +1,11 @@
|
||||
---
|
||||
title: Loading indicator Blade component
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
The loading indicator is an animated SVG that can be used to indicate that something is in progress:
|
||||
|
||||
```blade
|
||||
<x-filament::loading-indicator class="h-5 w-5" />
|
||||
```
|
||||
226
vendor/filament/support/docs/09-blade-components/02-modal.md
vendored
Normal file
226
vendor/filament/support/docs/09-blade-components/02-modal.md
vendored
Normal file
@@ -0,0 +1,226 @@
|
||||
---
|
||||
title: Modal Blade component
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
The modal component is able to open a dialog window or slide-over with any content:
|
||||
|
||||
```blade
|
||||
<x-filament::modal>
|
||||
<x-slot name="trigger">
|
||||
<x-filament::button>
|
||||
Open modal
|
||||
</x-filament::button>
|
||||
</x-slot>
|
||||
|
||||
{{-- Modal content --}}
|
||||
</x-filament::modal>
|
||||
```
|
||||
|
||||
## Controlling a modal from JavaScript
|
||||
|
||||
You can use the `trigger` slot to render a button that opens the modal. However, this is not required. You have complete control over when the modal opens and closes through JavaScript. First, give the modal an ID so that you can reference it:
|
||||
|
||||
```blade
|
||||
<x-filament::modal id="edit-user">
|
||||
{{-- Modal content --}}
|
||||
</x-filament::modal>
|
||||
```
|
||||
|
||||
Now, you can dispatch an `open-modal` or `close-modal` browser event, passing the modal's ID, which will open or close the modal. For example, from a Livewire component:
|
||||
|
||||
```php
|
||||
$this->dispatch('open-modal', id: 'edit-user');
|
||||
```
|
||||
|
||||
Or from Alpine.js:
|
||||
|
||||
```php
|
||||
$dispatch('open-modal', { id: 'edit-user' })
|
||||
```
|
||||
|
||||
## Adding a heading to a modal
|
||||
|
||||
You can add a heading to a modal by using the `heading` slot:
|
||||
|
||||
```blade
|
||||
<x-filament::modal>
|
||||
<x-slot name="heading">
|
||||
Modal heading
|
||||
</x-slot>
|
||||
|
||||
{{-- Modal content --}}
|
||||
</x-filament::modal>
|
||||
```
|
||||
|
||||
## Adding a description to a modal
|
||||
|
||||
You can add a description, below the heading, to a modal by using the `description` slot:
|
||||
|
||||
```blade
|
||||
<x-filament::modal>
|
||||
<x-slot name="heading">
|
||||
Modal heading
|
||||
</x-slot>
|
||||
|
||||
<x-slot name="description">
|
||||
Modal description
|
||||
</x-slot>
|
||||
|
||||
{{-- Modal content --}}
|
||||
</x-filament::modal>
|
||||
```
|
||||
|
||||
## Adding an icon to a modal
|
||||
|
||||
You can add an [icon](https://blade-ui-kit.com/blade-icons?set=1#search) to a modal by using the `icon` attribute:
|
||||
|
||||
```blade
|
||||
<x-filament::modal icon="heroicon-o-information-circle">
|
||||
<x-slot name="heading">
|
||||
Modal heading
|
||||
</x-slot>
|
||||
|
||||
{{-- Modal content --}}
|
||||
</x-filament::modal>
|
||||
```
|
||||
|
||||
By default, the color of an icon is "primary". You can change it to be `danger`, `gray`, `info`, `success` or `warning` by using the `icon-color` attribute:
|
||||
|
||||
```blade
|
||||
<x-filament::modal
|
||||
icon="heroicon-o-exclamation-triangle"
|
||||
icon-color="danger"
|
||||
>
|
||||
<x-slot name="heading">
|
||||
Modal heading
|
||||
</x-slot>
|
||||
|
||||
{{-- Modal content --}}
|
||||
</x-filament::modal>
|
||||
```
|
||||
|
||||
## Adding a footer to a modal
|
||||
|
||||
You can add a footer to a modal by using the `footer` slot:
|
||||
|
||||
```blade
|
||||
<x-filament::modal>
|
||||
{{-- Modal content --}}
|
||||
|
||||
<x-slot name="footer">
|
||||
{{-- Modal footer content --}}
|
||||
</x-slot>
|
||||
</x-filament::modal>
|
||||
```
|
||||
|
||||
Alternatively, you can add actions into the footer by using the `footerActions` slot:
|
||||
|
||||
```blade
|
||||
<x-filament::modal>
|
||||
{{-- Modal content --}}
|
||||
|
||||
<x-slot name="footerActions">
|
||||
{{-- Modal footer actions --}}
|
||||
</x-slot>
|
||||
</x-filament::modal>
|
||||
```
|
||||
|
||||
## Changing the modal's alignment
|
||||
|
||||
By default, modal content will be aligned to the start, or centered if the modal is `xs` or `sm` in [width](#changing-the-modal-width). If you wish to change the alignment of content in a modal, you can use the `alignment` attribute and pass it `start` or `center`:
|
||||
|
||||
```blade
|
||||
<x-filament::modal alignment="center">
|
||||
{{-- Modal content --}}
|
||||
</x-filament::modal>
|
||||
```
|
||||
|
||||
## Using a slide-over instead of a modal
|
||||
|
||||
You can open a "slide-over" dialog instead of a modal by using the `slide-over` attribute:
|
||||
|
||||
```blade
|
||||
<x-filament::modal slide-over>
|
||||
{{-- Slide-over content --}}
|
||||
</x-filament::modal>
|
||||
```
|
||||
|
||||
## Making the modal header sticky
|
||||
|
||||
The header of a modal scrolls out of view with the modal content when it overflows the modal size. However, slide-overs have a sticky modal that's always visible. You may control this behavior using the `sticky-header` attribute:
|
||||
|
||||
```blade
|
||||
<x-filament::modal sticky-header>
|
||||
<x-slot name="heading">
|
||||
Modal heading
|
||||
</x-slot>
|
||||
|
||||
{{-- Modal content --}}
|
||||
</x-filament::modal>
|
||||
```
|
||||
|
||||
## Making the modal footer sticky
|
||||
|
||||
The footer of a modal is rendered inline after the content by default. Slide-overs, however, have a sticky footer that always shows when scrolling the content. You may enable this for a modal too using the `sticky-footer` attribute:
|
||||
|
||||
```blade
|
||||
<x-filament::modal sticky-footer>
|
||||
{{-- Modal content --}}
|
||||
|
||||
<x-slot name="footer">
|
||||
{{-- Modal footer content --}}
|
||||
</x-slot>
|
||||
</x-filament::modal>
|
||||
```
|
||||
|
||||
## Changing the modal width
|
||||
|
||||
You can change the width of the modal by using the `width` attribute. Options correspond to [Tailwind's max-width scale](https://tailwindcss.com/docs/max-width). The options are `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`, `4xl`, `5xl`, `6xl`, `7xl`, and `screen`:
|
||||
|
||||
```blade
|
||||
<x-filament::modal width="5xl">
|
||||
{{-- Modal content --}}
|
||||
</x-filament::modal>
|
||||
```
|
||||
|
||||
## Closing the modal by clicking away
|
||||
|
||||
By default, when you click away from a modal, it will close itself. If you wish to disable this behavior for a specific action, you can use the `close-by-clicking-away` attribute:
|
||||
|
||||
```blade
|
||||
<x-filament::modal :close-by-clicking-away="false">
|
||||
{{-- Modal content --}}
|
||||
</x-filament::modal>
|
||||
```
|
||||
|
||||
## Closing the modal by escaping
|
||||
|
||||
By default, when you press escape on a modal, it will close itself. If you wish to disable this behavior for a specific action, you can use the `close-by-escaping` attribute:
|
||||
|
||||
```blade
|
||||
<x-filament::modal :close-by-escaping="false">
|
||||
{{-- Modal content --}}
|
||||
</x-filament::modal>
|
||||
```
|
||||
|
||||
## Hiding the modal close button
|
||||
|
||||
By default, modals have a close button in the top right corner. You can remove the close button from the modal by using the `close-button` attribute:
|
||||
|
||||
```blade
|
||||
<x-filament::modal :close-button="false">
|
||||
{{-- Modal content --}}
|
||||
</x-filament::modal>
|
||||
```
|
||||
|
||||
## Preventing the modal from autofocusing
|
||||
|
||||
By default, modals will autofocus on the first focusable element when opened. If you wish to disable this behavior, you can use the `autofocus` attribute:
|
||||
|
||||
```blade
|
||||
<x-filament::modal :autofocus="false">
|
||||
{{-- Modal content --}}
|
||||
</x-filament::modal>
|
||||
```
|
||||
81
vendor/filament/support/docs/09-blade-components/02-pagination.md
vendored
Normal file
81
vendor/filament/support/docs/09-blade-components/02-pagination.md
vendored
Normal file
@@ -0,0 +1,81 @@
|
||||
---
|
||||
title: Pagination Blade component
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
The pagination component can be used in a Livewire Blade view only. It can render a list of paginated links:
|
||||
|
||||
```php
|
||||
use App\Models\User;
|
||||
use Illuminate\Contracts\View\View;
|
||||
use Livewire\Component;
|
||||
|
||||
class ListUsers extends Component
|
||||
{
|
||||
// ...
|
||||
|
||||
public function render(): View
|
||||
{
|
||||
return view('livewire.list-users', [
|
||||
'users' => User::query()->paginate(10),
|
||||
]);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```blade
|
||||
<x-filament::pagination :paginator="$users" />
|
||||
```
|
||||
|
||||
Alternatively, you can use simple pagination or cursor pagination, which will just render a "previous" and "next" button:
|
||||
|
||||
```php
|
||||
use App\Models\User;
|
||||
|
||||
User::query()->simplePaginate(10)
|
||||
User::query()->cursorPaginate(10)
|
||||
```
|
||||
|
||||
## Allowing the user to customize the number of items per page
|
||||
|
||||
You can allow the user to customize the number of items per page by passing an array of options to the `page-options` attribute. You must also define a Livewire property where the user's selection will be stored:
|
||||
|
||||
```php
|
||||
use App\Models\User;
|
||||
use Illuminate\Contracts\View\View;
|
||||
use Livewire\Component;
|
||||
|
||||
class ListUsers extends Component
|
||||
{
|
||||
public int | string $perPage = 10;
|
||||
|
||||
// ...
|
||||
|
||||
public function render(): View
|
||||
{
|
||||
return view('livewire.list-users', [
|
||||
'users' => User::query()->paginate($this->perPage),
|
||||
]);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```blade
|
||||
<x-filament::pagination
|
||||
:paginator="$users"
|
||||
:page-options="[5, 10, 20, 50, 100, 'all']"
|
||||
:current-page-option-property="perPage"
|
||||
/>
|
||||
```
|
||||
|
||||
## Displaying links to the first and the last page
|
||||
|
||||
Extreme links are the first and last page links. You can add them by passing the `extreme-links` attribute to the component:
|
||||
|
||||
```blade
|
||||
<x-filament::pagination
|
||||
:paginator="$users"
|
||||
extreme-links
|
||||
/>
|
||||
```
|
||||
193
vendor/filament/support/docs/09-blade-components/02-section.md
vendored
Normal file
193
vendor/filament/support/docs/09-blade-components/02-section.md
vendored
Normal file
@@ -0,0 +1,193 @@
|
||||
---
|
||||
title: Section Blade component
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
A section can be used to group content together, with an optional heading:
|
||||
|
||||
```blade
|
||||
<x-filament::section>
|
||||
<x-slot name="heading">
|
||||
User details
|
||||
</x-slot>
|
||||
|
||||
{{-- Content --}}
|
||||
</x-filament::section>
|
||||
```
|
||||
|
||||
## Adding a description to the section
|
||||
|
||||
You can add a description below the heading to the section by using the `description` slot:
|
||||
|
||||
```blade
|
||||
<x-filament::section>
|
||||
<x-slot name="heading">
|
||||
User details
|
||||
</x-slot>
|
||||
|
||||
<x-slot name="description">
|
||||
This is all the information we hold about the user.
|
||||
</x-slot>
|
||||
|
||||
{{-- Content --}}
|
||||
</x-filament::section>
|
||||
```
|
||||
|
||||
## Adding an icon to the section header
|
||||
|
||||
You can add an [icon](https://blade-ui-kit.com/blade-icons?set=1#search) to a section by using the `icon` attribute:
|
||||
|
||||
```blade
|
||||
<x-filament::section icon="heroicon-o-user">
|
||||
<x-slot name="heading">
|
||||
User details
|
||||
</x-slot>
|
||||
|
||||
{{-- Content --}}
|
||||
</x-filament::section>
|
||||
```
|
||||
|
||||
### Changing the color of the section icon
|
||||
|
||||
By default, the color of the section icon is "gray". You can change it to be `danger`, `info`, `primary`, `success` or `warning` by using the `icon-color` attribute:
|
||||
|
||||
```blade
|
||||
<x-filament::section
|
||||
icon="heroicon-o-user"
|
||||
icon-color="info"
|
||||
>
|
||||
<x-slot name="heading">
|
||||
User details
|
||||
</x-slot>
|
||||
|
||||
{{-- Content --}}
|
||||
</x-filament::section>
|
||||
```
|
||||
|
||||
### Changing the size of the section icon
|
||||
|
||||
By default, the size of the section icon is "large". You can change it to be "small" or "medium" by using the `icon-size` attribute:
|
||||
|
||||
```blade
|
||||
<x-filament::section
|
||||
icon="heroicon-m-user"
|
||||
icon-size="sm"
|
||||
>
|
||||
<x-slot name="heading">
|
||||
User details
|
||||
</x-slot>
|
||||
|
||||
{{-- Content --}}
|
||||
</x-filament::section>
|
||||
|
||||
<x-filament::section
|
||||
icon="heroicon-m-user"
|
||||
icon-size="md"
|
||||
>
|
||||
<x-slot name="heading">
|
||||
User details
|
||||
</x-slot>
|
||||
|
||||
{{-- Content --}}
|
||||
</x-filament::section>
|
||||
```
|
||||
|
||||
## Adding content to the end of the header
|
||||
|
||||
You may render additional content at the end of the header, next to the heading and description, using the `headerEnd` slot:
|
||||
|
||||
```blade
|
||||
<x-filament::section>
|
||||
<x-slot name="heading">
|
||||
User details
|
||||
</x-slot>
|
||||
|
||||
<x-slot name="headerEnd">
|
||||
{{-- Input to select the user's ID --}}
|
||||
</x-slot>
|
||||
|
||||
{{-- Content --}}
|
||||
</x-filament::section>
|
||||
```
|
||||
|
||||
## Making a section collapsible
|
||||
|
||||
You can make the content of a section collapsible by using the `collapsible` attribute:
|
||||
|
||||
```blade
|
||||
<x-filament::section collapsible>
|
||||
<x-slot name="heading">
|
||||
User details
|
||||
</x-slot>
|
||||
|
||||
{{-- Content --}}
|
||||
</x-filament::section>
|
||||
```
|
||||
|
||||
### Making a section collapsed by default
|
||||
|
||||
You can make a section collapsed by default by using the `collapsed` attribute:
|
||||
|
||||
```blade
|
||||
<x-filament::section
|
||||
collapsible
|
||||
collapsed
|
||||
>
|
||||
<x-slot name="heading">
|
||||
User details
|
||||
</x-slot>
|
||||
|
||||
{{-- Content --}}
|
||||
</x-filament::section>
|
||||
```
|
||||
|
||||
### Persisting collapsed sections
|
||||
|
||||
You can persist whether a section is collapsed in local storage using the `persist-collapsed` attribute, so it will remain collapsed when the user refreshes the page. You will also need a unique `id` attribute to identify the section from others, so that each section can persist its own collapse state:
|
||||
|
||||
```blade
|
||||
<x-filament::section
|
||||
collapsible
|
||||
collapsed
|
||||
persist-collapsed
|
||||
id="user-details"
|
||||
>
|
||||
<x-slot name="heading">
|
||||
User details
|
||||
</x-slot>
|
||||
|
||||
{{-- Content --}}
|
||||
</x-filament::section>
|
||||
```
|
||||
|
||||
## Adding the section header aside the content instead of above it
|
||||
|
||||
You can change the position of the section header to be aside the content instead of above it by using the `aside` attribute:
|
||||
|
||||
```blade
|
||||
<x-filament::section aside>
|
||||
<x-slot name="heading">
|
||||
User details
|
||||
</x-slot>
|
||||
|
||||
{{-- Content --}}
|
||||
</x-filament::section>
|
||||
```
|
||||
|
||||
### Positioning the content before the header
|
||||
|
||||
You can change the position of the content to be before the header instead of after it by using the `content-before` attribute:
|
||||
|
||||
```blade
|
||||
<x-filament::section
|
||||
aside
|
||||
content-before
|
||||
>
|
||||
<x-slot name="heading">
|
||||
User details
|
||||
</x-slot>
|
||||
|
||||
{{-- Content --}}
|
||||
</x-filament::section>
|
||||
```
|
||||
19
vendor/filament/support/docs/09-blade-components/02-select.md
vendored
Normal file
19
vendor/filament/support/docs/09-blade-components/02-select.md
vendored
Normal file
@@ -0,0 +1,19 @@
|
||||
---
|
||||
title: Select Blade component
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
The select component is a wrapper around the native `<select>` element. It provides a simple interface for selecting a single value from a list of options:
|
||||
|
||||
```blade
|
||||
<x-filament::input.wrapper>
|
||||
<x-filament::input.select wire:model="status">
|
||||
<option value="draft">Draft</option>
|
||||
<option value="reviewing">Reviewing</option>
|
||||
<option value="published">Published</option>
|
||||
</x-filament::input.select>
|
||||
</x-filament::input.wrapper>
|
||||
```
|
||||
|
||||
To use the select component, you must wrap it in an "input wrapper" component, which provides a border and other elements such as a prefix or suffix. You can learn more about customizing the input wrapper component [here](input-wrapper).
|
||||
133
vendor/filament/support/docs/09-blade-components/02-tabs.md
vendored
Normal file
133
vendor/filament/support/docs/09-blade-components/02-tabs.md
vendored
Normal file
@@ -0,0 +1,133 @@
|
||||
---
|
||||
title: Tabs Blade component
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
The tabs component allows you to render a set of tabs, which can be used to toggle between multiple sections of content:
|
||||
|
||||
```blade
|
||||
<x-filament::tabs label="Content tabs">
|
||||
<x-filament::tabs.item>
|
||||
Tab 1
|
||||
</x-filament::tabs.item>
|
||||
|
||||
<x-filament::tabs.item>
|
||||
Tab 2
|
||||
</x-filament::tabs.item>
|
||||
|
||||
<x-filament::tabs.item>
|
||||
Tab 2
|
||||
</x-filament::tabs.item>
|
||||
</x-filament::tabs>
|
||||
```
|
||||
|
||||
## Triggering the active state of the tab
|
||||
|
||||
By default, tabs do not appear "active". To make a tab appear active, you can use the `active` attribute:
|
||||
|
||||
```blade
|
||||
<x-filament::tabs>
|
||||
<x-filament::tabs.item active>
|
||||
Tab 1
|
||||
</x-filament::tabs.item>
|
||||
|
||||
{{-- Other tabs --}}
|
||||
</x-filament::tabs>
|
||||
```
|
||||
|
||||
You can also use the `active` attribute to make a tab appear active conditionally:
|
||||
|
||||
```blade
|
||||
<x-filament::tabs>
|
||||
<x-filament::tabs.item
|
||||
:active="$activeTab === 'tab1'"
|
||||
wire:click="$set('activeTab', 'tab1')"
|
||||
>
|
||||
Tab 1
|
||||
</x-filament::tabs.item>
|
||||
|
||||
{{-- Other tabs --}}
|
||||
</x-filament::tabs>
|
||||
```
|
||||
|
||||
Or you can use the `alpine-active` attribute to make a tab appear active conditionally using Alpine.js:
|
||||
|
||||
```blade
|
||||
<x-filament::tabs x-data="{ activeTab: 'tab1' }">
|
||||
<x-filament::tabs.item
|
||||
alpine-active="activeTab === 'tab1'"
|
||||
x-on:click="activeTab = 'tab1'"
|
||||
>
|
||||
Tab 1
|
||||
</x-filament::tabs.item>
|
||||
|
||||
{{-- Other tabs --}}
|
||||
</x-filament::tabs>
|
||||
```
|
||||
|
||||
## Setting a tab icon
|
||||
|
||||
Tabs may have an [icon](https://blade-ui-kit.com/blade-icons?set=1#search), which you can set using the `icon` attribute:
|
||||
|
||||
```blade
|
||||
<x-filament::tabs>
|
||||
<x-filament::tabs.item icon="heroicon-m-bell">
|
||||
Notifications
|
||||
</x-filament::tabs.item>
|
||||
|
||||
{{-- Other tabs --}}
|
||||
</x-filament::tabs>
|
||||
```
|
||||
|
||||
### Setting the tab icon position
|
||||
|
||||
The icon of the tab may be positioned before or after the label using the `icon-position` attribute:
|
||||
|
||||
```blade
|
||||
<x-filament::tabs>
|
||||
<x-filament::tabs.item
|
||||
icon="heroicon-m-bell"
|
||||
icon-position="after"
|
||||
>
|
||||
Notifications
|
||||
</x-filament::tabs.item>
|
||||
|
||||
{{-- Other tabs --}}
|
||||
</x-filament::tabs>
|
||||
```
|
||||
|
||||
## Setting a tab badge
|
||||
|
||||
Tabs may have a [badge](badge), which you can set using the `badge` slot:
|
||||
|
||||
```blade
|
||||
<x-filament::tabs>
|
||||
<x-filament::tabs.item>
|
||||
Notifications
|
||||
|
||||
<x-slot name="badge">
|
||||
5
|
||||
</x-slot>
|
||||
</x-filament::tabs.item>
|
||||
|
||||
{{-- Other tabs --}}
|
||||
</x-filament::tabs>
|
||||
```
|
||||
|
||||
## Using a tab as an anchor link
|
||||
|
||||
By default, a tab's underlying HTML tag is `<button>`. You can change it to be an `<a>` tag by using the `tag` attribute:
|
||||
|
||||
```blade
|
||||
<x-filament::tabs>
|
||||
<x-filament::tabs.item
|
||||
:href="route('notifications')"
|
||||
tag="a"
|
||||
>
|
||||
Notifications
|
||||
</x-filament::tabs.item>
|
||||
|
||||
{{-- Other tabs --}}
|
||||
</x-filament::tabs>
|
||||
```
|
||||
Reference in New Issue
Block a user