Mirroring/merakiui
1
0
Fork 0
mirror of https://github.com/bakateam/merakiui.git synced 2025-12-09 07:03:24 +00:00
Code Issues Projects Releases Wiki Activity

Rename @harsh07bharvada CARD and edit some classes

Browse Source
This commit is contained in:
khatabwedaa
2020-05-10 13:11:00 +02:00
parent 8754ca30c5
commit bb6aec44e5
4 changed files with 29 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/Models/data.js
View File

@@ -15,8 +15,8 @@ export default [
components: [ components: [
{ name: 'Article card' }, { name: 'Article card' },
{ name: 'Article card with image' }, { name: 'Article card with image' },
{ name: 'Simple product card' },
{ name: 'Product card' }, { name: 'Product card' },
{ name: 'Product card with price' },
{ name: 'Product card with evaluation' }, { name: 'Product card with evaluation' },
{ name: 'Testimonial card' }, { name: 'Testimonial card' },
{ name: 'User card' }, { name: 'User card' },

4
src/components/Master.vue
View File

@@ -51,8 +51,8 @@
// Cards // Cards
import ArticleCard from "./UI/Cards/ArticleCard"; import ArticleCard from "./UI/Cards/ArticleCard";
import ArticleCardWithImage from "./UI/Cards/ArticleCardWithImage"; import ArticleCardWithImage from "./UI/Cards/ArticleCardWithImage";
import SimpleProductCard from "./UI/Cards/SimpleProductCard";
import ProductCard from "./UI/Cards/ProductCard"; import ProductCard from "./UI/Cards/ProductCard";
import ProductCardWithPrice from "./UI/Cards/ProductCardWithPrice";
import ProductCardWithEvaluation from "./UI/Cards/ProductCardWithEvaluation"; import ProductCardWithEvaluation from "./UI/Cards/ProductCardWithEvaluation";
import TestimonialCard from "./UI/Cards/TestimonialCard"; import TestimonialCard from "./UI/Cards/TestimonialCard";
import UserCard from "./UI/Cards/UserCard"; import UserCard from "./UI/Cards/UserCard";
@@ -90,8 +90,8 @@
ArticleCard, ArticleCard,
ArticleCardWithImage, ArticleCardWithImage,
SimpleProductCard,
ProductCard, ProductCard,
ProductCardWithPrice,
ProductCardWithEvaluation, ProductCardWithEvaluation,
TestimonialCard, TestimonialCard,
UserCard, UserCard,

29
src/components/UI/Cards/ProductCardWithPrice.vue
View File

@@ -1,29 +0,0 @@
<template>
<div :id="name | toId">
<div class="flex flex-col max-w-sm mx-auto h-full justify-center items-center">
<div style="background-image: url(https://images.unsplash.com/photo-1539185441755-769473a23570?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1951&q=80"
class="flex bg-gray-300 h-64 w-full rounded-lg shadow-md bg-cover bg-top">
</div>
<div class="flex flex-col h-20 w-48 md:w-64 bg-white -mt-10 text-sm shadow-lg rounded-lg justify-center items-center">
<div class="flex w-full h-10 justify-center items-center font-bold uppercase tracking-wide">Nike Revolt</div>
<div class="flex items-center justify-between w-full h-10 px-3 bg-gray-200 rounded-b-lg">
<h1 class="text-gray-800 font-bold ">$129</h1>
<button class=" bg-gray-700 text-xs text-white px-2 py-1 font-semibold rounded ">Add to cart</button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
name: 'Product Card with Price',
}
}
}
</script>

26
src/components/UI/Cards/SimpleProductCard.vue Normal file
View File

@@ -0,0 +1,26 @@
<template>
<div :id="name | toId">
<div class="flex flex-col justify-center items-center max-w-sm mx-auto">
<div style="background-image: url(https://images.unsplash.com/photo-1539185441755-769473a23570?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1951&q=80"
class="bg-gray-300 h-64 w-full rounded-lg shadow-md bg-cover bg-center">
</div>
<div class="w-56 md:w-64 bg-white -mt-10 shadow-lg rounded-lg overflow-hidden">
<div class="py-2 text-center font-bold uppercase tracking-wide text-gray-800">Nike Revolt</div>
<div class="flex items-center justify-between py-2 px-3 bg-gray-200">
<h1 class="text-gray-800 font-bold ">$129</h1>
<button class=" bg-gray-800 text-xs text-white px-2 py-1 font-semibold rounded uppercase hover:bg-gray-700">Add to cart</button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
name: 'Simple Product Card',
}
}
}
</script>