smartyellow/docx-js
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add text frame documentation

Browse Source
This commit is contained in:
Dolan
2021-03-14 18:12:52 +00:00
parent e7eca14e1e
commit cc32a7b2d3
6 changed files with 90 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
demo/60-text-frame.ts → demo/61-text-frame.ts
View File

2
docs/_coverpage.md
View File

@ -3,7 +3,7 @@
> Easily generate .docx files with JS/TS. Works for Node and on the Browser. :100:
- Simple, declarative API
- 50+ usage examples
- 60+ usage examples
- Battle tested, mature, 98%+ coverage
[GitHub](https://github.com/dolanmiu/docx)

1
docs/_sidebar.md
View File

@ -22,6 +22,7 @@
* [Page Numbers](usage/page-numbers.md)
* [Change Tracking](usage/change-tracking.md)
* [Math](usage/math.md)
* [Text Frames](usage/text-frames.md)
* Styling
* [Styling with JS](usage/styling-with-js.md)
* [Styling with XML](usage/styling-with-xml.md)

1
docs/usage/bullet-points.md
View File

@ -1,5 +1,6 @@
# Bullet Points
!> Bullet Points requires an understanding of [Paragraphs](usage/paragraph.md).
## Example
To make a bullet point, simply make a paragraph into a bullet point:

23
docs/usage/paragraph.md
View File

@ -32,7 +32,7 @@ const paragraph = new Paragraph({
});
```
After you create the paragraph, you must add the paragraph into the `document's section`. Learn more about `sections` here:
After you create the paragraph, you must add the paragraph into a `section`:
```ts
doc.addSection({
@ -74,9 +74,11 @@ This is the list of options for a paragraph. A detailed explanation is below:
| keepNext | `boolean` | Optional | |
| children | `(TextRun or PictureRun or Hyperlink)[]` | Optional | |
| style | `string` | Optional | |
| tabStop | `{ left?: ITabStopOptions; right?: ITabStopOptions; maxRight?: { leader: LeaderType; }; center?: ITabStopOptions }` | Optional | |
| bullet | `{ level: number }` | Optional | |
| numbering | `{ num: ConcreteNumbering; level: number; custom?: boolean }` | Optional | |
| [tabStop](usage/tab-stops) | `{ left?: ITabStopOptions; right?: ITabStopOptions; maxRight?: { leader: LeaderType; }; center?: ITabStopOptions }` | Optional | |
| [bullet](usage/bullet-points) | `{ level: number }` | Optional | |
| [numbering](usage/numbering) | `{ num: ConcreteNumbering; level: number; custom?: boolean }` | Optional | |
| [widowControl](#widow-control) | `boolean` | Optional | |
| [frame](usage/text-frames.md) | `IFrameOptions` | Optional | |
## Text
@ -157,6 +159,17 @@ const paragraph = new Paragraph({
});
```
## Widow Control
Allow First/Last Line to Display on a Separate Page
```ts
const paragraph = new Paragraph({
text: "shading",
widowControl: true,
});
```
## Spacing
Adding spacing between paragraphs
@ -195,7 +208,7 @@ const paragraph = new Paragraph({
## Styles
To create styles, please refer to the styling Wiki: https://github.com/dolanmiu/docx/wiki/Styling
To create styles, please refer to the [styling documentation](usage/styling-with-js)
![Word 2013 Styles menu](http://content.gcflearnfree.org/topics/233/style_apply_choose.png "Word 2013 Styles menu")

69
docs/usage/text-frames.md Normal file
View File

@ -0,0 +1,69 @@
# Text Frames
Also known as `Text Boxes`
!> Text Frames requires an understanding of [Paragraphs](usage/paragraph.md).
> Text frames are paragraphs of text in a document which are positioned in a separate region or frame in the document, and can be positioned with a specific size and position relative to non-frame paragraphs in the current document.
## Intro
To make a `Text Frame`, simply add the `frame` property on a paragraph. `Borders` can be applied to frame simply by adding the `border` attribute.
```ts
new Paragraph({
frame: {
position: {
x: 1000,
y: 3000,
},
width: 4000,
height: 1000,
anchor: {
horizontal: FrameAnchorType.MARGIN,
vertical: FrameAnchorType.MARGIN,
},
alignment: {
x: HorizontalPositionAlign.CENTER,
y: VerticalPositionAlign.TOP,
},
},
border: {
top: {
color: "auto",
space: 1,
value: "single",
size: 6,
},
bottom: {
color: "auto",
space: 1,
value: "single",
size: 6,
},
left: {
color: "auto",
space: 1,
value: "single",
size: 6,
},
right: {
color: "auto",
space: 1,
value: "single",
size: 6,
},
},
children: [
new TextRun("Hello World"),
new TextRun({
text: "Foo Bar",
bold: true,
}),
new TextRun({
text: "\tGithub is the best",
bold: true,
}),
],
});
```