:global(.container) { width: 240px; display: flex; flex-direction: column; align-items: flex-start; } :global(.container > * ~ *) { margin-top: 8px; } :global(.hub-link) { text-align: center; } :global(.hub-icon) { margin: 16px 0 8px; } import React, {Component} from 'react'; import {render} from 'react-dom'; import classNames from 'classnames'; import Link, {linkHOC, setCompatibilityMode} from '@jetbrains/ring-ui/components/link/link'; import Icon from '@jetbrains/ring-ui/components/icon/icon'; import Toggle from '@jetbrains/ring-ui/components/toggle/toggle'; import hubLogo from '@jetbrains/logos/hub/hub.svg'; class CustomComponent extends Component { render() { const {active, activeClassName, className,...props} = this.props; const classes = classNames(className, { [activeClassName]: active }); return ( ); } } const CustomLink = linkHOC(CustomComponent); class LinkDemo extends Component { state = {compatibility: false}; changeCompatibility = () => { setCompatibilityMode(!this.state.compatibility); this.setState({compatibility: !this.state.compatibility}); }; render() { return (
Ordinary link Active link (inherits color) Pseudo link (no underline on hover) Custom link component Active custom link component Link with a very long text, wrapping over lines {WrapText => [ ,
Link with non-text content
]} Compatibility mode
); } } render(, document.getElementById('link'));