fui-material 2.7.5 → 2.7.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/f-ui-kit.es.js +13 -8
- package/dist/f-ui-kit.es.js.map +1 -1
- package/dist/f-ui-kit.umd.js +2 -2
- package/dist/f-ui-kit.umd.js.map +1 -1
- package/dist/index.css +1 -1
- package/dist/types/material/NavigateBarComponents/FNavigateBar/FNavigateBar.d.ts +8 -12
- package/dist/types/material/NavigateBarComponents/FNavigateBarItem/FNavigateBarItem.d.ts +10 -9
- package/package.json +1 -1
|
@@ -21,24 +21,20 @@ export interface IFNavigateBar {
|
|
|
21
21
|
className?: string;
|
|
22
22
|
}
|
|
23
23
|
/**
|
|
24
|
-
* Компонент `FNavigateBar` —
|
|
24
|
+
* Компонент `FNavigateBar` — стеклянная навигационная панель (Glassmorphism + Wave Effect).
|
|
25
25
|
*
|
|
26
26
|
* Содержит список пунктов меню в семантической обёртке `<nav>`.
|
|
27
27
|
* Поддерживает адаптивность через сетку (`FGrid`, `FGridRow`, `FGridItem`).
|
|
28
28
|
*
|
|
29
29
|
* @component
|
|
30
30
|
* @example
|
|
31
|
-
* const getActiveClass = (route: string) => {
|
|
32
|
-
* const pathMatch = matchPath({ path: route + '/*' }, location.pathname);
|
|
33
|
-
* return pathMatch ? 'nav-rout active' : 'nav-rout';
|
|
34
|
-
* };
|
|
35
|
-
*
|
|
36
31
|
* <FNavigateBar>
|
|
37
|
-
* <
|
|
38
|
-
* <
|
|
39
|
-
*
|
|
40
|
-
*
|
|
41
|
-
*
|
|
32
|
+
* <FNavigateBarItem activeClass={location.pathname === '/'}>
|
|
33
|
+
* <Link to="/" className="wave-nav-link">Главная</Link>
|
|
34
|
+
* </FNavigateBarItem>
|
|
35
|
+
* <FNavigateBarItem activeClass={location.pathname === '/about'}>
|
|
36
|
+
* <Link to="/about" className="wave-nav-link">О нас</Link>
|
|
37
|
+
* </FNavigateBarItem>
|
|
42
38
|
* </FNavigateBar>
|
|
43
39
|
*
|
|
44
40
|
* @param {React.CSSProperties} [st] - Инлайновые стили для `<nav>`.
|
|
@@ -46,7 +42,7 @@ export interface IFNavigateBar {
|
|
|
46
42
|
* @param {string} [id] - HTML ID для контейнера.
|
|
47
43
|
* @param {string} [className] - Кастомный класс для контейнера.
|
|
48
44
|
*
|
|
49
|
-
* @returns {JSX.Element} — Рендерит панель навигации
|
|
45
|
+
* @returns {JSX.Element} — Рендерит панель навигации со стеклянным фоном и эффектом размытия.
|
|
50
46
|
*/
|
|
51
47
|
declare const FNavigateBar: FC<IFNavigateBar>;
|
|
52
48
|
export default FNavigateBar;
|
|
@@ -2,18 +2,18 @@ import { FC } from "react";
|
|
|
2
2
|
/**
|
|
3
3
|
* Пропсы для компонента `FNavigateBarItem`
|
|
4
4
|
*/
|
|
5
|
-
export interface IFNavigateBarItem {
|
|
5
|
+
export interface IFNavigateBarItem extends React.LiHTMLAttributes<HTMLLIElement> {
|
|
6
6
|
/**
|
|
7
7
|
* Флаг, указывающий, является ли пункт меню активным.
|
|
8
8
|
*/
|
|
9
|
-
activeClass
|
|
9
|
+
activeClass?: boolean;
|
|
10
10
|
/**
|
|
11
11
|
* Путь или имя маршрута для проверки активности (необязательный).
|
|
12
12
|
* Может использоваться в будущем для расширения логики.
|
|
13
13
|
*/
|
|
14
14
|
route?: string;
|
|
15
15
|
/**
|
|
16
|
-
* Контент пункта меню (например,
|
|
16
|
+
* Контент пункта меню (например, текст, иконка или компонент Link).
|
|
17
17
|
*/
|
|
18
18
|
children?: React.ReactNode;
|
|
19
19
|
/**
|
|
@@ -30,24 +30,25 @@ export interface IFNavigateBarItem {
|
|
|
30
30
|
id?: string;
|
|
31
31
|
}
|
|
32
32
|
/**
|
|
33
|
-
* Компонент `FNavigateBarItem` — пункт горизонтального меню
|
|
33
|
+
* Компонент `FNavigateBarItem` — пункт горизонтального меню навигации с волновой анимацией.
|
|
34
34
|
*
|
|
35
|
-
* Отображает отдельный элемент меню (`<li>`), применяя стиль активности
|
|
35
|
+
* Отображает отдельный элемент меню (`<li>`), применяя стиль активности (волновой подъем,
|
|
36
|
+
* градиент #2F80ED, неоновую точку-индикатор) на основе переданного флага `activeClass`.
|
|
36
37
|
*
|
|
37
38
|
* @component
|
|
38
39
|
* @example
|
|
39
40
|
* <FNavigateBarItem activeClass={location.pathname === '/'}>
|
|
40
|
-
*
|
|
41
|
+
* <Link to="/" className="wave-nav-link">Главная</Link>
|
|
41
42
|
* </FNavigateBarItem>
|
|
42
43
|
*
|
|
43
|
-
* @param {boolean} activeClass - Определяет, является ли пункт активным.
|
|
44
|
+
* @param {boolean} [activeClass] - Определяет, является ли пункт активным.
|
|
44
45
|
* @param {string} [route] - Необязательный путь, может использоваться для динамической проверки.
|
|
45
|
-
* @param {React.ReactNode} [children] - Контент пункта меню (текст,
|
|
46
|
+
* @param {React.ReactNode} [children] - Контент пункта меню (текст, иконка, ссылка и т.д.).
|
|
46
47
|
* @param {string} [className] - Кастомный класс для дополнительной стилизации.
|
|
47
48
|
* @param {React.CSSProperties} [st] - Инлайновые стили.
|
|
48
49
|
* @param {string} [id] - HTML ID элемента.
|
|
49
50
|
*
|
|
50
|
-
* @returns {JSX.Element} — Рендерит `<li>` с
|
|
51
|
+
* @returns {JSX.Element} — Рендерит `<li>` с поддержкой активного состояния и волнового эффекта.
|
|
51
52
|
*/
|
|
52
53
|
declare const FNavigateBarItem: FC<IFNavigateBarItem>;
|
|
53
54
|
export default FNavigateBarItem;
|