Skip to content

Commit

Permalink
docs(Balloon): add nested demo
Browse files Browse the repository at this point in the history
  • Loading branch information
youluna committed May 31, 2019
1 parent af21505 commit 5c9dcb1
Showing 1 changed file with 13 additions and 11 deletions.
24 changes: 13 additions & 11 deletions docs/balloon/demo/nested.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,37 +2,40 @@

- order: 6

浮层中如果又有浮层,比如在Balloon中有DatePicker的浮层,需要用safeNode解决datePicker选择时,balloon浮层关闭的问题.
浮层中如果又有浮层,比如在`Balloon`中有`DatePicker/Select`的浮层, `DatePicker`选择时,`Balloon`浮层也会关闭。可以用 `followTrigger`解决。

:::lang=en-us
# Nested

- order: 6

When popup is nested in another popup, say DatePicker is nested in Balloon, use safeNode to avoid the unexpected Balloon's closing.
When popup is nested in another popup, say DatePicker is nested in Balloon, use `followTrigger` to avoid the unexpected Balloon's closing.

:::

---

````jsx
import { Button, Balloon, DatePicker } from '@alifd/next';
import { Button, Balloon, DatePicker, Select } from '@alifd/next';
import moment from 'moment';

const primary = <Button className="btrigger">primary</Button>;
const innerButton = <Button className="btrigger">innerButton</Button>;
const showSelect = <Button className="btrigger">Show Select</Button>;
const showDatePicker = <Button className="btrigger">Show DatePicker</Button>;
const innerButton = <Button className="btrigger">Show Inner Balloon</Button>;
const dateValue = moment('2018-01-01', 'YYYY-MM-DD', true);

const App = () => (
<div className="container nested">
<Balloon type="primary" autoFocus trigger={primary} closable={false} triggerType="click">
<DatePicker defaultValue={dateValue} popupContainer={
(trigger) => trigger.parentNode
} />
<Balloon type="primary" autoFocus trigger={showSelect} closable={false} triggerType="click">
<Select dataSource={['apple', 'banana', 'orange']} followTrigger />
</Balloon>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<Balloon type="primary" autoFocus trigger={showDatePicker} closable={false} triggerType="click">
<DatePicker defaultValue={dateValue} followTrigger />
</Balloon>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<Balloon type="primary" autoFocus trigger={innerButton} closable={false} triggerType="click">
<Balloon trigger={<Button type="primary">please click</Button>} popupContainer={(trigger) => trigger.parentNode} triggerType="click">
<Balloon trigger={<Button type="primary">please click</Button>} followTrigger triggerType="click">
nesting balloon content
</Balloon>
</Balloon>
Expand All @@ -46,7 +49,6 @@ ReactDOM.render(<App />, mountNode);
```css

.container.nested {
margin-left: 100px;
margin-bottom: 50px;
}

Expand Down

0 comments on commit 5c9dcb1

Please sign in to comment.