mirror of
https://github.com/mathuo/dockview
synced 2025-01-22 17:35:57 +00:00
ffddc95602
* chore: 1.9.0 docs
59 lines
2.1 KiB
Markdown
59 lines
2.1 KiB
Markdown
<div align="center">
|
|
<h1>dockview</h1>
|
|
|
|
<p>Zero dependency layout manager supporting tabs, groups, grids and splitviews with ReactJS support written in TypeScript</p>
|
|
|
|
</div>
|
|
|
|
---
|
|
|
|
[![npm version](https://badge.fury.io/js/dockview.svg)](https://www.npmjs.com/package/dockview)
|
|
[![npm](https://img.shields.io/npm/dm/dockview)](https://www.npmjs.com/package/dockview)
|
|
[![CI Build](https://github.com/mathuo/dockview/workflows/CI/badge.svg)](https://github.com/mathuo/dockview/actions?query=workflow%3ACI)
|
|
[![Coverage](https://sonarcloud.io/api/project_badges/measure?project=mathuo_dockview&metric=coverage)](https://sonarcloud.io/summary/overall?id=mathuo_dockview)
|
|
[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=mathuo_dockview&metric=alert_status)](https://sonarcloud.io/summary/overall?id=mathuo_dockview)
|
|
[![Bundle Phobia](https://badgen.net/bundlephobia/minzip/dockview)](https://bundlephobia.com/result?p=dockview)
|
|
|
|
##
|
|
|
|
![](packages/docs/static/img/splashscreen.gif)
|
|
|
|
Please see the website: https://dockview.dev
|
|
|
|
## Features
|
|
|
|
- Serialization / deserialization with full layout management
|
|
- Support for split-views, grid-views and 'dockable' views
|
|
- Themeable and customizable
|
|
- Tab and Group docking / Drag n' Drop
|
|
- Popout Windows
|
|
- Floating Groups
|
|
- Extensive API
|
|
- Supports Shadow DOMs
|
|
- High test coverage
|
|
- Documentation website with live examples
|
|
- Transparent builds and Code Analysis
|
|
- Security at mind - verifed publishing and builds through GitHub Actions
|
|
|
|
Want to verify our builds? Go [here](https://www.npmjs.com/package/dockview#Provenance).
|
|
|
|
## Quick start
|
|
|
|
Dockview has a peer dependency on `react >= 16.8.0` and `react-dom >= 16.8.0`. You can install dockview from [npm](https://www.npmjs.com/package/dockview).
|
|
|
|
```
|
|
npm install --save dockview
|
|
```
|
|
|
|
Within your project you must import or reference the stylesheet at `dockview/dist/styles/dockview.css` and attach a theme.
|
|
|
|
```css
|
|
@import '~dockview/dist/styles/dockview.css';
|
|
```
|
|
|
|
You should also attach a dockview theme to an element containing your components. For example:
|
|
|
|
```html
|
|
<body classname="dockview-theme-dark"></body>
|
|
```
|