rei-mirrors/dockview
1
0
Fork 0
mirror of https://github.com/mathuo/dockview synced 2025-08-14 13:16:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: update README

Browse Source
This commit is contained in:
mathuo 2021-10-31 21:29:07 +00:00
parent f1ec5dfe4f
commit bcb16f0fc4
No known key found for this signature in database
GPG Key ID: C6EEDEFD6CA07281
2 changed files with 74 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
README.md
View File

@ -9,20 +9,20 @@
[![npm version](https://badge.fury.io/js/dockview.svg)](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/dashboard?id=mathuo_dockview)
[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=mathuo_dockview&metric=alert_status)](https://sonarcloud.io/dashboard?id=mathuo_dockview)
[![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)
##
A zero dependency layout manager based on the layering of splitview with support for ReactJS components, written in TypeScript.
- Live demo [➡️](https://mathuo.github.io/dockview/)
- Storybook demo [➡️](https://mathuo.github.io/dockview/output/storybook-static)
- Code examples [➡️](https://github.com/mathuo/dockview/tree/master/packages/dockview-demo/src/stories)
- Generated TypeDocs [➡️](https://mathuo.github.io/dockview/output/docs/index.html)
- [➡️](https://mathuo.github.io/dockview/) Live demo
- [➡️](https://mathuo.github.io/dockview/output/storybook-static) Storybook demo
- [➡️](https://github.com/mathuo/dockview/tree/master/packages/dockview-demo/src/stories) Code examples
- [➡️](https://mathuo.github.io/dockview/output/docs/index.html) Generated TypeDocs
Want to inspect the latest deployement? Go to https://unpkg.com/browse/dockview@latest/
Want to inspect the latest deployment? Go to https://unpkg.com/browse/dockview@latest/
## Features
@ -47,7 +47,7 @@ This project was inspired by many popular IDE editors. Some parts of the core re
## Quick start
You can install the project from [npm](https://www.npmjs.com/package/dockview).
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
@ -62,11 +62,9 @@ Within your project you must import or reference the stylesheet at `dockview/dis
You should also attach a dockview theme to an element containing your components. For example:
```html
<body classname="dockview-theme-light"></body>
<body classname="dockview-theme-dark"></body>
```
dockview has a peer dependency on `react >= 16.8.0` and `react-dom >= 16.8.0` which is the version that introduced [React Hooks](https://reactjs.org/docs/hooks-intro.html).
## Sandbox examples
- [Dockview](https://codesandbox.io/s/simple-dockview-t6491)
@ -84,35 +82,34 @@ See example [here](https://codesandbox.io/s/workspace-saving-example-euo5d).
The theme can be customized using the below set of CSS properties. You can find the built in themes [here](https://github.com/mathuo/dockview/blob/master/packages/dockview/src/theme.scss) which could be used as an example to extend upon or build your own theme.
| CSS Property | Description |
| ------------------------------------------------ | ------------------------------------------------------------------------------------- |
| **General** |
| --dv-active-sash-color | The background color a dividing sash during an interaction |
| --dv-separator-border | The color of the seperator between panels |
| **Paneview** |
| --dv-paneview-header-border-color | - |
| --dv-paneview-active-outline-color | The primary accent color, used for example to highlight the active panel in Paneviews |
| **Dockview -> Dragging** |
| --dv-drag-over-background-color | The overlay color applied to a group when a moving tab is dragged over |
| **Dockview -> Tabs container** |
| --dv-tabs-and-actions-container-font-size | - |
| --dv-tabs-and-actions-container-height | Default tab height |
| --dv-tabs-and-actions-container-background-color | - |
| --dv-tabs-container-scrollbar-color | - |
| --dv-group-view-background-color | - |
| **Dockview -> Tabs** (see [dockviewComponent.scss](https://github.com/mathuo/dockview/blob/master/packages/dockview/src/dockview/dockviewComponent.scss))
| --dv-activegroup-visiblepanel-tab-background-color | The background color of the tab for the visible panel in the active group |
| --dv-activegroup-hiddenpanel-tab-background-color | The background color of the tab for the hidden panel/s in the active group |
| --dv-inactivegroup-visiblepanel-tab-background-color | The background color of the tab for the visible panel in groups other than the active group |
| --dv-inactivegroup-hiddenpanel-tab-background-color | The background color of the tab for the hidden panel/s in groups other than the active group |
| --dv-activegroup-visiblepanel-tab-color | The color of the tab for the visible panel in the active group |
| --dv-activegroup-hiddenpanel-tab-color | The color of the tab for the hidden panel/s in the active group |
| --dv-inactivegroup-visiblepanel-tab-color | The color of the tab for the visible panel in groups other than the active group |
| --dv-inactivegroup-hiddenpanel-tab-color | The color of the tab for the hidden panel/s in groups other than the active group |
| --dv-tab-divider-color | - |
| --dv-tab-close-icon | Default tab close icon |
| --dv-tab-dirty-icon | Default tab dirty icon |
| CSS Property | Description |
| ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| **General** |
| --dv-active-sash-color | The background color a dividing sash during an interaction |
| --dv-separator-border | The color of the seperator between panels |
| **Paneview** |
| --dv-paneview-header-border-color | - |
| --dv-paneview-active-outline-color | The primary accent color, used for example to highlight the active panel in Paneviews |
| **Dockview -> Dragging** |
| --dv-drag-over-background-color | The overlay color applied to a group when a moving tab is dragged over |
| **Dockview -> Tabs container** |
| --dv-tabs-and-actions-container-font-size | - |
| --dv-tabs-and-actions-container-height | Default tab height |
| --dv-tabs-and-actions-container-background-color | - |
| --dv-tabs-container-scrollbar-color | - |
| --dv-group-view-background-color | - |
| **Dockview -> Tabs** | (see [dockviewComponent.scss](https://github.com/mathuo/dockview/blob/master/packages/dockview/src/dockview/dockviewComponent.scss)) |
| --dv-activegroup-visiblepanel-tab-background-color | The background color of the tab for the visible panel in the active group |
| --dv-activegroup-hiddenpanel-tab-background-color | The background color of the tab for the hidden panel/s in the active group |
| --dv-inactivegroup-visiblepanel-tab-background-color | The background color of the tab for the visible panel in groups other than the active group |
| --dv-inactivegroup-hiddenpanel-tab-background-color | The background color of the tab for the hidden panel/s in groups other than the active group |
| --dv-activegroup-visiblepanel-tab-color | The color of the tab for the visible panel in the active group |
| --dv-activegroup-hiddenpanel-tab-color | The color of the tab for the hidden panel/s in the active group |
| --dv-inactivegroup-visiblepanel-tab-color | The color of the tab for the visible panel in groups other than the active group |
| --dv-inactivegroup-hiddenpanel-tab-color | The color of the tab for the hidden panel/s in groups other than the active group |
| --dv-tab-divider-color | - |
| --dv-tab-close-icon | Default tab close icon |
| --dv-tab-dirty-icon | Default tab dirty icon |
## Performance

77
packages/dockview/README.md
View File

@ -9,20 +9,20 @@
[![npm version](https://badge.fury.io/js/dockview.svg)](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/dashboard?id=mathuo_dockview)
[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=mathuo_dockview&metric=alert_status)](https://sonarcloud.io/dashboard?id=mathuo_dockview)
[![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)
##
A zero dependency layout manager based on the layering of splitview with support for ReactJS components, written in TypeScript.
- Live demo [➡️](https://mathuo.github.io/dockview/)
- Storybook demo [➡️](https://mathuo.github.io/dockview/output/storybook-static)
- Code examples [➡️](https://github.com/mathuo/dockview/tree/master/packages/dockview-demo/src/stories)
- Generated TypeDocs [➡️](https://mathuo.github.io/dockview/output/docs/index.html)
- [➡️](https://mathuo.github.io/dockview/) Live demo
- [➡️](https://mathuo.github.io/dockview/output/storybook-static) Storybook demo
- [➡️](https://github.com/mathuo/dockview/tree/master/packages/dockview-demo/src/stories) Code examples
- [➡️](https://mathuo.github.io/dockview/output/docs/index.html) Generated TypeDocs
Want to inspect the latest deployement? Go to https://unpkg.com/browse/dockview@latest/
Want to inspect the latest deployment? Go to https://unpkg.com/browse/dockview@latest/
## Features
@ -47,7 +47,7 @@ This project was inspired by many popular IDE editors. Some parts of the core re
## Quick start
You can install the project from [npm](https://www.npmjs.com/package/dockview).
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
@ -62,11 +62,9 @@ Within your project you must import or reference the stylesheet at `dockview/dis
You should also attach a dockview theme to an element containing your components. For example:
```html
<body classname="dockview-theme-light"></body>
<body classname="dockview-theme-dark"></body>
```
dockview has a peer dependency on `react >= 16.8.0` and `react-dom >= 16.8.0` which is the version that introduced [React Hooks](https://reactjs.org/docs/hooks-intro.html).
## Sandbox examples
- [Dockview](https://codesandbox.io/s/simple-dockview-t6491)
@ -84,35 +82,34 @@ See example [here](https://codesandbox.io/s/workspace-saving-example-euo5d).
The theme can be customized using the below set of CSS properties. You can find the built in themes [here](https://github.com/mathuo/dockview/blob/master/packages/dockview/src/theme.scss) which could be used as an example to extend upon or build your own theme.
| CSS Property | Description |
| ------------------------------------------------ | ------------------------------------------------------------------------------------- |
| **General** |
| --dv-active-sash-color | The background color a dividing sash during an interaction |
| --dv-separator-border | The color of the seperator between panels |
| **Paneview** |
| --dv-paneview-header-border-color | - |
| --dv-paneview-active-outline-color | The primary accent color, used for example to highlight the active panel in Paneviews |
| **Dockview -> Dragging** |
| --dv-drag-over-background-color | The overlay color applied to a group when a moving tab is dragged over |
| **Dockview -> Tabs container** |
| --dv-tabs-and-actions-container-font-size | - |
| --dv-tabs-and-actions-container-height | Default tab height |
| --dv-tabs-and-actions-container-background-color | - |
| --dv-tabs-container-scrollbar-color | - |
| --dv-group-view-background-color | - |
| **Dockview -> Tabs** (see [dockviewComponent.scss](https://github.com/mathuo/dockview/blob/master/packages/dockview/src/dockview/dockviewComponent.scss))
| --dv-activegroup-visiblepanel-tab-background-color | The background color of the tab for the visible panel in the active group |
| --dv-activegroup-hiddenpanel-tab-background-color | The background color of the tab for the hidden panel/s in the active group |
| --dv-inactivegroup-visiblepanel-tab-background-color | The background color of the tab for the visible panel in groups other than the active group |
| --dv-inactivegroup-hiddenpanel-tab-background-color | The background color of the tab for the hidden panel/s in groups other than the active group |
| --dv-activegroup-visiblepanel-tab-color | The color of the tab for the visible panel in the active group |
| --dv-activegroup-hiddenpanel-tab-color | The color of the tab for the hidden panel/s in the active group |
| --dv-inactivegroup-visiblepanel-tab-color | The color of the tab for the visible panel in groups other than the active group |
| --dv-inactivegroup-hiddenpanel-tab-color | The color of the tab for the hidden panel/s in groups other than the active group |
| --dv-tab-divider-color | - |
| --dv-tab-close-icon | Default tab close icon |
| --dv-tab-dirty-icon | Default tab dirty icon |
| CSS Property | Description |
| ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| **General** |
| --dv-active-sash-color | The background color a dividing sash during an interaction |
| --dv-separator-border | The color of the seperator between panels |
| **Paneview** |
| --dv-paneview-header-border-color | - |
| --dv-paneview-active-outline-color | The primary accent color, used for example to highlight the active panel in Paneviews |
| **Dockview -> Dragging** |
| --dv-drag-over-background-color | The overlay color applied to a group when a moving tab is dragged over |
| **Dockview -> Tabs container** |
| --dv-tabs-and-actions-container-font-size | - |
| --dv-tabs-and-actions-container-height | Default tab height |
| --dv-tabs-and-actions-container-background-color | - |
| --dv-tabs-container-scrollbar-color | - |
| --dv-group-view-background-color | - |
| **Dockview -> Tabs** | (see [dockviewComponent.scss](https://github.com/mathuo/dockview/blob/master/packages/dockview/src/dockview/dockviewComponent.scss)) |
| --dv-activegroup-visiblepanel-tab-background-color | The background color of the tab for the visible panel in the active group |
| --dv-activegroup-hiddenpanel-tab-background-color | The background color of the tab for the hidden panel/s in the active group |
| --dv-inactivegroup-visiblepanel-tab-background-color | The background color of the tab for the visible panel in groups other than the active group |
| --dv-inactivegroup-hiddenpanel-tab-background-color | The background color of the tab for the hidden panel/s in groups other than the active group |
| --dv-activegroup-visiblepanel-tab-color | The color of the tab for the visible panel in the active group |
| --dv-activegroup-hiddenpanel-tab-color | The color of the tab for the hidden panel/s in the active group |
| --dv-inactivegroup-visiblepanel-tab-color | The color of the tab for the visible panel in groups other than the active group |
| --dv-inactivegroup-hiddenpanel-tab-color | The color of the tab for the hidden panel/s in groups other than the active group |
| --dv-tab-divider-color | - |
| --dv-tab-close-icon | Default tab close icon |
| --dv-tab-dirty-icon | Default tab dirty icon |
## Performance