startControlsSection(
'section_icon',
[
'label' => __('Tiles List'),
]
);
$repeater = new Repeater();
$repeater->addControl(
'text',
[
'label' => __('Text'),
'type' => ControlsManager::TEXT,
'label_block' => true,
'placeholder' => __('List Item'),
'default' => __('List Item'),
'dynamic' => [
'active' => true,
],
'selectors' => [
'{{WRAPPER}} p' => 'margin-bottom: 0;',
],
]
);
$repeater->addControl(
'selected_icon',
[
'label' => __('Choose Image'),
'type' => ControlsManager::MEDIA,
'seo' => true,
'dynamic' => [
'active' => true,
],
'default' => [
'url' => Utils::getPlaceholderImageSrc(),
],
]
);
$repeater->addControl(
'link',
[
'label' => __('Link'),
'type' => ControlsManager::URL,
'dynamic' => [
'active' => true,
],
'placeholder' => __('https://your-link.com'),
]
);
$this->addControl(
'tiles_list',
[
'type' => ControlsManager::REPEATER,
'fields' => $repeater->getControls(),
'default' => [
[
'text' => __('Lorem ipsum'),
],
],
'title_field' => '{{{ elementor.helpers.renderIcon( this, selected_icon, {}, "i", "panel" ) || \'\' }}} {{{ text }}}',
]
);
$this->endControlsSection();
// ------
$this->startControlsSection(
'section_style',
[
'label' => __('Text Editor'),
'tab' => ControlsManager::TAB_STYLE,
]
);
$this->addControl(
'text_color',
[
'label' => __('text color'),
'type' => ControlsManager::COLOR,
'selectors' => [
'{{WRAPPER}} li p' => 'color: {{VALUE}};',
],
]
);
$this->addControl(
'text_color_hover',
[
'label' => __('text color hover'),
'type' => ControlsManager::COLOR,
'selectors' => [
'{{WRAPPER}} li:hover p' => 'color: {{VALUE}};',
'{{WRAPPER}} li p' => 'transition: color 250ms ease-in-out;'
],
]
);
$this->addGroupControl(
GroupControlTypography::getType(),
[
'name' => 'icon_typography',
'selector' => '{{WRAPPER}} li p',
'scheme' => SchemeTypography::TYPOGRAPHY_3,
]
);
$this->addResponsiveControl(
'tile_data_position',
[
'label' => __('Alignment'),
'type' => ControlsManager::CHOOSE,
'options' => [
'left' => [
'title' => __('Left'),
'icon' => 'eicon-h-align-left',
],
'center' => [
'title' => __('Center'),
'icon' => 'eicon-h-align-center',
],
'right' => [
'title' => __('Right'),
'icon' => 'eicon-h-align-right',
],
],
'selectors' => [
'{{WRAPPER}} li' => 'text-align: {{VALUE}};',
],
]
);
$this->addResponsiveControl(
'title_gap_space',
[
'label' => __('Spacing'),
'type' => ControlsManager::SLIDER,
'range' => [
'px' => [
'min' => 0,
'max' => 100,
],
],
'selectors' => [
'{{WRAPPER}} li img' => 'margin-bottom: {{SIZE}}{{UNIT}};',
],
]
);
$this->addResponsiveControl(
'title_bottom_space',
[
'label' => __('Tile padding'),
'type' => ControlsManager::SLIDER,
'range' => [
'px' => [
'min' => 0,
'max' => 100,
],
],
'selectors' => [
'{{WRAPPER}} li' => 'padding: {{SIZE}}{{UNIT}};',
],
]
);
$this->addResponsiveControl(
'title_border_radius',
[
'label' => __('Tile border radius'),
'type' => ControlsManager::SLIDER,
'range' => [
'px' => [
'min' => 0,
'max' => 100,
],
],
'selectors' => [
'{{WRAPPER}} li' => 'border-radius: {{SIZE}}{{UNIT}};',
],
]
);
$this->addControl(
'toggle_background_color',
[
'label' => __('Background Color'),
'type' => ControlsManager::COLOR,
'selectors' => [
'{{WRAPPER}} li' => 'background-color: {{VALUE}}',
],
]
);
$this->endControlsSection();
}
/**
* Render video widget output on the frontend.
*
* Written in PHP and used to generate the final HTML.
*
* @since 1.0.0
*/
protected function render()
{
$settings = $this->getSettingsForDisplay();
?>
$item) : ?>
-
