Message Web Component

Install

npm install cps-message

Usage

<cps-message
  type="info"
  heading="Info"
  text="Lorem ipsum..."
>
</cps-message>

Properties

| Property | Attribute | Description | Type | Default | | -------------- | --------------- | ----------- | ------------------------------------ | --------------- | | heading | heading | | string | undefined | | iconDisabled | icon-disabled | | boolean | false | | iconSize | icon-size | | number | 32 | | text | text | | string | undefined | | type | type | | success / error / warning / info | success |

CSS Variables

--cps-font-family: BlinkMacSystemFont,-apple-system,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Helvetica,Arial,sans-serif;

--cps-success-bg-color: #edf7ed;
--cps-success-font-color: #4caf50;
--cps-success-icon-color: #4caf50;

--cps-error-bg-color: #fdecea;
--cps-error-font-color: #ec5541;
--cps-error-icon-color: #ec5541;

--cps-warning-bg-color: #fff4e5;
--cps-warning-font-color: #de7c0c;
--cps-warning-icon-color: #de7c0c;

--cps-info-bg-color: #e8f4fd;
--cps-info-font-color: #69aada;
--cps-info-icon-color: #69aada;

--cps-body-padding: 1.5625rem  /* 25/16 */;
--cps-content-padding: 0.1875rem  /* 3/16 */ 0 0 2.8125rem  /* 45/16 */;
--cps-font-weight: 600;
--cps-heading-mb: 0.625rem  /* 10/16 */;
--cps-heading-font-size: 1.125rem  /* 18/16 */;
--cps-text-mb: 1.25rem  /* 20/16 */;
--cps-text-font-size: 0.875rem  /* 14/16 */;

Overwrite CSS Variables

<style>
  cps-message {
    --cps-success-bg-color: green;
  }
</style>
<cps-message
  type="info"
  heading="Info"
  text="Lorem ipsum..."
>
</cps-message>

Browser compatibility

• Chrome
• Edge
• Firefox
• Safari
• Opera

Changelog

1.0.1

• Release 19.05.2020
  • Removed message interface

1.0.0

• Release 12.05.2020

Built with StencilJS