Press UI

# Card

Used to display some information.

# Code Demo

# Basic usage

<press-card>
   <span class="press-body">
     Code is written to be read by humans, with the added bonus of being able to run on a machine
   </span>
</press-card>

# Title

<press-card
   title="title"
   extra="description"
>
   <span class="press-body">
     Code is written to be read by humans, with the added bonus of being able to run on a machine
   </span>
</press-card>

# Title

<press-card
   title="title"
   extra="description"
>
   <span class="press-body">
     Code is written to be read by humans, with the added bonus of being able to run on a machine
   </span>
</press-card>

# Subtitle

  <press-card
   title="title"
   sub-title="subtitle"
   extra="description"
   :thumbnail="avatar"
>
   <span class="press-body">
     Code is written to be read by humans, with the added bonus of being able to run on a machine
   </span>
</press-card>

export default {
   data() {
     return {
       avatar: 'https://mike-1255355338.cos.ap-guangzhou.myqcloud.com/press%2Fimg%2Fpress-ui-avatar.png',
     }
   }
}

# no margins

<press-card
   title="title"
   sub-title="subtitle"
   extra="description"
   :is-full="true"
   :thumbnail="avatar"
>
   <span class="press-body">
     Code is written to be read by humans, with the added bonus of being able to run on a machine
   </span>
</press-card>

# cover picture

<press-card
   :cover="cover"
   @click="onClick"
>
   <span class="press-body">
     Code is written to be read by humans, with the added bonus of being able to run on a machine
   </span>
</press-card>

export default {
   data() {
     return {
       cover: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg',
     }
   }
}

# Action Bar

<press-card>
   <span class="press-body">
     Code is written to be read by humans, with the added bonus of being able to run on a machine
   </span>
   <div
     slot="actions"
     class="card-actions"
   >
     <div
       class="card-actions-item"
       @click="actionsClick('Share')"
     >
       <uni-icons
         type="redo"
         size="18"
         color="#999"
       />
       <span class="card-actions-item-text">
         share
       </span>
     </div>
     <div
       class="card-actions-item"
       @click="actionsClick('Like')"
     >
       <uni-icons
         type="heart"
         size="18"
         color="#999"
       />
       <span class="card-actions-item-text">
         like
       </span>
     </div>
     <div
       class="card-actions-item"
       @click="actionsClick('Comment')"
     >
       <uni-icons
         type="chatbubble"
         size="18"
         color="#999"
       />
       <span class="card-actions-item-text">
         Comment
       </span>
     </div>
   </div>
</press-card>

export default {
   methods: {
     actionsClick(text) {
       uni.showToast({
         title: text,
         icon: 'none',
       });
     },
   }
}

# Custom title

<press-card
   padding="10px 0"
>
   <template #title>
     <press-cell
       title="title"
       clickable
       @click="checked = !checked"
     >
       <press-switch
         slot="right-icon"
         size="22px"
         :checked="checked"
       />
     </press-cell>
   </template>
   <span class="press-body uni-mt-5">
     Code is written to be read by humans, with the added bonus of being able to run on a machine
   </span>
</press-card>

export default {
   data() {
     return {
       checked: true,
     }
   }
}

# API

# Props

Parameter Description Type Default
title title string -
subTitle subtitle string -
extra Description on the right side string -
thumbnail Thumbnail to the left of the title string -
cover cover image string -
isFull Whether to clear the column, when it is true, the padding value will be removed boolean false
isShadow Whether to enable shadow boolean true
shadow card shadow, must conform to css value string 0px 0px 3px 1px rgba(0, 0, 0, 0.08)
border Whether to show a border boolean true
margin card margin string 15px
spacing card padding string 0 10px
padding card content padding string 10px

# Events

Event Description Callback Parameters
click Click Card to trigger event cover | title | extra | content | actions

# Slot

Name Description
- Cover Image
cover card head
title action bar
横屏

← Circle →