import { Dropdown, Button } from 'antd';const { Menu } = Dropdown;function handleClick(e) {console.log('Dropdown clicked:', e);}const App = () => (<Dropdown onClick={handleClick}><a>Click me</a><Menu><Menu.Item>Option 1</Menu.Item><Menu.Item>Option 2</Menu.Item><Menu.I...
Dropdown 下的 Menu 默认不可选中。如果需要菜单可选中,可以指定 <Menu selectable>. 事件 # 事件名称说明回调参数版本 openChange 菜单显示状态改变时调用,参数为 visible。点击菜单按钮导致的消失不会触发 function(open) 4.0 Dropdown.Button # 参数说明类型默认值版本 disabled 菜单是否禁用 boolean - icon ...
Dropdown.Button 属性与 Dropdown 的相同。还包含以下属性: 参数说明类型默认值版本 buttonsRender自定义左右两个按钮(buttons: ReactNode[]) => ReactNode[]- loading设置按钮载入状态,和Button一致boolean | { delay: number, icon: ReactNode }falseicon: 5.23.0 ...
按钮组合使用时,推荐使用1个主操作 + n 个次操作,3个以上操作时把更多操作放到Dropdown.Button中组合使用。 幽灵按钮 幽灵按钮将其他按钮的内容反色,背景变为透明,常用在有色背景上。 API# 通过设置 Button 的属性来产生不同的按钮样式,推荐顺序为:type->shape->size->loading->disabled ...
按钮组合使用时,推荐使用 1 个主操作 + n 个次操作,3 个以上操作时把更多操作放到 Dropdown.Button 中组合使用。 PrimaryDefaultDashedTextLink 危险按钮 在4.0 之后,危险成为一种按钮属性而不是按钮类型。 Gradient Button Button 渐变按钮 自定义为渐变背景按钮。 API 通用属性参考:通用属性 通过设置 Button 的属...
Reproduction link Steps to reproduce const CommonDropDown: React.FC = (props) => { const menu: MenuItemType[] = props.menu.map( item => ({ key: item.key, icon: item.icon , disabled: item.disabled, danger: item.danger, label: <div style={...
3. Button 按钮 (1)按钮有四种类型:主按钮、次按钮、虚线按钮、危险按钮和链接按钮,主按钮在同一个操作区域最多出现一次。虚线按钮和危险按钮无需使用。 (2)使用1个主操作 + n 个次操作,3个以上操作时把更多操作放到Dropdown.Button 中组合使用。 (3)添加 loading 属性即可让按钮处于加载状态。 (4)在一些需...
Dropdown.Button # PropertyDescriptionTypeDefaultVersion disabled whether the dropdown menu is disabled boolean - icon Icon (appears on the right) vNode | slot - 1.5.0 loading Set the loading status of button boolean | { delay: number } false 3.0 overlay(v-slot) the dropdown menu Menu ...
组件总览 ant-design-vue为 Web 应用提供了丰富的基础 UI 组件,我们还将持续探索企业级应用的最佳 UI 实践。 通用 3 Icon 图标 Typography 排版 布局 4 Divider 分割线 Grid 栅格 Layout 布局 Space 间距
Dropdown.Button:多个按钮组合。 <Buttonsize={size}></Button>seiz:large,“空”,small 大中小<Buttonloading={true}>Loading</Button>loading:true,false<Buttonghost={true}>Loading</Button>ghost:true,false<Buttonblock={true}>Loading</Button>block:true,false<Buttondisabled={true}>Loading</Button>disabl...