← Back

webcomponent-simple-info-addons

Web components to show simple messages.

Author

Contributors

Rating

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

Compatibility

(Loading compatibility data...)

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

webcomponent-simple-info-addons - Vaadin Add-on Directory

Web components to show simple messages.

Directory