[Learn AF3] fourth button of APP framework components

Button

Component Name : Button

whether the JS control: No

Instructions for use : If the panel component is AF3 's "core" (Heart of the UI), then button is one of the five tigers in AF, which is used very frequently in the AF app.

1, in AF you can make any element behave like a button control, such as the following three elements, will be rendered identical:

1 class="button">Home</a>2class="  Button">Home</span>3class="button" >Home</div>

2, the Dedicated button class, AF can be followed by the button in the previous or next class, you can get a button displayed as a previous arrow or Next arrow, note that this is bound to add text tags, otherwise you will get the so-called picture display.

1 class="button Previous">prev</a>2class="  button next">next</a>

It looks good with a label. If you don't have a text label, it sucks.

AF3 also has a Menubutton class, designed to toggle side menu display and hide, including the Float:right attribute, so Menubutton must be displayed on the right.

3, add a vector icon to the button: by adding vector icon classes, you are free to add icon displays to the button.

class="button icon Home">Home</a>

4. Remove the background and border of the button: You can add CSS properties to remove the button's border and background.

class="button icon Home" style="border:none;background-color: transparent; ">Home</a>

The display effect at this time:

5,button add color class: af2.1, you can add a color attribute to a button by adding the following color classes (while affecting the background and foreground, the need for contrast)

1. Gray
2. Yellow
3. Red
4. Green
5. Orange
6. Black
7. Slate

Below, I'll add the red and gray categories to the transparent home button just now, to see how the contrast works:

<class= "button icon Home Red"  style= "Border:none;background-color: transparent; " > Home</a><class= "button icon Home Gray"  style= "border:none;background-color:transparent;" > Home</a>

6,button Grouping: You can display a button as a group by wrapping a set of buttons in a DIV element that class= ' button-grouped '.

<caption>Default grouping, landscape, wrap Line</caption><Divclass= "button-grouped">    <aclass= "button">Button1</a>    <aclass= "button">Button2</a>    <aclass= "button">Button3</a>    <aclass= "button">Button5</a>    <aclass= "button">Button6</a></Div><BR><caption>Vertical grouping</caption><HR/>    <Divclass= "button-grouped Vertical">    <aclass= "button">Button1</a>    <aclass= "button">Button2</a>    <aclass= "button">Button3</a>    <aclass= "button">Button5</a>    <aclass= "button">Button6</a></Div><BR><caption>Horizontal grouping, automatic scaling</caption>    <Divclass= "Button-grouped Flex">    <aclass= "button">Button1</a>    <aclass= "button">Button2</a>    <aclass= "button">Button3</a>    <aclass= "button">Button5</a>    <aclass= "button">Button6</a></Div>

Effect:

Method: None

Properties: The declarative properties that are available for the Button.

data-transition= "Transitionclassname", where transitionclassname desirable value is: Page Toggle available Transition class and side menu available transition class
#menuButton的专用属性:
data-right-menu= "MenuId" setting to the right of the display Sidemenu
data-left-menu= "MenuId" set to the left of the display Sidemenu

One of the side menu available toggle effects are "cover", "Reveal", "push" three kinds of

The page transitions have the following effects:

1 "Slide"-swipe left, swipe right on fallback 2 "Up"-swipe up and down when you rewind 3 "Down"-swipe down to rewind when up 4 "Pop"-Popup 5 "Flip"-Tumbling along the y-axis 6 "Fade"-Fade in

Event: Button Exclusive Event

Click and tap are equally valid

Chapter III Panel:afui core of the App Framework 3 component [Learn AF3 series] Fifth app framework 3 components Drawer--side Menu

[Learn AF3] fourth button of APP framework components