Alert
Playground
Props
| Property | Type | Default value | Accepted values | Description |
|---|---|---|---|---|
| variant | String | null | ‘danger’, ‘warning’, ‘success’ | Alert variant |
| tagName | String | div | Any vaild HTML | the tag used as wrapper |
Classes related props
| Property | Description |
|---|---|
| baseClass | Base alert class (never changes) |
| defaultClass | Classes for the default alert variant |
| successClass | Classes for the success alert variant |
| dangerClass | Classes for the danger alert variant |
| warningClass | Classes for the warning alert variant |
Default theme settings
<<< @/src/themes/default/TAlert.js
- Remember that in order to change the default settings you can change default theme or use the props:
<t-alert base-class="border px-4 py-3 rounded relative" danger-class="bg-red-100 border-red-400 text-red-700" variant="danger" show > <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem possimus nihil minus rerum aperiam, quidem, reprehenderit! Atque, facere inventore nam suscipit, excepturi nesciunt incidunt, explicabo error molestiae iure optio enim.</p> </t-alert>
The result:
Error: Are you sure do you want to keep using Bootstrap?