Ionic elements from CDN demo
Menus
Demonstration of declarative programming of Ionic page.
You still would need to empower it with business logic
either in old fashion by JS or declaratively like by Polymer binding.
Right menu in this demo is filled from JSON declaratively,
dark mode is triggered by JS.
Show right menu
Dark Mode
Default
Anchor
[[ tColor ]]
Primary
Secondary
Tertiary
Success
Warning
Danger
Light
Medium
Dark
Full Button
Block Button
Round Button
Outline + Full
Outline + Block
Outline + Round
Left Icon
Right Icon
Large
Default
Small
Look bellow on footer sides for start/end menus.
Open Custom Menu
99
11
22
33
44
55
66
77
88
99
11
My Item
22
Card Subtitle
Card Title
Keep close to Nature's heart... and break clear away, once in awhile,
and climb a mountain or spend a week in the woods. Wash your spirit clean.
ion-item in a card, icon left, button right
View
This is content, without any paragraph or header tags,
within an ion-card-content element.
Card Link Item 1 activated
Card Link Item 2
Card Button Item 1 activated
Card Button Item 2
Pepperoni
Sausage
Mushrooms
Default
Secondary Label
Secondary w/ Dark label
Default
Default
Button Chip
Icon Chip
Avatar Chip
Button
Default
Mini
Primary
Secondary
Danger
Light
Dark
Share
Facebook
Twitter
Youtube
Vimeo
ion-col
ion-col
ion-col
ion-col
ion-col [size="6"]
ion-col
ion-col
ion-col [size="3"]
ion-col
ion-col [size="3"]
ion-col [size="3"]
ion-col [size="3"] [offset="3"]
ion-col
ion-col
#
ion-col
#
#
ion-col
#
#
#
ion-col [start]
ion-col [center]
ion-col [end]
ion-col
#
#
[start] ion-col
[start] ion-col
[start] ion-col [end]
ion-col
#
#
[center] ion-col
[center] ion-col
[center] ion-col
ion-col
#
#
[end] ion-col
[end] ion-col [start]
[end] ion-col
ion-col
#
#
ion-col [size="12"] [size-sm]
ion-col [size="12"] [size-sm]
ion-col [size="12"] [size-sm]
ion-col [size="12"] [size-sm]
ion-col [size="12"] [size-md]
ion-col [size="12"] [size-md]
ion-col [size="12"] [size-md]
ion-col [size="12"] [size-md]
ion-col [size="6"] [size-lg] [offset="3"]
ion-col [size="3"] [size-lg]
Swipe text bellow to right/left
Favorite
Share
Item Options
Unread
Delete
Expandable Options
Archive
HubStruck Notifications
A new message in your network
Oceanic Next has joined your network
10:45 AM
Sliding Item, Icons Start
More
Archive
Sliding Item, Icons End
More
Archive
Sliding Item, Icons Top
More
Archive
Sliding Item, Icons Bottom
More
Archive
Label
Primary Label
Secondary Label
Danger Label
Light Label
Dark Label
Default Item
Multi-line text that should wrap when it is too long
to fit on one line in the item.
Default Input
Fixed
Floating
Stacked
Toggle
Checkbox
Pokémon Yellow
Mega Man X
The Legend of Zelda
Pac-Man
Super Mario World
Input
Toggle
Radio
Checkbox
Item
Unread
Item
Unread
Title Only
Back Button
Small Title above a Default Title
Default Title
Default Buttons
Contact
Solid Buttons
Help
Star
Outline Buttons
Edit
Account
Edit
Text Only Buttons
Left side menu toggle
Right side menu toggle
All
Favorites
Secondary Toolbar
Dark Toolbar