Balloon 气泡提示

Balloon 气泡提示

如果项目中使用的是 1.x 版本的基础组件（@alifd/next），请在左侧导航顶部切换组件版本。

安装方法

在命令行中执行以下命令npm install @icedesign/base@latest -S

开发指南

气泡组件

何时使用

当用户与被说明对象（文字，图片，输入框等）发生交互行为的action开始时, 即刻跟随动作出现一种辅助或帮助的提示信息。
其中Balloon.Tooltip是简化版本，主要用于hover时显示简单文案。

使用注意

对于trigger是自定义的React Component的情况，自定义的React Component 需要透传onMouseEnter/onMouseLeave/onClick 事件。

API

气泡提示

参数	说明	类型	默认值
prefix	样式类名的品牌前缀	String	'next-'
className	自定义类名	String	-
style	自定义内敛样式	Object	-
children	浮层的内容	any	-
type	样式类型可选值:'normal', 'primary'	Enum	'normal'
visible	弹层当前显示的状态	Boolean	-
defaultVisible	弹层默认显示的状态	Boolean	false
onVisibleChange	弹层在显示和隐藏触发的事件签名:Function(visible: Boolean) => void参数:visible: {Boolean} 弹层是否隐藏和显示	Function	-
alignment	弹出层对齐方式可选值:'normal'(普通对齐箭头居中)'edge'(边缘对齐箭头可在trigger的边缘)	Enum	'normal'
closable	是否显示关闭按钮	Boolean	true
align	弹出层位置可选值:'t'(上)'r'(右)'b'(下)'l'(左)'tl'(上左)'tr'(上右)'bl'(下左)'br'(下右)'lt'(左上)'lb'(左下)'rt'(右上)'rb'(右下)	Enum	'b'
offset	弹层相对于trigger的定位的微调	Array	0, 0
trigger	触发元素	any	<span></span>
triggerType	触发行为可选值:'hover'(鼠标悬浮)'focus'(获取到焦点)'click'(鼠标点击)	Enum	'hover'
onClose	任何visible为false时会触发的事件签名:Function() => void	Function	() => { }
onCloseClick	点击关闭按钮的click事件签名:Function() => void	Function	() => { }
needAdjust	是否进行自动位置调整	Boolean	false
delay	弹层在触发以后的延时显示	Number	-
afterClose	浮层关闭后触发的事件, 如果有动画，则在动画结束后触发签名:Function() => void	Function	() => { }
shouldUpdatePosition	强制更新定位信息	Boolean	-
autoFocus	弹层出现后是否自动focus到内部第一个元素	Boolean	false
safeNode	安全节点:对于triggetType为click的浮层,会在点击除了浮层外的其它区域时关闭浮层.safeNode用于添加不触发关闭的节点, 值可以是dom节点的id或者是节点的dom对象	String	undefined
safeId	用来指定safeNode节点的id，和safeNode配合使用	String	null
animation	配置动画的播放方式	Object/Boolean	{ in: 'zoomIn', out: 'zoomOut' }
cache	弹层的dom节点关闭时是否删除	Boolean	false
container	指定浮层渲染的父节点, 可以为节点id的字符串，也可以返回节点的函数。	String/Function	-

参数	说明	类型	默认值
prefix	样式类名的品牌前缀	String	-
className	自定义类名	String	-
style	自定义内敛样式	Object	-
align	弹出层位置可选值:'t'(上)'r'(右)'b'(下)'l'(左)'tl'(上左)'tr'(上右)'bl'(下左)'br'(下右)'lt'(左上)'lb'(左下)'rt'(右上)'rb'(右下)	Enum	'b'
text	tooltip 内部内容文案	ReactNode	''
trigger	触发元素	any	<span></span>

代码示例

边缘对齐设置

位置有十二个方向。

查看源码在线预览

import { Button, Balloon } from "@icedesign/base";
const top = (
  <Button id="top" style={{ margin: "5px" }} className="btrigger">
    上边
  </Button>
);
const right = (
  <Button id="right" style={{ margin: "5px" }} className="btrigger">
    右边
  </Button>
);
const bottom = (
  <Button id="bottom" style={{ margin: "5px" }} className="btrigger">
    下边
  </Button>
);
const left = (
  <Button id="left" style={{ margin: "5px" }} className="btrigger">
    左边
  </Button>
);
const topLeft = (
  <Button id="topLeft" style={{ margin: "5px" }} className="btrigger">
    上左
  </Button>
);
const topRight = (
  <Button id="topRight" style={{ margin: "5px" }} className="btrigger">
    上右
  </Button>
);
const rightTop = (
  <Button id="rightTop" style={{ margin: "5px" }} className="btrigger">
    右上
  </Button>
);
const rightBottom = (
  <Button id="rightBottom" style={{ margin: "5px" }} className="btrigger">
    右下
  </Button>
);
const bottomLeft = (
  <Button id="bottomLeft" style={{ margin: "5px" }} className="btrigger">
    下左
  </Button>
);
const bottomRight = (
  <Button id="bottomRight" style={{ margin: "5px" }} className="btrigger">
    下右
  </Button>
);
const leftTop = (
  <Button id="leftTop" style={{ margin: "5px" }} className="btrigger">
    左上
  </Button>
);
const leftBottom = (
  <Button id="leftBottom" style={{ margin: "5px" }} className="btrigger">
    左下
  </Button>
);
const Content = () => (
  <div>
    <h4 style={{ marginTop: 0 }}>balloon title</h4>
    <hr />
    <p>balloon content</p>
  </div>
);
const App = () => (
  <div style={{ paddingLeft: 320, paddingTop: 100 }}>
    <div style={{ marginLeft: 75 }}>
      <Balloon
        trigger={topLeft}
        align="tl"
        alignment="edge"
        triggerType="click"
        style={{ width: 300 }}
      >
        <Content />
      </Balloon>
      <Balloon
        trigger={top}
        align="t"
        alignment="edge"
        triggerType="click"
        style={{ width: 300 }}
      >
        <Content />
      </Balloon>
      <Balloon
        trigger={topRight}
        align="tr"
        alignment="edge"
        triggerType="click"
        style={{ width: 300 }}
      >
        <Content />
      </Balloon>
    </div>
    <div style={{ width: 80, float: "left" }}>
      <Balloon
        trigger={leftTop}
        align="lt"
        alignment="edge"
        triggerType="click"
        style={{ width: 300 }}
      >
        <Content />
      </Balloon>
      <Balloon
        trigger={left}
        align="l"
        alignment="edge"
        triggerType="click"
        style={{ width: 300 }}
      >
        <Content />
      </Balloon>
      <Balloon
        trigger={leftBottom}
        align="lb"
        alignment="edge"
        triggerType="click"
        style={{ width: 300 }}
      >
        <Content />
      </Balloon>
    </div>
    <div style={{ width: 80, marginLeft: 290 }}>
      <Balloon
        trigger={rightTop}
        align="rt"
        alignment="edge"
        triggerType="click"
        style={{ width: 300 }}
      >
        <Content />
      </Balloon>
      <Balloon
        trigger={right}
        align="r"
        alignment="edge"
        triggerType="click"
        style={{ width: 300 }}
      >
        <Content />
      </Balloon>
      <Balloon
        trigger={rightBottom}
        align="rb"
        alignment="edge"
        triggerType="click"
        style={{ width: 300 }}
      >
        <Content />
      </Balloon>
    </div>
    <div style={{ marginLeft: 80, clear: "both" }}>
      <Balloon
        trigger={bottomLeft}
        align="bl"
        alignment="edge"
        triggerType="click"
        style={{ width: 300 }}
      >
        <Content />
      </Balloon>
      <Balloon
        trigger={bottom}
        align="b"
        alignment="edge"
        triggerType="click"
        style={{ width: 300 }}
      >
        <Content />
      </Balloon>
      <Balloon
        trigger={bottomRight}
        align="br"
        alignment="edge"
        triggerType="click"
        style={{ width: 300 }}
      >
        <Content />
      </Balloon>
    </div>
  </div>
);
ReactDOM.render(<App />, mountNode);

基本

最简单的用法。

查看源码在线预览

import { Button, Balloon } from "@icedesign/base";
const defaultTrigger = (
  <Button className="btrigger" style={{ margin: "5px" }}>
    默认样式
  </Button>
);
const primary = (
  <Button className="btrigger" style={{ margin: "5px" }}>
    强调样式
  </Button>
);
const Demo = () => (
  <div className="container">
    <Balloon trigger={defaultTrigger} closable={false}>
      default
    </Balloon>
    <Balloon type="primary" trigger={primary} triggerType="click">
      primary
    </Balloon>
  </div>
);
ReactDOM.render(<Demo />, mountNode);

从浮层内关闭, 事件回调

使用 visible ,属性控制浮层显示, 使 balloon 变为受限组件。

查看源码在线预览

import { Button, Balloon } from "@icedesign/base";
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false
    };
  }
  hide() {
    this.setState({
      visible: false
    });
  }
  // onVisibleChange事件会在所有visible属性被改变的时候触发;
  // 比如对于click类型,会在点击button的时候触发和点击空白区域的时候触发;
  // 对于hover类型,会在mouseentter,mouseleave的时候触发;
  handleVisibleChange(visible) {
    this.setState({ visible });
  }
  onClose() {
    console.log("onClose doing!");
  }
  afterClose() {
    console.log("afterClose doing!");
  }
  render() {
    const visibleTrigger = (
      <Button type="primary" style={{ margin: "5px" }}>
        点击弹出卡片
      </Button>
    );
    const clickTrigger = (
      <Button type="primary" style={{ margin: "5px" }}>
        hover弹出卡片
      </Button>
    );
    const content = (
      <div>
        点击按钮操作<br />
        <a style={{ right: 0 }} id="confirmBtn" onClick={this.hide.bind(this)}>
          确认
        </a>
        <a
          style={{ marginLeft: "4px" }}
          id="cancelBtn"
          onClick={this.hide.bind(this)}
        >
          关闭
        </a>
      </div>
    );
    return (
      <div>
        <Balloon
          trigger={visibleTrigger}
          triggerType="click"
          visible={this.state.visible}
          onVisibleChange={this.handleVisibleChange.bind(this)}
        >
          {content}
        </Balloon>
        <Balloon
          trigger={clickTrigger}
          triggerType="hover"
          onClose={this.onClose.bind(this)}
          afterClose={this.afterClose.bind(this)}
        >
          内容区域
        </Balloon>
      </div>
    );
  }
}
ReactDOM.render(<App />, mountNode);

嵌套浮层问题

浮层中如果又有浮层,比如在Balloon中有DatePicker的浮层,需要用safeNode解决datePicker选择时,balloon浮层关闭的问题.

查看源码在线预览

import { Button, Balloon, DatePicker } from "@icedesign/base";
const primary = <Button className="btrigger">primary</Button>;
const innerButton = <Button className="btrigger">innerButton</Button>;
const App = () => (
  <div className="container nested">
    <Balloon
      type="primary"
      trigger={primary}
      closable={false}
      triggerType="click"
    >
      <DatePicker
        defaultValue="2016-10-10"
        container={trigger => trigger.parentNode}
      />
    </Balloon>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <Balloon
      type="primary"
      trigger={innerButton}
      closable={false}
      triggerType="click"
    >
      <Balloon
        trigger={<Button type="primary">please click</Button>}
        container={trigger => trigger.parentNode}
        triggerType="click"
      >
        nesting balloon content
      </Balloon>
    </Balloon>
  </div>
);
ReactDOM.render(<App />, mountNode);


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

close按钮事件，手动控制visible

使用 visible,属性控制浮层显示, 使balloon变为受限组件。

查看源码在线预览

import { Button, Balloon } from "@icedesign/base";
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false
    };
  }
  // 一切改变visible为false的行为都会触发此事件
  onClose() {
    console.log("onClose doing!");
  }
  // close按钮的click事件
  onCloseClick() {
    this.setState({ visible: false });
  }
  onClick() {
    this.setState({ visible: true });
  }
  render() {
    const visibleTrigger = (
      <Button onClick={this.onClick.bind(this)} type="primary">
        点击弹出卡片
      </Button>
    );
    const content = <div>content</div>;
    return (
      <div style={{ marginBottom: "100px" }}>
        <Balloon
          trigger={visibleTrigger}
          triggerType="click"
          visible={this.state.visible}
          onCloseClick={this.onCloseClick.bind(this)}
          onClose={this.onClose.bind(this)}
        >
          {content}
        </Balloon>
      </div>
    );
  }
}
ReactDOM.render(<App />, mountNode);

位置

位置有十二个方向。

查看源码在线预览

import { Button, Balloon } from "@icedesign/base";
const top = (
  <Button id="top" style={{ margin: "5px" }} className="btrigger">
    上边
  </Button>
);
const right = (
  <Button id="right" style={{ margin: "5px" }} className="btrigger">
    右边
  </Button>
);
const bottom = (
  <Button id="bottom" style={{ margin: "5px" }} className="btrigger">
    下边
  </Button>
);
const left = (
  <Button id="left" style={{ margin: "5px" }} className="btrigger">
    左边
  </Button>
);
const topLeft = (
  <Button id="topLeft" style={{ margin: "5px" }} className="btrigger">
    上左
  </Button>
);
const topRight = (
  <Button id="topRight" style={{ margin: "5px" }} className="btrigger">
    上右
  </Button>
);
const rightTop = (
  <Button id="rightTop" style={{ margin: "5px" }} className="btrigger">
    右上
  </Button>
);
const rightBottom = (
  <Button id="rightBottom" style={{ margin: "5px" }} className="btrigger">
    右下
  </Button>
);
const bottomLeft = (
  <Button id="bottomLeft" style={{ margin: "5px" }} className="btrigger">
    下左
  </Button>
);
const bottomRight = (
  <Button id="bottomRight" style={{ margin: "5px" }} className="btrigger">
    下右
  </Button>
);
const leftTop = (
  <Button id="leftTop" style={{ margin: "5px" }} className="btrigger">
    左上
  </Button>
);
const leftBottom = (
  <Button id="leftBottom" style={{ margin: "5px" }} className="btrigger">
    左下
  </Button>
);
const Content = () => (
  <div>
    <h4 style={{ marginTop: 0 }}>balloon title</h4>
    <hr />
    <p>balloon content</p>
  </div>
);
const App = () => (
  <div style={{ paddingLeft: 320, paddingTop: 100 }}>
    <div style={{ marginLeft: 75 }}>
      <Balloon
        trigger={topLeft}
        align="tl"
        triggerType="click"
        style={{ width: 300 }}
      >
        <Content />
      </Balloon>
      <Balloon
        trigger={top}
        align="t"
        triggerType="click"
        style={{ width: 300 }}
      >
        <Content />
      </Balloon>
      <Balloon
        trigger={topRight}
        align="tr"
        triggerType="click"
        style={{ width: 300 }}
      >
        <Content />
      </Balloon>
    </div>
    <div style={{ width: 80, float: "left" }}>
      <Balloon
        trigger={leftTop}
        align="lt"
        triggerType="click"
        style={{ width: 300 }}
      >
        <Content />
      </Balloon>
      <Balloon
        trigger={left}
        align="l"
        triggerType="click"
        style={{ width: 300 }}
      >
        <Content />
      </Balloon>
      <Balloon
        trigger={leftBottom}
        align="lb"
        triggerType="click"
        style={{ width: 300 }}
      >
        <Content />
      </Balloon>
    </div>
    <div style={{ width: 80, marginLeft: 290 }}>
      <Balloon
        trigger={rightTop}
        align="rt"
        triggerType="click"
        style={{ width: 300 }}
      >
        <Content />
      </Balloon>
      <Balloon
        trigger={right}
        align="r"
        triggerType="click"
        style={{ width: 300 }}
      >
        <Content />
      </Balloon>
      <Balloon
        trigger={rightBottom}
        align="rb"
        triggerType="click"
        style={{ width: 300 }}
      >
        <Content />
      </Balloon>
    </div>
    <div style={{ marginLeft: 80, clear: "both" }}>
      <Balloon
        trigger={bottomLeft}
        align="bl"
        triggerType="click"
        style={{ width: 300 }}
      >
        <Content />
      </Balloon>
      <Balloon
        trigger={bottom}
        align="b"
        triggerType="click"
        style={{ width: 300 }}
      >
        <Content />
      </Balloon>
      <Balloon
        trigger={bottomRight}
        align="br"
        triggerType="click"
        style={{ width: 300 }}
      >
        <Content />
      </Balloon>
    </div>
  </div>
);
ReactDOM.render(<App />, mountNode);

tooltip

简化的popup, 只能设置align, trigger和text。tooltip里的只能是文本, 通过text设置, 触发条件是hover.

查看源码在线预览

import { Button, Balloon } from "@icedesign/base";
const Tooltip = Balloon.Tooltip;
const top = (
  <Button style={{ margin: "5px" }} id="top" className="btrigger">
    上边
  </Button>
);
const right = (
  <Button style={{ margin: "5px" }} id="right" className="btrigger">
    右边
  </Button>
);
const bottom = (
  <Button style={{ margin: "5px" }} id="bottom" className="btrigger">
    下边
  </Button>
);
const left = (
  <Button style={{ margin: "5px" }} id="left" className="btrigger">
    左边
  </Button>
);
const topLeft = (
  <Button style={{ margin: "5px" }} id="topLeft" className="btrigger">
    上左
  </Button>
);
const topRight = (
  <Button style={{ margin: "5px" }} id="topRight" className="btrigger">
    上右
  </Button>
);
const rightTop = (
  <Button style={{ margin: "5px" }} id="rightTop" className="btrigger">
    右上
  </Button>
);
const rightBottom = (
  <Button style={{ margin: "5px" }} id="rightBottom" className="btrigger">
    右下
  </Button>
);
const bottomLeft = (
  <Button style={{ margin: "5px" }} id="bottomLeft" className="btrigger">
    下左
  </Button>
);
const bottomRight = (
  <Button style={{ margin: "5px" }} id="bottomRight" className="btrigger">
    下右
  </Button>
);
const leftTop = (
  <Button style={{ margin: "5px" }} id="leftTop" className="btrigger">
    左上
  </Button>
);
const leftBottom = (
  <Button style={{ margin: "5px" }} id="leftBottom" className="btrigger">
    左下
  </Button>
);
const App = () => (
  <div style={{ paddingLeft: 220, paddingTop: 100 }}>
    <div style={{ marginLeft: 75 }}>
      <Tooltip trigger={topLeft} align="tl" text="text text" />
      <Tooltip trigger={top} align="t" text="text text" />
      <Tooltip trigger={topRight} align="tr" text="text text" />
    </div>
    <div style={{ width: 80, float: "left" }}>
      <Tooltip trigger={leftTop} align="lt" text="text text" />
      <Tooltip trigger={left} align="l" text="text text" />
      <Tooltip trigger={leftBottom} align="lb" text="text text" />
    </div>
    <div style={{ width: 80, marginLeft: 290 }}>
      <Tooltip trigger={rightTop} align="rt" text="text text" />
      <Tooltip trigger={right} align="r" text="text text" />
      <Tooltip trigger={rightBottom} align="rb" text="text text" />
    </div>
    <div style={{ marginLeft: 80, clear: "both" }}>
      <Tooltip trigger={bottomLeft} align="bl" text="text text" />
      <Tooltip trigger={bottom} align="b" text="text text" />
      <Tooltip trigger={bottomRight} align="br" text="text text" />
    </div>
  </div>
);
ReactDOM.render(<App />, mountNode);

.code-box-demo .sui-btn {
    margin-right: 1em;
    margin-bottom: 1em;
}

三种触发方式

鼠标移入、聚集、点击。

查看源码在线预览

import { Button, Balloon } from "@icedesign/base";
const content = (
  <div>
    <p>内容</p>
  </div>
);
const MoveTarget = <Button style={{ margin: "5px" }}>移入</Button>;
const ClickTarget = <Button style={{ margin: "5px" }}>点击</Button>;
const FocusTarget = <Button style={{ margin: "5px" }}>获取焦点</Button>;
const App = () => (
  <div>
    <Balloon trigger={MoveTarget} triggerType="hover">
      {content}
    </Balloon>
    <Balloon trigger={ClickTarget} triggerType="click">
      {content}
    </Balloon>
    <Balloon trigger={FocusTarget} triggerType="focus">
      {content}
    </Balloon>
  </div>
);
ReactDOM.render(<App />, mountNode);

Balloon 气泡提示

Balloon 气泡提示

安装方法

开发指南

何时使用

使用注意

API

气泡提示

Balloon.Tooltip

代码示例

相关区块

暂无相关区块