Embed Size (px)
Citation preview
✈
⚛
⚛
./templates/views-view-fields--articles--page.html.twig
{% embed "@molecules/cards/card.twig"
with {
"url": fields.path.content,
"title": fields.title.content,
"read_more": "Read more"|t,
"card_header": fields.created.content,
}
%}
�
YAML
MY_MODULE.ui_patterns.yml MY_THEME.ui_patterns.yml
pattern
media
pattern_media
pattern-media.html.twig
./themes/custom/MY_THEME/MY_THEME.ui_patterns.yml
blockquote: label: Blockquote description: Display a quote with attribution information fields: quote: type: text label: Quote preview: Life is like riding a bicycle. To keep your balance, you must keep moving. attribution: type: text label: Attribution preview: Albert Einstein
./themes/custom/MY_THEME/templates/pattern-blockquote.html.twig
<blockquote> <p>{{ quote }}</p> <footer>{{ attribution }}</footer> </blockquote>
id
label description
fieldstype label description preview
blockquote:
label: Blockquote
description: Display a quote with attribution information
fields:
quote:
type: text
label: Quote
preview: Life is like riding a bicycle. To keep your balance, you must keep moving.
preview
id: image
fields:
image_field:
...
preview:
theme: image
uri: http://lorempixel.com/350/250/nature/1
id: gallery
fields:
gallery_field:
...
preview:
type: pattern_preview
id: image
theme hookpattern_[id]
templatepattern_[id]
use
use: "@my_module/templates/my-template.html.twig"
use: "@molecules/media/media.html.twig"
.
├── templates │ └── patterns │ ├── button │ │ ├── button.ui_patterns.yml │ │ └── pattern-button.html.twig │ ├── media │ │ ├── media.ui_patterns.yml │ │ └── pattern-media.html.twig ...
│ └── pattern-jumbotron.html.twig ├── MY_THEME.info.yml └── MY_THEME.ui_patterns.yml
media:
label: Media object
...
libraries:
- core/jquery.ui.autocomplete
- my_module/my_library
- local_library:
css:
component:
media1.css: {}
http://example.com/style.css: { type: external }
...
└── patterns └── media ├── media1.css ├── media.ui_patterns.yml └── pattern-media.html.twig
�
/**
* The YAML UI Pattern plugin.
*
* @UiPattern(
* id = "yaml",
* label = @Translation("YAML Pattern"),
* description = @Translation("Pattern defined using a YAML file."),
* deriver = "\Drupal\ui_patterns\Plugin\Deriver\YamlDeriver"
* )
*/
class YamlPattern extends UiPatternBase implements UiPatternInterface
...
}
/**
* The Fractal UI Pattern plugin.
*
* @UiPattern(
* id = "fractal",
* label = @Translation("Fractal"),
* description = @Translation("Pattern defined using Fractal."),
* deriver = "\Drupal\ui_patterns\Plugin\Deriver\FractalDeriver"
* )
*/
class FractalPattern extends UiPatternBase implements UiPatternInterface
...
}
/**
* The PatternLab plugin.
*
* @UiPattern(
* id = "pattern_lab",
* label = @Translation("PatternLab"),
* description = @Translation("Pattern defined using PatternLab."),
* deriver = "\Drupal\ui_patterns\Plugin\Deriver\PatternLabDeriver"
* )
*/
class PatternLabPattern extends UiPatternBase implements UiPatternInterface
...
}
�
COMPONENT.ui_patterns.yml
�
ui_patterns_layouts
ui_patterns_views
ui_patterns_ds
ui_patterns_field_group
�
/articles
�
