0.4.0 • Published 5 years ago
webcomponent-simple-info-addons v0.4.0
WebComponent SimpleInfoAddons
Simple web components to show information in a simple and beautiful way.
Content table
- Demo
- Use and installation - npm - unpkg - framework integration
- Components - simple-paragraph
- Browser Support
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;
}