Categories
Buefy

Buefy — Number Input

Spread the love

Buefy is a UI framework that’s based on Bulma.

In this article, we’ll look at how to use Buefy in our Vue app.

Number Input

We can add a number input with the b-numberipnut component.

For example, we can write:

<template>  
  <div>  
    <b-field>  
      <b-numberinput v-model="number"></b-numberinput>  
    </b-field>  
  </div>  
</template>  
<script>  
export default {  
  data() {  
    return {  
      number: 0  
    };  
  }  
};  
</script>

to add it.

The disabled prop disables it.

rounded prop makes the input box rounded.

loading adds a loading indicator.

The type and message props styles the number input:

<template>  
  <div>  
    <b-field type="is-success" message="Rate is valid">  
      <b-numberinput v-model="number"></b-numberinput>  
    </b-field>  
  </div>  
</template>  
<script>  
export default {  
  data() {  
    return {  
      number: 0  
    };  
  }  
};  
</script>

type has the style name and message has the message.

Min and Max

The min and max props restrict the values that we can set:

<template>  
  <div>  
    <b-field>  
      <b-numberinput v-model="number" min="0" max="10"></b-numberinput>  
    </b-field>  
  </div>  
</template>  
<script>  
export default {  
  data() {  
    return {  
      number: 0  
    };  
  }  
};  
</script>

The buttons will be grayed out when we hit the limits.

Steps

The increment quantity can be changed with the step prop:

<template>  
  <div>  
    <b-field>  
      <b-numberinput v-model="number" step="5"></b-numberinput>  
    </b-field>  
  </div>  
</template>  
<script>  
export default {  
  data() {  
    return {  
      number: 0  
    };  
  }  
};  
</script>

Sizes

The size can be changed with the size prop:

<template>  
  <div>  
    <b-field>  
      <b-numberinput v-model="number" size="is-large"></b-numberinput>  
    </b-field>  
  </div>  
</template>  
<script>  
export default {  
  data() {  
    return {  
      number: 0  
    };  
  }  
};  
</script>

We make it large with the size prop set to 'is-large' .

We can customize it in various ways.

For example, we can write:

<template>  
  <div>  
    <b-field label="Compact and rounded">  
      <b-numberinput controls-position="compact" controls-rounded></b-numberinput>  
    </b-field>  
  </div>  
</template>  
<script>  
export default {  
  data() {  
    return {};  
  }  
};  
</script>

to make the buttons rounded.

We can put it into a group with the grouped prop:

<template>  
  <div>  
    <b-field label="Grouped">  
      <b-field grouped>  
        <p class="control">  
          <button class="button">Button</button>  
        </p>  
        <b-numberinput/>  
      </b-field>  
    </b-field>  
  </div>  
</template>  
<script>  
export default {  
  data() {  
    return {};  
  }  
};  
</script>

Conclusion

We can add a number input with the Buefyb-numberinput component.

Leave a Reply

Your email address will not be published. Required fields are marked *