rei-mirrors/dockview
1
0
Fork 0
mirror of https://github.com/mathuo/dockview synced 2025-08-28 04:56:22 +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) [![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) [![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) [![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/dashboard?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) [![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. 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/) - [➡️](https://mathuo.github.io/dockview/) Live demo
- Storybook demo [➡️](https://mathuo.github.io/dockview/output/storybook-static) - [➡️](https://mathuo.github.io/dockview/output/storybook-static) Storybook demo
- Code examples [➡️](https://github.com/mathuo/dockview/tree/master/packages/dockview-demo/src/stories) - [➡️](https://github.com/mathuo/dockview/tree/master/packages/dockview-demo/src/stories) Code examples
- Generated TypeDocs [➡️](https://mathuo.github.io/dockview/output/docs/index.html) - [➡️](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 ## Features
@ -47,7 +47,7 @@ This project was inspired by many popular IDE editors. Some parts of the core re
## Quick start ## 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 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: You should also attach a dockview theme to an element containing your components. For example:
```html ```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 ## Sandbox examples
- [Dockview](https://codesandbox.io/s/simple-dockview-t6491) - [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. 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 | | CSS Property | Description |
| ------------------------------------------------ | ------------------------------------------------------------------------------------- | | ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| **General** | | **General** |
| --dv-active-sash-color | The background color a dividing sash during an interaction | | --dv-active-sash-color | The background color a dividing sash during an interaction |
| --dv-separator-border | The color of the seperator between panels | | --dv-separator-border | The color of the seperator between panels |
| **Paneview** | | **Paneview** |
| --dv-paneview-header-border-color | - | | --dv-paneview-header-border-color | - |
| --dv-paneview-active-outline-color | The primary accent color, used for example to highlight the active panel in Paneviews | | --dv-paneview-active-outline-color | The primary accent color, used for example to highlight the active panel in Paneviews |
| **Dockview -> Dragging** | | **Dockview -> Dragging** |
| --dv-drag-over-background-color | The overlay color applied to a group when a moving tab is dragged over | | --dv-drag-over-background-color | The overlay color applied to a group when a moving tab is dragged over |
| **Dockview -> Tabs container** | | **Dockview -> Tabs container** |
| --dv-tabs-and-actions-container-font-size | - | | --dv-tabs-and-actions-container-font-size | - |
| --dv-tabs-and-actions-container-height | Default tab height | | --dv-tabs-and-actions-container-height | Default tab height |
| --dv-tabs-and-actions-container-background-color | - | | --dv-tabs-and-actions-container-background-color | - |
| --dv-tabs-container-scrollbar-color | - | | --dv-tabs-container-scrollbar-color | - |
| --dv-group-view-background-color | - | | --dv-group-view-background-color | - |
| **Dockview -> Tabs** | (see [dockviewComponent.scss](https://github.com/mathuo/dockview/blob/master/packages/dockview/src/dockview/dockviewComponent.scss)) |
| **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-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-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-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-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-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-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-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-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-divider-color | - | | --dv-tab-close-icon | Default tab close icon |
| --dv-tab-close-icon | Default tab close icon | | --dv-tab-dirty-icon | Default tab dirty icon |
| --dv-tab-dirty-icon | Default tab dirty icon |
## Performance ## 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) [![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) [![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) [![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/dashboard?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) [![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. 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/) - [➡️](https://mathuo.github.io/dockview/) Live demo
- Storybook demo [➡️](https://mathuo.github.io/dockview/output/storybook-static) - [➡️](https://mathuo.github.io/dockview/output/storybook-static) Storybook demo
- Code examples [➡️](https://github.com/mathuo/dockview/tree/master/packages/dockview-demo/src/stories) - [➡️](https://github.com/mathuo/dockview/tree/master/packages/dockview-demo/src/stories) Code examples
- Generated TypeDocs [➡️](https://mathuo.github.io/dockview/output/docs/index.html) - [➡️](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 ## Features
@ -47,7 +47,7 @@ This project was inspired by many popular IDE editors. Some parts of the core re
## Quick start ## 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 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: You should also attach a dockview theme to an element containing your components. For example:
```html ```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 ## Sandbox examples
- [Dockview](https://codesandbox.io/s/simple-dockview-t6491) - [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. 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 | | CSS Property | Description |
| ------------------------------------------------ | ------------------------------------------------------------------------------------- | | ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| **General** | | **General** |
| --dv-active-sash-color | The background color a dividing sash during an interaction | | --dv-active-sash-color | The background color a dividing sash during an interaction |
| --dv-separator-border | The color of the seperator between panels | | --dv-separator-border | The color of the seperator between panels |
| **Paneview** | | **Paneview** |
| --dv-paneview-header-border-color | - | | --dv-paneview-header-border-color | - |
| --dv-paneview-active-outline-color | The primary accent color, used for example to highlight the active panel in Paneviews | | --dv-paneview-active-outline-color | The primary accent color, used for example to highlight the active panel in Paneviews |
| **Dockview -> Dragging** | | **Dockview -> Dragging** |
| --dv-drag-over-background-color | The overlay color applied to a group when a moving tab is dragged over | | --dv-drag-over-background-color | The overlay color applied to a group when a moving tab is dragged over |
| **Dockview -> Tabs container** | | **Dockview -> Tabs container** |
| --dv-tabs-and-actions-container-font-size | - | | --dv-tabs-and-actions-container-font-size | - |
| --dv-tabs-and-actions-container-height | Default tab height | | --dv-tabs-and-actions-container-height | Default tab height |
| --dv-tabs-and-actions-container-background-color | - | | --dv-tabs-and-actions-container-background-color | - |
| --dv-tabs-container-scrollbar-color | - | | --dv-tabs-container-scrollbar-color | - |
| --dv-group-view-background-color | - | | --dv-group-view-background-color | - |
| **Dockview -> Tabs** | (see [dockviewComponent.scss](https://github.com/mathuo/dockview/blob/master/packages/dockview/src/dockview/dockviewComponent.scss)) |
| **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-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-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-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-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-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-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-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-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-divider-color | - | | --dv-tab-close-icon | Default tab close icon |
| --dv-tab-close-icon | Default tab close icon | | --dv-tab-dirty-icon | Default tab dirty icon |
| --dv-tab-dirty-icon | Default tab dirty icon |
## Performance ## Performance