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.

framework7_buttons.htm
Advertisements