Pretty components

A library like Antd but with webcomponents

live examples

Pretty Components

CDN

<script src="https://cdn.jsdelivr.net/gh/rebelstackio/prettyComponents@1.0.2-c/main.js"> </script>

Start dev server

npm start

Build project

npm run build

Components

Buttons

<pretty-button type="primary" value="Primary" onclick="myFunction" size="default"></pretty-button>

• Attributes

type = ["primary", "default", "danger", "dashed"] 
//(if not defined is asumed default)
value = "TEXT-INSIDE-BUTTON" 
//(if not defined it come with "value" word)
onclick = "nameOfMyFunction"
size = ["large", "small", "default"] 
//(if not defined default asumed)

pretty dropdown

• Attributes

target = "myTarget" //id of the parent element
onchange = "myFunction" // on change callback

• Examples define a target element where your dropdown can appear

<pretty-button value="DropDown" id="my-target"></pretty-button>

define the dropdown component

<pretty-dropdown target="my-target" onchange="changeFunc">
	<div class="p-menu-item">
		1st Menu Item
	</div>
	<div class="p-menu-divider"></div>
	<div class="p-menu-item">
		2nd Menu Item
	</div>
	<div class="p-menu-item" disabled>
		3nd Menu Item
	</div>
</pretty-dropdown>

• Notice that target point to the id where it will be spawn.
• Notice that inside our component can be what ever element you wish
• Notice that we provide 2 classes to for the menu items ( item, divider )

pretty input

• Attributes

placeholder = "placeholder" // placeholder for the input
password = Define input type as passworrd, if the value is "show" display a toggler
loading = true || false // show loading animation

• Examples Default input

<pretty-input placeholder="Default input"></pretty-button>

Password input with show option

<pretty-input placeholder="Password with show option" password show></pretty-input>

password input without show option

<pretty-input placeholder="Password with show option" password show></pretty-input>

loading animation

<pretty-input placeholder="Loading input" loading></pretty-input>

if you want to get the value with javascript

document.querySelector('pretty-input#my-element').value

pretty tag

• Attributes

value = "display value" // the displayed value
close = set type to closable and display a X to delete the tag
onclose = callback on close event
selectable = set type to selectable and change active status
onselect = callback on select event
loading = true || false // show loading animation
icon = font awesome class // will display incon at the left

• Examples Default tag

<pretty-tag value="Basic Tag"></pretty-tag>

Tag with icon

<pretty-tag value="Tag with icon" icon="fas fa-biking"></pretty-tag>

Selectable tag

<pretty-tag selectable onselect="onSelect" class="selected" value="Tag 1"></pretty-tag>

Closeable tags

<pretty-tag value="Close me" close onclose="onClose"></pretty-tag>

loading animation

<pretty-tag value="Loading Tag" loading></pretty-tag>

if you want to get the value with javascript

document.querySelector('pretty-tag#my-tag').name

Pretty Card

• Attributes

title="card title"
description="card description"
avatar="media@img url"
bordered=boolean // make a border box

• Examples Default card

<pretty-card title="Title" description="Description"></pretty-card>

Card with avatar

<pretty-card title="Card with avatar" avtar="./dummy.png"></pretty-card>

Card with content

<pretty-card title="Card with content">
    <span>content</span>
    <span>content</span>
    <span>content</span>
</pretty-card>

Bordered card

<pretty-card title="Bordered" bordered></pretty-card>

Pretty Collapse

• Attributes

bordered=boolean

Pretty Collapse item

• Attributes

title="panel title"
expanded=boolean

• Examples Basic Expand

<pretty-collapse>
    <pretty-collapse-item title="Collapse title">
        TEXT
    </pretty-collapse-item>
    <pretty-collapse-item title="Collapse title">
        TEXT
    </pretty-collapse-item>
</pretty-collapse>

Borderless

<pretty-collapse borderless>
    <pretty-collapse-item title="Collapse title">
        TEXT
    </pretty-collapse-item>
    <pretty-collapse-item title="Collapse title">
        TEXT
    </pretty-collapse-item>
</pretty-collapse>

Nested

<pretty-collapse>
    <pretty-collapse-item title="Nested collapse">
        <pretty-collapse>
            <pretty-collapse-item title="Nested 1">
                TEXT
            </pretty-collapse-item>
            <pretty-collapse-item title="Nested 2">
                TEXT
            </pretty-collapse-item>
        </pretty-collapse>
    </pretty-collapse-item>
    <pretty-collapse-item title="Collapse title">
        TEXT
    </pretty-collapse-item>
</pretty-collapse>

pretty input number

• Attributes

size = small || default || large
min = number
max = number
factor = number

• Examples Default input

<pretty-input-number></pretty-input-number>

with min || max

<pretty-input-number min="3" max="7"></pretty-input-number>

with custom increment factor

<pretty-input-number factor="5"></pretty-input-number>

if you want to get the value with javascript

document.querySelector('pretty-input-number#my-element').value

Pretty Template

Code Example

<pretty-template styleless src="<SRC or Path to html>">

</pretty-template>

Attributes

src = "<PATH>" //Mandatory
styleless = true || false // Optional, if is set won't render any styles under that path
scriptless = true || false // Optional, if is set won't execute ant script under that path

Notes

• This component is meant to be used in static environments
• If any attribute is changed, will redraw the component, that includes the src attribute
• This component use Fetch, so no CORS allows
• This component has two src type.
  • Path: /folder/, in this mode will fetch a index.html, .css, .js and injected in the DOM. (styleless and scriptless attribute can be applied to avoid load)
  • HTML file: /folder/name.html will only fetch that HTML file if styleless or scriptless is set, will prevent the style tag or script tag