Card 卡片组件

渲染出一个卡片

安装

npm install @qnpm/q-design-card --save --registry=http://npmrepo.corp.qunar.com

使用说明

显示代码

import { Card } from '@qnpm/q-design-card';

const Content = () => (
  <View
    style={{ width: 100, height: 100}}
  />
);

  <View style={styles.container}>
      <Card><Content /></Card>
      <Card
        backgroundColor={'red'}
      >
          <Content />
      </Card>
      <Card opacity={0.5}>
          <Content />
      </Card>
      <Card
        size={{width: 100, height: 100}}
      >
          <Content />
      </Card>
  </View>

显示代码

import { Card } from '@qnpm/q-design-card';

const Content = () => (
  <View
    style={{ width: 100, height: 100}}
  />
);

  <View style={styles.container}>
      <Card shadow={"shadow3"} ><Content /></Card>
  </View>

显示代码

import { Card } from '@qnpm/q-design-card';

const Content = () => (
  <View
    style={{ width: 100, height: 100}}
  />
);

  <View style={styles.container}>
      <Card radius={'none'}><Content /></Card>
      <TextSplit text={'none'} />
      <Card radius={'small'}><Content /></Card>
      <TextSplit text={'small'} />
      <Card radius={'medium'}><Content /></Card>
      <TextSplit text={'medium'} />
      <Card radius={'large'}><Content /></Card>
      <TextSplit text={'large'} />
      <Card radius={'large_x'}><Content /></Card>
      <TextSplit text={'large_x'} />
      <Card radius={'circle'}><Content /></Card>
      <TextSplit text={'circle'} />
  </View>

属性说明

属性名 类型 默认值 是否必须 说明
backgroundColor string - false Card 背景
needScale bool false 否 是否支持缩放
opacity number 1 false Card 透明度， 值的范围0～1
radius none|small|medium
large|large_x|circle		 small false Card 的圆角
shadow 参考Shadow组件 - false Card 阴影
size object - false 配置如{width:0, height:0}(目前不支持百分比)， 不设置，能自适应

radius 说明

radius（卡片的圆角）共有以下几种类型：

'none'  // 无圆角，  borderRadius: 0
'small' // 小（默认）  borderRadius: 4
'medium' // 中  borderRadius: 8
'large' // 大  borderRadius: 12
'large_x' // 超大  borderRadius: 16
'circle' // 圆形，  borderRadius: Math.min(size.width, size.height) * 0.5
Calendar
CheckBox