mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-15 17:31:25 +08:00
feat: dropdown support arrow (#23869)
* feat: dropdown support arrow prop close #22758 * test: update snapshot * fix: fix dropdown cls names * test: update snapshot * test: update snapshot * doc: update demo * test: update demo snapshot * demo * fix: snapshot
This commit is contained in:
wendellhu
GitHub
parent
e46d414b11
commit
4512d467ab
@ -1,5 +1,59 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`renders ./components/dropdown/demo/arrow.md correctly 1`] = `
|
||||||
|
Array [
|
||||||
|
<button
|
||||||
|
class="ant-btn ant-dropdown-trigger"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
bottomLeft
|
||||||
|
</span>
|
||||||
|
</button>,
|
||||||
|
<button
|
||||||
|
class="ant-btn ant-dropdown-trigger"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
bottomCenter
|
||||||
|
</span>
|
||||||
|
</button>,
|
||||||
|
<button
|
||||||
|
class="ant-btn ant-dropdown-trigger"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
bottomRight
|
||||||
|
</span>
|
||||||
|
</button>,
|
||||||
|
<br />,
|
||||||
|
<button
|
||||||
|
class="ant-btn ant-dropdown-trigger"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
topLeft
|
||||||
|
</span>
|
||||||
|
</button>,
|
||||||
|
<button
|
||||||
|
class="ant-btn ant-dropdown-trigger"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
topCenter
|
||||||
|
</span>
|
||||||
|
</button>,
|
||||||
|
<button
|
||||||
|
class="ant-btn ant-dropdown-trigger"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
topRight
|
||||||
|
</span>
|
||||||
|
</button>,
|
||||||
|
]
|
||||||
|
`;
|
||||||
|
|
||||||
exports[`renders ./components/dropdown/demo/basic.md correctly 1`] = `
|
exports[`renders ./components/dropdown/demo/basic.md correctly 1`] = `
|
||||||
<a
|
<a
|
||||||
class="ant-dropdown-link ant-dropdown-trigger"
|
class="ant-dropdown-link ant-dropdown-trigger"
|
||||||
|
|||||||
75
components/dropdown/demo/arrow.md
Normal file
75
components/dropdown/demo/arrow.md
Normal file
@ -0,0 +1,75 @@
|
|||||||
|
---
|
||||||
|
order: 2
|
||||||
|
title:
|
||||||
|
zh-CN: 箭头
|
||||||
|
en-US: Arrow
|
||||||
|
---
|
||||||
|
|
||||||
|
## zh-CN
|
||||||
|
|
||||||
|
可以展示一个箭头。
|
||||||
|
|
||||||
|
## en-US
|
||||||
|
|
||||||
|
You could display an arrow.
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
import { Menu, Dropdown, Button } from 'antd';
|
||||||
|
|
||||||
|
const menu = (
|
||||||
|
<Menu>
|
||||||
|
<Menu.Item>
|
||||||
|
<a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">
|
||||||
|
1st menu item
|
||||||
|
</a>
|
||||||
|
</Menu.Item>
|
||||||
|
<Menu.Item>
|
||||||
|
<a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">
|
||||||
|
2nd menu item
|
||||||
|
</a>
|
||||||
|
</Menu.Item>
|
||||||
|
<Menu.Item>
|
||||||
|
<a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">
|
||||||
|
3rd menu item
|
||||||
|
</a>
|
||||||
|
</Menu.Item>
|
||||||
|
</Menu>
|
||||||
|
);
|
||||||
|
|
||||||
|
ReactDOM.render(
|
||||||
|
<>
|
||||||
|
<Dropdown overlay={menu} placement="bottomLeft" arrow>
|
||||||
|
<Button>bottomLeft</Button>
|
||||||
|
</Dropdown>
|
||||||
|
<Dropdown overlay={menu} placement="bottomCenter" arrow>
|
||||||
|
<Button>bottomCenter</Button>
|
||||||
|
</Dropdown>
|
||||||
|
<Dropdown overlay={menu} placement="bottomRight" arrow>
|
||||||
|
<Button>bottomRight</Button>
|
||||||
|
</Dropdown>
|
||||||
|
<br />
|
||||||
|
<Dropdown overlay={menu} placement="topLeft" arrow>
|
||||||
|
<Button>topLeft</Button>
|
||||||
|
</Dropdown>
|
||||||
|
<Dropdown overlay={menu} placement="topCenter" arrow>
|
||||||
|
<Button>topCenter</Button>
|
||||||
|
</Dropdown>
|
||||||
|
<Dropdown overlay={menu} placement="topRight" arrow>
|
||||||
|
<Button>topRight</Button>
|
||||||
|
</Dropdown>
|
||||||
|
</>,
|
||||||
|
mountNode,
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
#components-dropdown-demo-arrow .ant-btn {
|
||||||
|
margin-right: 8px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
.ant-row-rtl #components-dropdown-demo-arrow .ant-btn {
|
||||||
|
margin-right: 0;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
```
|
||||||
@ -35,6 +35,7 @@ type Align = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export interface DropDownProps {
|
export interface DropDownProps {
|
||||||
|
arrow?: boolean;
|
||||||
trigger?: ('click' | 'hover' | 'contextMenu')[];
|
trigger?: ('click' | 'hover' | 'contextMenu')[];
|
||||||
overlay: React.ReactElement | OverlayFunc;
|
overlay: React.ReactElement | OverlayFunc;
|
||||||
onVisibleChange?: (visible: boolean) => void;
|
onVisibleChange?: (visible: boolean) => void;
|
||||||
@ -130,6 +131,7 @@ const Dropdown: DropdownInterface = props => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const {
|
const {
|
||||||
|
arrow,
|
||||||
prefixCls: customizePrefixCls,
|
prefixCls: customizePrefixCls,
|
||||||
children,
|
children,
|
||||||
trigger,
|
trigger,
|
||||||
@ -160,6 +162,7 @@ const Dropdown: DropdownInterface = props => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<RcDropdown
|
<RcDropdown
|
||||||
|
arrow={arrow}
|
||||||
alignPoint={alignPoint}
|
alignPoint={alignPoint}
|
||||||
{...props}
|
{...props}
|
||||||
overlayClassName={overlayClassNameCustomized}
|
overlayClassName={overlayClassNameCustomized}
|
||||||
|
|||||||
@ -17,6 +17,7 @@ When there are more than a few options to choose from, you can wrap them in a `D
|
|||||||
|
|
||||||
| Property | Description | Type | Default | Version |
|
| Property | Description | Type | Default | Version |
|
||||||
| --- | --- | --- | --- | --- |
|
| --- | --- | --- | --- | --- |
|
||||||
|
| arrow | Whether the dropdown arrow should be visible | boolean | `false` | |
|
||||||
| disabled | Whether the dropdown menu is disabled | boolean | - | |
|
| disabled | Whether the dropdown menu is disabled | boolean | - | |
|
||||||
| getPopupContainer | To set the container of the dropdown menu. The default is to create a `div` element in `body`, but you can reset it to the scrolling area and make a relative reposition. [Example on CodePen](https://codepen.io/afc163/pen/zEjNOy?editors=0010). | Function(triggerNode) | `() => document.body` | |
|
| getPopupContainer | To set the container of the dropdown menu. The default is to create a `div` element in `body`, but you can reset it to the scrolling area and make a relative reposition. [Example on CodePen](https://codepen.io/afc163/pen/zEjNOy?editors=0010). | Function(triggerNode) | `() => document.body` | |
|
||||||
| overlay | The dropdown menu | [Menu](/components/menu) \| () => Menu | - | |
|
| overlay | The dropdown menu | [Menu](/components/menu) \| () => Menu | - | |
|
||||||
|
|||||||
@ -21,6 +21,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/TIIiKrsQT/Dropdown.svg
|
|||||||
|
|
||||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||||
| --- | --- | --- | --- | --- |
|
| --- | --- | --- | --- | --- |
|
||||||
|
| arrow | 下拉框箭头是否显示 | boolean | `false` | |
|
||||||
| disabled | 菜单是否禁用 | boolean | - | |
|
| disabled | 菜单是否禁用 | boolean | - | |
|
||||||
| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | Function(triggerNode) | `() => document.body` | |
|
| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | Function(triggerNode) | `() => document.body` | |
|
||||||
| overlay | 菜单 | [Menu](/components/menu) \| () => Menu | - | |
|
| overlay | 菜单 | [Menu](/components/menu) \| () => Menu | - | |
|
||||||
|
|||||||
@ -47,6 +47,76 @@
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Offset the popover to account for the dropdown arrow
|
||||||
|
&-show-arrow&-placement-topCenter,
|
||||||
|
&-show-arrow&-placement-topLeft,
|
||||||
|
&-show-arrow&-placement-topRight {
|
||||||
|
padding-bottom: @popover-distance;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-show-arrow&-placement-bottomCenter,
|
||||||
|
&-show-arrow&-placement-bottomLeft,
|
||||||
|
&-show-arrow&-placement-bottomRight {
|
||||||
|
padding-top: @popover-distance;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Arrows
|
||||||
|
// .popover-arrow is outer, .popover-arrow:after is inner
|
||||||
|
|
||||||
|
&-arrow {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1; // lift it up so the menu wouldn't cask shadow on it
|
||||||
|
display: block;
|
||||||
|
width: sqrt(@popover-arrow-width * @popover-arrow-width * 2);
|
||||||
|
height: sqrt(@popover-arrow-width * @popover-arrow-width * 2);
|
||||||
|
background: transparent;
|
||||||
|
border-style: solid;
|
||||||
|
border-width: sqrt(@popover-arrow-width * @popover-arrow-width * 2) / 2;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
&-placement-topCenter > &-arrow,
|
||||||
|
&-placement-topLeft > &-arrow,
|
||||||
|
&-placement-topRight > &-arrow {
|
||||||
|
bottom: @popover-distance - @popover-arrow-width + 2.2px;
|
||||||
|
border-top-color: transparent;
|
||||||
|
border-right-color: @popover-bg;
|
||||||
|
border-bottom-color: @popover-bg;
|
||||||
|
border-left-color: transparent;
|
||||||
|
box-shadow: 3px 3px 7px fade(@black, 7%);
|
||||||
|
}
|
||||||
|
&-placement-topCenter > &-arrow {
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%) rotate(45deg);
|
||||||
|
}
|
||||||
|
&-placement-topLeft > &-arrow {
|
||||||
|
left: 16px;
|
||||||
|
}
|
||||||
|
&-placement-topRight > &-arrow {
|
||||||
|
right: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-placement-bottomCenter > &-arrow,
|
||||||
|
&-placement-bottomLeft > &-arrow,
|
||||||
|
&-placement-bottomRight > &-arrow {
|
||||||
|
top: @popover-distance - @popover-arrow-width + 2px;
|
||||||
|
border-top-color: @popover-bg;
|
||||||
|
border-right-color: transparent;
|
||||||
|
border-bottom-color: transparent;
|
||||||
|
border-left-color: @popover-bg;
|
||||||
|
box-shadow: -2px -2px 5px fade(@black, 6%);
|
||||||
|
}
|
||||||
|
&-placement-bottomCenter > &-arrow {
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%) rotate(45deg);
|
||||||
|
}
|
||||||
|
&-placement-bottomLeft > &-arrow {
|
||||||
|
left: 16px;
|
||||||
|
}
|
||||||
|
&-placement-bottomRight > &-arrow {
|
||||||
|
right: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
&-menu {
|
&-menu {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user