样式与扩展

Vue 插槽

组件开放表头、任务信息、负责人、进度、任务条、纹理层、动效层、依赖线、空状态、工具条和行级边缘按钮插槽。

<YgGantt :tasks="tasks">
  <template #bar="{ task, progress }">
    <MyTaskBar :task="task" :progress="progress" />
  </template>

  <template #edge-indicator="{ task, side, jump }">
    <button type="button" @click="jump">
      {{ side === 'left' ? '←' : '→' }} {{ task.title }}
    </button>
  </template>
</YgGantt>

barLayoutResolver 可以按任务、维度与几何结果修改任务条高度、最小宽度和圆角。dependencyPathResolver、dependencyStyleResolver 可接管依赖线路径与样式。

React Render Props

<YgGantt
  tasks={tasks}
  renderBar={({ task, progress, selected }) => (
    <TaskBar task={task} progress={progress} selected={selected} />
  )}
  renderEdgeIndicator={({ task, side, jump }) => (
    <button type="button" onClick={jump}>{side} · {task.title}</button>
  )}
/>

renderDependency 可替换完整 SVG 路径；renderTask、renderOwner、renderProgress 可接入宿主任务表组件。

Flutter Builder

YotsubaGantt(
  tasks: tasks,
  taskBarBuilder: (context, details) {
    return ColoredBox(
      color: details.task.color ?? Colors.green,
      child: Text(details.task.title),
    );
  },
  rowHeaderBuilder: (context, task, rowIndex) {
    return ListTile(dense: true, title: Text(task.title));
  },
  entryTransitionBuilder: (context, child, animation) {
    return FadeTransition(opacity: animation, child: child);
  },
  edgeIndicatorBuilder: (context, details) {
    return IconButton(
      onPressed: details.jump,
      icon: Icon(details.side == YgEdgeSide.left
        ? Icons.chevron_left
        : Icons.chevron_right),
    );
  },
)

默认动效只使用 transform、opacity 或描边偏移，并受视口预算控制。宿主可以关闭内置过渡，或通过插槽、Builder 和 CSS 自行实现效果。