Dari sudut pandang fungsional, saya menampilkan empat tombol yang dapat dipilih atau tidak, secara mandiri. Saya mencoba beberapa solusi dengan tombol sederhana, atau menggunakan _doClick dan fungsi untuk mengubah properti persegi panjang. Saya juga mencoba simpul sederhana.
Saya memilih kotak centang yang memungkinkan tombol menjadi independen. Saya menggunakan ikon persegi panjang tetapi saya tidak bisa membuatnya sesuai dengan dimensi tombol. Tampaknya selalu persegi. Saya juga ingin memusatkan teks di tengah tombol.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>LLDynp</title>
<meta name="description" content="Nodes with varying lists of ports on each of four sides." />
<!-- Copyright 1998-2017 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="https://unpkg.com/gojs/release/go-debug.js"></script>
<body onload="init()">
<script id="code">
var myFont = "16px sans-serif";
var myFontSmall = "14px sans-serif";
var myFontBold = "bold 16px sans-serif";
var colors = {
    'blueUnitBorder': "rgb(65, 116, 217",
    'blueUnit': "rgb(0, 0, 200)",
    'red': '#ff0000',
    'green': '#52ce60',
    'blue': '#6ea5f8',
    'black': 'rgb(0, 0, 0)',
    'lightred': '#fd8852',
    'lightblue': '#afd4fe',
    'lightgreen': '#b9e986',
    'pink': '#faadc1',
    'purple': '#d689ff',
    'orange': '#fdb400'
      };
var flowTypeArray=
      [{key: 0, text: "Ask for", selected: false, color: colors.red},
       {key: 1, text: "Deliver", selected: false, color: colors.black},
       {key: 2, text: "Ask for $", selected: false, color: colors.green},
       {key: 3, text: "$", selected: false, color: colors.blue}
     ];
var nextNeedNumber=0;
var referenceNeedRow=null;
var referenceNeedName=null;
var maxNeeds=5;
var emptyNeedName = "new need name?";

  function init() {
    var $ = go.GraphObject.make;  //for conciseness in defining node templates

    myBannerODIP =
          $(go.Diagram, "myBannerODIPDiv",
                { layout: $(go.GridLayout, { wrappingColumn: 4, alignment: go.GridLayout.Position })});
    myBannerODIP.nodeTemplate =
        $(go.Node, "Auto", { name: "theNode"},
        $("CheckBox", "checked", { name: "theCheckBox"},
                { "Button.width": 85, "Button.height": 50,
                  "_buttonFillOver" : "pink", "ButtonBorder.strokeWidth": 2,
                  "ButtonIcon.figure": "Rectangle", "ButtonIcon.fill": "yellow",
                  "ButtonIcon.strokeWidth": 4, "ButtonIcon.width": 55, "ButtonIcon.height": 40,
                },
                new go.Binding("ButtonIcon.stroke", "key", function(s) { return flowTypeArray[s].color; }).ofObject(),// OK
            $(go.TextBlock,  { name: "theTextBlock"}, {textAlign: "center", margin: new go.Margin (0, 0, 0, -75)},
                  new go.Binding("text", "key", function(s) { return flowTypeArray[s].text; }).ofObject(),// OK
                  new go.Binding("stroke", "key", function(s) { return flowTypeArray[s].color; }),// OK
                  new go.Binding("font", "checked", function(s) { return s ? myFontBold : myFont; })// OK no ofObject
                ),
         )
       );// end horizontal ODIP panel
          myBannerODIP.model.nodeDataArray
         ODIPNodesArray = [
           {key: 0, "checked": false},// checked OK; isSelected  bad; choice à l'envers!
           {key: 1, "checked": true},
           {key: 2 },
           {key: 3 },
                     ];
         ODIPLinksArray = [];
        myBannerODIP.model = new go.GraphLinksModel(ODIPNodesArray, ODIPLinksArray);
};
</script>
</head>
<body onload="init()">
  <div id="container" style= "display: grid; grid-template-columns: 1fr 5fr; margin:0 ;
          height: 800px; width:1080px; font-size:0; position: relative; ">
    <div id="For banner & placeholder save..." style:"grid-column-start: 1;">
        <div id="myBannerODIPDiv" style="display: inline-block; width: 400px; height:70px; background: whitesmoke; margin-right: 6px; border: solid 0px black;">
        </div>
  </div>
</div>
</body>
</html>
1
user1438509 19 April 2020, 22:35

1 menjawab

Jawaban Terbaik

Saya tidak jelas apa yang Anda inginkan. Pernahkah Anda melihat semua penyesuaian di https://gojs.net/latest/extensions/Checkboxes. html ? Anda dapat mengubah properti dari "ButtonBorder" dan "ButtonIcon". Misalnya:

     $("CheckBox", "choice6",
          {
            "Button.width": 20, "Button.height": 20,
            "ButtonBorder.figure": "Circle", "ButtonBorder.stroke": "blue",
            "ButtonIcon.figure": "Circle", "ButtonIcon.fill": "blue",
            "ButtonIcon.strokeWidth": 0, "ButtonIcon.desiredSize": new go.Size(10, 10)
          },
          $(go.TextBlock, "blue circle")
      ),
1
Walter Northwoods 20 April 2020, 02:22