Alert

Der Alert zeigt relevante Hinweise innerhalb des Contents an.GitHub

Overview

Develop

Beispiel

import {
  Alert,
  Heading,
} from "@mittwald/flow-react-components";

<Alert>
  <Heading>E-Mail-Adresse wurde archiviert</Heading>
</Alert>

Mit Inhalt

import {
  Alert,
  Button,
  Content,
  Heading,
} from "@mittwald/flow-react-components";

<Alert>
  <Heading>E-Mail-Adresse wurde archiviert</Heading>
  <Content>
    Da deine Domain gelöscht wurde, wurde diese
    E-Mail-Adresse archiviert. Um E-Mails empfangen und
    senden zu können musst du die Adresse wieder umbenennen.
    <Button>E-Mail-Adresse anpassen</Button>
  </Content>
</Alert>

Status

import {
  Alert,
  Content,
  Heading,
} from "@mittwald/flow-react-components";

<Row>
  <Alert status="info">
    <Heading>E-Mail-Adresse wurde archiviert</Heading>
    <Content>
      Da deine Domain gelöscht wurde, wurde diese
      E-Mail-Adresse archiviert. Um E-Mails empfangen und
      senden zu können musst du die Adresse wieder
      umbenennen.
    </Content>
  </Alert>

  <Alert status="warning">
    <Heading>Dein Speicher ist fast voll</Heading>
    <Content>
      Dein Speicher ist zu über 80% belegt. Wir empfehlen
      dir deinen Speicherplatz zu erweitern, um Problemen
      vorzubeugen.
    </Content>
  </Alert>

  <Alert status="danger">
    <Heading>
      Es konnte kein SSL-Zertifikat ausgestellt werden
    </Heading>
    <Content>
      Für diese Domain konnte kein SSL-Zertifikat
      ausgestellt werden, da die Domain per IP nicht auf
      deine Server-IP zeigt.
    </Content>
  </Alert>

  <Alert status="success">
    <Heading>Deine App wurde aktualisiert</Heading>
    <Content>
      Deine App wurde erfolgreich auf die neueste Version
      aktualisiert.
    </Content>
  </Alert>
</Row>

Properties

Property	Type	Default	Description
`ref`	Ref<HTMLElement>	-	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see React Docs
`key`	Key	-
`defaultChecked`	boolean	-
`defaultValue`	string \| number \| readonly string[]	-
`suppressContentEditableWarning`	boolean	-
`suppressHydrationWarning`	boolean	-
`accessKey`	string	-
`autoCapitalize`	"none" \| (string & {}) \| "off" \| "on" \| "sentences" \| "words" \| "characters"	-
`autoFocus`	boolean	-
`className`	string	-
`contentEditable`	Booleanish \| "inherit" \| "plaintext-only"	-
`contextMenu`	string	-
`dir`	string	-
`draggable`	Booleanish	-
`enterKeyHint`	"search" \| "enter" \| "done" \| "go" \| "next" \| "previous" \| "send"	-
`hidden`	boolean	-
`id`	string	-
`lang`	string	-
`nonce`	string	-
`slot`	string	-
`spellCheck`	Booleanish	-
`style`	CSSProperties	-
`tabIndex`	number	-
`title`	string	-
`translate`	"yes" \| "no"	-
`radioGroup`	string	-
`role`	AriaRole	-
`about`	string	-
`content`	string	-
`datatype`	string	-
`inlist`	any	-
`prefix`	string	-
`property`	string	-
`rel`	string	-
`resource`	string	-
`rev`	string	-
`typeof`	string	-
`vocab`	string	-
`autoCorrect`	string	-
`autoSave`	string	-
`color`	string	-
`itemProp`	string	-
`itemScope`	boolean	-
`itemType`	string	-
`itemID`	string	-
`itemRef`	string	-
`results`	number	-
`security`	string	-
`unselectable`	"off" \| "on"	-
`popover`	"" \| "auto" \| "manual"	-
`popoverTargetAction`	"toggle" \| "show" \| "hide"	-
`popoverTarget`	string	-
`inert`	boolean	-	@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert
`inputMode`	"search" \| "text" \| "none" \| "tel" \| "url" \| "email" \| "numeric" \| "decimal"	-	Hints at the type of data that might be entered by the user while editing the element or its contents @see https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute
`is`	string	-	Specify that a standard HTML element should behave like a defined custom built-in element @see https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is
`children`	ReactNode	-
`dangerouslySetInnerHTML`	{ __html: string \| TrustedHTML; }	-
`status`	Status	-	The elements status
`wrapWith`	ReactElement<unknown, string \| JSXElementConstructor<any>>	-

Feedback geben

Components

Alert

Beispiel

Mit Inhalt

Status

Properties

Events

Accessibility