亚洲see少妇裸体pics,欧美日产欧美日产免费一区,亚洲综合av一区二区三区不卡,一区二区中文字幕无码成人片,一区二区三区四区高清无码

左側菜單寬度調整指南

左側菜單寬度調整指南

?? 問(wèn)題說(shuō)明

您看到的 <div class="t-default-menu t-menu--light tdesign-starter-side-nav" style="height: 100%; width: 232px;"> 是由 TDesign 菜單組件運行時(shí)生成的。

?? 調整位置

方法一:通過(guò)全局樣式覆蓋(推薦)

src/style/layout.less 文件中添加或修改:

// ?? 自定義側邊欄寬度
.@{starter-prefix}-side-nav {
  width: 280px !important; // ?? 修改為您想要的寬度
  
  // ?? 暗色模式下的寬度
  &.t-menu--dark {
    width: 280px !important;
  }
}

// ?? 響應式寬度調整
@media screen and (max-width: 768px) {
  .@{starter-prefix}-side-nav {
    width: 200px !important; // ?? 移動(dòng)端較小寬度
  }
}

// ?? 折疊狀態(tài)下的寬度調整
.@{starter-prefix}-sidebar-compact {
  width: 64px; // ?? 折疊狀態(tài)寬度
}

方法二:通過(guò) CSS 變量(推薦)

src/style/variables.less 中添加:

// ?? 菜單寬度變量定義
@sidebar-width: 280px;        // ?? 展開(kāi)狀態(tài)寬度
@sidebar-collapsed-width: 80px; // ?? 折疊狀態(tài)寬度

// ?? 響應式寬度變量
@sidebar-width-tablet: 240px;  // ?? 平板寬度
@sidebar-width-mobile: 200px;  // ?? 手機寬度

然后在 src/style/layout.less 中使用:

.@{starter-prefix}-side-nav {
  width: @sidebar-width !important;
}

.@{starter-prefix}-sidebar-compact {
  width: @sidebar-collapsed-width;
}

方法三:通過(guò)組件屬性(如果支持)

檢查 src/layouts/components/SideNav.vue 是否支持寬度屬性:

<template>
  <div :class="sideNavCls">
    <t-menu 
      :class="menuCls" 
      :style="{ width: customWidth }" 
      :theme="theme"
      ...
    >
  </div>
</template>

<script setup lang="ts">
// ?? 自定義寬度
const customWidth = computed(() => {
  return collapsed.value ? '80px' : '280px';
});
</script>

?? 具體修改步驟

步驟1:修改樣式文件

// src/style/layout.less
.@{starter-prefix}-side-nav {
  width: 280px !important; // ?? 從 232px 改為 280px
  
  // ?? 平滑過(guò)渡效果
  transition: width 0.3s cubic-bezier(0.38, 0, 0.24, 1);
}

// ?? 占位符寬度也需要調整
.@{starter-prefix}-side-nav-placeholder {
  flex: 1 1 280px; // ?? 從 200px 改為 280px
  min-width: 280px;
  
  &-hidden {
    flex: 1 1 80px;  // ?? 折疊狀態(tài)寬度
    min-width: 80px;
  }
}

步驟2:調整主內容區域

// ?? 主內容區域適配新的側邊欄寬度
.@{starter-prefix}-layout {
  margin-left: 280px; // ?? 與側邊欄寬度保持一致
  
  // ?? 折疊狀態(tài)下的邊距
  &.sidebar-collapsed {
    margin-left: 80px;
  }
}

步驟3:響應式適配

// ?? 移動(dòng)端適配
@media screen and (max-width: 992px) {
  .@{starter-prefix}-side-nav {
    width: 100% !important;
    position: fixed;
    z-index: 1000;
  }
  
  .@{starter-prefix}-layout {
    margin-left: 0 !important;
  }
}

?? 高級自定義

動(dòng)態(tài)寬度調整

// src/store/modules/setting.ts
export const useSettingStore = defineStore('setting', {
  state: () => ({
    sidebarWidth: 232, // ?? 可配置的側邊欄寬度
    sidebarCollapsedWidth: 64,
  }),
  
  actions: {
    setSidebarWidth(width: number) {
      this.sidebarWidth = width;
      // ?? 動(dòng)態(tài)更新 CSS 變量
      document.documentElement.style.setProperty('--sidebar-width', `${width}px`);
    }
  }
});

用戶(hù)自定義寬度

<!-- 用戶(hù)設置面板 -->
<template>
  <t-slider 
    v-model="sidebarWidth" 
    :min="200" 
    :max="400" 
    :step="10"
    @change="handleWidthChange"
  />
</template>

<script setup lang="ts">
const handleWidthChange = (width: number) => {
  settingStore.setSidebarWidth(width);
};
</script>

?? 調試技巧

瀏覽器開(kāi)發(fā)者工具調試

  1. ?? 按 F12 打開(kāi)開(kāi)發(fā)者工具
  2. ?? 找到 .tdesign-starter-side-nav 元素
  3. ?? 在 Elements 面板中直接修改 width
  4. ?? 實(shí)時(shí)預覽效果
  5. ? 確認滿(mǎn)意后復制到代碼中

CSS 優(yōu)先級說(shuō)明

/* 優(yōu)先級從低到高 */
.t-menu { width: 232px; }                    /* TDesign 默認樣式 */
.tdesign-starter-side-nav { width: 280px; }  /* 自定義樣式 */
.tdesign-starter-side-nav { width: 280px !important; } /* 強制覆蓋 */

?? 注意事項

  1. ?? 保持一致性:側邊欄寬度和主內容區域邊距要保持一致
  2. ?? 響應式適配:不同屏幕尺寸下要有合適的寬度
  3. ?? 動(dòng)畫(huà)效果:寬度變化時(shí)添加過(guò)渡動(dòng)畫(huà)提升用戶(hù)體驗
  4. ? 性能考慮:避免頻繁修改寬度影響性能
  5. ?? 測試兼容性:在不同瀏覽器中測試效果

現在您可以根據需要調整左側菜單的寬度了!??

文章目錄

    亚洲see少妇裸体pics,欧美日产欧美日产免费一区,亚洲综合av一区二区三区不卡,一区二区中文字幕无码成人片,一区二区三区四区高清无码