代号为 ButtonGroup 中的单选按钮

Question

@Shai 下图来自 CleanModern Project。我怎样才能使用 CSS 设计我的单选按钮，使其看起来与 Shai 所做的完全一样，并且还对每个按钮进行操作以在按下时显示不同的容器

ButtonGroup barGroup = new ButtonGroup();
    RadioButton all = RadioButton.createToggle("All", barGroup);
    all.setUIID("SelectBar");
    RadioButton featured = RadioButton.createToggle("Featured", barGroup);
    featured.setUIID("SelectBar");
    RadioButton popular = RadioButton.createToggle("Popular", barGroup);
    popular.setUIID("SelectBar");
    RadioButton myFavorite = RadioButton.createToggle("My Favorites", barGroup);
    myFavorite.setUIID("SelectBar");
    Label arrow = new Label(res.getImage("news-tab-down-arrow.png"), "Container");

    add(LayeredLayout.encloseIn(
            GridLayout.encloseIn(4, all, featured, popular, myFavorite),
            FlowLayout.encloseBottom(arrow)
    ));

Answer 1

您可以在设计器工具中打开主题文件，然后从那里复制样式。我使用图像背景实现了这一点，以便为底部的箭头留出一些像素。

如果您查看主题，您会发现我只是放置了一个顶部为纯红色且底部为白色的背景图像。然后我有一个单独的 "arrow" 图像，每次单击时都会使用所选按钮的代码进行动画处理。其他一切都只是微不足道的颜色和字体。

代号为 ButtonGroup 中的单选按钮

Codename one Radio Buttons in a ButtonGroup

radio-button

codenameone