List

areas: content

The List block renders a content area for all items in the array. All list blocks create a array in state at their block id. The list content areas are rendered for each index in the array. See the List Concept page for a detailed description on how to work with lists.

Block

Methods

onClick:
- id: pushItem
  type: CallMethod
  params:
    blockId: block_id
    method: pushItem

onClick:
- id: unshiftItem
  type: CallMethod
  params:
    blockId: block_id
    method: unshiftItem

onClick:
- id: removeItem
  type: CallMethod
  params:
    blockId: block_id
    method: removeItem
    args:
      - 1

onClick:
- id: moveItemDown
  type: CallMethod
  params:
    blockId: block_id
    method: moveItemDown
    args:
      - 1

onClick:
- id: moveItemUp
  type: CallMethod
  params:
    blockId: block_id
    method: moveItemUp
    args:
      - 1

Block Setup

id: block_id
type: List

Settings

properties:

style

Css style object to apply to List div.

layout:

style:

events:

required:

visible:

Examples

Todo List

Bake a 🧁

Eat a🍦

Phone a 🦖

Todos State Value:

todos:
  - Bake a 🧁
  - Eat a🍦
  - Phone a 🦖

id: todo_app
type: Box
layout:
  contentGutter: 16
blocks:
  - id: todo_input
    type: TextInput
    layout:
      grow: 1
    properties:
      label:
        disabled: true
      placeholder: Write something todo...
  - id: add_item
    type: Button
    layout:
      shrink: 1
    properties:
      title: Add item
      icon: PlusOutlined
    events:
      onClick:
        - id: add
          type: SetState
          params:
            todos:
              _array.concat:
                - - _state: todo_input
                - _state: todos
            todo_input: null
  - id: todos
    type: List
    layout:
      contentGutter: 16
    blocks:
      - id: todos.$
        type: TitleInput
        layout:
          grow: 1
        properties:
          level: 4
      - id: remove_item
        type: Icon
        layout:
          shrink: 1
        properties:
          name: MinusCircleOutlined
          size: 18
        events:
          onClick:
            - id: remove
              type: CallMethod
              messages:
                loading: sd f sdfgsdfg
                success: hi sdfg sdfgs g
              params:
                blockId: todos
                method: removeItem
                args:
                  - _index: 0

List JSON Schema Definition

type: object
properties:
  events:
    additionalProperties: false
    properties:
      onClick:
        description: Trigger actions when the List is clicked.
        type: array
    type: object
  properties:
    additionalProperties: false
    properties:
      style:
        description: Css style object to apply to List div.
        type: object
    type: object