[增添]添加了datasource的setting数据库以及默认值
This commit is contained in:
78
vendor/filament/infolists/docs/04-layout/01-getting-started.md
vendored
Normal file
78
vendor/filament/infolists/docs/04-layout/01-getting-started.md
vendored
Normal file
@@ -0,0 +1,78 @@
|
||||
---
|
||||
title: Getting started
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
Infolists are not limited to just displaying entries. You can also use "layout components" to organize them into an infinitely nestable structure.
|
||||
|
||||
Layout component classes can be found in the `Filament\Infolists\Components` namespace. They reside within the schema of your infolist, alongside any [entries](../entries/getting-started).
|
||||
|
||||
Components may be created using the static `make()` method. Usually, you will then define the child component `schema()` to display inside:
|
||||
|
||||
```php
|
||||
use Filament\Infolists\Components\Grid;
|
||||
|
||||
Grid::make(2)
|
||||
->schema([
|
||||
// ...
|
||||
])
|
||||
```
|
||||
|
||||
## Available layout components
|
||||
|
||||
Filament ships with some layout components, suitable for arranging your form fields depending on your needs:
|
||||
|
||||
- [Grid](grid)
|
||||
- [Fieldset](fieldset)
|
||||
- [Tabs](tabs)
|
||||
- [Section](section)
|
||||
- [Split](split)
|
||||
|
||||
You may also [create your own custom layout components](custom) to organize fields in whatever way you wish.
|
||||
|
||||
## Setting an ID
|
||||
|
||||
You may define an ID for the component using the `id()` method:
|
||||
|
||||
```php
|
||||
use Filament\Infolists\Components\Section;
|
||||
|
||||
Section::make()
|
||||
->id('main-section')
|
||||
```
|
||||
|
||||
## Adding extra HTML attributes
|
||||
|
||||
You can pass extra HTML attributes to the component, which will be merged onto the outer DOM element. Pass an array of attributes to the `extraAttributes()` method, where the key is the attribute name and the value is the attribute value:
|
||||
|
||||
```php
|
||||
use Filament\Infolists\Components\Group;
|
||||
|
||||
Section::make()
|
||||
->extraAttributes(['class' => 'custom-section-style'])
|
||||
```
|
||||
|
||||
Classes will be merged with the default classes, and any other attributes will override the default attributes.
|
||||
|
||||
## Global settings
|
||||
|
||||
If you wish to change the default behavior of a component globally, then you can call the static `configureUsing()` method inside a service provider's `boot()` method, to which you pass a Closure to modify the component using. For example, if you wish to make all section components have [2 columns](grid) by default, you can do it like so:
|
||||
|
||||
```php
|
||||
use Filament\Infolists\Components\Section;
|
||||
|
||||
Section::configureUsing(function (Section $section): void {
|
||||
$section
|
||||
->columns(2);
|
||||
});
|
||||
```
|
||||
|
||||
Of course, you are still able to overwrite this on each field individually:
|
||||
|
||||
```php
|
||||
use Filament\Infolists\Components\Section;
|
||||
|
||||
Section::make()
|
||||
->columns(1)
|
||||
```
|
||||
103
vendor/filament/infolists/docs/04-layout/02-grid.md
vendored
Normal file
103
vendor/filament/infolists/docs/04-layout/02-grid.md
vendored
Normal file
@@ -0,0 +1,103 @@
|
||||
---
|
||||
title: Grid
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
Filament's grid system allows you to create responsive, multi-column layouts using any layout component.
|
||||
|
||||
## Responsively setting the number of grid columns
|
||||
|
||||
All layout components have a `columns()` method that you can use in a couple of different ways:
|
||||
|
||||
- You can pass an integer like `columns(2)`. This integer is the number of columns used on the `lg` breakpoint and higher. All smaller devices will have just 1 column.
|
||||
- You can pass an array, where the key is the breakpoint and the value is the number of columns. For example, `columns(['md' => 2, 'xl' => 4])` will create a 2 column layout on medium devices, and a 4 column layout on extra large devices. The default breakpoint for smaller devices uses 1 column, unless you use a `default` array key.
|
||||
|
||||
Breakpoints (`sm`, `md`, `lg`, `xl`, `2xl`) are defined by Tailwind, and can be found in the [Tailwind documentation](https://tailwindcss.com/docs/responsive-design#overview).
|
||||
|
||||
## Controlling how many columns a component should span
|
||||
|
||||
In addition to specifying how many columns a layout component should have, you may also specify how many columns a component should fill within the parent grid, using the `columnSpan()` method. This method accepts an integer or an array of breakpoints and column spans:
|
||||
|
||||
- `columnSpan(2)` will make the component fill up to 2 columns on all breakpoints.
|
||||
- `columnSpan(['md' => 2, 'xl' => 4])` will make the component fill up to 2 columns on medium devices, and up to 4 columns on extra large devices. The default breakpoint for smaller devices uses 1 column, unless you use a `default` array key.
|
||||
- `columnSpan('full')` or `columnSpanFull()` or `columnSpan(['default' => 'full'])` will make the component fill the full width of the parent grid, regardless of how many columns it has.
|
||||
|
||||
## An example of a responsive grid layout
|
||||
|
||||
In this example, we have an infolist with a [section](section) layout component. Since all layout components support the `columns()` method, we can use it to create a responsive grid layout within the section itself.
|
||||
|
||||
We pass an array to `columns()` as we want to specify different numbers of columns for different breakpoints. On devices smaller than the `sm` [Tailwind breakpoint](https://tailwindcss.com/docs/responsive-design#overview), we want to have 1 column, which is default. On devices larger than the `sm` breakpoint, we want to have 3 columns. On devices larger than the `xl` breakpoint, we want to have 6 columns. On devices larger than the `2xl` breakpoint, we want to have 8 columns.
|
||||
|
||||
Inside the section, we have a [text entry](../entries/text). Since text entries are infolist components and all form components have a `columnSpan()` method, we can use it to specify how many columns the text entry should fill. On devices smaller than the `sm` breakpoint, we want the text entry to fill 1 column, which is default. On devices larger than the `sm` breakpoint, we want the text entry to fill 2 columns. On devices larger than the `xl` breakpoint, we want the text entry to fill 3 columns. On devices larger than the `2xl` breakpoint, we want the text entry to fill 4 columns.
|
||||
|
||||
```php
|
||||
use Filament\Infolists\Components\Section;
|
||||
use Filament\Infolists\Components\TextEntry;
|
||||
|
||||
Section::make()
|
||||
->columns([
|
||||
'sm' => 3,
|
||||
'xl' => 6,
|
||||
'2xl' => 8,
|
||||
])
|
||||
->schema([
|
||||
TextEntry::make('name')
|
||||
->columnSpan([
|
||||
'sm' => 2,
|
||||
'xl' => 3,
|
||||
'2xl' => 4,
|
||||
]),
|
||||
// ...
|
||||
])
|
||||
```
|
||||
|
||||
## Grid component
|
||||
|
||||
All layout components support the `columns()` method, but you also have access to an additional `Grid` component. If you feel that your form schema would benefit from an explicit grid syntax with no extra styling, it may be useful to you. Instead of using the `columns()` method, you can pass your column configuration directly to `Grid::make()`:
|
||||
|
||||
```php
|
||||
use Filament\Infolists\Components\Grid;
|
||||
|
||||
Grid::make([
|
||||
'default' => 1,
|
||||
'sm' => 2,
|
||||
'md' => 3,
|
||||
'lg' => 4,
|
||||
'xl' => 6,
|
||||
'2xl' => 8,
|
||||
])
|
||||
->schema([
|
||||
// ...
|
||||
])
|
||||
```
|
||||
|
||||
## Setting the starting column of a component in a grid
|
||||
|
||||
If you want to start a component in a grid at a specific column, you can use the `columnStart()` method. This method accepts an integer, or an array of breakpoints and which column the component should start at:
|
||||
|
||||
- `columnStart(2)` will make the component start at column 2 on all breakpoints.
|
||||
- `columnStart(['md' => 2, 'xl' => 4])` will make the component start at column 2 on medium devices, and at column 4 on extra large devices. The default breakpoint for smaller devices uses 1 column, unless you use a `default` array key.
|
||||
|
||||
```php
|
||||
use Filament\Infolists\Components\Section;
|
||||
use Filament\Infolists\Components\TextEntry;
|
||||
|
||||
Section::make()
|
||||
->columns([
|
||||
'sm' => 3,
|
||||
'xl' => 6,
|
||||
'2xl' => 8,
|
||||
])
|
||||
->schema([
|
||||
TextEntry::make('name')
|
||||
->columnStart([
|
||||
'sm' => 2,
|
||||
'xl' => 3,
|
||||
'2xl' => 4,
|
||||
]),
|
||||
// ...
|
||||
])
|
||||
```
|
||||
|
||||
In this example, the grid has 3 columns on small devices, 6 columns on extra large devices, and 8 columns on extra extra large devices. The text entry will start at column 2 on small devices, column 3 on extra large devices, and column 4 on extra extra large devices. This is essentially producing a layout whereby the text entry always starts halfway through the grid, regardless of how many columns the grid has.
|
||||
33
vendor/filament/infolists/docs/04-layout/03-fieldset.md
vendored
Normal file
33
vendor/filament/infolists/docs/04-layout/03-fieldset.md
vendored
Normal file
@@ -0,0 +1,33 @@
|
||||
---
|
||||
title: Fieldset
|
||||
---
|
||||
import AutoScreenshot from "@components/AutoScreenshot.astro"
|
||||
|
||||
## Overview
|
||||
|
||||
You may want to group entries into a Fieldset. Each fieldset has a label, a border, and a two-column grid by default:
|
||||
|
||||
```php
|
||||
use Filament\Infolists\Components\Fieldset;
|
||||
|
||||
Fieldset::make('Label')
|
||||
->schema([
|
||||
// ...
|
||||
])
|
||||
```
|
||||
|
||||
<AutoScreenshot name="infolists/layout/fieldset/simple" alt="Fieldset" version="3.x" />
|
||||
|
||||
## Using grid columns within a fieldset
|
||||
|
||||
You may use the `columns()` method to customize the [grid](grid) within the fieldset:
|
||||
|
||||
```php
|
||||
use Filament\Infolists\Components\Fieldset;
|
||||
|
||||
Fieldset::make('Label')
|
||||
->schema([
|
||||
// ...
|
||||
])
|
||||
->columns(3)
|
||||
```
|
||||
240
vendor/filament/infolists/docs/04-layout/04-tabs.md
vendored
Normal file
240
vendor/filament/infolists/docs/04-layout/04-tabs.md
vendored
Normal file
@@ -0,0 +1,240 @@
|
||||
---
|
||||
title: Tabs
|
||||
---
|
||||
import AutoScreenshot from "@components/AutoScreenshot.astro"
|
||||
|
||||
## Overview
|
||||
|
||||
Some infolists can be long and complex. You may want to use tabs to reduce the number of components that are visible at once:
|
||||
|
||||
```php
|
||||
use Filament\Infolists\Components\Tabs;
|
||||
|
||||
Tabs::make('Tabs')
|
||||
->tabs([
|
||||
Tabs\Tab::make('Tab 1')
|
||||
->schema([
|
||||
// ...
|
||||
]),
|
||||
Tabs\Tab::make('Tab 2')
|
||||
->schema([
|
||||
// ...
|
||||
]),
|
||||
Tabs\Tab::make('Tab 3')
|
||||
->schema([
|
||||
// ...
|
||||
]),
|
||||
])
|
||||
```
|
||||
|
||||
<AutoScreenshot name="infolists/layout/tabs/simple" alt="Tabs" version="3.x" />
|
||||
|
||||
## Setting the default active tab
|
||||
|
||||
The first tab will be open by default. You can change the default open tab using the `activeTab()` method:
|
||||
|
||||
```php
|
||||
use Filament\Infolists\Components\Tabs;
|
||||
|
||||
Tabs::make('Tabs')
|
||||
->tabs([
|
||||
Tabs\Tab::make('Tab 1')
|
||||
->schema([
|
||||
// ...
|
||||
]),
|
||||
Tabs\Tab::make('Tab 2')
|
||||
->schema([
|
||||
// ...
|
||||
]),
|
||||
Tabs\Tab::make('Tab 3')
|
||||
->schema([
|
||||
// ...
|
||||
]),
|
||||
])
|
||||
->activeTab(2)
|
||||
```
|
||||
|
||||
## 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()` method:
|
||||
|
||||
```php
|
||||
use Filament\Infolists\Components\Tabs;
|
||||
|
||||
Tabs::make('Tabs')
|
||||
->tabs([
|
||||
Tabs\Tab::make('Notifications')
|
||||
->icon('heroicon-m-bell')
|
||||
->schema([
|
||||
// ...
|
||||
]),
|
||||
// ...
|
||||
])
|
||||
```
|
||||
|
||||
<AutoScreenshot name="infolists/layout/tabs/icons" alt="Tabs with icons" version="3.x" />
|
||||
|
||||
### Setting the tab icon position
|
||||
|
||||
The icon of the tab may be positioned before or after the label using the `iconPosition()` method:
|
||||
|
||||
```php
|
||||
use Filament\Infolists\Components\Tabs;
|
||||
use Filament\Support\Enums\IconPosition;
|
||||
|
||||
Tabs::make('Tabs')
|
||||
->tabs([
|
||||
Tabs\Tab::make('Notifications')
|
||||
->icon('heroicon-m-bell')
|
||||
->iconPosition(IconPosition::After)
|
||||
->schema([
|
||||
// ...
|
||||
]),
|
||||
// ...
|
||||
])
|
||||
```
|
||||
|
||||
<AutoScreenshot name="infolists/layout/tabs/icons-after" alt="Tabs with icons after their labels" version="3.x" />
|
||||
|
||||
## Setting a tab badge
|
||||
|
||||
Tabs may have a badge, which you can set using the `badge()` method:
|
||||
|
||||
```php
|
||||
use Filament\Infolists\Components\Tabs;
|
||||
|
||||
Tabs::make('Tabs')
|
||||
->tabs([
|
||||
Tabs\Tab::make('Notifications')
|
||||
->badge(5)
|
||||
->schema([
|
||||
// ...
|
||||
]),
|
||||
// ...
|
||||
])
|
||||
```
|
||||
|
||||
<AutoScreenshot name="infolists/layout/tabs/badges" alt="Tabs with badges" version="3.x" />
|
||||
|
||||
If you'd like to change the color for a badge, you can use the `badgeColor()` method:
|
||||
|
||||
```php
|
||||
use Filament\Infolists\Components\Tabs;
|
||||
|
||||
Tabs::make('Tabs')
|
||||
->tabs([
|
||||
Tabs\Tab::make('Notifications')
|
||||
->badge(5)
|
||||
->badgeColor('success')
|
||||
->schema([
|
||||
// ...
|
||||
]),
|
||||
// ...
|
||||
])
|
||||
```
|
||||
|
||||
## Using grid columns within a tab
|
||||
|
||||
You may use the `columns()` method to customize the [grid](grid) within the tab:
|
||||
|
||||
```php
|
||||
use Filament\Infolists\Components\Tabs;
|
||||
|
||||
Tabs::make('Tabs')
|
||||
->tabs([
|
||||
Tabs\Tab::make('Tab 1')
|
||||
->schema([
|
||||
// ...
|
||||
])
|
||||
->columns(3),
|
||||
// ...
|
||||
])
|
||||
```
|
||||
|
||||
## Removing the styled container
|
||||
|
||||
By default, tabs and their content are wrapped in a container styled as a card. You may remove the styled container using `contained()`:
|
||||
|
||||
```php
|
||||
use Filament\Infolists\Components\Tabs;
|
||||
|
||||
Tabs::make('Tabs')
|
||||
->tabs([
|
||||
Tabs\Tab::make('Tab 1')
|
||||
->schema([
|
||||
// ...
|
||||
]),
|
||||
Tabs\Tab::make('Tab 2')
|
||||
->schema([
|
||||
// ...
|
||||
]),
|
||||
Tabs\Tab::make('Tab 3')
|
||||
->schema([
|
||||
// ...
|
||||
]),
|
||||
])
|
||||
->contained(false)
|
||||
```
|
||||
|
||||
## Persisting the current tab
|
||||
|
||||
By default, the current tab is not persisted in the browser's local storage. You can change this behavior using the `persistTab()` method. You must also pass in a unique `id()` for the tabs component, to distinguish it from all other sets of tabs in the app. This ID will be used as the key in the local storage to store the current tab:
|
||||
|
||||
```php
|
||||
use Filament\Infolists\Components\Tabs;
|
||||
|
||||
Tabs::make('Tabs')
|
||||
->tabs([
|
||||
// ...
|
||||
])
|
||||
->persistTab()
|
||||
->id('order-tabs')
|
||||
```
|
||||
|
||||
### Persisting the current tab in the URL's query string
|
||||
|
||||
By default, the current tab is not persisted in the URL's query string. You can change this behavior using the `persistTabInQueryString()` method:
|
||||
|
||||
```php
|
||||
use Filament\Infolists\Components\Tabs;
|
||||
|
||||
Tabs::make('Tabs')
|
||||
->tabs([
|
||||
Tabs\Tab::make('Tab 1')
|
||||
->schema([
|
||||
// ...
|
||||
]),
|
||||
Tabs\Tab::make('Tab 2')
|
||||
->schema([
|
||||
// ...
|
||||
]),
|
||||
Tabs\Tab::make('Tab 3')
|
||||
->schema([
|
||||
// ...
|
||||
]),
|
||||
])
|
||||
->persistTabInQueryString()
|
||||
```
|
||||
|
||||
By default, the current tab is persisted in the URL's query string using the `tab` key. You can change this key by passing it to the `persistTabInQueryString()` method:
|
||||
|
||||
```php
|
||||
use Filament\Infolists\Components\Tabs;
|
||||
|
||||
Tabs::make('Tabs')
|
||||
->tabs([
|
||||
Tabs\Tab::make('Tab 1')
|
||||
->schema([
|
||||
// ...
|
||||
]),
|
||||
Tabs\Tab::make('Tab 2')
|
||||
->schema([
|
||||
// ...
|
||||
]),
|
||||
Tabs\Tab::make('Tab 3')
|
||||
->schema([
|
||||
// ...
|
||||
]),
|
||||
])
|
||||
->persistTabInQueryString('settings-tab')
|
||||
```
|
||||
250
vendor/filament/infolists/docs/04-layout/05-section.md
vendored
Normal file
250
vendor/filament/infolists/docs/04-layout/05-section.md
vendored
Normal file
@@ -0,0 +1,250 @@
|
||||
---
|
||||
title: Section
|
||||
---
|
||||
import AutoScreenshot from "@components/AutoScreenshot.astro"
|
||||
|
||||
## Overview
|
||||
|
||||
You may want to separate your entries into sections, each with a heading and description. To do this, you can use a section component:
|
||||
|
||||
```php
|
||||
use Filament\Infolists\Components\Section;
|
||||
|
||||
Section::make('Rate limiting')
|
||||
->description('Prevent abuse by limiting the number of requests per period')
|
||||
->schema([
|
||||
// ...
|
||||
])
|
||||
```
|
||||
|
||||
<AutoScreenshot name="infolists/layout/section/simple" alt="Section" version="3.x" />
|
||||
|
||||
You can also use a section without a header, which just wraps the components in a simple card:
|
||||
|
||||
```php
|
||||
use Filament\Infolists\Components\Section;
|
||||
|
||||
Section::make()
|
||||
->schema([
|
||||
// ...
|
||||
])
|
||||
```
|
||||
|
||||
<AutoScreenshot name="infolists/layout/section/without-header" alt="Section without header" version="3.x" />
|
||||
|
||||
## Adding actions to the section's header or footer
|
||||
|
||||
Sections can have actions in their [header](#adding-actions-to-the-sections-header) or [footer](#adding-actions-to-the-sections-footer).
|
||||
|
||||
### Adding actions to the section's header
|
||||
|
||||
You may add [actions](../actions) to the section's header using the `headerActions()` method:
|
||||
|
||||
```php
|
||||
use Filament\Infolists\Components\Actions\Action;
|
||||
use Filament\Infolists\Components\Section;
|
||||
|
||||
Section::make('Rate limiting')
|
||||
->headerActions([
|
||||
Action::make('edit')
|
||||
->action(function () {
|
||||
// ...
|
||||
}),
|
||||
])
|
||||
->schema([
|
||||
// ...
|
||||
])
|
||||
```
|
||||
|
||||
<AutoScreenshot name="infolists/layout/section/header/actions" alt="Section with header actions" version="3.x" />
|
||||
|
||||
> [Make sure the section has a heading or ID](#adding-actions-to-a-section-without-heading)
|
||||
|
||||
### Adding actions to the section's footer
|
||||
|
||||
In addition to [header actions](#adding-an-icon-to-the-sections-header), you may add [actions](../actions) to the section's footer using the `footerActions()` method:
|
||||
|
||||
```php
|
||||
use Filament\Infolists\Components\Actions\Action;
|
||||
use Filament\Infolists\Components\Section;
|
||||
|
||||
Section::make('Rate limiting')
|
||||
->footerActions([
|
||||
Action::make('edit')
|
||||
->action(function () {
|
||||
// ...
|
||||
}),
|
||||
])
|
||||
->schema([
|
||||
// ...
|
||||
])
|
||||
```
|
||||
|
||||
<AutoScreenshot name="infolists/layout/section/footer/actions" alt="Section with footer actions" version="3.x" />
|
||||
|
||||
> [Make sure the section has a heading or ID](#adding-actions-to-a-section-without-heading)
|
||||
|
||||
#### Aligning section footer actions
|
||||
|
||||
Footer actions are aligned to the inline start by default. You may customize the alignment using the `footerActionsAlignment()` method:
|
||||
|
||||
```php
|
||||
use Filament\Infolists\Components\Actions\Action;
|
||||
use Filament\Infolists\Components\Section;
|
||||
use Filament\Support\Enums\Alignment;
|
||||
|
||||
Section::make('Rate limiting')
|
||||
->footerActions([
|
||||
Action::make('edit')
|
||||
->action(function () {
|
||||
// ...
|
||||
}),
|
||||
])
|
||||
->footerActionsAlignment(Alignment::End)
|
||||
->schema([
|
||||
// ...
|
||||
])
|
||||
```
|
||||
|
||||
### Adding actions to a section without heading
|
||||
|
||||
If your section does not have a heading, Filament has no way of locating the action inside it. In this case, you must pass a unique `id()` to the section:
|
||||
|
||||
```php
|
||||
use Filament\Infolists\Components\Section;
|
||||
|
||||
Section::make()
|
||||
->id('rateLimitingSection')
|
||||
->headerActions([
|
||||
// ...
|
||||
])
|
||||
->schema([
|
||||
// ...
|
||||
])
|
||||
```
|
||||
|
||||
## Adding an icon to the section's header
|
||||
|
||||
You may add an icon to the section's header using the `icon()` method:
|
||||
|
||||
```php
|
||||
use Filament\Infolists\Components\Section;
|
||||
|
||||
Section::make('Cart')
|
||||
->description('The items you have selected for purchase')
|
||||
->icon('heroicon-m-shopping-bag')
|
||||
->schema([
|
||||
// ...
|
||||
])
|
||||
```
|
||||
|
||||
<AutoScreenshot name="infolists/layout/section/icons" alt="Section with icon" version="3.x" />
|
||||
|
||||
## Positioning the heading and description aside
|
||||
|
||||
You may use the `aside()` method to align the heading and description on the left, and the infolist components inside a card on the right:
|
||||
|
||||
```php
|
||||
use Filament\Infolists\Components\Section;
|
||||
|
||||
Section::make('Rate limiting')
|
||||
->description('Prevent abuse by limiting the number of requests per period')
|
||||
->aside()
|
||||
->schema([
|
||||
// ...
|
||||
])
|
||||
```
|
||||
|
||||
<AutoScreenshot name="infolists/layout/section/aside" alt="Section with heading and description aside" version="3.x" />
|
||||
|
||||
## Collapsing sections
|
||||
|
||||
Sections may be `collapsible()` to optionally hide content in long infolists:
|
||||
|
||||
```php
|
||||
use Filament\Infolists\Components\Section;
|
||||
|
||||
Section::make('Cart')
|
||||
->description('The items you have selected for purchase')
|
||||
->schema([
|
||||
// ...
|
||||
])
|
||||
->collapsible()
|
||||
```
|
||||
|
||||
Your sections may be `collapsed()` by default:
|
||||
|
||||
```php
|
||||
use Filament\Infolists\Components\Section;
|
||||
|
||||
Section::make('Cart')
|
||||
->description('The items you have selected for purchase')
|
||||
->schema([
|
||||
// ...
|
||||
])
|
||||
->collapsed()
|
||||
```
|
||||
|
||||
<AutoScreenshot name="infolists/layout/section/collapsed" alt="Collapsed section" version="3.x" />
|
||||
|
||||
### Persisting collapsed sections
|
||||
|
||||
You can persist whether a section is collapsed in local storage using the `persistCollapsed()` method, so it will remain collapsed when the user refreshes the page:
|
||||
|
||||
```php
|
||||
use Filament\Infolists\Components\Section;
|
||||
|
||||
Section::make('Cart')
|
||||
->description('The items you have selected for purchase')
|
||||
->schema([
|
||||
// ...
|
||||
])
|
||||
->collapsible()
|
||||
->persistCollapsed()
|
||||
```
|
||||
|
||||
To persist the collapse state, the local storage needs a unique ID to store the state. This ID is generated based on the heading of the section. If your section does not have a heading, or if you have multiple sections with the same heading that you do not want to collapse together, you can manually specify the `id()` of that section to prevent an ID conflict:
|
||||
|
||||
```php
|
||||
use Filament\Infolists\Components\Section;
|
||||
|
||||
Section::make('Cart')
|
||||
->description('The items you have selected for purchase')
|
||||
->schema([
|
||||
// ...
|
||||
])
|
||||
->collapsible()
|
||||
->persistCollapsed()
|
||||
->id('order-cart')
|
||||
```
|
||||
|
||||
## Compact section styling
|
||||
|
||||
When nesting sections, you can use a more compact styling:
|
||||
|
||||
```php
|
||||
use Filament\Infolists\Components\Section;
|
||||
|
||||
Section::make('Rate limiting')
|
||||
->description('Prevent abuse by limiting the number of requests per period')
|
||||
->schema([
|
||||
// ...
|
||||
])
|
||||
->compact()
|
||||
```
|
||||
|
||||
<AutoScreenshot name="infolists/layout/section/compact" alt="Compact section" version="3.x" />
|
||||
|
||||
## Using grid columns within a section
|
||||
|
||||
You may use the `columns()` method to easily create a [grid](grid) within the section:
|
||||
|
||||
```php
|
||||
use Filament\Infolists\Components\Section;
|
||||
|
||||
Section::make('Heading')
|
||||
->schema([
|
||||
// ...
|
||||
])
|
||||
->columns(2)
|
||||
```
|
||||
37
vendor/filament/infolists/docs/04-layout/06-split.md
vendored
Normal file
37
vendor/filament/infolists/docs/04-layout/06-split.md
vendored
Normal file
@@ -0,0 +1,37 @@
|
||||
---
|
||||
title: Split
|
||||
---
|
||||
import AutoScreenshot from "@components/AutoScreenshot.astro"
|
||||
|
||||
## Overview
|
||||
|
||||
The `Split` component allows you to define layouts with flexible widths, using flexbox.
|
||||
|
||||
```php
|
||||
use Filament\Infolists\Components\Section;
|
||||
use Filament\Infolists\Components\Split;
|
||||
use Filament\Infolists\Components\TextEntry;
|
||||
use Filament\Support\Enums\FontWeight;
|
||||
|
||||
Split::make([
|
||||
Section::make([
|
||||
TextEntry::make('title')
|
||||
->weight(FontWeight::Bold),
|
||||
TextEntry::make('content')
|
||||
->markdown()
|
||||
->prose(),
|
||||
]),
|
||||
Section::make([
|
||||
TextEntry::make('created_at')
|
||||
->dateTime(),
|
||||
TextEntry::make('published_at')
|
||||
->dateTime(),
|
||||
])->grow(false),
|
||||
])->from('md')
|
||||
```
|
||||
|
||||
In this example, the first section will `grow()` to consume available horizontal space, without affecting the amount of space needed to render the second section. This creates a sidebar effect.
|
||||
|
||||
The `from()` method is used to control the [Tailwind breakpoint](https://tailwindcss.com/docs/responsive-design#overview) (`sm`, `md`, `lg`, `xl`, `2xl`) at which the split layout should be used. In this example, the split layout will be used on medium devices and larger. On smaller devices, the sections will stack on top of each other.
|
||||
|
||||
<AutoScreenshot name="infolists/layout/split/simple" alt="Split" version="3.x" />
|
||||
73
vendor/filament/infolists/docs/04-layout/07-custom.md
vendored
Normal file
73
vendor/filament/infolists/docs/04-layout/07-custom.md
vendored
Normal file
@@ -0,0 +1,73 @@
|
||||
---
|
||||
title: Custom layouts
|
||||
---
|
||||
import LaracastsBanner from "@components/LaracastsBanner.astro"
|
||||
|
||||
<LaracastsBanner
|
||||
title="Build a Custom Infolist Layout"
|
||||
description="Watch the Build Advanced Components for Filament series on Laracasts - it will teach you how to build components, and you'll get to know all the internal tools to help you."
|
||||
url="https://laracasts.com/series/build-advanced-components-for-filament/episodes/9"
|
||||
series="building-advanced-components"
|
||||
/>
|
||||
|
||||
## View components
|
||||
|
||||
Aside from [building custom layout components](#custom-layout-classes), you may create "view" components which allow you to create custom layouts without extra PHP classes.
|
||||
|
||||
```php
|
||||
use Filament\Infolists\Components\View;
|
||||
|
||||
View::make('filament.infolists.components.box')
|
||||
```
|
||||
|
||||
This assumes that you have a `resources/views/filament/infolists/components/box.blade.php` file.
|
||||
|
||||
## Custom layout classes
|
||||
|
||||
You may create your own custom component classes and views, which you can reuse across your project, and even release as a plugin to the community.
|
||||
|
||||
> If you're just creating a simple custom component to use once, you could instead use a [view component](#view) to render any custom Blade file.
|
||||
|
||||
To create a custom column class and view, you may use the following command:
|
||||
|
||||
```bash
|
||||
php artisan make:infolist-layout Box
|
||||
```
|
||||
|
||||
This will create the following layout component class:
|
||||
|
||||
```php
|
||||
use Filament\Infolists\Components\Component;
|
||||
|
||||
class Box extends Component
|
||||
{
|
||||
protected string $view = 'filament.infolists.components.box';
|
||||
|
||||
public static function make(): static
|
||||
{
|
||||
return app(static::class);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
It will also create a view file at `resources/views/filament/infolists/components/box.blade.php`.
|
||||
|
||||
## Rendering the component's schema
|
||||
|
||||
Inside your view, you may render the component's `schema()` using the `$getChildComponentContainer()` function:
|
||||
|
||||
```blade
|
||||
<div>
|
||||
{{ $getChildComponentContainer() }}
|
||||
</div>
|
||||
```
|
||||
|
||||
## Accessing the Eloquent record
|
||||
|
||||
Inside your view, you may access the Eloquent record using the `$getRecord()` function:
|
||||
|
||||
```blade
|
||||
<div>
|
||||
{{ $getRecord()->name }}
|
||||
</div>
|
||||
```
|
||||
Reference in New Issue
Block a user