# @xme-react/web-frame

> 滑出容器

Latest version **1.0.0** (published 2019-03-21) · ISC license · 0 weekly downloads

## Install

```sh
npm install @xme-react/web-frame
pnpm add @xme-react/web-frame
yarn add @xme-react/web-frame
bun add @xme-react/web-frame
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2019-03-21 |
| First published | 2019-03-21 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 9 |
| Unpacked size | 55.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | shinemo |

## Links

- npm: https://www.npmjs.com/package/@xme-react/web-frame
- Repository: git@gitlab.shinemo.com:zhuwei.zw/@xm/WebFrame
- npm.io page: https://npm.io/package/@xme-react/web-frame

## Dependencies (9)

- [react](https://npm.io/package/react.md) ^16.4.1
- [es5-shim](https://npm.io/package/es5-shim.md) ^4.5.9
- [react-dom](https://npm.io/package/react-dom.md) ^16.4.1
- [classnames](https://npm.io/package/classnames.md) ^2.2.5
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.2
- [normalize.css](https://npm.io/package/normalize.css.md) ^7.0.0
- [export-from-ie8](https://npm.io/package/export-from-ie8.md) ^1.0.5
- [console-polyfill](https://npm.io/package/console-polyfill.md) ^0.3.0
- [es3ify-webpack-plugin](https://npm.io/package/es3ify-webpack-plugin.md) ^0.0.1

## Recent versions

- 1.0.0 (latest) — 2019-03-21

## README

### 查看详情组件 / WebFrame

#### 使用

| 参数      |     类型 |   备注   |
| :-------- | --------:| :------: |
| cls    |   String |  自定义容器样式  |
| titleCls    |   String |  自定义顶部区域样式, `在这个class中设置高度将不会生效，请使用下面的titleHeight设置高度`  |
| titleHeight    |   Number |  设置顶部区域高度  |
| url    |   String |  要展示的url  |
| visible    |   Bool |  是否显示 |
| title    |   String|Boolean |  顶部标题，设置为`false`不显示title  |
| width    |   String |  展示容器的宽度，默认`300px`  |
| onClose    |   Function |  点击关闭的回调  |
| closable|  Bool | 容器是否可关闭，容器没有关闭按钮，默认`true`|
| autoClose | Bool | 点击容器外的地方是否关闭容器，如果`closable`不为`true`，此参数无效|
| direction | String | webFrame的位置，默认`right`, 可选`top`,`right`,`bottom`,`left`|

```js
import React from 'react'
import ReactDOM from 'react-dom'
import WebFrame from '@xm/WebFrame'

class App extends React.Component {
  constructor (props) {
    super(props)

    this.index = 0
    this.directions = ['top', 'right', 'bottom', 'left']

    this.state = {
      visible: false,
      index: -1,
      renderWebFrame: true,
      direction: this.directions[this.index],
      urls: [
        {
          title: '百度',
          url: 'http://m.baidu.com'
        },
        {
          title: '天猫',
          url: 'http://m.tmall.com'
        },
        {
          title: '淘宝',
          url: 'http://m.taobao.com'
        }]
    }

    this.hide = this.hide.bind(this)
    this.show = this.show.bind(this)
    this.change = this.change.bind(this)
    this.unmount = this.unmount.bind(this)
    this.switchDirection = this.switchDirection.bind(this)
  }

  change () {
    const {urls} = this.state
    let {index} = this.state
    const len = urls.length

    index = index + 1 >= len ? 0 : index + 1

    this.setState({
      visible: true,
      index
    })
  }

  show () {
    this.setState({
      visible: true,
      renderWebFrame: true
    })
  }

  hide () {
    this.setState({
      visible: false
    })
  }

  unmount () {
    this.setState({
      renderWebFrame: false
    })
  }

  switchDirection () {
    if (this.index + 1 === this.directions.length) {
      this.index = 0
    } else {
      this.index += 1
    }

    this.setState({
      direction: this.directions[this.index]
    })
  }

  render () {
    const {visible, urls, index, renderWebFrame, direction} = this.state
    const width = (this.index === 1 || this.index === 3) ? '400px' : '100%'
    const height = (this.index === 1 || this.index === 3) ? '100%' : '400px'

    return (
      <div>
        <button onClick={this.change}>切换</button>
        <button onClick={this.show}>显示</button>
        <button onClick={this.hide}>隐藏</button>
        <button onClick={this.unmount}>销毁</button>
        <button onClick={this.switchDirection}>修改出现的方向</button>
        {
          renderWebFrame ?
            <WebFrame visible={visible} autoClose closable direction={direction}
                      url={urls[index] && urls[index].url} width={width} height={height}
                      title={false} onClose={this.hide} />
            : null
        }

      </div>
    )
  }
}

window.addEventListener('DOMContentLoaded', () => {
  ReactDOM.render(<App />, document.body)
})

```

---
_Source: https://npm.io/package/@xme-react/web-frame · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._