Shift + Tab
import { Kbd } from "@chakra-ui/react"
const Demo = () => {
return <Kbd>Shift + Tab</Kbd>
}
用法
import { Kbd } from "@chakra-ui/react"<Kbd>F12</Kbd>示例
组合
渲染 Kbd 以展示按键组合
ctrl+shift+del
import { HStack, Kbd } from "@chakra-ui/react"
const Demo = () => {
return (
<HStack gap="1">
<Kbd>ctrl</Kbd>+<Kbd>shift</Kbd>+<Kbd>del</Kbd>
</HStack>
)
}
功能键
这是使用 Kbd 展示功能键的示例
⌘⌥⇧⌃
import { HStack, Kbd } from "@chakra-ui/react"
const Demo = () => {
return (
<HStack>
<Kbd>⌘</Kbd>
<Kbd>⌥</Kbd>
<Kbd>⇧</Kbd>
<Kbd>⌃</Kbd>
</HStack>
)
}
变体
使用 variant 属性更改 Kbd 组件的外观
Shift + TabShift + TabShift + TabShift + Tab
import { HStack, Kbd } from "@chakra-ui/react"
const Demo = () => {
return (
<HStack gap="4">
<Kbd variant="raised">Shift + Tab</Kbd>
<Kbd variant="outline">Shift + Tab</Kbd>
<Kbd variant="subtle">Shift + Tab</Kbd>
<Kbd variant="plain">Shift + Tab</Kbd>
</HStack>
)
}
尺寸
使用 size 属性更改 Kbd 组件的尺寸
Shift + TabShift + TabShift + Tab
import { HStack, Kbd } from "@chakra-ui/react"
const Demo = () => {
return (
<HStack gap="4">
<Kbd size="sm">Shift + Tab</Kbd>
<Kbd size="md">Shift + Tab</Kbd>
<Kbd size="lg">Shift + Tab</Kbd>
</HStack>
)
}
文本中
在文本中使用 Kbd 高亮按键组合
按 F12 打开开发者工具
import { Kbd, Text } from "@chakra-ui/react"
const Demo = () => {
return (
<Text>
Press <Kbd>F12</Kbd> to open DevTools
</Text>
)
}
属性
| 属性 | 默认值 | 类型 |
|---|---|---|
colorPalette | 'gray' | 'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink'组件的颜色调色板 |
variant | 'raised' | 'raised' | 'outline' | 'subtle' | 'plain'组件的变体 |
size | 'md' | 'sm' | 'md' | 'lg'组件的尺寸 |