VSinerva/freesewing
1
0
Fork 0
Code Activity

fix(docs) Add custom attributes and Snippets documentation

Browse source
This commit is contained in:
Benjamin F 2022-12-14 21:24:28 -08:00
parent 265833d419
commit b53f62c4d1
8 changed files with 116 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

65
markdown/dev/howtos/code/attributes/en.md
View file

@ -5,12 +5,14 @@ title: Using attributes
Points, Paths, and Snippets all have [attributes](/reference/api/attributes/)
that you can use to influence how they behave.
Under the hood, text, css classes, and even circles are all set in attributes.
Under the hood, text, CSS classes, and even circles are all set in attributes.
There are plenty of higher-level helper methods available, but knowing how to
manipulate attributes is useful in case you want to accomplish something for
which there is no higher-level helper method.
Let's use an example to see the different ways we can assign a css class:
## Example
Let's use an example to see the different ways we can assign a CSS class:
<Example caption="Various ways to set attributes on a point">
```mjs
@ -45,9 +47,12 @@ Let's use an example to see the different ways we can assign a css class:
```
</Example>
kEven though there are helpers methods available for them.
So, attributes can be set via low-level access even though there are helpers
methods available for them.
A common scenario is to apply CSS classes to style a path:
## Common scenarios
A common scenario is to apply [CSS classes](reference/css) to style a path:
```js
paths.example.attributes.add('class', 'lining dashed');
@ -71,10 +76,58 @@ The [adding-text](/howtos/code/adding-text) documentation explains this in detai
</Note>
## Custom attributes
There are some custom attributes that FreeSewing uses to modify the appearance
of Points, Paths, and Snippets.
### Points
The custom attributes that can be added to Points:
| Attribute | Description |
|----------:|-------------|
| `data-text` | Text to display at the point |
| `data-text-class` | CSS class to apply to the text to provide styling |
| `data-circle` | 'Radius of the circle to display at the point |
| `data-circle-class` | [CSS classes](/reference/css) to apply to the circle to provide styling |
<Related>
See [Drawing circles](/howtos/code/drawing-circles) for more information
and other ways to draw circles.
See [Adding text](/howtos/code/adding-text) for other ways to add text
to points.
</Related>
### Paths
The custom attributes that can be added to Paths:
| Attribute | Description |
|----------:|-------------|
| `data-text` | Text to display at the point |
| `data-text-class` | [CSS classes](/reference/css) to apply to the text to provide styling |
<Related>
See [Adding text](/howtos/code/adding-text) for other ways to add text
to paths.
</Related>
### Snippets
The custom attributes that can be added to Snippets:
| Attribute | Description |
|----------:|-------------|
| `data-rotate` | Number of degrees to rotate the snippet |
| `data-scale` | Scaling factor to apply to the snippet |
<Tip>
When rendering, FreeSewing will output all your attributes. This gives you the
possiblity to use any valid attribute to control the appearance.
When rendering an SVG document, FreeSewing will output all your attributes.
This gives you the
possibility to use any valid SVG attribute to control the appearance.
This is also why we use the _data-_ prefix for those attributes that have
special meaning within FreeSewing, such as `data-text`. Adding a `text` attribute