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. Thewidth
property takes precedence over thecolumns
property (if the two are used together).color
- Specifies the foreground color of the form control. If the value of thecolor
property 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-color
property 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
,font
text-align
,text-decoration
width
color
,background-color
link
- For more information about this property see thelink
property section.
element{ content: oxy_label(text, "Label Text", styles, "font-size:2em;color:red;link:attr(href);"); }
Instead of using the values of the
styles
property 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 thestyles
property 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) }