WU-UI

English

中文

English

中文

Appearance

Color ​

After extensive debugging and research, wu-ui has developed a proprietary color palette that uses a unified color scheme within each component to bring a unified and distinct visual effect to your product.

DANGER

In order to better write CSS, wuui has used the scss preprocessor. Before using wuui, please confirm that your Hbuilder X has installed the scss preprocessor. Generally, I believe you have already installed it. If it is not installed, please find "scss/sass compilation" and install it in Hbuilder X ->Tools ->Plugin Installation. If the installation is not effective, please restart Hbuilder X.

平台兼容性 ​

App(vue)App(nvue)H5小程序VUE2VUE3
√√√√√√

Theme color ​

primary , success , error , warning , and information are the theme colors of wu ui, which visually correspond to blue, green, red, yellow, and gray. And they also have corresponding disabled, dark, and light states, representing the corresponding prohibited, deepened, and lightened colors. For example, the button component of wu-ui:

  1. When the type parameter is set to primary, the button displays in blue.
  2. When the button is pressed, the deepened color of primary, also known as the dark state, is used.
  3. When the button is set to a hollow state (with plain being true), the background color becomes lighter than the primary color, which is also the light state. When the button is in a disabled state, it uses a slightly lighter color of primary, which is also the disabled state.

Main color ​

Blue, as the main color tone of wu-ui, represents a distinct and positive attitude.

Primary
#2979ff
Dark
#2b85e4
Disabled
#a0cfff
Light
#ecf5ff

We provide corresponding color variable names in the global style through scss, making it easy for you to call these variables anywhere you can write CSS, as follows:

scss
/*The definition of variables, which has been globally introduced, does not require your writing*/
$wu-primary: #3c9cff;
$wu-warning: #f9ae3d;
$wu-success: #5ac725;
$wu-error: #f56c6c;
$wu-info: #909399;

/*Use these variables where you write CSS*/
. title{
    color: $wu-primary;
}
/*The definition of variables, which has been globally introduced, does not require your writing*/
$wu-primary: #3c9cff;
$wu-warning: #f9ae3d;
$wu-success: #5ac725;
$wu-error: #f56c6c;
$wu-info: #909399;

/*Use these variables where you write CSS*/
. title{
    color: $wu-primary;
}

Auxiliary color ​

Scene colors other than the main color need to be used in different scenarios, such as green representing success, red representing error, and yellow representing warning.

Error
#fa3534
Dark
#dd6161
Disabled
#fab6b6
Light
#fef0f0
Warning
#ff9900
Dark
#f29100
Disabled
#fcbd71
Light
#fdf6ec
Success
#19be6b
Dark
#18b566
Disabled
#71d5a1
Light
#dbf1e1
Info
#909399
Dark
#82848a
Disabled
#c8c9cc
Light
#f4f4f5

We provide corresponding color variable names in the global style through scss, making it convenient for you to call these variables anywhere you can write css, as follows:

scss
/* The definition of variables, which has been globally introduced, does not require your writing */

$wu-primary: #3c9cff;
$wu-primary-dark: #398ade;
$wu-primary-disabled: #9acafc;
$wu-primary-light: #ecf5ff;

$wu-warning: #f9ae3d;
$wu-warning-dark: #f1a532;
$wu-warning-disabled: #f9d39b;
$wu-warning-light: #fdf6ec;

$wu-success: #5ac725;
$wu-success-dark: #53c21d;
$wu-success-disabled: #a9e08f;
$wu-success-light: #f5fff0;

$wu-error: #f56c6c;
$wu-error-dark: #e45656;
$wu-error-disabled: #f7b2b2;
$wu-error-light: #fef0f0;

$wu-info: #909399;
$wu-info-dark: #767a82;
$wu-info-disabled: #c4c6c9;
$wu-info-light: #f4f4f5;

/* Use these variables where you write CSS */
.title {
	color: $wu-type-info;
	......
}
/* The definition of variables, which has been globally introduced, does not require your writing */

$wu-primary: #3c9cff;
$wu-primary-dark: #398ade;
$wu-primary-disabled: #9acafc;
$wu-primary-light: #ecf5ff;

$wu-warning: #f9ae3d;
$wu-warning-dark: #f1a532;
$wu-warning-disabled: #f9d39b;
$wu-warning-light: #fdf6ec;

$wu-success: #5ac725;
$wu-success-dark: #53c21d;
$wu-success-disabled: #a9e08f;
$wu-success-light: #f5fff0;

$wu-error: #f56c6c;
$wu-error-dark: #e45656;
$wu-error-disabled: #f7b2b2;
$wu-error-light: #fef0f0;

$wu-info: #909399;
$wu-info-dark: #767a82;
$wu-info-disabled: #c4c6c9;
$wu-info-light: #f4f4f5;

/* Use these variables where you write CSS */
.title {
	color: $wu-type-info;
	......
}

Text color ​

In wu-ui, four types of text colors have been extracted, namely: main text, regular text, secondary text, and placeholder text colors.

  • The main text color is generally used for the title of content, such as the title of a news list
  • Conventional text colors are generally used for the main body of content, such as the summary of news lists
  • The secondary text color is generally used for the prompt part of the content, such as the time at the bottom of the news list and the prompt text for the number of comments
  • The color of the placeholder text belongs to a lighter gray color, which can be selected according to the scene
Main text
#303133
Regular text
#606266
Secondary
#909399
Placeholder
#c0c4cc
scss
/* The definition of variables, which has been globally introduced, does not require your writing */
$wu-main-color: #303133;
$wu-content-color: #606266;
$wu-tips-color: #909193;
$wu-light-color: #c0c4cc;
$wu-border-color: #dadbde;
$wu-bg-color: #f3f4f6;
$wu-disabled-color: #c8c9cc;

/* Use these variables where you write CSS */
.title {
  color: $wu-main-color;
}
/* The definition of variables, which has been globally introduced, does not require your writing */
$wu-main-color: #303133;
$wu-content-color: #606266;
$wu-tips-color: #909193;
$wu-light-color: #c0c4cc;
$wu-border-color: #dadbde;
$wu-bg-color: #f3f4f6;
$wu-disabled-color: #c8c9cc;

/* Use these variables where you write CSS */
.title {
  color: $wu-main-color;
}

Background color ​

In wu-ui, a background color is defined as follows:

Background
#f3f4f6

In the global style, we provide the corresponding color variable name through scss, which is convenient for you to call this variable anywhere you can write CSS, as follows:

scss
/* The definition of variables, which has been globally introduced, does not require your writing */
$wu-bg-color: #f3f4f6;

/* Use these variables where you write CSS */
.title {
  color: $wu-bg-color;
}
/* The definition of variables, which has been globally introduced, does not require your writing */
$wu-bg-color: #f3f4f6;

/* Use these variables where you write CSS */
.title {
  color: $wu-bg-color;
}

Border Color ​

wu-ui has customized a border color with a value of #e4e7ed. If you want to use it, it is as follows:

scss
/* The definition of variables, which has been globally introduced, does not require your writing */
$wu-border-color: #e4e7ed;

/* Use these variables where you write CSS */
.item {
  border: 1px solid $wu-border-color;
}
/* The definition of variables, which has been globally introduced, does not require your writing */
$wu-border-color: #e4e7ed;

/* Use these variables where you write CSS */
.item {
  border: 1px solid $wu-border-color;
}