@olenbetong/color-card
Card component with colored border
Last updated 8 months ago by bjornarvh .
MIT · Original npm · Tarball · package.json
$ cnpm install @olenbetong/color-card 
SYNC missed versions from official npm registry.

@olenbetong/color-card

Card component for React with varying colors.

Installation

NPM:

npm i @olenbetong/color-card
import { ColorCard, CardColumn, CardDetail, CardLabel } from '@olenbetong/color-card';

IIFE and ESM builds are available on unpkg.com. For IIFE, the components are available in the global ReactColorCard variable.

<script src="https://unpkg.com/@olenbetong/color-card@latest/dist/iife/color-card.min.js" type="text/javascript"></script>
<script type="text/javascript">
const { ColorCard, CardColumn, CardDetail, CardLabel } = ReactColorCard;
</script>
<script type="module">
import { ColorCard, CardColumn, CardDetail, CardLabel } from "https://unpkg.com/@olenbetong/color-card@latest/dist/esm/color-card.min.js";
</script>

Usage

Coloring

CSS nth-child selector is used to change the color, so cards need to be siblings for the coloring to work.

Components

All components will pass unused properties to the root element. Classes passed in className will be appended to the class list.

  • ColorCard - Root component. Takes an "as" property if you need to change the component type. Otherwise will be "a" if "href" is present, or "div" if not.
  • CardColumn - Takes a "minor" boolean property to indicate the size. Will be set as a flex container with column direction and justify content space-between.
  • CardDetail - Card detail. Label should be passed in the "label" property. "primary" boolean attribute can be set to true to increase font size and set value to bold.
  • CardLabel - Card label with colored bullet.

This example creates a basic card that will be created as a Link from @reach/router.

import React from 'react';
import { Link } from '@reach/router';
import { ColorCard, CardColumn, CardDetails, CardDetail, CardLabel } from '@olenbetong/color-card';

const MyCard = props => (
  <ColorCard as={Link} className='mb-2' to={`/manage-something/${props.id}`}>
    <CardColumn minor>
      <CardDetail primary>
        {props.Key}
      </CardDetail>
      <CardDetail label={formatDate(props.SomeDate, 'd. MMM, yy')}>
        {formatDate(props.SomeDate, 'HH:mm')}
      </CardDetail>
    </CardColumn>
    <CardColumn>
      <div className='mb-4'>
        <CardLabel>{Name}</CardLabel>
        <CardLabel>{Accounts}</CardLabel>
      </div>
      <div className='d-flex justify-content-start'>
        <CardDetail label={'Key number'}>{props.KeyNumber1}</CardDetail>
        <CardDetail label={'Other key number'}>{props.KeyNumber2}</CardDetail>
      </div>
    </CardColumn>
  </ColorCard>
);

Current Tags

  • 2.0.12                                ...           latest (8 months ago)

16 Versions

  • 2.0.12                                ...           8 months ago
  • 2.0.11                                ...           9 months ago
  • 2.0.10                                ...           a year ago
  • 2.0.9                                ...           a year ago
  • 2.0.8                                ...           a year ago
  • 2.0.7                                ...           a year ago
  • 2.0.6                                ...           a year ago
  • 2.0.5                                ...           a year ago
  • 2.0.4                                ...           2 years ago
  • 2.0.3                                ...           2 years ago
  • 2.0.1                                ...           2 years ago
  • 2.0.0                                ...           2 years ago
  • 1.0.1                                ...           2 years ago
  • 1.0.0                                ...           2 years ago
  • 1.0.0-rc.3                                ...           2 years ago
  • 1.0.0-rc.1                                ...           2 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 1
Last Day 0
Last Week 0
Last Month 2
Dependencies (2)
Dev Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |