mirror of
https://github.com/tabler/tabler.git
synced 2026-08-07 20:02:23 +04:00
Paweł Kuna
109 lines
3.7 KiB
Plaintext
109 lines
3.7 KiB
Plaintext
---
|
|
// Port of preview/pages/alerts.html (layout: default)
|
|
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
|
import Alert from '@shared/components/Alert.astro';
|
|
---
|
|
|
|
<DefaultLayout title="Alerts" pageHeader="Alerts" pageMenu="base.alerts">
|
|
<div class="row row-cards">
|
|
<div class="col-lg-6">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h2 class="card-title">Basic alerts</h2>
|
|
<Alert type="danger" title="An error occurred!" />
|
|
<Alert type="warning" title="Some information is missing!" />
|
|
<Alert type="success" title="Completed successfully!" />
|
|
<Alert type="info" title="Just a quick note!" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h2 class="card-title">Alerts with action</h2>
|
|
<Alert showClose action="Link" type="danger" title="An error occurred!" />
|
|
<Alert showClose action="Link" type="warning" title="Some information is missing!" />
|
|
<Alert showClose action="Link" type="success" title="Completed successfully!" />
|
|
<Alert showClose action="Link" type="info" title="Just a quick note!" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h2 class="card-title">Dismissible alerts</h2>
|
|
<Alert showClose type="danger" title="An error occurred!" />
|
|
<Alert showClose type="warning" title="Some information is missing!" />
|
|
<Alert showClose type="success" title="Completed successfully!" />
|
|
<Alert showClose type="info" title="Just a quick note!" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h2 class="card-title">Alert with a description</h2>
|
|
<Alert
|
|
showClose
|
|
type="danger"
|
|
title="Password does not meet requirements:"
|
|
list="Minimum 8 characters,Include a special character"
|
|
/>
|
|
<Alert
|
|
showClose
|
|
type="warning"
|
|
title="Some information is missing!"
|
|
description="This is a custom alert box with a description."
|
|
/>
|
|
<Alert
|
|
showClose
|
|
type="success"
|
|
title="Completed successfully!"
|
|
description="This is a custom alert box with a description."
|
|
/>
|
|
<Alert
|
|
showClose
|
|
type="info"
|
|
title="Just a quick note!"
|
|
description="This is a custom alert box with a description."
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h2 class="card-title">Important alerts</h2>
|
|
<Alert
|
|
showClose
|
|
important
|
|
type="danger"
|
|
title="Password does not meet requirements:"
|
|
list="Minimum 8 characters,Include a special character"
|
|
/>
|
|
<Alert showClose important type="success" description="This is a custom alert box with a description." />
|
|
<Alert showClose important type="warning" description="This is a custom alert box with a description." />
|
|
<Alert showClose important type="info" description="This is a custom alert box with a description." />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h2 class="card-title">Minor alerts</h2>
|
|
<Alert
|
|
showClose
|
|
minor
|
|
type="danger"
|
|
title="Password does not meet requirements:"
|
|
list="Minimum 8 characters,Include a special character"
|
|
/>
|
|
<Alert showClose minor type="success" description="This is a custom alert box with a description." />
|
|
<Alert showClose minor type="warning" description="This is a custom alert box with a description." />
|
|
<Alert showClose minor type="info" description="This is a custom alert box with a description." />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</DefaultLayout>
|