58 lines
2.0 KiB
Markdown
58 lines
2.0 KiB
Markdown
# SubSectionTile
|
|
|
|
The `SubSectionTile` allows you to group similar tiles together within a section, providing better organization and visual hierarchy.
|
|
|
|
## Usage
|
|
|
|
```php
|
|
use App\Domain\Search\Tiles\SubSectionTile;
|
|
|
|
// Create a sub-section with grouped tiles
|
|
$performanceSubSection = new SubSectionTile(
|
|
'Performance', // Title
|
|
[ // Array of tiles
|
|
new PowerTile(new Power(210)),
|
|
new AccelerationTile(new Acceleration(6.6)),
|
|
new TopSpeedTile(new TopSpeed(180)),
|
|
new DrivetrainTile(new Drivetrain('rear')),
|
|
],
|
|
'Motor and driving performance specifications' // Optional description
|
|
);
|
|
```
|
|
|
|
## Parameters
|
|
|
|
- **`title`** (string): The title of the sub-section
|
|
- **`tiles`** (array): Array of tile objects to group together
|
|
- **`description`** (string, optional): Optional description text displayed below the title
|
|
|
|
## Example
|
|
|
|
```php
|
|
new SectionTile('Skoda Elroq 85', [
|
|
new BrandTile('Skoda'),
|
|
new PriceTile(new Price(43900, Currency::euro())),
|
|
|
|
new SubSectionTile('Performance', [
|
|
new PowerTile(new Power(210)),
|
|
new AccelerationTile(new Acceleration(6.6)),
|
|
new TopSpeedTile(new TopSpeed(180)),
|
|
new DrivetrainTile(new Drivetrain('rear')),
|
|
], 'Motor and driving performance specifications'),
|
|
|
|
new SubSectionTile('Range & Efficiency', [
|
|
new RangeTile(new Range(450)),
|
|
new BatteryTile(new Battery(77.0, 82.0)),
|
|
new ConsumptionTile(new Consumption(171)),
|
|
new ChargingTile(new ChargingSpeed(175, 11)),
|
|
], 'Battery capacity, range, and charging capabilities'),
|
|
]);
|
|
```
|
|
|
|
## Visual Hierarchy
|
|
|
|
- **Section**: Large heading (h1) with prominent styling
|
|
- **Sub-section**: Medium heading (h2) with subtle styling
|
|
- **Tiles**: Individual data tiles within each sub-section
|
|
|
|
The sub-section provides a clear visual separation between different categories of information while maintaining the overall design consistency. |