Skip to content

Commit c5a92cf

Browse files
mathuomathuo
committed
chore: docs
1 parent 5dcd642 commit c5a92cf

18 files changed

+766
-618
lines changed

‎packages/docs/docs/core/groups/floatingGroups.mdx

+36-17
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { DocRef } from '@site/src/components/ui/reference/docRef';
99
This section describes floating groups.
1010

1111
:::info
12-
Floating groups cannot be maximized. Calling maximize function on groups in these states will have no effect.
12+
Floating groups **cannot** be maximized. Calling maximize function on groups in these states will have no effect.
1313
:::
1414

1515
Dockview has built-in support for floating groups. Each floating container can contain a single group with many panels
@@ -27,34 +27,53 @@ The following properties can be set to configure the behaviours of floating grou
2727
<DocRef declaration="DockviewComponentOptions" methods={['floatingGroupBounds', 'disableFloatingGroups']} />
2828
</FrameworkSpecific>
2929

30-
Floating groups can be interacted with whilst holding the `shift` key activating the `event.shiftKey` boolean property on `KeyboardEvent` events.
30+
You can control the bounding box of floating groups through the optional `floatingGroupBounds` options:
3131

32-
## Live Example
32+
- `boundedWithinViewport` will force the entire floating group to be bounded within the docks viewport.
33+
- `{minimumHeightWithinViewport?: number, minimumWidthWithinViewport?: number}` sets the respective dimension minimums that must appears within the docks viewport
34+
- If no options are provided the defaults of `100px` minimum height and width within the viewport are set.
3335

34-
<LiveExample framework="react" id="dockview/floating-groups"/>
3536

37+
## API
3638

39+
The following properties can be used to create floating groups
3740

38-
> Float an existing tab by holding `shift` whilst interacting with the tab
41+
<DocRef declaration="DockviewApi" methods={['addFloatingGroup']} />
3942

40-
<img style={{ width: '60%' }} src={useBaseUrl('/img/float_add.svg')} />
43+
:::info
44+
`addFloatingGroup` only accepts existing panels and groups. See [Addding Panels](/docs/core/panels/add) on how to firstly add panels.
45+
:::
4146

42-
> Move a floating tab by holding `shift` whilst moving the cursor or dragging the empty
43-
> header space
4447

45-
<img style={{ width: '60%' }} src={useBaseUrl('/img/float_move.svg')} />
48+
Floating groups can be programatically added through the dockview `api` method `api.addFloatingGroup(...)`.
4649

47-
> Move an entire floating group by holding `shift` whilst dragging the empty header space
50+
## Panel and Group API
4851

49-
<img style={{ width: '60%' }} src={useBaseUrl('/img/float_group.svg')} />
52+
<DocRef declaration="DockviewPanelApi" methods={['location', 'onDidLocationChange']} />
5053

51-
Floating groups can be programatically added through the dockview `api` method `api.addFloatingGroup(...)` and you can check whether
52-
a group is floating via the `group.api.location` property. See examples for full code.
54+
You can check whether a group is floating via the `group.api.location` property. See examples for full code.
5355

54-
You can control the bounding box of floating groups through the optional `floatingGroupBounds` options:
5556

56-
- `boundedWithinViewport` will force the entire floating group to be bounded within the docks viewport.
57-
- `{minimumHeightWithinViewport?: number, minimumWidthWithinViewport?: number}` sets the respective dimension minimums that must appears within the docks viewport
58-
- If no options are provided the defaults of `100px` minimum height and width within the viewport are set.
57+
## Working with Floating Groups
58+
59+
<h4>Float an existing tab by holding `shift` whilst interacting with the tab</h4>
60+
61+
<div style={{display:' flex', justifyContent: 'center'}}>
62+
<img style={{ height: '200px' }} src={useBaseUrl('/img/float_add.svg')} />
63+
</div>
64+
65+
<h4>Move a floating tab by holding `shift` whilst moving the cursor or dragging the empty header space</h4>
5966

67+
<div style={{display:' flex', justifyContent: 'center'}}>
68+
<img style={{ height: '200px' }} src={useBaseUrl('/img/float_move.svg')} />
69+
</div>
6070

71+
<h4>Move an entire floating group by holding `shift` whilst dragging the empty header space</h4>
72+
73+
<div style={{display:' flex', justifyContent: 'center'}}>
74+
<img style={{ height: '200px' }} src={useBaseUrl('/img/float_group.svg')} />
75+
</div>
76+
77+
## Live Example
78+
79+
<LiveExample framework="react" id="dockview/floating-groups"/>

‎packages/docs/docs/core/groups/maxmizedGroups.mdx

+19-14
Original file line numberDiff line numberDiff line change
@@ -7,21 +7,13 @@ import LiveExample from '@site/src/components/ui/exampleFrame';
77

88
This section described how to maxmimize groups.
99

10-
## API methods
11-
12-
The following methods on the [API](/docs/api/dockview/overview) are related to maximizing groups.
13-
14-
<DocRef declaration="DockviewPanelApi" methods={['maximize', 'isMaximized', 'exitMaximized']} />
15-
16-
and the followng methods on the [Panel API](/docs/api/dockview/panelApi) are related to maximizing groups.
10+
## Options
1711

1812
<DocRef declaration="DockviewApi" methods={['maximizeGroup', 'hasMaximizedGroup', 'exitMaximizedGroup', 'onDidMaxmizedGroupChange']} />
1913

20-
## Live Examples
21-
22-
<LiveExample framework="react" id="dockview/maximize-group"/>
23-
2414
```tsx
15+
const api: DockviewApi;
16+
2517
// maximize a specified group
2618
api.maxmimizeGroup(group);
2719

@@ -35,11 +27,13 @@ exitMaximizedGroup();
3527
const result: boolean = hasMaximizedGroup();
3628
```
3729

38-
The following methods are available on both the panel and group `api` objects:
30+
## Panel API
3931

40-
> `api.<method>` is equivalent to `api.group.api.<method>` for all of these methods. The methods exist on the panel `api` object for convenience.
32+
<DocRef declaration="DockviewPanelApi" methods={['maximize', 'isMaximized', 'exitMaximized']} />
33+
34+
```tsx
35+
const api: DockviewPanelApi;
4136

42-
```ts
4337
// maximize the group
4438
api.maximize();
4539

@@ -50,4 +44,15 @@ const result: boolean = api.isMaxmized();
5044
api.exitMaximized();
5145
```
5246

47+
:::tip
48+
`api.<maximize|isMaximized|exitMaximized>` is equivalent to `api.group.api.<maximize|isMaximized|exitMaximized>`.
49+
The methods exist on the panel `api` object for convenience.
50+
:::
51+
52+
## Live Examples
53+
54+
<LiveExample framework="react" id="dockview/maximize-group"/>
55+
56+
57+
5358

‎packages/docs/docs/core/groups/popoutGroups.mdx

+2-2
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { DocRef } from '@site/src/components/ui/reference/docRef';
88
This section describes have to create popout windows.
99

1010
:::info
11-
Popout groups cannot be maximized. Calling maximize function on groups in these states will have no effect.
11+
Popout groups **cannot** be maximized. Calling maximize function on groups in these states will have no effect.
1212
:::
1313

1414
<DocRef declaration="DockviewApi" methods={['addPopoutGroup']} />
@@ -20,7 +20,7 @@ windows as needed. You cannot dock multiple groups together in the same window.
2020
Popout windows require your website to have a blank `.html` page that can be used, by default this is set to `/popout.html` but
2121
can be configured to match requirements.
2222

23-
```tsx title="Open new popout group from the component api"
23+
```tsx
2424
api.addPopoutGroup(
2525
group,
2626
// the second arguments (options) is optional

‎packages/docs/docs/core/panels/add.mdx

+3
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ sidebar_position: 1
44
---
55

66
import { DocRef } from '@site/src/components/ui/reference/docRef';
7+
import LiveExample from '@site/src/components/ui/exampleFrame';
78

89
This section describes how to add a new panel and the options you can provide.
910

@@ -47,6 +48,8 @@ api.addPanel({
4748
api.setTitle('my_new_custom_title');
4849
```
4950

51+
<LiveExample framework="react" id="dockview/update-title" height={250}/>
52+
5053
## Provide a custom Tab renderer
5154

5255
:::info

‎packages/docs/sandboxes/demo-dockview/src/app.scss

+59-16
Original file line numberDiff line numberDiff line change
@@ -15,27 +15,70 @@
1515
}
1616
}
1717

18-
.demo-button {
19-
min-width: 50px;
20-
border: none;
21-
margin: 0px 2px;
22-
padding: 0px 2px;
23-
border-radius: 2px;
24-
display: flex;
25-
align-items: center;
18+
.data-table {
19+
table {
20+
font-size: 11px;
21+
th {
22+
padding: 0px 8px;
23+
}
24+
}
2625
}
2726

28-
.demo-icon-button {
27+
.action-container {
2928
display: flex;
30-
align-items: center;
31-
border-radius: 0px;
32-
border: none;
29+
padding: 4px 0px;
30+
overflow: auto;
31+
32+
button {
33+
height: 25px;
34+
display: flex;
35+
align-items: center;
36+
justify-content: center;
37+
background-color: #1c254a;
38+
border: none;
39+
cursor: pointer;
40+
outline: 1px solid #4c65d4;
3341

34-
&:hover {
35-
background-color: orange;
42+
&:hover {
43+
background-color: #222e62;
44+
}
3645
}
3746

38-
span {
39-
font-size: 16px;
47+
.text-button {
48+
margin: 0px 4px;
49+
}
50+
51+
.button-action {
52+
margin: 0px 4px;
53+
// display: flex;
54+
55+
.selected {
56+
background-color: #4864dc;
57+
}
58+
59+
.demo-button {
60+
min-width: 50px;
61+
padding: 0px 2px;
62+
border-radius: 0px;
63+
display: flex;
64+
flex-grow: 1;
65+
align-items: center;
66+
outline: 1px solid #4c65d4;
67+
}
68+
69+
.demo-icon-button {
70+
outline: 1px solid #4c65d4;
71+
flex-grow: 1;
72+
display: flex;
73+
align-items: center;
74+
border-radius: 0px;
75+
padding: 0px 4px;
76+
border: none;
77+
cursor: pointer;
78+
79+
span {
80+
font-size: 16px;
81+
}
82+
}
4083
}
4184
}

0 commit comments

Comments
 (0)