Text
Value: {{text}}
Prefix:
Suffix
Multi Value: {{textMulti}}
Number Value: {{textNumber}}
Password
{{textDisabled ? '' : '!'}}disabled
{{textPlain ? '' : '!'}}plain
{{textReadonly ? '' : '!'}}readonly
Select
Value: {{select}}
{{selectSearch ? '' : '!'}}search
{{selectDisabled ? '' : '!'}}disabled
{{selectPlain ? '' : '!'}}plain
Check
Value: {{check}}
Horizontal check
Vertical check
Line 2
Line 3
With link: Click here
Switch
Boolean Value: {{switch1}}
Mapped Value: {{switch2}}
{{switchDisabled ? '' : '!'}}disabled
Dlist
Value: {{dlist}}
{{dlistTree ? '' : '!'}}tree
Slider
Value: {{slider}}
Range Value: {{sliderRange}} (min: 50, max: 300)
Vnumber
Value: {{vnumber}}
{{vnumberDisabled ? '' : '!'}}disabled
Set value
Nboard
Value: {{nboard}}
Enter Code
{{nboardDisabled ? '' : '!'}}disabled
{{nboardPlain ? '' : '!'}}plain
{{nboardSplit ? '' : '!'}}split
{{nboardTitle ? '' : '!'}}title
{{nboardButtons ? '' : '!'}}buttons
{{nboardCustom ? '' : '!'}}custom
Captcha
tc: {{tcResult}}
Reset TC
showCaptcha()
cf: {{cfResult}}
Reset CF
showCaptcha()
{{l('display')}}
Tag
Types:
Default
Primary
Info
Warning
Danger
Pe
Current
Dynamic tags:
{{tagClose ? '' : '!'}}close
{{tagPlain ? '' : '!'}}plain
Circle
Types:
Plain:
Sizes:
With text:
Label
Default:
This is a label
Tip mode:
Username
With icon:
Language
Icon
Table
Name
Age
City
Action
User {{i}}
{{20 + i}}
City {{i}}
Edit
Sub Title
User 4
24
City 4
Edit
{{tableAdaption ? '' : '!'}}adaption
{{tablePlain ? '' : '!'}}plain
{{l('date')}}
Datepanel
Timestamp: {{dpTimestamp}}, Timezone: {{dpTimezone}}
YearMonth: {{dpYearMonth}}, HourMinute: {{dpHourMinute}}
{{col.date}}
{{dpTime ? '' : '!'}}time
{{dpZone ? '' : '!'}}zone
{{dpDisabled ? '' : '!'}}disabled
{{dpPlain ? '' : '!'}}plain
{{dpRange ? '' : '!'}}range
{{dpSlotEnabled ? '!' : ''}}Slot
Date
Timestamp: {{dateTimestamp}}
{{dateShowDate ? '' : '!'}}date
Daterange
Timestamp: {{daterangeTimestamp}}
{{l('feedback')}}
Dialog
Dialog
Dialog with title
Confirm
Confirm with cancel
Custom dialog
Loading
Drawer
drawer: {{drawer}}
Open Drawer
Drawer content
Open nested drawer
Nested content
Page
Page 1: {{page1}}
Page 2: {{page2}}
Page 3: {{page3}}, Total: {{pageTotal}}, Count: {{pageCount}}
{{l('simple')}}
Styles:
Default
Plain
Pwhite
Pgrey
Grey
Dark
Bold
Sizes:
Disabled:
Layout
pe-layout:
pe-alayout:
pe-lralayout (left img - right):
Block
Default block content
Grey block content
Content
pe-content is used to wrap main content area with proper padding. This section is inside pe-content.
Link
Stripe
Crumb
Tree
pe-tree is typically used for sidebar navigation. Use div.pe-tree-item to create expandable items with arrow. Click "Form" or "Display" to toggle submenu.
Img
pe-img with hover effect (used in pe-box):
Menudown is used in header. See the
Header page for demo.
{{l('container')}}
Anchor
The right navigation is automatically generated from headings, as demonstrated on this page with the anchor control.
Collapse
Value: {{collapse}}
Content of panel 1. This is a simple text content.
Content of panel 2. You can put any content here.
Content of panel 3. This panel is disabled.
This panel has a custom title with icon.
Accordion mode: {{collapseAccordion}}
Only one panel can be expanded at a time in accordion mode.
Click another panel to switch.
The previously expanded panel will be collapsed automatically.
Tab
Value: {{tab}}
Tab 1
Tab 2
Tab 3
Tab 1
Tab 2
Tab 3
Tab 1
Tab 2
Tab 3
{{tabHover ? '' : '!'}}hover
Btab
Group
Basic plan
Feature 1
Feature 2
Select
Recommend
Pro plan
Feature 1
Feature 2
Feature 3
Select
Enterprise
Feature 1
Feature 2
Feature 3
Feature 4
Contact
Setting
Nick
English
Value
A
B
C
{{settingHover ? '' : '!'}}hover
{{settingPlain ? '' : '!'}}plain
{{settingLight ? '' : '!'}}light
Box
Grid
Grid:
Igrid (infinite auto grid):