Question

我创建了一个按钮，当用户使用以下代码将鼠标悬停在图表节点上时显示。但是按钮看起来很正常，没有任何样式。

我想使此按钮类似于引导主按钮。我们如何向此悬停按钮添加自定义CSS

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"))
  );

Answer 1

我设法按如下方式设置了按钮的样式

    $("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,
    }))

Answer 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')
}

自定义样式以将鼠标悬停在Gojs中

2 个答案: