chore: Updating final Attributes docs for v3
This commit is contained in:
Joost De Cock
parent
80a3dd1a2c
commit
e298d14b8f
12 changed files with 220 additions and 93 deletions
|
|
@ -1,30 +1,25 @@
|
|||
---
|
||||
title: add()
|
||||
title: Attributes.add()
|
||||
---
|
||||
|
||||
The `Attributes.add()` method adds `value` to the attribute identified by
|
||||
`key`.
|
||||
|
||||
## Signature
|
||||
|
||||
```js
|
||||
Attributes attributes.add(string key, string value)
|
||||
```
|
||||
|
||||
Adds `value` to the attribute identified by `key`.
|
||||
## Example
|
||||
|
||||
```js
|
||||
const attr = new Attributes()
|
||||
.add('class', 'classA')
|
||||
.add('class', 'classB')
|
||||
```
|
||||
|
||||
## Notes
|
||||
|
||||
Adding multiple values to the same key will result in them being joined together
|
||||
(with a space) when rendering.
|
||||
|
||||
```js
|
||||
let { Path, paths } = part.shorthand();
|
||||
|
||||
// This will render as: class="classA classB"
|
||||
paths.demo = new Path();
|
||||
paths.demo.attributes.add('class', 'classA');
|
||||
paths.demo.attributes.add('class', 'classB');
|
||||
|
||||
// This does the same thing:
|
||||
paths.demo = new Path()
|
||||
.attr('class', 'classA')
|
||||
.attr('class', 'classB');
|
||||
|
||||
// This also has the same result:
|
||||
paths.demo = new Path()
|
||||
.attr('class', 'classA classB');
|
||||
```
|
||||
|
|
|
|||
|
|
@ -0,0 +1,30 @@
|
|||
---
|
||||
title: Attributes.asPropsIfPrefixIs()
|
||||
---
|
||||
|
||||
The `Attributes.asPropsIfPrefixIs()` method will return attribute values as a
|
||||
props object (a plain Javascript object) but only for those keys who start with
|
||||
`prefix`.
|
||||
|
||||
## Signature
|
||||
|
||||
```js
|
||||
Object attributes.asPropsIfPrefixIs(string prefix)
|
||||
```
|
||||
|
||||
## Example
|
||||
|
||||
```js
|
||||
const attr = new Attributes()
|
||||
.add('class', 'various')
|
||||
.add('stroke', 'red')
|
||||
.add('stroke-width', 2)
|
||||
|
||||
const props = attr.asPropsIfPrefixIs('stroke')
|
||||
/* Props holds:
|
||||
{
|
||||
stroke: 'red',
|
||||
stroke-width: 2
|
||||
}
|
||||
*/
|
||||
```
|
||||
|
|
@ -1,19 +1,23 @@
|
|||
---
|
||||
title: clone()
|
||||
title: Attributes.clone()
|
||||
---
|
||||
|
||||
The `Attributes.clone()` method returns a new Attributes object that is a deep
|
||||
copy of this one.
|
||||
|
||||
## Signature
|
||||
|
||||
```js
|
||||
Attributes attributes.clone()
|
||||
```
|
||||
|
||||
Returns a new Attributes object that is a deep copy of this one.
|
||||
## Example
|
||||
|
||||
```js
|
||||
let { Path, paths } = part.shorthand();
|
||||
const attr = new Attributes()
|
||||
.add('class', 'classA')
|
||||
.add('class', 'classB')
|
||||
|
||||
paths.demo = new Path()
|
||||
.attr('class', 'classA')
|
||||
.attr('class', 'classB');
|
||||
|
||||
paths.clone = paths.demo.clone()
|
||||
const cloned = attr.clone()
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -1,15 +1,29 @@
|
|||
---
|
||||
title: Attributes
|
||||
order: 40
|
||||
---
|
||||
|
||||
Attributes is an object that holds attributes for a variety of other objects.
|
||||
An Attributes object holds attributes for a variety of other objects.
|
||||
|
||||
Attributes are attached to [`Point`](/reference/api/point), [`Path`](/reference/api/path), and [`Snippet`](/reference/api/snippet) objects,
|
||||
as well as the internal [`Svg`](/reference/api/svg) object.
|
||||
## Signature
|
||||
|
||||
All of these have an instantiated Attributes object in their `attributes` property.
|
||||
```js
|
||||
Attributes new Attributes()
|
||||
```
|
||||
|
||||
The Attributes constructor takes no arguments.
|
||||
|
||||
## Methods
|
||||
An Attributes object exposes the following methods:
|
||||
|
||||
<ReadMore list />
|
||||
|
||||
## Notes
|
||||
|
||||
Attributes are attached to [`Point`](/reference/api/point),
|
||||
[`Path`](/reference/api/path), and [`Snippet`](/reference/api/snippet) objects,
|
||||
as well as the internal [`Svg`](/reference/api/svg) object.
|
||||
|
||||
All of these have an instantiated Attributes object in their `attributes`
|
||||
property, as well as a number of (chainable) helper methods to manipulate the
|
||||
attributes. You will typically use these higher-level method and thus are
|
||||
unlikely to interact with an Attributes object directly.
|
||||
|
|
|
|||
|
|
@ -1,22 +1,25 @@
|
|||
---
|
||||
title: get()
|
||||
title: Attributes.get()
|
||||
---
|
||||
|
||||
The `Attributes.get()` method will return the value of attribute stored under
|
||||
`key`, or `false` if it's not set.
|
||||
|
||||
## Signature
|
||||
|
||||
```js
|
||||
string attributes.get(string key)
|
||||
```
|
||||
|
||||
Will return the value of attribute stored under `key`, or `false` if it's not set.
|
||||
|
||||
If key has multiple values, they will be joined together in a string, seperated by spaces.
|
||||
|
||||
## Example
|
||||
|
||||
```js
|
||||
let { Path, paths } = part.shorthand();
|
||||
const attr = new Attributes()
|
||||
.add('class', 'classA')
|
||||
.add('class', 'classB')
|
||||
|
||||
paths.demo = new Path()
|
||||
.attr('class', 'classA')
|
||||
.attr('class', 'classB');
|
||||
|
||||
let class = paths.demo.attributes.get('class');
|
||||
const class = attr.get('class')
|
||||
// class now holds: "classA classB"
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,20 +1,23 @@
|
|||
---
|
||||
title: getAsArray()
|
||||
title: Attributes.getAsArray()
|
||||
---
|
||||
|
||||
The `Attributes.getAsArray()` method will return an array with the value of
|
||||
attribute stored under `key`, or `false` if it's not set.
|
||||
|
||||
## Signature
|
||||
|
||||
```js
|
||||
array attributes.getAsArray(string key)
|
||||
```
|
||||
|
||||
Will return an array with the value of attribute stored under `key`, or `false` if it's not set.
|
||||
## Example
|
||||
|
||||
```js
|
||||
let { Path, paths } = part.shorthand();
|
||||
const attr = new Attributes()
|
||||
.add('class', 'classA')
|
||||
.add('class', 'classB')
|
||||
|
||||
paths.demo = new Path()
|
||||
.attr('class', 'classA')
|
||||
.attr('class', 'classB');
|
||||
|
||||
let class = paths.demo.attributes.getAsArray('class');
|
||||
const class = attr.getAsArray('class')
|
||||
// class now holds: [ "classA", "classB" ]
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,22 +1,23 @@
|
|||
---
|
||||
title: remove()
|
||||
title: Attributes.remove()
|
||||
---
|
||||
|
||||
The `Attributes.remove()` method removes the attribute values under key and
|
||||
returns the Attributes object.
|
||||
|
||||
## Signature
|
||||
|
||||
```js
|
||||
Attributes attributes.remove(string key)
|
||||
```
|
||||
|
||||
Removes the attribute values under key and returns the Attributes object.
|
||||
## Example
|
||||
|
||||
```js
|
||||
let { Path, paths } = part.shorthand();
|
||||
const attr = new Attributes()
|
||||
.add('class', 'classA')
|
||||
.add('class', 'classB')
|
||||
.remove('class')
|
||||
|
||||
paths.demo = new Path()
|
||||
.attr('class', 'classA')
|
||||
.attr('class', 'classB');
|
||||
|
||||
let class = paths.example.attributes
|
||||
.remove()
|
||||
.get('class');
|
||||
// class now holds: false
|
||||
// attr holds no data
|
||||
```
|
||||
|
|
|
|||
23
markdown/dev/reference/api/attributes/render/en.md
Normal file
23
markdown/dev/reference/api/attributes/render/en.md
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
---
|
||||
title: Attributes.render()
|
||||
---
|
||||
|
||||
The `Attributes.render()` method will render attributes as a string suitable
|
||||
for inclusion in an SVG tag.
|
||||
|
||||
## Signature
|
||||
|
||||
```js
|
||||
string attributes.render()
|
||||
```
|
||||
|
||||
## Example
|
||||
|
||||
```js
|
||||
const attr = new Attributes()
|
||||
.set('id', 'example')
|
||||
.add('class', 'classA')
|
||||
.add('class', 'classb')
|
||||
|
||||
const paragraph = `<p ${attr.render()}>Hello</p>`
|
||||
```
|
||||
27
markdown/dev/reference/api/attributes/renderascss/en.md
Normal file
27
markdown/dev/reference/api/attributes/renderascss/en.md
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
---
|
||||
title: Attributes.renderAsCss()
|
||||
---
|
||||
|
||||
The `Attributes.renderAsCss()` method will render attributes as a string
|
||||
suitable for inclusion in a CSS defninition.
|
||||
|
||||
## Signature
|
||||
|
||||
```js
|
||||
string attributes.renderAsCss()
|
||||
```
|
||||
|
||||
## Example
|
||||
|
||||
```js
|
||||
const attr = new Attributes()
|
||||
.add('stroke', 'red')
|
||||
.add('stroke-width', 2)
|
||||
.add('stroke-dasharray', '3 1')
|
||||
|
||||
const css = `
|
||||
path {
|
||||
${attr.renderAsCss()}
|
||||
}
|
||||
`
|
||||
```
|
||||
24
markdown/dev/reference/api/attributes/renderifprefixis/en.md
Normal file
24
markdown/dev/reference/api/attributes/renderifprefixis/en.md
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
---
|
||||
title: Attributes.renderIfPrefixIs()
|
||||
---
|
||||
|
||||
The `Attributes.renderIfPrefixIs()` method will render attributes as a string
|
||||
suitable for inclusion in an SVG tag, but only those attribute keys who start
|
||||
with `prefix`.
|
||||
|
||||
## Signature
|
||||
|
||||
```js
|
||||
string attributes.renderIfPrefixIs(string prefix)
|
||||
```
|
||||
|
||||
## Example
|
||||
|
||||
```js
|
||||
const attr = new Attributes()
|
||||
.add('class', 'various')
|
||||
.add('stroke', 'red')
|
||||
.add('stroke-width', 2)
|
||||
|
||||
const line = `<path ${attr.renderIfPrefixIs('stroke')} d="M 0,0 L 100.0" />`
|
||||
```
|
||||
|
|
@ -1,29 +1,29 @@
|
|||
---
|
||||
title: set()
|
||||
title: Attributes.set()
|
||||
---
|
||||
|
||||
The `Attributes.set()` method sets the attribute identified by `key` to value
|
||||
`value`.
|
||||
|
||||
## Signature
|
||||
|
||||
```js
|
||||
Attributes attributes.set(string key, string value)
|
||||
```
|
||||
|
||||
Sets the attribute identified by `key` to value `value`.
|
||||
|
||||
<Warning>
|
||||
|
||||
This will overwrite any value that's currently set on the attribute identified by `key`.
|
||||
|
||||
</Warning>
|
||||
## Example
|
||||
|
||||
```js
|
||||
let { Path, paths } = part.shorthand();
|
||||
const attr = new Attributes()
|
||||
.add('class', 'classA')
|
||||
.add('class', 'classB')
|
||||
|
||||
// This will render as: class="classB"
|
||||
paths.demo = new Path();
|
||||
paths.demo.attributes.set('class', 'classA');
|
||||
paths.demo.attributes.set('class', 'classB');
|
||||
|
||||
// This does the same thing:
|
||||
paths.demo = new Path()
|
||||
.attr('class', 'classA', true)
|
||||
.attr('class', 'classB', true);
|
||||
const class = attr.get('class')
|
||||
// class now holds: "classA classB"
|
||||
```
|
||||
|
||||
## Notes
|
||||
|
||||
This will overwrite any value that's currently set on the attribute identified
|
||||
by `key`.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,24 +1,27 @@
|
|||
---
|
||||
title: setIfUnset()
|
||||
title: Attributes.setIfUnset()
|
||||
---
|
||||
|
||||
The `Attributes.setIfUnset()` method sets the attribute identified by `key` to
|
||||
value `value` but only if it's currently unset (`undefined`).
|
||||
|
||||
## Signature
|
||||
|
||||
```js
|
||||
Attributes attributes.setIfUnset(string key, string value)
|
||||
```
|
||||
|
||||
Sets the attribute identified by `key` to value `value` but only if it's currently unset (`undefined`).
|
||||
|
||||
<Tip>
|
||||
|
||||
This will never overwrite any value and thus is a safe way to set attributes
|
||||
|
||||
</Tip>
|
||||
## Example
|
||||
|
||||
```js
|
||||
let { Path, paths } = part.shorthand();
|
||||
const attr = new Attributes()
|
||||
.setIfUnset('class', 'classA')
|
||||
.setIfUnset('class', 'classB')
|
||||
|
||||
// This will render as: class="classA"
|
||||
paths.demo = new Path();
|
||||
paths.demo.attributes.set('class', 'classA');
|
||||
paths.demo.attributes.setIfUnset('class', 'classB');
|
||||
const class = attr.get('class')
|
||||
// class now holds: "classA"
|
||||
```
|
||||
|
||||
## Notes
|
||||
|
||||
This will never overwrite any value and thus is a safe way to set attributes
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue