Link

Отображает ссылку

Используется для следующих типов ссылок:

• внутренняя ссылка;
• внешняя ссылка;
• ссылка на номер телефона;
• ссылка на адрес электронной почты;
• ссылка для скачивания файла. Имеет варианты отображения со значком, счетчиком, с подчеркиванием или без подчеркивания.

<Link
  Mode="Link"
  Text="Click me"
  Dashed={true}
  
  Counter={9999999}
  Icon={'static/icons/Logo_Default.svg'}
  Value="https://www.ase-ec.ru/"
/>

Свойства

Имя	Описание	Тип	Значение по умолчанию	Возможные значения
CSS	Массив строк-классов CSS-стилей компонента	array
Color	Цвет шрифта группы: значение RGBA или значение из палитры согласно дизайн-системе Платформы Multi-D, например, MAIN_5	string
Counter	Отображение счетчика (числа в кружочке) рядом со ссылкой	any
Dashed	Признак ссылки с подчеркиванием	boolean
Decoration	Признак для компонента, который не будет подчеркнут при наведении курсора мыши	boolean	True
Disabled	Признак неактивного состояния	boolean
DownloadFileName	Имя файла для загрузки	string
DownloadId	Идентификатор файла	string
DownloadMode	Режим скачивания или открытия файла по нажатию мышью ссылки	enum	Download	Download - Скачивание файла по идентификатору Open - Открытие страницы по ссылке в новом окне
DownloadToken	Токен	string
Hidden	Признак состояния компонента Скрыт	boolean
Hint	Всплывающая подсказка над компонентом, чаще используемая для подробного пояснения краткого текста	any
HoveredColor	Цвет шрифта группы при наведении указателя мыши: значение RGBA или значение из палитры согласно дизайн-системе Платформы Multi-D, например, MAIN_5	string
Icon	URL-адрес значка, отображаемого слева от ссылки. Если URL-адрес не указан и свойство ShowIcon установлено в true, отображается значок по умолчанию. SVG-файл рекомендуется размещать в папке public/static/icons. Значок имеет такой же цвет, как и ссылка	any
Id	Идентификатор компонента для навигации к нему на HTML-странице	string
Mode	Режим работы компонента Link: обертка с событием OnClick, внешняя ссылка, ссылка на номер телефона, ссылка на адрес электронной почты, ссылка для скачивания файла	enum	Default	Email - Ссылка для отправки электронной почты Phone - Ссылка для совершения звонка Link - Ссылка на внешний ресурс InternalLink - Ссылка для перехода на внутреннюю страницу приложения по URL-адресу, сохраненному в Value Default - Привязка отрисованного компонента к модели ExternalLink - Ссылка на файл, ссылка на внешний ресурс; открывается в новой вкладке браузера Anchor - Ссылка для перехода к элементу на странице с определенным идентификатором согласно Link.Value DownloadByURL - Скачивание файла, ссылка на который указана в атрибуте Value ссылки DownloadByToken - Скачивание файла по токену DownloadById - Скачивание файла по идентификатору Back - Переход на предыдущую страницу согласно истории посещений
OnClick	Обработчик события перехода по ссылке	undefined
OnKeyDown	Обработчик события KeyDown	undefined
OnKeyUp	Обработчик события KeyUp	undefined
OnMouseDown	Обработчик события MouseDown	undefined
OnMouseEnter	Обработчик события MouseEnter	undefined
OnMouseLeave	Обработчик события MouseLeave	undefined
OnMouseMove	Обработчик события MouseMove	undefined
OnMouseOut	Обработчик события MouseOut	undefined
OnMouseOver	Обработчик события MouseOver	undefined
OnMouseUp	Обработчик события MouseUp	undefined
OnUnmount	Обработчик события Unmount	undefined
ShowIcon	Признак отображения значка	boolean
Slot	Метка для динамического добавления другого компонента по его идентификатору	string
Text	Текст ссылки	string
Tooltip	Всплывающая подсказка над компонентом, чаще используемая для пояснения назначения значка	any
TraceId	Идентификатор для отслеживания состояния компонента исходя из хронологической последовательности: создание, отрисовка, обновление, удаление; используется для выполнения фрагмента кода по изменению состояния компонента	string
Value	URL-адрес для перехода или данные, которые записываются в OutputValue по нажатию мышью ссылки	any
Visible	Признак инверсии состояния компонента Скрыт	boolean	True

Примеры

JSX:

<Group Mode="Wrap" Height="auto">
    <Group Mode="Row" Height="auto" CSS={['mb-48']}>
      <Group Mode="Column" Width="225px">
        <Text Mode="Medium_20" Value="Link" CSS={['mb-24']} />
        <Text Mode="Regular_14_2" Value="Переход на другую страницу." />
      </Group>
  
      <Group Mode="Column">
        <Text Mode="Medium_18" Value="Text" CSS={['mb-24']} />
        <Link Text="Normal" CSS={['mb-16', 'demo']} Value="p/modules/audit1" />
        <Link Text="Hover" CSS={['mb-16', 'demo', 'demoHover']} Value="p/modules/audit1" />
        <Link Text="Pressed" CSS={['mb-16', 'demo', 'demoPressed']} Value="p/modules/audit1" />
        <Link Disabled={true} Text="Disabled" CSS={['mb-16', 'demo']} Value="p/modules/audit1" />
      </Group>
  
      <Group Mode="Column">
        <Text Mode="Medium_18" Value="Icon+Text" CSS={['mb-24']} />
        <Link  CSS={['mb-16', 'ml-20', 'demo']} Icon={'static/icons/link.svg'} Value="p/modules/audit2" Text="Normal" />
        <Link  CSS={['mb-16', 'ml-20', 'demo', 'demoHover']} Icon={'static/icons/link.svg'} Value="p/modules/audit2" Text="Hover" />
        <Link  CSS={['mb-16', 'ml-20', 'demo', 'demoPressed']} Icon={'static/icons/link.svg'} Value="p/modules/audit2" Text="Pressed" />
        <Link Disabled={true}  CSS={['mb-16', 'ml-20', 'demo']} Icon={'static/icons/link.svg'} Value="p/modules/audit2" Text="Disabled" />
      </Group>
  
      <Group Mode="Column">
        <Text Mode="Medium_18" Value="Icon+Text+Badge" CSS={['mb-24']} />
        <Link  CSS={['mb-16', 'ml-20', 'demo']} Icon={'static/icons/link.svg'} Value="p/modules/audit3" Counter={8} Text="Normal" />
        <Link  CSS={['mb-16', 'ml-20', 'demo', 'demoHover']} Icon={'static/icons/link.svg'} Value="p/modules/audit3" Counter={8} Text="Hover" />
        <Link  CSS={['mb-16', 'ml-20', 'demo', 'demoPressed']} Icon={'static/icons/link.svg'} Value="p/modules/audit3" Counter={8888} Text="Pressed" />
        <Link Disabled={true}  CSS={['mb-16', 'ml-20', 'demo']} Icon={'static/icons/link.svg'} Value="p/modules/audit3" Counter={8} Text="Disabled" />
      </Group>
  
      <Group Mode="Column">
        <Text Mode="Medium_18" Value="Visited" CSS={['mb-24']} />
        <Link  CSS={['mb-16', 'ml-20', 'demo', 'demoVisited']} Icon={'static/icons/link.svg'} Value="p/modules/audit4" Counter={8} Text="Normal" />
        <Link  CSS={['mb-16', 'ml-20', 'demo', 'demoVisitedHover']} Icon={'static/icons/link.svg'} Value="p/modules/audit4" Counter={8} Text="Hover" />
        <Link  CSS={['mb-16', 'ml-20', 'demo', 'demoVisitedPressed']} Icon={'static/icons/link.svg'} Value="p/modules/audit4" Counter={8} Text="Pressed" />
        <Link Disabled={true}  CSS={['mb-16', 'ml-20', 'demo']} Icon={'static/icons/link.svg'} Value="p/modules/audit4" Counter={8} Text="Disabled" />
      </Group>
    </Group>
  
    <Group Mode="Row" Height="auto">
      <Group Mode="Column" Width="225px">
        <Text Mode="Medium_20" Value="Pseudo Link" CSS={['mb-24']} />
        <Text Mode="Regular_14_2" Value="Действие без перехода на другую страницу." />
      </Group>
  
      <Group Mode="Column">
        <Text Mode="Medium_18" Value="Text" CSS={['mb-24']} />
        <Link CSS={['mb-16', 'demo']} Value="#1" Text="Normal" />
        <Link CSS={['mb-16', 'demo', 'demoHover']} Value="#1" Text="Hover" />
        <Link CSS={['mb-16', 'demo', 'demoPressed']} Value="#1" Text="Pressed" />
        <Link Disabled={true} CSS={['mb-16', 'demo']} Value="#1" Text="Disabled" />
      </Group>
  
      <Group Mode="Column">
        <Text Mode="Medium_18" Value="Icon+Text" CSS={['mb-24']} />
        <Link  CSS={['mb-16', 'demo', 'ml-20']} Value="#2" Icon={'static/icons/link.svg'} Text="Normal" />
        <Link  CSS={['mb-16', 'demo', 'ml-20', 'demoHover']} Value="#2" Icon={'static/icons/link.svg'} Text="Hover" />
        <Link  CSS={['mb-16', 'demo', 'ml-20', 'demoPressed']} Value="#2" Icon={'static/icons/link.svg'} Text="Pressed" />
        <Link Disabled={true}  CSS={['mb-16', 'ml-20', 'demo']} Value="#2" Icon={'static/icons/link.svg'} Text="Disabled" />
      </Group>
  
      <Group Mode="Column">
        <Text Mode="Medium_18" Value="Icon+Text+Badge" CSS={['mb-24']} />
        <Link  CSS={['mb-16', 'ml-20', 'demo']} Value="#3" Icon={'static/icons/link.svg'} Counter={8} Text="Normal" />
        <Link  CSS={['mb-16', 'ml-20', 'demo', 'demoHover']} Value="#3" Icon={'static/icons/link.svg'} Counter={8} Text="Hover" />
        <Link  CSS={['mb-16', 'ml-20', 'demo', 'demoPressed']} Value="#3" Icon={'static/icons/link.svg'} Counter={8} Text="Pressed" />
        <Link Disabled={true}  CSS={['mb-16', 'ml-20', 'demo']} Value="#3" Icon={'static/icons/link.svg'} Counter={8} Text="Disabled" />
      </Group>
  
      <Group Mode="Column">
        <Text Mode="Medium_18" Value="Visited" CSS={['mb-24']} />
        <Link  CSS={['mb-16', 'ml-20', 'demo', 'demoVisited']} Value="#4" Icon={'static/icons/link.svg'} Counter={8} Text="Normal" />
        <Link  CSS={['mb-16', 'ml-20', 'demo', 'demoVisitedHover']} Value="#4" Icon={'static/icons/link.svg'} Counter={8} Text="Hover" />
        <Link  CSS={['mb-16', 'ml-20', 'demo', 'demoVisitedPressed']} Value="#4" Icon={'static/icons/link.svg'} Counter={8} Text="Pressed" />
        <Link Disabled={true}  CSS={['mb-16', 'ml-20', 'demo']} Value="#4" Icon={'static/icons/link.svg'} Counter={8} Text="Disabled" />
      </Group>
    </Group>
  
      </Group>