木灵鱼儿

木灵鱼儿

阅读:129

最后更新:2021/11/11/ 15:50:40

关于UIKit的抽屉 uk-offcanvas 只有黑色样式的问题

从uikit官方站点复制抽屉的代码本地运行,你会发现,它的抽屉默认居然是黑色的,根本不是官网上那种白色的样式。

查询了好久,再github上issue上看到一些解释( OffCanvas only Dark),大概释义如下:

官方的抽屉只有dark模式,不支持白色模式,也不支持反色的class(uk-lightuk-dark);

而且官方对这个抽屉复写样式特别多,多到离谱,你能用上的元素,他都复写了,导致你就算把背景色复写成白色,你元素的字体颜色还是白色,而且nav组件的icon也被复写成白色svg了,这某种程度上复写样式基本无解了。

唯一的解决办法就是不用官方的uk-offcanvas-bar这个样式,换一个自定义的样式就行,根据issue说明,我们需要这样写:

<div id="自定id" uk-offcanvas="overlay: true;selPanel: .uk-offcanvas-bar-light;">
   <div  class="uk-offcanvas-bar-light">
    ...
   </div>
</div>

css添加如下内容:

.uk-offcanvas-bar-light {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -270px;
  box-sizing: border-box;
  width: 270px;
  padding: 20px 20px;
  background: #f8f8f8;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.uk-offcanvas-bar-animation {
  transition: left 0.3s ease-out;
}

@media (min-width: 960px) {
  .uk-offcanvas-bar-light {
    left: -350px;
    width: 350px;
    padding: 40px 40px;
  }
}

.uk-offcanvas-flip .uk-offcanvas-bar-light {
  left: auto;
  right: -270px;
}

.uk-offcanvas-flip .uk-offcanvas-bar-animation {
  transition-property: right;
}

.uk-offcanvas-flip .uk-open>.uk-offcanvas-bar-light {
  left: auto;
  right: 0;
}

@media (min-width: 960px) {
  .uk-offcanvas-flip .uk-offcanvas-bar-light {
    right: -350px;
  }
}

.uk-offcanvas-flip .uk-offcanvas-reveal .uk-offcanvas-bar-light {
  left: auto;
  right: 0;
}

.uk-offcanvas-reveal .uk-offcanvas-bar-light {
  left: 0;
}

.uk-open>.uk-offcanvas-bar-light {
  left: 0;
}

然后你就拥有一个白色的抽屉了,样式上可以根据自己项目要求改写,问题不大。

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

关于作者

站点职位 博主
获得点赞 0
文章被阅读 129

相关文章

目录树