docs:add page header

pr675
Hufe921 3 years ago
parent 23b6cd28ad
commit 6d47ce0a67

@ -20,7 +20,7 @@ const {
margins: IMargin;
header?: IHeader;
watermark?: IWatermark;
data: IElement[];
data: IEditorData;
} = instance.command.getValue()
```

@ -5,7 +5,7 @@
```javascript
import Editor from "@hufe921/canvas-editor"
new Editor(container, [], {
new Editor(container, IEditorData | IElement[], {
// 配置项
})
```
@ -49,6 +49,7 @@ interface IEditorOption {
headerTop?: number; // 页眉距离上边距。默认50
header?: IHeader; // 页眉信息。{data:string; color?:string; size?:number; font?:string;}
paperDirection?: PaperDirection; // 纸张方向:纵向、横向
inactiveAlpha?: number; // 正文内容失焦时透明度。默认值0.6
watermark?: IWatermark; // 水印信息。{data:string; color?:string; opacity?:number; size?:number; font?:string;}
control?: IControlOption; // 控件信息。 {placeholderColor?:string; bracketColor?:string; prefix?:string; postfix?:string;}
checkbox?: ICheckboxOption; // 复选框信息。{width?:number; height?:number; gap?:number; lineWidth?:number; fillStyle?:string; fontStyle?: string;}

@ -24,7 +24,7 @@
## 待开发
- 可编辑页眉
- 可编辑页眉(待边界修复)
- 计算性能
- 控件规则
- 表格分页
@ -44,6 +44,7 @@ npm i @hufe921/canvas-editor --save
## Step. 3: 实例化编辑器
- 仅包含正文内容
```javascript
import Editor from "@hufe921/canvas-editor"
@ -54,6 +55,21 @@ new Editor(document.querySelector(".canvas-editor"), [
], {})
```
- 包含正文及页眉内容
```javascript
import Editor from "@hufe921/canvas-editor"
new Editor(document.querySelector(".canvas-editor"), {
header: [{
value: "Header",
rowFlex: RowFlex.CENTER
}],
main: [{
value: "Hello World"
}]
}, {})
```
## Step. 4: 配置编辑器
详见下一节
Loading…
Cancel
Save