|
1 | | -# @rc-component/overflow 🐾 |
2 | | - |
3 | | -[![NPM version][npm-image]][npm-url] |
4 | | -[![npm download][download-image]][download-url] |
5 | | -[![build status][github-actions-image]][github-actions-url] |
6 | | -[![Codecov][codecov-image]][codecov-url] |
7 | | -[![bundle size][bundlephobia-image]][bundlephobia-url] |
8 | | -[![dumi][dumi-image]][dumi-url] |
9 | | - |
10 | | -[npm-image]: http://img.shields.io/npm/v/@rc-component/overflow.svg?style=flat-square |
11 | | -[npm-url]: http://npmjs.org/package/@rc-component/overflow |
12 | | -[github-actions-image]: https://github.com/react-component/overflow/workflows/CI/badge.svg |
13 | | -[github-actions-url]: https://github.com/react-component/overflow/actions |
14 | | -[codecov-image]: https://img.shields.io/codecov/c/github/react-component/overflow/master.svg?style=flat-square |
15 | | -[codecov-url]: https://codecov.io/gh/react-component/overflow/branch/master |
16 | | -[david-url]: https://david-dm.org/react-component/overflow |
17 | | -[david-image]: https://david-dm.org/react-component/overflow/status.svg?style=flat-square |
18 | | -[david-dev-url]: https://david-dm.org/react-component/overflow?type=dev |
19 | | -[david-dev-image]: https://david-dm.org/react-component/overflow/dev-status.svg?style=flat-square |
20 | | -[download-image]: https://img.shields.io/npm/dm/@rc-component/overflow.svg?style=flat-square |
21 | | -[download-url]: https://npmjs.org/package/@rc-component/overflow |
22 | | -[bundlephobia-url]: https://bundlephobia.com/result?p=@rc-component/overflow |
23 | | -[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/@rc-component/overflow |
24 | | -[dumi-url]: https://github.com/umijs/dumi |
25 | | -[dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square |
26 | | - |
27 | | -Auto collapse box when overflow |
28 | | - |
29 | | -## Live Demo |
30 | | - |
31 | | -https://overflow-react-component.vercel.app/ |
| 1 | +<div align="center"> |
| 2 | + <h1>@rc-component/overflow</h1> |
| 3 | + <p><sub><a href="https://ant.design"><img alt="Ant Design" height="14" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" style="vertical-align: -0.125em;" /></a> Part of the Ant Design ecosystem.</sub></p> |
| 4 | + <p>📦 Auto-collapse React layout primitive for rendering visible items and overflow indicators.</p> |
| 5 | + |
| 6 | + <p> |
| 7 | + <a href="https://npmjs.org/package/@rc-component/overflow"><img alt="NPM version" src="https://img.shields.io/npm/v/@rc-component/overflow.svg?style=flat-square"></a> |
| 8 | + <a href="https://npmjs.org/package/@rc-component/overflow"><img alt="npm downloads" src="https://img.shields.io/npm/dm/@rc-component/overflow.svg?style=flat-square"></a> |
| 9 | + <a href="https://github.com/react-component/overflow/actions/workflows/test.yml"><img alt="build status" src="https://github.com/react-component/overflow/actions/workflows/test.yml/badge.svg"></a> |
| 10 | + <a href="https://app.codecov.io/gh/react-component/overflow"><img alt="Codecov" src="https://img.shields.io/codecov/c/github/react-component/overflow/master.svg?style=flat-square"></a> |
| 11 | + <a href="https://bundlephobia.com/package/@rc-component/overflow"><img alt="bundle size" src="https://img.shields.io/bundlephobia/minzip/@rc-component/overflow?style=flat-square"></a> |
| 12 | + <a href="https://github.com/umijs/dumi"><img alt="dumi" src="https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square"></a> |
| 13 | + </p> |
| 14 | +</div> |
| 15 | + |
| 16 | +<p align="center">English | [简体中文](./README.zh-CN.md)</p> |
| 17 | + |
| 18 | +## Highlights |
| 19 | + |
| 20 | +| Area | Support | |
| 21 | +| ------- | ----------------------------------------------------------------------------------------- | |
| 22 | +| Purpose | Auto-collapse React layout primitive for rendering visible items and overflow indicators. | |
| 23 | +| Package | `@rc-component/overflow` | |
| 24 | +| Release | `@rc-component/np` / `rc-np` | |
32 | 25 |
|
33 | 26 | ## Install |
34 | 27 |
|
35 | | -[](https://npmjs.org/package/@rc-component/overflow) |
| 28 | +```bash |
| 29 | +npm install @rc-component/overflow |
| 30 | +``` |
36 | 31 |
|
37 | 32 | ## Usage |
38 | 33 |
|
39 | | -```ts |
40 | | -// TODO |
| 34 | +```tsx | pure |
| 35 | +import Overflow from '@rc-component/overflow'; |
| 36 | + |
| 37 | +export default () => ( |
| 38 | + <Overflow |
| 39 | + data={[1, 2, 3]} |
| 40 | + renderItem={item => <span>{item}</span>} |
| 41 | + renderRest={items => <span>+{items.length}</span>} |
| 42 | + /> |
| 43 | +); |
41 | 44 | ``` |
42 | 45 |
|
43 | 46 | ## API |
44 | 47 |
|
45 | | -| Property | Type | Default | Description | |
46 | | -| -------- | ---- | ------- | ----------- | |
| 48 | +| Prop | Description | |
| 49 | +| ------------ | -------------------------------- | |
| 50 | +| `data` | Items rendered by Overflow. | |
| 51 | +| `renderItem` | Render a visible item. | |
| 52 | +| `renderRest` | Render collapsed overflow items. | |
47 | 53 |
|
48 | 54 | ## Development |
49 | 55 |
|
50 | | -``` |
| 56 | +```bash |
51 | 57 | npm install |
52 | 58 | npm start |
| 59 | +npm test |
| 60 | +npm run lint |
| 61 | +npm run tsc |
| 62 | +npm run compile |
| 63 | +``` |
| 64 | + |
| 65 | +The dumi site runs at `http://localhost:8000`. |
| 66 | + |
| 67 | +## Release |
| 68 | + |
| 69 | +```bash |
| 70 | +npm run prepublishOnly |
53 | 71 | ``` |
54 | 72 |
|
| 73 | +The release flow is handled by `@rc-component/np` through the `rc-np` command when the package uses the shared release flow. |
| 74 | + |
55 | 75 | ## License |
56 | 76 |
|
57 | | -@rc-component/overflow is released under the MIT license. |
| 77 | +@rc-component/overflow is released under the [MIT](./LICENSE.md) license. |
0 commit comments