NUI-Widgets documentation has moved to Storybook hosted on Github Pages.

CardCreate

import CardCreate from '@concur/nui-widgets/lib/Cards/CardCreate';

A CardCreate component is a card that allows the user to create a new object (e.g. expense report) that will end up becoming a new Card in that CardDeck. There should only be one CardCreate component in a card deck. Sizing of cards is controlled by the CardDeck.

Example

The card must contain a title and can optionally accept additional content as children.

<CardDeck>
    <CardCreate onClick={() => {}} title='Create New Card' />
    <Card onClick={() => {}}>Card 1</Card>
</CardDeck>

<CardDeck>
    <CardCreate onClick={() => {}} title='Create New Card'>
        Only do this if you are ready to create a new card.
    </CardCreate>
    <Card onClick={() => {}}>Card 1</Card>
</CardDeck>

Usage

Properties

Property Type Default Description
title String Required The main action text of the card (shown in the larger color-coded text).
children Node   Additional content to display on the card. This will be shown below the title text. CAUTION: Since the card is a button itself, make sure any additional content does not use any clickable, actionable elements.
className String   Custom classes to add to the card’s <li> tag.
footer Node   Renderable content for the footer of the card. If not provided, no footer will appear.
header Node   Renderable content for the header of the card. If not provided, no header will appear.
tabIndex String   Set the tab index of the <a> tag.
type String   Type/style of card header (if provided). Options are 'success', 'danger', 'info'.

Callbacks

Property Parameters Description
onClick event Required. Callback function when the card is clicked.