Dropdown

Dropdown

<div id="dropdown"></div>

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 = (
<Dropdown
  anchor="Click me"
>
  <Popup>Popup content</Popup>
</Dropdown>
);

render(dropdown, container);

Dropdown with custom anchor and popup

<div id="dropdown"></div>

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 = (
  <Dropdown
    anchor={<Button delayed>Edit</Button>}
    >
    <PopupMenu
      closeOnSelect
      data={actions.map(label => ({label}))}
    />
  </Dropdown>
);

render(dropdown, container);

Dropdown with activeClassName

<div id="dropdown"></div>

: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 = (
  <Dropdown
    className="chevron"
    activeClassName="rotated"
    anchor={<Button icon={ChevronDownIcon}/>}
  >
    <Popup>Popup content</Popup>
  </Dropdown>
);

render(dropdown, container);

Dropdown with hover mode

<div id="dropdown"></div>

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 = (
<Dropdown
  anchor="Hover over me"
  hoverMode
>
  <Popup>
    <div>Outer popup</div>
    <Popup>Inner popup</Popup>
  </Popup>
</Dropdown>
);

render(dropdown, container);

Dropdown with hover mode and disabled click mode

<div id="dropdown"></div>

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 = (
<Dropdown
  anchor={<Link href="#hash">Hover over me</Link>}
  clickMode={false}
  hoverMode
>
  <Popup>Popup content</Popup>
</Dropdown>
);

render(dropdown, container);