- Overview
- Installation
-
Usage
- Sorting
- Tags
-
Advanced
- Support & Pricing
- Common Issues
-
Examples
Basic example
This basic example demonstrates filtering a collection using three components: an LfTextFilter to filter by the title Text field, an LfCheckboxFilter for the 'car_brand' Taxonomy field, and an LfRadioFilter for the 'transmission' Select field. It uses the default pagination component.
Title search
Car brand
Transmission
Audi A3 Cabrio
Seats:
4
Doors:
2
Transmission:
Manual
Fuel:
Unleaded
Model year:
2020
Audi Q3 Turbo Diesel
Seats:
5
Doors:
5
Transmission:
Manual
Fuel:
Diesel
Model year:
2022
Citroen C4 Grand Picasso Automatic
Seats:
7
Doors:
5
Transmission:
Automatic
Fuel:
Diesel
Model year:
2022
Citroen SpaceTourer Automatic
Seats:
7
Doors:
5
Transmission:
Automatic
Fuel:
Diesel
Model year:
2021
Fiat 500 Cabrio Automatic
Seats:
2
Doors:
2
Transmission:
Automatic
Fuel:
Unleaded
Model year:
2021
Fiat Panda
Seats:
4
Doors:
4
Transmission:
Manual
Fuel:
Unleaded
Model year:
2023
Example's code
<div class="my-8 xl:my-12 not-prose">
<div class="flex">
<div class="w-1/3 pr-8">
<div class="mb-8">
<div class="mb-2 font-bold">
Title search
</div>
{{ livewire:lf-text-filter
blueprint="cars.car"
field="title"
condition="contains"
}}
</div>
<div class="mb-8">
<div class="mb-2 font-bold">
Car brand
</div>
{{ livewire:lf-checkbox-filter
blueprint="cars.car"
field="car_brand"
condition="taxonomy"
}}
</div>
<div class="mb-8">
<div class="mb-2 font-bold">
Transmission
</div>
{{ livewire:lf-radio-filter
blueprint="cars.car"
field="transmission"
condition="is"
}}
</div>
</div>
<div class="w-2/3">
<div class="mb-4">
{{ livewire:lf-tags blueprint="cars.car" fields="title|car_brand|transmission" }}
</div>
<div>
{{ livewire-collection:cars paginate="6" }}
</div>
</div>
</div>
</div>
