e7939b9045
- Replace instances of <UiButtonButton> with <Button> in the documentation for the experimenta button. - Ensure consistency in the examples provided for button, link, and NuxtLink usage.
104 lines
2.8 KiB
Markdown
104 lines
2.8 KiB
Markdown
# experimenta Button Component
|
|
|
|
## Beschreibung
|
|
|
|
Der experimenta-Button ist eine spezielle Button-Variante, die das offizielle experimenta-Design umsetzt. Der Button verfügt über einen animierten Gradient-Effekt beim Hovern, der von Pink (#e6007e) zu Rot (#e40521) wechselt.
|
|
|
|
## Design-Eigenschaften
|
|
|
|
- **Farben**: Pink (#e6007e) zu Rot (#e40521) Gradient
|
|
- **Border-Radius**: 25px (abgerundete Ecken)
|
|
- **Padding**: 10px 30px (Desktop), 8px 24px (Mobile)
|
|
- **Font-Size**: 18px (Desktop), 16px (Mobile)
|
|
- **Hover-Effekt**: Animierter Gradient, der sich über 1 Sekunde von links nach rechts bewegt
|
|
- **Transition**: Smooth transition für alle Eigenschaften (0.3s ease)
|
|
|
|
## Verwendung
|
|
|
|
### Als Button
|
|
|
|
```vue
|
|
<Button variant="experimenta" size="experimenta" @click="handleClick">
|
|
Button Text
|
|
</Button>
|
|
```
|
|
|
|
### Als Link
|
|
|
|
```vue
|
|
<Button variant="experimenta" size="experimenta" as="a" href="https://www.experimenta.science/">
|
|
Zur experimenta Startseite
|
|
</Button>
|
|
```
|
|
|
|
### Mit NuxtLink
|
|
|
|
```vue
|
|
<Button variant="experimenta" size="experimenta" as="NuxtLink" to="/some-page">
|
|
Interne Seite
|
|
</Button>
|
|
```
|
|
|
|
## Props
|
|
|
|
- **variant**: `"experimenta"` (erforderlich für das experimenta-Design)
|
|
- **size**: `"experimenta"` (empfohlen für das richtige Padding und die Schriftgröße)
|
|
- **as**: `"button"` (Standard) | `"a"` | `"NuxtLink"` - Element-Typ
|
|
- **href** / **to**: URL/Route (wenn `as="a"` oder `as="NuxtLink"`)
|
|
- **@click**: Event-Handler (wenn `as="button"`)
|
|
|
|
## Responsive Verhalten
|
|
|
|
Der Button passt sich automatisch an mobile Geräte an:
|
|
- **Desktop**: 18px Schriftgröße, 10px 30px Padding
|
|
- **Mobile (≤480px)**: 16px Schriftgröße, 8px 24px Padding
|
|
|
|
## Beispiel
|
|
|
|
Live-Beispiel auf der Startseite: `app/pages/index.vue`
|
|
|
|
## Technische Details
|
|
|
|
### Implementierung
|
|
|
|
Die Button-Komponente verwendet:
|
|
- `class-variance-authority` (CVA) für Varianten-Management
|
|
- `reka-ui` Primitive für Flexibilität
|
|
- Custom CSS für den Gradient-Effekt (`assets/css/main.css`)
|
|
- CSS Custom Properties für Farben (`--color-pink`, `--color-pink-dark`)
|
|
|
|
### Dateien
|
|
|
|
- **Komponente**: `app/components/ui/button/Button.vue`
|
|
- **Varianten**: `app/components/ui/button/index.ts`
|
|
- **Styles**: `assets/css/main.css` (`.btn-experimenta`)
|
|
|
|
## CSS-Implementierung
|
|
|
|
Der Gradient-Effekt wird mit Custom CSS implementiert:
|
|
|
|
```css
|
|
.btn-experimenta {
|
|
background: var(--color-pink);
|
|
background-image: linear-gradient(to left, var(--color-pink), var(--color-pink), var(--color-pink-dark), var(--color-pink));
|
|
background-size: 300%;
|
|
background-position: 0%;
|
|
transition: background-position 1s ease, all 0.3s ease;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.btn-experimenta:hover {
|
|
background-position: 100%;
|
|
}
|
|
```
|
|
|
|
## Barrierefreiheit
|
|
|
|
Der Button unterstützt:
|
|
- ✅ Keyboard-Navigation (Tab, Enter, Space)
|
|
- ✅ Focus-Styles
|
|
- ✅ Screen-Reader (via Primitive-Komponente)
|
|
- ✅ Disabled-State
|
|
|
|
|