Card

Card widget is a universal wrapper for displaying content in the form of cards with support for two modes: tab (tabs) and plain (plain).

Demo

Tab View Demo

Alex Johnson2h

This looks great! I really like the new design direction we're taking.

Sarah Chen1h

I agree! The color scheme works really well.

Mike Wilson45m

Should we consider accessibility implications?

Emma Davis4h

Could we explore some alternative layouts? I have a few ideas that might work better for mobile users.

David Kim6h

The performance improvements are impressive. Load times have decreased by 40%!

Lisa Park5h

That's amazing! What optimizations did you implement?

Cmd+Enter to send

Sarah Chen14:30

createdproject-001

Lisa Park09:30

updatedblog-post-002

Admin System04:45

updatednew-user-003

Project Manager23:30

updatedproject-task-004

File List

Project_Proposal.pdf

pdf

2.4 MB

Jan 15

Design_System.sketch

sketch

15.2 MB

Jan 14

Meeting_Recording.mp4

mp4

245 MB

Jan 13

Brand_Guidelines.docx

docx

1.8 MB

Jan 12

Assets.zip

zip

45.6 MB

Jan 11

Logo_Final.png

png

856 KB

Jan 10

Name	Іван Петренко
Email	ivan@example.com
Role	Administrator
Department	IT Department
Phone	+380 44 123 4567

Plain View Demo

Description

Name	Іван Петренко
Email	ivan@example.com
Role	Administrator
Department	IT Department
Phone	+380 44 123 4567

History

Sarah Chen14:30

createdproject-001

Lisa Park09:30

updatedblog-post-002

Admin System04:45

updatednew-user-003

Project Manager23:30

updatedproject-task-004

Alex Johnson2h

This looks great! I really like the new design direction we're taking.

Sarah Chen1h

I agree! The color scheme works really well.

Mike Wilson45m

Should we consider accessibility implications?

Emma Davis4h

Could we explore some alternative layouts? I have a few ideas that might work better for mobile users.

David Kim6h

The performance improvements are impressive. Load times have decreased by 40%!

Lisa Park5h

That's amazing! What optimizations did you implement?

Cmd+Enter to send

File List

Project_Proposal.pdf

pdf

2.4 MB

Jan 15

Design_System.sketch

sketch

15.2 MB

Jan 14

Meeting_Recording.mp4

mp4

245 MB

Jan 13

Brand_Guidelines.docx

docx

1.8 MB

Jan 12

Assets.zip

zip

45.6 MB

Jan 11

Logo_Final.png

png

856 KB

Jan 10

Usage

Basic usage

// Plain view
<Card :panels="panelsData" view="plain">
  <template #panel-0>
    <Widget />
  </template>
</Card>

// Tab view
<Card :data="tabsData" view="tab">
  <template #tab-0>
    <Widget />
  </template>
</Card>

TypeScript interfaces

interface ICard {
  panels?: ICardItem[];
  data?: any;
  view?: 'tab' | 'plain';
}

interface ICardItem {
  name?: string;
  label?: string;
  component?: string;
  slot?: string;
  col?: number;
  html?: string;
  title?: string;
  type?: string;
  count?: number;
}

Data structure

Card widget can work with two types of data:

1. Direct array of panels through the panels property
2. Complex structure through the data property with support for type: "tabs"

// Example of data structure
[
  {
    "type": "tabs",
    "col": 12,
    "items": [
      {
        "name": "general_info",
        "html": "HTML content",
        "title": "General information"
      },
      {
        "component": "vs-widget-gallery",
        "title": "Gallery"
      }
    ]
  }
]

Properties

Card

Property	Type	Default	Description
panels	ICardItem[]	[]	Array of panels to display
data	any	{}	Data for processing (supports structure with type: "tabs")
view	'tab' | 'plain'	'plain'	Display mode

CardItem

Property	Type	Default	Description
name	string	-	Unique name of the element
label	string	-	Label of the element
title	string	-	Title of the element
component	string	-	Name of the component for rendering
slot	string	-	Name of the slot
col	number	12	Number of columns (1-12)
html	string	-	HTML content for display

Key features

• Tab View: Displays content in tabs with the ability to switch
• Plain View: Displays content in a grid of panels
• HTML support: You can pass HTML content through the html property
• Components: Support for dynamic rendering of components
• Slots: Flexible system of slots for custom content
• Adaptability: Support for different column sizes (1-12)
• TypeScript: Full support for TypeScript with type checking