With the Dropbar control, you can add a compact dropbar which is very useful when you want to hide content and save some space on your form or dashboard. You can add a dropbar wherever you want on your page and customize it according to your vision just in a few clicks.
In this article, you will learn how to add a Dropbar control easily. So, let’s have a closer look at this process.
Add a Dropbar
Firstly, find the Dropbar control in the controls add panel,. Then, drag and drop it into a section or container on your page.
Content Settings
Navigate to the dropbar Content menu tab. The first section here contains features that define the dropbar’s content. let’s take a look at them:
Button Type. The button can be marked with the text and with the image. Here you can choose the type of marking. If you choose Text, you can then type it into a corresponding field. And if you have chosen an Image option, you will be able to upload a image or choose from the dynamic content., and set its size;
Before Icon, After Icon. You can place icons before and after the text or image on the button. Here you can pick it from the Icon Library;
Alignment. Here you can choose the position of the button within the section;
Content Type. There are two types of dropbar – a simple text notification and a rich text box. If you want just a notification, you can choose the “Simple Text” option and write it down in the Simple Text text area. Otherwise, you can choose the “Rich Text” option. In that case, you will be able to add image, hyperlink and other formatted text.
Go through the settings
The Settings section of the Content menu tab contains features that affect the dropbar itself and the layout of the button.
Position. In this drop-down menu, you can choose the position of the appearing dropbar. There are 12 variants, so play with them to define where it will fit the best;
Auto Positioning. Turn this on if you want the Dropbar automatically decide the position of the appearing dropbar.
Mode. This drop-down allows you to choose what action will make the dropbar appear. it can happen on Hover or on Click;
Hide Delay. If you have chosen the “Hover” option in the Mode feature, the value in ms you type in here will define how more time the dropbar will stay after the user stops hovering the pointer over the button;
Offset. This is the gap between the button and the dropbar. You can select it by moving the slider or type the value into the field;
Width. here you can choose the width of the dropbar. If you don’t touch this future, the width will be set automatically according to the content;
Fixed Layout. You can make the dropbar button stay fixed on one position by enabling this toggle. The button will stay in the same place even when the user will scroll the page. The position can be changed in the FixedPosition drop-down and the distance to the screen borders is set in the Spacer field. The Z-index feature allows you to define what parts of the page will be overlayed by the dropbar button, the smaller the number – the more priority will the dropbar have over the other elements.
Style Dropbar
The Dropbar control has a lot of different Style settings, so you can change its appearance to make your page look really amazing.
Button Style
Typography: Set the typography options of the button text.
Normal / Hover: Set different style for Normal and Hover states.
Background Type: Select the button’s background color for both Normal and Hover states. You may use a solid or gradient color
Text Color: Select the color of the button’s text
Shadow: Set options to apply a box shadow on the button
Border Type: Select the type of border to use around the button
Radius: Set the border radius to control corner roundness
Padding: Change the padding settings of the button
Content Style
Typography: Change the default typography options for the content’s text
Align: Align the content to the left, center, or right.
Background Type: Select the content box’s background color for both Normal and Hover states. You may use a solid or gradient color
Text Color: Select the color of the content’s text
Border Type: Select the type of border to use around the content box.
Radius: Set the border radius to control corner roundness
Shadow: Set options to apply a box shadow on the content box.
Padding: Change the padding settings of the content box.
Z-index: Set the Z-Index of the content box. Learn more about Z-Index
Advanced Settings
Set the Advanced options that are applicable to this control.