import {render} from 'react-dom'; import React from 'react'; import Dropdown from '@jetbrains/ring-ui/components/dropdown/dropdown'; import Popup from '@jetbrains/ring-ui/components/popup/popup'; const container = document.getElementById('dropdown'); const dropdown = ( Popup content ); render(dropdown, container); import {render} from 'react-dom'; import React from 'react'; import Dropdown from '@jetbrains/ring-ui/components/dropdown/dropdown'; import Button from '@jetbrains/ring-ui/components/button/button'; import PopupMenu from '@jetbrains/ring-ui/components/popup-menu/popup-menu'; const container = document.getElementById('dropdown'); const actions = ['Cut', 'Copy', 'Paste']; const dropdown = ( Edit} > ({label}))} /> ); render(dropdown, container); :global(.chevron) svg { transition: transform 0.3s ease-out; transform-origin: 50% 40%; transform: rotate(0deg); } :global(.rotated) svg { transform: rotate(180deg); } import {render} from 'react-dom'; import React from 'react'; import Dropdown from '@jetbrains/ring-ui/components/dropdown/dropdown'; import Popup from '@jetbrains/ring-ui/components/popup/popup'; import Button from '@jetbrains/ring-ui/components/button/button'; import {ChevronDownIcon} from '@jetbrains/ring-ui/components/icon'; const container = document.getElementById('dropdown'); const dropdown = ( } > Popup content ); render(dropdown, container); import {render} from 'react-dom'; import React from 'react'; import Dropdown from '@jetbrains/ring-ui/components/dropdown/dropdown'; import Popup from '@jetbrains/ring-ui/components/popup/popup'; const container = document.getElementById('dropdown'); const dropdown = (
Outer popup
Inner popup
); render(dropdown, container);
import {render} from 'react-dom'; import React from 'react'; import Dropdown from '@jetbrains/ring-ui/components/dropdown/dropdown'; import Popup from '@jetbrains/ring-ui/components/popup/popup'; import Link from '@jetbrains/ring-ui/components/link/link'; const container = document.getElementById('dropdown'); const dropdown = ( Hover over me} clickMode={false} hoverMode > Popup content ); render(dropdown, container);