Coreui – Как правильно создать ссылку выхода (со значком) в нижнем колонтитуле (CSidebarFooter) боковой панели? (в React) Свернуть/развернуть проблему
В coreui для React: как правильно создать ссылку выхода (со значком) в нижнем колонтитуле боковой панели? (в React) Я хочу, чтобы при расширении боковой панели на ней были значок и текст. а когда боковая панель свернута, отображается только значок. То же самое я хочу поработать и с CSidebarHeader.
https://github.com/coreui/coreui-free-react-admin-template <-- это шаблон, который я использую. Вы можете легко запустить его и протестировать.
Я попробовал следующее (расположение здесь https://github.com/coreui/coreui-free-react-admin-template/blob/main/src/comComponents/AppSidebar.js):
<CSidebarFooter className = "border-top d-none d-lg-flex">
<CNavItem customClassName = "nav-icon">
<CNavLink to='/logout'>
<CIcon icon = {cilAccountLogout} className = "me-2" />
Logout
</CNavLink>
</CNavItem>
<CSidebarToggler
onClick = {() => dispatch({ type: 'set', sidebarUnfoldable: !unfoldable })}
/>
</CSidebarFooter>
Но если вы посмотрите скриншоты. Есть точка, и когда боковая панель сжимается, слово «Выход» не исчезает.
ОБНОВЛЕНИЕ (я попробовал по-другому, без точки, но при сворачивании текст не исчез:
<CSidebarFooter style = {{ cursor: 'pointer' }}>
<CIcon icon = {cilAccountLogout} height = {20} />
<div style = {{fontSize: 15 }}> Logout</div>
<CSidebarToggler
onClick = {() => dispatch({ type: 'set', sidebarUnfoldable: !unfoldable })}
/>
</CSidebarFooter>
ОБНОВЛЯТЬ: Я даже пытался найти способ определить, когда боковая панель сворачивается. https://gist.github.com/axilaris/9a5f4b6a0c2b7d54edb157c3e5c9e304. Но это обнаружится только тогда, когда он полностью рухнет. все еще не могу получить это.
....Исходя из этого, я предполагаю, что CNavItem, вероятно, является <li>, поэтому мы и получаем это в первую очередь, но я удивлен, что CSS по умолчанию в CoreUI не добавляет list-style:none; автоматически. Вы получаете большинство стилей CSS из CoreUI, верно? В противном случае это был бы совсем другой пост. (Иногда мы видим, что это происходит, когда разработчик забывает импортировать файл CSS, если он существует отдельный, но в этом случае ни один из CoreUI не будет отображаться правильно.)
Возможно, CSS в основном происходит от CNavGroup, поэтому вам нужно будет добавить CNavGroup, чтобы CSS скрывал точку и правильно ее стилизовал.
Я поставил обновление, удалил CNavItem и CNavLink. Нет точки, но свертывание не удаляет текст. imgur.com/a/nXgFi1F
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
// AppSidebar.js
<CSidebar>
{/* Rest of the SideBar components */}
<AppSidebarNav items = {navigation} />
<CSidebarFooter>
<CSidebarNav>
<CNavItem href = "#">
<CIcon customClassName = "nav-icon" icon = {cilAccountLogout} />
Logout
</CNavItem>
</CSidebarNav>
<CSidebarToggler
onClick = {() => dispatch({ type: 'set', sidebarUnfoldable: !unfoldable })}
/>
</CSidebarFooter>
</CSidebar>
Судя по всему, CSidebarFooter не предназначен для хранения ссылок. Если вы попробуете приведенный выше код, значок выхода из системы будет скрыт при сворачивании, и будет отображаться только значок переключателя. Кроме того, с моей точки зрения, есть другая проблема дизайна: выход из системы не должен иметь одну и ту же строку со складным.
CoreUI решает эту проблему, удерживая каждый NavItem внутри CSidebarHeader. Это также сохраняет значки, когда боковая панель свернута. Это уже описано в своих примерах.
С учетом вышесказанного, возможно, лучшим решением будет оставить нижний колонтитул только с помощью переключателя и создать отдельный раздел для выхода из системы. Также было бы неплохо использовать разные значки для переключения и выхода из системы:
<AppSidebarNav items = {navigation} />
<CSidebarHeader className = "border-top">
<CSidebarNav>
<CNavItem href = "#">
<CIcon customClassName = "nav-icon" icon = {cilAccountLogout} />
Logout
</CNavItem>
</CSidebarNav>
</CSidebarHeader>
<CSidebarFooter>
<CSidebarToggler
onClick = {() => dispatch({ type: 'set', sidebarUnfoldable: !unfoldable })}
/>
</CSidebarFooter>
я думаю, это хороший ответ. Мне просто нужно немного выравнивания, я все еще не могу этого получить. проблема с решением в том, что оно не согласовано с другими элементами AppSidebarNav. Я попытался поставить маржуLeft. Я выровнял его, но когда я нажимаю, чтобы свернуть, он снова не выравнивается. gist.github.com/axilaris/5954e10e2b7b597815a56030f34feacc вот скриншот этого: imgur.com/a/aSKB4gP
Вы правы @Axil, есть небольшое несовпадение. SidebarFooter имеет больше отступов, чем его собратья. Это можно исправить, удалив левый отступ: js <CSidebarFooter style = {{ paddingLeft: 0 }}> . Или аналогичное решение с выбранной вами CSS-инфраструктурой.
Можете ли вы опубликовать отрендеренный HTML? Честно говоря, эта точка очень похожа на точку
<ul>. Интересно, это<ul>, в котором отсутствует CSSlist-style:none;