In the previous chapter we talked about the layout and container of Element. In this chapter we will talk about ICONS, buttons and links

icon

Element’s icon is a vector icon that uses CSS urls to introduce the font icon library TTF and WOFF files

When font-family is defined as elemental-icons, the styles of the associated font icon libraries are introduced

If the class of the tag has an attribute prefixed with el-icon-xxx, the attribute as shown in the following figure will be added. The specific font is el-icon-xxx

button

ButtonGroup

The code is simple and basically isolates the Button

CSS is through IFC isolation style, clear float, base line center, float the button inside to generate BFC, through relative positioning to make z-index attribute effect, can generate cascading context and modify the style of the button

Button

A Button mainly adjusts styles, which are already defined in theme-Chalk. When a Button defines different class names, different styles are generated

Script:

  • Inject: elForm, elFormItem is injected

  • Props: The documentation is clear

  • computed:

The size priority of the button is the size => defined by the props form FormItem and finally the size set globally

Button Whether to disable the priority of props => the form disabled

methods:

  • HandleClick: Button click triggers $emit(‘click’, EVT) to notify the parent component

Link

Link is also primarily a debug style, using v-bind=”$attrs” to allow developers to set attributes native to tags on components

Set the inline FFC for the outer div, which is vertically centered in Flex. Set the relative positioning because the Link underline is absolutely positioned below the component by the pseudo-element

script:

  • props:

  • methods:

HandleClick isa callback to the a tag click event. When disabled is false and href is not empty, $emit(‘click’, event) is triggered to notify the parent component