Перейти к основному содержимому

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 разрабатываемого проекта или встроенных CSS-стилей Атомкод.

Пример:

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

Тип: array

Color​

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

Тип: string

CombineConfig​

Служебное свойство, используемое в визуальном режиме Редактора Форм, для присваивания значений свойствам компонента в виде генерируемых блоков кода. Описывает код вызова действий типа Static, код вызова действий, описанных в параметре subscribe источника данных, а также переход к экранной форме с настроенными параметрами маршрутизации.

Тип: object

Counter​

Отображение счетчика (числа в кружочке) рядом со ссылкой. Устаревшее свойство. Для отображения счетчика рекомендуется использовать свойство Badge.

Тип: any

Dashed​

Признак ссылки с подчеркиванием.

Тип: boolean

Decoration​

Признак подчеркивания ссылки при наведении курсора мыши: true — ссылка подчеркнута; false — ссылка не подчеркнута.

Тип: boolean

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

Disabled​

Признак неактивного состояния ссылки.

Тип: boolean

DownloadFileName​

Имя файла для загрузки.

Тип: string

DownloadId​

Идентификатор файла.

Тип: string

DownloadMode​

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

Тип: enum

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

Возможные значения:

Download -
Скачивание файла по идентификатору
Open -
Открытие страницы по ссылке в новом окне

DownloadToken​

Токен файла.

Тип: string

Hidden​

Признак состояния компонента Скрыт: true — компонент скрыт; false — компонент отображается.

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

Именованное пространство во фрагменте экранной формы или именованное пространство в шаблоне компонента с возможностью шаблонизации, например, Select, DataGrid.

Тип: string

Text​

Текст ссылки

Тип: string

Tooltip​

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

Тип: any

TraceId​

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

Тип: string

Value​

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

Тип: any

Visible​

Признак инверсии состояния компонента Скрыт: true — компонент отображается; false — компонент скрыт.

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