Skip to content

Latest commit

 

History

History
228 lines (162 loc) · 4.69 KB

attach.en.md

File metadata and controls

228 lines (162 loc) · 4.69 KB
Raw

attach

Use this block to upload a file for sending to a server.

Overview

Modifiers of the block

Modifier Acceptable values Use cases Description
disabled true BEMJSON, JS The disabled state.
focused true BEMJSON, JS The block is in focus.
theme 'islands' BEMJSON A custom design.
size 's', 'm', 'l', 'xl' BEMJSON The size of the block. Use sizes only with the theme modifier set to islands.

Custom fields of the block

Field Type Description
name String The unique block name.
button String, BEMJSON Content of hte button for a file selection.
noFileText String The text message that appears when the file is not selected.

Block description

By default this block is visually represented by:

  • The button that opens the system window to upload a file.
  • The text message.

The following elements became available when upload of the file is finished:

  • The file icon (the icon block).
  • The file name (the text element).
  • The element for file deletion (the clear element).

The block functionality does not support:

  • More than one file attaching.
  • Drag-and-drop.

Modifiers of the block

disabled modifier

Acceptable value: true.

Use case: BEMJSON, JS.

The modifier makes the block inactive. The disabled block is visible but not available for user actions.

{
    block : 'attach',
    mods : { theme : 'islands', size : 'm', disabled : true },
    button : 'Select file',
    noFileText : 'No file selected'
}

focused modifier

Acceptable value: true.

Use case: BEMJSON, JS.

The modifier puts the focus on the block.

{
    block : 'attach',
    mods : { theme : 'islands', size : 'm', focused : true },
    button : 'Select file',
    noFileText : 'No file selected'
}

theme modifier

Acceptable value: 'islands'.

Use case: BEMJSON.

The modifier gives the block a custom design.

The islands theme requires the size modifier usage.

{
    block : 'attach',
    mods : { theme : 'islands', size : 'm' },
    button : 'Select file',
    noFileText : 'No file selected'
}

size modifier

Acceptable values for the islands theme: 's', 'm', 'l', 'xl'.

Use case: BEMJSON.

Use the size modifier only for blocks with the islands theme.

Sets the size value for all types of attach forms.

s

{
    block : 'attach',
    mods : { theme : 'islands', size : 's' },
    button : 'Select file',
    noFileText : 'No file selected'
}

m

{
    block : 'attach',
    mods : { theme : 'islands', size : 'm' },
    button : 'Select file',
    noFileText : 'No file selected'
}

l

{
    block : 'attach',
    mods : { theme : 'islands', size : 'l' },
    button : 'Select file',
    noFileText : 'No file selected'
}

xl

{
    block : 'attach',
    mods : { theme : 'islands', size : 'xl' },
    button : 'Select file',
    noFileText : 'No file selected'
}

Custom fields of the block

name field

Type: String.

Specifies the block unique name.

{
    block : 'attach',
    mods : { theme : 'islands', size : 'm' },
    name : 'attach-logo',
    button : 'Select file'
}

button field

Type: String, BEMJSON.

Specifies the button content:

  • The text (String)
{
    block : 'attach',
    mods : { theme : 'islands', size : 'm' },
    button : 'Select file'
}
  • The type and appearance (BEMJSON)
{
    block : 'attach',
    mods : { theme : 'islands', size : 'm' },
    button : {
        block : 'button',
        icon : {
            block : 'icon',
            mods : { action : 'download' }
        },
        text: 'Выберите файл'
    }
}

noFileText field

Type: String.

Specifies the text message when the file is not selected.

{
    block : 'attach',
    mods : { theme : 'islands', size : 'm' },
    button : 'Select file',
    noFileText : 'No file selected'
}