第一次,我使用免费coreUi React.js管理模板。
在这里,我试图改变标题和侧栏标志,但我无法理解如何改变它。
文件路径:src\containers\TheSidebar.js
import React from "react";
import { useSelector, useDispatch } from "react-redux";
import {
CCreateElement,
CSidebar,
CSidebarBrand,
CSidebarNav,
CSidebarNavDivider,
CSidebarNavTitle,
CSidebarMinimizer,
CSidebarNavDropdown,
CSidebarNavItem
} from "@coreui/react";
import CIcon from "@coreui/icons-react";
// sidebar nav config
import navigation from "./_nav";
const TheSidebar = () => {
const dispatch = useDispatch();
const show = useSelector(state => state.sidebarShow);
return (
<CSidebar
show={show}
onShowChange={val => dispatch({ type: "set", sidebarShow: val })}
>
<CSidebarBrand className="d-md-down-none" to="/">
<CIcon
className="c-sidebar-brand-full"
name="logo-negative"
height={35}
/>
<CIcon
className="c-sidebar-brand-minimized"
name="sygnet"
height={35}
/>
</CSidebarBrand>
<CSidebarNav>
<CCreateElement
items={navigation}
components={{
CSidebarNavDivider,
CSidebarNavDropdown,
CSidebarNavItem,
CSidebarNavTitle
}}
/>
</CSidebarNav>
<CSidebarMinimizer className="c-d-md-down-none" />
</CSidebar>
);
};
export default React.memo(TheSidebar);
文件路径:src\containers\TheHeader.js
import React from "react";
import { useSelector, useDispatch } from "react-redux";
import {
CHeader,
CToggler,
CHeaderBrand,
CHeaderNav,
CHeaderNavItem,
CHeaderNavLink,
CSubheader,
CBreadcrumbRouter,
CLink
} from "@coreui/react";
import CIcon from "@coreui/icons-react";
// routes config
import routes from "../routes";
import {
TheHeaderDropdown,
TheHeaderDropdownMssg,
TheHeaderDropdownNotif,
TheHeaderDropdownTasks
} from "./index";
const TheHeader = () => {
const dispatch = useDispatch();
const sidebarShow = useSelector(state => state.sidebarShow);
const toggleSidebar = () => {
const val = [true, "responsive"].includes(sidebarShow)
? false
: "responsive";
dispatch({ type: "set", sidebarShow: val });
};
const toggleSidebarMobile = () => {
const val = [false, "responsive"].includes(sidebarShow)
? true
: "responsive";
dispatch({ type: "set", sidebarShow: val });
};
return (
<CHeader withSubheader>
<CToggler
inHeader
className="ml-md-3 d-lg-none"
onClick={toggleSidebarMobile}
/>
<CToggler
inHeader
className="ml-3 d-md-down-none"
onClick={toggleSidebar}
/>
<CHeaderBrand className="mx-auto d-lg-none" to="/">
<CIcon name="logo" height="48" alt="Logo" />
</CHeaderBrand>
<CHeaderNav className="d-md-down-none mr-auto">
<CHeaderNavItem className="px-3">
<CHeaderNavLink to="/dashboard">Dashboard</CHeaderNavLink>
</CHeaderNavItem>
<CHeaderNavItem className="px-3">
<CHeaderNavLink to="/users">Users</CHeaderNavLink>
</CHeaderNavItem>
<CHeaderNavItem className="px-3">
<CHeaderNavLink>Settings</CHeaderNavLink>
</CHeaderNavItem>
</CHeaderNav>
<CHeaderNav className="px-3">
<TheHeaderDropdownNotif />
<TheHeaderDropdownTasks />
<TheHeaderDropdownMssg />
<TheHeaderDropdown />
</CHeaderNav>
<CSubheader className="px-3 justify-content-between">
<CBreadcrumbRouter
className="border-0 c-subheader-nav m-0 px-0 px-md-3"
routes={routes}
/>
<div className="d-md-down-none mfe-2 c-subheader-nav">
<CLink className="c-subheader-nav-link" href="#">
<CIcon name="cil-speech" alt="Settings" />
</CLink>
<CLink
className="c-subheader-nav-link"
aria-current="page"
to="/dashboard"
>
<CIcon name="cil-graph" alt="Dashboard" />
Dashboard
</CLink>
<CLink className="c-subheader-nav-link" href="#">
<CIcon name="cil-settings" alt="Settings" />
Settings
</CLink>
</div>
</CSubheader>
</CHeader>
);
};
export default TheHeader;
这些是上述文件,我试图改变徽标,但无法理解它。如果有人能帮我/向我建议,那将是很大的帮助。
发布于 2021-01-25 03:43:06
在深入研究代码将近两天之后,我找到了一个简单的解决方案。
侧边栏标志更改:
src\containers\TheSidebar.js
a.导入上述文件并添加新属性SRC
import logos from "../assets/logo.PNG";
将标识作为道具传递给src中的<CIcon>
组件
<CSidebarBrand className="d-md-down-none" to="/">
<CIcon
className="c-sidebar-brand-full"
name="logo-negative"
src={logos}
height={35}
/>
<CIcon
className="c-sidebar-brand-minimized"
name="sygnet"
height={35}
/>
</CSidebarBrand>
HeaderLogo changes:
src\containers\TheHeader.js
a.导入上述文件并添加新属性SRC
import logos from "../assets/logo.PNG";
将标识作为道具传递给src中的<CIcon>
组件
<CHeader withSubheader>
<CToggler
inHeader
className="ml-md-3 d-lg-none"
onClick={toggleSidebarMobile}
/>
<CToggler
inHeader
className="ml-3 d-md-down-none"
onClick={toggleSidebar}
/>
<CHeaderBrand className="mx-auto d-lg-none" to="/">
<CIcon name="logo" src={logos} height="48" alt="Logo" />
</CHeaderBrand>
<CHeaderNav className="d-md-down-none mr-auto">
<CHeaderNavItem className="px-3">
<CHeaderNavLink to="/dashboard">Dashboard</CHeaderNavLink>
</CHeaderNavItem>
<CHeaderNavItem className="px-3">
<CHeaderNavLink to="/users">Users</CHeaderNavLink>
</CHeaderNavItem>
<CHeaderNavItem className="px-3">
<CHeaderNavLink>Settings</CHeaderNavLink>
</CHeaderNavItem>
</CHeaderNav>
<CHeaderNav className="px-3">
<TheHeaderDropdownNotif />
<TheHeaderDropdownTasks />
<TheHeaderDropdownMssg />
<TheHeaderDropdown />
</CHeaderNav>
<CSubheader className="px-3 justify-content-between">
<CBreadcrumbRouter
className="border-0 c-subheader-nav m-0 px-0 px-md-3"
routes={routes}
/>
<div className="d-md-down-none mfe-2 c-subheader-nav">
<CLink className="c-subheader-nav-link" href="#">
<CIcon name="cil-speech" alt="Settings" />
</CLink>
<CLink
className="c-subheader-nav-link"
aria-current="page"
to="/dashboard"
>
<CIcon name="cil-graph" alt="Dashboard" />
Dashboard
</CLink>
<CLink className="c-subheader-nav-link" href="#">
<CIcon name="cil-settings" alt="Settings" />
Settings
</CLink>
</div>
</CSubheader>
</CHeader>
https://stackoverflow.com/questions/65856573
复制相似问题