Link

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

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

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

<Link
  Mode="Link"
  Text="Click me"
  Dashed={true}
  Badge={{
    counter: 800,
    position: "pre",
    color: "info",
  }}
  Icon={'static/icons/Logo_Default.svg'}
  Value="https://www.rosatom.ru/"
/>

Свойства

Badge

Количественная информация в компонентах Menu, Accordion, Link, Text.

В качестве значения может использоваться объект с полями: counter (число), position ("post" или "pre"), color (цвет)

Тип: any

CSS

Массив строк-классов CSS-стилей, описанных в файле CSS.css DevTools-проекта или встроенных CSS-стилей Платформы. Пример: // CSS-стиль, определяющий внешние (m) и внутренние (p) отступы для компонента. Число после символа "-" (в этом примере - 4) должно быть кратно величине, указанной в параметре, определяющем кратность отступов, в файле Style.mdtheme DevTools-проекта CSS={["m-4", "p-4"]}

Тип: array

Color

Цвет шрифта группы: значение RGBA или значение из палитры согласно дизайн-системе Платформы, например, MAIN_5

Тип: string

CombineConfig

Служебное свойство, используемое в визуальном режиме Редактора Форм, для присваивания значений свойствам компонента в виде генерируемых фрагментов кода. Запрещено изменять значение

Тип: object

Counter

Отображение счетчика (числа в кружочке) рядом со ссылкой - deprecated, будет удален в последующих версиях, использовать свойство Badge

Тип: 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 или значение из палитры согласно дизайн-системе Платформы, например, MAIN_5

Тип: string

Icon

URL-адрес значка, отображаемого слева от ссылки. Если URL-адрес не указан и свойство ShowIcon установлено в true, отображается значок по умолчанию. SVG-файл рекомендуется размещать в папке public/static/icons. Значок имеет такой же цвет, как и ссылка

Тип: any

Id

Идентификатор компонента для навигации к нему на HTML-странице. Подробнее см. HTML id Attribute или ID

Тип: 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

Обработчик события нажатия любой клавиши клавиатуры. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа KeyboardEvent. Пример: OnKeyDown={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnKeyUp

Обработчик события отпускания любой клавиши клавиатуры. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа KeyboardEvent. Пример: OnKeyUp={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnMouseDown

Обработчик события нажатия любой кнопки мыши, когда указатель мыши находится на компоненте. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseDown={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnMouseEnter

Обработчик события перемещения указателя мыши на компонент. Событие срабатывает только в случае, если указатель мыши находится за пределами компонента и пользователь перемещает указатель мыши внутрь компонента. Если указатель мыши в текущий момент находится внутри компонента, для срабатывания события пользователь должен переместить указатель мыши за пределы компонента, а затем обратно внутрь компонента. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseEnter={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnMouseLeave

Обработчик события перемещения указателя мыши за пределы компонента. Событие срабатывает, только если указатель мыши находится внутри компонента, а пользователь перемещает указатель мыши за пределы компонента. Если указатель мыши в текущий момент находится за пределами компонента, для срабатывания события пользователь должен переместить указатель мыши внутрь компонента, а затем обратно за пределы компонента. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseLeave={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnMouseMove

Обработчик события наведения указателя мыши на компонент. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseMove={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnMouseOut

Обработчик события перемещения указателя мыши за пределы компонента. Когда пользователь наводит указатель мыши на компонент, происходит одно событие MouseOver, за которым следует одно или несколько событий MouseMove, когда пользователь перемещает указатель мыши внутри компонента. Одно событие MouseOut возникает, когда пользователь выводит указатель мыши за пределы компонента. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseOut={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnMouseOver

Обработчик события перемещения указателя мыши на компонент. Событие возникает, когда пользователь наводит указатель мыши на компонент, и не повторяется до тех пор, пока пользователь не выведет указатель мыши за пределы компонента и затем не вернет его обратно. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseOver={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnMouseUp

Обработчик события отпускания кнопки мыши, когда указатель мыши находится на компоненте. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseUp={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnUnmount

Обработчик события размонтирования согласно жизненному циклу экранной формы. Не имеет параметров. Пример:

OnUnmount={() => { // Отмена выполнения периодического действия при размонтировании экранной формы return clearInterval(getValue("pleerInterval")) } }

Тип: undefined

Slot

Именованное пространство во фрагменте экранной формы.

Тип: string

Text

Текст ссылки

Тип: string

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

Тип: any

TraceId

Идентификатор для отслеживания состояния компонента исходя из жизненного цикла экранной формы. Используется для выполнения фрагмента кода по изменению состояния компонента

Тип: string

Value

URL-адрес для перехода или данные, которые записываются в OutputValue по щелчку мыши на ссылке

Тип: any

Visible

Признак инверсии состояния компонента Скрыт

Тип: boolean

Значение по умолчанию: True

Примеры

JSX:

<Group Mode="Wrap" Height="auto">
    <Group Mode="Row" Height="auto" CSS={['mb-48', 'px-8']}>
      <Group Mode="Column" Width="220px">
        <Text Mode="Medium_20" Value="Link" CSS={['mb-24']} />
        <Text Mode="Regular_14_2" Value="Переход на другую страницу" />
      </Group>
  
      <Group Mode="Column" Width="150px">
        <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" Width="150px">
        <Text Mode="Medium_18" Value="Icon+Text" CSS={['mb-24']} />
        <Link  CSS={['mb-16', 'demo']} Icon="link" Value="p/modules/audit2" Text="Normal" />
        <Link  CSS={['mb-16', 'demo', 'demoHover']} Icon="link" Value="p/modules/audit2" Text="Hover" />
        <Link  CSS={['mb-16', 'demo', 'demoPressed']} Icon="link" Value="p/modules/audit2" Text="Pressed" />
        <Link Disabled={true}  CSS={['mb-16', 'demo']} Icon="link" Value="p/modules/audit2" Text="Disabled" />
      </Group>
  
      <Group Mode="Column" Width="190px">
        <Text Mode="Medium_18" Value="Icon+Text+Badge" CSS={['mb-24']} />
        <Link
          CSS={['mb-16', 'demo']}
          Icon="link" Value="p/modules/audit3"
          Text="Normal"
          Badge={{
            counter: 8,
            position: "pre",
          }}
        />
        <Link
          CSS={['mb-16', 'demo', 'demoHover']}
          Icon="link" Value="p/modules/audit3"
          Text="Hover"
          Badge={{
            counter: 80,
            position: "pre",
            color: "default",
          }}
        />
        <Link
          CSS={['mb-16', 'demo', 'demoPressed']}
          Icon="link" Value="p/modules/audit3"
          Text="Pressed"
          Badge={{
            counter: 800,
            position: "pre",
            color: "info",
          }}
        />
        <Link
          Disabled={true}
          CSS={['mb-16', 'demo']}
          Icon="link" Value="p/modules/audit3"
          Text="Disabled"
          Badge={{
            counter: 8000,
            position: "pre",
            color: "info",
          }}
        />
      </Group>
  
      <Group Mode="Column" Width="150px">
        <Text Mode="Medium_18" Value="Visited" CSS={['mb-24']} />
        <Link  CSS={['mb-16', 'demo', 'demoVisited']} Icon="link" Value="p/modules/audit4" Text="Normal" />
        <Link  CSS={['mb-16', 'demo', 'demoVisitedHover']} Icon="link" Value="p/modules/audit4" Text="Hover" />
        <Link  CSS={['mb-16', 'demo', 'demoVisitedPressed']} Icon="link" Value="p/modules/audit4" Text="Pressed" />
        <Link Disabled={true}  CSS={['mb-16', 'demo']} Icon="link" Value="p/modules/audit4" Text="Disabled" />
      </Group>
    </Group>
  
    <Group Mode="Row" Height="auto" CSS={['px-8']}>
      <Group Mode="Column" Width="220px">
        <Text Mode="Medium_20" Value="Pseudo Link" CSS={['mb-24']} />
        <Text Mode="Regular_14_2" Value="Действие без перехода на другую страницу" />
      </Group>
  
      <Group Mode="Column" Width="153px">
        <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" Width="149px">
        <Text Mode="Medium_18" Value="Icon+Text" CSS={['mb-24']} />
        <Link  CSS={['mb-16', 'demo']} Value="#2" Icon="link" Text="Normal" />
        <Link  CSS={['mb-16', 'demo', 'demoHover']} Value="#2" Icon="link" Text="Hover" />
        <Link  CSS={['mb-16', 'demo', 'demoPressed']} Value="#2" Icon="link" Text="Pressed" />
        <Link Disabled={true}  CSS={['mb-16', 'demo']} Value="#2" Icon="link" Text="Disabled" />
      </Group>
  
      <Group Mode="Column" Width="190px">
        <Text Mode="Medium_18" Value="Icon+Text+Badge" CSS={['mb-24']} />
        <Link
          CSS={['mb-16', 'demo']}
          Value="#3" Icon="link"
          Text="Normal"
          Badge={{
            counter: 8,
            position: "post",
            color: "criticalError",
          }}  
        />
        <Link
          CSS={['mb-16', 'demo', 'demoHover']}
          Value="#3" Icon="link"
          Text="Hover"
          Badge={{
            counter: 88,
            position: "post",
            color: "error",
          }}  
        />
        <Link
          CSS={['mb-16', 'demo', 'demoPressed']}
          Value="#3" Icon="link"
          Text="Pressed"
          Badge={{
            counter: 888,
            position: "post",
            color: "warning",
          }}  
        />
        <Link
          Disabled={true}
          CSS={['mb-16', 'demo']}
          Value="#3"
          Icon="link"
          Text="Disabled"
          Badge={{
            counter: 8888,
            position: "post",
            color: "success",
          }} 
        />
      </Group>
  
      <Group Mode="Column">
        <Text Mode="Medium_18" Value="Visited" CSS={['mb-24']} />
        <Link  CSS={['mb-16', 'demo', 'demoVisited']} Value="#4" Icon="link" Text="Normal" />
        <Link  CSS={['mb-16', 'demo', 'demoVisitedHover']} Value="#4" Icon="link" Text="Hover" />
        <Link  CSS={['mb-16', 'demo', 'demoVisitedPressed']} Value="#4" Icon="link" Text="Pressed" />
        <Link Disabled={true}  CSS={['mb-16', 'demo']} Value="#4" Icon="link" Text="Disabled" />
      </Group>
    </Group>
  
      </Group>

Свойства​

Badge​

CSS​

Color​

CombineConfig​

Counter​

Dashed​

Decoration​

Disabled​

DownloadFileName​

DownloadId​

DownloadMode​

DownloadToken​

Hidden​

Hint​

HoveredColor​

Icon​

Id​

Mode​

OnClick​

OnKeyDown​

OnKeyUp​

OnMouseDown​

OnMouseEnter​

OnMouseLeave​

OnMouseMove​

OnMouseOut​

OnMouseOver​

OnMouseUp​

OnUnmount​

Slot​

Text​

Tooltip​

TraceId​

Value​

Visible​

Примеры​

Свойства

Badge

CSS

Color

CombineConfig

Counter

Dashed

Decoration

Disabled

DownloadFileName

DownloadId

DownloadMode

DownloadToken

Hidden

Hint

HoveredColor

Icon

Id

Mode

OnClick

OnKeyDown

OnKeyUp

OnMouseDown

OnMouseEnter

OnMouseLeave

OnMouseMove

OnMouseOut

OnMouseOver

OnMouseUp

OnUnmount

Slot

Text

Tooltip

TraceId

Value

Visible

Примеры