SxHorizontalScroll (横向滚动)

Implemented

SxHorizontalScroll 是一个容器组件，用于横向展示超出视图宽度的内容。它提供左右翻页按钮（Flippers），并支持鼠标滚轮、触摸滑动等原生交互。对齐 Microsoft Fluent UI Blazor HorizontalScroll (v4.13.2) 的 API 结构，并说明 NextUI 当前实现状态。

使用场景

卡片列表与横向资源浏览
工具栏/选项条横向溢出
组合布局中的横向滚动容器

约束说明

内容必须具备横向溢出才会出现滚动效果。
翻页按钮交互依赖 JS 滚动。

行为说明

Speed 控制翻页按钮触发的滚动动画时长。
Easing 主要通过浏览器 smooth 实现，部分曲线由浏览器处理。
View="Mobile" 会隐藏翻页按钮，优先使用触摸滑动。

API

Parameters (参数)

状态	参数名	类型	默认值	描述
Implemented	`ChildContent`	`RenderFragment?`	`null`	滚动区域的内容。
Implemented	`Speed`	`int`	`600`	翻页按钮滚动时长 (ms)。
Implemented	`Easing`	`ScrollEasing`	`Linear`	滚动动画曲线。
Implemented	`View`	`HorizontalScrollView`	`Default`	视图模式。
Implemented	`FlippersHiddenFromAtia`	`bool`	`false`	是否隐藏翻页按钮的可访问性曝光。
Implemented	`Id` (继承)	`string?`	`null`	组件的物理 Id。
Implemented	`Class` (继承)	`string?`	`null`	自定义 CSS 类名。
Implemented	`Style` (继承)	`string?`	`null`	自定义样式。
Implemented	`Title` (继承)	`string?`	`null`	HTML `title` 属性。
Implemented	`AdditionalAttributes` (继承)	`IEnumerable<KeyValuePair<string, object>>?`	`null`	捕获不匹配的 HTML 属性。

Methods (方法)

状态	方法名	返回类型	描述
[x]	`ScrollToPrevious()`	`Task`	向左滚动一页/指定距离。
[x]	`ScrollToNext()`	`Task`	向右滚动一页/指定距离。

示例

<SxHorizontalScroll>
    @for (var i = 1; i <= 10; i++)
    {
        <div class="sx-scroll-item">Item @i</div>
    }
</SxHorizontalScroll>

<SxHorizontalScroll Speed="1200" Easing="ScrollEasing.EaseInOut">
    <!-- Items -->
</SxHorizontalScroll>

参考设计 (References)

Microsoft Fluent UI Blazor - HorizontalScroll API (v4.13.2)

在 Playground 中打开 →