webcomponent-simple-info-addons
Web components to show simple messages.
WebComponent SimpleInfoAddons
Simple web components to show information in a simple and beautiful way.
Content table
Use and installation
To use these web components, you must install their dependencies:
npm
npm install webcomponent-simple-info-addons
<script src="node_modules/webcomponent-simple-info-addons/dist/webcomponent-simple-info-addons.js"></script>
unpkg
<script src="https://unpkg.com/webcomponent-simple-info-addons/dist/webcomponent-simple-info-addons.js"></script>
framework integration
See the official documentation of stenciljs.com
Components
List of components in the package.
simple-paragraph
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;
}
Browser Support
See the official documentation of stenciljs.com
Links
Compatibility
Was this helpful? Need more help?
Leave a comment or a question below. You can also join
the chat on Discord or
ask questions on StackOverflow.
Version
Dependencies
- Released
- 2019-02-10
- Maturity
- IMPORTED
- License
- MIT License
Compatibility
- Framework
- Browser
- Browser Independent