Framework7 Buttons-iOS Theme Buttons - Framework7

What is the use of iOS theme buttons in Framework7?

Description

Framework7 offers many iOS theme buttons that can be used by applying suitable classes. Below table shows the iOS theme buttons:

S.N.

Types & Description

1

Usual Buttons
This is used by button class to any link or input button.

2

Active State
User can make the button as active by adding a class active to the button.

3

Round Buttons
Button-round class will be used to add round buttons.

4

Big Buttons
User can use big button by adding button-big class to the input button.

5

Buttons Row / Segmented Control
Wrap the buttons with buttons-row class, to get segemented button rows. Each button will be of equal width.

6

Fill Buttons
This button looks similar to active button but is intended to be used as single button.

7

Color Buttons
user can use 10 default color themes to color their buttons.

8

List Block Buttons
It is possible to use buttons with list views.

9

Using Grid
Users can also place their buttons in the grid.

Example

Below example shows the use of buttons in Framework7:

Output

Below are the steps to see how the above code works:

Save above HTML code as buttons_iostheme.html file in the server root folder.

Open this HTML file as http://localhost/buttons_iostheme.html and below output will be displayed.

This example offers different type of iOS theme buttons like round buttons, big buttons, row buttons, color buttons etc.

Buttons

Usual Buttons

Usual Button

Active Button

Active Button

Round Buttons

Round Button

Round Button with Active

Big Buttons

Big Button

Rounded Big Button

Rounded Big Button and Active

Buttons Row / Segmented Controller

Button 1Button 2Button 3

Button 1Button 2

Fill buttons

Fill Button

Big Fill Button

Color buttons

Button 1Button 2Button 3

Button 1Button 2Button 3

Green

Big Pink

Big Gray Button

List block buttons

List Button 1

List Button 2

List Button 3

List Button 4

Inset list block buttons

List Button 1

List Button 2

List Button 3

List Button 4

Using Grid

Submit

Cancel

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

Framework7 Topics