Front End Technology Articles - Page 12 of 745

Floating Action Buttons or FABs in every application works as a prominent call-to-action button that performs a specific action, such as creating a new item or triggering an essential function. Material UI, a popular UI framework for React, offers a flexible and customizable way to implement FABs with ease. In this article, we will learn how to change the size and color of Floating action buttons in Material UI using React. What is a Floating Action Button? Before moving further, let’s understand what is a Floating action button or FAB. These buttons are included in an app's user interface to ... Read More

Implementing radio buttons, in Material UI, a used UI framework for React is straightforward. You can effortlessly customize the size, color, and orientation of the radio buttons to match the design of your application. In this article, we will explore how to modify the size, color, and orientation of radio buttons, in Material UI. What is a Radio Button? Radio buttons are an element, in forms that enable users to choose one option from a set of choices that're mutually exclusive. They appear as buttons that can be either selected (checked) or unselected (unchecked). When one radio button is selected ... Read More

In this article, we will explore how to customize the appearance of a button group, in Material UI so that it suits the needs of your application. Material UI, also known as MUI is a frontend library developed by Google. It provides a collection of to use React components that can be used in frameworks, like React and NextJS. With Material UI you get access to a range of components such as buttons, checkboxes, selects and more. One specific component called ButtonGroup is particularly useful for grouping buttons Button groups are great for enhancing the user experience by organizing buttons. ... Read More

Badges play an important role in designing a web UI, whether you are building a social media site, a messaging app, or anything else that requires the use of badges. Material UI provides an easy way to accomplish this task with just one component called the Badge API. So, in this article, we are going to learn how to align and overlap badges in Material UI. But before we dive into the steps to align and overlap the badges in MUI, let’s first understand what exactly a badge is. What is a Badge? A badge is a small component mostly ... Read More

Styled Components, a highly acclaimed library within the React ecosystem, empowers developers to utilize CSS-in-JS, presenting advantages such as encapsulation, reusability, and simplified style maintenance. On the other hand, Material-UI stands as a widely embraced UI component library for React that diligently adheres to the principles of Material Design. It offers an extensive selection of customizable pre-built components. While Material-UI comes equipped with its own styling solution known as makeStyles, it seamlessly integrates with Styled Components, enabling developers to leverage the combined capabilities of both libraries. Our exploration revolves around the installation process, specifically highlighting the @mui/styled-engine and @mui/styled-engine-sc packages. ... Read More

In this article, we will learn How to add Icons to text fields using input adornments in Material UI. But before we learn adding icons to text-field using input adornments, we must know what input adornments are? Input adornments are nothing but extra text or icons that are added to text fields. These are positioned in three different positions, including prefix, suffix, and action. InputAdornment API - This API is used to add a prefix, a suffix, or an action to an input element in React MUI. Props position − This prop is used to set ... Read More

Displaying lists of data is a common requirement for web applications. or tables with scrollable headers. Most likely, you have performed it countless times. But what if you have to display thousands of rows simultaneously? In this article, we will look at how to use Material UI's Autocomplete components' virtual lists to produce fluid user interfaces with big datasets. Popular React UI framework Material UI provides a large selection of components with cutting-edge designs and top-notch performance. Traditional rendering techniques may cause performance problems when dealing with large datasets in Autocomplete components, so in order to prevent those problems, we ... Read More

An effective Autocomplete component is provided by the well-liked UI framework Material UI for React applications. Users can search and choose options from a predefined list as they type thanks to the autocomplete feature. Although choosing one option is the default behavior, there are some situations where we might want to give users the option of selecting multiple values. In this article, we will explore how to implement and utilize multiple Autocomplete values in Material UI. Multiple Autocomplete Values Users can only choose one option at a time when using the Material UI Autocomplete component by default. Some scenarios, however, ... Read More

In the realm of user interface development, proficiently managing user interactions is paramount. Material UI's Autocomplete component offers the concept of controlled states, allowing developers to regulate the component's behavior and data through external state management. Unlike relying solely on the component's local state, controlled states enable synchronization with the overall application state, creating a more centralized and predictable user interaction. In this article, we will explore the concept of controlled states in autocomplete combo box and learn how to use them effectively to manage the "value" and "input value" states independently. Understanding controlled states in the Autocomplete combo box ... Read More

Material UI, also known as MUI is a front−end library developed by Google. It provides a collection of React components that can be utilized across frameworks, like React and NextJS. The Material UI library includes a component called "buttongroup, " which allows for the grouping of two or more buttons. If we wish to separate these buttons, how can we achieve that? Utilizing the Button Group component enables us to create buttons well. Use a Dropdown menu to change the button's action, or you can use it for an immediate launch of related actions. In React Material UI, it ... Read More