mirror of
https://github.com/mathuo/dockview
synced 2025-07-26 03:46:02 +00:00
feat: docs
This commit is contained in:
parent
d94460955d
commit
3241cec703
8
.github/workflows/deploy-docs.yml
vendored
8
.github/workflows/deploy-docs.yml
vendored
@ -1,8 +1,10 @@
|
|||||||
name: Deploy Docs
|
name: Deploy Docs
|
||||||
|
|
||||||
on:
|
# on:
|
||||||
schedule:
|
# schedule:
|
||||||
- cron: '0 3 * * *' # every day at 3 am UTC
|
# - cron: '0 4 * * *'
|
||||||
|
|
||||||
|
on: [push]
|
||||||
|
|
||||||
jobs:
|
jobs:
|
||||||
deploy-nightly-demo-app:
|
deploy-nightly-demo-app:
|
||||||
|
@ -25,11 +25,18 @@ const withMDX = mdx({
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
console.log(`CI=${process.env.CI}`);
|
||||||
|
|
||||||
|
const extraParams = process.env.CI
|
||||||
|
? {
|
||||||
|
basePath: '/dockview/docs',
|
||||||
|
assetPrefix: '/dockview/docs/',
|
||||||
|
}
|
||||||
|
: {};
|
||||||
|
|
||||||
export default withTM(
|
export default withTM(
|
||||||
withMDX({
|
withMDX({
|
||||||
basePath: '/dockview/docs',
|
...extraParams,
|
||||||
assetPrefix: '/dockview/docs/',
|
|
||||||
//
|
|
||||||
reactStrictMode: true,
|
reactStrictMode: true,
|
||||||
pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
|
pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
|
||||||
experimental: {
|
experimental: {
|
||||||
|
@ -31,16 +31,21 @@ export const Header = (props: {}) => {
|
|||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
height: '0px',
|
backgroundColor: 'var(--header-color)',
|
||||||
backgroundColor: '#0070f3',
|
padding: '0px 8px',
|
||||||
padding: '5vw',
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
borderBottom: '1px solid var(--border-color)',
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<DockviewReact
|
<div>
|
||||||
onReady={onReady}
|
<div>
|
||||||
components={components}
|
<span style={{ fontSize: '2em' }}>dockview</span>
|
||||||
className="dockview-theme-dark"
|
<span style={{ fontSize: '1.25em' }}>
|
||||||
/>
|
{' documentation'}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -12,21 +12,7 @@ const components = {
|
|||||||
|
|
||||||
export const SimpleDockview = () => {
|
export const SimpleDockview = () => {
|
||||||
const onReady = (event: DockviewReadyEvent) => {
|
const onReady = (event: DockviewReadyEvent) => {
|
||||||
event.api.onDidLayoutChange(() => {
|
const panel = event.api.addPanel({
|
||||||
localStorage.setItem(
|
|
||||||
'dockview_test',
|
|
||||||
JSON.stringify(event.api.toJSON())
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
const layout = localStorage.getItem('dockview_test');
|
|
||||||
|
|
||||||
if (layout) {
|
|
||||||
event.api.fromJSON(JSON.parse(layout));
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
event.api.addPanel({
|
|
||||||
id: 'panel_1',
|
id: 'panel_1',
|
||||||
component: 'default',
|
component: 'default',
|
||||||
params: {
|
params: {
|
||||||
@ -34,6 +20,9 @@ export const SimpleDockview = () => {
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
panel.group.locked = true;
|
||||||
|
panel.group.header.hidden = true;
|
||||||
|
|
||||||
event.api.addPanel({
|
event.api.addPanel({
|
||||||
id: 'panel_2',
|
id: 'panel_2',
|
||||||
component: 'default',
|
component: 'default',
|
||||||
|
@ -62,6 +62,7 @@ export const SimpleGridview = () => {
|
|||||||
title: 'Panel 6',
|
title: 'Panel 6',
|
||||||
},
|
},
|
||||||
position: { referencePanel: 'panel_5', direction: 'below' },
|
position: { referencePanel: 'panel_5', direction: 'below' },
|
||||||
|
minimumWidth: 10,
|
||||||
});
|
});
|
||||||
|
|
||||||
event.api.addPanel({
|
event.api.addPanel({
|
||||||
@ -71,6 +72,17 @@ export const SimpleGridview = () => {
|
|||||||
title: 'Panel 7',
|
title: 'Panel 7',
|
||||||
},
|
},
|
||||||
position: { referencePanel: 'panel_6', direction: 'right' },
|
position: { referencePanel: 'panel_6', direction: 'right' },
|
||||||
|
minimumWidth: 10,
|
||||||
|
});
|
||||||
|
|
||||||
|
event.api.addPanel({
|
||||||
|
id: 'panel_8',
|
||||||
|
component: 'default',
|
||||||
|
params: {
|
||||||
|
title: 'Panel 8',
|
||||||
|
},
|
||||||
|
position: { referencePanel: 'panel_6', direction: 'right' },
|
||||||
|
minimumWidth: 10,
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -78,6 +90,7 @@ export const SimpleGridview = () => {
|
|||||||
<GridviewReact
|
<GridviewReact
|
||||||
components={components}
|
components={components}
|
||||||
onReady={onReady}
|
onReady={onReady}
|
||||||
|
proportionalLayout={false}
|
||||||
orientation={Orientation.VERTICAL}
|
orientation={Orientation.VERTICAL}
|
||||||
className="dockview-theme-dark"
|
className="dockview-theme-dark"
|
||||||
/>
|
/>
|
||||||
|
60
packages/dockview-docs/src/components/simpleSplitview2.tsx
Normal file
60
packages/dockview-docs/src/components/simpleSplitview2.tsx
Normal file
@ -0,0 +1,60 @@
|
|||||||
|
import { SimpleSplitview } from './simpleSplitview';
|
||||||
|
import * as React from 'react';
|
||||||
|
|
||||||
|
export const SimpleSplitview2 = (props: { proportional?: boolean }) => {
|
||||||
|
const [value, setValue] = React.useState<number>(50);
|
||||||
|
|
||||||
|
const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
|
setValue(Number(event.target.value));
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
height: '100px',
|
||||||
|
margin: '10px 0px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
height: '25px',
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type={'range'}
|
||||||
|
min={20}
|
||||||
|
max={100}
|
||||||
|
defaultValue={50}
|
||||||
|
value={value}
|
||||||
|
onChange={onChange}
|
||||||
|
/>
|
||||||
|
<span style={{ padding: '0px 8px' }}>
|
||||||
|
Slide to resize the splitview container
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
flexGrow: 1,
|
||||||
|
display: 'grid',
|
||||||
|
gridTemplateColumns: `${value}fr ${100 - value}fr`,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
backgroundColor: 'rgb(30,30,30)',
|
||||||
|
color: 'white',
|
||||||
|
flexGrow: 1,
|
||||||
|
border: '1px solid grey',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<SimpleSplitview proportional={props.proportional} />
|
||||||
|
</div>
|
||||||
|
<div></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
@ -1,39 +1,9 @@
|
|||||||
import { SimpleSplitview } from '../components/simpleSplitview';
|
import { SimpleSplitview } from '../components/simpleSplitview';
|
||||||
|
import { SimpleSplitview2 } from '../components/simpleSplitview2';
|
||||||
|
|
||||||
## Auto resizing
|
# Basics
|
||||||
|
|
||||||
`SplitviewReact`, `GridviewReact`, `PaneviewReact` and `DockviewReact` will all automatically resize to fill the size of their parent element.
|
This section will take you through a number of concepts that can be applied to all dockview components.
|
||||||
Internally this is achieved using a [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).
|
|
||||||
You can disable this by settings the `disableAutoResizing` prop to be `true`.
|
|
||||||
|
|
||||||
You can manually resize a component using the API method `layout(width: number, height: number): void`.
|
|
||||||
|
|
||||||
You can force a component to resize without providing any measurements using the API method `resizeToFit(): void`.
|
|
||||||
This method will evaluate the width and height of the parent `HTMLElement` container and use these values to relayout.
|
|
||||||
|
|
||||||
## Proportional layout
|
|
||||||
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
height: '100px',
|
|
||||||
backgroundColor: 'rgb(30,30,30)',
|
|
||||||
color: 'white',
|
|
||||||
margin: '20px 0px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<SimpleSplitview proportional={false} />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
height: '100px',
|
|
||||||
backgroundColor: 'rgb(30,30,30)',
|
|
||||||
color: 'white',
|
|
||||||
margin: '20px 0px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<SimpleSplitview proportional={true} />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
## Panels
|
## Panels
|
||||||
|
|
||||||
@ -63,9 +33,12 @@ const MyComponent = (props: ISplitviewPanelProps<{ title: string }>) => {
|
|||||||
};
|
};
|
||||||
```
|
```
|
||||||
|
|
||||||
### Accessing the panel API
|
## API
|
||||||
|
|
||||||
You can access an extensive set of functions in the panel via both the panel `api` and `containerApi`. The `api` is specific to that particular panel and the `containerApi` corresponds to that api which you access during the `onReady` event.
|
There are two types of API you will interact with using `dockview`.
|
||||||
|
|
||||||
|
- The `panel API` is accessible via `props.api` in user defined panels and via the `.api` variable found on panel instances. This API contains actions and variable related to the the individual panel.
|
||||||
|
- The `component API` is accessible via `event.api` in the `onReady` events and `props.containerApi` in user defined panels. This API contains actions and variable related to the component as a whole.
|
||||||
|
|
||||||
```tsx
|
```tsx
|
||||||
const MyComponent = (props: ISplitviewPanelProps<{ title: string }>) => {
|
const MyComponent = (props: ISplitviewPanelProps<{ title: string }>) => {
|
||||||
@ -98,3 +71,20 @@ const MyComponent = (props: ISplitviewPanelProps<{ title: string }>) => {
|
|||||||
### Serialization
|
### Serialization
|
||||||
|
|
||||||
All components support `toJSON(): T` which returns a Typed object representation of the components state. This same Typed object can be used to deserialize a view using `fromJSON(object: T): void`.
|
All components support `toJSON(): T` which returns a Typed object representation of the components state. This same Typed object can be used to deserialize a view using `fromJSON(object: T): void`.
|
||||||
|
|
||||||
|
## Auto resizing
|
||||||
|
|
||||||
|
`SplitviewReact`, `GridviewReact`, `PaneviewReact` and `DockviewReact` will all automatically resize to fill the size of their parent element.
|
||||||
|
Internally this is achieved using a [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).
|
||||||
|
You can disable this by settings the `disableAutoResizing` prop to be `true`.
|
||||||
|
|
||||||
|
You can manually resize a component using the API method `layout(width: number, height: number): void`.
|
||||||
|
|
||||||
|
## Proportional layout
|
||||||
|
|
||||||
|
The `proportionalLayout` property indicates the expected behaviour of the component as it's container resizes, should all views resize equally or should just one view expand to fill the new space. `proportionalLayout` can be set as a property on `SplitviewReact` and `GridviewReact` components.
|
||||||
|
Although not configurable on `DockviewReact` and `PaneviewReact` these both behave as if `proportionalLayout=true` was set for them.
|
||||||
|
|
||||||
|
<SimpleSplitview2 proportional={false} />
|
||||||
|
|
||||||
|
<SimpleSplitview2 proportional={true} />
|
||||||
|
@ -1,3 +1,43 @@
|
|||||||
|
import { SimpleDockview } from '../components/simpleDockview';
|
||||||
|
|
||||||
|
Dockview is an abstraction built on top of [Gridviews](/gridview) where each view is a tabbed container.
|
||||||
|
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
height: '300px',
|
||||||
|
backgroundColor: 'rgb(30,30,30)',
|
||||||
|
color: 'white',
|
||||||
|
margin: '20px 0px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<SimpleDockview />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
const panel = event.api.addPanel(...);
|
||||||
|
const anotherPanel = event.api.getPanel('somePanelid');
|
||||||
|
```
|
||||||
|
|
||||||
|
You can access the panels associated group through the `panel.group` variable.
|
||||||
|
The group will always be defined and will change if a panel is moved into another group.
|
||||||
|
|
||||||
|
### Locked group
|
||||||
|
|
||||||
|
Locking a group will disable all drop events for this group ensuring a user can not add additional panels to the group.
|
||||||
|
You can still add groups to a locked panel programatically using the api.
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
panel.group.locked = true;
|
||||||
|
```
|
||||||
|
|
||||||
|
## Group header
|
||||||
|
|
||||||
|
You may wish to hide the header section of a group. This can achieved through setting the `hidden` variable on `panel.group.header`.
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
panel.group.header.hidden = true;
|
||||||
|
```
|
||||||
|
|
||||||
## Component Props
|
## Component Props
|
||||||
|
|
||||||
```tsx
|
```tsx
|
||||||
@ -33,46 +73,45 @@ const onReady = (event: DockviewReadyEvent) => {
|
|||||||
};
|
};
|
||||||
```
|
```
|
||||||
|
|
||||||
| Property | Type | Description |
|
| Property | Type | Description |
|
||||||
| ---------------------- | ------------------------------------------------- | ------------------------------------------- |
|
| ---------------------- | ---------------------------------------------------- | ------------------------------------------- |
|
||||||
| height | `number` | Component pixel height |
|
| height | `number` | Component pixel height |
|
||||||
| width | `number` | Component pixel width |
|
| width | `number` | Component pixel width |
|
||||||
| minimumHeight | `number` | |
|
| minimumHeight | `number` | |
|
||||||
| maximumHeight | `number` | |
|
| maximumHeight | `number` | |
|
||||||
| maximumWidth | `number` | |
|
| maximumWidth | `number` | |
|
||||||
| maximumWidth | `number` | |
|
| maximumWidth | `number` | |
|
||||||
| length | `number` | Number of panels |
|
| length | `number` | Number of panels |
|
||||||
| size | `number` | Number of Groups |
|
| size | `number` | Number of Groups |
|
||||||
| panels | `IGroupPanel[]` | |
|
| panels | `IDockviewPanel[]` | |
|
||||||
| groups | `IGroupviewPanel[]` | |
|
| groups | `IDockviewPanel[]` | |
|
||||||
| activePanel | `IGroupPanel \| undefined` | |
|
| activePanel | `IDockviewPanel \| undefined` | |
|
||||||
| activeGroup | `IGroupviewPanel \| undefined` | |
|
| activeGroup | `IDockviewPanel \| undefined` | |
|
||||||
| | | |
|
| | | |
|
||||||
| onDidLayoutChange | `Event<void>` | |
|
| onDidLayoutChange | `Event<void>` | |
|
||||||
| onDidLayoutFromJSON | `Event<void>` | |
|
| onDidLayoutFromJSON | `Event<void>` | |
|
||||||
| onDidAddGroup | `Event<IGroupviewPanel>` | |
|
| onDidAddGroup | `Event<IDockviewPanel>` | |
|
||||||
| onDidRemoveGroup | `Event<IGroupviewPanel>` | |
|
| onDidRemoveGroup | `Event<IDockviewPanel>` | |
|
||||||
| onDidActiveGroupChange | `Event<IGroupviewPanel \| undefined>` | |
|
| onDidActiveGroupChange | `Event<IDockviewPanel \| undefined>` | |
|
||||||
| onDidAddPanel | `Event<IGroupPanel>` | |
|
| onDidAddPanel | `Event<IDockviewPanel>` | |
|
||||||
| onDidRemovePanel | `Event<IGroupPanel>` | |
|
| onDidRemovePanel | `Event<IDockviewPanel>` | |
|
||||||
| onDidActivePanelChange | `Event<IGroupPanel \| undefined>` | |
|
| onDidActivePanelChange | `Event<IDockviewPanel \| undefined>` | |
|
||||||
| onDidDrop | `Event<DockviewDropEvent` | |
|
| onDidDrop | `Event<DockviewDropEvent` | |
|
||||||
| | | |
|
| | | |
|
||||||
| addPanel | `addPanel(options: AddPanelOptions): IGroupPanel` | |
|
| addPanel | `addPanel(options: AddPanelOptions): IDockviewPanel` | |
|
||||||
| getPanel | `(id: string) \| IGroupPanel \| undefined` | |
|
| getPanel | `(id: string) \| IDockviewPanel \| undefined` | |
|
||||||
| addEmptyGroup | `(options? AddGroupOptions): void` | |
|
| addEmptyGroup | `(options? AddGroupOptions): void` | |
|
||||||
| closeAllGroups | `(): void` | |
|
| closeAllGroups | `(): void` | |
|
||||||
| removeGroup | `(group: IGroupviewPanel): void` | |
|
| removeGroup | `(group: IDockviewPanel): void` | |
|
||||||
| getGroup | `(id: string): IGroupviewPanel \| undefined` | |
|
| getGroup | `(id: string): IDockviewPanel \| undefined` | |
|
||||||
| | | |
|
| | | |
|
||||||
| getTabHeight | `(): number \| undefined` | |
|
| getTabHeight | `(): number \| undefined` | |
|
||||||
| setTabHeight | `(hegiht: number \| undefined): void` | |
|
| setTabHeight | `(hegiht: number \| undefined): void` | |
|
||||||
| updateOptions | `(options:SplitviewComponentUpdateOptions): void` | |
|
| updateOptions | `(options:SplitviewComponentUpdateOptions): void` | |
|
||||||
| focus | `(): void` | |
|
| focus | `(): void` | |
|
||||||
| layout | `(width: number, height:number): void` | See [Auto resizing](/basics/#auto-resizing) |
|
| layout | `(width: number, height:number): void` | See [Auto resizing](/basics/#auto-resizing) |
|
||||||
| resizeToFit | `(): void` | See [Auto resizing](/basics/#auto-resizing) |
|
| fromJSON | `(data: SerializedDockview): void` | See [Serialization](/basics/#serialization) |
|
||||||
| fromJSON | `(data: SerializedDockview): void` | See [Serialization](/basics/#serialization) |
|
| toJSON | `(): SerializedDockview` | See [Serialization](/basics/#serialization) |
|
||||||
| toJSON | `(): SerializedDockview` | See [Serialization](/basics/#serialization) |
|
|
||||||
|
|
||||||
## Dockview Panel API
|
## Dockview Panel API
|
||||||
|
|
||||||
@ -102,7 +141,7 @@ const MyComponent = (props: IDockviewPanelProps<{ title: string }>) => {
|
|||||||
| setConstraints | `(value: PanelConstraintChangeEvent2): void;` | |
|
| setConstraints | `(value: PanelConstraintChangeEvent2): void;` | |
|
||||||
| setSize | `(event: SizeEvent): void` | |
|
| setSize | `(event: SizeEvent): void` | |
|
||||||
| | | |
|
| | | |
|
||||||
| group | `GroupviewPanel | undefined` |
|
| group | `GroupPanel | undefined` |
|
||||||
| isGroupActive | `boolean` | |
|
| isGroupActive | `boolean` | |
|
||||||
| title | `string` | |
|
| title | `string` | |
|
||||||
| suppressClosable | `boolean` | |
|
| suppressClosable | `boolean` | |
|
||||||
|
@ -59,7 +59,6 @@ const onReady = (event: GridviewReadyEvent) => {
|
|||||||
| setActive | `(panel: IGridviewPanel): void` | |
|
| setActive | `(panel: IGridviewPanel): void` | |
|
||||||
| toggleVisiblity | `(panel: IGridviewPanel): void` | |
|
| toggleVisiblity | `(panel: IGridviewPanel): void` | |
|
||||||
| layout | `(width: number, height:number): void` | See [Auto resizing](/basics/#auto-resizing) |
|
| layout | `(width: number, height:number): void` | See [Auto resizing](/basics/#auto-resizing) |
|
||||||
| resizeToFit | `(): void` | See [Auto resizing](/basics/#auto-resizing) |
|
|
||||||
| fromJSON | `(data: SerializedGridview): void` | See [Serialization](/basics/#serialization) |
|
| fromJSON | `(data: SerializedGridview): void` | See [Serialization](/basics/#serialization) |
|
||||||
| toJSON | `(): SerializedGridview` | See [Serialization](/basics/#serialization) |
|
| toJSON | `(): SerializedGridview` | See [Serialization](/basics/#serialization) |
|
||||||
|
|
||||||
|
@ -52,7 +52,6 @@ const onReady = (event: GridviewReadyEvent) => {
|
|||||||
| | | |
|
| | | |
|
||||||
| focus | `(): void` | |
|
| focus | `(): void` | |
|
||||||
| layout | `(width: number, height:number): void` | See [Auto resizing](/basics/#auto-resizing) |
|
| layout | `(width: number, height:number): void` | See [Auto resizing](/basics/#auto-resizing) |
|
||||||
| resizeToFit | `(): void` | See [Auto resizing](/basics/#auto-resizing) |
|
|
||||||
| fromJSON | `(data: SerializedPaneview): void` | See [Serialization](/basics/#serialization) |
|
| fromJSON | `(data: SerializedPaneview): void` | See [Serialization](/basics/#serialization) |
|
||||||
| toJSON | `(): SerializedPaneview` | See [Serialization](/basics/#serialization) |
|
| toJSON | `(): SerializedPaneview` | See [Serialization](/basics/#serialization) |
|
||||||
|
|
||||||
|
@ -123,7 +123,6 @@ const onReady = (event: SplitviewReadyEvent) => {
|
|||||||
| updateOptions | `(options:SplitviewComponentUpdateOptions): void` | |
|
| updateOptions | `(options:SplitviewComponentUpdateOptions): void` | |
|
||||||
| focus | `(): void` | |
|
| focus | `(): void` | |
|
||||||
| layout | `(width: number, height:number): void` | See [Auto resizing](/basics/#auto-resizing) |
|
| layout | `(width: number, height:number): void` | See [Auto resizing](/basics/#auto-resizing) |
|
||||||
| resizeToFit | `(): void` | See [Auto resizing](/basics/#auto-resizing) |
|
|
||||||
| fromJSON | `(data: SerializedSplitview): void` | See [Serialization](/basics/#serialization) |
|
| fromJSON | `(data: SerializedSplitview): void` | See [Serialization](/basics/#serialization) |
|
||||||
| toJSON | `(): SerializedSplitview` | See [Serialization](/basics/#serialization) |
|
| toJSON | `(): SerializedSplitview` | See [Serialization](/basics/#serialization) |
|
||||||
|
|
||||||
|
@ -1,25 +1,31 @@
|
|||||||
@import "./navigation.css";
|
@import "./navigation.css";
|
||||||
@import "~dockview/dist/styles/dockview.css";
|
@import "~dockview/dist/styles/dockview.css";
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--primary-text-color:rgb(30,30,30);
|
||||||
|
--header-color:rgb(235, 235, 235);
|
||||||
|
--navigation-color:rgb(245, 245, 245);
|
||||||
|
--border-color:rgb(30,30,30)
|
||||||
|
}
|
||||||
|
|
||||||
html,
|
html,
|
||||||
body {
|
body {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
/* font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
|
font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
|
||||||
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; */
|
font: 100% /1.65 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
|
||||||
font-family: 'Roboto', sans-serif;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
.markdown-body a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color:dodgerblue;
|
color:dodgerblue;
|
||||||
}
|
}
|
||||||
|
|
||||||
a, a:hover, a:visited, a:active {
|
.markdown-body a, .markdown-body a:hover, .markdown-body a:visited, .markdown-body a:active {
|
||||||
color:dodgerblue;
|
color:dodgerblue;
|
||||||
}
|
}
|
||||||
|
|
||||||
a:hover {
|
.markdown-body a:hover {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
.navigation {
|
.navigation {
|
||||||
padding: 30px;
|
padding: 30px;
|
||||||
background-color: lightgray;
|
background-color: var(--navigation-color);
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
width: 200px;
|
width: 200px;
|
||||||
border-radius: 15px;
|
border-radius: 15px;
|
||||||
@ -11,6 +11,11 @@
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.node a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
.expandable-node::after {
|
.expandable-node::after {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user