fenerli
Call Resource Save Changes Button
use Filament\Forms;
public function form(Form $form): Form
{
return $form
->schema([
// Your form fields here
Forms\Components\TextInput::make('name')->required(),
// Save button
Forms\Components\Button::make('save')
->label('Save Changes')
->action('saveAction'),
// Another button to trigger save
Forms\Components\Button::make('triggerSave')
->label('Trigger Save')
->reactive()
->action(function () {
$this->saveAction();
}),
]);
}
public function saveAction()
{
// Your save logic here
}
5 replies
Label for Table Actions
use Filament\Tables;
use Filament\Resources\Table;
public function table(Table $table)
{
return $table
->columns([
Tables\Columns\TextColumn::make('item')
->label('Item'),
Tables\Columns\TextColumn::make('description')
->label('Description'),
Tables\Columns\TextColumn::make('actions')
->label('Actions') // Adding the Actions label here
->formatStateUsing(fn ($record) => view('your-actions-view', ['record' => $record])),
])
->actions([
Tables\Actions\EditAction::make(),
Tables\Actions\DeleteAction::make(),
]);
}
6 replies
Google maps style text input
<script>
document.addEventListener('DOMContentLoaded', function() {
const addressInput = document.querySelector('input[name="address"]');
const addressSelect = document.querySelector('select[name="address_results"]');
if (addressSelect) {
addressSelect.addEventListener('change', function() {
addressInput.value = this.options[this.selectedIndex].text;
});
}
});
</script>
17 replies
Google maps style text input
protected function fetchAddresses($address)
{
if (empty($address)) {
return;
}
$response = Http::get('YOUR_NOMINATIM_API_URL', [
'q' => $address,
'format' => 'json',
]);
if ($response->successful()) {
$results = $response->json();
// Create options for the Select component $options = []; foreach ($results as $result) { $options[$result['place_id']] = $result['display_name']; } // Update the state with the options $this->fill(['address_options' => $options]); } }
// Create options for the Select component $options = []; foreach ($results as $result) { $options[$result['place_id']] = $result['display_name']; } // Update the state with the options $this->fill(['address_options' => $options]); } }
17 replies
Google maps style text input
use Filament\Forms;
use Filament\Forms\Components\TextInput;
use Filament\Forms\Components\Select;
public function form(Form $form): Form
{
return $form
->schema([
TextInput::make('address')
->label('Address')
->reactive()
->afterStateUpdated(fn ($state, callable $get) => $this->fetchAddresses($state)),
Select::make('address_results') ->label('Possible Addresses') ->options(fn ($get) => $get('address_options') ?? []) ->reactive() ->hidden(fn ($get) => !$get('address_options')), // Show only if there are options ]); }
Select::make('address_results') ->label('Possible Addresses') ->options(fn ($get) => $get('address_options') ?? []) ->reactive() ->hidden(fn ($get) => !$get('address_options')), // Show only if there are options ]); }
17 replies
Make the topbar backdrop blur
.fi-topbar nav,
.fi-sidebar-header {
@apply backdrop-blur-sm bg-white bg-opacity-50;
}
@media (prefers-color-scheme: dark) {
.fi-topbar nav,
.fi-sidebar-header {
@apply bg-gray-800 bg-opacity-70; /* Dark background */
}
}
31 replies
Table ImageColumn only for certain rows
Yes, you can do it.
Here's my code.
code e.g:
use Filament\Tables;
use Filament\Resources\Table;
public static function table(Table $table): Table
{
return $table
->columns([
Tables\Columns\TextColumn::make('position')
->label('Position')
->formatStateUsing(fn ($state) => $state <= 3 ?
view('components.leaderboard-position', ['position' => $state]) :
$state),
Tables\Columns\TextColumn::make('name')
->label('Name'),
Tables\Columns\TextColumn::make('score')
->label('Score'),
])
->actions([
// Your actions here
]);
}
9 replies
Make the topbar backdrop blur
If you're using Tailwind CSS with the @apply directive to add a blur effect, make sure you've set up your Tailwind CSS configuration correctly. Here’s how you can achieve the blur effect on your .fi-topbar:
1.Ensure Tailwind CSS is configured: Make sure that your tailwind.config.js includes the necessary plugins and settings for backdrop-filter.
2.Use the Correct Utility: The class backdrop-blur-sm should work if Tailwind is configured correctly. If it's not applying, you might want to check your setup.
3.Example CSS:
Here's how you might set it up in your theme.css:
css
Copy code
@tailwind base;
@tailwind components;
@tailwind utilities;
.fi .fi-topbar {
@apply backdrop-blur-sm bg-white bg-opacity-50; /* Adjust background as needed /
}
4.Check Your Build Process: Make sure your CSS is being compiled correctly. Sometimes, changes won't reflect if the build process is not running or if there's an error in your setup.
5.Add Vendor Prefixes: If you're still having issues, you might need to add vendor prefixes for compatibility. You can do this by adding:
css
Copy code
.fi .fi-topbar {
backdrop-filter: blur(4px); / Fallback */
@apply backdrop-blur-sm bg-white bg-opacity-50;
}
Debugging Steps:
6.Inspect Element: Use the browser's developer tools to inspect the .fi-topbar element and check if the styles are being applied correctly.
7.Check Tailwind CSS Version: Ensure you're using a version of Tailwind that supports backdrop-filter.
8.Build Configuration: Make sure your build tools (like PostCSS) are set up to handle @apply correctly.
Let me know if you need further assistance!
31 replies