Vaadin的UI组件CSS样式规则.pdfVIP

UI 组件CSS 样式规则 1 UI 组件 1.1 的共通功能 1.1.1 标题 .v-caption {} .v-captiontext {} .v-caption-clearelem {} .v-required-field-indicator {} 1.1.2 激活与禁用 被禁用的组件除组件原有的样式外, 还会带有 v-disabled CSS 样式. 如果 要匹配同时具有这两种样式的组件, 你需要将两种样式类名用点号结合起来, 参 见下面的例子. .v-textfield.v-disabled { border: dotted; } 这个CSS 规则会让被禁用的文本输入框的边框显示为点状。 1.1.3 图标 .v-icon { color: blue; } 1.1.4 只读 将一个通常可编辑的组件设置为只读状态，可能会改变它的外观表现，以便 禁止用户编辑它。只读状态下，除CSS 样式外，HTML 接口也可能变化。比如， TextField 的文本编辑框会消失，它的外观表现会变得类似于Label 。 只读组件将带有 v-readonly 样式。以下 CSS 样式规则将使所有的只读 TextField 组件的文字显示为斜体字。 .v-textfield.v-readonly { font-style: italic; } 1.1.5 样式名称 方法名称 用法 getStyleName() 返回当前的样式名称列表 1 setStyleName() 将目前的样式替换为指定的样式名称 addStylename() 增加单个的样式名称 removeStyleName() 删除单个的样式名称 .mystyle { font-family: fantasy; font-style: italic; font-size: 25px; font-weight: bolder; line-height: 30px; } 1.1.6 控制组件的尺寸 Unit.PIXELS px 像素是基本的硬件单位，指显示设备上的一个物理像素。 Unit.POINTS pt 磅是一种印刷单位，1磅通常定义为1/72英寸，也就是大约 0.35毫米。 Unit.PICAS pc pica是一种印刷单位，1 pica定义为12磅，也就是1/7英寸， 大约4.233毫米。 Unit.EM em 这是与当前使用的字体相关的一个单位，1 em等于大写字母 M的宽度. Unit.EX ex 这是与当前使用的字体相关的一个单位，1 ex等于小写字母 x的高度。 Unit.MM mm 物理长度单位，指显示设备上的1毫米。但实际的显示尺寸 决定于：1显示设备本身；2显示设备在操作系统中的度量标 准；3浏览器。 Unit.CM cm 物理长度单位，指显示设备上的1厘米。 Unit.INCH in 物理长度单位，指显示设备上的1英寸。 Unit.PERCENTAGE % 相对于可用尺寸的百分比。百分比值必须在0到100之间。 1.1.7 输入焦点 获得焦点的组件将带有一个额外的样式，样式名后缀为-focus 。比如， TextField ，通常的样式为v-textfield ，获得焦点后将额外带有一个v-textfield-focus 样式。 比如，下面的例子会让获得焦点的文本输入框显示为蓝色。 .v-textfield-focus { background: lightblue;