Axentix : new framework version ! (toasts, dropdowns and more)
Tags: axentix, css, javascript, webdev
Published: 2020-01-03 16:42:47

Hello and happy new year everyone !

For those who don't know Axentix, it is a front end framework which was launched during the beginning of October 2019.

[Axentix](https://useaxentix.com/) started the year with a new release (0.4.0). 
I'm gonna show you the new main components of this release, and how they work.

## Toasts

The [toasts](https://useaxentix.com/docs/components/toast) are a useful component to display notifications to the users of your website.
Our toast version allows you to custom a lot of things. 
You can :
 - Choose here they are placed (on the left or the right of the screen)
 - Specify if they are going to the top or bottom of the screen, which changes their animation direction
 - Specify their place on mobile view
 - Change their animation and display duration

You can try them on the [toast page](https://useaxentix.com/docs/components/toast), and see their animation by clicking on the test buttons.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/odag6osmq9tafaoiulvm.gif)

[These examples](https://useaxentix.com/docs/components/toast#change-toast-content) are showing you how to change the style and the content of your toast.

## Dropdowns

[Dropdows](https://useaxentix.com/docs/components/dropdown) are made to create a simple submenu. This component is commonly used inside a navbar, but can be used anywhere in a website.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/r797b4xb6p3d4zvx07x3.gif)

They are pretty easy to use. You have to create a <code>.dropdown</code> container, and put your <code>.dropdown-trigger</code> button inside of it, which is triggering the <code>.dropdown-content</code>.

```html
<div class="dropdown" id="example-dropdown">
  <button type="button" class="btn primary dropdown-trigger">
    Toggle
  </button>
  <div class="dropdown-content white">
    <a class="dropdown-item" href="#">This is the first item</a>
    <a class="dropdown-item" href="#">Item 2</a>
    <a class="dropdown-item active" href="#">Item 3</a>
  </div>
</div>
```
You can initialize the dropdown like this :
```js
var exampleDropdown = new Dropdown('#example-dropdown');
```
This is a way to initialize it, but you can use any of the three ways to initialize, as explained on [the past article](https://dev.to/axentix/axentix-new-front-end-framework-based-on-css-grid-34ab) we have made.

## Loadings

We have made different "preloaders", to show the users of your website something is loading.

You can use the [progress bars](https://useaxentix.com/docs/components/loading#progress-bars) and the [spinners](https://useaxentix.com/docs/components/loading#spinners) :

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/cwxusx4224sw4n4shn0z.PNG)
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/gam6h01tx7086x4tp5t2.gif)

These two types of preloaders are working with our [color palette](https://useaxentix.com/docs/general/colors#color-palette), so you can choose any of these colors.

There is another loader which is really interesting. It is the "rainbow spinner". You can change his colors by using the source files.
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/v52qg4fq0gqz0ucx676e.gif)

Some other features like the pagination and helper classes have been made too.
You can find everything on the [Website](https://useaxentix.com/).

Have a great day, a happy new year again, and feel free to send us some feedback !