feat(ui/card): add style provider for card

varletjs · Jun 24, 2021 · a47e7c9 · a47e7c9
1 parent c0f159b
commit a47e7c9
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 22 deletions.
diff --git a/packages/varlet-ui/src/card/card.less b/packages/varlet-ui/src/card/card.less
@@ -22,41 +22,64 @@
 
 @card-line-height: 22px;
 
+:root {
+  --card-padding: @card-padding;
+  --card-border-radius: @card-border-radius;
+  --card-image-width: @card-image-width;
+  --card-image-height: @card-image-height;
+  --card-title-color: @card-title-color;
+  --card-title-font-size: @card-title-font-size;
+  --card-title-padding: @card-title-padding;
+  --card-title-margin: @card-title-margin;
+  --card-subtitle-color: @card-subtitle-color;
+  --card-subtitle-font-size: @card-subtitle-font-size;
+  --card-subtitle-padding: @card-subtitle-padding;
+  --card-subtitle-margin: @card-subtitle-margin;
+  --card-description-color: @card-description-color;
+  --card-description-font-size: @card-description-font-size;
+  --card-description-margin: @card-description-margin;
+  --card-description-padding: @card-description-padding;
+  --card-footer-padding: @card-footer-padding;
+  --card-footer-margin: @card-footer-margin;
+
+  --card-line-height: @card-line-height;
+}
+
 .var-card {
-  border-radius: @card-border-radius;
+  border-radius: var(--card-border-radius);
   overflow: hidden;
-  padding: @card-padding;
-  line-height: @card-line-height;
+  padding: var(--card-padding);
+  line-height: var(--card-line-height);
 
   &__image {
-    width: @card-image-width;
-    height: @card-image-height;
+    width: var(--card-image-width);
+    height: var(--card-image-height);
     display: block;
   }
 
   &__title {
-    font-size: @card-title-font-size;
-    padding: @card-title-padding;
-    margin: @card-title-margin;
-    color: @card-title-color;
+    font-size: var(--card-title-font-size);
+    padding: var(--card-title-padding);
+    margin: var(--card-title-margin);
+    color: var(--card-title-color);
   }
 
   &__subtitle {
-    font-size: @card-subtitle-font-size;
-    color: @card-subtitle-color;
-    padding: @card-subtitle-padding;
-    margin: @card-subtitle-margin;
+    font-size: var(--card-subtitle-font-size);
+    color: var(--card-subtitle-color);
+    padding: var(--card-subtitle-padding);
+    margin: var(--card-subtitle-margin);
   }
 
   &__description {
-    font-size: @card-description-font-size;
-    color: @card-description-color;
-    margin: @card-description-margin;
-    padding: @card-description-padding;
+    font-size: var(--card-description-font-size);
+    color: var(--card-description-color);
+    margin: var(--card-description-margin);
+    padding: var(--card-description-padding);
   }
 
   &__footer {
-    padding: @card-footer-padding;
-    margin: @card-footer-margin;
+    padding: var(--card-footer-padding);
+    margin: var(--card-footer-margin);
   }
 }
diff --git a/packages/varlet-ui/src/card/docs/en-US.md b/packages/varlet-ui/src/card/docs/en-US.md
@@ -53,7 +53,12 @@ createApp().use(Card)
 ### Ripple Effect
 
 ```html
-<var-card title="Little Prince" ripple />
+<var-card
+  title="Little Prince"
+  subtitle="where little prince from"
+  description="It took me a long time to learn where he came from. The little prince, whoasked me so many questions, never seemed to hear the ones I asked him. Itwas from words dropped by chance that, little by little, everything wasrevealed to me."
+  ripple
+/>
 ```
 
 ## API

diff --git a/packages/varlet-ui/src/style-provider/example/index.vue b/packages/varlet-ui/src/style-provider/example/index.vue
@@ -1,35 +1,59 @@
 <template>
+  <app-type>单元格样式定制</app-type>
   <var-style-provider :style-vars="styles">
     <var-cell border> test </var-cell>
     <var-cell border> test </var-cell>
   </var-style-provider>
+  <app-type>卡片样式定制</app-type>
+  <var-style-provider :style-vars="cardStyles">
+    <var-card
+      title="风景"
+      subtitle="公园里的风景"
+      description="公园的树林也很美。在公园的小山上栽满了树木，梧桐树的叶子随着时间的流逝慢慢变黄，纷纷飘落；枫树的叶子却变红了，公园笼罩在片片红云中，也使秋天增添了一分热情。而柏树的叶子仍是那么青翠欲滴，令你陶醉极了。山上有一群孩子在快乐的嬉戏，不时传来阵阵欢笑声，瞧，他们玩得多起劲呀，给树林增添了活力。"
+      src="https://varlet.gitee.io/varlet-ui/cat.jpg"
+    />
+  </var-style-provider>
 </template>
 
 <script>
+import AppType from '@varlet/cli/site/mobile/components/AppType'
 import { onMounted, ref } from 'vue'
 import Cell from '../../cell'
+import Card from '../../card'
 import StyleProvider from '../index'
 
 export default {
   name: 'StyleProviderExample',
   components: {
     [Cell.name]: Cell,
     [StyleProvider.name]: StyleProvider,
+    [Card.name]: Card,
+    AppType,
   },
   setup() {
     const styles = ref({})
+    const cardStyles = ref({})
 
     onMounted(() => {
       setTimeout(() => {
         styles.value = {
           cellFontSize: '30px',
-          cellBorderColor: 'red'
+          cellBorderColor: 'red',
+        }
+      }, 1500)
+      setTimeout(() => {
+        cardStyles.value = {
+          cardTitleColor: 'blue',
+          cardSubtitleColor: 'black',
+          cardDescriptionFontSize: '16px',
+          cardImageHeight: '250px',
         }
       }, 1500)
     })
 
     return {
-      styles
+      styles,
+      cardStyles,
     }
   },
 }