gnome-shellgnome-shell-extensionsgjs

Can I get a hover and checked effect with St.Button in GJS?

I have a group button with icon. If I can setup a hover effect, for I saw here is some func or attribute like St.Widget.track-hover St.Widget.sync_hover St.Widget.set_hover, maybe minor changes may be made for buttons using css. But those function is complex to understood, if has some example code can do this?

enter image description here

Other thing is since no radio_button in gjs, if I can use set_checked() to do some display effect to show the checked statu for my buttons?

Solution

  • answer to checked statu and radio button part first.

    I found a key line When the value is true, the St.Button will have the checked CSS pseudo-class set. refer to https://gjs-docs.gnome.org/st10~1.0_api/st.button. So I search checked CSS pseudo-class set, and know this is controled by :checked attribute in CSS file.

    First write those lines in stylesheet.css.

    :checked {
  margin-left: 25px;
  border: 4px solid #CBCBCB;
}

    Then within extension.js, set toggle_mode, then set_checked . It works well.

    butt[i] = new St.Button({ can_focus: true, child: icon, toggle_mode: true });

butt[0].set_checked(true);

    Then you can toggle a group buttons like this.

    butt[i].connect('clicked', (self) => {
    butt.forEach((self)=>{ self.checked = false; });
    self.checked = true;
});

    I think hover is the same way to solve.