# @wines/cell-group

> The cell-group @wines

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

## Install

```sh
npm install @wines/cell-group
pnpm add @wines/cell-group
yarn add @wines/cell-group
bun add @wines/cell-group
```

## 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 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM |
| Node | >=16.0.0 |
| Dependencies | 2 |
| Unpacked size | 21.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | tianyingchun |

## Links

- npm: https://www.npmjs.com/package/@wines/cell-group
- Repository: https://gitlab.itcjf.com/wines/cell-group
- npm.io page: https://npm.io/package/@wines/cell-group

## Dependencies (2)

- [@wines/core](https://npm.io/package/@wines/core.md) 2.0.0
- [@wines/styles](https://npm.io/package/@wines/styles.md) 2.0.0

## Recent versions

- 2.0.0 (latest) — 2025-04-01
- 2.0.0-next.7 (next) — 2025-04-01
- 2.0.0-next.6 — 2025-03-06
- 2.0.0-next.5 — 2025-03-05
- 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.5.1 — 2023-03-07
- 1.5.0 — 2022-11-22
- 1.4.0 — 2022-02-23
- 1.3.5 — 2021-12-03
- 1.3.2 — 2021-09-24
- 1.3.1 — 2021-04-25
- … 1 more at https://npm.io/package/@wines/cell-group/versions

## README

# `@wines/cell-group`

# 单元格组 (List 列表)

基础布局组件，布局时基于 `cell-group` 和 `cell` 来定义信息区块的外部框架。

## 使用指南

### 在 page.json 中引入组件

```json
{
  "navigationBarTitleText": "List Cell Group",
  "usingComponents": {
    "wux-cell": "@wines/cell",
    "wux-cell-group": "@wines/cell-group"
  }
}
```

### 示例

```xml
<view class="page">
	<view class="page__hd">
		<view class="page__title">List</view>
		<view class="page__desc">列表</view>
	</view>
	<view class="page__bd">
		<wux-cell-group title="带说明的列表项">
			<wux-cell title="标题文字" />
			<wux-cell title="禁用状态" disabled></wux-cell>
		</wux-cell-group>
		<wux-cell-group title="带图标、说明的列表项">
			<wux-cell thumb="http://cdn.skyvow.cn/logo.png" title="标题文字" extra="说明文字" />
			<wux-cell thumb="http://cdn.skyvow.cn/logo.png" title="标题文字" extra="说明文字" />
		</wux-cell-group>
		<wux-cell-group title="带跳转的列表项" label="底部说明文字">
			<wux-cell title="标题文字" is-link extra="说明文字" />
			<wux-cell
			 title="标题文字"
			 is-link
			 label="附加描述"
			 extra="说明文字"
			/>
			<wux-cell title="只显示箭头" is-link></wux-cell>
			<wux-cell
			 title="跳转到首页"
			 is-link
			 url="/pages/index/index"
			 open-type="switchTab"
			/>
		</wux-cell-group>
		<wux-cell-group title="微信开放能力">
			<wux-cell
			 title="打开客服会话"
			 is-link
			 open-type="contact"
			 bind:contact="onContact"
			/>
			<wux-cell title="触发用户转发" is-link open-type="share" />
			<wux-cell
			 title="获取用户信息"
			 is-link
			 open-type="getUserInfo"
			 bind:getuserinfo="onGotUserInfo"
			/>
			<wux-cell
			 title="获取用户手机号"
			 is-link
			 open-type="getPhoneNumber"
			 bind:getphonenumber="onGotPhoneNumber"
			/>
		</wux-cell-group>
	</view>
</view>


```

## API

### CellGroup props

| 参数      | 类型     | 描述           | 默认值         |
| --------- | -------- | -------------- | -------------- |
| prefixCls | `string` | 自定义类名前缀 | wux-cell-group |
| title     | `string` | 标题           | -              |
| label     | `string` | 描述           | -              |

### CellGroup externalClasses

| 名称      | 描述         |
| --------- | ------------ |
| wux-class | 根节点样式类 |

### Cell props

| 参数                 | 类型       | 描述                                                                                                                                                                               | 默认值       |
| -------------------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ |
| prefixCls            | `string`   | 自定义类名前缀                                                                                                                                                                     | wux-cell     |
| disabled             | `boolean`  | 是否禁用                                                                                                                                                                           | false        |
| openType             | `string`   | 跳转方式，可选值为 navigateTo、redirectTo、switchTab、navigateBack、reLaunch；微信开放能力，可选值为 contact、share、getUserInfo、getPhoneNumber、launchApp、openSetting、feedback | navigateTo   |
| hoverClass           | `string`   | 指定按下去的样式类。当 hover-class="none" 时，没有点击态效果                                                                                                                       | default      |
| hoverStopPropagation | `boolean`  | 指定是否阻止本节点的祖先节点出现点击态                                                                                                                                             | false        |
| hoverStartTime       | `number`   | 按住后多久出现点击态，单位毫秒                                                                                                                                                     | 20           |
| hoverStayTime        | `number`   | 手指松开后点击态保留时间，单位毫秒                                                                                                                                                 | 70           |
| lang                 | `string`   | 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。                                                                                                                  | en           |
| sessionFrom          | `string`   | 会话来源                                                                                                                                                                           | -            |
| sendMessageTitle     | `string`   | 会话内消息卡片标题                                                                                                                                                                 | 当前标题     |
| sendMessagePath      | `string`   | 会话内消息卡片点击跳转小程序路径                                                                                                                                                   | 当前分享路径 |
| sendMessageImg       | `string`   | 会话内消息卡片图片                                                                                                                                                                 | 截图         |
| showMessageCard      | `boolean`  | 显示会话内消息卡片                                                                                                                                                                 | false        |
| appParameter         | `string`   | 打开 APP 时，向 APP 传递的参数                                                                                                                                                     | -            |
| thumb                | `string`   | 左侧缩略图                                                                                                                                                                         | -            |
| title                | `string`   | 左侧标题                                                                                                                                                                           | -            |
| label                | `string`   | 标题下方的描述信息                                                                                                                                                                 | -            |
| extra                | `string`   | 右侧内容                                                                                                                                                                           | -            |
| hasLine              | `boolean`  | 是否有底部横线                                                                                                                                                                     | true         |
| isLink               | `boolean`  | 是否展示右侧箭头并开启尝试以 url 跳转                                                                                                                                              | -            |
| url                  | `string`   | 跳转链接                                                                                                                                                                           | -            |
| delta                | `number`   | 当 open-type 为 'navigateBack' 时有效，表示回退的层数                                                                                                                              | 1            |
| bind:click           | `function` | 点击事件                                                                                                                                                                           | -            |
| bind:getuserinfo     | `function` | 用户点击该按钮时，会返回获取到的用户信息，回调的detail数据与wx.getUserInfo返回的一致                                                                                               | -            |
| bind:contact         | `function` | 客服消息回调                                                                                                                                                                       | -            |
| bind:getphonenumber  | `function` | 获取用户手机号回调                                                                                                                                                                 | -            |
| bind:error           | `function` | 当使用开放能力时，发生错误的回调                                                                                                                                                   | -            |
| bind:opensetting     | `function` | 在打开授权设置页后回调                                                                                                                                                             | -            |

> 更多参数说明请参考微信官方的表单组件 [Button](https://developers.weixin.qq.com/miniprogram/dev/component/button.html)。

### Cell slot

| 名称   | 描述             |
| ------ | ---------------- |
| -      | 自定义标题或描述 |
| header | 自定义左侧缩略图 |
| footer | 自定义右侧内容   |

### Cell externalClasses

| 名称      | 描述         |
| --------- | ------------ |
| wux-class | 根节点样式类 |

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