> 'after', ] ); $this->add_control( 'active_nav_color', [ 'label' => __( 'Color', text_domain ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .tab-nav-item.tmt-open' => 'color: {{VALUE}};', ], 'separator' => 'before', ] ); $this->add_group_control( Group_Control_Box_Shadow::get_type(), [ 'name' => 'active_nav_shadow', 'selector' => '{{WRAPPER}} .tab-nav-item.tmt-open', ] ); $this->add_group_control( Group_Control_Border::get_type(), [ 'name' => 'active_nav_border', 'selector' => '{{WRAPPER}} .tab-nav-item.tmt-open', ] ); $this->add_control( 'active_nav_radius', [ 'label' => __( 'Border Radius', text_domain ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', '%' ], 'selectors' => [ '{{WRAPPER}} .tab-nav-item.tmt-open' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}; overflow: hidden;', ], ] ); $this->end_controls_tab(); $this->end_controls_tabs(); $this->add_responsive_control( 'nav_padding', [ 'label' => __( 'Padding', text_domain ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', 'em', '%' ], 'selectors' => [ '{{WRAPPER}} .tab-nav-item' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], ] ); $this->add_responsive_control( 'nav_margin', [ 'label' => __( 'Margin', text_domain ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', 'em', '%' ], 'selectors' => [ '{{WRAPPER}} .tab-nav-item' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], ] ); $this->end_controls_section(); } protected function register_content_style_controls() { $this->start_controls_section( 'section_content_style', [ 'label' => __( 'Content', text_domain ), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'content_typography', 'selector' => '{{WRAPPER}} .tabs-content-item', ] ); $this->add_control( 'content_color', [ 'label' => __( 'Color', text_domain ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .tabs-content-item' => 'color: {{VALUE}};', ], 'separator' => 'before', ] ); $this->add_group_control( Group_Control_Background::get_type(), [ 'name' => 'content_background', 'types' => [ 'classic', 'gradient' ], 'selector' => '{{WRAPPER}} .tmt-tabs-content', 'separator' => 'after', ] ); $this->add_group_control( Group_Control_Box_Shadow::get_type(), [ 'name' => 'content_shadow', 'selector' => '{{WRAPPER}} .tmt-tabs-content', ] ); $this->add_responsive_control( 'content_padding', [ 'label' => __( 'Padding', text_domain ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', 'em', '%' ], 'selectors' => [ '{{WRAPPER}} .tmt-tabs-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], ] ); $this->add_group_control( Group_Control_Border::get_type(), [ 'name' => 'content_border', 'selector' => '{{WRAPPER}} .tmt-tabs-content', ] ); $this->add_control( 'content_radius', [ 'label' => __( 'Border Radius', text_domain ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', '%' ], 'selectors' => [ '{{WRAPPER}} .tmt-tabs-content' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}; overflow: hidden;', ], ] ); $this->add_responsive_control( 'content_margin', [ 'label' => __( 'Margin', text_domain ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', 'em', '%' ], 'selectors' => [ '{{WRAPPER}} .tmt-tabs-content' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], ] ); $this->end_controls_section(); } protected function render() { $settings = $this->get_settings(); $tabs = $settings['tabs']; $tab_layout = $settings['tab_layout']; $this->add_render_attribute( 'nav-position', 'class', ['tmt-tabs', 'flex']); switch($tab_layout) { case 'top': $align = $settings['align_v']; $this->add_render_attribute( 'nav-position', 'class', 'flex-column' ); break; case 'right': $align = $settings['align_h']; $this->add_render_attribute( 'nav-align', 'class', ['flex-column','row-nav'] ); $this->add_render_attribute( 'nav-position', 'class', ['flex-row-reverse','row-item'] ); break; case 'bottom': $align = $settings['align_v']; $this->add_render_attribute( 'nav-position', 'class', 'flex-column flex-column-reverse' ); break; case 'left': $align = $settings['align_h']; $this->add_render_attribute( 'nav-align', 'class', ['flex-column','row-nav'] ); $this->add_render_attribute( 'nav-position', 'class', 'row-item' ); break; } $nav_position = $this->get_render_attribute_string( 'nav-position' ); $this->add_render_attribute( 'nav-align', 'class', ['flex', 'flex-wrap',"justify-content-$align"] ); $nav_align = $this->get_render_attribute_string( 'nav-align' ); if ($tabs) { echo "
" . "
" . "" . "
" . "
"; foreach ( $tabs as $index => $item ) { $acc_count = $index + 1; $tmt_open = ($acc_count === $settings['active_item']) ? ' tmt-open' : ''; $id = $item['_id']; $source = $item['source']; echo "
"; switch($source) { case 'elementor' : $template_id = $item['template_id']; echo TMT_Elementor_Template($template_id); break; case 'custom' : echo $item['tab_content']; break; } echo "
"; } echo "
" . "
"; } //; } } Plugin::instance()->widgets_manager->register_widget_type( new TMT_Tabs ); Shop - Kowsar Engineering Technical Group