V1.0

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

V1.0

add Menu component and template component

• Docs in examples

V1.0

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

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