preview/pages/alerts.astro - dev - githubmirror/tabler

preview/pages/alerts.astro
78 строк4 KB
Paweł Kuna
Add quality gates: Prettier for Astro, astro check for shared, unused SCSS variable lint (#2749)
03 авг 2026, 01:47
03 авг 2026, 01:478962710
---
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>