Actualización de componente Porto Header
This commit is contained in:
@ -1,15 +0,0 @@
|
|||||||
<section class="page-header page-header-modern page-header-md bg-transparent">
|
|
||||||
<div class="container">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-12 align-self-center p-static order-2 text-center">
|
|
||||||
<h1 class="text-dark">Background <strong>Clean</strong></h1>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-12 align-self-center order-1">
|
|
||||||
<ul class="breadcrumb d-block text-center">
|
|
||||||
<li><a href="#">Home</a></li>
|
|
||||||
<li class="active">Features</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
@ -1,16 +0,0 @@
|
|||||||
<section class="page-header page-header-modern page-header-background page-header-background-md overlay overlay-color-dark overlay-show overlay-op-5" style="background-image: url(img/page-header/page-header-background.jpg);">
|
|
||||||
<div class="container">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-8 order-2 order-md-1 align-self-center p-static">
|
|
||||||
<h1>Background <strong>Fixed</strong></h1>
|
|
||||||
<span class="sub-title">This is a subtitle example.</span>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-4 order-1 order-md-2 align-self-center">
|
|
||||||
<ul class="breadcrumb breadcrumb-light d-block text-md-end">
|
|
||||||
<li><a href="#">Home</a></li>
|
|
||||||
<li class="active">Features</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
@ -1,16 +0,0 @@
|
|||||||
<section class="page-header page-header-modern page-header-background page-header-background-md overlay overlay-color-primary overlay-show overlay-op-8" style="background-image: url(img/page-header/page-header-background.jpg);">
|
|
||||||
<div class="container">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-12 align-self-center p-static order-2 text-center">
|
|
||||||
<h1>Background <strong>Overlay</strong></h1>
|
|
||||||
<span class="sub-title">This is a subtitle example.</span>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-12 align-self-center order-1">
|
|
||||||
<ul class="breadcrumb breadcrumb-light d-block text-center">
|
|
||||||
<li><a href="#">Home</a></li>
|
|
||||||
<li class="active">Features</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
@ -1,15 +0,0 @@
|
|||||||
<section class="page-header page-header-modern page-header-background page-header-background-md parallax overlay overlay-color-dark overlay-show overlay-op-5 mt-0" data-plugin-parallax data-plugin-options="{'speed': 1.2}" data-image-src="img/page-header/page-header-parallax.jpg">
|
|
||||||
<div class="container">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-12 align-self-center p-static order-2 text-center">
|
|
||||||
<h1>Background <strong>Parallax</strong></h1>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-12 align-self-center order-1">
|
|
||||||
<ul class="breadcrumb breadcrumb-light d-block text-center">
|
|
||||||
<li><a href="#">Home</a></li>
|
|
||||||
<li class="active">Features</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
@ -1,15 +0,0 @@
|
|||||||
<section class="page-header page-header-modern page-header-background page-header-background-pattern page-header-background-md overlay overlay-color-dark overlay-show overlay-op-5" style="background-image: url(img/patterns/wild_oliva.png);">
|
|
||||||
<div class="container">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-12 align-self-center p-static order-2 text-center">
|
|
||||||
<h1>Background <strong>Pattern</strong></h1>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-12 align-self-center order-1">
|
|
||||||
<ul class="breadcrumb breadcrumb-light d-block text-center">
|
|
||||||
<li><a href="#">Home</a></li>
|
|
||||||
<li class="active">Features</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
@ -1,15 +0,0 @@
|
|||||||
<section class="page-header page-header-modern page-header-background page-header-background-md overlay overlay-color-dark overlay-show overlay-op-7" style="background-image: url(img/page-header/page-header-background-transparent.jpg);">
|
|
||||||
<div class="container">
|
|
||||||
<div class="row mt-5">
|
|
||||||
<div class="col-md-12 align-self-center p-static order-2 text-center">
|
|
||||||
<h1>Background <strong>Transparent</strong></h1>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-12 align-self-center order-1">
|
|
||||||
<ul class="breadcrumb breadcrumb-light d-block text-center">
|
|
||||||
<li><a href="#">Home</a></li>
|
|
||||||
<li class="active">Features</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
@ -1,15 +0,0 @@
|
|||||||
<section class="page-header page-header-modern page-header-background page-header-background-md overlay overlay-color-dark overlay-show overlay-op-10 mt-0" data-video-path="video/memory-of-a-woman.mp4" data-plugin-video-background data-plugin-options="{'posterType': 'jpg', 'position': '50% 50%'}">
|
|
||||||
<div class="container">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-12 align-self-center p-static order-2 text-center">
|
|
||||||
<h1>Background <strong>Video</strong></h1>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-12 align-self-center order-1">
|
|
||||||
<ul class="breadcrumb breadcrumb-light d-block text-center">
|
|
||||||
<li><a href="#">Home</a></li>
|
|
||||||
<li class="active">Features</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
@ -1,18 +0,0 @@
|
|||||||
<section class="page-header page-header-classic page-header-lg">
|
|
||||||
<div class="container">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col">
|
|
||||||
<ul class="breadcrumb">
|
|
||||||
<li><a href="#">Home</a></li>
|
|
||||||
<li class="active">Features</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col p-static">
|
|
||||||
<h1 data-title-border>Classic Large</h1>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
@ -1,18 +0,0 @@
|
|||||||
<section class="page-header page-header-classic">
|
|
||||||
<div class="container">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col">
|
|
||||||
<ul class="breadcrumb">
|
|
||||||
<li><a href="#">Home</a></li>
|
|
||||||
<li class="active">Features</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col p-static">
|
|
||||||
<h1 data-title-border>Classic Medium</h1>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
@ -1,15 +0,0 @@
|
|||||||
<section class="page-header page-header-classic page-header-sm">
|
|
||||||
<div class="container">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-8 order-2 order-md-1 align-self-center p-static">
|
|
||||||
<h1 data-title-border>Classic Small</h1>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-4 order-1 order-md-2 align-self-center">
|
|
||||||
<ul class="breadcrumb d-block text-md-end">
|
|
||||||
<li><a href="#">Home</a></li>
|
|
||||||
<li class="active">Features</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
@ -1,15 +0,0 @@
|
|||||||
<section class="page-header page-header-modern page-header-md bg-transparent border-top border-bottom">
|
|
||||||
<div class="container">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-6 align-self-center order-2 order-md-1 p-static">
|
|
||||||
<h1 class="text-dark">Extra <strong>Breadcrumb Dark</strong></h1>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-6 align-self-center order-1 text-md-end">
|
|
||||||
<ul class="breadcrumb d-block breadcrumb-block breadcrumb-light mb-2 mb-md-0">
|
|
||||||
<li><a href="#">Home</a></li>
|
|
||||||
<li class="active">Features</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
@ -1,22 +0,0 @@
|
|||||||
<section class="page-header page-header-modern page-header-background page-header-background-md overlay overlay-color-quaternary overlay-show overlay-op-8 mb-0" style="background-image: url(img/page-header/page-header-background.jpg);">
|
|
||||||
<div class="container">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col align-self-center p-static text-center">
|
|
||||||
<h1>Extra <strong>Breadcrumb Outside</strong></h1>
|
|
||||||
<span class="sub-title">This is a subtitle example.</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<section class="page-header bg-color-light border-bottom border-width-2">
|
|
||||||
<div class="container">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col align-self-center p-static">
|
|
||||||
<ul class="breadcrumb d-block">
|
|
||||||
<li><a href="#">Home</a></li>
|
|
||||||
<li class="active">Features</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
@ -1,11 +0,0 @@
|
|||||||
<div class="mouse-hover-split mb-4">
|
|
||||||
<div id="side-left" class="side side-left bg-color-primary">
|
|
||||||
<h2 class="font-weight-semi-bold text-color-light">Porto - Multipurpose Website Template</h2>
|
|
||||||
</div>
|
|
||||||
<div id="side-right" class="side side-right bg-color-grey">
|
|
||||||
<h2 class="font-weight-semi-bold">Porto - Multipurpose Website Template</h2>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Examples -->
|
|
||||||
<script src="js/examples/examples.mouse.hover.split.js"></script>
|
|
||||||
@ -1,31 +0,0 @@
|
|||||||
<section class="page-header page-header-modern page-header-background page-header-background-md py-0 overlay overlay-color-primary overlay-show overlay-op-8" style="background-image: url(img/page-header/page-header-background-2.jpg);">
|
|
||||||
<div class="container">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-sm-5 order-2 order-sm-1 align-self-center p-static">
|
|
||||||
<div class="overflow-hidden">
|
|
||||||
<ul class="breadcrumb breadcrumb-light d-block appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="100">
|
|
||||||
<li><a href="#">Home</a></li>
|
|
||||||
<li class="active">Features</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="overflow-hidden pb-2">
|
|
||||||
<h1 class="text-10 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="300">Introducing the new <strong>Product</strong></h1>
|
|
||||||
</div>
|
|
||||||
<div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="400">
|
|
||||||
<span class="sub-title text-4 mt-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere.</span>
|
|
||||||
</div>
|
|
||||||
<div class="appear-animation d-inline-block" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="400">
|
|
||||||
<a href="#" class="btn btn-modern btn-dark mt-4">Buy Now <i class="fas fa-arrow-right ms-1"></i></a>
|
|
||||||
</div>
|
|
||||||
<div class="appear-animation d-inline-block" data-appear-animation="rotateInUpRight" data-appear-animation-delay="500">
|
|
||||||
<span class="arrow hlt" style="top: 40px;"></span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-sm-7 order-1 order-sm-2 align-items-end justify-content-end d-flex pt-5">
|
|
||||||
<div style="min-height: 350px;" class="overflow-hidden">
|
|
||||||
<img alt="" src="img/custom-header.png" class="img-fluid appear-animation" data-appear-animation="slideInUp" data-appear-animation-delay="600" data-appear-animation-duration="1s">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
@ -1,18 +0,0 @@
|
|||||||
<section class="page-header page-header-modern page-header-background page-header-background-lg overlay overlay-color-dark overlay-show overlay-op-7" style="background-image: url(img/page-header/page-header-background-transparent.jpg);">
|
|
||||||
<div class="container">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-12 align-self-center p-static order-2 text-center">
|
|
||||||
<h1>Extra <strong>Scroll to Content</strong></h1>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-12 align-self-center order-1">
|
|
||||||
<ul class="breadcrumb breadcrumb-light d-block text-center">
|
|
||||||
<li><a href="#">Home</a></li>
|
|
||||||
<li class="active">Features</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="page-header-extra-button text-center">
|
|
||||||
<a href="#main" data-hash data-hash-offset="0" data-hash-offset-lg="100" class="btn btn-primary btn-rounded-icon"><i class="fas fa-arrow-down"></i></a>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
333
resources/views/components/header/header-background.blade.php
Normal file
333
resources/views/components/header/header-background.blade.php
Normal file
@ -0,0 +1,333 @@
|
|||||||
|
@props([
|
||||||
|
/**
|
||||||
|
* =============================================================================
|
||||||
|
* header-background.blade.php — Porto v12
|
||||||
|
* Componente de Header con imagen/patrón/parallax/video + overlay y animaciones
|
||||||
|
* =============================================================================
|
||||||
|
*
|
||||||
|
* ➤ Props principales
|
||||||
|
* - title : string | Título principal (permite HTML).
|
||||||
|
* - subtitle : string | Subtítulo opcional (permite HTML).
|
||||||
|
* - breadcrumbs : array | [ ['name'=>..., 'href|route|params'=>..., 'active'=>bool], ... ]
|
||||||
|
* - align : string | left | center | right (layout de columnas)
|
||||||
|
* - size : string | sm | md | lg (alto del header)
|
||||||
|
* - container : string | container | container-fluid
|
||||||
|
*
|
||||||
|
* ➤ Fondo / Modo
|
||||||
|
* - mode : string | image | fixed | parallax | video | pattern
|
||||||
|
* - bgImage : string | URL (img, patrón o poster de video)
|
||||||
|
* - bgPosition : string | CSS background-position (ej: '50% 50%')
|
||||||
|
* - bgPatternClass : string | Clase extra p/ patrones (opcional)
|
||||||
|
* - parallaxSpeed : float | Velocidad (default 1.2) — sólo mode=parallax
|
||||||
|
* - videoPath : string | Ruta del video — sólo mode=video
|
||||||
|
* - videoPosterType : string | 'jpg' | 'png' (default 'jpg') — mode=video
|
||||||
|
*
|
||||||
|
* ➤ Overlay
|
||||||
|
* - overlayColor : string | primary | secondary | tertiary | quaternary | dark | light
|
||||||
|
* - overlayOpacity : string | '0-10' | '0-9' → se mapea a 'overlay-op-X' (string por compat)
|
||||||
|
* - showOverlay : bool | Mostrar/cargar overlay
|
||||||
|
*
|
||||||
|
* ➤ Tipografía y color
|
||||||
|
* - titleColor : string | auto | primary | secondary | tertiary | quaternary | dark | light | <clases>
|
||||||
|
* - titleSize : string | sm | md | lg
|
||||||
|
* - uppercaseTitle : bool | TRUE = text-uppercase
|
||||||
|
* - breadcrumbLight : bool | fuerza breadcrumb-light
|
||||||
|
*
|
||||||
|
* ➤ Animaciones (Porto appear-animation)
|
||||||
|
* - titleAnimation : ?string | nombre de animación o null
|
||||||
|
* - titleDelay : int | ms
|
||||||
|
* - titleDuration : ?string | ej: '1s'
|
||||||
|
* - subtitleAnimation: ?string | idem
|
||||||
|
* - subtitleDelay : int | ms
|
||||||
|
* - subtitleDuration : ?string
|
||||||
|
* - crumbAnimation : ?string | idem
|
||||||
|
* - crumbDelay : int | ms
|
||||||
|
* - crumbDuration : ?string
|
||||||
|
* - mediaAnimation : ?string | idem
|
||||||
|
* - mediaDelay : int | ms
|
||||||
|
* - mediaDuration : ?string
|
||||||
|
* - overflowTitle : bool | envuelve <h1> en .overflow-hidden
|
||||||
|
* - overflowSubtitle : bool | idem para subtítulo
|
||||||
|
* - overflowBreadcrumb: bool | idem para breadcrumb
|
||||||
|
*
|
||||||
|
* ➤ Slots
|
||||||
|
* - media : Columna derecha (imágenes, mockups, etc.)
|
||||||
|
* - cta : Botones/acciones bajo el título
|
||||||
|
*
|
||||||
|
* ────────────────────────────────────────────────────────────────────────────
|
||||||
|
* USO (ejemplos)
|
||||||
|
* ---------------------------------------------------------------------------
|
||||||
|
* 1) Imagen + overlay
|
||||||
|
* <x-porto::header-background
|
||||||
|
* title="<strong>Servicios</strong>"
|
||||||
|
* subtitle="Soluciones integrales para tu condominio"
|
||||||
|
* :breadcrumbs="[['name'=>'Inicio','href'=>url('/')],['name'=>'Servicios','active'=>true]]"
|
||||||
|
* mode="image"
|
||||||
|
* bgImage="{{ asset('vendor/porto/img/page-header/header.jpg') }}"
|
||||||
|
* overlayColor="primary"
|
||||||
|
* overlayOpacity="8"
|
||||||
|
* titleAnimation="fadeInUpShorter"
|
||||||
|
* crumbAnimation="fadeInUpShorter"
|
||||||
|
* />
|
||||||
|
*
|
||||||
|
* 2) Parallax + media + CTA
|
||||||
|
* <x-porto::header-background
|
||||||
|
* title="Introducing the new <strong>Product</strong>"
|
||||||
|
* :breadcrumbs="[['name'=>'Home','href'=>'/'],['name'=>'Features','active'=>true]]"
|
||||||
|
* mode="parallax"
|
||||||
|
* bgImage="{{ asset('img/page-header/page-header-parallax.jpg') }}"
|
||||||
|
* parallaxSpeed="1.2"
|
||||||
|
* align="left"
|
||||||
|
* >
|
||||||
|
* <x-slot:cta>
|
||||||
|
* <a href="#" class="btn btn-modern btn-dark mt-4">Buy Now <i class="fas fa-arrow-right ms-1"></i></a>
|
||||||
|
* </x-slot:cta>
|
||||||
|
* <x-slot:media>
|
||||||
|
* <img src="{{ asset('img/custom-header.png') }}" class="img-fluid" alt="">
|
||||||
|
* </x-slot:media>
|
||||||
|
* </x-porto::header-background>
|
||||||
|
*
|
||||||
|
* 3) Video de fondo
|
||||||
|
* <x-porto::header-background
|
||||||
|
* title="<strong>Memories</strong>"
|
||||||
|
* mode="video"
|
||||||
|
* videoPath="{{ asset('video/memory-of-a-woman.mp4') }}"
|
||||||
|
* overlayColor="dark"
|
||||||
|
* overlayOpacity="7"
|
||||||
|
* size="lg"
|
||||||
|
* />
|
||||||
|
*/
|
||||||
|
|
||||||
|
// ── Texto y breadcrumbs
|
||||||
|
'title' => '',
|
||||||
|
'subtitle' => '',
|
||||||
|
'breadcrumbs' => [['name' => 'Inicio', 'href' => '/', 'active' => true]],
|
||||||
|
|
||||||
|
// ── Layout
|
||||||
|
'align' => 'center', // left | center | right
|
||||||
|
'size' => 'md', // sm | md | lg
|
||||||
|
'container' => 'container', // container | container-fluid
|
||||||
|
|
||||||
|
// ── Fondo / Modo
|
||||||
|
'mode' => 'image', // image | fixed | parallax | video | pattern
|
||||||
|
'bgImage' => null, // URL
|
||||||
|
'bgPosition' => '50% 50%',
|
||||||
|
'bgPatternClass' => 'page-header-background-pattern',
|
||||||
|
'parallaxSpeed' => 1.2,
|
||||||
|
'videoPath' => null,
|
||||||
|
'videoPosterType' => 'jpg',
|
||||||
|
|
||||||
|
// ── Overlay
|
||||||
|
'overlayColor' => 'dark', // primary|secondary|tertiary|quaternary|dark|light
|
||||||
|
'overlayOpacity' => '7', // '0'..'10' (string por compat con Porto)
|
||||||
|
'showOverlay' => true,
|
||||||
|
|
||||||
|
// ── Tipografía
|
||||||
|
'titleColor' => 'auto', // auto|primary|secondary|tertiary|quaternary|dark|light|<clases>
|
||||||
|
'titleSize' => 'lg', // sm|md|lg (aplica a clase text-*)
|
||||||
|
'uppercaseTitle' => false,
|
||||||
|
'breadcrumbLight' => null, // null => auto; true/false fuerza
|
||||||
|
|
||||||
|
// ── Animaciones
|
||||||
|
'titleAnimation' => null,
|
||||||
|
'titleDelay' => 0,
|
||||||
|
'titleDuration' => null,
|
||||||
|
'subtitleAnimation' => null,
|
||||||
|
'subtitleDelay' => 0,
|
||||||
|
'subtitleDuration' => null,
|
||||||
|
'crumbAnimation' => null,
|
||||||
|
'crumbDelay' => 0,
|
||||||
|
'crumbDuration' => null,
|
||||||
|
'mediaAnimation' => null,
|
||||||
|
'mediaDelay' => 0,
|
||||||
|
'mediaDuration' => null,
|
||||||
|
'overflowTitle' => false,
|
||||||
|
'overflowSubtitle' => false,
|
||||||
|
'overflowBreadcrumb'=> false,
|
||||||
|
])
|
||||||
|
|
||||||
|
@php
|
||||||
|
// ===== Normalizaciones =====
|
||||||
|
$align = in_array($align, ['left','center','right'], true) ? $align : 'center';
|
||||||
|
$sizeMap = ['sm' => 'page-header-sm', 'md' => 'page-header-md', 'lg' => 'page-header-lg'];
|
||||||
|
$sizeClass = $sizeMap[$size] ?? $sizeMap['md'];
|
||||||
|
|
||||||
|
// ===== Clases base del header =====
|
||||||
|
$classes = ['page-header','page-header-modern', $sizeClass];
|
||||||
|
|
||||||
|
// Modo de fondo
|
||||||
|
$hasBackground = in_array($mode, ['image','fixed','parallax','video','pattern'], true);
|
||||||
|
if ($hasBackground) {
|
||||||
|
$classes[] = 'page-header-background';
|
||||||
|
if ($mode === 'pattern') {
|
||||||
|
$classes[] = $bgPatternClass; // ej: page-header-background-pattern
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Overlay
|
||||||
|
$overlayClasses = [];
|
||||||
|
if ($showOverlay) {
|
||||||
|
$overlayClasses = ['overlay', 'overlay-show', "overlay-color-{$overlayColor}", "overlay-op-{$overlayOpacity}"];
|
||||||
|
}
|
||||||
|
|
||||||
|
// Color de título
|
||||||
|
$semanticMap = [
|
||||||
|
'primary' => 'text-color-primary',
|
||||||
|
'secondary' => 'text-color-secondary',
|
||||||
|
'tertiary' => 'text-color-tertiary',
|
||||||
|
'quaternary' => 'text-color-quaternary',
|
||||||
|
'dark' => 'text-dark',
|
||||||
|
'light' => 'text-light',
|
||||||
|
];
|
||||||
|
|
||||||
|
$titleClasses = ['font-weight-bold'];
|
||||||
|
$titleSizeMap = ['sm' => 'text-6', 'md' => 'text-9', 'lg' => 'text-10'];
|
||||||
|
$titleClasses[] = $titleSizeMap[$titleSize] ?? $titleSizeMap['lg'];
|
||||||
|
|
||||||
|
if ($titleColor === 'auto') {
|
||||||
|
// Heurística: si hay overlay dark -> texto claro; si overlay light -> texto oscuro
|
||||||
|
$titleClasses[] = (in_array($overlayColor, ['dark','primary','secondary','tertiary','quaternary'], true)) ? 'text-light' : 'text-dark';
|
||||||
|
} elseif (isset($semanticMap[$titleColor])) {
|
||||||
|
$titleClasses[] = $semanticMap[$titleColor];
|
||||||
|
} elseif (is_string($titleColor) && $titleColor !== '') {
|
||||||
|
$titleClasses[] = $titleColor; // acepta clases crudas
|
||||||
|
}
|
||||||
|
|
||||||
|
if ($uppercaseTitle) $titleClasses[] = 'text-uppercase';
|
||||||
|
|
||||||
|
// Breadcrumbs
|
||||||
|
$ulClasses = ['breadcrumb','d-block'];
|
||||||
|
$ulClasses[] = match ($align) {
|
||||||
|
'left' => 'text-md-start',
|
||||||
|
'right' => 'text-md-end',
|
||||||
|
default => 'text-center',
|
||||||
|
};
|
||||||
|
|
||||||
|
// Breadcrumb light/dark: auto si null
|
||||||
|
if ($breadcrumbLight === null) {
|
||||||
|
$isDarkishOverlay = in_array($overlayColor, ['dark','primary','secondary','tertiary','quaternary'], true);
|
||||||
|
if ($isDarkishOverlay && $showOverlay) $ulClasses[] = 'breadcrumb-light';
|
||||||
|
} elseif ($breadcrumbLight === true) {
|
||||||
|
$ulClasses[] = 'breadcrumb-light';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Columnas
|
||||||
|
$titleCol = 'col-sm-12 col-md-'.($slot('media')->isNotEmpty() ? '5' : '12');
|
||||||
|
$mediaCol = 'col-sm-12 col-md-7 d-flex align-items-end justify-content-end';
|
||||||
|
|
||||||
|
if ($align === 'left') {
|
||||||
|
$titleWrap = 'order-2 order-sm-1 align-self-center p-static';
|
||||||
|
$crumbWrap = 'order-1';
|
||||||
|
} elseif ($align === 'right') {
|
||||||
|
$titleWrap = 'order-2 order-sm-2 align-self-center p-static text-end';
|
||||||
|
$crumbWrap = 'order-1 text-md-start';
|
||||||
|
} else { // center
|
||||||
|
$titleWrap = 'align-self-center p-static order-2 text-center';
|
||||||
|
$crumbWrap = 'order-1';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Helpers de animación -> atributos data-*
|
||||||
|
$animAttrs = function (?string $name, int $delay = 0, ?string $duration = null) {
|
||||||
|
if (!$name) return '';
|
||||||
|
$out = 'appear-animation';
|
||||||
|
$out .= '" data-appear-animation="'.$name.'"';
|
||||||
|
if ($delay > 0) $out .= ' data-appear-animation-delay="'.$delay.'"';
|
||||||
|
if ($duration) $out .= ' data-appear-animation-duration="'.$duration.'"';
|
||||||
|
return $out;
|
||||||
|
};
|
||||||
|
@endphp
|
||||||
|
|
||||||
|
<section class="{{ implode(' ', $classes) }} {{ implode(' ', $overlayClasses) }} mb-0"
|
||||||
|
@if($hasBackground && $mode !== 'parallax' && $mode !== 'video')
|
||||||
|
style="background-image: url('{{ $bgImage }}'); background-position: {{ $bgPosition }};"
|
||||||
|
@endif
|
||||||
|
@if($mode === 'parallax')
|
||||||
|
data-plugin-parallax data-plugin-options='{"speed": {{ $parallaxSpeed }} }' data-image-src="{{ $bgImage }}"
|
||||||
|
@endif
|
||||||
|
@if($mode === 'video' && $videoPath)
|
||||||
|
data-plugin-video-background data-video-path="{{ $videoPath }}" data-plugin-options='{"posterType":"{{ $videoPosterType }}", "position":"{{ $bgPosition }}"}'
|
||||||
|
@endif
|
||||||
|
>
|
||||||
|
<div class="{{ $container }}">
|
||||||
|
<div class="row">
|
||||||
|
{{-- Breadcrumbs fila superior (centrado/izq/der según align) --}}
|
||||||
|
<div class="col-12 align-self-center {{ $crumbWrap }}">
|
||||||
|
@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 class="row">
|
||||||
|
{{-- Columna de título + subtítulo + CTA --}}
|
||||||
|
<div class="{{ $titleCol }} {{ $titleWrap }}">
|
||||||
|
@if($overflowTitle)<div class="overflow-hidden">@endif
|
||||||
|
<h1 class="{{ implode(' ', $titleClasses) }} {{ $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
|
||||||
|
|
||||||
|
@if(!empty($subtitle))
|
||||||
|
@if($overflowSubtitle)<div class="overflow-hidden">@endif
|
||||||
|
<span class="sub-title text-4 mt-2 d-block {{ $subtitleAnimation ? 'appear-animation' : '' }}"
|
||||||
|
@if($subtitleAnimation)
|
||||||
|
data-appear-animation="{{ $subtitleAnimation }}"
|
||||||
|
@if($subtitleDelay) data-appear-animation-delay="{{ $subtitleDelay }}" @endif
|
||||||
|
@if($subtitleDuration) data-appear-animation-duration="{{ $subtitleDuration }}" @endif
|
||||||
|
@endif
|
||||||
|
>{!! $subtitle !!}</span>
|
||||||
|
@if($overflowSubtitle)</div>@endif
|
||||||
|
@endif
|
||||||
|
|
||||||
|
@if(trim($slot('cta')))
|
||||||
|
<div class="mt-3 {{ $mediaAnimation ? '' : '' }}">{{ $slot('cta') }}</div>
|
||||||
|
@endif
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{{-- Columna media opcional --}}
|
||||||
|
@if(trim($slot('media')))
|
||||||
|
<div class="{{ $mediaCol }}">
|
||||||
|
<div class="overflow-hidden" style="min-height: 200px;">
|
||||||
|
<div class="{{ $mediaAnimation ? 'appear-animation' : '' }}"
|
||||||
|
@if($mediaAnimation)
|
||||||
|
data-appear-animation="{{ $mediaAnimation }}"
|
||||||
|
@if($mediaDelay) data-appear-animation-delay="{{ $mediaDelay }}" @endif
|
||||||
|
@if($mediaDuration) data-appear-animation-duration="{{ $mediaDuration }}" @endif
|
||||||
|
@endif
|
||||||
|
>
|
||||||
|
{{ $slot('media') }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
@endif
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
@ -1,40 +0,0 @@
|
|||||||
@props([
|
|
||||||
'title' => '',
|
|
||||||
'breadcrumbs' => [
|
|
||||||
['name' => 'Inicio', 'href' => '/', 'active' => true],
|
|
||||||
],
|
|
||||||
])
|
|
||||||
|
|
||||||
<section class="page-header page-header-modern bg-color-grey page-header-lg m-0">
|
|
||||||
<div class="container">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-8 order-2 order-md-1 align-self-center p-static">
|
|
||||||
<h1 class="text-dark">{!! $title !!}</h1>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-4 order-1 order-md-2 align-self-center">
|
|
||||||
<ul class="breadcrumb d-block text-md-end">
|
|
||||||
@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="breadcrumb-item {{ $active ? 'active' : '' }}" @if($active) aria-current="page" @endif>
|
|
||||||
@if (!$active && $url)
|
|
||||||
<a href="{{ $url }}">{{ $name }}</a>
|
|
||||||
@else
|
|
||||||
<span>{{ $name }}</span>
|
|
||||||
@endif
|
|
||||||
</li>
|
|
||||||
@endforeach
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
@ -1,15 +0,0 @@
|
|||||||
<section class="page-header page-header-modern bg-color-grey page-header-sm">
|
|
||||||
<div class="container">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-8 order-2 order-md-1 align-self-center p-static">
|
|
||||||
<h1 class="text-dark">Modern <strong>Small</strong></h1>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-4 order-1 order-md-2 align-self-center">
|
|
||||||
<ul class="breadcrumb d-block text-md-end">
|
|
||||||
<li><a href="#">Home</a></li>
|
|
||||||
<li class="active">Features</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
@ -1,15 +0,0 @@
|
|||||||
<section class="page-header page-header-modern bg-color-grey page-header-md">
|
|
||||||
<div class="container">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-8 order-2 order-md-1 align-self-center p-static">
|
|
||||||
<h1 class="text-dark">Modern <strong>Medium</strong></h1>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-4 order-1 order-md-2 align-self-center">
|
|
||||||
<ul class="breadcrumb d-block text-md-end">
|
|
||||||
<li><a href="#">Home</a></li>
|
|
||||||
<li class="active">Features</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
@ -1,15 +0,0 @@
|
|||||||
<section class="page-header page-header-modern bg-color-grey page-header-lg">
|
|
||||||
<div class="container">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-12 align-self-center p-static order-2 text-center">
|
|
||||||
<h1 class="font-weight-bold text-dark">Page Headers Overview</h1>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-12 align-self-center order-1">
|
|
||||||
<ul class="breadcrumb d-block text-center">
|
|
||||||
<li><a href="#">Home</a></li>
|
|
||||||
<li class="active">Features</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
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>
|
||||||
@ -1,189 +0,0 @@
|
|||||||
@props([
|
|
||||||
'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,
|
|
||||||
|
|
||||||
// ====== Tipografía
|
|
||||||
'titileSize' => 'md', // sm | md | lg (mantengo el typo para compat)
|
|
||||||
'breadcrumbSize' => 'md', // sm | md | lg
|
|
||||||
'uppercase' => false,
|
|
||||||
'textDark' => false,
|
|
||||||
// NUEVO: color semántico para el <h1>
|
|
||||||
// auto => deduce según fondo (light/grey -> dark, otros -> light)
|
|
||||||
// semantic => text-color-{primary|secondary|tertiary|quaternary}
|
|
||||||
// raw class => cualquier clase CSS (ej: 'text-dark', 'text-9 text-color-secondary')
|
|
||||||
'titleColor' => 'auto', // auto | primary | secondary | tertiary | quaternary | dark | light | <raw class>
|
|
||||||
|
|
||||||
// ====== Animaciones (Porto appear-animation)
|
|
||||||
// Ejemplos: fadeInRightShorter, fadeInLeftShorter, fadeInUpShorter, slideInUp, rotateInUpRight
|
|
||||||
'titleAnimation' => null, // string|null
|
|
||||||
'titleDelay' => 0, // ms
|
|
||||||
'titleDuration' => null, // ej: '1s'
|
|
||||||
'crumbAnimation' => null, // string|null
|
|
||||||
'crumbDelay' => 0, // ms
|
|
||||||
'crumbDuration' => null,
|
|
||||||
'overflowTitle' => false, // envuelve <h1> en .overflow-hidden para reveals más limpios
|
|
||||||
'overflowBreadcrumb'=> false, // idem para breadcrumb
|
|
||||||
|
|
||||||
// ====== Extra
|
|
||||||
'customHeader' => false, // mantiene compat
|
|
||||||
])
|
|
||||||
|
|
||||||
@php
|
|
||||||
// ---- Normalización color de fondo
|
|
||||||
$allowedColors = ['light','grey','gray','dark','primary','secondary','tertiary','quaternary'];
|
|
||||||
if ($color === 'gray') { $color = 'grey'; }
|
|
||||||
$color = in_array($color, $allowedColors, true) ? $color : 'grey';
|
|
||||||
|
|
||||||
// ---- Alineación
|
|
||||||
$align = in_array($align, ['left','center','right'], true) ? $align : 'center';
|
|
||||||
|
|
||||||
// ---- Tamaños
|
|
||||||
$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: tamaño
|
|
||||||
$h1SizeMap = ['sm' => 'text-6', 'md' => '', 'lg' => 'text-10'];
|
|
||||||
$h1Class = '';
|
|
||||||
|
|
||||||
// ---- H1: color semántico
|
|
||||||
$titleColorClass = '';
|
|
||||||
$semanticMap = [
|
|
||||||
'primary' => 'text-color-primary',
|
|
||||||
'secondary' => 'text-color-secondary',
|
|
||||||
'tertiary' => 'text-color-tertiary',
|
|
||||||
'quaternary' => 'text-color-quaternary',
|
|
||||||
'dark' => 'text-dark',
|
|
||||||
'light' => 'text-light',
|
|
||||||
];
|
|
||||||
|
|
||||||
if ($titleColor === 'auto') {
|
|
||||||
// auto: si el fondo es claro, texto oscuro; si es oscuro/brand, texto claro
|
|
||||||
$titleColorClass = in_array($color, ['light','grey']) || $textDark ? 'text-dark' : 'text-light';
|
|
||||||
} elseif (isset($semanticMap[$titleColor])) {
|
|
||||||
$titleColorClass = $semanticMap[$titleColor];
|
|
||||||
} elseif (is_string($titleColor) && $titleColor !== '') {
|
|
||||||
// raw class
|
|
||||||
$titleColorClass = $titleColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
// fallback por compatibilidad: texto oscuro si se especificó textDark
|
|
||||||
if ($textDark && $titleColorClass === '') {
|
|
||||||
$titleColorClass = 'text-dark';
|
|
||||||
}
|
|
||||||
|
|
||||||
// compone clases H1
|
|
||||||
$h1Class .= $titleColorClass ? ($titleColorClass.' ') : '';
|
|
||||||
$h1Class .= $h1SizeMap[$titileSize] ?? $h1SizeMap['md'];
|
|
||||||
$h1Class .= $uppercase ? ' text-uppercase' : '';
|
|
||||||
|
|
||||||
// ---- Breadcrumbs
|
|
||||||
$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 => '',
|
|
||||||
};
|
|
||||||
if (!in_array($color, ['light','grey']) && $textDark === false) $ulClasses[] = 'breadcrumb-light';
|
|
||||||
|
|
||||||
// ---- 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';
|
|
||||||
|
|
||||||
// ---- Helpers animación: devuelve atributos data-* si hay animación
|
|
||||||
$animAttrs = function (?string $name, int $delay = 0, ?string $duration = null) {
|
|
||||||
if (!$name) return '';
|
|
||||||
$attrs = 'appear-animation';
|
|
||||||
$attrs .= "\" data-appear-animation=\"{$name}\"";
|
|
||||||
if ($delay > 0) { $attrs .= " data-appear-animation-delay=\"{$delay}\""; }
|
|
||||||
if ($duration) { $attrs .= " data-appear-animation-duration=\"{$duration}\""; }
|
|
||||||
return $attrs;
|
|
||||||
};
|
|
||||||
@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="font-weight-bold {{ $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