webcomponent-simple-info-addons
v0.4.0
Published
Web components to show simple messages.
Downloads
11
Readme
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;
}