Shift + Tab
import { Kbd } from "@chakra-ui/react"
const Demo = () => {
return <Kbd>Shift + Tab</Kbd>
}
用法
¥Usage
import { Kbd } from "@chakra-ui/react"<Kbd>F12</Kbd>示例
¥Examples
组合
¥Combinations
渲染 Kbd 以展示组合键。
¥Render Kbd to showcase key combinations
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>
)
}
功能键
¥Function Keys
以下是使用 Kbd 展示功能键的示例。
¥Here's an example of using Kbd to showcase function keys
⌘⌥⇧⌃
import { HStack, Kbd } from "@chakra-ui/react"
const Demo = () => {
return (
<HStack>
<Kbd>⌘</Kbd>
<Kbd>⌥</Kbd>
<Kbd>⇧</Kbd>
<Kbd>⌃</Kbd>
</HStack>
)
}
变量
¥Variants
使用 variant 属性更改 Kbd 组件的外观
¥Use the variant prop to change the appearance of the Kbd component
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>
)
}
尺寸
¥Sizes
使用 size 属性更改 Kbd 组件的大小
¥Use the size prop to change the size of the Kbd component
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>
)
}
文本内
¥Within Text
在文本中使用 Kbd 高亮组合键
¥Use Kbd within text to highlight key combinations
Press F12 to open DevTools
import { Kbd, Text } from "@chakra-ui/react"
const Demo = () => {
return (
<Text>
Press <Kbd>F12</Kbd> to open DevTools
</Text>
)
}
属性
¥Props
| Prop | Default | Type |
|---|---|---|
colorPalette | 'gray' | 'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink'The color palette of the component |
variant | 'raised' | 'raised' | 'outline' | 'subtle' | 'plain'The variant of the component |
size | 'md' | 'sm' | 'md' | 'lg'The size of the component |
as | React.ElementTypeThe underlying element to render. | |
asChild | booleanUse the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |