@specialdoom/solid-rev-kit
Version:
RevKit UI implementation for SolidJS
72 lines (60 loc) • 3.15 kB
Markdown
```jsx
import { Card } from '@specialdoom/solid-rev-kit';
const Container = () => (
<Card.Generic
imageSrc="image_source"
title="Card title"
actions={[<Button variant="ghost">Action</Button>]}
>
Supporting description for the card goes here like a breeze.
</Card.Generic>
);
```
| Property | Description | Type | Default |
| -------- | ----------------------------------------------------- | ------------ | --------- |
| title | Title of card component | string | undefined |
| imageSrc | Src of card image. Defines whether the card has image | string | undefined |
| actions | Array of actions for callout component | JSXElement[] | undefined |
```jsx
import { Card } from '@specialdoom/solid-rev-kit';
const Container = () => (
<>
<Card.Fill background="#0880AE" label="Label" title="Card title" small>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</Card.Fill>
<Card.Fill
background="image_source_url"
label="Label"
title="Card title"
actions={[
{
label: 'Share',
onClick: () => alert('share'),
icon: <Icons.Share />
},
{ label: 'Save', onClick: () => alert('save') }
]}
small
>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</Card.Fill>
<Card.Fill background="#0880AE" label="Label" title="Card title" small>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</Card.Fill>
</>
);
```
| Property | Description | Type | Default |
| ---------- | ------------------------------ | --------------------------------------------------------------------------------------------------------------- | --------- |
| background | Color or url for background | string |
| color | Text and icon color | string |
| label | Label of fill card component | string | undefined |
| title | Title of fill card component | string | undefined |
| small | Whether the component is small | boolean | false |
| actions | Actions of fill card component | [CardAction](https://github.com/specialdoom/solid-rev-kit/blob/main/src/components/card/FillCard.tsx#L10-L13)[] | [] |