I haven’t done the component library for a few days 😁, nothing happened this week. I added the step bar component and icon component to the component library. I plan to upgrade the code in the component library to vue3.0+TS writing method, which has a higher fault tolerance rate.

Step bar components can be customized to a high degree, detailed parameters have been described in the README document, first attach gitHub warehouse address: github.com/Mryuelaiyue…

Icon Icon:

Icon uses symbol mode, namely: SVG vector picture. For testing purposes, I found 7 interchangeable ICONS in IconFoot.The name attribute does not require the preceding.icon- **

Steps: indicates a step bar

1 Basic Usage

  <steps :active="2">
        <step>Step 1</step>
        <step>Step 2</step>
        <step>Step 3</step>
        <step>Step 4</step>
  </steps>
Copy the code

The diagram below:

2 Vertical Direction

The mobile phone should use the vertical direction more, so added a direction:vertical

  <steps :active="2" direction="Vertical">
        <step>Step 1</step>
        <step>Step 2</step>
        <step>Step 3</step>
        <step>Step 4</step>
  </steps>
Copy the code

As shown in figure:

3 Customize colors

Activation inactive state colors can be changed by changing activeColor and inactiveColor.

  <steps :active="2" activeColor="success" inactiveColor="warning">
        <step>Step 1</step>
        <step>Step 2</step>
        <step>Step 3</step>
        <step>Step 4</step>
  </steps>
Copy the code

Effect:

4 Customize ICONS

Finished, active and inactive ICONS can be replaced by the user.

  <steps
        :active="2"
        finishIcon="thumbs_up_line"
        activeIcon="fire_line"
        inactiveIcon="close_line"
      >
        <step>Step 1</step>
        <step>Step 2</step>
        <step>Step 3</step>
        <step>Step 4</step>
 </steps>
Copy the code

Effect:

5 Custom slot

Define three state slots. Note: The size of the three status slots must be the same; otherwise, they cannot be aligned

  <steps :active="2">
        <step>
          <div
            slot="active-icon"
            :style="{ width: '20px', height: '20px', backgroundColor: 'var(--danger)', }"
          ></div>
          <div
            slot="finish-icon"
            :style="{ width: '20px', height: '20px', backgroundColor: 'var(--success)', }"
          ></div>
          <div
            slot="inactive-icon"
            :style="{ width: '20px', height: '20px', backgroundColor: 'var(--body)', }"
          ></div>Step 1</step>
        <step>
          <div
            slot="active-icon"
            :style="{ width: '20px', height: '20px', backgroundColor: 'var(--danger)', }"
          ></div>
          <div
            slot="finish-icon"
            :style="{ width: '20px', height: '20px', backgroundColor: 'var(--success)', }"
          ></div>
          <div
            slot="inactive-icon"
            :style="{ width: '20px', height: '20px', backgroundColor: 'var(--body)', }"
          ></div>Step 2</step>
        <step>
          <div
            slot="active-icon"
            :style="{ width: '20px', height: '20px', backgroundColor: 'var(--danger)', }"
          ></div>
          <div
            slot="finish-icon"
            :style="{ width: '20px', height: '20px', backgroundColor: 'var(--success)', }"
          ></div>
          <div
            slot="inactive-icon"
            :style="{ width: '20px', height: '20px', backgroundColor: 'var(--body)', }"
          ></div>Step 3</step>
        <step>
          <div
            slot="active-icon"
            :style="{ width: '20px', height: '20px', backgroundColor: 'var(--danger)', }"
          ></div>
          <div
            slot="finish-icon"
            :style="{ width: '20px', height: '20px', backgroundColor: 'var(--success)', }"
          ></div>
          <div
            slot="inactive-icon"
            :style="{ width: '20px', height: '20px', backgroundColor: 'var(--body)', }"
          ></div>Step 4</step>
   </steps>
Copy the code

Effect: