Cree alertas y avisos elegantes usando Pure CSS-alerts. CSS

Vista prévia

Descripción

Alerts. CSS es un componente de alertas de solo CSS que le ayuda a crear alertas y avisos elegantes, responsivos y descartables con iconos personalizados, posición, colores y tamaños.

Funcionamiento

Instalar & descargar.

# Yarn
$ yarn add @gustavoquinalha/alerts-css

# NPM
$ npm install @gustavoquinalha/alerts-css --save

Inserte la hoja de estilos ' Alerts-CSS. min. css ' en el documento.

<link rel="stylesheet" href="/path/to/alerts-css.min.css">

Cargue el JavaScript ' Alerts-CSS. min. js ' para la animación Fade & funcionalidad desdeñable.

<script src="/path/to/alerts.min.js"></script>

Cargue la Font awesome (o cualquier otra biblioteca de fuentes icónica) para los iconos de alerta.

<link rel="stylesheet"



href="https://use.fontawesome.com/releases/v5.0.10/css/all.css"



integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg"



crossorigin="anonymous">

Cree un cuadro de alerta básico en la Página Web.

<div class="alert" style="animation-delay: .2s">

<div class="alert--icon">


<i class="fas fa-bell"></i>

</div>

<div class="alert--content">


Alert Content

</div>

<div class="alert--close">


<i class="far fa-times-circle"></i>

</div>
</div>

Ajuste el tamaño del cuadro de alerta con las siguientes clases:

• alert_sm: tamaño pequeño
• alert_lg: gran tamaño

<div class="alert alert_sm" style="animation-delay: .1s">

<div class="alert--icon">


<i class="fas fa-bell"></i>

</div>

<div class="alert--content">


Small Alert

</div>

<div class="alert--close">


<i class="far fa-times-circle"></i>

</div>
</div>

<div class="alert alert_lg" style="animation-delay: .3s">

<div class="alert--icon">


<i class="fas fa-bell"></i>

</div>

<div class="alert--content">


Large Alert

</div>

<div class="alert--close">


<i class="far fa-times-circle"></i>

</div>
</div>

La biblioteca también viene con 5 temas de los que puede elegir para su aplicación web:

• alert_success
• alert_info
• alert_danger
• alert_warning
• alert_dark

<div class="alert alert_success">

<div class="alert--icon">


<i class="fas fa-check-circle"></i>

</div>

<div class="alert--content">


Success Alert

</div>

<div class="alert--close">


<i class="far fa-times-circle"></i>

</div>
</div>

También puede crear alertas y avisos pegajosos que siempre se mostrarán en la pantalla y opcionalmente descartar después de un cierto tiempo de espera.

<div class="fixed-alerts fixed-alerts_top fixed-alerts_left">











<div class="alert alert_info alert_none alert-fade" id="alert-top-left" data-fade-time="3">


<div class="alert--icon">



<i class="fas fa-check-circle"></i>


</div>


<div class="alert--content">



Sticky Alert


</div>


<div class="alert--close">



<i class="far fa-times-circle"></i>


</div>

</div>


</div>