limestone/Alert

Limestone styled modal Alert components.

Import Usage

import Alert from '@enact/limestone/Alert';

Members

Alert   Component

A modal Alert component, ready to use in Limestone applications.

Alert may be used to interrupt a workflow to receive feedback from the user. The dialog consists of a title, a message, and an area for additional limestone/Alertlimestone/Alert.Alert.buttons.

Usage:

<Alert
  open={this.state.open}
  title="An Important Alert"
>
  <image>
    <AlertImage src={this.state.src} type="thumbnail" />
  </image>

  Body text for alert. Components may also be used here for greater customizability.

  <buttons>
    <Button>Button 1</Button>
    <Button>Button 2</Button>
  </buttons>
</Alert>

Import Usage

import Alert from '@enact/limestone/Alert';

Extends: limestone/Alertlimestone/Alert.AlertBase
Wrapped with: ui/Slottableui/Slottable.Slottable

AlertBase   Component

A modal Alert component.

This component is most often not used directly but may be composed within another component as it is within limestone/Alertlimestone/Alert.Alert.

Import Usage

import {AlertBase} from '@enact/limestone/Alert';

Properties

buttonDirection

'auto''horizontal''vertical'

Sets the buttons layout direction.

In auto mode, button direction follows UX defaults:

• overlay - horizontal when there are exactly 2 buttons

• fullscreen - horizontal when there are less than 3 buttons

• otherwise vertical

Default: 'auto'

---

buttons

ElementArray(Element)

Buttons to be included under the component.

Typically, up to 3 buttons are used.

---

children

Node

The contents of the body of the component.

Only shown when type="overlay". If children is text-only, it will be wrapped with limestone/BodyTextlimestone/BodyText.

---

css

Object

Customizes the component by mapping the supplied collection of CSS class names to the corresponding internal elements and states of this component.

The following classes are supported:

• alert - The root class name

• content - The content component class

• fullscreen - Applied to a type='fullscreen' alert

• overlay - Applied to a type='overlay' alert

• title - The title component class

---

image

Element

Image to be included in the Alert component.

It is recommended to use the AlertImage component.

---

onClose

Function

Called when the user requests to close the Alert.

This also includes pressing the cancel key.

---

onHide

Function

Called after the transition to hide the Alert has finished.

---

open

Boolean

Opens the Alert.

Default: false

---

overlayPosition

'bottom left''bottom right''center''top left''top right'

Position of the Alert when type=overlay.

There are five types:

• center - Popup in the center of the screen

• bottom left - Popup in the bottom left of the screen

• bottom right - Popup in the bottom right of the screen

• top left - Popup in the top left of the screen

• top right - Popup in the top right of the screen

Default: 'center'

---

size

'small''medium''large'

Size of the Alert when type="overlay".

• small - narrow width

• medium - medium width

• large - wide width, supports title

When omitted, defaults to medium when there are exactly 2 buttons, otherwise small.

---

title

String

The primary text displayed.

Only shown when type="fullscreen".

---

type

'fullscreen''overlay'

Type of popup.

There are two types:

• fullscreen - Full screen popup

• overlay - Popup in the center of the screen

Default: 'fullscreen'

AlertImage   Component

An image for use in an Alert.

Import Usage

import {AlertImage} from '@enact/limestone/Alert';

Properties

Required Property •  src

StringObject

String value or Object of values used to determine which image will appear for a specific component size.

---

Required Property •  type

'icon''thumbnail'

Type of image to appear in the alert component. There are two types:

• icon - A small square sized image type

• thumbnail - A common image type

---

iconSize

'small''large'

Size of the image when type is set to icon.

Default: 'large'