Views () Drupal 8. . Twig Drupal 8. . Views, View Twig? , , Views (Display, Style, Row Field).
, Drupal 8 Style Views.
Bootstrap Views. Views, Style , , . , View , , . Style Drupal 8.
, Bootstrap . , , , jQuery. ,
Demo module.
Style ?
Style .
Style ,
HTML,
. Display, Row, .
Drupal 8, Views (
PluginBase).
Style , Display (Page, Block .) Field.
Style Bootstrap
Plugin/views/style :
namespace Drupal\demo\Plugin\views\style;
use Drupal\Core\Form\FormStateInterface;
use Drupal\views\Plugin\views\style\StylePluginBase;
/**
* Views , Bootstrap .
*
* @ingroup views_style_plugins
*
* @ViewsStyle(
* id = "bootstrap_tabs",
* title = @Translation("Bootstrap Tabs"),
* help = @Translation("Uses the Bootstrap Tabs component."),
* theme = "demo_bootstrap_tabs",
* display_types = {"normal"}
* )
*/
class BootstrapTabs extends StylePluginBase {
/**
* Style Row ?
*
* @var bool
*/
protected $usesRowPlugin = TRUE;
/**
* Style ?
*
* @var bool
*/
protected $usesGrouping = FALSE;
/**
* {@inheritdoc}
*/
protected function defineOptions() {
$options = parent::defineOptions();
$options['tab_nav_field'] = array('default' => '');
return $options;
}
/**
* {@inheritdoc}
*/
public function buildOptionsForm(&$form, FormStateInterface $form_state) {
parent::buildOptionsForm($form, $form_state);
$options = $this->displayHandler->getFieldLabels(TRUE);
$form['tab_nav_field'] = array(
'#title' => $this->t('The tab navigation field'),
'#description' => $this->t('Select the field that will be used as the tab navigation. The rest of the fields will show up in the tab content.'),
'#type' => 'select',
'#default_value' => $this->options['tab_nav_field'],
'#options' => $options,
);
}
}
Drupal,
ViewsStyle - , . ,
themedisplay_types, . Theme , display_types , Display Style ( Display, : normal). Annotation,
Drupal\views\Annotation\ViewsStyle Annotation.
, Row , . , . , , , , Views Style.
, , , , . (
$this->displayHandler), View, . Style:
StylePluginBase, .
demo_bootstrap_tabs, View. , , .. , , , .
demo_bootstrap_tabs, ( .module):
/**
* Implements hook_theme().
*/
function demo_theme($existing, $type, $theme, $path) {
return array(
'demo_bootstrap_tabs' => array(
'variables' => array('view' => NULL, 'rows' => NULL),
'path' => drupal_get_path('module', 'demo') . '/templates',
),
);
}
Style $view $rows. ( ) , .
/**
* demo_bootstrap_tabs.
*
* : demo-bootstrap-tabs.html.twig.
*
* @param array $variables
* :
* - view: view.
* - row: rows. row .
*/
function template_preprocess_demo_bootstrap_tabs(&$variables) {
$view = $variables['view'];
$rows = $variables['rows'];
$variables['nav'] = array();
// .
$field = $view->style_plugin->options['tab_nav_field'];
if (!$field || !isset($view->field[$field])) {
template_preprocess_views_view_unformatted($variables);
return;
}
$nav = array();
foreach ($rows as $id => $row) {
$nav[$id] = array(
'#theme' => 'views_view_field',
'#view' => $view,
'#field' => $view->field[$field],
'#row' => $row['#row'],
);
}
template_preprocess_views_view_unformatted($variables);
$variables['nav'] = $nav;
}
? -, Style , (, View). , return, ,
template_preprocess_views_view_unformatted. , Views , , , . ,
views_view_field , . , .
Drupal 8 , Twig. ,
demo-bootstrap-tabs.html.twig :
{% for tab in nav %}
{% set active = '' %}
{% if loop.index0 == 0 %}
{% set active = 'active' %}
{% endif %}
- {{ tab }}
{% endfor %}
{% for row in rows %}
{% set active = '' %}
{% if loop.index0 == 0 %}
{% set active = 'active' %}
{% endif %}
{{ row.content }}
{% endfor %}
, Bootstrap . , , Bootstrap.
, ( nav). , , , , ID. , , , Drupal . , , , , , , . , , . View.
, rows, , row , . , row.content (
template_preprocess_views_view_unformatted), View. , , View. - ( ), .
. Views Style View Bootstrap . , , Bootstrap View Style . , Views , Style.
"
Theming Views in Drupal 8 Custom Style Plugins".
https://habrahabr.ru/post/330704/
