1. 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

2. 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

3. HeaderHeader bar-light bar-light

4. HeaderHeader

5. 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

6. 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.

7. Content

8. Footer Footer Footer

9. 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

10. 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

11. 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

12. 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"

13. 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

14. 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

15. 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

16. 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

17. 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

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

19. Buttons in Headers Header Buttons Edit Header Buttons Edit

20. Clear Buttons in Headers Header Buttons Edit Header Buttons Edit

21. 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

22. 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. …

23. 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...

24. 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

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

26. 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

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

28. 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

29. 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

30. 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.

31. 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!

32. 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

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

34. 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

35. Forms & Inputs Firstname Lastname Submit Firstname Lastname Submit

36. Forms & Inputs Email : Tel : Search : Number : Date : Month : Password : Email : Tel : Search : Number : Date : Month : Password :

37. Text Input: Placeholder Labels

38. Text Input: Inline Labels Username Password Username Password

39. Text Input: Stacked Labels First Name Last Name Email First Name Last Name Email

40. Inset Forms

41. Inset Inputs Submit Submit

42. Input Icons

43. Header Inputs Cancel Cancel

44. Toggle HTML5 HTML5

45. Checkbox Red Yellow Pink Red Yellow Pink

46. Radio Button List Choose A Choose B Choose A Choose B

47. Range

48. Select Lightsaber Blue Green Red Lightsaber Blue Green Red

49. Tabs Home Favorites Settings Home Favorites Settings

50. Icon-only Tabs

51. Top Icon Tabs Home Favorites Settings Home Favorites Settings

52. Left Icon Tabs Home Favorites Settings Home Favorites Settings

53. Striped Style Tabs Test Favorites Settings Test Favorites Settings

54. Grid : Evenly Spaced Columns.col.col

55. 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

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

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

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

59. Responsive Grid.col.col

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

61. Q&AQ&A The End