Lowdefy
v3.23.3/list/List/

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.

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


id: block_id
type: List
properties:
List content along a 'row' or down a 'column'. Applies the 'flex-direction' css property to the List block.
Specifies whether scrolling should be applied to the List, can be true or false. Applies the 'overflow' css property to the List block - defaults to 'visible', requires List direction to be set.
Css style object to apply to List block.
Specifies wrapping style to be applied to List block as 'wrap', 'nowrap' or 'wrap-reverse'. Applies the 'flex-wrap' css property to the List block - defaults to 'wrap', requires List direction to be set.
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


type: object
properties:
  events:
    additionalProperties: false
    properties:
      onClick:
        description: Trigger actions when the List is clicked.
        type: array
    type: object
  properties:
    additionalProperties: false
    properties:
      direction:
        description: >-
          List content along a 'row' or down a 'column'. Applies the
          'flex-direction' css property to the List block.
        enum:
          - row
          - column
          - row-reverse
          - column-reverse
        type: string
      scroll:
        description: >-
          Specifies whether scrolling should be applied to the List, can be true
          or false. Applies the 'overflow' css property to the List block -
          defaults to 'visible', requires List direction to be set.
        type: boolean
      style:
        description: Css style object to apply to List block.
        type: object
      wrap:
        description: >-
          Specifies wrapping style to be applied to List block as 'wrap', 'nowrap'
          or 'wrap-reverse'. Applies the 'flex-wrap' css property to the List
          block - defaults to 'wrap', requires List direction to be set.
        enum:
          - wrap
          - nowrap
          - wrap-reverse
        type: string
    type: object