opensource/filament
3
0
Fork 0
mirror of https://github.com/filamentphp/filament.git synced 2026-09-24 15:42:09 +08:00
Code Issues Packages Projects Releases Wiki Activity

Update documentation

Browse Source
This commit is contained in:
Zep Fietje
2024-03-04 09:27:51 +01:00
parent 2882d1ae90
commit 9d4102cd16
14 changed files with 965 additions and 657 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs-assets/app/app/Livewire/Forms/LayoutDemo.php
+27
View File
@@ -329,6 +329,33 @@ class LayoutDemo extends Component implements HasForms
])
->columns(3),
]),
Group::make()
->id('sectionFooterActions')
->extraAttributes([
'class' => 'p-16 max-w-2xl',
])
->schema([
Section::make('Rate limiting')
->description('Prevent abuse by limiting the number of requests per period')
->footerActions([
Action::make('test'),
])
->statePath('section')
->schema([
TextInput::make('hits')
->default(30),
Select::make('period')
->default('hour')
->options([
'hour' => 'Hour',
]),
TextInput::make('maximum')
->default(100),
Textarea::make('notes')
->columnSpanFull(),
])
->columns(3),
]),
Group::make()
->id('sectionIcons')
->extraAttributes([
docs-assets/app/app/Livewire/Infolists/LayoutDemo.php
+24
View File
@@ -202,6 +202,30 @@ class LayoutDemo extends Component implements HasForms, HasInfolists
])
->columns(3),
]),
Group::make()
->id('sectionFooterActions')
->extraAttributes([
'class' => 'p-16 max-w-2xl',
])
->schema([
Section::make('Rate limiting')
->description('Prevent abuse by limiting the number of requests per period')
->footerActions([
Action::make('edit'),
])
->schema([
TextEntry::make('hits')
->state(30),
TextEntry::make('period')
->state('Hour'),
TextEntry::make('maximum')
->state(100),
TextEntry::make('notes')
->state('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam ultricies, nunc nisl aliquet nunc, quis aliquam nisl.')
->columnSpanFull(),
])
->columns(3),
]),
Group::make()
->id('sectionIcons')
->extraAttributes([
docs-assets/app/composer.lock
Generated
+711 -577
View File
File diff suppressed because it is too large Load Diff
docs-assets/app/package-lock.json
Generated
+71 -68
View File
@@ -373,30 +373,30 @@
}
},
"node_modules/@jridgewell/gen-mapping": {
"version": "0.3.3",
"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
"integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==",
"version": "0.3.5",
"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
"integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
"dependencies": {
"@jridgewell/set-array": "^1.0.1",
"@jridgewell/set-array": "^1.2.1",
"@jridgewell/sourcemap-codec": "^1.4.10",
"@jridgewell/trace-mapping": "^0.3.9"
"@jridgewell/trace-mapping": "^0.3.24"
},
"engines": {
"node": ">=6.0.0"
}
},
"node_modules/@jridgewell/resolve-uri": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.1.tgz",
"integrity": "sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==",
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
"integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
"engines": {
"node": ">=6.0.0"
}
},
"node_modules/@jridgewell/set-array": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
"integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
"integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
"engines": {
"node": ">=6.0.0"
}
@@ -407,9 +407,9 @@
"integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
},
"node_modules/@jridgewell/trace-mapping": {
"version": "0.3.20",
"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.20.tgz",
"integrity": "sha512-R8LcPeWZol2zR8mmH3JeKQ6QRCFb7XgUhV9ZlGhHLGyg4wpPiPZNQOOWhFZhxKw8u//yTbNGI42Bx/3paXEQ+Q==",
"version": "0.3.25",
"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
"integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
"dependencies": {
"@jridgewell/resolve-uri": "^3.1.0",
"@jridgewell/sourcemap-codec": "^1.4.14"
@@ -526,9 +526,9 @@
"integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg=="
},
"node_modules/autoprefixer": {
"version": "10.4.16",
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.16.tgz",
"integrity": "sha512-7vd3UC6xKp0HLfua5IjZlcXvGAGy7cBAXTg2lyQ/8WpNhd6SiZ8Be+xm3FyBSYJx5GKcpRCzBh7RH4/0dnY+uQ==",
"version": "10.4.18",
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.18.tgz",
"integrity": "sha512-1DKbDfsr6KUElM6wg+0zRNkB/Q7WcKYAaK+pzXn+Xqmszm/5Xa9coeNdtP88Vi+dPzZnMjhge8GIV49ZQkDa+g==",
"funding": [
{
"type": "opencollective",
@@ -544,9 +544,9 @@
}
],
"dependencies": {
"browserslist": "^4.21.10",
"caniuse-lite": "^1.0.30001538",
"fraction.js": "^4.3.6",
"browserslist": "^4.23.0",
"caniuse-lite": "^1.0.30001591",
"fraction.js": "^4.3.7",
"normalize-range": "^0.1.2",
"picocolors": "^1.0.0",
"postcss-value-parser": "^4.2.0"
@@ -594,9 +594,9 @@
}
},
"node_modules/browserslist": {
"version": "4.22.2",
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.22.2.tgz",
"integrity": "sha512-0UgcrvQmBDvZHFGdYUehrCNIazki7/lUP3kkoi/r3YB2amZbFM9J43ZRkJTXBUZK4gmx56+Sqk9+Vs9mwZx9+A==",
"version": "4.23.0",
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.0.tgz",
"integrity": "sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ==",
"funding": [
{
"type": "opencollective",
@@ -612,8 +612,8 @@
}
],
"dependencies": {
"caniuse-lite": "^1.0.30001565",
"electron-to-chromium": "^1.4.601",
"caniuse-lite": "^1.0.30001587",
"electron-to-chromium": "^1.4.668",
"node-releases": "^2.0.14",
"update-browserslist-db": "^1.0.13"
},
@@ -633,9 +633,9 @@
}
},
"node_modules/caniuse-lite": {
"version": "1.0.30001576",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001576.tgz",
"integrity": "sha512-ff5BdakGe2P3SQsMsiqmt1Lc8221NR1VzHj5jXN5vBny9A6fpze94HiVV/n7XRosOlsShJcvMv5mdnpjOGCEgg==",
"version": "1.0.30001593",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001593.tgz",
"integrity": "sha512-UWM1zlo3cZfkpBysd7AS+z+v007q9G1+fLTUU42rQnY6t2axoogPW/xol6T7juU5EUoOhML4WgBIdG+9yYqAjQ==",
"funding": [
{
"type": "opencollective",
@@ -652,15 +652,9 @@
]
},
"node_modules/chokidar": {
"version": "3.5.3",
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
"integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
"funding": [
{
"type": "individual",
"url": "https://paulmillr.com/funding/"
}
],
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
"integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
"dependencies": {
"anymatch": "~3.1.2",
"braces": "~3.0.2",
@@ -673,6 +667,9 @@
"engines": {
"node": ">= 8.10.0"
},
"funding": {
"url": "https://paulmillr.com/funding/"
},
"optionalDependencies": {
"fsevents": "~2.3.2"
}
@@ -752,9 +749,9 @@
"integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA=="
},
"node_modules/electron-to-chromium": {
"version": "1.4.623",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.623.tgz",
"integrity": "sha512-lKoz10iCYlP1WtRYdh5MvocQPWVRoI7ysp6qf18bmeBgR8abE6+I2CsfyNKztRDZvhdWc+krKT6wS7Neg8sw3A=="
"version": "1.4.690",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.690.tgz",
"integrity": "sha512-+2OAGjUx68xElQhydpcbqH50hE8Vs2K6TkAeLhICYfndb67CVH0UsZaijmRUE3rHlIxU1u0jxwhgVe6fK3YANA=="
},
"node_modules/emoji-regex": {
"version": "9.2.2",
@@ -798,9 +795,9 @@
}
},
"node_modules/escalade": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
"integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==",
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.2.tgz",
"integrity": "sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==",
"engines": {
"node": ">=6"
}
@@ -832,9 +829,9 @@
}
},
"node_modules/fastq": {
"version": "1.16.0",
"resolved": "https://registry.npmjs.org/fastq/-/fastq-1.16.0.tgz",
"integrity": "sha512-ifCoaXsDrsdkWTtiNJX5uzHDsrck5TzfKKDcuFFTIrrc/BS076qgEIfoIy1VeZqViznfKiysPYTh/QeHtnIsYA==",
"version": "1.17.1",
"resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",
"integrity": "sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==",
"dependencies": {
"reusify": "^1.0.4"
}
@@ -931,9 +928,9 @@
}
},
"node_modules/hasown": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.0.tgz",
"integrity": "sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==",
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.1.tgz",
"integrity": "sha512-1/th4MHjnwncwXsIW6QMzlvYL9kG5e/CpVvLRZe4XPa8TOUNbCELqmvhDmnkNsAjwaG4+I8gJJL0JBvTTLO9qA==",
"dependencies": {
"function-bind": "^1.1.2"
},
@@ -1072,9 +1069,9 @@
"integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="
},
"node_modules/lru-cache": {
"version": "10.1.0",
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.1.0.tgz",
"integrity": "sha512-/1clY/ui8CzjKFyjdvwPWJUYKiFVXG2I2cY0ssG7h4+hwk+XOIX7ZSG9Q7TW8TW3Kp3BUSqgFWBLgL4PJ+Blag==",
"version": "10.2.0",
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.0.tgz",
"integrity": "sha512-2bIM8x+VAf6JT4bKAljS1qUWgMsqZRPGJS6FSahIMPVvctcNhyVp7AJu7quxOW9jwkryBReKZY5tY5JYv2n/7Q==",
"engines": {
"node": "14 || >=16.14"
}
@@ -1254,9 +1251,9 @@
}
},
"node_modules/postcss": {
"version": "8.4.33",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.33.tgz",
"integrity": "sha512-Kkpbhhdjw2qQs2O2DGX+8m5OVqEcbB9HRBvuYM9pgrjEFUg30A9LmXNlTAUj4S9kgtGyrMbTzVjH7E+s5Re2yg==",
"version": "8.4.35",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.35.tgz",
"integrity": "sha512-u5U8qYpBCpN13BsiEB0CbR1Hhh4Gc0zLFuedrHJKMctHCHAGrMdG0PRM/KErzAL3CU6/eckEtmHNB3x6e3c0vA==",
"funding": [
{
"type": "opencollective",
@@ -1349,11 +1346,14 @@
}
},
"node_modules/postcss-load-config/node_modules/lilconfig": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.0.0.tgz",
"integrity": "sha512-K2U4W2Ff5ibV7j7ydLr+zLAkIg5JJ4lPn1Ltsdt+Tz/IjQ8buJ55pZAxoP34lqIiwtF9iAvtLv3JGv7CAyAg+g==",
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.1.tgz",
"integrity": "sha512-O18pf7nyvHTckunPWCV1XUNXU1piu01y2b7ATJ0ppkUkk8ocqVWBrYjJBCwHDjD/ZWcfyrA0P4gKhzWGi5EINQ==",
"engines": {
"node": ">=14"
},
"funding": {
"url": "https://github.com/sponsors/antonk52"
}
},
"node_modules/postcss-nested": {
@@ -1387,9 +1387,9 @@
}
},
"node_modules/postcss-nesting": {
"version": "12.0.2",
"resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-12.0.2.tgz",
"integrity": "sha512-63PpJHSeNs93S3ZUIyi+7kKx4JqOIEJ6QYtG3x+0qA4J03+4n0iwsyA1GAHyWxsHYljQS4/4ZK1o2sMi70b5wQ==",
"version": "12.0.4",
"resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-12.0.4.tgz",
"integrity": "sha512-WuCe0KnP4vKjLZK8VNoUWKL8ZLOv/5jiM94mHcI3VszLropHwmjotdUyP/ObzqZpXuQKP2Jf9R12vIHKFSStKw==",
"funding": [
{
"type": "github",
@@ -1401,7 +1401,7 @@
}
],
"dependencies": {
"@csstools/selector-specificity": "^3.0.1",
"@csstools/selector-specificity": "^3.0.2",
"postcss-selector-parser": "^6.0.13"
},
"engines": {
@@ -1412,9 +1412,9 @@
}
},
"node_modules/postcss-nesting/node_modules/@csstools/selector-specificity": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-3.0.1.tgz",
"integrity": "sha512-NPljRHkq4a14YzZ3YD406uaxh7s0g6eAq3L9aLOWywoqe8PkYamAvtsh7KNX6c++ihDrJ0RiU+/z7rGnhlZ5ww==",
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-3.0.2.tgz",
"integrity": "sha512-RpHaZ1h9LE7aALeQXmXrJkRG84ZxIsctEN2biEUmFyKpzFM3zZ35eUMcIzZFsw/2olQE6v69+esEqU2f1MKycg==",
"funding": [
{
"type": "github",
@@ -1998,9 +1998,12 @@
}
},
"node_modules/yaml": {
"version": "2.3.4",
"resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.4.tgz",
"integrity": "sha512-8aAvwVUSHpfEqTQ4w/KMlf3HcRdt50E5ODIQJBw1fQ5RL34xabzxtUlzTXVqc4rkZsPbvrXKWnABCD7kWSmocA==",
"version": "2.4.0",
"resolved": "https://registry.npmjs.org/yaml/-/yaml-2.4.0.tgz",
"integrity": "sha512-j9iR8g+/t0lArF4V6NE/QCfT+CO7iLqrXAHZbJdo+LfjqP1vR8Fg5bSiaq6Q2lOD1AUEVrEVIgABvBFYojJVYQ==",
"bin": {
"yaml": "bin.mjs"
},
"engines": {
"node": ">= 14"
}
docs-assets/app/tailwind.config.js
-6
View File
@@ -12,12 +12,6 @@ export default {
fontFamily: {
sans: ['Inter', 'sans-serif'],
},
fontWeight: {
normal: 300,
medium: 400,
semibold: 500,
bold: 600,
},
},
},
}
docs-assets/screenshots/images/dark/forms/layout/section/footer/actions.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 67 KiB

docs-assets/screenshots/images/dark/forms/layout/section/actions.jpg → docs-assets/screenshots/images/dark/forms/layout/section/header/actions.jpg
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 62 KiB

After

Width:  |  Height:  |  Size: 62 KiB

docs-assets/screenshots/images/dark/infolists/layout/section/actions.jpg
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 82 KiB

docs-assets/screenshots/images/light/forms/layout/section/footer/actions.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 66 KiB

docs-assets/screenshots/images/light/forms/layout/section/actions.jpg → docs-assets/screenshots/images/light/forms/layout/section/header/actions.jpg
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 61 KiB

After

Width:  |  Height:  |  Size: 61 KiB

docs-assets/screenshots/images/light/infolists/layout/section/actions.jpg
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 83 KiB

docs-assets/screenshots/schema.js
+20 -2
View File
@@ -1202,7 +1202,7 @@ export default {
deviceScaleFactor: 3,
},
},
'forms/layout/section/actions': {
'forms/layout/section/header/actions': {
url: 'forms/layout',
selector: '#sectionHeaderActions',
viewport: {
@@ -1211,6 +1211,15 @@ export default {
deviceScaleFactor: 3,
},
},
'forms/layout/section/footer/actions': {
url: 'forms/layout',
selector: '#sectionFooterActions',
viewport: {
width: 1920,
height: 640,
deviceScaleFactor: 3,
},
},
'forms/layout/section/icons': {
url: 'forms/layout',
selector: '#sectionIcons',
@@ -1730,7 +1739,7 @@ export default {
deviceScaleFactor: 3,
},
},
'infolists/layout/section/actions': {
'infolists/layout/section/header/actions': {
url: 'infolists/layout',
selector: '#sectionHeaderActions',
viewport: {
@@ -1739,6 +1748,15 @@ export default {
deviceScaleFactor: 3,
},
},
'infolists/layout/section/footer/actions': {
url: 'infolists/layout',
selector: '#sectionFooterActions',
viewport: {
width: 1920,
height: 640,
deviceScaleFactor: 3,
},
},
'infolists/layout/section/icons': {
url: 'infolists/layout',
selector: '#sectionIcons',
packages/forms/docs/04-layout/06-section.md
+56 -2
View File
@@ -32,7 +32,11 @@ Section::make()
<AutoScreenshot name="forms/layout/section/without-header" alt="Section without header" version="3.x" />
## Adding actions to the section's header
## 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:
@@ -52,7 +56,57 @@ Section::make('Rate limiting')
])
```
<AutoScreenshot name="forms/layout/section/actions" alt="Section with header actions" version="3.x" />
<AutoScreenshot name="forms/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\Forms\Components\Actions\Action;
use Filament\Forms\Components\Section;
Section::make('Rate limiting')
->footerActions([
Action::make('test')
->action(function () {
// ...
}),
])
->schema([
// ...
])
```
<AutoScreenshot name="forms/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\Forms\Components\Actions\Action;
use Filament\Forms\Components\Section;
use Filament\Support\Enums\Alignment;
Section::make('Rate limiting')
->footerActions([
Action::make('test')
->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:
packages/infolists/docs/04-layout/05-section.md
+56 -2
View File
@@ -32,7 +32,11 @@ Section::make()
<AutoScreenshot name="infolists/layout/section/without-header" alt="Section without header" version="3.x" />
## Adding actions to the section's header
## 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:
@@ -52,7 +56,57 @@ Section::make('Rate limiting')
])
```
<AutoScreenshot name="infolists/layout/section/actions" alt="Section with header actions" version="3.x" />
<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: