oxy_label() Function
This function can be used in conjunction with the CSS
content property
to change the style of generated text.
The arguments of the function are property name - property value pairs. The following properties are supported:
text- This property specifies the built-in form control you are using.width- Specifies the width of the content area using relative (em,ex), absolute (in,cm,mm,pt,pc,px), and percentage (followed by the%character) length units. Thewidthproperty takes precedence over thecolumnsproperty (if the two are used together).color- Specifies the foreground color of the form control. If the value of thecolorproperty isinherit, the form control has the same color as the element in which it is inserted.background-color- Specifies the background color of the form control. If the value of thebackground-colorproperty isinherit, the form control has the same color as the element in which it is inserted.styles- Specifies styles for the form control. The values of this property are a set of CSS properties:font-weight,font-size,font-style,fonttext-align,text-decorationwidthcolor,background-colorlink- For more information about this property see thelinkproperty section.
element{ content: oxy_label(text, "Label Text", styles, "font-size:2em;color:red;link:attr(href);"); }Instead of using the values of the
stylesproperty individually, you can define them in a CSS file as in the following example:* { width: 40%; text-align:center; }Then refer that file with an import directive, as follows:elem { content: oxy_label(text, 'my_label', styles, "@import 'labels.css';") }Caution
Extensive use of thestylesproperty may lead to performance issues.
oxy_label() function contains new lines, for example
oxy_label(text, 'LINE1\A LINE2', width, 100px), the text is split in two.
Each of the two new lines has the specified width of 100 pixels.
Note
The text is split after
\A, which represents a new line character.
You can use the oxy_label() function together with a built-in form control function to create a
form control based layouts.
An example of a use case is if you have multiple attributes on a single element and
you
want use form controls on separate lines and style them differently. Consider the
following
CSS rule:
person:before {
content: "Name:*" oxy_textfield(edit, '@name', columns, 20)
"\A Address:" oxy_textfield(edit, '@address', columns, 20)
}Suppose
you only want the Name label to be set to bold, while you want
both labels aligned to look like a table (the first column with labels and the second
with a
text field). To achieve this, you can use the oxy_label() to style each label
differently.
person:before {
content: oxy_label(text, "Name:*", styles, "font-weight:bold;width:200px")
oxy_textfield(edit, '@name', columns, 20) "\A "
oxy_label(text, "Address:", styles, "width:200px")
oxy_textfield(edit, '@address', columns, 20)
}