WeChat applet MinUI component library series progress progress bar component

MinUI is a set of simple, easy-to-use, and efficient component libraries developed based on the features of WeChat Mini Program custom components. It is applicable to a wide range of scenarios, covering the Mini Program native framework, various Mini Program component mainstream frameworks, etc. Command line tool. The MinUI component library contains many basic components. The progress bar component is a commonly used basic component. The effect diagram of the progress component in MinUI is as follows:

progress

There are all kinds of types, does it look convenient and fast (^ _ ^). You can open WeChat and scan the QR code of the following small program to see it first:

progress

The following describes how to use the progress component.

1. Use the following command to install Min-Cli . If it is installed, please proceed to the next step. Please poke here for Min-Cli documents: Min-Cli User Manual

npm install -g @mindev/min-cli

2. Initialize a small program project.

min init my-project

Select New applet option to initiate a small project. After creating the project, open the project in the editor, the src directory is the source directory, and the dist directory is the directory specified in WeChat developer tools after compilation. The new project has a homepage. Detailed documentation: Min Initialize Mini Program Project

3. Install the progress component.

Enter the directory of the newly created applet project:

cd my-project

Install components:

min install @minui/wxc-progress

4. Start dev.

min dev

After opening, the source code will be recompiled after modification.

5. Introduce components into the page.

Opens in the editor src/pagesdirectory home/index.wxpfile, scriptadd the configfield configuration applet custom component field, as follows:

export default {
    config: {
        "usingComponents": {
            'wxc-progress': "@minui/wxc-progress"
        }
    }
}

wxc-progress It is the tag name of the avatar component, which can be used in wxml.

6, in the wxml wxc-progresslabel.

In home/index.wxpthe file templateadd wxc-progresstags, as follows:

<wxc-progress percent="80"></wxc-progress>

7, micro-channel open developer tools, specify the distcatalog, preview the project.

home/index.wxp The code of the file is as follows:

<!-- home/index.wxp -->
<template>
  <wxc-progress percent="80"></wxc-progress>
</template>

<script>
export default {
  config: {
    usingComponents: {
      'wxc-progress': '@minui/wxc-progress'
    }
  },
  data: {}
}
</script>

<style>
</style>

Icon:

default

So far, the method of the progress progress bar component of the minui component library in the applet project generated by the Min tool has been introduced. For other scenarios, please use the method in the native applet or other applet framework projects, please move to the following link:

Introduction to using MinUI components in existing applet projects

After understanding how to use the component, let's introduce the API of the progress component.

Progress【props】

Attributes	description
percent	[Required] Percentage of progress
stroke-width	[Optional] The width of the progress bar, in rpx, the default value is 16
active-color	[Optional] The color of the highlight progress bar supports solid colors and linear gradient colors. The default value is "# ffca49, # ffb262". If only one color value is filled, the progress bar displays the solid color value.
background-color	[Optional] The background color of the progress bar, the default value is "# e5e5e5"
radius	[Optional] Fillet angle, unit rpx, default value 15

More demos

1. Set the width of the progress bar

<template>
  <wxc-progress stroke-width="20"></wxc-progress>
</template>

<script>
export default {
  config: {
    usingComponents: {
      'wxc-progress': '@minui/wxc-progress'
    }
  },
  data: {}
}
</script>

<style>
</style>

Icon:

Set width

2. Set the foreground color of the progress bar

<template>
  <wxc-progress percent="60" active-color="#ac89ff"></wxc-progress>
</template>

<script>
export default {
  config: {
    usingComponents: {
      'wxc-progress': '@minui/wxc-progress'
    }
  },
  data: {}
}
</script>

<style>
</style>

Icon:

Set foreground color

3. Set the foreground color of the gradient

<template>
  <wxc-progress percent="60" active-color="#ac89ff,#ff76a2"></wxc-progress>
</template>

<script>
export default {
  config: {
    usingComponents: {
      'wxc-progress': '@minui/wxc-progress'
    }
  },
  data: {}
}
</script>

<style>
</style>

Icon:

Gradient foreground color

4. Set the background color

<template>
  <wxc-progress percent="40" background-color="#eaffea"></wxc-progress>
</template>

<script>
export default {
  config: {
    usingComponents: {
      'wxc-progress': '@minui/wxc-progress'
    }
  },
  data: {}
}
</script>

<style>
</style>

Icon:

Set background color

5. Set the corner radius

<template>
  <wxc-progress radius="5"></wxc-progress>
</template>

<script>
export default {
  config: {
    usingComponents: {
      'wxc-progress': '@minui/wxc-progress'
    }
  },
  data: {}
}
</script>

<style></style>

Icon:

Set fillet radian

More synchronization component updates please pay attention to MinUIthe small example program component library view, please move to real-time synchronization or updating of micro-channel applet progress progress bar component uses the document .

Communication feedback

Add a group assistant wUf18018252882 friends or scan code to add friends, assistants and dialogue with the group to send a verification code 10088in accordance refers to the introduction of the group.

Group QR code

Related Links

Open source components

Layout element
- flex layout
- cc Center horizontally and vertically
Basic components
Functional component
Cue feedback
Form component
- Coming soon ...

Mushroom Street Front-end Team, 2018.01.19, Hangzhou

This article is reproduced in: WeChat applet MinUI component library series progress progress bar component

Guess you like