gpt4 book ai didi

javascript - 如何更改侧边栏和标题的免费 React.js 管理模板中的 coreUi Logo ?

转载 作者:行者123 更新时间:2023-12-04 11:23:13 25 4
gpt4 key购买 nike

第一次,我使用免费 coreUi React.js 管理模板 .
我正在尝试更改页眉和侧边栏 Logo ,但我无法理解如何更改它。
文件路径: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" />
&nbsp;Dashboard
</CLink>
<CLink className="c-subheader-nav-link" href="#">
<CIcon name="cil-settings" alt="Settings" />
&nbsp;Settings
</CLink>
</div>
</CSubheader>
</CHeader>
);
};

export default TheHeader;
这些是上面我试图更改 Logo 但无法理解的文件。如果有人可以帮助/建议我,那将是很大的帮助。
https://coreui.io/react/
Header Logo
SideBar

最佳答案

在深入研究代码近 2 天后,我找到了简单的解决方案。

  • 首先,您可以在相应文件中导入 Logo ,如下所示:

  • 侧边栏 Logo 更改:
     src\containers\TheSidebar.js
    一个。导入上述文件中的文件并添加新属性 SRC
    import logos from "../assets/logo.PNG";
    湾。将 Logo 传递给 <CIcon>组件作为 Prop
     <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 更改:
    src\containers\TheHeader.js
    一个。导入上述文件中的文件并添加新属性 SRC
    import logos from "../assets/logo.PNG";
    湾。将 Logo 传递给 <CIcon>组件作为 Prop
    <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" />
    &nbsp;Dashboard
    </CLink>
    <CLink className="c-subheader-nav-link" href="#">
    <CIcon name="cil-settings" alt="Settings" />
    &nbsp;Settings
    </CLink>
    </div>
    </CSubheader>
    </CHeader>

    关于javascript - 如何更改侧边栏和标题的免费 React.js 管理模板中的 coreUi Logo ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65856573/

    25 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com