Inline Notification

import {InlineNotificationModule} from "@qualcomm-ui/angular/inline-notification"

Examples

Simple

The simple API bundles all subcomponents together into a single directive.

Brand

Label

Description

<div
  class="w-96"
  description="Description"
  dismissable
  label="Label"
  q-inline-notification
></div>

Child Directives

Provide child directives to customize specific elements while keeping the simple API's default structure.

Brand

Label

Description

<div class="w-96" dismissable q-inline-notification>
  <div q-inline-notification-label>Label</div>
  <div q-inline-notification-description>Description</div>
</div>

Composite

Build with the composite API for granular control. This API requires you to provide each subcomponent, but gives you full control over the structure.

Brand

Label

Description

<div class="w-96" q-inline-notification-root>
  <span q-inline-notification-icon></span>
  <button q-inline-notification-close-button></button>
  <div q-inline-notification-label>Label</div>
  <div q-inline-notification-description>Description</div>
  <button q-inline-notification-action q-link>Action</button>
</div>

Emphasis (color)

Control the visual emphasis with different colors: info, success, warning, danger, and neutral. Customize these with the emphasis prop.

Brand

info

success

warning

danger

neutral

<div emphasis="info" label="info" q-inline-notification></div>
<div emphasis="success" label="success" q-inline-notification></div>
<div emphasis="warning" label="warning" q-inline-notification></div>
<div emphasis="danger" label="danger" q-inline-notification></div>
<div emphasis="neutral" label="neutral" q-inline-notification></div>

Dismissable

Add dismiss functionality to the simple notification using the dismissable prop. Use the q-inline-notification-close-button directive when using the composite API.

Brand

Label

<div dismissable label="Label" q-inline-notification></div>

<div q-inline-notification-root>
  <span q-inline-notification-icon></span>
  <div q-inline-notification-label>Label</div>
  <button q-inline-notification-close-button></button>
</div>

Action

Include a link or action in notifications using the q-inline-notification-action directive.

Brand

Label

Description for action demo

<div
  class="w-96"
  description="Description for action demo"
  label="Label"
  q-inline-notification
>
  <button q-inline-notification-action q-link>Action</button>
</div>

Layout

Choose between inline and stacked layouts using the layout property. Stacked layout places the description and action below the content.

Brand

Horizontal

Description for horizontal

Action

Vertical

Description for vertical

<div
  description="Description for horizontal"
  dismissable
  label="Horizontal"
  q-inline-notification
>
  <div q-inline-notification-action q-link>Action</div>
</div>

<div
  description="Description for vertical"
  dismissable
  label="Vertical"
  orientation="vertical"
  q-inline-notification
>
  <button q-inline-notification-action q-link>Action</button>
</div>

API

q-inline-notification

The q-inline-notification directive extends the q-inline-notification-root directive with the following properties:

Prop	Type	Default
description Optional description text for the notification.	string

dismissable When `true`, renders a close button that dismisses the notification on click.	boolean	false

label Optional heading text for the notification.	string

description

Type

string

Description

Optional description text for the notification.

dismissable

Type

boolean

Description

When true, renders a close button that dismisses the notification on click.

label

Type

string

Description

Optional heading text for the notification.

Composite API

q-inline-notification-root

Prop	Type	Default
dir The document's text/writing direction.	'ltr' \| 'rtl'	"ltr"
emphasis Governs the color of the notification and its icon.	\| 'info' \| 'success' \| 'warning' \| 'danger' \| 'neutral' \| 'loading'	'info'
getRootNode A root node to correctly resolve the Document in custom environments. i.e., Iframes, Electron.	() => \| Node \| ShadowRoot \| Document
id id attribute. If omitted, a unique identifier will be generated for accessibility.	string
orientation The layout of the notification's elements. `'horizontal'`: The icon, title, description, link, and close button are displayed inline. `'vertical'`: The icon, title, and close button are placed on the first line, while the description, and link are stacked vertically and aligned with the title.	\| 'horizontal' \| 'vertical'	'horizontal'
role The WAI-ARIA role of the notification. `'alert'`: Use this role when the notification is an alert that requires the user's immediate attention, like for errors or urgent information. `'status'`: Use this role when the notification is a status message that doesn't require the user's immediate attention, like for success or informational messages.	\| 'status' \| 'alert'	'status'
(dismissed) Function invoked when the notification is dismissed	void

dir

Type

'ltr' | 'rtl'

Description

The document's text/writing direction.

emphasis

Type

| 'info'
| 'success'
| 'warning'
| 'danger'
| 'neutral'
| 'loading'

Description

Governs the color of the notification and its icon.

getRootNode

Type

() =>
| Node
| ShadowRoot
| Document

Description

A root node to correctly resolve the Document in custom environments. i.e., Iframes, Electron.

Type

string

Description

id attribute. If omitted, a unique identifier will be generated for accessibility.

orientation

Type

| 'horizontal'
| 'vertical'

Description

The layout of the notification's elements.

'horizontal': The icon, title, description, link, and close button are displayed inline.
'vertical': The icon, title, and close button are placed on the first line, while the description, and link are stacked vertically and aligned with the title.

role

Type

| 'status'
| 'alert'

Description

The WAI-ARIA role of the notification.

'alert': Use this role when the notification is an alert that requires the user's immediate attention, like for errors or urgent information.
'status': Use this role when the notification is a status message that doesn't require the user's immediate attention, like for success or informational messages.

(dismissed)

Type

void

Description

Function invoked when the notification is dismissed

q-inline-notification-icon

Entity not found: InlineNotificationIconComponent

Learn more

Attribute / Property	Value
`class`	'qui-notification__icon'
`data-part`	'status-icon'
`data-scope`	'inline-notification'

class

Value

'qui-notification__icon'

data-part

Value

'status-icon'

data-scope

Value

'inline-notification'

q-inline-notification-label

Prop	Type
id id attribute. If omitted, a unique identifier will be generated for accessibility.	string

Type

string

Description

id attribute. If omitted, a unique identifier will be generated for accessibility.

Attribute / Property	Value
`class`	'qui-notification__label'
`data-part`	'heading'
`data-scope`	'inline-notification'

q-inline-notification-description

Prop	Type
id id attribute. If omitted, a unique identifier will be generated for accessibility.	string

Type

string

Description

id attribute. If omitted, a unique identifier will be generated for accessibility.

Attribute / Property	Value
`class`	'qui-notification__description'
`data-part`	'description'
`data-scope`	'inline-notification'

class

Value

'qui-notification__description'

data-part

Value

'description'

data-scope

Value

'inline-notification'

q-inline-notification-close-button

Entity not found: InlineNotificationCloseButtonComponent

Learn more

Attribute / Property	Value
`class`	'qui-notification__close-button'
`data-part`	'close-trigger'
`data-scope`	'inline-notification'

class

Value

'qui-notification__close-button'

data-part

Value

'close-trigger'

data-scope

Value

'inline-notification'

q-inline-notification-action

Attribute / Property	Value
`class`	'qui-notification__action'
`data-orientation`	\| 'horizontal' \| 'vertical'
`data-part`	'action'
`data-scope`	'inline-notification'

class

Value

'qui-notification__action'

data-orientation

Value

| 'horizontal'
| 'vertical'

data-part

Value

'action'

data-scope

Value

'inline-notification'

Tabs

Progress