【问题标题】:Creating my own Custom widget in GWT and styling it using my own Custom CSS code在 GWT 中创建我自己的自定义小部件并使用我自己的自定义 CSS 代码对其进行样式设置
【发布时间】:2013-03-14 19:04:05
【问题描述】:

我创建了一个自定义小部件,基本上是一个图像和一个文本标签。 我必须做什么才能现在只使用 CSS 设置文本的位置(例如图像的顶部/左侧/底部)?我的意思是我的班级需要哪些方法才能应用 CSS 样式?

ie 我可以有这样的 css 类吗

.ImageAndLabel 
{
     imagePosition: top;
}

这是我的 gwt 课程

    public class ImageAndLabel extends Composite
    {
        private Label label = new Label();
        private Image img = new Image("/images/pinkBackground.png");
        protected final FlexTable contentTable;

        public ImageAndLabel()
        {
            contentTable = new FlexTable();
            initWidget(contentTable);
            label.getElement().getStyle().setFontSize(40, Unit.PX);
            contentTable.setWidget(0,0,img);
            img.setHeight("200px");
            contentTable.setWidget(0,1,label);
            label.getElement().getStyle().setLeft(0, Unit.PX);
            img.getElement().setId("popupImg");
            label.getElement().setId("popupLabel");
        }

        public void setText(String text)
        {
            label.setText(text);
        }
    }

我想我想要的是我可以创建自己的自定义 CSS 代码吗?

【问题讨论】:

  • 你可以使用 setStyleName(style)
  • contentTable.setStyleName()??
  • contentTable.setWidget(0, 0, label); contentTable.setWidget(1,1,img);
  • 我不是说如何将样式类与此类关联。我的意思是我可以有一个如下声明的样式属性 { myOwnAttribute: top; } 这可能吗?如果那么我在属性中设置的值如何应用于我的小部件?
  • 我不确定这是否可行 - 实现您自己的 css 属性。但这可能会对您有所帮助stackoverflow.com/questions/2926326/…

标签: css gwt


【解决方案1】:

您可以将flextable 方法用于alignment。 示例:

  flexTable.getFlexCellFormatter().setAlignment(0, 0, 
      HasHorizontalAlignment.ALIGN_CENTER, HasVerticalAlignment.ALIGN_MIDDLE);

【讨论】:

  • 假设我想要一个具有属性 { position: imageOnTop; 的 CSS 规则。或位置:textOnTop; } 我必须对我的班级做些什么才能使上面的 css 有意义,或者我不能创建自定义 CSS 标签?
  • MayoMan , ImageAndLabel 在 flextable 中,无论您在何处添加 ImageAndLabel 它都会添加到 flextable 中,因此您必须将 css 应用于要添加 ImageAndLabel 的小部件,例如:horizo​​ntalPanel.add(new ImageandLabel ) 而不是将 css 应用于 horizo​​mtalPanel
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2014-08-31
  • 1970-01-01
  • 2013-01-26
  • 2016-12-23
  • 1970-01-01
  • 1970-01-01
  • 2021-02-14
相关资源
最近更新 更多