简体   繁体   中英

Custom style to hover button in gojs

I have created a button which displays when user hovers on chart node using below code. But the button looks normal without any styles.

I would like make this button similar to bootstrap primary button. How can we add custom css to this hover button

JSFIDDLE

var nodeHoverAdornment =
  $(go.Adornment, "Spot",
    {
      background: "transparent",
      // hide the Adornment when the mouse leaves it
      mouseLeave: function(e, obj) {
        var ad = obj.part;
        ad.adornedPart.removeAdornment("mouseHover");
      }
    },
    $(go.Placeholder,
      {
        background: "transparent",  // to allow this Placeholder to be "seen" by mouse events
        isActionable: true,  // needed because this is in a temporary Layer
        click: function(e, obj) {
          var node = obj.part.adornedPart;
          node.diagram.select(node);
        }
      }),
    $("Button",
      { alignment: go.Spot.Left, alignmentFocus: go.Spot.Right },
      { click: function(e, obj) { alert("started!"); } },
      $(go.TextBlock, "Start")),
    $("Button",
      { alignment: go.Spot.Right, alignmentFocus: go.Spot.Left },
      { click: function(e, obj) { alert("Stopped"); } },
      $(go.TextBlock, "Stop"))
  );

I have managed to style the button as follows

    $("Button", {
      alignment: go.Spot.Bottom,
      alignmentFocus: go.Spot.Left,
      "ButtonBorder.fill": "#007bff",
      "ButtonBorder.stroke": "#007bff",
      "_buttonFillOver": "#007bff",
      "_buttonStrokeOver": "#007bff",
      cursor: "pointer",
      width: 80,
      padding: go.Margin.parse('30 0 0 5')

    },
    $(go.TextBlock, "Analyse", {
      stroke: '#fff',
      margin: 2,
    }))
//Supplement two attributes:
$("Button", {
  alignment: go.Spot.Bottom,
  alignmentFocus: go.Spot.Left,
  "ButtonBorder.fill": "#007bff",
  "ButtonBorder.stroke": "#007bff",
  "_buttonFillOver": "#007bff",
  "_buttonStrokeOver": "#007bff",
  "_buttonFillPressed": '#3A8EE6',
  "_buttonStrokePressed": '#3A8EE6',
  cursor: "pointer",
  width: 80,
  padding: go.Margin.parse('30 0 0 5')
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM