sling-web-component-message

Sling Message

Usage no npm install needed!

<script type="module">
  import slingWebComponentMessage from 'https://cdn.skypack.dev/sling-web-component-message';
</script>

README

sling-web-component-message

The message component is a static bar that indicates, through prevailing icons and colors, some state to the user.

Install

npm install sling-web-component-message

Tag

  <sling-message></sling-message>

Dependencies

  • sling-framework
  • sling-helpers

Attributes and properties

Name Type Default Values ReflectToAttribute Observer callSdk
srcdata String :heavy_check_mark:
aim String :heavy_check_mark:

Description

Name Description
srcdata This is the message that will be shown in the component
aim Defines the message objective, can be danger, success or warning.

Events

This component have no event.

Examples

All component examples can be emulated using the npm start sling-web-component-message command.

Use

<sling-message aim="error"></sling-message>
<sling-message aim="success"></sling-message>
<sling-message aim="alert"></sling-message>
<sling-message aim="standby"></sling-message>
<script>
  srcdata = ['Some message.', 'Some other message.'];
  const components = Array.from(document.querySelectorAll('sling-message'));
  components.map(component => component.srcdata = srcdata);
</script>

image