I am new to vuejs2 and trying to create a simple login page with the help of vue material.
<template>
<div class="loginContainer">
<form>
<md-card class="md-layout md-small-size-33 md-medium-size-33">
<md-card-header :data-background-color="dataBackgroundColor">
<h4 class="title">Login</h4>
</md-card-header>
<md-card-content>
<div class="md-layout">
<div class="md-layout-item">
<md-field>
<label>User Name</label>
<md-input v-model="username" type="text"></md-input>
</md-field>
</div>
<div class="md-layout-item md-small-size-100 md-size-33">
<md-field>
<label>Password</label>
<md-input v-model="emailadress" type="password"></md-input>
</md-field>
</div>
</div>
</md-card-content>
</md-card>
</form>
</div>
</template>
in the above code I created a sample login page using vue-material cards.But how can I make these vue-material cards as responsive by using vue-material?
Related
I tried to put the 'search' button below the 'branch' label, here's my snippet
<template>
<base-header class="pb-4 pb-5 pt-6 pt-md-6 bg-gradient-success">
<template>
<div>
<b-form inline>
<label for="status">Status⠀⠀⠀ :</label>
<div class="col-sm-2">
<b-form-input v-model="text"></b-form-input>
</div>
<div class="branch">
<div class="col-8 text-right">
<b-form inline label-align-sm="right">
<label for="branch">⠀⠀⠀⠀⠀⠀⠀⠀Branch:</label>
<div class="col-sm-2">
<b-form-input v-model="text"></b-form-input>
</div>
<div>
<b-button variant="outline-primary">Search</b-button>
</div>
</b-form>
</div>
</div>
</b-form>
</div>
<div>
<b-form inline>
<label for="storecode">Store Code:</label>
<div class="col-sm-2">
<b-form-input v-model="text"></b-form-input>
</div>
</b-form>
</div>
And here's the result after all current view
Thanks in advance☺
The reason this is happening if because you're placing it inside <b-form> with the inline prop.
If you place it outside the form it should be placed below.
If you want the button to submit the form, you can target it using the form attribute which targets the id of your <b-form>.
<b-form inline id="my-form" label-align-sm="right">
<label for="branch">⠀⠀⠀⠀⠀⠀⠀⠀Branch:</label>
<div class="col-sm-2">
<b-form-input></b-form-input>
</div>
</b-form>
<b-button type="submit" form="my-form" variant="outline-primary">Search</b-button>
An alternativ is to use the Bootstrap grid system, and apply the class col-12 to the div wrapping your <b-button>.
<b-form inline id="my-form" label-align-sm="right">
<label for="branch">⠀⠀⠀⠀⠀⠀⠀⠀Branch:</label>
<div class="col-sm-2">
<b-form-input></b-form-input>
</div>
<div class="col-12">
<b-button variant="outline-primary">Search</b-button>
</div>
</b-form>
I'm developing a project with VueJS. Now I am only including a ready-made template in the Vue project. I haven't written any vue code yet. But I keep getting compile errors. I am sure there is no error in my code. But the error just doesn't go away. I share with you my codes and error message in the component I got an error.
<div class="infotechno-hero infotechno-bg">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-lg-6 col-md-6">
<div class="infotechno-hero-text wow move-up">
<h6>IT Design Consulting </h6>
<h1 class="font-weight--reguler mb-15">Facilitate All <br> Local IT-related Service Providers </h1>
<p>Highly Tailored IT Design, Management Support Services. </p>
<div class="hero-button mt-30">
Get details
</div>
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="infotechno-hero-inner-images">
<div class="infotechno-inner-one">
<img class="img-fluid" src="assets\images\hero\home-infotechno-main-slider-slide-01-image-01.png" alt="" />
</div>
<div class="infotechno-inner-two wow move-up">
<img class="img-fluid" src="assets\images\hero\home-infotechno-main-slider-slide-01-image-02.png" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>
Where is your template tags? You have to write your divs in a template in vue files.
You can look at there for more info: https://v2.vuejs.org/v2/guide/syntax.html
<template>
<div class="infotechno-hero infotechno-bg">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-lg-6 col-md-6">
<div class="infotechno-hero-text wow move-up">
<h6>IT Design Consulting</h6>
<h1 class="font-weight--reguler mb-15">
Facilitate All
<br />Local IT-related Service Providers
</h1>
<p>Highly Tailored IT Design, Management Support Services.</p>
<div class="hero-button mt-30">
Get details
</div>
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="infotechno-hero-inner-images">
<div class="infotechno-inner-one">
<img class="img-fluid" src="assets\images\hero\home-infotechno-main-slider-slide-01-image-01.png" alt />
</div>
<div class="infotechno-inner-two wow move-up">
<img class="img-fluid" src="assets\images\hero\home-infotechno-main-slider-slide-01-image-02.png" alt />
</div>
</div>
</div>
</div>
</div>
</div>
</template>
I have a Buefy template which looks a little like this but I cannot work out how to centre the input box text so everything looks pretty.
I've tried adding 'has-text-centered' to basically everything and it still doesn't centre it!
<template>
<section class="hero is-info is-fullheight">
<div class="hero-body">
<div class="container">
<div class="columns is-centered">
<div class="column is-5-tablet is-4-desktop is-3-widescreen">
<div class="box">
<div class="login">
<b-field label="">
<b-input type="email"
placeholder="john#doe.com"
v-model="email">
</b-input>
</b-field>
<b-field label=""
:message="error_message">
<b-input type="password"
placeholder="****************"
v-model="password">
</b-input>
</b-field>
<div class="buttons">
<b-button #click="login" :loading="loading" type="is-info" expanded>Log In</b-button>
</div>
<p>Create an account <router-link to="/sign-up">here</router-link>!</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</template>
What am I missing here?
You could add a custom class to your input:
<b-input type="email"
placeholder="john#doe.com"
v-model="email"
class="input-text-center"
>
</b-input>
And then write a CSS for that:
.input-text-center input {
text-align: center;
}
Please note since you are writing a CSS for a Buefy module you can't do it with scoped CSS as you would normally do in a Vue single file component. Instead you should add this CSS at a more global level.
I have a card with form/ I want to place in the center of the page.
Here my layout 'empty':
<template>
<nuxt />
</template>
<script>
export default {
name: 'Empty'
}
</script>
<style></style>
I have next page with form:
<template>
<b-card>
<b-form #submit.stop.prevent="onSubmit">
...
</b-form>
</b-card>
</template>
I get next result:
<body data-gr-c-s-loaded="true">
<div id="__nuxt">
<!---->
<!---->
<div id="__layout">
<div class="card">
<!---->
<!---->
<div class="card-body">
<!---->
<!---->
<form class="">
...
</form>
</div>
<!---->
<!---->
</div>
</div>
</div>
...
</body>
On the screen, it looks like:
But I want to it looks like:
I can't find how to do it. Can you help me?
You can use a combination of bootstrap v4.3 flex utility classes and position utility classes with a sprinkling of custom styling:
<div
class="fixed-top d-flex align-items-center justify-content-center"
style="bottom: 0; overflow-y: auto"
>
<b-card style="max-width: 400px;">
<form>
<b-form-input class="mb-2"></b-form-input>
<b-form-input class="mb-2"></b-form-input>
<b-form-input class="mb-2"></b-form-input>
<b-form-input class="mb-2"></b-form-input>
</form>
</b-card>
</div>
You may need to tweak the above styles a bit.
I am trying to make a product review page using Vue js. Please see the below code
App.Vue
<template>
<div class=" wrapper">
<div class="container shadow padding-left-none">
<div class="grid-100 padding-left-none">
<div class="grid-30 padding-left-none">
<product-list></product-list>
</div>
<div class="grid-70">
<reviewPage :reviews="reviews"></reviewPage>
</div>
</div>
</div>
</div>
</template>
review-page.vue
<template>
<div class="grid-100">
<div class="review-wrapper">
<h3>Rate this product</h3>
<div class="rating-section">
<div class="user-ratings">
<rating-star v-on:ratingProvided="ratingProvided"></rating-star>
</div>
<div class="rating-complement" v-if="isRatingProvied">
<span class="complement">{{ratingComplement}}</span>
</div>
<div class="rating-saved pull-right" v-if="isRatingSaved">
<span class="saved-status">Your rating has been saved</span>
</div>
</div>
<div class="reviews-container">
<div class="review" v-for="review in reviews" :key="review.id">
</div>
</div>
</div>
</div>
</template>
product-list is having product.vue components.
whenever i am selecting a produc, the properties of review-page components are not getting reset. I want to reset "isRatingProvied" property.so that a fresh review page will be rendered for every product selection.