[增添]添加了datasource的setting数据库以及默认值
This commit is contained in:
makotocc0107
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>
|
||||
```
|
||||
Reference in New Issue
Block a user