Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
Front End Technology Articles
Page 62 of 652
How to create a slider with input in Material UI?
React developers can easily add or use sliders in React thanks to the Slider component provided by Material UI. In the Material UI, apart from using normal sliders, we may also define an input to provide a custom value that can be entered by users manually. In this article, we are going to learn how to create sliders with input in Material UI. What is a Slider with Input? A user interface element called a Slider with an input field combines two input techniques for choosing a numerical value from a predetermined range. Usually, it has a slider element and ...
Read MoreHow to create a Native Select in Material UI?
Material UI is a framework, for React that offers a Select component. This component allows users to pick options from a menu. Today we will explore how to create a Native Select in Material UI. One of the components in Material UI is the "Native Select." It plays a role, in creating menus with native select functionality, giving users the ability to choose from various options. How is Native Select different from Select Component? The Native Select and Select components have some differences. Native Select offers a user interface on platforms by rendering a native HTML element. It provides ...
Read MoreHow to control Badge visibility in Material UI?
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 control Badge visibility in the Material UI. But before we dive into the steps of controlling badge visibility in MUI, let’s first understand what exactly a badge is. What is a Badge? A badge is a small element that is attached ...
Read MoreHow to change Toggle Button orientation with color and sizes in Material UI?
To provide a great user experience, the colors and sizes of different components added to a website play an important role. The React MUI allows you to change the orientation, color, and size of the toggle buttons easily by using some props given in the documentation. In this article, we are going to learn how to change Toggle Button orientation with color and size in Material UI. But before we dive into the steps of changing the given properties, let’s first understand what exactly a Toggle Button is. What is a Toggle Button? Toggle buttons are a very popular component ...
Read MoreHow to change the size and color of Floating action buttons in Material UI?
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 MoreHow to change size, color, and direction of Radio buttons in Material UI?
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 MoreCustom Checkbox with CSS appearance Property
We use the appearance property to style an element according to the platform-native style of the user’s operating system. The custom checkbox looks different from the default checkbox, and after selecting it the appearance will change. Syntax The syntax of CSS appearance property is as follows − Selector { appearance: /*value*/; -webkit-appearance: /*value*/; /*for Safari and Chrome */ -moz-appearance: /*value*/; /*for Firefox */ } Create a Round Custom Checkbox To create a round custom checkbox, we have set the following style with border-radius and box-shadow. The appearance is set ...
Read MoreHow to format a number with two decimals in JavaScript?
This tutorial will teach us how to format a number with two decimals using JavaScript. Formatting a number means rounding the number up to a specified decimal place. In JavaScript, we can apply many methods to perform the formatting. Some of them are listed as follows − The toFixed() Method Math.round() Method Math.floor() Method Math.ceil() Method The toFixed() Method The toFixed() method formats a number with a specific number of digits to the right of the decimal. it returns a string representation of the number that does not use exponential notation and has the exact number of digits after ...
Read MoreHow to Create and Save text file in JavaScript?
In this tutorial, we will learn to create and save the text file in JavaScript. Sometimes, developers need to get texts or content from the user and allow users to store content in a text file and allow the file to download to the local computer. Many JavaScript libraries are available to achieve our goal, but we have used the best two libraries in this tutorial to create and save the text file. Create a text file using custom text and save it to a local computer We will use normal JavaScript operations to create and save the text file ...
Read MoreCSS3 Transparency and Gradients
Linear gradients are used to arrange two or more colors in linear formats like top to bottom. To add transparency, use the RGBA() function and define the color stops. At least two color stops should be mentioned. Let us first see the syntax. Syntax The following is the syntax to create Linear Gradients − background-image: linear-gradient(dir, colorStop1, colorStop2, colorStop3, ...); Above, the dir is the direction i.e., from − Left to Right Right to Left Diagonal Top to Bottom Linear Gradient Beginning From Right to Left The following is the code to set transparent linear gradient ...
Read More