级别图 
说明
Level Chart 组件用于显示不同关卡的"语言技巧",其功能就像制表符一样,因为您可以通过点击图表中的条来导航不同关卡,该条显示了活动时关卡的简短描述.
还有一个选项设置锁定关卡, 这将禁用点击其它关卡并锁定到一个关卡上 .
安装
yarn add @berlitz/level-chart
道具
| 参数 | 类型 | 需求 | 默认 |
|---|---|---|---|
| 数据 | 对象数组 | 真实 | 纳 |
| 锁定级别 | 编号 | 虚假 | 无效 |
| 图表帮助标签 | 字符串 | 虚假 | 请选择一个级别以获取更多信息 |
示例
[
{ "content": "example paragraph 1", "groupName": "newbie", "level": 1 },
{ "content": "example paragraph 2", "groupName": "alright", "level": 2 },
{ "content": "example paragraph 3", "groupName": "ayyyyy", "level": 3 },
{ "content": "example paragraph 4", "groupName": "awh yeah", "level": 4 }
]
使用量
import React from 'react'
import { H2 } from '@berlitz/globals/lib/components/typography'
import Spacer from '@berlitz/spacer'
import LevelChart from './src/LevelChartContainer'
const MyApp = () => (
<>
<H2>Proficiency Levels for All Languages</H2>
<Spacer size="sm" />
<LevelChart data={data} />
</>
)