Chapter 3 CSS Components Yeunyong Kantanet School of Information and Communication Technology University of Phayao Yeunyong Kantanet School of Information and Communication Technology University of Phayao

HeaderHeader  Headers are fixed regions at the top of a screen that can contain a title label, and left/right buttons for navigation or to carry out various actions.left/right buttons  Headers come in a variety of default color options:color options  Headers are fixed regions at the top of a screen that can contain a title label, and left/right buttons for navigation or to carry out various actions.left/right buttons  Headers come in a variety of default color options:color options

HeaderHeader bar-light bar-light

HeaderHeader

Sub Header  A secondary header bar can be placed below the original header bar. Header Sub Header  A secondary header bar can be placed below the original header bar. Header Sub Header

Content  The content area in Ionic is the scrollable viewport of your app. While your headers and footers will be fixed to the top and bottom, respectively, the content area will fill the remaining available space.

Content

Footer Footer Footer

Footer If a title is present in the footer, any buttons will automatically be placed on the correct side of the title in relation to how the markup was written, such as: Left Title Right If a title is present in the footer, any buttons will automatically be placed on the correct side of the title in relation to how the markup was written, such as: Left Title Right

Footer  Additionally, if no title is present and a right side button is required, you'll need to add pull-right to the right side button, such as: Right  Additionally, if no title is present and a right side button is required, you'll need to add pull-right to the right side button, such as: Right

Buttons  the Button, an essential part of any mobile experience. Like the Header, they come in the full spectrum of Ionic's default colors.Headerdefault colors Default  the Button, an essential part of any mobile experience. Like the Header, they come in the full spectrum of Ionic's default colors.Headerdefault colors Default

Buttons class="button button-light“ class="button button-stable" class="button button-positive" class="button button-calm" class="button button-balanced" class="button button-energized“ class="button button-assertive" class="button button-royal" class="button button-dark" class="button button-light“ class="button button-stable" class="button button-positive" class="button button-calm" class="button button-balanced" class="button button-energized“ class="button button-assertive" class="button button-royal" class="button button-dark"

Black Buttons o Adding button-block to a button applies display: block display. o A block button will however go 100% of its parent's width. button-dark o Adding button-block to a button applies display: block display. o A block button will however go 100% of its parent's width. button-dark

Full Width Block Buttons o Adding button-full to a button not only applies display: block, but also removes borders on the left and right, and any border-radius which may be applied. Full Width Block Button o Adding button-full to a button not only applies display: block, but also removes borders on the left and right, and any border-radius which may be applied. Full Width Block Button

Different Sizes  Adding button-large to a button makes it larger, adding button- small makes it smaller. Small Button Large Button  Adding button-large to a button makes it larger, adding button- small makes it smaller. Small Button Large Button

Outlined Buttons  Use button-outline to apply an outline button style, which also has a transparent background. Outlined Button  Use button-outline to apply an outline button style, which also has a transparent background. Outlined Button

Clear Buttons  Add button-clear to remove the border and make the text stand out. Clear Button  Add button-clear to remove the border and make the text stand out. Clear Button

Icon Buttons Loading... Home Favorites Learn More Back Reorder Loading... Home Favorites Learn More Back Reorder

Buttons in Headers Header Buttons Edit Header Buttons Edit

Clear Buttons in Headers Header Buttons Edit Header Buttons Edit

Button Bar  Buttons can also be easily grouped together using the button-bar classname. First Second Third  Buttons can also be easily grouped together using the button-bar classname. First Second Third

List  The List is a common and simple way of displaying.  The List view is a very versatile and powerful component.  List views support various interaction modes such as editing, swipe to edit, drag to reorder, and pull to refresh.  You can use lonic’s AngularJS directives. …  The List is a common and simple way of displaying.  The List view is a very versatile and powerful component.  List views support various interaction modes such as editing, swipe to edit, drag to reorder, and pull to refresh.  You can use lonic’s AngularJS directives. …

List Dividers  List items can also be dividers to organize and group the list items.  Use the item-divider class to create a divider for any child element to the list. Candy Bars Butterfinger...  List items can also be dividers to organize and group the list items.  Use the item-divider class to create a divider for any child element to the list. Candy Bars Butterfinger...

List Icons  List can have icons assigned either to the left and/or right side of each list item.  Icons can easily be added to any item by using either the built in Ionicicons, or any custom font-pack you choose.  Use item-icon-left to line up the icon to the left  Use item-icon-right to line up the icon to the right  List can have icons assigned either to the left and/or right side of each list item.  Icons can easily be added to any item by using either the built in Ionicicons, or any custom font-pack you choose.  Use item-icon-left to line up the icon to the left  Use item-icon-right to line up the icon to the right

List Icons <div class=“list” Check mail Call Me … <div class=“list” Check mail Call Me …

List Buttons  User item-button-right or item-button-left to place a button within an item. Call Ma  User item-button-right or item-button-left to place a button within an item. Call Ma

Item Avatars  User the item-avatars classname. Ionic I am Ionic Framework  User the item-avatars classname. Ionic I am Ionic Framework

Item Thumbnails  User the item-thumbnail-left to have it align on the left.  User the item-thumbnail-right for the right side. Ionic I am Ionic Framework  User the item-thumbnail-left to have it align on the left.  User the item-thumbnail-right for the right side. Ionic I am Ionic Framework

List inset  An inset list is similar to a card, except an inset list does not have a box- shadow.  It’ll be more performant when scrolling. Raiders of the Lost Ark  An inset list is similar to a card, except an inset list does not have a box- shadow.  It’ll be more performant when scrolling. Raiders of the Lost Ark

Cards This is a basic Card which contains an item that has wrapping text. This is a basic Card which contains an item that has wrapping text.

Cards Headers and Footers I'm a Header in a Card! This is a basic Card with some text. I'm a Footer in a Card! I'm a Header in a Card! This is a basic Card with some text. I'm a Footer in a Card!

Cards Lists Enter home address Enter phone number Enter wireless password Enter card information Enter home address Enter phone number Enter wireless password Enter card information

Cards Images Pretty Hate Machine Nine Inch Nails Start listening Pretty Hate Machine Nine Inch Nails Start listening

Cards Showcase Marty McFly November 05, 1955 This is a "Facebook" styled Card. The header is created from a Thumbnail List item, the content is from a card-body consisting of an image and paragraph text. The footer consists of tabs, icons aligned left, within the card-footer. 1 Like 5 Comments Marty McFly November 05, 1955 This is a "Facebook" styled Card. The header is created from a Thumbnail List item, the content is from a card-body consisting of an image and paragraph text. The footer consists of tabs, icons aligned left, within the card-footer. 1 Like 5 Comments

Forms & Inputs Firstname Lastname Submit Firstname Lastname Submit

Forms & Inputs Tel : Search : Number : Date : Month : Password : Tel : Search : Number : Date : Month : Password :

Text Input: Placeholder Labels

Text Input: Inline Labels Username Password Username Password

Text Input: Stacked Labels First Name Last Name First Name Last Name

Inset Forms

Inset Inputs Submit Submit

Input Icons

Header Inputs Cancel Cancel

Toggle HTML5 HTML5

Checkbox Red Yellow Pink Red Yellow Pink

Radio Button List Choose A Choose B Choose A Choose B

Range

Select Lightsaber Blue Green Red Lightsaber Blue Green Red

Tabs Home Favorites Settings Home Favorites Settings

Icon-only Tabs

Top Icon Tabs Home Favorites Settings Home Favorites Settings

Left Icon Tabs Home Favorites Settings Home Favorites Settings

Striped Style Tabs Test Favorites Settings Test Favorites Settings

Grid : Evenly Spaced Columns.col.col

Grid : Explicit Column Sizes.col.col-50.col.col.col-75.col.col.col.col-75.col.col.col-50.col.col.col-75.col.col.col.col-75.col

Grid : Explicit Column Sizes Explicit Column Percentage Classnames.col-1010%.col-2020%.col-2525%.col %.col-5050%.col %.col-7575%.col-8080%.col-9090%

Grid : Offset Columns.col.col.col.col.col.col

Grid : Offset Columns Offset Column Percentage Classnames.col-offset-1010%.col-offset-2020%.col-offset-2525%.col-offset %.col-offset-5050%.col-offset %.col-offset-7575%.col-offset-8080%.col-offset-9090%

Responsive Grid.col.col

Responsive Grid Responsive ClassBreak when roughly.responsive-sm Smaller than landscape phone.responsive-md Smaller than portrait tablet.responsive-lg Smaller than landscape tablet

Q&AQ&A The End