Pular para o conteúdo principal

Block

Block is the main primitive for building layouts.

Reference

Parameters​

position​

Position and move your block around the Artboard. Clicking the crosshair axis fixates the block's distance to its parent's boundaries in the clicked axis direction. Inner axis are proportional wihle outside axis are absolute.

Component data2-core-types@Position

dimensions​

Size and content-related dimensions of the block.

Component data2-core-types@Dimensions

childrenMode​

Determines how children without "free transform" option enabled are placed relative to eachother.

Component data2-core-primitives@String

One of 'rows' | 'reversed-rows' | 'cols' | 'reversed-cols' | 'grid' | 'reference'

onClick​

Executes an action upon user click.

Component data2-core-types@Interaction

onClickOutside​

Executes an action upon user clicking outside this block.

Component data2-core-types@Interaction

onMouseEnter​

Executes an action upon user moving the mouse into the block.

Component data2-core-types@Interaction

onMouseLeave​

Executes an action upon user moving the cursor to outside the block.

Component data2-core-types@Interaction

onVisibleOnScreen​

Triggers an action when the block is appearing on the screen.

Component data2-core-types@Interaction

shadow
list
​

Controls shadows and highlights of your block.

Component data2-core-types@Shadow

filter
list
​

Makes the contents blurred, grayscale, and many other filters.

Component data2-core-types@BitmapFilter

backdropFilter
list
​

Applies specified filters to what is behind/underneath the block

Component data2-core-types@BitmapFilter

border​

border thickness, color and corner radius

Component data2-core-types@Border

fill​

Related to background color.

Component data2-core-types@Fill

text​

Text content of the block. If defined, the block's children will not be displayed.

Component data2-core-primitives@String

textFormat​

Formatting of this block's text content.

Component data2-core-types@TextFormat

textColor​

Block's text content color. Unless specified, children will inherit this value.

Component data2-core-types@Color

childrenReference​

Applies the content of this block as something referenced from other artboards or a router.

Component data2-core-types@ComponentInstanceReference

textSize​

Block's text font sizing. Unless specified, children will inherit this value.

Component data2-core-primitives@Number

font​

The font face of the block and its children. If not specified, uses the nearest specified parent's font.

Component data2-core-web@GoogleFont

scroll​

Enable or disable scroll behavior and scrollbars.

Component data2-core-types@Scroll

repeat​

Repeats (copies) the children of the block 'N' times. If this property is a DataSet or an Array, 'N' will be equal to its length. Disable the children's "free transform" property to place them one after eachother automatically.

Component data2-core-types@DataSetReference

repeatFilter​

Filters the content of the repeater. Works only when the 'repeater' property is a DataSet. Using this property creates a copy of the DataSet that cannot be controlled/refreshed.

Component data2-core-types@FieldSet

    repeatEmptyState​

    Displays something else when the repeater is empty ('N' = 0).

    Component data2-core-types@ComponentInstanceReference

    repeatLoadingState​

    Displays something else when the repeater's DataSet is loading. Has no effect if the "repeat" property is not a DataSet

    Component data2-core-types@ComponentInstanceReference

    rotate​

    Rotates the block around its center.

    Component data2-core-primitives@Number

    transitions
    list
    ​

    Defines transitions with duration, delay, and easing settings. Transitions are how the block should interpolate a change of property over time. Note that not all properties can be transitioned.

    Component data2-core-types@Transition

    repeatReference​

    Names the data from the "repeat" property for each of the block's children. The data can be accessed in this block's children by using a Reference.

    Component data2-core-primitives@String

    childrenOverflow​

    When activated, no longer confines the children of this block to its boundaries

    Component data2-core-primitives@Boolean

    hide​

    Hidden components will not render and will not occupy space affecting non free-transform elements.

    Component data2-core-primitives@Boolean

    opacity​

    General transparency of the block and its contents. Children has their opacity value relative to their parents.

    Component data2-core-types@Opacity

    stateDefinitions
    list
    ​

    Defines multiple temporary states initialized with their default values. For example, this can be used to hold states like whether the block is hovered, or the amount of times it was clicked. Any data changed is lost when the artboard page is refreshed.

    Component data2-core-user-interface@StateDefinition

    onMouseDown​

    Executes an action upon user pressing the mouse click.

    Component data2-core-types@Interaction

    onMouseUp​

    Executes an action upon user releasing the mouse click button.

    Component data2-core-types@Interaction

    cursor​

    Cursor style

    Component data2-core-primitives@String

    One of 'alias' | 'all-scroll' | 'auto' | 'cell' | 'context-menu' | 'col-resize' | 'copy' | 'crosshair' | 'default' | 'e-resize' | 'ew-resize' | 'grab' | 'grabbing' | 'help' | 'move' | 'n-resize' | 'ne-resize' | 'nesw-resize' | 'ns-resize' | 'nw-resize' | 'nwse-resize' | 'no-drop' | 'none' | 'not-allowed' | 'pointer' | 'progress' | 'row-resize' | 's-resize' | 'se-resize' | 'sw-resize' | 'text' | 'w-resize' | 'wait' | 'zoom-in' | 'zoom-out'

    repeatLimit​

    Limits the 'N' size of the repeater to a specified amount, omitting further copies of the children.

    Component data2-core-primitives@Number

    tabIndex​

    Defines the order of block accessibility when pressing TAB.

    Component data2-core-primitives@Number

    textDecoration​

    Block's text support elements. Unless specified, children will inherit this value.

    Component data2-core-types@TextDecoration

    tooltip​

    Displays a text tooltip when hovering the block.

    Component data2-core-primitives@String

    preventUserSelection​

    Makes the blocks text unselectable. Great for buttons or any clickable content.

    Component data2-core-primitives@Boolean

    ignoreMouseEvents​

    Ingores any cursor interaction with the block. Children may override this value for themselves. Also ignores default TAB behavior.

    Component data2-core-primitives@Boolean

    index​

    Orders the element depth-wise. A higher value will put the current block on top of its siblings with lesser indexes

    Component data2-core-primitives@Number

    disabled​

    Determines if the block can be clicked to execute the "onClicked" interaction or not. When true, it will replace the cursor to "not-allowed" on hovering the element.

    Component data2-core-primitives@Boolean

    onInvisibleOnScreen​

    Triggers an action when the block is no longer seen on screen.

    Component data2-core-types@Interaction

    onTouchStart​

    Executes an action upon user touch starts.

    Component data2-core-types@Interaction

    onTouchEnd​

    Executes an action upon user touch ends.

    Component data2-core-types@Interaction

    accessibilityRole​

    Defines the role of an element, helping assistive technologies understand its purpose (e.g., role="button").

    Component data2-core-primitives@String

    One of 'banner' | 'navigation' | 'main' | 'complementary' | 'contentinfo' | 'region' | 'alert' | 'dialog' | 'button' | 'checkbox' | 'heading' | 'link' | 'list' | 'listitem' | 'tablist' | 'tab' | 'tabpanel' | 'textbox' | 'progressbar' | 'slider' | 'alertdialog'

    accessibilityLabel​

    Provides a text label for an element that might not have visible text, offering a description for assistive tech.

    Component data2-core-primitives@String

    accessibilityLevel​

    Defines the level of an element, helping assistive technologies (e.g., aria-level="1").

    Component data2-core-primitives@String

    accessibilityHide​

    If true, hides the Block from screen readers

    Component data2-core-primitives@Boolean

    onDragEnter​

    Executes an action upon user is dragging a file and enters the block area.

    Component data2-core-types@Interaction

    onDragLeave​

    Executes an action upon user is dragging a file and leaves the block area.

    Component data2-core-types@Interaction

    onDrop​

    Executes an action upon user is dragging a file and drops inside the block area.

    Component data2-core-types@Interaction