Michael Schiemer
77abc65cd7
Some checks failed
Deploy Application / deploy (push) Has been cancelled
151 lines
3.1 KiB
Markdown
151 lines
3.1 KiB
Markdown
# Search Component
|
|
|
|
Wiederverwendbare Search-Komponente mit semantischem `<search>` Element.
|
|
|
|
## Baseline Status
|
|
|
|
**Baseline 2023**: `<search>` Element ist Baseline Newly available.
|
|
|
|
## Verwendung
|
|
|
|
### Basis-Verwendung
|
|
|
|
```html
|
|
<x-search
|
|
action="/search"
|
|
method="get"
|
|
placeholder="Search..."
|
|
/>
|
|
```
|
|
|
|
### Mit Varianten
|
|
|
|
```html
|
|
<!-- Header Variante -->
|
|
<x-search
|
|
action="/admin/search"
|
|
method="get"
|
|
placeholder="Search..."
|
|
variant="header"
|
|
/>
|
|
|
|
<!-- Sidebar Variante -->
|
|
<x-search
|
|
action="/search"
|
|
method="get"
|
|
placeholder="Search..."
|
|
variant="sidebar"
|
|
/>
|
|
|
|
<!-- Standalone Variante -->
|
|
<x-search
|
|
action="/search"
|
|
method="get"
|
|
placeholder="Search..."
|
|
variant="standalone"
|
|
/>
|
|
```
|
|
|
|
## Attribute
|
|
|
|
| Attribut | Typ | Standard | Beschreibung |
|
|
|----------|-----|----------|-------------|
|
|
| `action` | string | `/search` | Form action URL |
|
|
| `method` | string | `get` | HTTP method (get/post) |
|
|
| `name` | string | `q` | Input name attribute |
|
|
| `placeholder` | string | `Search...` | Placeholder text |
|
|
| `value` | string | `null` | Initial input value |
|
|
| `variant` | string | `standalone` | Variant: `header`, `sidebar`, `standalone` |
|
|
| `autocomplete` | boolean | `true` | Enable/disable autocomplete |
|
|
| `aria-label` | string | `null` | ARIA label for accessibility |
|
|
| `aria-describedby` | string | `null` | ARIA describedby for accessibility |
|
|
| `id` | string | `auto-generated` | Input ID |
|
|
|
|
## Varianten
|
|
|
|
### Header Variante
|
|
Für die Verwendung im Header-Bereich. Automatisch angepasste Breite und Positionierung.
|
|
|
|
### Sidebar Variante
|
|
Für die Verwendung in der Sidebar. Optimiert für schmale Bereiche.
|
|
|
|
### Standalone Variante
|
|
Für eigenständige Search-Formulare. Maximale Breite 600px, zentriert.
|
|
|
|
## Accessibility
|
|
|
|
Die Komponente ist vollständig accessibility-konform:
|
|
|
|
- Semantisches `<search>` Element
|
|
- Visuell verstecktes Label für Screen Reader
|
|
- ARIA-Attribute unterstützt
|
|
- Keyboard-Navigation unterstützt
|
|
- Focus-Management
|
|
|
|
## Beispiele
|
|
|
|
### Mit Autocomplete deaktiviert
|
|
|
|
```html
|
|
<x-search
|
|
action="/admin/search"
|
|
method="get"
|
|
placeholder="Search..."
|
|
autocomplete="false"
|
|
/>
|
|
```
|
|
|
|
### Mit ARIA-Label
|
|
|
|
```html
|
|
<x-search
|
|
action="/search"
|
|
method="get"
|
|
placeholder="Search..."
|
|
aria-label="Search the website"
|
|
/>
|
|
```
|
|
|
|
## CSS-Klassen
|
|
|
|
Die Komponente verwendet folgende CSS-Klassen:
|
|
|
|
- `.admin-search` - Basis-Klasse
|
|
- `.admin-search--header` - Header Variante
|
|
- `.admin-search--sidebar` - Sidebar Variante
|
|
- `.admin-search--standalone` - Standalone Variante
|
|
- `.admin-search__input` - Input-Element
|
|
- `.admin-search__submit` - Submit-Button
|
|
- `.admin-search__icon` - Search-Icon
|
|
|
|
## Browser-Support
|
|
|
|
- Chrome 125+
|
|
- Firefox 129+
|
|
- Safari 18+
|
|
- Edge 125+
|
|
|
|
## Migration
|
|
|
|
### Von `<form role="search">` migrieren
|
|
|
|
**Vorher:**
|
|
```html
|
|
<form class="admin-search" role="search" action="/search" method="get">
|
|
<input type="search" name="q" placeholder="Search..." />
|
|
</form>
|
|
```
|
|
|
|
**Nachher:**
|
|
```html
|
|
<x-search
|
|
action="/search"
|
|
method="get"
|
|
name="q"
|
|
placeholder="Search..."
|
|
/>
|
|
```
|
|
|
|
Die Komponente generiert automatisch das semantische `<search>` Element mit korrektem HTML-Struktur.
|
|
|