Cabecera Oferta - Bsale-IO/template-docs GitHub Wiki

Componente Inicio > oferta cabecera

Configuración valor
show true se muestra
false no se muestra
animated true se habilita movimiento
false se desactiva movimiento
icon_color ##### código color
animation_speed ##### velocidad movimiento
texto ##### Texto del mensaje de la alerta
icon_class ##### clase del font awesome 
<!-- Configuración de parámetros -->
{% assign show = true %} <!-- Variable para controlar la visibilidad del texto -->
{% assign animated = false %} <!-- Habilitar/deshabilitar animación -->
{% assign icon_color = "white" %} <!-- Color del ícono -->
{% assign animation_speed = 12 %} <!-- Velocidad de la animación (en segundos) -->
{% assign texto = "¡Compra online y retira en cualquiera de nuestras sucursales!" %} <!-- Texto a mostrar -->
{% assign icon_class = "store" %} <!-- Ícono a usar -->
<!-- Opciones de íconos disponibles: 
     * truck (camión)
     * gift (regalo)
     * exclamation-circle (exclamación en círculo)
     * fire (fuego)
     * store (tienda) -->

{% if show %}
    <!-- Contenedor de la alerta -->
    <div class="m-0 rounded-0 text-center alert alert-primary alert-dismissible fade show overflow-hidden" role="alert">
        
        <!-- Contenido de la alerta -->
        <div class="alert-content {% if animated %}animated{% endif %}" style="--animation-speed: {{ animation_speed }}s;">
            <i class="fas fa-{{ icon_class }}" style="color:{{ icon_color }}; margin-right: 8px;"></i>
            <span class="alert-text">{{ texto }}</span>
        </div>
        
        <!-- Botón para cerrar la alerta -->
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
{% endif %}

css

/****************
Oferta cabecera
*******************/
.alert-content {
    display: inline-flex;
    align-items: center;
    white-space: pre-wrap; /* Por defecto */
}

.alert-content.animated {
    white-space: nowrap; /* Cuando tiene animación */
}

.alert {
    color: var(--primary-contrast);
    background: var(--primary-color);
    border-color: var(--primary-color);
    padding: 4px 16px; 
    position: relative;
    display: flex;
    align-items: center; 
    justify-content: center; 
    white-space: nowrap;
}
.alert-dismissible .close {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    padding: 0rem 1.25rem;
    color: inherit;
}
.animated {
    animation: marquee var(--animation-speed) linear infinite;
}
.animated:hover {
    animation-play-state: paused;
}
@keyframes marquee {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(-100%);
    }
}

Llamado del componente

El componente esta insertado en la Plantilla Inicio

<!DOCTYPE HTML>
<html>
    <head>
        {{'head'| get_component }}
    </head>
    <body>
        {{ 'body' | get_component }}
        {{ 'Inicio > oferta cabecera' | get_component }} <!-- acá esta el componente -->
        {{ 'Cabecera'| get_component }}
        <main class="bs-main">
            {{ 'Inicio' | get_component }}
        </main>
        {{ 'Pie de pagina'| get_component }}
    </body>
</html>
⚠️ **GitHub.com Fallback** ⚠️