[增添]添加了datasource的setting数据库以及默认值

This commit is contained in:
makotocc0107
2024-08-27 09:57:44 +08:00
parent d111dfaea4
commit 72eb990970
10955 changed files with 978898 additions and 0 deletions

View File

@@ -0,0 +1,328 @@
---
title: Getting started
---
import AutoScreenshot from "@components/AutoScreenshot.astro"
## Overview
Entry classes can be found in the `Filament\Infolists\Components` namespace. You can put them inside the `$infolist->schema()` method:
```php
use Filament\Infolists\Infolist;
public function infolist(Infolist $infolist): Infolist
{
return $infolist
->schema([
// ...
]);
}
```
If you're inside a [panel builder resource](../../panels/resources), the `infolist()` method should be static:
```php
use Filament\Infolists\Infolist;
public static function infolist(Infolist $infolist): Infolist
{
return $infolist
->schema([
// ...
]);
}
```
Entries may be created using the static `make()` method, passing its unique name. You may use "dot notation" to access entries within relationships.
```php
use Filament\Infolists\Components\TextEntry;
TextEntry::make('title')
TextEntry::make('author.name')
```
<AutoScreenshot name="infolists/entries/simple" alt="Entries in an infolist" version="3.x" />
## Available entries
- [Text entry](text)
- [Icon entry](icon)
- [Image entry](image)
- [Color entry](color)
- [Key-value entry](key-value)
- [Repeatable entry](repeatable)
You may also [create your own custom entries](custom) to display data however you wish.
## Setting a label
By default, the label of the entry, which is displayed in the header of the infolist, is generated from the name of the entry. You may customize this using the `label()` method:
```php
use Filament\Infolists\Components\TextEntry;
TextEntry::make('title')
->label('Post title')
```
Optionally, you can have the label automatically translated [using Laravel's localization features](https://laravel.com/docs/localization) with the `translateLabel()` method:
```php
use Filament\Infolists\Components\TextEntry;
TextEntry::make('title')
->translateLabel() // Equivalent to `label(__('Title'))`
```
## Entry URLs
When an entry is clicked, you may open a URL.
### Opening URLs
To open a URL, you may use the `url()` method, passing a callback or static URL to open. Callbacks accept a `$record` parameter which you may use to customize the URL:
```php
use Filament\Infolists\Components\TextEntry;
TextEntry::make('title')
->url(fn (Post $record): string => route('posts.edit', ['post' => $record]))
```
You may also choose to open the URL in a new tab:
```php
use Filament\Infolists\Components\TextEntry;
TextEntry::make('title')
->url(fn (Post $record): string => route('posts.edit', ['post' => $record]))
->openUrlInNewTab()
```
## Setting a default value
To set a default value for entries with an empty state, you may use the `default()` method. This method will treat the default state as if it were real, so entries like [image](image) or [color](color) will display the default image or color.
```php
use Filament\Infolists\Components\TextEntry;
TextEntry::make('title')
->default('Untitled')
```
## Adding placeholder text if an entry is empty
Sometimes you may want to display placeholder text for entries with an empty state, which is styled as a lighter gray text. This differs from the [default value](#setting-a-default-value), as the placeholder is always text and not treated as if it were real state.
```php
use Filament\Infolists\Components\TextEntry;
TextEntry::make('title')
->placeholder('Untitled')
```
<AutoScreenshot name="infolists/entries/placeholder" alt="Entry with a placeholder for empty state" version="3.x" />
## Adding helper text below the entry
Sometimes, you may wish to provide extra information for the user of the infolist. For this purpose, you may add helper text below the entry.
The `helperText()` method is used to add helper text:
```php
use Filament\Infolists\Components\TextEntry;
TextEntry::make('name')
->helperText('Your full name here, including any middle names.')
```
This method accepts a plain text string, or an instance of `Illuminate\Support\HtmlString` or `Illuminate\Contracts\Support\Htmlable`. This allows you to render HTML, or even markdown, in the helper text:
```php
use Filament\Infolists\Components\TextEntry;
use Illuminate\Support\HtmlString;
TextEntry::make('name')
->helperText(new HtmlString('Your <strong>full name</strong> here, including any middle names.'))
TextEntry::make('name')
->helperText(str('Your **full name** here, including any middle names.')->inlineMarkdown()->toHtmlString())
TextEntry::make('name')
->helperText(view('name-helper-text'))
```
<AutoScreenshot name="infolists/entries/helper-text" alt="Entry with helper text" version="3.x" />
## Adding a hint next to the label
As well as [helper text](#adding-helper-text-below-the-entry) below the entry, you may also add a "hint" next to the label of the entry. This is useful for displaying additional information about the entry, such as a link to a help page.
The `hint()` method is used to add a hint:
```php
use Filament\Infolists\Components\TextEntry;
TextEntry::make('apiKey')
->label('API key')
->hint('Documentation? What documentation?!')
```
This method accepts a plain text string, or an instance of `Illuminate\Support\HtmlString` or `Illuminate\Contracts\Support\Htmlable`. This allows you to render HTML, or even markdown, in the helper text:
```php
use Filament\Infolists\Components\TextEntry;
TextEntry::make('apiKey')
->label('API key')
->hint(new HtmlString('<a href="/documentation">Documentation</a>'))
TextEntry::make('apiKey')
->label('API key')
->hint(str('[Documentation](/documentation)')->inlineMarkdown()->toHtmlString())
TextEntry::make('apiKey')
->label('API key')
->hint(view('api-key-hint'))
```
<AutoScreenshot name="infolists/entries/hint" alt="Entry with hint" version="3.x" />
### Changing the text color of the hint
You can change the text color of the hint. By default, it's gray, but you may use `danger`, `info`, `primary`, `success` and `warning`:
```php
use Filament\Infolists\Components\TextEntry;
TextEntry::make('apiKey')
->label('API key')
->hint(str('[Documentation](/documentation)')->inlineMarkdown()->toHtmlString())
->hintColor('primary')
```
<AutoScreenshot name="infolists/entries/hint-color" alt="Entry with hint color" version="3.x" />
### Adding an icon aside the hint
Hints may also have an [icon](https://blade-ui-kit.com/blade-icons?set=1#search) rendered next to them:
```php
use Filament\Infolists\Components\TextEntry;
TextEntry::make('apiKey')
->label('API key')
->hint(str('[Documentation](/documentation)')->inlineMarkdown()->toHtmlString())
->hintIcon('heroicon-m-question-mark-circle')
```
<AutoScreenshot name="infolists/entries/hint-icon" alt="Entry with hint icon" version="3.x" />
#### Adding a tooltip to a hint icon
Additionally, you can add a tooltip to display when you hover over the hint icon, using the `tooltip` parameter of `hintIcon()`:
```php
use Filament\Infolists\Components\TextEntry;
TextEntry::make('apiKey')
->label('API key')
->hint(str('[Documentation](/documentation)')->inlineMarkdown()->toHtmlString())
->hintIcon('heroicon-m-question-mark-circle', tooltip: 'Read it!')
```
## Hiding entries
To hide an entry conditionally, you may use the `hidden()` and `visible()` methods, whichever you prefer:
```php
use Filament\Infolists\Components\TextEntry;
TextEntry::make('role')
->hidden(! auth()->user()->isAdmin())
// or
TextEntry::make('role')
->visible(auth()->user()->isAdmin())
```
## Calculated state
Sometimes you need to calculate the state of an entry, instead of directly reading it from a database entry.
By passing a callback function to the `state()` method, you can customize the returned state for that entry:
```php
Infolists\Components\TextEntry::make('amount_including_vat')
->state(function (Model $record): float {
return $record->amount * (1 + $record->vat_rate);
})
```
## Tooltips
You may specify a tooltip to display when you hover over an entry:
```php
use Filament\Infolists\Components\TextEntry;
TextEntry::make('title')
->tooltip('Shown at the top of the page')
```
<AutoScreenshot name="infolists/entries/tooltips" alt="Entry with tooltip" version="3.x" />
This method also accepts a closure that can access the current infolist record:
```php
use Filament\Infolists\Components\TextEntry;
use Illuminate\Database\Eloquent\Model;
TextEntry::make('title')
->tooltip(fn (Model $record): string => "By {$record->author->name}")
```
## Custom attributes
The HTML of entries can be customized, by passing an array of `extraAttributes()`:
```php
use Filament\Infolists\Components\TextEntry;
TextEntry::make('slug')
->extraAttributes(['class' => 'bg-gray-200'])
```
These get merged onto the outer `<div>` element of each entry in that entry.
You can also pass extra HTML attributes to the entry wrapper which surrounds the label, entry, and any other text:
```php
use Filament\Infolists\Components\TextEntry;
TextEntry::make('slug')
->extraEntryWrapperAttributes(['class' => 'entry-locked'])
```
## Global settings
If you wish to change the default behavior of all entries 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 entries using. For example, if you wish to make all `TextEntry` components [`words(10)`](text#limiting-word-count), you can do it like so:
```php
use Filament\Infolists\Components\TextEntry;
TextEntry::configureUsing(function (TextEntry $entry): void {
$entry
->words(10);
});
```
Of course, you are still able to overwrite this on each entry individually:
```php
use Filament\Infolists\Components\TextEntry;
TextEntry::make('name')
->words(null)
```

View File

@@ -0,0 +1,420 @@
---
title: Text entry
---
import AutoScreenshot from "@components/AutoScreenshot.astro"
## Overview
Text entries display simple text:
```php
use Filament\Infolists\Components\TextEntry;
TextEntry::make('title')
```
<AutoScreenshot name="infolists/entries/text/simple" alt="Text entry" version="3.x" />
## Displaying as a "badge"
By default, text is quite plain and has no background color. You can make it appear as a "badge" instead using the `badge()` method. A great use case for this is with statuses, where may want to display a badge with a [color](#customizing-the-color) that matches the status:
```php
use Filament\Infolists\Components\TextEntry;
TextEntry::make('status')
->badge()
->color(fn (string $state): string => match ($state) {
'draft' => 'gray',
'reviewing' => 'warning',
'published' => 'success',
'rejected' => 'danger',
})
```
<AutoScreenshot name="infolists/entries/text/badge" alt="Text entry as badge" version="3.x" />
You may add other things to the badge, like an [icon](#adding-an-icon).
## Date formatting
You may use the `date()` and `dateTime()` methods to format the entry's state using [PHP date formatting tokens](https://www.php.net/manual/en/datetime.format.php):
```php
use Filament\Infolists\Components\TextEntry;
TextEntry::make('created_at')
->dateTime()
```
You may use the `since()` method to format the entry's state using [Carbon's `diffForHumans()`](https://carbon.nesbot.com/docs/#api-humandiff):
```php
use Filament\Infolists\Components\TextEntry;
TextEntry::make('created_at')
->since()
```
## Number formatting
The `numeric()` method allows you to format an entry as a number:
```php
use Filament\Infolists\Components\TextEntry;
TextEntry::make('stock')
->numeric()
```
If you would like to customize the number of decimal places used to format the number with, you can use the `decimalPlaces` argument:
```php
use Filament\Infolists\Components\TextEntry;
TextEntry::make('stock')
->numeric(decimalPlaces: 0)
```
By default, your app's locale will be used to format the number suitably. If you would like to customize the locale used, you can pass it to the `locale` argument:
```php
use Filament\Infolists\Components\TextEntry;
TextEntry::make('stock')
->numeric(locale: 'nl')
```
Alternatively, you can set the default locale used across your app using the `Number::useLocale()` method in the `boot()` method of a service provider:
```php
use Illuminate\Support\Number;
Number::useLocale('nl');
```
## Currency formatting
The `money()` method allows you to easily format monetary values, in any currency:
```php
use Filament\Infolists\Components\TextEntry;
TextEntry::make('price')
->money('EUR')
```
There is also a `divideBy` argument for `money()` that allows you to divide the original value by a number before formatting it. This could be useful if your database stores the price in cents, for example:
```php
use Filament\Infolists\Components\TextEntry;
TextEntry::make('price')
->money('EUR', divideBy: 100)
```
By default, your app's locale will be used to format the money suitably. If you would like to customize the locale used, you can pass it to the `locale` argument:
```php
use Filament\Infolists\Components\TextEntry;
TextEntry::make('price')
->money('EUR', locale: 'nl')
```
Alternatively, you can set the default locale used across your app using the `Number::useLocale()` method in the `boot()` method of a service provider:
```php
use Illuminate\Support\Number;
Number::useLocale('nl');
```
## Limiting text length
You may `limit()` the length of the entry's value:
```php
use Filament\Infolists\Components\TextEntry;
TextEntry::make('description')
->limit(50)
```
You may also reuse the value that is being passed to `limit()`:
```php
use Filament\Infolists\Components\TextEntry;
TextEntry::make('description')
->limit(50)
->tooltip(function (TextEntry $component): ?string {
$state = $component->getState();
if (strlen($state) <= $component->getCharacterLimit()) {
return null;
}
// Only render the tooltip if the entry contents exceeds the length limit.
return $state;
})
```
## Limiting word count
You may limit the number of `words()` displayed in the entry:
```php
use Filament\Infolists\Components\TextEntry;
TextEntry::make('description')
->words(10)
```
## Limiting text to a specific number of lines
You may want to limit text to a specific number of lines instead of limiting it to a fixed length. Clamping text to a number of lines is useful in responsive interfaces where you want to ensure a consistent experience across all screen sizes. This can be achieved using the `lineClamp()` method:
```php
use Filament\Infolists\Components\TextEntry;
TextEntry::make('description')
->lineClamp(2)
```
## Listing multiple values
By default, if there are multiple values inside your text entry, they will be comma-separated. You may use the `listWithLineBreaks()` method to display them on new lines instead:
```php
use Filament\Infolists\Components\TextEntry;
TextEntry::make('authors.name')
->listWithLineBreaks()
```
<AutoScreenshot name="infolists/entries/text/list" alt="Text entry with multiple values" version="3.x" />
### Adding bullet points to the list
You may add a bullet point to each list item using the `bulleted()` method:
```php
use Filament\Infolists\Components\TextEntry;
TextEntry::make('authors.name')
->listWithLineBreaks()
->bulleted()
```
<AutoScreenshot name="infolists/entries/text/bullet-list" alt="Text entry with multiple values and bullet points" version="3.x" />
### Limiting the number of values in the list
You can limit the number of values in the list using the `limitList()` method:
```php
use Filament\Infolists\Components\TextEntry;
TextEntry::make('authors.name')
->listWithLineBreaks()
->limitList(3)
```
#### Expanding the limited list
You can allow the limited items to be expanded and collapsed, using the `expandableLimitedList()` method:
```php
use Filament\Infolists\Components\TextEntry;
TextEntry::make('authors.name')
->listWithLineBreaks()
->limitList(3)
->expandableLimitedList()
```
Please note that this is only a feature for `listWithLineBreaks()` or `bulleted()`, where each item is on its own line.
### Using a list separator
If you want to "explode" a text string from your model into multiple list items, you can do so with the `separator()` method. This is useful for displaying comma-separated tags [as badges](#displaying-as-a-badge), for example:
```php
use Filament\Infolists\Components\TextEntry;
TextEntry::make('tags')
->badge()
->separator(',')
```
## Rendering HTML
If your entry value is HTML, you may render it using `html()`:
```php
use Filament\Infolists\Components\TextEntry;
TextEntry::make('description')
->html()
```
If you use this method, then the HTML will be sanitized to remove any potentially unsafe content before it is rendered. If you'd like to opt out of this behavior, you can wrap the HTML in an `HtmlString` object by formatting it:
```php
use Filament\Infolists\Components\TextEntry;
use Illuminate\Support\HtmlString;
TextEntry::make('description')
->formatStateUsing(fn (string $state): HtmlString => new HtmlString($state))
```
Or, you can return a `view()` object from the `formatStateUsing()` method, which will also not be sanitized:
```php
use Filament\Infolists\Components\TextEntry;
use Illuminate\Contracts\View\View;
TextEntry::make('description')
->formatStateUsing(fn (string $state): View => view(
'filament.infolists.components.description-entry-content',
['state' => $state],
))
```
### Rendering Markdown as HTML
If your entry value is Markdown, you may render it using `markdown()`:
```php
use Filament\Infolists\Components\TextEntry;
TextEntry::make('description')
->markdown()
```
## Custom formatting
You may instead pass a custom formatting callback to `formatStateUsing()`, which accepts the `$state` of the entry, and optionally its `$record`:
```php
use Filament\Infolists\Components\TextEntry;
TextEntry::make('status')
->formatStateUsing(fn (string $state): string => __("statuses.{$state}"))
```
## Customizing the color
You may set a color for the text, either `danger`, `gray`, `info`, `primary`, `success` or `warning`:
```php
use Filament\Infolists\Components\TextEntry;
TextEntry::make('status')
->color('primary')
```
<AutoScreenshot name="infolists/entries/text/color" alt="Text entry in the primary color" version="3.x" />
## Adding an icon
Text entries may also have an [icon](https://blade-ui-kit.com/blade-icons?set=1#search):
```php
use Filament\Infolists\Components\TextEntry;
TextEntry::make('email')
->icon('heroicon-m-envelope')
```
<AutoScreenshot name="infolists/entries/text/icon" alt="Text entry with icon" version="3.x" />
You may set the position of an icon using `iconPosition()`:
```php
use Filament\Infolists\Components\TextEntry;
use Filament\Support\Enums\IconPosition;
TextEntry::make('email')
->icon('heroicon-m-envelope')
->iconPosition(IconPosition::After) // `IconPosition::Before` or `IconPosition::After`
```
<AutoScreenshot name="infolists/entries/text/icon-after" alt="Text entry with icon after" version="3.x" />
The icon color defaults to the text color, but you may customize the icon color separately using `iconColor()`:
```php
use Filament\Infolists\Components\TextEntry;
TextEntry::make('email')
->icon('heroicon-m-envelope')
->iconColor('primary')
```
<AutoScreenshot name="infolists/entries/text/icon-color" alt="Text entry with icon in the primary color" version="3.x" />
## Customizing the text size
Text columns have small font size by default, but you may change this to `TextEntrySize::ExtraSmall`, `TextEntrySize::Medium`, or `TextEntrySize::Large`.
For instance, you may make the text larger using `size(TextEntrySize::Large)`:
```php
use Filament\Infolists\Components\TextEntry;
TextEntry::make('title')
->size(TextEntry\TextEntrySize::Large)
```
<AutoScreenshot name="infolists/entries/text/large" alt="Text entry in a large font size" version="3.x" />
## Customizing the font weight
Text entries have regular font weight by default, but you may change this to any of the following options: `FontWeight::Thin`, `FontWeight::ExtraLight`, `FontWeight::Light`, `FontWeight::Medium`, `FontWeight::SemiBold`, `FontWeight::Bold`, `FontWeight::ExtraBold` or `FontWeight::Black`.
For instance, you may make the font bold using `weight(FontWeight::Bold)`:
```php
use Filament\Infolists\Components\TextEntry;
use Filament\Support\Enums\FontWeight;
TextEntry::make('title')
->weight(FontWeight::Bold)
```
<AutoScreenshot name="infolists/entries/text/bold" alt="Text entry in a bold font" version="3.x" />
## Customizing the font family
You can change the text font family to any of the following options: `FontFamily::Sans`, `FontFamily::Serif` or `FontFamily::Mono`.
For instance, you may make the font monospaced using `fontFamily(FontFamily::Mono)`:
```php
use Filament\Support\Enums\FontFamily;
use Filament\Infolists\Components\TextEntry;
TextEntry::make('apiKey')
->label('API key')
->fontFamily(FontFamily::Mono)
```
<AutoScreenshot name="infolists/entries/text/mono" alt="Text entry in a monospaced font" version="3.x" />
## Allowing the text to be copied to the clipboard
You may make the text copyable, such that clicking on the entry copies the text to the clipboard, and optionally specify a custom confirmation message and duration in milliseconds. This feature only works when SSL is enabled for the app.
```php
use Filament\Infolists\Components\TextEntry;
TextEntry::make('apiKey')
->label('API key')
->copyable()
->copyMessage('Copied!')
->copyMessageDuration(1500)
```
<AutoScreenshot name="infolists/entries/text/copyable" alt="Text entry with a button to copy it" version="3.x" />

View File

@@ -0,0 +1,101 @@
---
title: Icon entry
---
import AutoScreenshot from "@components/AutoScreenshot.astro"
## Overview
Icon entries render an [icon](https://blade-ui-kit.com/blade-icons?set=1#search) representing their contents:
```php
use Filament\Infolists\Components\IconEntry;
IconEntry::make('status')
->icon(fn (string $state): string => match ($state) {
'draft' => 'heroicon-o-pencil',
'reviewing' => 'heroicon-o-clock',
'published' => 'heroicon-o-check-circle',
})
```
In the function, `$state` is the value of the entry, and `$record` can be used to access the underlying Eloquent record.
<AutoScreenshot name="infolists/entries/icon/simple" alt="Icon entry" version="3.x" />
## Customizing the color
Icon entries may also have a set of icon colors, using the same syntax. They may be either `danger`, `gray`, `info`, `primary`, `success` or `warning`:
```php
use Filament\Infolists\Components\IconEntry;
IconEntry::make('status')
->color(fn (string $state): string => match ($state) {
'draft' => 'info',
'reviewing' => 'warning',
'published' => 'success',
default => 'gray',
})
```
In the function, `$state` is the value of the entry, and `$record` can be used to access the underlying Eloquent record.
<AutoScreenshot name="infolists/entries/icon/color" alt="Icon entry with color" version="3.x" />
## Customizing the size
The default icon size is `IconEntrySize::Large`, but you may customize the size to be either `IconEntrySize::ExtraSmall`, `IconEntrySize::Small`, `IconEntrySize::Medium`, `IconEntrySize::ExtraLarge` or `IconEntrySize::TwoExtraLarge`:
```php
use Filament\Infolists\Components\IconEntry;
IconEntry::make('status')
->size(IconEntry\IconEntrySize::Medium)
```
<AutoScreenshot name="infolists/entries/icon/medium" alt="Medium-sized icon entry" version="3.x" />
## Handling booleans
Icon entries can display a check or cross icon based on the contents of the database entry, either true or false, using the `boolean()` method:
```php
use Filament\Infolists\Components\IconEntry;
IconEntry::make('is_featured')
->boolean()
```
> If this column in the model class is already cast as a `bool` or `boolean`, Filament is able to detect this, and you do not need to use `boolean()` manually.
<AutoScreenshot name="infolists/entries/icon/boolean" alt="Icon entry to display a boolean" version="3.x" />
### Customizing the boolean icons
You may customize the icon representing each state. Icons are the name of a Blade component present. By default, [Heroicons](https://heroicons.com) are installed:
```php
use Filament\Infolists\Components\IconEntry;
IconEntry::make('is_featured')
->boolean()
->trueIcon('heroicon-o-check-badge')
->falseIcon('heroicon-o-x-mark')
```
<AutoScreenshot name="infolists/entries/icon/boolean-icon" alt="Icon entry to display a boolean with custom icons" version="3.x" />
### Customizing the boolean colors
You may customize the icon color representing each state. These may be either `danger`, `gray`, `info`, `primary`, `success` or `warning`:
```php
use Filament\Infolists\Components\IconEntry;
IconEntry::make('is_featured')
->boolean()
->trueColor('info')
->falseColor('warning')
```
<AutoScreenshot name="infolists/entries/icon/boolean-color" alt="Icon entry to display a boolean with custom colors" version="3.x" />

View File

@@ -0,0 +1,229 @@
---
title: Image entry
---
import AutoScreenshot from "@components/AutoScreenshot.astro"
## Overview
Images can be easily displayed within your infolist:
```php
use Filament\Infolists\Components\ImageEntry;
ImageEntry::make('header_image')
```
The entry must contain the path to the image, relative to the root directory of its storage disk, or an absolute URL to it.
<AutoScreenshot name="infolists/entries/image/simple" alt="Image entry" version="3.x" />
## Managing the image disk
By default, the `public` disk will be used to retrieve images. You may pass a custom disk name to the `disk()` method:
```php
use Filament\Infolists\Components\ImageEntry;
ImageEntry::make('header_image')
->disk('s3')
```
## Private images
Filament can generate temporary URLs to render private images, you may set the `visibility()` to `private`:
```php
use Filament\Infolists\Components\ImageEntry;
ImageEntry::make('header_image')
->visibility('private')
```
## Customizing the size
You may customize the image size by passing a `width()` and `height()`, or both with `size()`:
```php
use Filament\Infolists\Components\ImageEntry;
ImageEntry::make('header_image')
->width(200)
ImageEntry::make('header_image')
->height(50)
ImageEntry::make('author.avatar')
->size(40)
```
## Square image
You may display the image using a 1:1 aspect ratio:
```php
use Filament\Infolists\Components\ImageEntry;
ImageEntry::make('author.avatar')
->height(40)
->square()
```
<AutoScreenshot name="infolists/entries/image/square" alt="Square image entry" version="3.x" />
## Circular image
You may make the image fully rounded, which is useful for rendering avatars:
```php
use Filament\Infolists\Components\ImageEntry;
ImageEntry::make('author.avatar')
->height(40)
->circular()
```
<AutoScreenshot name="infolists/entries/image/circular" alt="Circular image entry" version="3.x" />
## Adding a default image URL
You can display a placeholder image if one doesn't exist yet, by passing a URL to the `defaultImageUrl()` method:
```php
use Filament\Infolists\Components\ImageEntry;
ImageEntry::make('avatar')
->defaultImageUrl(url('/images/placeholder.png'))
```
## Stacking images
You may display multiple images as a stack of overlapping images by using `stacked()`:
```php
use Filament\Infolists\Components\ImageEntry;
ImageEntry::make('colleagues.avatar')
->height(40)
->circular()
->stacked()
```
<AutoScreenshot name="infolists/entries/image/stacked" alt="Stacked image entry" version="3.x" />
### Customizing the stacked ring width
The default ring width is `3`, but you may customize it to be from `0` to `8`:
```php
use Filament\Infolists\Components\ImageEntry;
ImageEntry::make('colleagues.avatar')
->height(40)
->circular()
->stacked()
->ring(5)
```
### Customizing the stacked overlap
The default overlap is `4`, but you may customize it to be from `0` to `8`:
```php
use Filament\Infolists\Components\ImageEntry;
ImageEntry::make('colleagues.avatar')
->height(40)
->circular()
->stacked()
->overlap(2)
```
## Setting a limit
You may limit the maximum number of images you want to display by passing `limit()`:
```php
use Filament\Infolists\Components\ImageEntry;
ImageEntry::make('colleagues.avatar')
->height(40)
->circular()
->stacked()
->limit(3)
```
<AutoScreenshot name="infolists/entries/image/limited" alt="Limited image entry" version="3.x" />
### Showing the remaining images count
When you set a limit you may also display the count of remaining images by passing `limitedRemainingText()`.
```php
use Filament\Infolists\Components\ImageEntry;
ImageEntry::make('colleagues.avatar')
->height(40)
->circular()
->stacked()
->limit(3)
->limitedRemainingText()
```
<AutoScreenshot name="infolists/entries/image/limited-remaining-text" alt="Limited image entry with remaining text" version="3.x" />
#### Showing the limited remaining text separately
By default, `limitedRemainingText()` will display the count of remaining images as a number stacked on the other images. If you prefer to show the count as a number after the images, you may use the `isSeparate: true` parameter:
```php
use Filament\Infolists\Components\ImageEntry;
ImageEntry::make('colleagues.avatar')
->height(40)
->circular()
->stacked()
->limit(3)
->limitedRemainingText(isSeparate: true)
```
<AutoScreenshot name="infolists/entries/image/limited-remaining-text-separately" alt="Limited image entry with remaining text separately" version="3.x" />
#### Customizing the limited remaining text size
By default, the size of the remaining text is `sm`. You can customize this to be `xs`, `md` or `lg` using the `size` parameter:
```php
use Filament\Infolists\Components\ImageEntry;
ImageEntry::make('colleagues.avatar')
->height(40)
->circular()
->stacked()
->limit(3)
->limitedRemainingText(size: 'lg')
```
## Custom attributes
You may customize the extra HTML attributes of the image using `extraImgAttributes()`:
```php
use Filament\Infolists\Components\ImageEntry;
ImageEntry::make('logo')
->extraImgAttributes([
'alt' => 'Logo',
'loading' => 'lazy',
]),
```
## Prevent file existence checks
When the infolist is loaded, it will automatically detect whether the images exist. This is all done on the backend. When using remote storage with many images, this can be time-consuming. You can use the `checkFileExistence(false)` method to disable this feature:
```php
use Filament\Infolists\Components\ImageEntry;
ImageEntry::make('attachment')
->checkFileExistence(false)
```

View File

@@ -0,0 +1,31 @@
---
title: Color entry
---
import AutoScreenshot from "@components/AutoScreenshot.astro"
## Overview
The color entry allows you to show the color preview from a CSS color definition, typically entered using the color picker field, in one of the supported formats (HEX, HSL, RGB, RGBA).
```php
use Filament\Infolists\Components\ColorEntry;
ColorEntry::make('color')
```
<AutoScreenshot name="infolists/entries/color/simple" alt="Color entry" version="3.x" />
## Allowing the color to be copied to the clipboard
You may make the color copyable, such that clicking on the preview copies the CSS value to the clipboard, and optionally specify a custom confirmation message and duration in milliseconds. This feature only works when SSL is enabled for the app.
```php
use Filament\Infolists\Components\ColorEntry;
ColorEntry::make('color')
->copyable()
->copyMessage('Copied!')
->copyMessageDuration(1500)
```
<AutoScreenshot name="infolists/entries/color/copyable" alt="Color entry with a button to copy it" version="3.x" />

View File

@@ -0,0 +1,53 @@
---
title: Key-value entry
---
import AutoScreenshot from "@components/AutoScreenshot.astro"
## Overview
The key-value entry allows you to render key-value pairs of data, from a one-dimensional JSON object / PHP array.
```php
use Filament\Infolists\Components\KeyValueEntry;
KeyValueEntry::make('meta')
```
<AutoScreenshot name="infolists/entries/key-value/simple" alt="Key-value entry" version="3.x" />
If you're saving the data in Eloquent, you should be sure to add an `array` [cast](https://laravel.com/docs/eloquent-mutators#array-and-json-casting) to the model property:
```php
use Illuminate\Database\Eloquent\Model;
class Post extends Model
{
protected $casts = [
'meta' => 'array',
];
// ...
}
```
## Customizing the key column's label
You may customize the label for the key column using the `keyLabel()` method:
```php
use Filament\Infolists\Components\KeyValueEntry;
KeyValueEntry::make('meta')
->keyLabel('Property name')
```
## Customizing the value column's label
You may customize the label for the value column using the `valueLabel()` method:
```php
use Filament\Infolists\Components\KeyValueEntry;
KeyValueEntry::make('meta')
->valueLabel('Property value')
```

View File

@@ -0,0 +1,58 @@
---
title: Repeatable entry
---
import AutoScreenshot from "@components/AutoScreenshot.astro"
## Overview
The repeatable entry allows you to repeat a set of entries and layout components for items in an array or relationship.
```php
use Filament\Infolists\Components\RepeatableEntry;
use Filament\Infolists\Components\TextEntry;
RepeatableEntry::make('comments')
->schema([
TextEntry::make('author.name'),
TextEntry::make('title'),
TextEntry::make('content')
->columnSpan(2),
])
->columns(2)
```
As you can see, the repeatable entry has an embedded `schema()` which gets repeated for each item.
<AutoScreenshot name="infolists/entries/repeatable/simple" alt="Repeatable entry" version="3.x" />
## Grid layout
You may organize repeatable items into columns by using the `grid()` method:
```php
use Filament\Infolists\Components\RepeatableEntry;
RepeatableEntry::make('comments')
->schema([
// ...
])
->grid(2)
```
This method accepts the same options as the `columns()` method of the [grid](../layout/grid). This allows you to responsively customize the number of grid columns at various breakpoints.
<AutoScreenshot name="infolists/entries/repeatable/grid" alt="Repeatable entry in grid layout" version="3.x" />
## Removing the styled container
By default, each item in a repeatable entry is wrapped in a container styled as a card. You may remove the styled container using `contained()`:
```php
use Filament\Infolists\Components\RepeatableEntry;
RepeatableEntry::make('comments')
->schema([
// ...
])
->contained(false)
```

View File

@@ -0,0 +1,69 @@
---
title: Custom entries
---
import LaracastsBanner from "@components/LaracastsBanner.astro"
<LaracastsBanner
title="Build a Custom Infolist Entry"
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/8"
series="building-advanced-components"
/>
## View entries
You may render a custom view for an entry using the `view()` method:
```php
use Filament\Infolists\Components\ViewEntry;
ViewEntry::make('status')
->view('filament.infolists.entries.status-switcher')
```
This assumes that you have a `resources/views/filament/infolists/entries/status-switcher.blade.php` file.
## Custom classes
You may create your own custom entry classes and entry 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 entry to use once, you could instead use a [view entry](#view-entries) to render any custom Blade file.
To create a custom entry class and view, you may use the following command:
```bash
php artisan make:infolist-entry StatusSwitcher
```
This will create the following entry class:
```php
use Filament\Infolists\Components\Entry;
class StatusSwitcher extends Entry
{
protected string $view = 'filament.infolists.entries.status-switcher';
}
```
It will also create a view file at `resources/views/filament/infolists/entries/status-switcher.blade.php`.
## Accessing the state
Inside your view, you may retrieve the state of the entry using the `$getState()` function:
```blade
<div>
{{ $getState() }}
</div>
```
## Accessing the Eloquent record
Inside your view, you may access the Eloquent record using the `$getRecord()` function:
```blade
<div>
{{ $getRecord()->name }}
</div>
```