Alerts

Download

You can fetch Trowel Alerts with npm, yarn or bower.

# With bower
$ bower install --save trowel-alerts

# With npm
$ npm install --save trowel-alerts

# With yarn
$ yarn add trowel-alerts

You can also download a zip archive right here.

Installation

Scss

The main scss file to include to your main .scss file is located at the ./src/scss/alerts.scss. As a Trowel Component, it also requires two dependencies to compile the scss code. Here an scss installation snippet.

// Trowel core (need to be imported first)
@import './path/to/dependencies/trowel-core/src/trowel';

// Trowel Alerts
@import './path/to/dependencies/trowel-alerts/src/scss/alerts';

JavaScript

You have several javascript files for different use cases :

• The browser ready file is available at ./dest/javascript/alerts.js (a minified version exists at dest/javascript/alerts.min.js)
• The script written in es2015 and ready to import is available at ./src/javascript/alerts.js

Twig template

The twig template ready to be include or embed is located at ./src/twig/alert.html.twig.

Usage

<div class="alert alert--primary" role="alert">
  ...
</div>

Themes

By default, you have access to four alert themes. You can of course, totally change thoses themes, delete or add some, through trowel variables.

<div class="alert alert--primary" role="alert">
  ...
</div>

<div class="alert alert--success" role="alert">
  ...
</div>

<div class="alert alert--warning" role="alert">
  ...
</div>

<div class="alert alert--danger" role="alert">
  ...
</div>

Sizes

You also, by default, have access to 4 sizes :

<div class="alert alert--primary alert--xs" role="alert">
  ...
</div>

<div class="alert alert--primary alert--sm" role="alert">
  ...
</div>

<div class="alert alert--primary" role="alert">
  ...
</div>

<div class="alert alert--primary alert--lg" role="alert">
  ...
</div>

Auto-delete

You can add a button following the markup below. When the user click on this button, it will delete the alert.

<div class="alert alert--primary" role="alert">
  <button class="alert__times" data-alert="times">&times;</button>

  ...
</div>

In order to make it work you need to setup some javascript. You have two ways to make it work :

Javascript usage into html

<script src="./path/to/trowel-alerts/javascript/alerts.js"></script>

<script type="text/javascript">
  var alerts = new TrowelAlerts(document.querySelectorAll('.alert'));
</script>

Javascript usage with an import

import TrowelAlerts from './path/to/trowel-alerts/src/javascript/alerts';

const alerts = new TrowelAlerts(document.querySelectorAll('.alert'));

Twig usage

Instead of writing html, you can embed the twig template :

{% embed 'path/to/trowel-alerts/src/twig/alert.html.twig' with {
  'modifiers': ['primary'],
} %}
  {% block body %}lorem ipsum...{% endblock %}
{% endembed %}

If you want to add some modifiers on the block selector (.breadcrumb), you can set the array modifiers with as many modifiers as you need :

{% embed 'path/to/trowel-alerts/src/twig/alert.html.twig' with {
  'modifiers': ['primary', 'xs'],
} %}
  {% block body %}lorem ipsum...{% endblock %}
{% endembed %}

To add the times button just set as true times

{% embed 'path/to/trowel-alerts/src/twig/alert.html.twig' with {
  'times': true,
} %}
  {% block body %}lorem ipsum...{% endblock %}
{% endembed %}

Sass reference

Syntax variables

You can override the global syntax config for a specific component with the following variables

Enables

You can avoid the generation of some css with the following variables

Component variables