Skip to content

Latest commit

 

History

History
200 lines (162 loc) · 4.14 KB

textarea.en.md

File metadata and controls

200 lines (162 loc) · 4.14 KB
Raw

textarea

textarea block is designed to create different types of text fields:

Custom fields of a block

The following custom fields could be specified in BEMJSON declaration of the block:

Custom field name Type Description
val String Specifies value that will be sent to a server or obtained using client scripts. It is empty by default. Pair name=val is sent to a server, where name is set by name attribute and value – by val attribute.
name String Defines name of an text area that is used for its identification.
placeholder String A hint that describes expected value of an text area.
id String Unique block identifier. Should be specified manually in BEMJSON file.
maxLength String Specifies maximum number of characters allowed in text area.
tabIndex String Specifies the position of current textarea block in the tabbing order for current page.

Additional required HTML attributes could be specified in attrs field of BEMJSON.

Modifiers of a block

_theme

Block supports the following themes:

  • simple
  • islands (NB! Choosing a theme islands requires additional modifier size.)

If theme modifier is not specified, native representation of a control is applied.

See following examples:

default

{
    block : 'textarea',
    placeholder : 'default'
}

simple

{
    block : 'textarea',
    mods : { theme : 'simple' },
    placeholder : 'simple'
}

islands

{
    block : 'textarea',
    mods : { theme : 'islands', size: 'm' },
    placeholder : 'islands'
}

_size

Implemented only for theme islands.

Provides with size values to all types of text fields.

There are four sizes available: s, m, l, xl.

Size Font size String height
s 13px 24px
m 13px 28px
l 15px 32px
xl 18px 38px

See following examples:

{
    block : 'textarea',
    mods : { theme : 'islands', size: 's' },
    placeholder : 'Small'
}

{
    block : 'textarea',
    mods : { theme : 'islands', size: 'm' },
    placeholder : 'Medium'
}

{
    block : 'textarea',
    mods : { theme : 'islands', size: 'l' },
    placeholder : 'Large'
}

{
    block : 'textarea',
    mods : { theme : 'islands', size: 'xl' },
    placeholder : 'X-Large'
}

States of a block

_disabled

disabled modifier is used to make block visible but not available for user action. It cannot be focused by pressing ‘Tab’, clicking a mouse, etc. In most cases to mark out the disabled block on a page, additional styles are applied.

{
    block : 'textarea',
    mods : { theme : 'islands', size : 'm', disabled : true },
    val : 'Disabled'
}

_focused

When a block is focused, a modifier ‘focused’ with ‘true’ value is set automatically, e.g. by pressing ‘Tab’ or clicking a mouse.

Block elements

The following elements provide visual representation of textarea block:

__control

An auxiliary element is added to the block on template engine level.