# @wines/styles

> The basic styles of @wines

Latest version **2.0.0** (published 2025-04-01) · 0 weekly downloads

## Install

```sh
npm install @wines/styles
pnpm add @wines/styles
yarn add @wines/styles
bun add @wines/styles
```

## Health

**Score 30/100 (F)** — status: maintenance-mode.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2025-04-01 |
| First published | 2021-04-25 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM |
| Dependencies | 0 |
| Unpacked size | 34.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | tianyingchun |
| Maintainers | tianyingchun |

## Links

- npm: https://www.npmjs.com/package/@wines/styles
- npm.io page: https://npm.io/package/@wines/styles

## Recent versions

- 2.0.0 (latest) — 2025-04-01
- 2.0.0-next.5 (next) — 2025-04-01
- 2.0.0-next.4 — 2025-03-05
- 2.0.0-next.3 — 2025-03-04
- 2.0.0-next.2 — 2025-02-28
- 2.0.0-next.1 — 2025-02-27
- 2.0.0-next.0 — 2025-02-27
- 1.3.0 — 2021-04-25

## README

# @wines/styles

#  Utility 工具类
`Wux Weapp` 提供了一些常用的样式，可以直接通过设置标签 `class` 的方式使用。

##  使用指南

### 在 page.wxss 中引入内置样式

```less
@import '@wines/styles/utility.less';
```
### Colors 颜色类

```xml
<!-- Color -->
<view class="wux-light">Light</view>
<view class="wux-stable">Stable</view>
<view class="wux-positive">Positive</view>
<view class="wux-calm">Calm</view>
<view class="wux-balanced">Balanced</view>
<view class="wux-energized">Energized</view>
<view class="wux-assertive">Assertive</view>
<view class="wux-royal">Royal</view>
<view class="wux-dark">Dark</view>
<!-- BackgroundColor -->
<view class="wux-light--bg">Light</view>
<view class="wux-stable--bg">Stable</view>
<view class="wux-positive--bg">Positive</view>
<view class="wux-calm--bg">Calm</view>
<view class="wux-balanced--bg">Balanced</view>
<view class="wux-energized--bg">Energized</view>
<view class="wux-assertive--bg">Assertive</view>
<view class="wux-royal--bg">Royal</view>
<view class="wux-dark--bg">Dark</view>
<!-- BorderColor -->
<view class="wux-light--border">Light</view>
<view class="wux-stable--border">Stable</view>
<view class="wux-positive--border">Positive</view>
<view class="wux-calm--border">Calm</view>
<view class="wux-balanced--border">Balanced</view>
<view class="wux-energized--border">Energized</view>
<view class="wux-assertive--border">Assertive</view>
<view class="wux-royal--border">Royal</view>
<view class="wux-dark--border">Dark</view>
```

### Alignment 文字对齐

```xml
<view class="wux-text--left">Left</view>
<view class="wux-text--right">Right</view>
<view class="wux-text--center">Center</view>
<view class="wux-text--justify">Justify</view>
<view class="wux-text--nowrap">Nowrap</view>

```

### Transformation 大小写转换

```xml
<view class="wux-text--lowercase">Lowercase</view>
<view class="wux-text--uppercase">Uppercase</view>
<view class="wux-text--capitalize">Capitalize</view>
```

### Ellipsis 文字省略

```xml
<view class="wux-ellipsis">One line: https://github.com/wux-weapp/wux-weapp</view>
<view class="wux-ellipsis--l2">Two lines: https://github.com/wux-weapp/wux-weapp</view>
<view class="wux-ellipsis--l3">Three lines: https://github.com/wux-weapp/wux-weapp</view>

```

### Floats 浮动类

```xml
<view class="wux-clearfix">Clearfix</view>
<view class="wux-pull-right">Pull right</view>
<view class="wux-pull-left">Pull left</view>
```

### Margin 边距类
```xml
<!-- top、right、bottom、left、vertical、horizontal (0 - 30) -->
<view class="wux-m--0">No margin</view>
<view class="wux-margin--0">No margin</view>
<view class="wux-mt--0">No margin top</view>
<view class="wux-margin-top--0">No margin top</view>
<view class="wux-p--0">No padding</view>
<view class="wux-padding--0">No padding</view>
<view class="wux-pt--0">No padding top</view>
<view class="wux-padding-top--0">No padding top</view>
```
### Hairline 1 像素边框

```xml
<view class="wux-hairline--top">Border-top</view>
<view class="wux-hairline--right">Border-right</view>
<view class="wux-hairline--bottom">Border-bottom</view>
<view class="wux-hairline--left">Border-left</view>
<view class="wux-hairline--horizontal">Horizontal border</view>
<view class="wux-hairline--vertical">Vertical border</view>
<view class="wux-hairline--surrounded">Surrounded border</view>
```

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