Table of Contents
Elementor repeater control allows you to build repeatable blocks of fields. You can create, for example, a set of fields that will contain a title and a WYSIWYG text – the user will then be able to add “rows”, and each row will contain a title and a text. The data can be wrapper in custom HTML tags, designed using CSS, and interact using JS or external libraries.
The control is defined in Control_Repeater class which extends Base_Data_Control class.
Note that when using the control, the type should be set using the \Elementor\Controls_Manager::REPEATER
constant.
NOTE: THIS CONTROL IS UNDER DEVELOPMENT, USE IT AT YOUR OWN RISK.
Arguments
Name | Type | Default | Description |
---|---|---|---|
type |
string |
repeater | The type of the control. |
label |
string |
The label that appears above of the field. | |
description |
string |
The description that appears below the field. | |
show_label |
bool |
true | Whether to display the label. |
label_block |
bool |
false | Whether to display the label in a separate line. |
separator |
string |
default | Set the position of the control separator. Available values are default , before , after and none . default will position the separator depending on the control type. before / after will position the separator before/after the control. none will hide the separator. |
fields |
array |
An array of arrays containing the repeater fields. | |
title_field |
string |
Field that will be used as the repeater title in the fields list when the item is minimized. | |
prevent_empty |
bool |
true | Whether to prevent deleting the first repeater field. To keep at least one repeater field. |
default |
array |
Default repeater values. An array of arrays containing fields as keys and default values for each key as values: [ [ 'title' => '', 'content' => '' ], [ 'title' => '', 'content' => '' ], ... ] |
Return Value
(array
) An array of arrays, containing inner fields values.
Usage
Usage example with Repeater()
class:
<?php class Elementor_Widget_Test extends \Elementor\Widget_Base { public function get_name() { return 'test'; } public function get_title() { return __( 'Test', 'elementor' ); } protected function _register_controls() { $this->start_controls_section( 'content_section', [ 'label' => __( 'Content', 'plugin-name' ), 'tab' => \Elementor\Controls_Manager::TAB_CONTENT, ] ); $repeater = new \Elementor\Repeater(); $repeater->add_control( 'list_title', [ 'label' => __( 'Title', 'plugin-domain' ), 'type' => \Elementor\Controls_Manager::TEXT, 'default' => __( 'List Title' , 'plugin-domain' ), 'label_block' => true, ] ); $repeater->add_control( 'list_content', [ 'label' => __( 'Content', 'plugin-domain' ), 'type' => \Elementor\Controls_Manager::WYSIWYG, 'default' => __( 'List Content' , 'plugin-domain' ), 'show_label' => false, ] ); $repeater->add_control( 'list_color', [ 'label' => __( 'Color', 'plugin-domain' ), 'type' => \Elementor\Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} {{CURRENT_ITEM}}' => 'color: {{VALUE}}' ], ] ); $this->add_control( 'list', [ 'label' => __( 'Repeater List', 'plugin-domain' ), 'type' => \Elementor\Controls_Manager::REPEATER, 'fields' => $repeater->get_controls(), 'default' => [ [ 'list_title' => __( 'Title #1', 'plugin-domain' ), 'list_content' => __( 'Item content. Click the edit button to change this text.', 'plugin-domain' ), ], [ 'list_title' => __( 'Title #2', 'plugin-domain' ), 'list_content' => __( 'Item content. Click the edit button to change this text.', 'plugin-domain' ), ], ], 'title_field' => '{{{ list_title }}}', ] ); $this->end_controls_section(); } protected function render() { $settings = $this->get_settings_for_display(); if ( $settings['list'] ) { echo '<dl>'; foreach ( $settings['list'] as $item ) { echo '<dt class="elementor-repeater-item-' . $item['_id'] . '">' . $item['list_title'] . '</dt>'; echo '<dd>' . $item['list_content'] . '</dd>'; } echo '</dl>'; } } protected function _content_template() { ?> <# if ( settings.list.length ) { #> <dl> <# _.each( settings.list, function( item ) { #> <dt class="elementor-repeater-item-{{ item._id }}">{{{ item.list_title }}}</dt> <dd>{{{ item.list_content }}}</dd> <# }); #> </dl> <# } #> <?php } }