# @wines/split-pane

> The split-pane @wines

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

## Install

```sh
npm install @wines/split-pane
pnpm add @wines/split-pane
yarn add @wines/split-pane
bun add @wines/split-pane
```

## 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 | 3 |
| Unpacked size | 46.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | tianyingchun |

## Links

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

## Dependencies (3)

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

## 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/split-pane/versions

## README

# `@wines/split-pane`

# SplitPane 分屏

适用于固定屏幕高度拆分成上下,左右的屏幕,保持每个小块屏幕有一个固定的绝对高度.

## 使用指南

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

```json
{
  "navigationBarTitleText": "VirtualList",
  "usingComponents": {
    "wux-icon": "@wines/icon",
    "wux-badge": "@wines/badge",
    "wux-tabbar": "@wines/tabbar",
    "wux-tabbar-item": "@wines/tabbar/item",
    "wux-split-pane": "@wines/split-pane",
    "wux-split-pane-item": "@wines/split-pane/item"
  }
}
```

### 示例

```xml
<wux-split-pane
 wux-class="page"
 default-size="{{46}}"
 primary="second"
 bindchange="onSplitPaneChange"
>
	<wux-split-pane-item type="first">
		<swiper style="height:{{first}}px" current="{{ index }}" bindchange="onSwiperChange">
			<swiper-item catchtouchmove="stopTouchMove">
				<scroll-view style="height:{{first}}px" scroll-y class="content">
					<view class="item" wx:for="{{items}}" wx:key="index">
						<view class="index">{{ '#' + item }}</view>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item>
				<view class="content">content2</view>
			</swiper-item>
			<swiper-item>
				<view class="content">content3</view>
			</swiper-item>
		</swiper>
	</wux-split-pane-item>
	<wux-split-pane-item type="second">
		<wux-tabbar
		 id="wux-tabbar"
		 safeArea
		 controlled
		 current="{{index}}"
		 position="bottom"
		 bindchange="onChange"
		 backgroundColor="#000"
		>
			<wux-tabbar-item title="Tab 1">
				<wux-badge count="1" slot="icon-on">
					<wux-icon wux-class="icon" type="ios-home" size="22" />
				</wux-badge>
				<wux-badge count="1" slot="icon-off">
					<wux-icon wux-class="icon" type="ios-home" size="22" />
				</wux-badge>
			</wux-tabbar-item>
			<wux-tabbar-item title="Tab 2">
				<wux-badge dot slot="icon-on">
					<wux-icon wux-class="icon" type="ios-home" size="22" />
				</wux-badge>
				<wux-badge dot slot="icon-off">
					<wux-icon wux-class="icon" type="ios-home" size="22" />
				</wux-badge>
			</wux-tabbar-item>
			<wux-tabbar-item title="Tab 3">
				<wux-icon
				 wux-class="icon"
				 type="ios-home"
				 size="22"
				 slot="icon-on"
				/>
				<wux-icon
				 wux-class="icon"
				 type="ios-home"
				 size="22"
				 slot="icon-off"
				/>
			</wux-tabbar-item>
		</wux-tabbar>
	</wux-split-pane-item>
</wux-split-pane>

```

```ts
import './tabbar.less';
const getItems = (count = 60): number[] => {
  const items: number[] = [];
  for (let i = 0; i < count; i++) {
    items.push(i);
  }
  return items;
};
Page({
  data: {
    index: 0,
    current: '0',
    first: 0,
    second: 46,
    items: [] as number[],
  },
  onLoad() {
    void this.loadData().then((items) => {
      this.setData({
        items,
      });
    });
  },
  loadData(): Promise<number[]> {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve(getItems());
      }, 1000);
    });
  },

  onSwiperChange(e) {
    console.log('onSwiperChange', e);
    const current = e.detail.current;
    this.setData({
      current: String(current),
      index: current,
    });
  },
  stopTouchMove() {
    /** */
  },
  onChange(e) {
    console.log('onChange', e);
    const current = e.detail.key;
    this.setData({
      current,
      index: parseInt(e.detail.key),
    });
  },
  onSplitPaneChange(e) {
    console.log('onSplitPaneChange:', e.detail);
    this.setData(e.detail);
  },
});
```

## API

### Split Pane Props

| 参数                  | 类型       | 描述                                                              | 默认值       |
| --------------------- | ---------- | ----------------------------------------------------------------- | ------------ |
| prefixCls             | `string`   | 自定义类名前缀                                                    | wux-steps    |
| split                 | `string`   | 分屏方式, 可选值 horizontal、vertical                             | `horizontal` |
| primary               | `string`   | 分屏计算辅助子项类型: "first" 、 "second"                         | `first`      |
| timerTotalRuns        | `number`   | 同步计时器的检测次数, 1次100 ms                                   | 5            |
| splitPaneSize         | `number`   | 分屏容器大小, 默认为0动态计算, 通常情况为windowHeight/windowWidth | 0            |
| autoCalcSplitPaneSize | `boolean`  | 开启自动计算容器的pane大小,`splitPaneSize=0` 生效                 | false        |
| defaultSize           | `number`   | 分屏计算辅助子项类型默认大小                                      | 46           |
| safeArea              | `string`   | 指定安全区域是顶部还是底部`top`、`bottom`                         | -            |
| bind:change           | `function` | 当前自容器的宽/高                                                 | -            |
| bind:visible          | `function` | SplitPane ready显示出来                                           | -            |

### Steps externalClasses

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

### Split Pane Item props

| 参数      | 类型     | 描述                             | 默认值   |
| --------- | -------- | -------------------------------- | -------- |
| prefixCls | `string` | 自定义类名前缀                   | wux-step |
| type      | `string` | `first`、`second` 分屏子组件类型 | `first`  |

### Split Pane Slot

| 名称 | 描述 |
| ---- | ---- |

### Split Pane Item Slot

| 名称 | 描述 |
| ---- | ---- |

### Split Pane externalClasses

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

### Split Pane Item externalClasses

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

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