代码之家 › 专栏 › 技术社区 › Pandiyan Cool

在GoJS中悬停按钮的自定义样式

gojs css html javascript

1

Pandiyan Cool · 技术社区 · 6 年前

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

我想使这个按钮类似于引导主按钮。如何将自定义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"))
  );

1 回复 | 直到 6 年前

1

Pandiyan Cool 6 年前

我已经设法把这个按钮设计成如下样式

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