mirror of
https://github.com/tabler/tabler.git
synced 2026-08-29 13:21:29 +04:00
111 lines
3.7 KiB
Plaintext
111 lines
3.7 KiB
Plaintext
---
|
|
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
|
import Alert from '@ui/Alert.astro';
|
|
import Card from '@ui/Card.astro';
|
|
import CardBody from '@ui/CardBody.astro';
|
|
import CardTitle from '@ui/CardTitle.astro';
|
|
---
|
|
|
|
<DefaultLayout title="Alerts" pageHeader="Alerts" pageMenu="base.alerts">
|
|
<div class="row row-cards">
|
|
<div class="col-lg-6">
|
|
<Card>
|
|
<CardBody>
|
|
<CardTitle as="h2">Basic alerts</CardTitle>
|
|
<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!" />
|
|
</CardBody>
|
|
</Card>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<Card>
|
|
<CardBody>
|
|
<CardTitle as="h2">Alerts with action</CardTitle>
|
|
<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!" />
|
|
</CardBody>
|
|
</Card>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<Card>
|
|
<CardBody>
|
|
<CardTitle as="h2">Dismissible alerts</CardTitle>
|
|
<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!" />
|
|
</CardBody>
|
|
</Card>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<Card>
|
|
<CardBody>
|
|
<CardTitle as="h2">Alert with a description</CardTitle>
|
|
<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."
|
|
/>
|
|
</CardBody>
|
|
</Card>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<Card>
|
|
<CardBody>
|
|
<CardTitle as="h2">Important alerts</CardTitle>
|
|
<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." />
|
|
</CardBody>
|
|
</Card>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<Card>
|
|
<CardBody>
|
|
<CardTitle as="h2">Minor alerts</CardTitle>
|
|
<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." />
|
|
</CardBody>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</DefaultLayout>
|