zdhxiong / mdui

Material Design 3(Material You) UI components using Web Components.

Home Page:https://www.mdui.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

为自带边距的组件添加自定义属性,以便添加额外的边距

Jesse205 opened this issue · comments

比如应用栏

mdui-top-app-bar {
  // --extra-padding-left: 0px;
  --extra-padding-top: 0px;
  // --extra-padding-right: 0px;
  --extra-padding-bottom: 0px;
  padding-top: calc(var(--extra-padding-top) + var(--extra-padding-bottom) + 0.75rem);
  height: calc(var(--extra-padding-top) + var(--extra-padding-bottom) + 4rem);
  &[variant='medium'] {
    height: calc(var(--extra-padding-top) + var(--extra-padding-bottom) + 7rem);
  }
  &[shrink][variant='large'],
  &[shrink][variant='medium'] {
    height: calc(var(--extra-padding-top) + var(--extra-padding-bottom) + 4rem);
  }
}

在需要显示通知栏的时候,可以覆盖--extra-padding-top,使内容避开通知栏
image

不需要加自定义属性,直接写样式覆盖就行

不需要加自定义属性,直接写样式覆盖就行

复写样式需要同时复写高度、边距,这样太麻烦了。万一以后mdui改了什么还得再次调整样式。

没计划加