@neatui/css 5.3.0 → 5.4.0

package/GUIDE.md

@@ -933,6 +933,29 @@ dpc, dpc-s, dpc-m, dpc-l
 
 除两个兼容空端点外，命中的规则都使用 `display: none !important`。
 
+### 按断点换行 `ui-wrap`
+
+元素带上 `ui-wrap` 即默认不换行，只在列出的范围内换行。取值与 `ui-hide` 相同（`>`、`<`、`=` + 九档细分值或设备段别名），可用空格组合；另有 `all` 表示全部换行，空值表示全部不换行。
+
+| 换行的端 | 写法 |
+| --- | --- |
+| 都不换行 | `ui-wrap=""` |
+| 仅移动 | `ui-wrap="=mob"` |
+| 仅平板 | `ui-wrap="=pad"` |
+| 仅桌面 | `ui-wrap="=dpc"` |
+| 移动 + 平板 | `ui-wrap="<dpc"` |
+| 平板 + 桌面 | `ui-wrap=">mob"` |
+| 移动 + 桌面 | `ui-wrap="=mob =dpc"` |
+| 都换行 | `ui-wrap="all"` |
+
+```html
+<!-- 仅中平板档（960px–1119px）换行 -->
+<div ui-wrap="=pad-m">...</div>
+```
+
+写了 `ui-wrap` 时由它全权决定：规则位于 `wrap`、`nowrap` 及 `pad:`、`mob:` 前缀类之后，同优先级下会覆盖它们，不要混用。
+`all` 不带媒体查询，比 `=mob =pad =dpc` 更可靠（后者在断点间的小数宽度，如 799.5px，不会命中）。
+
 ### 响应式 class 前缀
 
 组件级 class 使用 `base → pad → mob` 三层覆盖；`pad:` 在最大 1279px 生效，

package/core/basic.scss

@@ -1,5 +1,6 @@
 @use "./media.scss" as *;
 @use "./vars.scss" as *;
+@use "sass:list";
 
 @mixin base($d: "") {
   .#{$d}w-auto {
@@ -204,6 +205,33 @@
   @include base("mob\\:");
 }
 
+// 按断点换行：有 ui-wrap 即默认不换行，列出的范围换行
+// 取值同 ui-hide（>pad / <pad / =pad 及九档细分值），可空格组合；all 全部换行，空值全部不换行
+// 必须位于 wrap / nowrap / pad: / mob: 之后，写了 ui-wrap 时由它全权决定
+[ui-wrap] {
+  white-space: nowrap;
+}
+[ui-wrap~='all'] {
+  white-space: normal;
+}
+@each $q in ('>', '<', '=') {
+  @each $sz in $level {
+    $n: #{list.nth($sz, 1)};
+    [ui-wrap~='#{$q}#{$n}'] {
+      @include med('#{$q}#{$n}') {
+        white-space: normal;
+      }
+    }
+  }
+}
+@each $p in ('>mob', '>pad', '<pad', '<dpc', '=mob', '=pad', '=dpc') {
+  [ui-wrap~='#{$p}'] {
+    @include med($p) {
+      white-space: normal;
+    }
+  }
+}
+
 // 代码
 code,
 .code {

package/dist/neatui.css

@@ -939,6 +939,206 @@ sup{
     text-transform:lowercase;
   }
 }
+[ui-wrap]{
+  white-space:nowrap;
+}
+
+[ui-wrap~=all]{
+  white-space:normal;
+}
+
+@media screen and (min-width:480px){
+  [ui-wrap~=">mob-s"]{
+    white-space:normal;
+  }
+}
+
+@media screen and (min-width:640px){
+  [ui-wrap~=">mob-m"]{
+    white-space:normal;
+  }
+}
+
+@media screen and (min-width:800px){
+  [ui-wrap~=">mob-l"]{
+    white-space:normal;
+  }
+}
+
+@media screen and (min-width:960px){
+  [ui-wrap~=">pad-s"]{
+    white-space:normal;
+  }
+}
+
+@media screen and (min-width:1120px){
+  [ui-wrap~=">pad-m"]{
+    white-space:normal;
+  }
+}
+
+@media screen and (min-width:1280px){
+  [ui-wrap~=">pad-l"]{
+    white-space:normal;
+  }
+}
+
+@media screen and (min-width:1440px){
+  [ui-wrap~=">dpc-s"]{
+    white-space:normal;
+  }
+}
+
+@media screen and (min-width:1600px){
+  [ui-wrap~=">dpc-m"]{
+    white-space:normal;
+  }
+}
+
+@media screen and (max-width:479px){
+  [ui-wrap~="<mob-m"]{
+    white-space:normal;
+  }
+}
+
+@media screen and (max-width:639px){
+  [ui-wrap~="<mob-l"]{
+    white-space:normal;
+  }
+}
+
+@media screen and (max-width:799px){
+  [ui-wrap~="<pad-s"]{
+    white-space:normal;
+  }
+}
+
+@media screen and (max-width:959px){
+  [ui-wrap~="<pad-m"]{
+    white-space:normal;
+  }
+}
+
+@media screen and (max-width:1119px){
+  [ui-wrap~="<pad-l"]{
+    white-space:normal;
+  }
+}
+
+@media screen and (max-width:1279px){
+  [ui-wrap~="<dpc-s"]{
+    white-space:normal;
+  }
+}
+
+@media screen and (max-width:1439px){
+  [ui-wrap~="<dpc-m"]{
+    white-space:normal;
+  }
+}
+
+@media screen and (max-width:1599px){
+  [ui-wrap~="<dpc-l"]{
+    white-space:normal;
+  }
+}
+
+@media screen and (max-width:479px){
+  [ui-wrap~="=mob-s"]{
+    white-space:normal;
+  }
+}
+
+@media screen and (min-width:480px) and (max-width:639px){
+  [ui-wrap~="=mob-m"]{
+    white-space:normal;
+  }
+}
+
+@media screen and (min-width:640px) and (max-width:799px){
+  [ui-wrap~="=mob-l"]{
+    white-space:normal;
+  }
+}
+
+@media screen and (min-width:800px) and (max-width:959px){
+  [ui-wrap~="=pad-s"]{
+    white-space:normal;
+  }
+}
+
+@media screen and (min-width:960px) and (max-width:1119px){
+  [ui-wrap~="=pad-m"]{
+    white-space:normal;
+  }
+}
+
+@media screen and (min-width:1120px) and (max-width:1279px){
+  [ui-wrap~="=pad-l"]{
+    white-space:normal;
+  }
+}
+
+@media screen and (min-width:1280px) and (max-width:1439px){
+  [ui-wrap~="=dpc-s"]{
+    white-space:normal;
+  }
+}
+
+@media screen and (min-width:1440px) and (max-width:1599px){
+  [ui-wrap~="=dpc-m"]{
+    white-space:normal;
+  }
+}
+
+@media screen and (min-width:1600px){
+  [ui-wrap~="=dpc-l"]{
+    white-space:normal;
+  }
+}
+
+@media screen and (min-width:800px){
+  [ui-wrap~=">mob"]{
+    white-space:normal;
+  }
+}
+
+@media screen and (min-width:1280px){
+  [ui-wrap~=">pad"]{
+    white-space:normal;
+  }
+}
+
+@media screen and (max-width:799px){
+  [ui-wrap~="<pad"]{
+    white-space:normal;
+  }
+}
+
+@media screen and (max-width:1279px){
+  [ui-wrap~="<dpc"]{
+    white-space:normal;
+  }
+}
+
+@media screen and (max-width:799px){
+  [ui-wrap~="=mob"]{
+    white-space:normal;
+  }
+}
+
+@media screen and (min-width:800px) and (max-width:1279px){
+  [ui-wrap~="=pad"]{
+    white-space:normal;
+  }
+}
+
+@media screen and (min-width:1280px){
+  [ui-wrap~="=dpc"]{
+    white-space:normal;
+  }
+}
+
 .code,code{
   font-family:Menlo,Monaco,Courier New,monospace;
   -webkit-font-smoothing:antialiased;