I have created an array of items and mapped them in Vue but I can't make them to flex-row using Tailwind CSS maybe there is something I don't know about in tailwind css flex-row feature
<div class="bg-white mt-5 rounded-tr-md rounded-tl-md">
<!-- Filter menus -->
<div
v-for="filter in filterTypes"
:key="filter.type"
class="flex flex-row items-center px-5 py-4"
>
<div class="">{{ filter.type }}</div>
</div>
<!-- Transactions According to Pages-->
<div></div>
</div>
You should place flex to the parent element, and there's no need to flex-row since flex direction is row by default :
<div class=" bg-white mt-5 rounded-tr-md rounded-tl-md">
<!-- Filter menus -->
<div class="flex items-center">
<div
v-for="filter in filterTypes"
:key="filter.type"
class=" px-5 py-4"
>
<div class="">{{ filter.type }}</div>
</div>
</div>
<!-- Transactions According to Pages-->
<div></div>
</div>
Related
<div className="carousel w-full">
<div id="slide1" className="carousel-item relative w-full">
<img src="/images/stock/photo-1625726411847-8cbb60cc71e6.jpg" className="w-full" />
<div className="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
❮
❯
</div>
</div>
<div id="slide2" className="carousel-item relative w-full">
<img src="/images/stock/photo-1609621838510-5ad474b7d25d.jpg" className="w-full" />
<div className="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
❮
❯
</div>
</div>
<div id="slide3" className="carousel-item relative w-full">
<img src="/images/stock/photo-1414694762283-acccc27bca85.jpg" className="w-full" />
<div className="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
❮
❯
</div>
</div>
<div id="slide4" className="carousel-item relative w-full">
<img src="/images/stock/photo-1665553365602-b2fb8e5d1707.jpg" className="w-full" />
<div className="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
❮
❯
</div>
</div>
</div>
I want to know that is it possibe to do that.I tried a lot to find the solution, but I couldn't. when i look for solution statement in google there is no website to showcase my problem.If anyone know about it please help me to reach out the problem and give a chance to make a better ui .
I have a very simple vue 3 project. In created a Layout component that has the navigation links which looks like this
<script setup>
import { useRouter } from "vue-router";
</script>
<template>
<div>
<div class="hidden md:flex md:w-64 md:flex-col md:fixed md:inset-y-0">
<div
class="flex-1 flex flex-col min-h-0 border-r border-gray-200 bg-white"
>
<div class="flex-1 flex flex-col pt-5 pb-4 overflow-y-auto">
<div class="flex items-center flex-shrink-0 px-4">
<h1 class="text-3xl font-extrabold text-gray-900">MiniSend</h1>
</div>
<nav class="mt-5 flex-1 px-4 bg-white space-y-2">
<ul>
<li class="mb-4">
<RouterLink to="/dashboard" class="text-gray-700">
Dashboard</RouterLink
>
</li>
<li class="mb-4">
<RouterLink to="/settings" class="text-gray-700">
Settings</RouterLink
>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md:pl-64 flex flex-col flex-1">
<main class="flex-1">
<div class="py-6">
<div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
<h1 class="text-2xl font-semibold text-gray-900">
<slot name="pageTitle"></slot>
</h1>
</div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
<div class="py-4">
<slot></slot>
</div>
</div>
</div>
</main>
</div>
</div>
</template>
In my Dashboard view I imported the Layout component as seen below
<script setup>
import Layout from "../components/Layout.vue";
</script>
<template>
<Layout>
// ...content
</Layout>
</template>
When the Dashboard view is served, I can see the links but I cannot click the links. I copied the same link code into the Dashboard view file and I was able to click and get routed to the right page.
Why are the links not working inside the component but work inside the view?
I have this css code in my vue 3 component template
<div class="row mt-5 pt-5 m-0" id="carouselRow">
<!-- <div class="col-sm-12 col-md-12 col-lg-12 p-md-0"> -->
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="true">
<!-- <div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
</div> -->
<div class="carousel-inner">
<div class="row m-0" v-for="( doctor, i ) in featuredDoctors.slice(0, 10)" :key="i">
<div class="carousel-item" :class="i === 0 ? 'active':''" id="doctorCard" >
<div class="col-md-4 col-lg-4">
<div class="card">
<img :src="doctor.propicUrl" class="img-fluid" width="150" alt="">
<div class="card-body">
<h5>{{ doctor.name }} {{ doctor.surname }}</h5>
<p>{{ doctor.category }}</p>
</div>
</div>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<!-- </div> -->
</div>
I want to create a simple card carousel but at the moment I'm unable to use the right markup and I will see only one card in a crappy way, but on the dom the loop has rendered all the cards I want display.
How I can make a v-for loop that works fine and will render 3 bootstrap 5.2 cards for each carousel item into the array that will be looped?
I think you placed the v-for on the wrong item.
Vue is rendering now rendering this several times:
<div class="row m-0" v-for="( doctor, i ) in featuredDoctors.slice(0, 10)" :key="i">
<div class="carousel-item" :class="i === 0 ? 'active':''" id="doctorCard" >
<div class="col-md-4 col-lg-4">
<div class="card">
<img :src="doctor.propicUrl" class="img-fluid" width="150" alt="">
<div class="card-body">
<h5>{{ doctor.name }} {{ doctor.surname }}</h5>
<p>{{ doctor.category }}</p>
</div>
</div>
</div>
</div>
</div>
But you only need this:
<div class="carousel-item" :class="i === 0 ? 'active':''" id="doctorCard" >
<div class="col-md-4 col-lg-4">
<div class="card">
<img :src="doctor.propicUrl" class="img-fluid" width="150" alt="">
<div class="card-body">
<h5>{{ doctor.name }} {{ doctor.surname }}</h5>
<p>{{ doctor.category }}</p>
</div>
</div>
</div>
</div>
Try it with this:
<div class="carousel-item" :class="i === 0 ? 'active':''" id="doctorCard" v-for="( doctor, i ) in featuredDoctors.slice(0, 10)" :key="i">
I can't seem to find a working way for vertically & horizontally centering a div when using tailwindcss.
This is my current code that doesn't particularly works :
<div class="absolute flex items-center justify-center">
<Contact />
</div>
If you have a header and you want to ignore the header and center the content the code goes like:
<div>
<div className="flex h-screen flex-col bg-gray-100">
<header className="text-white text-center fixed top-0 left-0 right-0 bg-blue-600">
Header
</header>
<main className=" flex flex-1 justify-center items-center">
<div className="shadow bg-white rounded-md w-full text-center">
Content
</div>
</main>
</div>
</div>
Try with this example
something like <div class="grid place-items-center h-screen">
I'm new to VueJS, i have different pages which i organized in 'components'. Now, different pages have different layouts, for example, some pages will not include the header and the footer (which are also individual components).
This is the code for a component that is supposed to include the header
<template>
<Header />
<div class="container main-content">
<div class="row">
<div class="col-lg-2"></div>
<div class="col-lg-8">
<h3 style="font-weight: bold;color: #000;">What will you like to do?</h3>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-6 dash-menu-item">
<div class="item-body">
<router-link to="/dashboards" class="">
<i class="fa fa-user fa-4x"></i>
<p>View Dashboards</p>
</router-link>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-6 dash-menu-item">
<div class="item-body">
<router-link to="/home" class="">
<i class="fa fa-cogs fa-4x"></i>
<p>Manage Settings</p>
</router-link>
</div>
</div>
</div>
<div class="col-lg-2"></div>
</div>
</div>
</template>
<script>
import Header from './Header.vue'
export default{
name: 'Loyalty',
components:{
'Header': Header
}
}
</script>
And this is my Header.vue
<template>
<div>
<div class="head">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<span class="pull-left" style="padding-left: 10px;">
<router-link to="/home" class="header-text page-link"><span class="fa fa-arrow-left"></span> Home</router-link>
</span>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 custom-hidden-sm">
<span class="pull-right" style="padding-right: 10px;">
<span class="header-text">Waje Loyalty</span>
</span>
</div>
</div>
</div>
</div>
</template>
<script>
export default{
name: 'Header',
data(){
return{
page_name: this.$router.currentRoute.name
}
}
}
</script>
When i compile, i get the error:
- Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.
How can i solve this?
The issue is caused by the two root elements in your Loyalty.vue template: <Header /> and <div class="container main-content">.
VueJS component templates can contain one and only one root node.
To solve this, wrap the content of your Loyalty.vue template with a root div.
<template>
<!-- root div -->
<div>
<Header />
<div class="container main-content">
<div class="row">
<div class="col-lg-2"></div>
<div class="col-lg-8">
<h3 style="font-weight: bold;color: #000;">What will you like to do?</h3>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-6 dash-menu-item">
<div class="item-body">
<router-link to="/dashboards" class="">
<i class="fa fa-user fa-4x"></i>
<p>View Dashboards</p>
</router-link>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-6 dash-menu-item">
<div class="item-body">
<router-link to="/home" class="">
<i class="fa fa-cogs fa-4x"></i>
<p>Manage Settings</p>
</router-link>
</div>
</div>
</div>
<div class="col-lg-2"></div>
</div>
</div>
</div>
</template>