In fact, friends who have studied the front end know what the button tag is.
1. Button component function description
is a button component
The function is richer than the button button in HTML
Through the open-type attribute, various functions provided by WeChat can be called (customer service, forwarding, obtaining user authorization, obtaining user information, etc.)
2. What attributes does the button component have (commonly used attributes)
More attributes enter button | WeChat open document (qq.com) view
| Attributes | type | Defaults | required | illustrate | minimum version |
|---|---|---|---|---|---|
| size | string | default | no | button size | 1.0.0 |
| type | string | default | no | The style type of the button | 1.0.0 |
| plain | boolean | false | no | Whether the button is hollowed out and the background color is transparent | 1.0.0 |
| disabled | boolean | false | no | Whether to disable | 1.0.0 |
| loading | boolean | false | no | Whether to have a loading icon before the name | 1.0.0 |
| form-type | string | no | For form components, clicking will trigger the submit/reset event of the form component respectively | 1.0.0 | |
| open-type | string | no | WeChat Open Capability | 1.1.0 |
3. Try adding a button component to see what it looks like?
The initial appearance is a very common button with no color, no style, only the basic style exists.
3. The size attribute is used (control the size of the button)
At this time, someone will use size to test the button size
<button size="100px">初始按钮</button>
It is found that there is no change, that's right, why is it like this, let us control the size but not change the size for us?
In fact, the legal value of our size attribute is only 2
| legal value | illustrate |
|---|---|
| default | default size |
| mini | Small size |
Let's first look at what these two values look like
The size attribute default and mini look like
One is the normal version, and the other is the shrunken version. At this time, some people will say that his appearance is too ugly, what should I do? I want to modify its style and size. At present, the editor can only tell you that you can use the WXSS file to modify his style.
Let's try to modify his size
We found that the size of the button can only be modified through width and height, and the height and width are fixed. There must be a modification method, and everyone needs to explore here.
Next, I tried to explore again. The default attribute value can modify the background color and line height , but the mini attribute value can only modify the background color and text line height , and the lower functions need to be explored by yourself.
4. Type attribute usage (button style type)
Similarly, let's look at his legal value first
| legal value | illustrate | Internet statement |
|---|---|---|
| primary | green | main color button |
| default | White | default button |
| warn | red | warning button |
There are only three legal values, let's test it out
These three buttons just provide our commonly used styles
5. The plain attribute is used (whether the button is hollowed out, the background color is transparent)
We can see the difference at a glance
One is solid, and the other is hollowed out background, allowing users to show more background effects
6. Disabled attribute use (whether to disable)
Through this attribute, the user can only click once and not continue to click, so as to prevent repeated submission of data and cause data blockage.
7. Use of loading attribute (whether there is a loading button before the name)
This can be used when logging in or loading a large amount of data to prevent the user from being busy for a long time after clicking and not responding, causing the user to think that the software is stuck.
8. form-type and form-type attributes
The remaining two attributes have many types of functions, so I won’t explain them one by one here. If you encounter them in actual combat, the editor will also publish some related tutorials.
The commonly used attributes of button are introduced here. In fact, there are many more attributes. You can go to button | WeChat open document (qq.com) to view more attributes. We also look forward to your joining us to discuss and study together