Skip to content

Commit

Permalink
docs(*): perfect docs for offset
Browse files Browse the repository at this point in the history
  • Loading branch information
@youluna
youluna committed May 30, 2019
1 parent af80ca2 commit 52329aa
Show file tree
Hide file tree
Showing 14 changed files with 14 additions and 23 deletions.
3 changes: 0 additions & 3 deletions docs/balloon/demo/alignment.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,6 @@ There are 12 options for align
````jsx
import { Button, Balloon } from '@alifd/next';




const top = <Button id="top" style={{margin: '5px'}} className="btrigger">top</Button>;
const right = <Button id="right" style={{margin: '5px'}} className="btrigger">right</Button>;
const bottom = <Button id="bottom" style={{margin: '5px'}} className="btrigger">bottom</Button>;
Expand Down
3 changes: 0 additions & 3 deletions docs/balloon/demo/control.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,6 @@ Use 'visible' to control whether the popup should be displayed.
````jsx
import { Button, Balloon } from '@alifd/next';




class App extends React.Component {
constructor(props) {
super(props);
Expand Down
3 changes: 0 additions & 3 deletions docs/balloon/demo/onCloseClick.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,6 @@ When popup is nested in another popup, say DatePicker is nested in Balloon, use
````jsx
import { Button, Balloon } from '@alifd/next';




class App extends React.Component {
constructor(props) {
super(props);
Expand Down
2 changes: 0 additions & 2 deletions docs/balloon/demo/tooltip.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,6 @@ Simplified Balloon, which can only set align, trigger and children, and triggere
````jsx
import { Button, Balloon } from '@alifd/next';



const Tooltip = Balloon.Tooltip;

const top = <Button style={{margin: '5px'}} id="top" className="btrigger">top</Button>;
Expand Down
1 change: 0 additions & 1 deletion docs/balloon/demo/triggerType.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ Hover, focus and click.
````jsx
import { Button, Balloon, Input } from '@alifd/next';


const content = (<div><p>content</p></div>);
const MoveTarget = <Button style={{margin: '5px'}}>hover</Button>;
const ClickTarget = <Button style={{margin: '5px'}}>click</Button>;
Expand Down
2 changes: 1 addition & 1 deletion docs/balloon/index.en-us.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@
| alignEdge | whether align to the edge | Boolean | false |
| closable | whether to show the close button | Boolean | true |
| align | position of popup relative to the trigger<br><br>**option**:<br>'t'(top)<br>'r'(right)<br>'b'(bottom)<br>'l'(left)<br>'tl'(top left)<br>'tr'(top right)<br>'bl'(bottom left)<br>'br'(bottom right)<br>'lt'(left top)<br>'lb'(left bottom)<br>'rt'(right top)<br>'rb'(right bottom) or their combinations | Enum | 'b' |
| offset | offset for fine tuning the popup | Array | [0, 0] |
| offset | extra adjustment for trigger element. e.g. [hoz, ver] means move to right ${hoz}px (to left in RTL mode), to bottom ${ver}px | Array | [0, 0] |
| trigger | trigger of the popup | any | &lt;span>&lt;/span> |
| triggerType | how to trigger the popup. <br><br>**type unit**:<br>'hover'<br>'click'<br> e.g.['hover', 'click'] 'click' | String/Array | 'hover' |
| onClose | callback triggered when visible becomes false<br><br>**signature**:<br>Function() => void | Function | func.noop |
Expand Down
2 changes: 1 addition & 1 deletion docs/balloon/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
| alignEdge | 弹出层对齐方式 | Boolean | false |
| closable | 是否显示关闭按钮 | Boolean | true |
| align | 弹出层位置<br><br>**可选值**:<br>'t'(上)<br>'r'(右)<br>'b'(下)<br>'l'(左)<br>'tl'(上左)<br>'tr'(上右)<br>'bl'(下左)<br>'br'(下右)<br>'lt'(左上)<br>'lb'(左下)<br>'rt'(右上)<br>'rb'(右下 及其 两两组合) | Enum | 'b' |
| offset | 弹层相对于trigger的定位的微调 | Array | [0, 0] |
| offset | 弹层相对于trigger的定位的微调, 接收数组[hoz, ver], 表示弹层在 left / top 上的增量<br>e.g. [100, 100] 表示往右(RTL 模式下是往左) 、下分布偏移100px | Array | [0, 0] |
| trigger | 触发元素 | any | &lt;span /> |
| triggerType | 触发行为<br>鼠标悬浮, 鼠标点击('hover','click')或者它们组成的数组，如 ['hover', 'click'], 强烈不建议使用'focus'，若弹窗内容有复杂交互请使用click | String/Array | 'hover' |
| onClose | 任何visible为false时会触发的事件<br><br>**签名**:<br>Function() => void | Function | func.noop |
Expand Down
4 changes: 2 additions & 2 deletions docs/dropdown/index.en-us.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ You can storage operation command with dropdown component when there are too muc
| triggerType | operation type of trigger overlay toggle visible<br><br>**options**:<br>'hover', 'click' | Enum | 'hover' |
| disabled | overlay can not toggle visible if you set disabled attribute | Boolean | false |
| align | overlay position relative to trigger element, see details Overlay align | String | 'tl bl' |
| offset | overlay adjust position relative to trigger element | Array | [0, 0] |
| offset | extra adjustment for trigger element. e.g. [hoz, ver] means move to right ${hoz}px (to left in RTL mode), to bottom ${ver}px | Array | [0, 0] |
| delay | delay time of toggle overlay visible(unit: ms)，if triggerType value is 'hover', delay time will work | Number | 200 |
| autoFocus | let element in overlay get focus or not after overlay was opened | Boolean | true |
| hasMask | display mask or not | Boolean | false |
Expand All @@ -48,4 +48,4 @@ You can storage operation command with dropdown component when there are too muc
| Right Arrow | in vertical mode, open the submenu, navigate to the first item of the submenu; in horizontal mode, navigate at the same level, navigate to the next one |
| Left Arrow | in vertical mode, close the submenu, navigate to the parent menu; in horizontal mode, navigate at the same level, navigate to the previous one |
| Enter | open submenu and navigate to the first item of the submenu |
| Esc | close submenu and navigate to the parent menu item |
| Esc | close submenu and navigate to the parent menu item |
2 changes: 1 addition & 1 deletion docs/dropdown/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
| triggerType | 触发弹层显示或隐藏的操作类型，可以是 'click'，'hover'，或者它们组成的数组，如 ['hover', 'click'] | String/Array | 'hover' |
| disabled | 设置此属性，弹层无法显示或隐藏 | Boolean | false |
| align | 弹层相对于触发元素的定位, 详见 Overlay 的定位部分 | String | 'tl bl' |
| offset | 弹层相对于触发元素定位的微调 | Array | [0, 0] |
| offset | 弹层相对于trigger的定位的微调, 接收数组[hoz, ver], 表示弹层在 left / top 上的增量<br>e.g. [100, 100] 表示往右(RTL 模式下是往左) 、下分布偏移100px | Array | [0, 0] |
| delay | 弹层显示或隐藏的延时时间（以毫秒为单位），在 triggerType 被设置为 hover 时生效 | Number | 200 |
| autoFocus | 弹层打开时是否让其中的元素自动获取焦点 | Boolean | - |
| hasMask | 是否显示遮罩 | Boolean | false |
Expand Down
4 changes: 2 additions & 2 deletions docs/overlay/index.en-us.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ Popup is the wrapper of Overlay. It receives a node as a trigger node and pops u
| onRequestClose | callback function that triggers an event when the overlay request closed<br><br>**signatures**:<br>Function(type: String, e: Object) => void<br>**params**:<br>_type_: {String} the reason of the overlay closure<br>_e_: {Object} DOM event | Function | func.noop |
| target | reference element for overlay positioning | any | Position.VIEWPORT |
| align | alignment of the overlay relative to the reference element, see [Alignment](#Alignment) | String/Boolean | 'tl bl' |
| offset | offset of the overlay relative to the reference element | Array | [0, 0] |
| offset | extra adjustment for trigger element. e.g. [hoz, ver] means move to right ${hoz}px (to left in RTL mode), to bottom ${ver}px | Array | [0, 0] |
| container | container of the overlay, if it is a function, it should return ref, if it is a string, it is should be the id of the DOM element, it can also be passed the DOM element directly. | any | - |
| hasMask | whether to show the mask | Boolean | false |
| canCloseByEsc | whether to support pressing esc to close the overlay | Boolean | true |
Expand Down Expand Up @@ -97,4 +97,4 @@ Popup is the wrapper of Overlay. It receives a node as a trigger node and pops u

## ARIA and KeyBoard

`Description`: This component needs to be used in conjunction with other components to be prompted. Refer to the above `overlay`
`Description`: This component needs to be used in conjunction with other components to be prompted. Refer to the above `overlay`
2 changes: 1 addition & 1 deletion docs/overlay/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ Popup 是对 Overlay 的封装，它接收某个节点作为触发节点，弹
| onRequestClose | 弹层请求关闭时触发事件的回调函数<br><br>**签名**:<br>Function(type: String, e: Object) => void<br>**参数**:<br>_type_: {String} 弹层关闭的来源<br>_e_: {Object} DOM 事件 | Function | func.noop |
| target | 弹层定位的参照元素 | any | Position.VIEWPORT |
| align | 弹层相对于参照元素的定位, 详见开发指南的[定位部分](#定位) | String/Boolean | 'tl bl' |
| offset | 弹层相对于参照元素定位的微调 | Array | [0, 0] |
| offset | 弹层相对于trigger的定位的微调, 接收数组[hoz, ver], 表示弹层在 left / top 上的增量<br>e.g. [100, 100] 表示往右(RTL 模式下是往左) 、下分布偏移100px | Array | [0, 0] |
| container | 渲染组件的容器，如果是函数需要返回 ref，如果是字符串则是该 DOM 的 id，也可以直接传入 DOM 节点 | any | - |
| hasMask | 是否显示遮罩 | Boolean | false |
| canCloseByEsc | 是否支持 esc 按键关闭弹层 | Boolean | true |
Expand Down
3 changes: 2 additions & 1 deletion src/balloon/balloon.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,8 @@ export default class Balloon extends React.Component {
*/
align: PropTypes.oneOf(alignList),
/**
* 弹层相对于trigger的定位的微调
* 弹层相对于trigger的定位的微调, 接收数组[hoz, ver], 表示弹层在 left / top 上的增量
* e.g. [100, 100] 表示往右(RTL 模式下是往左) 、下分布偏移100px
*/
offset: PropTypes.array,
/**
Expand Down
Loading

0 comments on commit 52329aa

Please sign in to comment.