4
$\begingroup$

I have a ButtonBar like this and on click I want to change the color of the pressed button dynamically. Which is the properly way to do this in Mathematica ? My code:

  color = {Blue,Red,Red},
  
  buttonBar = ButtonBar[{
      "First Button ":>{
        color = {Blue,Red,Red}
        Print["Clicked 1"],
      },
      
      "Second Button ":>{
        color = {Red,Blue,Red}
        Print["Clicked 2"],
      },
      
      "Third Button ":>{
        color = {Red,Red,Blue}
        Print["Clicked 3"],
      },
    }, 
    Background -> Dynamic[color],
    Appearance -> "Vertical",
    ImageSize -> {100,30}, 
    Background->Lighter[Gray, 0.80]
  ];
$\endgroup$

4 Answers 4

4
$\begingroup$
Clear["Global`*"]

SetOptions[Framed, Alignment -> Center, ImageSize -> {100, 30}];

color = {LightBlue, LightRed, LightRed};
x = "";
buttonBar = ButtonBar[{
   Framed["First Button",
     Background -> 
      Dynamic[color[[1]]]] :> (color = {LightBlue, LightRed, 
       LightRed}; x = "Clicked 1"),
   Framed["Second Button",
     Background -> 
      Dynamic[color[[2]]]] :> (color = {LightRed, LightBlue, 
       LightRed}; x = "Clicked 2"),
   Framed["Third Button",
     Background -> 
      Dynamic[color[[3]]]] :> (color = {LightRed, LightRed, 
       LightBlue}; x = "Clicked 3")},
  Appearance -> "Vertical",
  ImageSize -> {100, 30},
  Background -> Lighter[Gray, 0.80]]
Dynamic[x]

enter image description here

$\endgroup$
4
$\begingroup$

ButtonBar does not allow access to button indices and it does not allow individual styling of buttons.

You can easily create your own button bar with more flexible styling options. For example:

ClearAll[indexedButton]
SetAttributes[indexedButton, HoldRest]

indexedButton[label_, action_, defaultbackground_, pressedbackground_, index_: 1] :=
 Block[{bI}, 
  Button[label, (bI = index; action), 
   Appearance -> Dynamic[bI /. {index -> "Pressed", _ -> Automatic}], 
   Background -> Dynamic[bI /. {index -> (pressedbackground /. 
       Automatic -> Lighter[Lighter @ defaultbackground]), _ -> defaultbackground}]]]

Examples:

labels = {"First Button", "Second Button", "Third Button"};

actions = {Unevaluated @ Print["Clicked 1"], 
   Unevaluated @ Print["Clicked 2"], 
   Unevaluated @ Print["Clicked 3"]};


DynamicModule[{bI = 0}, 
 Column[MapIndexed[indexedButton @@ Join[##] &, 
   Thread[{labels, actions, Red, Green}]], Spacings -> 0]]

enter image description here

You can also organize a list of buttons in a Grid with desired options:

ClearAll[buttonGrid]

buttonGrid[list_, dims_: Automatic, opts : OptionsPattern[]] := 
 Grid[ArrayReshape[list, dims /. Automatic -> {Length @ list, 1}], opts,
   Spacings -> {0, 0}]

Examples:

DynamicModule[{bI = 0}, 
 buttonGrid @ 
  MapIndexed[indexedButton @@ Join[##] &, 
   Thread[{labels, actions, Red, Green}]]]

enter image description here

DynamicModule[{bI = 0}, 
 buttonGrid[MapIndexed[indexedButton @@ Join[##] &, 
   Thread[{labels, actions, Red, Green}]], 
  Automatic, 
  Frame -> True, 
  FrameStyle -> White, 
  Spacings -> {{2, {.5}, 2}, {2, {.5}, 2}}, 
  Background -> LightBlue]]

enter image description here

$\endgroup$
3
$\begingroup$
is = 2 Rasterize["Second Button", "RasterSize"];

buttonbar := DynamicModule[{clickedbutton = ""}, 
  ButtonBar[Panel[#, FrameMargins -> 1, 
       Background -> Dynamic[clickedbutton /. {#2 -> #3, _ -> #4}], 
       Alignment -> {Center, Center}, ImageSize -> is] :> 
      Print[clickedbutton = #2] & @@@ 
  {{"First Button", "Clicked 1", Red, Orange}, 
   {"Second Button", "Clicked 2", Red, Orange}, 
   {"Third Button", "Clicked 3", Red, Orange}}, 
   Appearance -> "Vertical", 
   FrameMargins -> 5, 
   Background -> Lighter[Gray, 0.80]]]


buttonbar

enter image description here

$\endgroup$
2
$\begingroup$

You might consider using SetterBar instead of ButtonBar:

DynamicModule[{x = 0},
  SetterBar[Dynamic[x, (x = #; Print["Clicked " <> ToString[#]]) &],
    {1 -> "First Button", 2 -> "Second Button", 3 -> "Third Button"}, 
    Background -> Orange, Appearance -> {"FramedPalette", "Vertical"}]]

enter image description here

Note: Changing the background color for "Pressed" mode is a challenge.

$\endgroup$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.