Активная ссылка — react-router-course-ru
react-router-course-ru
Search…
ОБНОВЛЕНИЕ 2018: в учебнике хорошая теория, но ему уже два года. Проверяйте версии пакетов. За выходом нового учебника можно следить в telegram канале или twitter
На канале так же проводятся бесплатные вебинары, публикуются переводы и авторские материалы, присоединяйтесь!
Кто не мечтал подкрасить активную ссылку — тот не делал сайтов (ц) — народная мудрость.
Однако, чтобы подкрасить ссылку, нам нужно куда-то положить стили. Для этого, еще раз взглянем на любой компонент из проекта redux-easy-boilerplate: cтили положены вместе с компонентом. Предлагаю делать так же.
Порефакторим
Создайте для всех компонентов свою директорию и положите в нее index.js файл. Файлы стилей будем добавлять по мере необходимости.
Необходимо создать директорию с названием, равным названию файла компонента, а сам файл компонента переименовать в index.js В таком случае, не придется даже изменять что-то в подключении роутов.
folders_with_indexjs
Создадим файл стилей для компонента (контейнера) <App />
src/containers/App/styles.
.active {
font-weight: bold;
Чтобы ссылка реагировала на активность, нужно добавить компоненту <Link /> атрибут activeClassName. Например:
<Link to=’/list’ activeClassName=’active’>Список жанров</Link>
Важно не забыть импортировать файл стилей. Обработка scss в конфиге вебпака уже прописана, поэтому остается лишь изменить содержимое <App />:
src/containers/App/index.js
import React, { Component } from ‘react’
import { Link } from ‘react-router’
import ‘./styles.scss’
export default class App extends Component {
render() {
return (
<div className=’container’>
<ul className=’nav nav-pills’>
<li><Link to=’/admin’ activeClassName=’active’>Админка</Link></li>
<li><Link to=’/list’ activeClassName=’active’>Список жанров</Link></li>
{this.
props.children}
</div>
Проверим?
active_link_screen
Туториал (EN) настаивает, чтобы я рассказал вам еще немного. Поэтому я приведу краткий перевод ниже.
Обычно вам не нужно, чтобы ссылки на сайте умели быть активными/не активными. Это требуется только для навигационных ссылок. Чтобы не писать activeClassName «ручками», можно сделать обертку над компонентом
Мы будем использовать spread-оператор (троеточие … , по-русски здесь). Он склонирует все props, а значит и activeClassName.
То что нам нужно.
Создадим компонент <NavLink /> (а так же, переместите styles.scss
src/components/NavLink/index.js
import React, { Component } from ‘react’
import { Link } from ‘react-router’
import ‘./styles.scss’
export default class NavLink extends Component {
render() {
return <Link {…this.props} activeClassName=’active’/>
Остается изменить <App />:
src/containers/App/index.
import React, { Component } from ‘react’
import NavLink from ‘../../components/NavLink’
export default class App extends Component {
render() {
return (
<div className=’container’>
<ul className=’nav nav-pills’>
<li><NavLink to=’/admin’>Админка</NavLink></li>
<li><NavLink to=’/list’>Список жанров</NavLink></li>
{this.props.children}
</div>
(удалили импорт <Link />, добавили <NavLink />, заменили все вхождения Link на NavLink)
Посмотрим на результат:
nav_link_with_active_class
Итого: чтобы ссылка «умела быть активной» — достаточно добавить activeClassName для компонента <Link />.
P.S. прием с оборачиванием компонента — очень мощный. Возьмите его на вооружение.
Исходный код на данный момент.
Previous
Дописываем роуты
Next
Ссылка на главную
Last modified 3yr ago
Активная ссылка CSS
Ссылка активна всякий раз, когда вы нажимаете на нее. Когда вы нажимаете на данную ссылку, она открывает связанную страницу. Мы можем создать любую ссылку в HTML и придать ей стиль с помощью CSS. CSS содержит различные свойства, такие как селектор «: active» для выбора и стилизации активных ссылок, селектор «: link» для стилизации непосещенных ссылок и селектор «visited» для стилизации посещенной страницы. В этом руководстве мы расскажем, как создавать ссылки в HTML и применять стили к созданным ссылкам с помощью CSS. Мы можем изменить цвет, цвет фона, размер шрифта или стиль шрифта ссылки с помощью CSS. Мы объясним все эти концепции в этом руководстве.
Откройте файл HTML для создания ссылок.
Для оформления этих ссылок мы создадим наш файл CSS. Мы используем студию визуального кода для выполнения этих примеров. Итак, мы создаем HTML-файл, здесь также указан HTML-код. После завершения кода сохраните его с расширением «.html».
В предыдущем HTML-коде мы создали три разные ссылки. Первая ссылка, которую мы создали, — это ссылка «google», вторая ссылка — ссылка «yahoo», а последняя ссылка — ссылка «firefox». Мы также стилизуем эти ссылки в CSS. Этот файл HTML предназначен только для создания этих ссылок. Теперь перейдите к следующему файлу CSS и посмотрите, как оформить эти ссылки.
Код CSS
На предыдущем изображении мы используем селектор «: active», который мы используем для придания стиля этой ссылке. Когда пользователь нажимает на эту ссылку, цвет фона ссылки становится «желтым». Затем у нас есть селектор «: ссылка», который стилизует непосещенную ссылку и меняет цвет непосещенной ссылки на «синий». На экране он будет «синим».
После этого используем селектор «:посетили», и этот селектор посещений меняет цвет посещенной ссылки на «фиолетовый». Наконец, у нас есть селектор «: hover», в котором мы меняем цвет ссылки на «красный», когда курсор перемещается по ссылке. Когда вы наводите указатель мыши на эти ссылки, цвет этих ссылок меняется на «красный». В этом примере мы изменили цвет ссылки при наведении на нее и переходе по ссылке или цвет непосещенной ссылки.
Выход
На предыдущем изображении вы видите три ссылки. Первые две ссылки окрашены в фиолетовый цвет, это означает, что эти две ссылки были посещены. Цвет третьей ссылки — «синий», что означает, что эта третья ссылка не посещается, поскольку мы устанавливаем эти цвета в коде CSS для посещенных и непосещенных ссылок. Когда мы наводим курсор на любую ссылку, ее цвет становится «красным». Когда мы нажимаем на любую ссылку, цвет фона ссылки становится «желтым». Когда мы нажимаем на первую ссылку google, на экране появляется страница google, как показано на следующем изображении:
Пример 2 Это еще один пример, где мы создаем ссылку между абзацами и присваиваем стили этой ссылке в CSS.
Давайте посмотрим, насколько активна ссылка между абзацами.
На предыдущем изображении вы можете видеть, что мы создали абзац с помощью HTML и добавили ссылку между абзацами. В этом примере мы будем использовать CSS для изменения цвета ссылки и абзаца.
Код CSS
В предыдущем файле CSS вы можете видеть, что мы изменили цвет ссылки на «синий» внутри фигурных скобок «: ссылка», поэтому эта ссылка будет отображаться синей между абзацами. Затем мы используем «красный» цвет для посещенной ссылки. Для «наведения» мы выбираем цвет фона «желтый». «Активный» цвет ссылки установлен как «фиолетовый», а цвет активного абзаца обозначен как «#eee». Таким образом, когда ссылка активна, она меняет цвет ссылки, а также цвет фона абзаца.
Вывод
В этом первом выводе вы можете видеть, что цвет ссылки в абзаце выглядит «синим», поскольку мы установили его как «синий» в нашем файле CSS.
Во втором выводе цвет ссылки становится «красным», что означает, что мы посетили ссылку здесь, поэтому ее цвет меняется с «синего» на «красный».
В этом третьем примере мы изменим размер шрифта, стиль шрифта и цвета ссылки с помощью CSS. Для этого нам нужно создать разные ссылки в HTML.
В предыдущем HTML мы создали пять разных ссылок, используя разные классы внутри «». Мы даем имя класса как «ссылка1», «ссылка2», «ссылка3», «ссылка4» и «ссылка5». Мы используем эти имена, чтобы изменить стиль ссылки.
Код CSS
Мы используем имя класса «link1» и применяем стиль к этой первой ссылке. Первая ссылка отображается «красным», когда она «активна». Затем мы меняем «размер шрифта» второй ссылки. Когда мы наводим курсор на эту ссылку, размер этой ссылки увеличивается до «150%». Мы устанавливаем «фоновый цвет» третьей ссылки на «красный», поэтому цвет фона становится «красным», когда мы наводим курсор на третью ссылку. Мы меняем стиль шрифта четвертой ссылки, используя свойство «font-family». Мы используем «украшение текста» в пятой ссылке и устанавливаем для него значение «подчеркивание».
Результат показан.
Вывод
Этот вывод меняет свой цвет, когда мы наводим курсор на первую ссылку. Когда мы наводим курсор на вторую ссылку, размер ее шрифта меняется. Когда дело доходит до третьей ссылки, цвет ее фона меняется. Стиль шрифта меняется на «моноширинный», когда вы наводите курсор на четвертую ссылку.
Пример 4В этом примере мы создадим две кнопки со ссылками внутри кнопок. В первую кнопку помещаем ссылку «Gmail». Внутри второй кнопки помещаем ссылку «Facebook». Итак, когда вы нажмете на кнопку один, откроется страница Gmail. Когда вы нажмете вторую кнопку, откроется страница Facebook. Теперь мы также хотим применить стиль этих ссылок.
Когда эта ссылка активна, цвет этой ссылки становится «красным», поскольку мы помещаем «цвет: красный» в фигурные скобки селектора «: активный». Когда мы наводим курсор на эту ссылку, которая находится внутри кнопки, цвет кнопки становится «розовым», так как мы установили этот цвет в файле CSS.
После перехода по этим ссылкам цвет будет «синим», а цвет фона кнопки — «белым».
Вывод
Предыдущий вывод показывает две кнопки ссылок, в которых у нас есть две разные ссылки, и вы можете видеть, что цвет обеих ссылок «синий», что означает, что обе ссылки посещаются.
ЗаключениеВ этом руководстве мы узнали об «Активной ссылке». Мы применили разные стили к разным ссылкам, используя свойства CSS. Здесь мы выполнили четыре различных примера, так как знаем, что ссылка активна при нажатии. Здесь мы изменили стиль активной ссылки, размер шрифта ссылки при наведении на нее курсора и цвет после перехода по ссылке. В этом руководстве мы использовали разные цвета для посещенных и непосещенных ссылок. Мы научились детально стилизовать эти активные ссылки в CSS.
Ссылки — Inertia.js
Для создания ссылок на другие страницы в приложении Inertia обычно используется компонент Inertia .
Этот компонент является легкой оболочкой стандартной ссылки привязки , которая перехватывает события щелчка и предотвращает полную перезагрузку страницы. Вот как Inertia обеспечивает одностраничное приложение после его загрузки.
Создание звеньев
Для создания звена Inertia используйте инструмент Inertia компонент. Любые атрибуты, которые вы предоставляете этому компоненту, будут переданы базовому тегу HTML.
импорт {Ссылка} из '@inertiajs/vue3'
Главная По умолчанию Inertia отображает ссылки как элементы привязки . Однако вы можете изменить тег, используя атрибут как .
импорт {Ссылка} из '@inertiajs/vue3'
Выйти
// Визуализирует как...
Создание POST / PUT / PATCH / DELETE привязка ссылки не рекомендуется, так как это вызывает проблемы со доступом «Открыть ссылку в новой вкладке / окне».
.Метод
Вы можете указать метод HTTP-запроса для запроса ссылки Inertia, используя атрибут method . Метод по умолчанию, используемый ссылками, — GET 9.0122 , но вы можете использовать атрибут метода для выполнения запросов POST , PUT , PATCH и DELETE по ссылкам.
импорт {Ссылка} из '@inertiajs/vue3'
Выход Данные
При выполнении запросов POST или PUT вы можете добавить в запрос дополнительные данные. . Это можно сделать с помощью атрибута данных . Предоставленные данные могут быть объект или экземпляр FormData .
импорт {Ссылка} из '@inertiajs/vue3'
Сохранить Атрибут headers позволяет добавлять собственные заголовки к ссылке Inertia.
Однако вы должны отметить, что заголовки, которые Inertia использует внутри для передачи своего состояния серверу, имеют приоритет и поэтому не могут быть перезаписаны.
импорт {Ссылка} из '@inertiajs/vue3'
Сохранить История браузера
Атрибут заменяет позволяет указать поведение истории браузера. По умолчанию страница посещает состояние push (new) ( window.history.pushState ) в историю; однако также можно заменить состояние ( window.history.replaceState ), установив для атрибута replace значение true. Это приведет к тому, что посещение заменит текущее состояние истории вместо добавления нового состояния истории в стек.
импорт {Ссылка} из '@inertiajs/vue3'
Главная Сохранение состояния
Вы можете сохранить локальное состояние компонента страницы с помощью атрибута save-state .
Это предотвратит полную повторную визуализацию компонента страницы. Атрибут save-state особенно полезен при работе с формами, поскольку позволяет избежать ручного повторного заполнения полей ввода, а также может поддерживать сфокусированный ввод.
импорт {Ссылка} из '@inertiajs/vue3'
Поиск Сохранение прокрутки
Вы можете использовать атрибут save-scroll , чтобы запретить Inertia автоматически сбрасывать положение прокрутки при посещении страницы.
импорт {Ссылка} из '@inertiajs/vue3'
Главная Дополнительные сведения об управлении положением прокрутки см. в документации по управлению прокруткой.
Частичные перезагрузки
Атрибут only позволяет указать, что при последующих посещениях этой страницы с сервера следует извлекать только подмножество реквизитов страницы (данных).
импорт {Ссылка} из '@inertiajs/vue3'
Показать активные Для получения дополнительной информации по этой теме см. полную документацию по частичной перезагрузке.
Активные состояния
Часто желательно установить активное состояние для навигационных ссылок на основе текущей страницы. Это может быть достигнуто при использовании Inertia путем проверки объекта страницы и сравнения строк с page.url и page.component свойства.
импорт {Ссылка} из '@inertiajs/vue3'
// Точное совпадение URL...Пользователи // Точное соответствие компонента...Пользователи // URL-адрес начинается с (/users, /users/create, /users/1 и т. д.)...Пользователи // Компонент начинается с (Пользователи/Индекс, Пользователи/Создать, Пользователи/Показать и т.
