ForgeForge

Map

MapCard 世界地图卡片，高亮大洲 + 区域销量列表，用于 dashboard 的地理分布模块。

MapCard

内置 SVG 世界地图，3 种尺寸 × 3 种主色，支持自定义高亮大洲与区域列表。

Import

import { MapCard } from "@forge-ui/react";
import type { MapRegion } from "@forge-ui/react";

Usage

传入 regions 与 highlights 即可渲染。

Top RegionSales by region
United Kingdom340 Sales
$17,678
Spain100 Sales
$5,500
Indonesia50 Sales
$2,500
France147 Sales
$7,456
1<MapCard
2  variant="sm"
3  color="purple"
4  regions={regions}
5  highlights={["north-america", "oceania"]}
6  onMenuClick={() => {}}
7/>

Variants

sm / md 为竖向卡片，lg 为全宽地图 + 右上浮动搜索面板。

Top RegionSales by region
United Kingdom340 Sales
$17,678
Spain100 Sales
$5,500
Indonesia50 Sales
$2,500
France147 Sales
$7,456
Top RegionSales by region
United Kingdom340 Sales
$17,678
Spain100 Sales
$5,500
Indonesia50 Sales
$2,500
France147 Sales
$7,456
1<MapCard variant="sm" regions={regions} />
2<MapCard variant="md" regions={regions} />
3<MapCard variant="lg" regions={regions} className="w-full" />

Colors

3 种主色：purple（默认） / blue / black，影响高亮大洲的填充色。

Top RegionSales by region
United Kingdom340 Sales
$17,678
Spain100 Sales
$5,500
Indonesia50 Sales
$2,500
France147 Sales
$7,456
Top RegionSales by region
United Kingdom340 Sales
$17,678
Spain100 Sales
$5,500
Indonesia50 Sales
$2,500
France147 Sales
$7,456
Top RegionSales by region
United Kingdom340 Sales
$17,678
Spain100 Sales
$5,500
Indonesia50 Sales
$2,500
France147 Sales
$7,456
1<MapCard color="purple" regions={regions} highlights={["north-america", "oceania"]} />
2<MapCard color="blue"   regions={regions} highlights={["europe", "asia"]} />
3<MapCard color="black"  regions={regions} highlights={["africa", "south-america"]} />

Large variant

lg 适合主区域卡，地图铺满顶部，搜索 + 区域列表浮在右上角。

Top RegionSales by region
United Kingdom340 Sales
$17,678
Spain100 Sales
$5,500
Indonesia50 Sales
$2,500
France147 Sales
$7,456
1<MapCard variant="lg" regions={regions} className="w-full" />

Highlights

highlights 指定需着色的大洲，支持任意组合。

Top RegionSales by region
United Kingdom340 Sales
$17,678
Spain100 Sales
$5,500
Indonesia50 Sales
$2,500
France147 Sales
$7,456
1<MapCard
2  highlights={["north-america", "europe", "asia"]}
3  regions={regions}
4/>

API

AttributeTypeDefaultDescription
titlestring'Top Region'卡片标题。
subtitlestring'Sales by region'标题下一行描述。
color'purple' | 'blue' | 'black''purple'高亮大洲的填充色。
variant'sm' | 'md' | 'lg''sm'sm 紧凑卡（384px），md 中号卡（480px），lg 全宽地图 + 浮层。
regionsMapRegion[][]区域销量列表，包含 name / flag / salesLabel / value。
highlightsMapContinent[]['north-america', 'oceania']需要高亮的大洲，6 个可选：north-america / south-america / europe / africa / asia / oceania。
onMenuClick() => void—右上角 kebab 按钮点击回调，不传则不渲染按钮。
classNamestring''额外 className，透传到根容器。
看所有变体 →