Documentation

General

Connecting library and basic template

Connect library by calling the extension:

\Bitrix\Main\UI\Extension::load("ui.forms");

Basic template



<div class="ui-ctl ui-ctl-textbox ui-ctl-before-icon ui-ctl-after-icon"> <!-- 1. Main container -->
    <div class="ui-ctl-before ui-ctl-icon-search"></div> <!-- 3. Additional element (optional)-->
    <button class="ui-ctl-after ui-ctl-icon-clear"></button> <!-- 3. Additional element (optional)-->
	<input type="text" class="ui-ctl-element"> <!-- 2. Main field -->
</div>

  1. Main element - required element. Has the basic class .ui-ctl that defines basic properties for a full control. Specifically this element has all classes-modifiers assigned.
  2. Main field - required element. Directly the control itself. Always has a single class .ui-ctl-element, but can be a different tag (<input>, <select>, <textarea> or <div>).
  3. Additional elements - optional elements. Intended for displaying icons inside a field. Can be not less that 2 pcs., but specifically with different classes. More details on these elements.

When fields can be customized by its draft, use the class modifier at .ui-ctl.


Attention! Redefining styles without custom class is prohibited!


By default, fields have a basic height as 39px and width 320px. For some fields these values can differ. You can find more details in a [link=12561984]individual field description.

Dimensions and layout

inline-flex / flex

One of default properties .ui-ctl is display: flex. Subsequently, this field works as block element, but stretches out to the basic width of the complete type. Width can be re-defined and reset. Find more details here.

Modifier .ui-ctl-inline - changes property display to inline-flex, with properties similar to display: inline-block, i. e. the field starts to behave as block inline element.

ModifierCode

Modifier .ui-ctl-inline


 
<!-- .ui-ctl.ui-ctl-textbox.ui-ctl-inline > input.ui-ctl-element -->
<div class="ui-ctl ui-ctl-textbox ui-ctl-inline">
	<input type="text" class="ui-ctl-element">
</div>
When property must be reversed, you can use the modifier .ui-ctl-block.

Modifier .ui-ctl-block


 
<!-- .ui-ctl.ui-ctl-textbox.ui-ctl-block > input.ui-ctl-element -->
<div class="ui-ctl ui-ctl-textbox ui-ctl-block">
	<input type="text" class="ui-ctl-element">
</div>

Field width

Width modifiers re-define basic values.

ModifierCode

Modifier .ui-ctl-w25 - sets width as 25%.


 
<!-- .ui-ctl.ui-ctl-textbox.ui-ctl-w25 > input.ui-ctl-element -->
<div class="ui-ctl ui-ctl-textbox ui-ctl-w25">
	<input type="text" class="ui-ctl-element">

Modifier .ui-ctl-w33 - sets width as 33%.


 
<!-- .ui-ctl.ui-ctl-textbox.ui-ctl-w33 > input.ui-ctl-element -->
<div class="ui-ctl ui-ctl-textbox ui-ctl-w33">
	<input type="text" class="ui-ctl-element">

Modifier .ui-ctl-w50 - sets width as 50%.


 
<!-- .ui-ctl.ui-ctl-textbox.ui-ctl-w50 > input.ui-ctl-element -->
<div class="ui-ctl ui-ctl-textbox ui-ctl-w50">
	<input type="text" class="ui-ctl-element">

Modifier .ui-ctl-w75 - sets width as 75%.


 
<!-- .ui-ctl.ui-ctl-textbox.ui-ctl-w75 > input.ui-ctl-element -->
<div class="ui-ctl ui-ctl-textbox ui-ctl-w75">
	<input type="text" class="ui-ctl-element">

Modifier .ui-ctl-w100 - sets width as 100%.


 
<!-- .ui-ctl.ui-ctl-textbox.ui-ctl-w100 > input.ui-ctl-element -->
<div class="ui-ctl ui-ctl-textbox ui-ctl-w100">
	<input type="text" class="ui-ctl-element">

Modifier .ui-ctl-wa - sets property width: auto.


 
<!-- .ui-ctl.ui-ctl-textbox.ui-ctl-wa > input.ui-ctl-element -->
<div class="ui-ctl ui-ctl-textbox ui-ctl-wa">
	<input type="text" class="ui-ctl-element">

Modifier .ui-ctl-wd - resets width to default value of specific type.


 
<!-- .ui-ctl.ui-ctl-textbox.ui-ctl-wd > input.ui-ctl-element -->
<div class="ui-ctl ui-ctl-textbox ui-ctl-wd">
	<input type="text" class="ui-ctl-element">

Field height

ModifierCode

Modifier .ui-ctl-lg - sets string height as 47px.


 
<!-- .ui-ctl.ui-ctl-textbox.ui-ctl-lg > input.ui-ctl-element -->
<div class="ui-ctl ui-ctl-textbox ui-ctl-lg">
	<input type="text" class="ui-ctl-element">

Modifier .ui-ctl-md - sets string height as 39px.


 
<!-- .ui-ctl.ui-ctl-textbox.ui-ctl-md > input.ui-ctl-element -->
<div class="ui-ctl ui-ctl-textbox ui-ctl-md">
	<input type="text" class="ui-ctl-element">

Modifier .ui-ctl-sm - sets string height as 33px.


 
<!-- .ui-ctl.ui-ctl-textbox.ui-ctl-sm > input.ui-ctl-element -->
<div class="ui-ctl ui-ctl-textbox ui-ctl-sm">
	<input type="text" class="ui-ctl-element">

Modifier .ui-ctl-xs - sets string height as 26px.


 
<!-- .ui-ctl.ui-ctl-textbox.ui-ctl-xs > input.ui-ctl-element -->
<div class="ui-ctl ui-ctl-textbox ui-ctl-xs">
	<input type="text" class="ui-ctl-element">

Color

ModifierCode

Modifiers .ui-ctl-active, .ui-ctl-hover..


 
<!-- .ui-ctl.ui-ctl-textbox.ui-ctl-active > input.ui-ctl-element -->
<div class="ui-ctl ui-ctl-textbox ui-ctl-active">
	<input type="text" class="ui-ctl-element">

Modifier .ui-ctl-success.


 
<!-- .ui-ctl.ui-ctl-textbox.ui-ctl-success > input.ui-ctl-element -->
<div class="ui-ctl ui-ctl-textbox ui-ctl-success">
	<input type="text" class="ui-ctl-element">

Modifier .ui-ctl-warning.


 
<!-- .ui-ctl.ui-ctl-textbox.ui-ctl-warning > input.ui-ctl-element -->
<div class="ui-ctl ui-ctl-textbox ui-ctl-warning">
	<input type="text" class="ui-ctl-element">

Modifier .ui-ctl-danger.


 
<!-- .ui-ctl.ui-ctl-textbox.ui-ctl-danger > input.ui-ctl-element -->
<div class="ui-ctl ui-ctl-textbox ui-ctl-danger">
	<input type="text" class="ui-ctl-element">

Modifier .ui-ctl-disabled.


 
<!-- .ui-ctl.ui-ctl-textbox.ui-ctl-disabled > input.ui-ctl-element -->
<div class="ui-ctl ui-ctl-textbox ui-ctl-disabled">
	<input type="text" class="ui-ctl-element">


<!-- .ui-ctl-container > input.ui-ctl-element[disabled] -->
<div class="ui-ctl ui-ctl-textbox">
	<input type="text" class="ui-ctl-element" disabled>
</div>
Modifier changes only field layout. To block possibility of data input, add .ui-element attribute to disabled. This attribute is independent, it can be used without class, with field's layout will change as well.

Tags

ModifierCode

Element .ui-ctl-tag.


new
 
<!-- .ui-ctl.ui-ctl-textbox > .ui-ctl-tag{text} + input.ui-ctl-element -->
<div class="ui-ctl ui-ctl-textbox">
    <div class="ui-ctl-tag">new</div>
    <input type="text" class="ui-ctl-element">
</div>

Modifier .ui-ctl-tag-success for .ui-ctl-tag.


new
 
<!-- .ui-ctl.ui-ctl-textbox > .ui-ctl-tag-success{text} + input.ui-ctl-element -->
<div class="ui-ctl ui-ctl-textbox">
    <div class="ui-ctl-tag-success">new</div>
    <input type="text" class="ui-ctl-element">
</div>

Modifier .ui-ctl-tag-primary for .ui-ctl-tag.


new
 
<!-- .ui-ctl.ui-ctl-textbox > .ui-ctl-tag-primary{text} + input.ui-ctl-element -->
<div class="ui-ctl ui-ctl-textbox">
    <div class="ui-ctl-tag-primary">new</div>
    <input type="text" class="ui-ctl-element">
</div>

Модификатор .ui-ctl-tag-danger для .ui-ctl-tag.


new
 
<!-- .ui-ctl.ui-ctl-textbox > .ui-ctl-tag-danger{text} + input.ui-ctl-element -->
<div class="ui-ctl ui-ctl-textbox">
    <div class="ui-ctl-tag-danger">new</div>
    <input type="text" class="ui-ctl-element">
</div>

Modifier .ui-ctl-tag-warning for .ui-ctl-tag.


new
 
<!-- .ui-ctl.ui-ctl-textbox > .ui-ctl-tag-warning{text} + input.ui-ctl-element -->
<div class="ui-ctl ui-ctl-textbox">
    <div class="ui-ctl-tag-warning">new</div>
    <input type="text" class="ui-ctl-element">
</div>
Additional field properties
ModifierCode

Modifier .ui-ctl-no-border removes borders.


 
<!-- .ui-ctl.ui-ctl-textbox.ui-ctl-no-border > input.ui-ctl-element -->
<div class="ui-ctl ui-ctl-textbox ui-ctl-no-border">
    <input type="text" class="ui-ctl-element">
</div>

Modifier .ui-ctl-underline removes all borders, except for bottom one.


 
<!-- .ui-ctl.ui-ctl-textbox.ui-ctl-underline > input.ui-ctl-element -->
<div class="ui-ctl ui-ctl-textbox ui-ctl-underline">
    <input type="text" class="ui-ctl-element">
</div>

Modifier .ui-ctl-no-padding removes padding in the field itself.


 
<!-- .ui-ctl.ui-ctl-textbox.ui-ctl-no-padding > input.ui-ctl-element -->
<div class="ui-ctl ui-ctl-textbox ui-ctl-no-padding">
    <input type="text" class="ui-ctl-element">
</div>

Modifier .ui-ctl-round rounds-off corners.


 
<!-- .ui-ctl.ui-ctl-textbox.ui-ctl-round > input.ui-ctl-element -->
<div class="ui-ctl ui-ctl-textbox ui-ctl-round">
    <input type="text" class="ui-ctl-element">
</div>


© «Bitrix24», 2001-2024