- Framework7 Tutorial
- Framework7 - Home
- Framework7 - Overview
- Framework7 - Environment
- Framework7 Components
- Framework7 - Layouts
- Framework7 - Navbars
- Framework7 - Toolbars
- Framework7 - Search Bar
- Framework7 - Status Bar
- Framework7 - Side Panels
- Framework7 - Content Block
- Framework7 - Layout Grid
- Framework7 - Overlays
- Framework7 - Preloaders
- Framework7 - Progress Bar
- Framework7 - List Views
- Framework7 - Accordion
- Framework7 - Cards
- Framework7 - Chips
- Framework7 - Buttons
- Framework7 - Action Button
- Framework7 - Forms
- Framework7 - Tabs
- Framework7 - Swiper Slider
- Framework7 - Photo Browser
- Framework7 - Autocomplete
- Framework7 - Picker
- Framework7 - Calendar
- Framework7 - Refresh
- Framework7 - Infinite Scroll
- Framework7 - Messages
- Framework7 - Message Bar
- Framework7 - Notifications
- Framework7 - Lazy Load
- Framework7 Styling
- Framework7 - Color Themes
- Framework7 - Hairlines
- Framework7 Templates
- Framework7 - Templates Overview
- Framework7 - Auto Compilation
- Framework7 - Template7 Pages
- Framework7 Fast Clicks
- Framework7 - Active State
- Framework7 - Tap Hold Event
- Framework7 - Touch Ripple
- Framework7 Useful Resources
- Framework7 - Quick Guide
- Framework7 - Useful Resources
- Framework7 - Discussion
iOS Theme Buttons
Description
Framework7 provides many iOS theme buttons, which can be used by applying appropriate classes. The following table shows the iOS theme buttons −
S.No | Types & Description |
---|---|
1 | Usual Buttons It can be used by using the button class to any link or input button. |
2 | Active State You can make the button active by adding class active to your button. |
3 | Round Buttons The button-round class is used to add round buttons. |
4 | Big Buttons You can use the big button by adding button-big class to your input button. |
5 | Buttons Row / Segmented Control To get segmented buttons row, wrap the buttons with buttons-row class. Each button will be of equal width. |
6 | Fill Buttons It looks same as active button but intended to be used as a single button. |
7 | Color Buttons You can use 10 default color themes to color your buttons. |
8 | List Block Buttons It is possible to use buttons with list views. |
9 | Using Grid You can also place your buttons in grid. |
Example
The following example demonstrates the use of buttons in Framework7 −
<!DOCTYPE html> <html class = "with-statusbar-overlay"> <head> <meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" /> <meta name = "apple-mobile-web-app-capable" content = "yes" /> <meta name = "apple-mobile-web-app-status-bar-style" content = "black" /> <title>iOS Theme Buttons</title> <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" /> <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" /> <link rel = "stylesheet" href = "custom.css" /> </head> <body> <div class = "views"> <div class = "view view-main"> <div class = "pages"> <div data-page = "home" class = "page navbar-fixed"> <div class = "navbar"> <div class = "navbar-inner"> <div class = "left"> </div> <div class = "center">Buttons</div> <div class = "right"> </div> </div> </div> <div class = "page-content"> <div class = "content-block-title">Usual Buttons</div> <div class = "content-block"> <p> <a href = "#" class = "button">Usual Button</a></p> </div> <div class = "content-block-title">Active Button</div> <div class = "content-block"> <p> <a href = "#" class = "button active">Active Button</a></p> </div> <div class = "content-block-title">Round Buttons</div> <div class = "content-block"> <p> <a href = "#" class = "button button-round">Round Button</a></p> <p> <a href = "#" class = "button button-round active">Round Button With Active</a></p> </div> <div class = "content-block-title">Big Buttons</div> <div class = "content-block"> <p> <a href = "#" class = "button button-big">Big Button </a></p> <p> <a href = "#" class = "button button-big button-round">Rounded Big Button </a></p> <p> <a href = "#" class = "button button-big button-round active">Rounded Big Button and Active</a></p> </div> <div class = "content-block-title">Buttons Row / Segmented Controller</div> <div class = "content-block"> <p class = "buttons-row"> <a href = "#" class = "button">Button 1</a><a href = "#" class = "button">Button 2</a><a href = "#" class = "button">Button 3</a></p> <p class = "buttons-row"> <a href = "#" class = "button button-round">Button 1</a><a href = "#" class = "button button-round">Button 2</a></p> </div> <div class = "content-block-title">Fill buttons </div> <div class = "content-block"> <p><a href = "#" class = "button button-fill">Fill Button</a></p> <p><a href = "#" class = "button button-big button-fill">Big Fill Button </a></p> </div> <div class = "content-block-title">Color buttons</div> <div class = "content-block"> <p class = "buttons-row theme-blue"> <a href = "#" class = "button active">Button 1</a><a href = "#" class = "button">Button 2</a><a href = "#" class = "button">Button 3</a> </p> <p class = "buttons-row theme-yellow"> <a href = "#" class = "button">Button 1</a><a href = "#" class = "button active">Button 2</a><a href = "#" class = "button">Button 3</a> </p> <p><a href = "#" class = "button button-fill color-green">Green</a></p> <p><a href = "#" class = "button button-big button-fill color-pink">Big Pink</a></p> <p><a href = "#" class = "button button-fill button-big color-gray">Big Gray Button</a></p> </div> <div class = "content-block-title">List block buttons</div> <div class = "list-block"> <ul> <li><a href = "#" class = "item-link list-button">List Button 1</a></li> <li><a href = "#" class = "item-link list-button">List Button 2</a></li> <li><a href = "#" class = "item-link list-button">List Button 3</a></li> <li><a href = "#" class = "item-link list-button">List Button 4</a></li> </ul> </div> <div class = "content-block-title">Inset list block buttons</div> <div class = "list-block inset"> <ul> <li><a href = "#" class = "item-link list-button">List Button 1</a></li> <li><a href = "#" class = "item-link list-button">List Button 2</a></li> <li><a href = "#" class = "item-link list-button">List Button 3</a></li> <li><a href = "#" class = "item-link list-button">List Button 4</a></li> </ul> </div> <div class = "content-block-title">Using Grid</div> <div class = "content-block"> <div class = "row"> <div class = "col-50"><a href = "#" class = "button button-big button-fill color-blue">Submit</a></div> <div class = "col-50"><a href = "#" class = "button button-big button-fill color-red">Cancel</a></div> </div> </div> </div> </div> </div> </div> </div> <script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script> <script>var myApp = new Framework7();</script> </body> </html>
Output
Let us carry out the following steps to see how the above given code works −
Save the above given HTML code as buttons_iostheme.html file in your server root folder.
Open this HTML file as http://localhost/buttons_iostheme.html and the output is displayed as shown below.
The example provides different types of iOS theme buttons such as round buttons, big buttons, row buttons, color buttons etc.
To Continue Learning Please Login
Login with Google