V1.0

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>

V1.0

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>

V1.0

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

V1.0

Add Inputs

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

V1.0

Add dropdown menu

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>
		3rd Menu Item
	</div>
</pretty-dropdown>

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

V1.0

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)

V1.0

1.0.0

add dist folder