Semantic-UI Dropdown Compact Variation
Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing.
Semantic UI has a bunch of components for user interface design. One of them is “Dropdown”. Dropdowns are used to show different options to users to choose from. Users can select among them as per their choice. There are different variations of dropdowns based on menu direction and the way it shows up.
Semantic UI Dropdown Compact Variation: The user might need to set the width of the dropdown as per the selection made. This is when compact variation comes in handy. There is no minimum width for this dropdown. The dropdown width changes as the user make his selection. There is no fixed width and it helps in setting width automatically as per user choice.
Semantic UI Dropdown Compact Variation Class:
- compact: This class is used to specify the compact variation of the dropdown.
<div class="ui compact dropdown"> ... </div>
To instantiate the dropdown function, use the following syntax.
<script> $('.ui.dropdown').dropdown(); </script>
Example 1: This example demonstrates the powers of 10 through the dropdown compact variation using the compact class. You can see as the user chooses lesser powers of 10, the width of the dropdown keeps on decreasing.
Example 2: This example demonstrates the dropdown compact variation using the compact class. You can see as the user chooses the select box text, the width of the dropdown keeps on changing according to the width of the text.
Please Login to comment...