start_controls_section(
'section_anchor',
[
'label' => esc_html__( 'Menu Anchor', 'elementor' ),
]
);
$this->add_control(
'anchor',
[
'label' => esc_html__( 'The ID of Menu Anchor.', 'elementor' ),
'type' => Controls_Manager::TEXT,
'ai' => [
'active' => false,
],
'placeholder' => esc_html__( 'For Example: About', 'elementor' ),
'description' => esc_html__( 'This ID will be the CSS ID you will have to use in your own page, Without #.', 'elementor' ),
'label_block' => true,
'dynamic' => [
'active' => true,
],
]
);
$this->add_control(
'anchor_note',
[
'type' => Controls_Manager::ALERT,
'alert_type' => 'warning',
'content' => sprintf(
/* translators: %s: Accepted chars. */
esc_html__( 'Note: The ID link ONLY accepts these chars: %s', 'elementor' ),
'`A-Z, a-z, 0-9, _ , -`'
),
]
);
$this->end_controls_section();
}
/**
* Render menu anchor widget output on the frontend.
*
* Written in PHP and used to generate the final HTML.
*
* @since 1.0.0
* @access protected
*/
protected function render() {
$anchor = $this->get_settings_for_display( 'anchor' );
if ( empty( $anchor ) ) {
return;
}
$this->add_render_attribute(
'inner',
[
'class' => 'elementor-menu-anchor',
'id' => sanitize_html_class( $anchor ),
]
);
?>
print_render_attribute_string( 'inner' ); ?>>
<#
if ( '' === settings.anchor ) {
return;
}
view.addRenderAttribute(
'inner',
{
'class': 'elementor-menu-anchor',
'id': settings.anchor,
}
);
#>