LinkStyle

Link style operation allows you to style links (<a> elements.).

1 - elements

let elements = [
 {
        type: "a",
        text: "nasa",
        id: "#myLink",
        block: true,
        link: "https://www.nasa.gov",
        color: "white",
        background: "green",
        width: "120px"
    }
]

2 - operations

You can use the linkStyleOperation.

let nodes = [
  {
    op: {
      name: "link-style",
      ops: "full"
    },
    target: ["#myLink"]
  }
];

Here are possible styles:

• full - full link style
• air - link style with border and no background
• round - round style

You can combine the styling as you wish:

• air-round - rounded link style with border and no background
• full-hover - full link style with a hover effect
• air-round-hover - rounded link style with border, no background and hover effect

This results in hover and/orborderObj properties being added to respective elements. You can customize them as you wish.

new Link()
    .set({
     	// ... rest of the properties
        borderObj: {
            width: "3px",
            radius: "0.7rem",
            color: "#1abc9c"
        },
        hover: {
            color: "#1abc9c",
            background: "orange"
        }
    })
    .render("#mount");