# uicore-elements/1.3.17/includes/utils/item-style-component.php

UiCore Elements – Free widgets and templates for Elementor, version 1.3.17. 220 lines.

- Page: https://pluginprobe.com/plugins/uicore-elements/1.3.17/code/includes/utils/item-style-component.php
- Raw: https://pluginprobe.com/plugins/uicore-elements/1.3.17/raw/includes/utils/item-style-component.php
- Modified: 2026-09-15T12:03:04+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/uicore-elements/1.3.17/code/includes/utils/item-style-component.php#L10-L20`.

```php
<?php

namespace UiCoreElements\Utils;

use Elementor\Controls_Manager;
use Elementor\Group_Control_Border;
use Elementor\Group_Control_Box_Shadow;
use Elementor\Group_Control_Background;

defined('ABSPATH') || exit();

/*
* Basic Item Styles Component
*/

trait Item_Style_Component
{

    function TRAIT_register_normal_item_style_controls($tab = true)
    {
        // If the widget doesn't require extra controls, we can use tabs to decrease the widget code
        if ($tab) {
            $this->start_controls_tab(
                'tab_item_normal',
                [
                    'label' => esc_html__('Normal', 'uicore-elements'),
                ]
            );
        }

        $this->add_group_control(
            Group_Control_Background::get_type(),
            [
                'name' => 'item_background',
                'selector' => '{{WRAPPER}} .ui-e-item',
            ]
        );
        $this->add_group_control(
            Group_Control_Border::get_type(),
            [
                'name' => 'item_border',
                'label' => esc_html__('Border', 'uicore-elements'),
                'fields_options' => [
                    'border' => [
                        'default' => 'solid',
                    ],
                    'width' => [
                        'default' => [
                            'top'      => '1',
                            'right'    => '1',
                            'bottom'   => '1',
                            'left'     => '1',
                            'isLinked' => true,
                        ],
                    ],
                    'color' => [
                        'default' => '#EEE'
                    ]
                ],
                'selector' => '{{WRAPPER}} .ui-e-item',
            ]
        );
        $this->add_responsive_control(
            'item_border_radius',
            [
                'label' => esc_html__('Border Radius', 'uicore-elements'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%'],
                'default' => [
                    'top' => 12,
                    'right' => 12,
                    'bottom' => 12,
                    'left' => 12,
                    'unit' => 'px',
                    'isLinked' => true,
                ],
                'selectors' => [
                    '{{WRAPPER}}' => '--ui-e-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', // Sliders use --ui-e-radius var as item radius
                    '{{WRAPPER}} .ui-e-item' => 'border-radius: var(--ui-e-radius);',
                ],
            ]
        );
        $this->add_responsive_control(
            'item_padding',
            [
                'label' => esc_html__('Padding', 'uicore-elements'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', 'em', '%'],
                'default' => [
                    'top' => 30,
                    'right' => 30,
                    'bottom' => 30,
                    'left' => 30,
                    'unit' => 'px',
                    'isLinked' => true,
                ],
                'selectors' => [
                    '{{WRAPPER}} .ui-e-item' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );
        $this->add_group_control(
            Group_Control_Box_Shadow::get_type(),
            [
                'name' => 'item_box_shadow',
                'selector' => '{{WRAPPER}} .ui-e-item',
            ]
        );

        if ($tab) {
            $this->end_controls_tab();
        }
    }
    function TRAIT_register_hover_item_style_controls($tab = true)
    {
        // If the widget doesn't require extra controls, we can use tabs to decrease the widget code
        if ($tab) {
            $this->start_controls_tab(
                'tab_item_hover',
                [
                    'label' => esc_html__('Hover', 'uicore-elements'),
                ]
            );
        }

        $this->add_group_control(
            Group_Control_Background::get_type(),
            [
                'name' => 'item_hover_background',
                'selector' => '{{WRAPPER}} .ui-e-item:hover',
            ]
        );
        $this->add_control(
            'item_hover_border_color',
            [
                'label' => esc_html__('Border Color', 'uicore-elements'),
                'type' => Controls_Manager::COLOR,
                'condition' => [
                    'item_border_border!' => '',
                ],
                'selectors' => [
                    '{{WRAPPER}} .ui-e-item:hover' => 'border-color: {{VALUE}};',
                ],
            ]
        );
        $this->add_group_control(
            Group_Control_Box_Shadow::get_type(),
            [
                'name' => 'item_hover_box_shadow',
                'selector' => '{{WRAPPER}} .ui-e-wrp:hover .ui-e-item',
            ]
        );

        if ($tab) {
            $this->end_controls_tab();
        }
    }
    function TRAIT_register_active_item_style_controls($tab = true)
    {
        // If the widget doesn't require extra controls, we can use tabs to decrease the widget code
        if ($tab) {
            $this->start_controls_tab(
                'tab_item_active',
                [
                    'label' => esc_html__('Active', 'uicore-elements'),
                ]
            );
        }

        $this->add_group_control(
            Group_Control_Background::get_type(),
            [
                'name' => 'item_active_background',
                'selector' => '{{WRAPPER}} .ui-e-wrp.is-selected .ui-e-item',
            ]
        );
        $this->add_control(
            'item_active_border_color',
            [
                'label' => esc_html__('Border Color', 'uicore-elements'),
                'type' => Controls_Manager::COLOR,
                'condition' => [
                    'item_border_border!' => '',
                ],
                'selectors' => [
                    '{{WRAPPER}} .ui-e-wrp.is-selected .ui-e-item' => 'border-color: {{VALUE}};',
                ],
            ]
        );
        $this->add_group_control(
            Group_Control_Box_Shadow::get_type(),
            [
                'name' => 'item_active_box_shadow',
                'selector' => '{{WRAPPER}} .ui-e-wrp.is-selected .ui-e-item',
            ]
        );

        if ($tab) {
            $this->end_controls_tab();
        }
    }

    /**
     * Register all Item Style Controls at Once
     *
     * @param boolean $active_state Register Active State Controls. Default is `true`
     * @return void
     */
    function TRAIT_register_all_item_style_controls($active_state = true)
    {
        $this->start_controls_tabs('tabs_item_style');
        $this->TRAIT_register_normal_item_style_controls();
        $this->TRAIT_register_hover_item_style_controls();
        if ($active_state) {
            $this->TRAIT_register_active_item_style_controls();
        }
        $this->end_controls_tabs();
    }
}

```