vdux-position
Positioning component. Use this to position elements in complex ways relative to other elements (e.g. tooltips).
Last updated 4 years ago by ashaffer88 .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install vdux-position 
SYNC missed versions from official npm registry.

position

js-standard-style

Positioning component. Use this to position elements in complex ways relative to other elements (e.g. tooltips).

Installation

$ npm install vdux-position

Usage

You can use Position to display things like tooltips that need to be positioned relative to some other element. E.g.

import Hover from 'vdux-hover'
import Position from 'vdux-position'

function Tooltip ({path, props, children}) {
  const {placement, message} = props

  return (
    <span id={path}>
      <Hover>
        {children}
        {
          hover => hover && (
            <Position placement={placement} near={path}>
              <div class='tooltip'>{message}</div>
            </Position>
          )
        }
      </Hover>
    </span>
  )
}

API - props

  • placement - top/left/bottom/right. Where to put the element relative to the near element.
  • near - The string ID of the element you want to position <Postion/>s child near. If unspecified, the nearest positioned element will be used.
  • children - You may only pass one child to position. Its child will be rendered around the near element.
  • disable - Disable the positioning (e.g. if the thing isn't shown yet).

License

MIT

Current Tags

  • 1.1.0                                ...           latest (4 years ago)

6 Versions

  • 1.1.0                                ...           4 years ago
  • 1.0.5                                ...           5 years ago
  • 1.0.3                                ...           5 years ago
  • 1.0.2                                ...           5 years ago
  • 1.0.1                                ...           5 years ago
  • 1.0.0                                ...           5 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (1)
Dev Dependencies (11)

Copyright 2014 - 2016 © taobao.org |