AccordionControlHtmlTemplates.FooterOverflowButton Property

Specifies the HTML-CSS template used to render the Overflow button in the control’s footer.

Namespace: DevExpress.XtraBars.Navigation

Assembly: DevExpress.XtraBars.v24.1.dll

NuGet Package: DevExpress.Win.Navigation

Declaration

C#

[DXCategory("Layout")]
public HtmlTemplate FooterOverflowButton { get; }

VB.NET

<DXCategory("Layout")>
Public ReadOnly Property FooterOverflowButton As HtmlTemplate

Property Value

Type	Description
HtmlTemplate	An HTML-CSS template used to render the Overflow button in the control’s footer panel.

Remarks

AccordionControl can render its UI elements from HTML-CSS templates. The following properties allow you to define HTML templates for the footer panel and its elements:

• AccordionControlHtmlTemplates.FooterPanel — Specifies the HTML-CSS template used to render the control’s footer.
• AccordionControlHtmlTemplates.FooterElement — Specifies the default HTML-CSS template used to render elements when they are displayed within the control’s footer.
• FooterOverflowButton — Specifies the HTML-CSS template used to render the Overflow button in the control’s footer.

HTML markup for the HtmlFooterOverflowButtonTemplate template should contain an HTML element with the predefined “dx-item” identifier (id). This element’s size determines the Overflow button’s display size.

The following example shows a template for the HtmlFooterOverflowButtonTemplate property. The HTML code uses the “dx-item” id to mark the HTML element that determines the display size of the Overflow button:

HTML#

<div class="container">
    <div id="dx-item" class="button">
        <div class="content">
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
    </div>
</div>

CSS

.button {
    padding: 7px;
    border-radius: 3px;
    margin: 1px;
}

.content{
    display: flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
}

.dot {
    width: 2px;
    height: 2px;
    background-color: #50EEB2;
    box-shadow: 0px 0px 3px #50EEB2;
    margin: 2px;
}

.button:hover {
    background-color: #2050EEB2;
}