Re UI library written from scratch button Life

Idea

The button assembly is one of the most basic components of UI library, so the component should be as flexible as possible to provide configurable items, then how can we quickly and easily configure the button to do? There are two ways, one is to acquire by js the button, so that with the corresponding patterns for various types of buttons, the second is configured to match the style by the selector css, thereby to control the use of style expression of the button, it is clear that the second embodiment can decouple from the release button assembly in js, to achieve a more ideal results.

Using pure css buttons to control basically meet the development business, do not worry about it, unless some very customized needs.

Button design

basic structure

First of all, according to the effect you want to achieve, it is possible to write such a button

//btn.html
<button className="btn-normal">SluckyUI</button>
复制代码

//btn.css
.btn-normal{
    display: inline-block;
    border-radius: 3px;
    text-align: center;
    cursor: pointer;
    outline: none !important;
    position: relative;
    overflow: hidden;
    border: none;
}
复制代码

Very simple, a button so the molding.

But the new problem has emerged, in the ordinary business development, so a simple button is insufficient to support the development of a fully functional buttons because there is usually some additional properties and status, such as a wait state, such as the prohibition click status. However css pseudo-class is not going to 'monitor' the life cycle of these states, then how should we do it?

The answer is to control the state of the button through the property (similar to expose an interface, but this interface is to achieve the css)

//btn.css
[loading='true']{
    width: 25px;
    height: 25px;
    animation: loadingTypeA infinite .75s linear;
    border: 2px solid #888;
    border-top-color: transparent;
    border-radius: 100%;
}

[disabled='true']{
    ...
}

@keyframes loadingTypeA {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}

//btn.html
<button className="btn-normal" loading='true'>SluckyUI</button>
复制代码

So that we can to control the style (state) button by loading the value of the property, whether in or react vue, angular, we can easily to control. Of course, to this step is not pure css, we need to control the business logic components, after all, the life cycle status of these components are not alone css to finish a complete process.

Note: Although you can go to flexibly configure the desired effect by style, but it is recommended that the same set of unified UI develop s, m, l three kinds of size, so better used in conjunction with the team.

Animation effects

Animation effects is one of the essential components interact, give the user a good interactive experience. Almost all of the effects can be encapsulated into css class.

//animate.scss
//下划线动画，因为已经与具体的组件完全解耦，这些动画可以用在任何组件中，后面会有专门的章节聊一聊神奇的动画
.regularLineMove {
    &::before {
        content: "";
        position: absolute;
        right: 0;
        bottom: 0;
        width: 0;
        height: 1px;
        background-color: #000;
        transition: .2s all;
    }
    &:hover::before {
        left: 0;
        width: 100%;
    }
}

//btn.html
<button className="btn-normal regularLineMove">SluckyUI</button>
复制代码

After the button plus regularLineMove Animation, suspended when the mouse up, there will underline effect appeared.

But why are almost all effect? Because css alone can not be set to display to respond effectively to the former none, such as fade-out effect. Details will be mentioned in the articles in pop.

Further improve our button

A comprehensive button component should be able to deal with most cases, reduce the amount of our development. For example, when the button is disabled state, the mouse should be displayed signs of a ban, and the button color is also supposed to make the appropriate changes, and so on. Below we will in most cases it may encounter package.

// btn.scss
.btn-status {
    //鼠标普通悬浮
    cursor: pointer;
    //禁止状态
    &:disabled {
        cursor: not-allowed;
        background-color: $disable !important;
    }
    //点击后的状态
    &:active {
        opacity: .8;
    }
    //将不美观的样式去除
    outline: none !important;
    &:focus {
        outline: none !important;
    }
    ...
}
复制代码

Bingo, so button on the basic components of a good design, is not complicated, is to consider the situation more.

end

These components have been thought to practice SluckyUI among the more interesting effects can button in SluckyUI can find Home button label, there are many places lack, welcome more exchanges. We will have more new fun stuff more and more into one.

Reproduced in: https: //juejin.im/post/5cd4dd15f265da03914d7d07