ui_patterns icon indicating copy to clipboard operation
ui_patterns copied to clipboard

How to use an other pattern inside a pattern for the preview ?

Open steveoriol opened this issue 3 years ago • 1 comments

In order to use the "atomic design" system. example: use "Atoms" inside a "Molecule"

  • What is the syntax to use in the pattern definition file (.yml) to use another pattern for the preview?
  • How to provide a small array (list) of 3 or 5 "Atoms"?

steveoriol avatar Aug 25 '22 17:08 steveoriol

OK, I find it ! you can like this :

  fields:
    ....
    person:
      type: text
      label: Person
      description: Ref person.
      preview: 
        - type: pattern
          id: person
          variant: compact
          fields:
            nom: Shakespeare
            prenom: William
            photo: >
              <img src="http://placeimg.com/100/130/people">

What is the list of all available "types"?

steveoriol avatar Aug 26 '22 06:08 steveoriol

"type" in fields is just for info / documentation. In "preview" it is a renderable array, so "type" can be any renderable element your Drupal website knows. There is also a "pattern_preview" type to ease preview setup. See https://git.drupalcode.org/project/ui_suite_bootstrap/-/blob/5.0.x/templates/patterns/card_layout/card_layout.ui_patterns.yml

FlorentTorregrosa avatar Sep 23 '22 07:09 FlorentTorregrosa