Simple web components to show information in a simple and beautiful way.
To use these web components, you must install their dependencies:
npm install webcomponent-simple-info-addons<script src="node_modules/webcomponent-simple-info-addons/dist/webcomponent-simple-info-addons.js"></script><script src="https://unpkg.com/webcomponent-simple-info-addons/dist/webcomponent-simple-info-addons.js"></script>See the official documentation of stenciljs.com
List of components in the package.
Simple use:
<simple-paragraph header="Title" message="Simple message to show"></simple-paragraph>API
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
header |
header |
Title (or header) | string |
undefined |
message |
message |
Message to show | string |
undefined |
mode |
mode |
Color (or mode) | string |
'dark' |
type |
type |
The type of paragraph | string |
'paragraph' |
width |
width |
Width of the paragraph container | string |
'100%' |
center |
center |
type == 'paragraph' ? 'Text center' : 'Container center' |
boolean |
type == 'paragraph' ? false : true |
With buttons
<simple-paragraph header="Title" message="Simple message to show">
<simple-paragraph-actions>
<button type="button">Cerrar</button>
</simple-paragraph-actions>
</simple-paragraph>Available modes
"info"
"success"
"dark"
"warning"
"danger"Available types
"paragraph"
"box"Custom modes and types: to add or modify the modes and types you must create global css styles, for example, to create a new mode or color called primary you must add a css like:
simple-paragraph.type-paragraph.mode-primary {
border-left:6px #387ef5 solid;
}