WeUI framework

WeUI is a small program UI framework, the so-called UI framework is a set of interface design, with components, we can use it to splice a rich small program, and with the UI framework, we can make our small program become more beautiful.

Experience the WeUi applet

WeUI is a set of basic style library of wechat official design team which is consistent with the original visual experience of wechat. You can search WeUI small program in wechat mobile phone.

Download the source code to see weui- wxSS-master folder, import the project, experience

Why dist folder under weui-wxss-master and not Weui-wxss-master? Do you remember what the root directory of an applets is?

Download WeUI source code, in fact, WeUI core file is weui.wxSS.

How do we use WeUI styles in our template applet?

├ ─ ─ pages ├ ─ ─ image ├ ─ ─ style │ ├ ─ ─ weui. WXSS ├ ─ ─ app. Js ├ ─ ─ app. Json ├ ─ ─ app. WXSSCopy the code

Paste weui. WXSS file from weui applets dist/style folder into the style folder

@import 'style/weui.wxss';Copy the code

Flex layout

Layout is a style and CSS. Flex stands for Flexible Box.

<view class="flex-box"> <view class='list-item'>Python</view> <view class='list-item'> small program </view> <view </view> </view>Copy the code
.list-item{
  background-color: #82c2f7;
  height: 100px;
  text-align: center;
  border:1px solid #bdd2f8; 
}Copy the code

Make components left-right relationships

.flex-box{
  display: flex; 
}Copy the code

Divide component widths evenly

.list-item{
  flex:1; 
}Copy the code

Center the content within the component vertically

.list-item{ display: flex; align-items:center; /* vertical center */ justify-content: center; /* Horizontal center */}Copy the code

Global versus local styles

The styles defined in app.wxSS are global and apply to each page.

The styles defined in the PAGE WXSS file are local, apply only to the corresponding page, and override the same selectors in app.wxss.

CSS’s gradientLinear-gradient () function is used to create an image that represents a linear gradient of two or more colors.

Enter the following code on the gradient. WXML page:

<view class="gradient-display">
</view>Copy the code

Type in gradient. WXSS:

.gradient-display{
  background-image:linear-gradient(red, blue);
  width: 100vw;
  height: 100vh;
  }Copy the code

Its default gradient direction is to change the gradient direction from top to bottom

background-image: linear-gradient(45deg, blue, red); /* The gradient axis is 45 degrees, from blue to red */Copy the code
background-image:linear-gradient(to left top, blue, red); /* From bottom right to top left, from blue to red */Copy the code
background-image:linear-gradient(0deg, blue, green 40%, red); /* From bottom to top (gradient axis 0 degrees), start with blue gradient, start with green gradient to 40% height and end with red gradient */Copy the code

The Filter Filter

Filter attribute, you can perform gaussian blur, adjust contrast, transform to gray image, hue rotation, image transparency and other operations.

Opacity opacity(%) : opacity opacity(%)

.filter-display img{ width: 150px; height: auto; } .blur{ filter: blur(8px); } .grayscale{ filter: grayscale(90%); } .opacity{ filter: opacity(25%); } .multiple{ filter: blur(8px) grayscale(90%) opacity(25%); }Copy the code

Deformation attribute Transform

The CSS Transform property can rotate, scale, tilt, or translate a given component by modifying the coordinate space of the CSS visual formatting model.

Transform, Transition, Animation

.transform-display image{ width: 80px; height: 80px; }. Scale {transform: scale (1,0.5); } .translate{ transform: translate(500px,20px); } .rotate{ transform: rotate(45deg); } .skew{ transform: skew(120deg); }Copy the code

The TransitionCSS transitions property controls the effect of a component transitioning from one property state to another.

.selector {
    transition: [transition-property] [transition-duration] [transition-ti
ming-function] [transition-delay]; }Copy the code

Transition-property, the name of the CSS or animation property to which transitions are applied; Transition-duration Transition-timing -function Transition-delay transition-duration

Animation property

CSS animations make it possible to transition from one CSS style configuration to another. dynamic

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  } }
.fadeIn {
  animation: 4s linear 0s infinite alternate fadeIn; }Copy the code

Shake (shake), flash (flash), bounce (flip), rotateIn/rotateOut, fadeIn/fadeOut

If this number of content can not do the place (such as: related to copyright or other issues), please contact us for rectification, will be dealt with in the first time.

Thumb up, please! Because your approval/encouragement is my biggest motivation to write!

Welcome to attentiondadaJane books!

This is a blog with quality and attitude