Skip to content

docs: update site docs #6456

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Oct 30, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions packages/g6/src/types/edge.ts
Original file line number Diff line number Diff line change
Expand Up @@ -54,9 +54,13 @@ export interface EdgeLabelStyleProps extends LabelStyleProps {
*/
autoRotate?: boolean;
/**
* <zh/> 文本的最大宽度,超出部分会用省略号代替
* <zh/> 标签最大宽度(需要 [prefix]WordWrap 为 true)
* - string: 表示以相对于边长度的百分比形式定义最大宽度。例如 `"50%"` 表示标签宽度不超过边长度的一半
* - number: 表示以像素值为单位定义最大宽度。例如 `100` 表示标签的最大宽度为 100 像素
*
* <en/> maxWidth of label text, the overflow part will be replaced by an ellipsis
* <en/> The maximum width of the label(need [prefix]WordWrap to be true)
* - string: When set to a string, it defines the maximum width as a percentage of the edge length. For example, `"50%"` means the label width does not exceed half of the edge length
* - number: When set to a number, it defines the maximum width in pixels. For example, `100` means the maximum width of the label is 100 pixels
* @defaultValue '80%'
*/
maxWidth?: string | number;
Expand Down
4 changes: 2 additions & 2 deletions packages/g6/src/types/node.ts
Original file line number Diff line number Diff line change
Expand Up @@ -34,11 +34,11 @@ export interface NodeLabelStyleProps extends LabelStyleProps {
*/
placement?: DirectionalPlacement;
/**
* <zh/> 标签最大宽度
* <zh/> 标签最大宽度(需要 [prefix]WordWrap 为 true)
* - string: 表示以相对于节点宽度的百分比形式定义最大宽度。例如 `"50%"` 表示标签宽度不超过节点宽度的一半
* - number: 表示以像素值为单位定义最大宽度。例如 `100` 表示标签的最大宽度为 100 像素
*
* <en/> The maximum width of the label
* <en/> The maximum width of the label(need [prefix]WordWrap to be true)
* - string: When set to a string, it defines the maximum width as a percentage of the node width. For example, `"50%"` means the label width does not exceed half of the node width
* - number: When set to a number, it defines the maximum width in pixels. For example, `100` means the maximum width of the label is 100 pixels
* @defaultValue '200%'
Expand Down
20 changes: 0 additions & 20 deletions packages/site/.dumi/app.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,3 @@
import { notification } from 'antd';
import React from 'react';

if (typeof window !== 'undefined') {
window.onresize = () => {
const { graph, container, widthOffset = 0, heightOffset = 0 } = window as any;
Expand All @@ -10,20 +7,3 @@ if (typeof window !== 'undefined') {
graph.setSize([container.scrollWidth + widthOffset, container.scrollHeight + heightOffset]);
};
}

notification.info({
message: '提示',
description: (
<>
您目前访问的是 G6 最新版本,旧版已迁移至:
<a href="https://g6-v4.antv.vision" target="_blank">
g6-v4.antv.vision
</a>
</>
),
placement: 'topRight',
duration: 30,
style: {
margin: 0,
},
});
27 changes: 1 addition & 26 deletions packages/site/.dumirc.ts
Original file line number Diff line number Diff line change
Expand Up @@ -344,32 +344,7 @@ export default defineConfig({
],
},
/** 新闻公告,优先选择配置的,如果没有配置则使用远程的! */
news: [
{
type: {
zh: '推荐',
en: 'News',
},
title: {
zh: 'G6 5.0-beta 闪亮登场',
en: 'G6 5.0-beta is released!',
},
date: '2023.08.31',
link: 'https://zhuanlan.zhihu.com/p/653709725?',
},
{
type: {
zh: '推荐',
en: 'News',
},
title: {
zh: '图可视分析与搭建平台 GraphInsight 开源',
en: 'GraphInsight is opened source!',
},
date: '2022.11.22',
link: 'https://www.yuque.com/antv/blog/nyl5bkhdkicgm7v8',
},
],
// news: [] // 统一使用 site-data 配置
/** 首页特性介绍 */
features: [
{
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,10 @@ title: vue
order: 1
---

:::warning
Please do not pass Vue reactive data directly to the G6 instance, which may cause G6 to fail to render correctly, or even cause the page to crash.
:::

Refer to the example below, you can use G6 in Vue, and you can also view the [Live Example](https://codesandbox.io/p/sandbox/g6-vue-xzf7pg)。

<embed src="@/common/vue-snippet"></embed>
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,10 @@ title: 在 Vue 中使用
order: 1
---

:::warning{title=注意}
请不要将 Vue 响应式数据直接传递给 G6 实例,这可能会导致 G6 无法正确渲染,甚至导致页面崩溃。
:::

参考下面的示例,你可以在 Vue 中使用 G6,也可以查看 [在线示例](https://codesandbox.io/p/sandbox/g6-vue-xzf7pg)。

<embed src="@/common/vue-snippet"></embed>
Loading