inno-status-message

Preview

status message exampleShow status message

light backgroundStatus messageStatus messageStatus messageStatus message

dark backgroundStatus messageStatus messageStatus messageStatus message

Overview

Overview

General information about the status message component.

Usage

The framework specific API should be used show the status messages.

Common API

  type InnoStatusMessageType = 'info' | 'success' | 'warning' | 'error';

  type InnoStatusMessagePosition = 'top-right' | 'bottom-right' | 'bottom-left' | 'top-left';

  type InnoStatusMessageTheme = 'light' | 'dark';

  /**
   * Status message configuration.
   */
  export interface InnoStatusMessageConfig {
    /**
     * Content of the status message.
     */
    message: string | HTMLElement;

    /**
     * Type of the message.
     */
    type?: InnoStatusMessageType;

    /**
     * Theme of the message.
     */
    theme?: InnoStatusMessageTheme;

    /**
     * Should close the message automatically.
     */
    autoClose?: boolean;

    /**
     * When to close the message.
     * Applied to the autoClose and showProgress properties.
     */
    autoCloseDelay?: number;

    /**
     * Show the progress bar.
     */
    showProgress?: boolean;

    /**
     * Override the icon.
     */
    icon?: string;

    /**
     * Override the color of the icon.
     */
    iconColor?: string;

    /**
     * Position of the message on the screen.
     */
    position?: InnoStatusMessagePosition;
  }

Angular

Configuration

Configuration

Import the provided module into the application root module.

Module example:

  import { ComponentsModule } from '@innomotics/brand-experience-angular-lib';

  @NgModule({
    imports: [
      // Import the components
      ComponentsModule,

      // Import the service
      ComponentsModule.forRoot(),
    ]
  })
  export class ApplicationRootModule {}

Standalone component example:

import { ComponentsModule } from '@innomotics/brand-experience-angular-lib';

bootstrapApplication(PhotoAppComponent, {
  providers: [
    importProvidersFrom(
      ComponentsModule.forRoot()
    ),
  ]
});

API

Description of the API surface

Overview about the core API.

InnoModalService

Central service to open status messages.

  class StatusMessageService {
    setPosition(position: InnoStatusMessagePosition): Promise<void>

    getPosition(): Promise<InnoStatusMessagePosition>

    show(config: StatusMessageConfig): Promise<ShowStatusMessageResult>
  }

Usage

Inject into a component and use the show method to show a status message.

Methodsshow

Show a new status message.

Parameters

Name	Type	Description
config	StatusMessageConfig	Message configuration object

Returns:

Type: Promise<ShowStatusMessageResult>

A reference to the created message instance.

setPosition

Set the position of the status messages.

Parameters

Name	Type	Description
position	InnoStatusMessagePosition	Position of the messages

Returns:

Type: Promise<void>

getPosition

Get the position of the status messages.

Returns:

Type: Promise<InnoStatusMessagePosition>

StatusMessageConfig

Configuration of the opened message instance.

Same as the inno-status-message configuration but the content can be a TemplateRef or a string.

Name	Type	Description
content	TemplateRef	Reference to an ng-template
content	string	Text message to show

ShowStatusMessageResult

Reference to the created message instance.

  type ShowStatusMessageResult = {
      onClose: TypedEvent<any | undefined>;
      close: (result?: any) => void;
  };

Properties

Name	Type	Description
onClose	TypedEvent<TReason>	Close event subscription handler
close	TypedEvent<TReason>	Close the message

Usage

Import the service and call the show method to show a new status message.

The returned reference can be used to manage the message.

@Component({})
export class GeneralComponent {
  constructor(private messageService: StatusMessageService) {}

  async showStatusMessage() {
    const ref = await this.messageService.show({
      message: 'my message',
      theme: 'dark',
      type: 'warning',
      position: 'top-left',
      autoClose: false,
      autoCloseDelay: 1000,
      showProgress: true,
    });

    // message can be closed explicitly, example timeout close
    setTimeout(() => ref.close('cause'), 2000);
  }
}

React

Use the provided function to show status message.

export function InnoStatusMessageExample() {
  return (
    <>
      <InnoButton
        onClick={() => {
          showStatusMessage({
            message: "My toast message!",
            showProgress: true,
            theme: "dark",
            type: "success",
          });
        }}
      >
        Trigger status message
      </InnoButton>
    </>
  );
}

Vue

<div class="component-display">
<div class="light-bg">
  <span class="bg-title">light background</span>
</div>
<div class="dark-bg">
  <span class="bg-title">dark background</span>
</div>
</div>

Overview

Represents a status message entry.

Properties

Property	Attribute	Description	Type	Default
autoClose	auto-close	Autoclose message after the given delay. The message will be closed independently from showProgress property.	boolean	false
autoCloseDelay	auto-close-delay	Autoclose delay.	number	3000
icon	icon	Icon of toast	string	undefined
iconColor	icon-color	Icon color of toast	string	undefined
messageType	message-type	Type of the status message.	"error" | "info" | "success" | "warning"	'info'
showProgress	show-progress	Animate progressbar and close after animation ends. The message will be closed independently from autoClose property.	boolean	false
theme	theme	Theme variant of the component.	"dark" | "light"	'light'

Events

Event	Description	Type
closeMessage	Status message is closed.	CustomEvent<any>

Dependencies

Used by

• inno-status-message-container

Depends on

• inno-icon

Graph

---

Built with StencilJS