generated from arvinxx/npm-template
-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
16 changed files
with
196 additions
and
32 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,7 +1,7 @@ | ||
--- | ||
title: 更新日志 | ||
title: Changelog | ||
nav: | ||
title: 更新日志 | ||
title: Changelog | ||
order: 999 | ||
--- | ||
|
||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
--- | ||
title: 更新记录 | ||
nav: | ||
title: 更新记录 | ||
order: 999 | ||
--- | ||
|
||
<embed src="../CHANGELOG.md"></embed> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,48 @@ | ||
--- | ||
title: API | ||
group: | ||
title: 快速上手 | ||
order: 0 | ||
order: 0 | ||
nav: 快速上手 | ||
--- | ||
|
||
### Selectable | ||
|
||
| 参数 | 说明 | 类型 | 默认值 | | ||
| ---------------- | ----------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | ------------------- | | ||
| defaultValue | 默认已选择的值 | (string \| number)[] | - | | ||
| value | 受控已选择的值 | (string \| number)[] | - | | ||
| disabled | 是否禁用 | boolean | false | | ||
| mode | 模式 | `add` \| `remove` \| `reverse` | `add` | | ||
| selectFromInside | 是否可以从目标内部开始框选 | boolean | true | | ||
| getContainer | 指定容器,设置后,容器需要设置 `position`,因为选择框是 `absolute` 要相对于容器定位 | () => HTMLElement | () => document.body | | ||
| boxStyle | 框选框的样式 | React.CSSProperties | - | | ||
| boxClassName | 框选框的类名 | string | - | | ||
| onStart | 框选开始时触发的事件 | () => void | - | | ||
| onEnd | 框选结束时触发的事件 | (selectingValue: (string \| number)[], { added: (string \| number)[], removed: (string \| number)[] }) => void | - | | ||
|
||
### useSelectable | ||
|
||
```typescript | ||
const { setNodeRef, isSelected, isAdding, isRemoving, isSelecting, isDragging } = useSelectable({ | ||
value, | ||
disabled, | ||
rule, | ||
}); | ||
``` | ||
|
||
| 参数 | 说明 | 类型 | 默认值 | | ||
| -------- | -------------------- | -------------------------- | ----------- | | ||
| value | 当前可框选元素的值 | string \| number | - | | ||
| disabled | 是否禁用 | boolean | false | | ||
| rule | 选中规则,碰撞或包含 | `collision` \| `inclusion` | `collision` | | ||
|
||
| 参数 | 说明 | 类型 | | ||
| ----------- | ------------------ | -------------------------------------- | | ||
| setNodeRef | 设置当前可框选元素 | (element: HTMLElement \| null) => void | | ||
| isDragging | 是否正在框选 | boolean | | ||
| isSelected | 是否已经选中 | boolean | | ||
| isAdding | 当前是否正在添加 | boolean | | ||
| isRemoving | 当前是否正在删除 | boolean | | ||
| isSelecting | 当前是否被框选 | boolean | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
--- | ||
title: 基本使用 | ||
group: | ||
title: 示例 | ||
order: 1 | ||
order: 0 | ||
--- | ||
|
||
### 基本使用 | ||
|
||
<code src="../examples/basic.tsx"></code> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
--- | ||
title: 点击进行选择 | ||
group: | ||
title: 示例 | ||
order: 1 | ||
order: 5 | ||
--- | ||
|
||
### 可以添加 onClick 事件实现点击进行选择 | ||
|
||
<code src="../examples/click-to-select.tsx"></code> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
--- | ||
title: FAQ | ||
group: | ||
title: 快速上手 | ||
order: 0 | ||
order: 1 | ||
nav: 快速上手 | ||
--- | ||
|
||
### 为什么设置了样式 `user-select: none` 后,鼠标从设置了此样式的元素内部开始框选之后拖到容器边缘无法滚动? | ||
|
||
经过测试,这是 `chrome` 的行为,`safari` 则不会。如果想让文字无法被选择,推荐使用 `::selection` 选择器在容器内设置为 `background-color: transparent`。 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
--- | ||
title: 框选结束时重置 | ||
group: | ||
title: 示例 | ||
order: 1 | ||
order: 2 | ||
--- | ||
|
||
### 框选结束时重置之前的选择 | ||
|
||
<code src="../examples/reset-at-end.tsx"></code> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
--- | ||
title: 框选开始时重置 | ||
group: | ||
title: 示例 | ||
order: 1 | ||
order: 1 | ||
--- | ||
|
||
### 框选开始时重置之前的选择 | ||
|
||
<code src="../examples/reset-at-start.tsx"></code> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
--- | ||
title: 设置框选滚动的容器 | ||
group: | ||
title: 示例 | ||
order: 1 | ||
order: 3 | ||
--- | ||
|
||
### 可以设置框选滚动的容器 | ||
|
||
<code src="../examples/scroll-container.tsx"></code> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
--- | ||
title: 按住 shift 框选删除 | ||
group: | ||
title: 示例 | ||
order: 1 | ||
order: 4 | ||
--- | ||
|
||
### 按住 shift 框选进行删除 | ||
|
||
<code src="../examples/shift-remove.tsx"></code> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
--- | ||
title: 虚拟列表 | ||
group: | ||
title: 示例 | ||
order: 1 | ||
order: 6 | ||
--- | ||
|
||
### 配合 `react-window` 实现在虚拟列表中进行框选 | ||
|
||
<code src="../examples/virtual-list.tsx"></code> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
--- | ||
hero: | ||
title: react-selectable-box | ||
description: 一个可以用鼠标框选元素的 React 组件 | ||
actions: | ||
- text: 快速上手 | ||
link: /guides/api | ||
- text: Github | ||
link: https://github.com/linxianxi/react-selectable-box | ||
--- | ||
|
||
<embed src="../README.md"></embed> |