Actualización de componente Porto Header
This commit is contained in:
248
resources/views/components/header/page-header.blade.php
Normal file
248
resources/views/components/header/page-header.blade.php
Normal file
@ -0,0 +1,248 @@
|
||||
{{--
|
||||
=============================================================================
|
||||
page-header.blade.php — Porto v12 (v3 DX + DOC + UI)
|
||||
Encabezado clásico/moderno con props semánticos, colores, tamaños, animación
|
||||
y control explícito del color de breadcrumbs.
|
||||
=============================================================================
|
||||
|
||||
USO BÁSICO
|
||||
-----------------------------------------------------------------------------
|
||||
<x-koneko-layout-porto::header.page-header
|
||||
title="<strong>Mapa del sitio</strong>"
|
||||
:breadcrumbs="[
|
||||
['name' => 'Inicio', 'href' => url('/')],
|
||||
['name' => 'Mapa del sitio', 'active' => true],
|
||||
]"
|
||||
/>
|
||||
|
||||
COLORES Y ANIMACIONES
|
||||
-----------------------------------------------------------------------------
|
||||
<x-koneko-layout-porto::header.page-header
|
||||
title="<strong>Servicios</strong>"
|
||||
color="quaternary"
|
||||
titleColor="secondary"
|
||||
crumbColor="default"
|
||||
titleAnimation="fadeInRightShorter"
|
||||
titleDelay="100"
|
||||
crumbAnimation="fadeInLeftShorter"
|
||||
crumbDelay="300"
|
||||
/>
|
||||
|
||||
ALINEACIÓN Y TAMAÑOS
|
||||
-----------------------------------------------------------------------------
|
||||
<x-koneko-layout-porto::header.page-header
|
||||
title="<strong>Nosotros</strong>"
|
||||
align="left"
|
||||
size="modern"
|
||||
titileSize="lg"
|
||||
breadcrumbSize="sm"
|
||||
uppercase
|
||||
/>
|
||||
|
||||
FULL WIDTH Y CLASES CRUDAS
|
||||
-----------------------------------------------------------------------------
|
||||
<x-koneko-layout-porto::header.page-header
|
||||
title="<strong>Contacto</strong>"
|
||||
fullWidth
|
||||
titleColor="text-9 text-color-secondary"
|
||||
crumbColor="dark"
|
||||
/>
|
||||
|
||||
NOTAS
|
||||
-----------------------------------------------------------------------------
|
||||
- title permite HTML controlado por el autor.
|
||||
- titleColor = "auto" calcula contraste según fondo (light/grey → dark; otros → light).
|
||||
- crumbColor controla el color de las migas: default|dark|light.
|
||||
- breadcrumb acepta href o bien route+params.
|
||||
- Este componente no gestiona background-image/overlay (usa <x-porto::header-background> para eso).
|
||||
--}}
|
||||
|
||||
@props([
|
||||
// ----------------------------------------------------------------------------
|
||||
// CONTENIDO
|
||||
// ----------------------------------------------------------------------------
|
||||
'title' => '',
|
||||
'breadcrumbs' => [
|
||||
['name' => 'Inicio', 'href' => '/', 'active' => true],
|
||||
],
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// LAYOUT
|
||||
// ----------------------------------------------------------------------------
|
||||
'align' => 'center', // left | center | right
|
||||
'size' => 'default', // sm | md | lg | modern | default
|
||||
'color' => 'grey', // light | grey/gray | dark | primary | secondary | tertiary | quaternary
|
||||
'fullWidth' => false, // container-fluid si true
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// TIPOGRAFÍA
|
||||
// ----------------------------------------------------------------------------
|
||||
'titileSize' => 'md', // sm | md | lg (compat typo)
|
||||
'breadcrumbSize' => 'md', // sm | md | lg
|
||||
'uppercase' => false,
|
||||
|
||||
/**
|
||||
* Color de migas.
|
||||
* - default => usa utilitario de Porto "text-color-default"
|
||||
* - dark => usa utilitario "text-color-dark"
|
||||
* - light => usa estilo Porto "breadcrumb-light" (invertido para fondos oscuros)
|
||||
*/
|
||||
'crumbColor' => 'default', // default | dark | light
|
||||
|
||||
/**
|
||||
* Color del <h1>.
|
||||
* auto | primary | secondary | tertiary | quaternary | dark | light | <clases>
|
||||
*/
|
||||
'titleColor' => 'auto',
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// ANIMACIONES (Porto appear-animation)
|
||||
// ----------------------------------------------------------------------------
|
||||
'titleAnimation' => null,
|
||||
'titleDelay' => 0,
|
||||
'titleDuration' => null,
|
||||
'crumbAnimation' => null,
|
||||
'crumbDelay' => 0,
|
||||
'crumbDuration' => null,
|
||||
'overflowTitle' => false,
|
||||
'overflowBreadcrumb'=> false,
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// EXTRAS / COMPAT
|
||||
// ----------------------------------------------------------------------------
|
||||
'customHeader' => false,
|
||||
])
|
||||
|
||||
@php
|
||||
// ===== Normalizaciones =====
|
||||
$allowedColors = ['light','grey','gray','dark','primary','secondary','tertiary','quaternary'];
|
||||
if ($color === 'gray') $color = 'grey';
|
||||
$color = in_array($color, $allowedColors, true) ? $color : 'grey';
|
||||
|
||||
$align = in_array($align, ['left','center','right'], true) ? $align : 'center';
|
||||
|
||||
$sizeMap = [
|
||||
'sm' => 'page-header-sm',
|
||||
'md' => 'page-header-md',
|
||||
'lg' => 'page-header-lg',
|
||||
'modern' => 'page-header-modern',
|
||||
'default' => ''
|
||||
];
|
||||
$sizeClass = $sizeMap[$size] ?? $sizeMap['md'];
|
||||
|
||||
// ===== Clases base =====
|
||||
$pageHeaderClass = 'page-header page-header-modern custom-page-header';
|
||||
$bgColorClass = 'bg-color-' . $color;
|
||||
|
||||
// ===== H1 =====
|
||||
$h1SizeMap = ['sm' => 'text-6', 'md' => '', 'lg' => 'text-10'];
|
||||
$semanticMap = [
|
||||
'primary' => 'text-color-primary',
|
||||
'secondary' => 'text-color-secondary',
|
||||
'tertiary' => 'text-color-tertiary',
|
||||
'quaternary' => 'text-color-quaternary',
|
||||
'dark' => 'text-dark',
|
||||
'light' => 'text-light',
|
||||
];
|
||||
|
||||
$h1Class = 'font-weight-bold ' . ($h1SizeMap[$titileSize] ?? $h1SizeMap['md']);
|
||||
if ($titleColor === 'auto') {
|
||||
$h1Class .= in_array($color, ['light','grey']) ? ' text-dark' : ' text-light';
|
||||
} elseif (isset($semanticMap[$titleColor])) {
|
||||
$h1Class .= ' ' . $semanticMap[$titleColor];
|
||||
} elseif (is_string($titleColor) && $titleColor !== '') {
|
||||
$h1Class .= ' ' . $titleColor; // clases crudas
|
||||
}
|
||||
if ($uppercase) $h1Class .= ' text-uppercase';
|
||||
|
||||
// ===== Breadcrumb =====
|
||||
$ulClasses = ['breadcrumb','d-block'];
|
||||
$ulClasses[] = match ($align) {
|
||||
'left' => 'text-md-end',
|
||||
'right' => 'text-md-start',
|
||||
default => 'text-center',
|
||||
};
|
||||
$ulClasses[] = match ($breadcrumbSize) {
|
||||
'sm' => 'text-2',
|
||||
'lg' => 'text-3-5',
|
||||
default => '',
|
||||
};
|
||||
|
||||
// Color explícito del breadcrumb
|
||||
if ($crumbColor === 'light') {
|
||||
$ulClasses[] = 'breadcrumb-light';
|
||||
} elseif ($crumbColor === 'dark') {
|
||||
$ulClasses[] = 'text-color-dark';
|
||||
} else { // default
|
||||
$ulClasses[] = 'text-color-default';
|
||||
}
|
||||
|
||||
// ===== Grid =====
|
||||
$containerClass = $fullWidth ? 'container-fluid' : 'container';
|
||||
$rowClass = $size === 'modern' ? 'row py-5' : 'row';
|
||||
|
||||
$titleColClass = 'order-2 ';
|
||||
$crumbColClass = 'order-1 ';
|
||||
if ($align === 'center') {
|
||||
$titleColClass .= 'col-md-12 text-center';
|
||||
$crumbColClass .= 'col-md-12';
|
||||
} elseif ($align === 'right') {
|
||||
$titleColClass .= 'col-md-8 text-end';
|
||||
$crumbColClass .= 'col-md-4';
|
||||
} else { // left
|
||||
$titleColClass .= 'col-md-8 order-md-1';
|
||||
$crumbColClass .= 'col-md-4 order-md-2';
|
||||
}
|
||||
$titleColClass .= ' align-self-center p-static';
|
||||
$crumbColClass .= ' align-self-center';
|
||||
@endphp
|
||||
|
||||
<section class="{{ $pageHeaderClass }} {{ $bgColorClass }} {{ $sizeClass }} m-0">
|
||||
<div class="{{ $containerClass }}">
|
||||
<div class="{{ $rowClass }}">
|
||||
<div class="{{ $titleColClass }}">
|
||||
@if($overflowTitle)<div class="overflow-hidden">@endif
|
||||
<h1 class="{{ $h1Class }} {{ $titleAnimation ? 'appear-animation' : '' }}"
|
||||
@if($titleAnimation)
|
||||
data-appear-animation="{{ $titleAnimation }}"
|
||||
@if($titleDelay) data-appear-animation-delay="{{ $titleDelay }}" @endif
|
||||
@if($titleDuration) data-appear-animation-duration="{{ $titleDuration }}" @endif
|
||||
@endif
|
||||
>{!! $title !!}</h1>
|
||||
@if($overflowTitle)</div>@endif
|
||||
</div>
|
||||
<div class="{{ $crumbColClass }}">
|
||||
@if($overflowBreadcrumb)<div class="overflow-hidden">@endif
|
||||
<ul class="{{ implode(' ', $ulClasses) }} {{ $crumbAnimation ? 'appear-animation' : '' }}"
|
||||
@if($crumbAnimation)
|
||||
data-appear-animation="{{ $crumbAnimation }}"
|
||||
@if($crumbDelay) data-appear-animation-delay="{{ $crumbDelay }}" @endif
|
||||
@if($crumbDuration) data-appear-animation-duration="{{ $crumbDuration }}" @endif
|
||||
@endif
|
||||
>
|
||||
@foreach ($breadcrumbs as $breadcrumb)
|
||||
@php
|
||||
$name = $breadcrumb['name'] ?? '';
|
||||
$active = (bool)($breadcrumb['active'] ?? false);
|
||||
$route = $breadcrumb['route'] ?? null;
|
||||
$params = $breadcrumb['params'] ?? [];
|
||||
$href = $breadcrumb['href'] ?? null;
|
||||
|
||||
$routeExists = $route && \Illuminate\Support\Facades\Route::has($route);
|
||||
$url = $routeExists ? route($route, $params) : ($href ?: null);
|
||||
@endphp
|
||||
|
||||
<li class="{{ $active ? 'active' : '' }}" @if($active) aria-current="page" @endif>
|
||||
@if (!$active && $url)
|
||||
<a href="{{ $url }}">{{ $name }}</a>
|
||||
@else
|
||||
<span>{{ $name }}</span>
|
||||
@endif
|
||||
</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
@if($overflowBreadcrumb)</div>@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
Reference in New Issue
Block a user