Thursday, August 11, 2022
HomeSoftware DevelopmentBlaze UI Inputs - GeeksforGeeks

Blaze UI Inputs – GeeksforGeeks

[ad_1]

Enhance Article

Save Article

Like Article

Blaze UI is a free open supply UI Toolkit that gives a wonderful construction for constructing web sites rapidly with a scalable and maintainable basis. All parts in Blaze UI are developed mobile-first and rely solely on native browser options, not a separate library or framework. It helps us create a scalable and responsive web site rapidly and effectively with a constant model.

On this article, we’ll find out about numerous sorts of inputs utilizing the Blaze UI framework. Textual content inputs are used on the webpages to take textual content kind enter from the makes use of.

Blaze UI Enter varieties:

<enter class=”c-field” placeholder=”…” kind=”textual content” />

  • Colours Enter: This enter is used to supply colour to the enter space. If there’s any type of error whereas getting into enter then the border of the enter will change its colour to crimson and if the enter is right then the colour will change to inexperienced.

Error:

<enter class=”c-field c-field–error” placeholder=”…” kind=”textual content”> 

No Error: 

<enter class=”c-field c-field–success” placeholder=”…” kind=”textual content”>

Disabled:

<enter class=”c-field” disabled placeholder=”disabled” kind=”textual content”>

  • Icons Enter: This enter discipline is used to indicate what sort of enter to present in that enter discipline.

<div class=”o-field o-field–icon-left”>

    <i class=”far fa-calendar-alt c-icon”></i>

    <enter class=”c-field” kind=”textual content”>

</div>

  • Sizes Enter: That is used to present what would be the measurement of the enter when the consumer enters any knowledge.

<enter class=”c-field input-size-class” placeholder=”… ” kind=”textual content”>

 Enter Teams:

  • Inline Enter: That is used to take enter in mounted block measurement in a single line.
  • Mounted Width: That is used to set the width of a particular enter discipline from the enter group.
  • Stacked: That is used to take enter in a stacked format.
  • Buttons: That is used to take enter in a button format.
  • Rounded: That is used to take enter in a rounded format.
  • Checkboxes and Radios: That is used to take enter within the checkboxes and radios format.
  • Fieldsets and Legends: That is used to use Blaze’s kinds to make sure constant fieldset behaviors.
  • Disabled Fieldset: This enter is used to disable a fieldset which is able to disable all controls inside it and Blaze UI will apply the disabled styling.
  • Labels and type components: That is used to take enter within the labels and type format. 
  • Hints: That is used to make the trace seen always.

Instance 1: Within the following instance now we have created the enter with coloured enter.

HTML

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Suitable" content material="IE=edge">

    <meta identify="viewport"

    content material="width=device-width, initial-scale=1.0">

    <title>Blaze UI - Textual content Enter</title>

    <hyperlink rel="stylesheet" href=

    <model>

        physique {

            font-family: sans-serif;

        }

    </model>

</head>

<physique>

    <div class="u-centered">

        <h2 model="colour: inexperienced;">GeeksforGeeks</h2>

        <h3>Textual content Enter - Blaze UI</h3>

    </div>

    <div class="u-window-box-super">

        <p><b>Textual content Enter</b></p>

        <enter kind="textual content" class="c-field"

            placeholder="Textual content Enter">

            <p><b>Coloration enter(Error)</b></p>

        <enter class="c-field c-field--error" 

               placeholder=".c-field--error" kind="textual content">

        <p><b>Coloration enter(No Error)</b></p>

  

        <enter class="c-field c-field--success" 

               placeholder=".c-field--success" kind="textual content">

    </div>

</physique>

</html>

Output:

Blaze UI Inputs

Instance 2: Within the following instance, now we have created the enter utilizing the small and huge fields.

HTML

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Suitable" content material="IE=edge">

    <meta identify="viewport"

    content material="width=device-width, initial-scale=1.0">

    <title>Blaze UI - Textual content Enter</title>

    <hyperlink rel="stylesheet" href=

    <model>

        physique {

            font-family: sans-serif;

        }

    </model>

</head>

<physique>

    <div class="u-centered">

        <h2 model="colour: inexperienced;">GeeksforGeeks</h2>

        <h3>Textual content Enter - Blaze UI</h3>

    </div>

    <h3><b>x-small</b></h3>

    <enter class="c-field u-xsmall" 

           placeholder=".u-xsmall" kind="textual content">

    <h3><b>small</b></h3>

    <enter class="c-field u-small" 

           placeholder=".u-small" kind="textual content">

    <h3><b>massive</b></h3>

    <enter class="c-field u-medium"

           placeholder=".u-medium" kind="textual content">  

</physique>

</html>

Output:

Blaze UI Inputs

 

Reference: https://www.blazeui.com/parts/inputs/ 

[ad_2]

RELATED ARTICLES

Most Popular

Recent Comments