『瀚思彼岸』» 智能家居技术论坛

标题: 关于导航栏按钮居中的问题 [打印本页]
作者: lswq    时间: 2023-9-26 17:17
标题: 关于导航栏按钮居中的问题
本帖最后由 lswq 于 2024-1-5 01:00 编辑

导航栏的按钮在themes中调整一直无法居中，想问问各位有没有什么方法~
  1. /* 移动导航栏至下端 */
  2.       .header {
  3.         top: auto !important;
  4.         justify-content: center; /* 水平居中 */
  5.         bottom: 0px !important;
  6.         box-shadow: var(--footer-shadow);
  7.         height: var(--header-height) !important;
  8.       }     
  9.       /* 导航栏按钮大小及去除选中底纹 */      
  10.       ha-tabs {
  11.         --paper-tabs-selection-bar-color: var(--header-tab-indicator-color) !important; /* 隐藏选中横线 */
  12.         --mdc-icon-size: 26px; /* 图标大小 */
  13.         display: flex;
  14.         justify-content: center;
  15.         overflow-x: auto; /* 允许水平滚动 */
  16.         margin-left: 0 auto;
  17.         margin-top: 15px; /* 上端距离大小 */
  18.         height:var(--header-height) !important;
  19.       }  
复制代码



作者: zhanfu86    时间: 2023-9-27 14:57
楼主卡片能否分享下？
作者: lswq    时间: 2023-9-27 18:07
zhanfu86 发表于 2023-9-27 14:57
楼主卡片能否分享下？

卡片是mushroom，你论坛搜这个关键词有很多帖子，我也是抄的别人的
作者: zhanfu86    时间: 2023-9-27 19:45
lswq 发表于 2023-9-27 18:07
卡片是mushroom，你论坛搜这个关键词有很多帖子，我也是抄的别人的

我看了你这个，特别喜欢。 可惜自己对页面排版的能力确实很差。
作者: lswq    时间: 2023-9-27 20:08
zhanfu86 发表于 2023-9-27 19:45
我看了你这个，特别喜欢。 可惜自己对页面排版的能力确实很差。

https://bbs.hassbian.com/thread-22464-1-1.html
作者: weiweistudio    时间: 2023-10-5 18:07
本帖最后由 weiweistudio 于 2023-10-6 14:29 编辑

刚好遇到这问题，和楼主用的主题一样（minimalist-ios-tapbar）分享解决步骤
1. 找到对应的theme文件：config\themes\minimalist-ios-tapbar\minimalist-ios-tapbar.yaml
2. 修改主题文件CSS，在 #tabsContent 下添加 text-align: center；
3. 重新加载主题：开发者工具-服务-重新加载主题
  1. # Move navbar
  2.   card-mod-root-yaml: |
  3.     ha-tabs$: |
  4.       #tabsContent {
  5.         width: 97%;
  6.         text-align: center; }
复制代码


作者: lswq    时间: 2023-10-20 01:29
weiweistudio 发表于 2023-10-5 18:07
刚好遇到这问题，和楼主用的主题一样（minimalist-ios-tapbar）分享解决步骤
1. 找到对应的theme文件：conf ...

牛逼兄弟，受教了~
作者: lswq    时间: 2024-1-4 16:36
weiweistudio 发表于 2023-10-5 18:07
刚好遇到这问题，和楼主用的主题一样（minimalist-ios-tapbar）分享解决步骤
1. 找到对应的theme文件：conf ...

老哥 更新到2024.01 minimalist的移动导航栏失效了是需要改点什么吗
作者: lswq    时间: 2024-1-5 00:59
lswq 发表于 2024-1-4 16:36
老哥 更新到2024.01 minimalist的移动导航栏失效了是需要改点什么吗

已解决 最新cadmod 3.4版本下需改为
  1.       /* 调整页面顶端距离 */        
  2.       ha-app-layout, div#view {
  3.         transform: initial;
  4.         padding: 0 !important;
  5.         margin: 0 !important;
  6.         width: 100%;
  7.         padding-bottom: var(--header-height) !important;
  8.       }
  9.       /* 移动导航栏至下端 */
  10.       app-header, div.header {
  11.         top: auto !important;
  12.         justify-content: center; /* 水平居中 */
  13.         bottom: 0px !important;
  14.         box-shadow: var(--footer-shadow);
  15.         height: var(--header-height) !important;
  16.       }     
  17.       /* 导航栏上端距离 */        
  18.       app-toolbar, div.toolbar {
  19.         height: var(--header-base-height) !important;
  20.         padding-bottom: env(safe-area-inset-bottom) !important;
  21.       }
复制代码





欢迎光临 『瀚思彼岸』» 智能家居技术论坛 (https://bbs.hassbian.com/) Powered by Discuz! X3.5