You can publish the full configuration with the following command:
php artisan vendor:publish --tag="filament-peek-config"
This will add a config/filament-peek.php
file to your project.
Here are the main options you can configure:
Name | Type | Description |
---|---|---|
devicePresets |
array|false |
Quickly resize the preview iframe to specific dimensions. |
initialDevicePreset |
string |
Default device preset to be activated when the preview modal is open. |
allowIframeOverflow |
bool |
Allow the iframe dimensions to go beyond the capacity of the available preview modal area. |
allowIframePointerEvents |
bool |
Allow all pointer events within the iframe. By default, only scrolling is allowed. (Does not apply when using a preview URL. See Pointer Events) |
closeModalWithEscapeKey |
bool |
Close the preview modal by pressing the Escape key. (Does not apply to Builder previews.) |
internalPreviewUrl |
array |
Render Blade previews through an internal URL. |
builderEditor |
array |
Options related to the Editor sidebar in Builder Previews. |
Builder Editor options:
Name | Type | Description |
---|---|---|
canDiscardChanges |
bool |
Show 'Accept' and 'Discard' buttons in modal header instead of a single 'Close' button. |
canResizeSidebar |
bool |
Allow users to resize the sidebar by clicking and dragging on the right edge. |
sidebarMinWidth |
string |
Minimum width for the sidebar, if resizable. Must be a valid CSS width value. |
sidebarInitialWidth |
string |
Initial width for the sidebar. Must be a valid CSS width value. |
preservePreviewScrollPosition |
bool |
Restore the preview iframe scroll position when the preview is refreshed. |
canEnableAutoRefresh |
bool |
Enable the auto-refresh option for the Builder Editor. |
autoRefreshDebounceMilliseconds |
int |
Debounce time before refreshing the preview. |
autoRefreshStrategy |
string |
Possible values: simple or reactive . (See Automatically Updating the Builder Preview) |
livewireComponentClass |
string |
Livewire component class for the Builder Editor sidebar. |
With Filament, you can change the CSS used inside of a given Panel by compiling a custom stylesheet (a "theme"). With this approach, it's also possible to modify the internal stylesheet of the plugin for a seamless integration.
Follow the instructions on the Creating a custom theme section of the Filament documentation.
In your AdminPanelProvider
, call the disablePluginStyles()
method on the plugin object:
use Pboivin\FilamentPeek\FilamentPeekPlugin;
public function panel(Panel $panel): Panel
{
return $panel
// ...
->plugins([
FilamentPeekPlugin::make()
+ ->disablePluginStyles(),
]);
}
resources/css/filament/admin/theme.css
@import '../../../../vendor/filament/filament/resources/css/theme.css';
+@import '../../../../vendor/pboivin/filament-peek/resources/css/plugin.css';
@config './tailwind.config.js';
resources/css/filament/admin/tailwind.config.js
export default {
presets: [preset],
content: [
'./app/Filament/**/*.php',
'./resources/views/filament/**/*.blade.php',
'./vendor/filament/**/*.blade.php',
+ './vendor/pboivin/filament-peek/resources/**/*.blade.php',
]
}
postcss.config.js
module.exports = {
plugins: {
+ 'tailwindcss/nesting': {},
tailwindcss: {},
autoprefixer: {},
},
}
npm run build
Documentation