Displays an island.
Displays an island.
<div id="island"></div>
import {render} from 'react-dom';
import React from 'react';
import Island, {Header, Content} from '@jetbrains/ring-ui/components/island/island';
const renderIslandDemo = () => (
<Island>
<Header border>Title</Header>
<Content>Content</Content>
</Island>
);
render(renderIslandDemo(), document.getElementById('island'));
<div id="island"></div>
:global(.limited-island) {
height: 200px;
width: 200px;
}
import {render} from 'react-dom';
import React from 'react';
import Island, {Header, Content} from '@jetbrains/ring-ui/components/island/island';
const renderIslandDemo = () => (
<Island className="limited-island" narrow>
<Header border>Title</Header>
<Content fade>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text ever
since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has survived not only five
centuries, but also the leap into electronic typesetting, remaining
essentially unchanged.
</Content>
</Island>
);
render(renderIslandDemo(), document.getElementById('island'));
<div id="island"></div>
:global(.limited-island) {
height: 200px;
width: 200px;
}
import {render} from 'react-dom';
import React from 'react';
import {AdaptiveIsland, Header, Content, HeaderResizer} from '@jetbrains/ring-ui/components/island/island';
const renderIslandDemo = () => (
<AdaptiveIsland className="limited-island" narrow>
<Header>Title</Header>
<Content fade>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text ever
since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has survived not only five
centuries, but also the leap into electronic typesetting, remaining
essentially unchanged.
</Content>
</AdaptiveIsland>
);
render(renderIslandDemo(), document.getElementById('island'));