README

The toggle editor lets you select one of multiple values. It provides different layout options.

Layouts

Grid

headingLevel:
  type: string
  ui:
    label: Heading level
    inspector:
      editor: Beromir.ToggleEditor/Editor
      editorOptions:
        values:
          h1:
            label: H1
            description: Heading level 1
          h2:
            label: H2
            description: Heading level 2
          h3:
            label: H3
            description: Heading level 3
alignment:
  type: string
  ui:
    label: Alignment
    inspector:
      editor: Beromir.ToggleEditor/Editor
      editorOptions:
        values:
          left:
            icon: align-left
            description: Align left
          center:
            label: Center
            icon: align-center
          right:
            label: Right
            icon: align-right
layout:
  type: string
  ui:
    label: Layout
    inspector:
      editor: Beromir.ToggleEditor/Editor
      editorOptions:
        allowEmpty: true
        columns: 2
        values:
          grid:
            label: Grid
          flex:
            label: Flex
          list:
            label: Radio
          color:
            label: Color

Flex

spacing:
  type: string
  ui:
    label: Spacing
    inspector:
      editor: Beromir.ToggleEditor/Editor
      editorOptions:
        layout: flex
        values:
          none:
            icon: times
            description: No spacing
          small:
            label: Small
          medium:
            label: Medium
          large:
            label: Large

Flex Start

toggle:
  type: array
  ui:
    label: Toggle Mode
    inspector:
      editor: Beromir.ToggleEditor/Editor
      editorOptions:
        multiple: true
        layout: flex-start
        values:
          enable:
            icon: toggle-off
            iconActive: toggle-on

List

size:
  type: string
  ui:
    label: Size
    inspector:
      editor: Beromir.ToggleEditor/Editor
      editorOptions:
        allowEmpty: true
        layout: list
        values:
          auto:
            icon: magic
            label: Auto
          small:
            label: Small
          medium:
            label: Medium
          large:
            label: Large

checkboxGroup:
  type: array
  ui:
    label: Checkbox Group
    inspector:
      editor: Beromir.ToggleEditor/Editor
      editorOptions:
        multiple: true
        layout: list
        values:
          second:
            iconActive: fire
            label: Second Checkbox
            labelActive: Second Checkbox checked
            position: 20
          first:
            icon: wrench
            iconActiveRotate: 15
            label: First Checkbox
            position: 10

Color

color:
  type: string
  ui:
    label: Color layout
    inspector:
      editor: Beromir.ToggleEditor/Editor
      editorOptions:
        layout: color
        values:
          three:
            color:
              - "#009246"
              - white
              - "#cd2b37"
            label: "Italy colors"
            description: "Pizza Margherita"
          two:
            color: ["#5d26c3", "#271150"]
            label: "Two colors"
            description: "Purple haze"
          one:
            color: "#0d0617"
            label: "Dark color"
          transparent:
            color: transparent
            label: Transparent

Installation

Run the following command in your site package:

composer require --no-update beromir/neos-toggle-editor

Then run composer update in your project root.

Usage

You can select one of the following layout options:

• grid
• flex
• flex-start
• list
• color

If you use the color layout or the grid layout, you can optionally specify the number of columns to render more than one row. The color layout is a special case for selecting a color. It renders the color in the editor. You can use transparent as color value to render this value in a visible way for the editors (see screenshot above).

Add a property of type string to your NodeType definition and use the following editor configuration:

properties:
  alignment:
    # If multiple is true, this must be array, otherwise string
    type: string
    defaultValue: "left"
    ui:
      label: "Alignment"
      reloadIfChanged: true
      inspector:
        editor: "Beromir.ToggleEditor/Editor"
        editorOptions:
          # One of 'grid', 'flex', 'flex-start', 'list' or 'color'. Default: 'grid'
          layout: "flex"

          # Set number of columns to render multiple rows. Works only with 'grid' and 'color'
          # This can also be an expression like {items} / 2
          # Gets surrounded by Math.floor
          # Available values {items} = number of values / {maximalRows} = value from maximalRows
          # The smaller value from columns and maximalColumns will be used
          columns: 2

          # Alternativly you can set the maximal number of columns. Defaults to 4. Works only with 'grid' and 'color'
          # This can also be an expression like {items} / 2
          # Gets surrounded by Math.floor
          # Available values {items} = number of values
          maximalColumns: 4

          # Allow empty value
          allowEmpty: true

          # Value for empty state. Does not work in multiple mode
          emptyValue: "none"

          # Enable multiple mode. If this is true, the type must be array
          # If true, setting allowEmpty to false has no effect. The array can always be empty
          multiple: false

          # Define the size of the icons: 'xs', 'sm', 'lg', '2x' or '3x'. Default: null
          iconSize: "lg"

          # Disable the whole editor
          disable: false

          # This option makes it possible hide the whole editor (incl. label) based on data source
          hidden: false

          # Add custom styles to the wrapper
          wrapperCustomStyle:
            gap: 2

          # Add custom styles to the buttons itself
          buttonCustomStyle:
            borderRadius: 2

          # Set custom style for the labels (not set on view 'color')
          # The same is allowed inside a single value
          labelCustomStyle:
            fontSize: 25
            lineHeight: "39px"

          # Set the values
          values:
            left:
              # Add custom styles to the button itself
              buttonCustomStyle:
                borderRadius: 2

              # Set custom style for the label (not set on view 'color')
              labelCustomStyle:
                fontSize: 25
                lineHeight: "39px"

              # Show a label
              label: "Left"
              # Label on active state
              labelActive: "Item is left"

              # Show a description on hover
              description: "Align left"
              # Description on active state
              descriptionActive: "Item is left aligned"

              # Show an icon. Does not work with the color layout
              icon: "align-right"
              # Icon on active state. Does not work with the color layout
              iconActive: "align-left"
              # Rotate the icon (in degrees)
              iconRotate: -45
              # Rotate the icon on active state (in degrees)
              iconActiveRotate: -45

              # Specify the color to display in the editor. Does only work with the color layout
              # If you pass multiple colors as an array (e.g. ['white', 'black]) it will put all defined colors side by
              # side. (Transparent is also possible) This is useful if you have light and dark mode on your website
              color: "#ffffff"

              # Hide the value. Great if you work with ClientEval
              hidden: "ClientEval: !!node.property.anotherProperty"

              # Add a preview image. Does not work with the color layout. Can be also a string with svg markup
              preview: "resource://Vendor.Package/filenameInPublicFolder.png"
              # Add a preview on active state image. Does not work with the color layout. Can be also a string with svg markup
              previewActive: "resource://Vendor.Package/filenameInPublicFolder.png"
              # Rotate the preview (in degrees)
              previewRotate: -45
              # Rotate the preview on active state (in degrees)
              previewActiveRotate: -45

              # If true and no label is defined, the margin from the button get's removed. Defaults to false
              previewFull: true

              # Disable an item option
              disabled: false
            center:
              label: "Center"
              icon: "align-center"

              # The order of the values can be altered by setting position. It is the same logic as @position in Fusion
              # https://neos.readthedocs.io/en/stable/References/NeosFusionReference.html#neos-fusion-join
              # If the value is empty (''), the key for sorting is set to __empty__
              postion: 10
            right:
              label: "Right"
              icon: "align-right"

          # Optionally use a data source:
          # If `dataSourceIdentifier` or `dataSourceUri` is defined, the `values` from above will be ignored
          dataSourceIdentifier: "some-datasource"
          dataSourceUri: "some/custom-route"
          dataSourceAdditionalData:
            foo: "bar"
          dataSourceDisableCaching: false

Credits

This package is inspired by:

• Carbon.ColorValues
• Shel.Neos.ColorPicker
• Kirby CMS toggles field
• I13e.ButtonEditor