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);
@value gray-color, link-hover-color from "../global/global.css";
:global(.chevron) {
display: inline-block;
color: gray-color;
transition: all 0.3s ease-out;
transform: rotate(0deg);
&:hover {
transition: transform 0.15s ease-out;
color: link-hover-color;
}
}
:global(.rotated) {
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 {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);