body { overflow: hidden; } :global(.button) { position: absolute; left: 50px; bottom: 50px; } :global(.anchor) { position: absolute; width: 10px; height: 10px; } :global(.topLeft) { left: 0; top: 0; background-color: red; } :global(.topRight) { right: 0; top: 0; background-color: blue; } :global(.bottomLeft) { left: 0; bottom: 0; background-color: green; } :global(.bottomRight) { right: 0; bottom: 0; background-color: orange; }
import React, {Component} from 'react'; import {render} from 'react-dom'; import classNames from 'classnames'; import Popup from '@jetbrains/ring-ui/components/popup/popup'; const {Directions} = Popup.PopupProps; const directionMap = { topLeft: Directions.BOTTOM_RIGHT, topRight: Directions.BOTTOM_LEFT, bottomLeft: Directions.TOP_RIGHT, bottomRight: Directions.TOP_LEFT } const directionKeys = Object.keys(directionMap); const initialState = directionKeys.reduce((acc, key) => { acc[key] = true; return acc; }, {}); class PopupExample extends Component { state = initialState; renderPopup = key => (
); showAgain = () => setTimeout(() => { this.setState({bottomLeft: true}); }); render() { return (
{directionKeys.map(this.renderPopup)}
); } } render(, document.getElementById('example'));
:global(.message) { position: absolute; top: 50%; left: 300px; } :global(.vert) { top: 20%; width: 150px; } :global(.anchor) { position: absolute; } :global(.left) { left: 0; top: 50px; } :global(.right) { right: 0; top: 50px; } :global(.bottom) { left: 150px; bottom: 0; } :global(.top) { right: 150px; top: 0; }
import React from 'react'; import {render} from 'react-dom'; import Popup from '@jetbrains/ring-ui/components/popup/popup'; const Directions = Popup.PopupProps.Directions; const content = This is a popup; const example = (
Popup should change open direction when reaching window borders {content}
Popup should change open direction when reaching window borders {content}
Left side open popup {content}
Right side open popup {content}
Downside open popup {content}
Upside open popup {content}
); render(example, document.getElementById('example'));
:global(.parent-popup) { width: 100px; height: 100px; text-align: center; } :global(.child-popup) { background-color: red; text-align: center; margin: 8px; }
import React, {Component} from 'react'; import {render} from 'react-dom'; import Popup from '@jetbrains/ring-ui/components/popup/popup'; class PopupBox extends Component { state = {hidden: false}; render() { return ( this.setState({hidden: true})} >{this.props.children} ); } } const example = (
Parent popup anchor
This is a parent popup
This is a child popup
); render(example, document.getElementById('example'));
body { margin: 0; } :global(.container) { height: 100vh; overflow: auto; } :global(.example) { height: 200vh; display: inline-block; } .anchor{ display: inline-block; }
import React from 'react'; import {render} from 'react-dom'; import Popup from '@jetbrains/ring-ui/components/popup/popup'; const example = (
Popup anchor Popup content
); render(example, document.getElementById('example'));
body { margin: 0; } :global(html), :global(body) { height: 100%; } :global(.popupContent) { height: 1300px; padding: 8px; display: flex; flex-direction: column; justify-content: space-between; } :global(.anchorBottom) { position: absolute; bottom: 20px; }
import React from 'react'; import {render} from 'react-dom'; import Popup from '@jetbrains/ring-ui/components/popup/popup'; const example = (
Popup anchor on bottom
Popup top
popup bottom
); render(example, document.getElementById('example'));