<x-progress.status>success</x-progress.status>

Варианты: success, warning, error

<x-progress.progress progressWidth="30" id="test" class="test"></x-progress.progress>


- progressWidth - обязательный параметр

- class, id, style - не обязательные параметры

 

<form action="/your-ajax-url" class="fx-form">
    <x-inputs.input name="text" placeholder="Enter your text">Text</x-inputs.input>
    <x-inputs.input id="emailTest" name="email" placeholder="Enter your email">Email</x-inputs.input>
    <x-inputs.input type="password" id="emailTest" name="pass" placeholder="Enter your Password">Password</x-inputs.input>

    <div class="d-flex w-100 align-items-center mb-3">
        <x-checkbox.checkbox name="test3">Test</x-checkbox.checkbox>
        <x-toggler.toggler name="test4" id="toggle" value="test">toggle</x-toggler.toggler>
    </div>
     <div class="fx-success-message">
        <h1 class="replace-message">этот текст будет изменен с помощью Ajax запроса!</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, praesentium.</p>
    </div>
    <div class="w-100">
        <x-buttons.button type="submit" role="button">Отправить!</x-buttons.button>
    </div>
</form>



При отправке формы в случае валидности данных все элементы

формы будут заменены содержимым елемента div.fx-success-message,

если такой элемент находится в форме.

В случае не валидных данных, открывается сообщение об ошибке.

- class="fx-success-message" - кастомный текст который будет показан после запроса

- class="replace-message" - этот текст будет изменен с помощью Ajax запроса

 

<div class="text-center mx-auto mb-5">
    <span class="material-icons fx-icon-error">sentiment_very_dissatisfied</span>
    <h2>Приложение не активировано</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet dignissimos eos quis sed temporibus? Adipisci consequatur ipsam odio unde voluptates. Alias, corporis eum fugiat impedit quam voluptate voluptates. A aliquid, aspernatur autem eaque explicabo laborum nobis quam ullam veritatis vero?</p>
    <x-buttons.button id="test" class="test" style="" href="#" role="button" type="">Продлить</x-buttons.button>
</div>


Изменить иконку можно добавляя следующие параметры тегу span.material-icons:

- class="fx-icon-error" - цвет иконки error

- sentiment_very_dissatisfied - текст для иконки error

- class="fx-icon-success" - цвет иконки success

- sentiment_satisfied_alt - текст для иконки success