# @wu-component/wu-steps

> > TODO: description

Latest version **2.0.3** (published 2023-12-11) · ISC license · 0 weekly downloads

## Install

```sh
npm install @wu-component/wu-steps
pnpm add @wu-component/wu-steps
yarn add @wu-component/wu-steps
bun add @wu-component/wu-steps
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.3 |
| Published | 2023-12-11 |
| First published | 2022-09-12 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >= 10 |
| Dependencies | 2 |
| Unpacked size | 120.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 218 |
| Author | Marvin |
| Maintainers | canyuegongzi |

## Links

- npm: https://www.npmjs.com/package/@wu-component/wu-steps
- Repository: https://github.com/wu-component/web-component-plus
- Homepage: https://github.com/wu-component/web-component-plus#readme
- Issues: https://github.com/wu-component/web-component-plus/issues
- npm.io page: https://npm.io/package/@wu-component/wu-steps

## Dependencies (2)

- [@wu-component/common](https://npm.io/package/@wu-component/common.md) latest
- [@wu-component/web-core-plus](https://npm.io/package/@wu-component/web-core-plus.md) latest

## Recent versions

- 2.0.3 (latest) — 2023-12-11
- 2.0.0 (next) — 2023-02-26
- 2.0.1 — 2023-02-26
- 1.11.8 — 2023-02-16
- 1.11.6 — 2023-02-15
- 1.11.4 — 2023-02-14
- 1.10.1 — 2023-02-13
- 1.9.24 — 2022-11-13
- 1.9.21 — 2022-11-12
- 1.9.20 — 2022-11-12
- 1.9.17 — 2022-11-12
- 1.9.1 — 2022-11-05
- 1.8.0 — 2022-10-27
- 1.7.0 — 2022-10-22
- 1.6.1 — 2022-10-16
- … 8 more at https://npm.io/package/@wu-component/wu-steps/versions

## README

## Tag 标签

用于标记和选择。

### 基础用法

::: demo
```html
<template>
    <div style="display: flex; align-items: center;justify-content: space-around;padding: 16px">
        <wu-plus-tag type="primary" effect="light" id="tag-id1">标签一</wu-plus-tag>
    </div>
</template>
<script>
</script>
```
:::

### 可移除标签

通过点击标签关闭按钮后触发的 close 事件。

::: demo
```html
<template>
    <div style="display: flex; align-items: center;justify-content: space-around;padding: 16px">
        <wu-plus-tag type="primary" closable="true" effect="light" id="tag-id1">标签一</wu-plus-tag>
    </div>
</template>
<script>
</script>
```
:::

### 不同尺寸

Tag 组件提供除了不同尺寸，可以在不同场景下选择合适的尺寸。

::: demo
```html
<template>
    <div style="display: flex; align-items: center;justify-content: space-around;padding: 16px">
        <wu-plus-tag type="primary" size="mini" effect="dark" id="tag-id5">标签一</wu-plus-tag>
        <wu-plus-tag type="primary" size="medium" effect="dark" id="tag-id5">标签一</wu-plus-tag>
        <wu-plus-tag type="primary" size="small" effect="dark" id="tag-id5">标签一</wu-plus-tag>
    </div>
</template>
<script>
</script>
```
:::

### 不同主题

Tag 组件提供了三个不同的主题：dark、light 和 plain， 通过设置effect属性来改变主题。

::: demo
```html
<template>
    <div style="display: flex; align-items: center;justify-content: space-around;padding: 16px">
        <wu-plus-tag type="primary" effect="dark" id="tag-id9">标签一</wu-plus-tag>
        <wu-plus-tag type="primary" effect="light " id="tag-id10">标签二</wu-plus-tag>
        <wu-plus-tag type="primary" effect="plain " id="tag-id11">标签三</wu-plus-tag>
    </div>
</template>
<script>
</script>
```
:::

### Attributes

| 参数      | 说明    | 类型      | 可选值       | 默认值   |
|---------- |-------- |---------- |-------------  |-------- |
| type  | 类型 | TypeEnums | "success"、"info"、"warning"、 "danger"  | -- |
| effect  | 主题 | EffectEnums |"dark"、"light"、"plain"  | "light" |
| closable | 是否可关闭 | Boolean | true、false | false |
| disable-transitions | 是否禁用渐变动画 | Boolean | true、false | false |
| hit | 是否有边框描边 | Boolean | true、false | false |
| color | 背景色 | String | -- | -- |
| size | 组件大小 | UISize | medium、small、mini | mini |
| name | switch 对应的 name 属性 | String | -- | -- |

### Event

| 事件名      | 说明    | 参数     | 
|---------- |-------- |---------- |
| click | 点击 Tag 时触发的事件 | (event: CustomEvent) => void |
| close | 关闭 Tag 时触发的事件 | (event: CustomEvent) => void |

---
_Source: https://npm.io/package/@wu-component/wu-steps · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._