Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mujahidfa/vue-resizable-panels
An intuitive resizable panel groups/layouts components for Vue.
https://github.com/mujahidfa/vue-resizable-panels
typescript vue vue-components vue3 vuejs vuejs-components
Last synced: about 1 month ago
JSON representation
An intuitive resizable panel groups/layouts components for Vue.
- Host: GitHub
- URL: https://github.com/mujahidfa/vue-resizable-panels
- Owner: mujahidfa
- Created: 2023-01-10T06:48:57.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-04-16T02:24:00.000Z (over 1 year ago)
- Last Synced: 2024-10-05T12:15:58.745Z (about 1 month ago)
- Topics: typescript, vue, vue-components, vue3, vuejs, vuejs-components
- Language: TypeScript
- Homepage:
- Size: 121 KB
- Stars: 24
- Watchers: 2
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# vue-resizable-panels
An intuitive resizable panel groups/layouts components for Vue.
Based on [react-resizable-panels](https://github.com/bvaughn/react-resizable-panels).
## Installation
Install the package:
```sh
npm install vue-resizable-panels
# or
pnpm install vue-resizable-panels
# or
yarn add vue-resizable-panels
```
Import the components directly:
```vue
import { Panel, PanelGroup, PanelResizeHandle } from "vue-resizable-panels";
left
middle
right
```
For more examples, check out the [demo](./packages/demo/src/App.vue).
For API reference, check out the [react-resizable-panels's docs](https://github.com/bvaughn/react-resizable-panels/tree/main/packages/react-resizable-panels). The API is almost exactly the same, with minor differences as follows:
- No `children` prop. This is taken care of by [slots in Vue](https://vuejs.org/guide/components/slots.html).
- No `className` prop. You can freely pass CSS classes via the `class` attribute as Vue inherits attributes by default.
## Development
```sh
pnpm install
cd packages/vue-resizable-panels/
pnpm dev
pnpm build
cd ../demo/
pnpm dev
```
## Credits
This project was heavily inspired by the [react-resizable-panels](https://github.com/bvaughn/react-resizable-panels) library so please give some love to the library as well!
Credits to [@bvaughn](https://twitter.com/brian_d_vaughn) ([GitHub](https://github.com/bvaughn)) for creating [react-resizable-panels](https://github.com/bvaughn/react-resizable-panels)!