SanoUI

Appearance

Divider 分割线 ​

分割线组件，用于分隔内容区域。

基础用法 ​

方式 1：自动初始化（推荐） ​

通过 class="sa-divider" 自动初始化，无需编写 JavaScript 代码。

html
<p>这是一段文字</p>
<div class="sa-divider"></div>
<p>这是另一段文字</p>

<script>
  SA.init('body');
</script>
加载 SanoUI 组件中...

方式 2：JavaScript 方式 ​

html
<div id="demo-divider"></div>

<script>
  const divider = new SaDivider('#demo-divider', {
    direction: 'horizontal',
    contentPosition: 'center',
    content: '分割线文本'
  });
</script>
加载 SanoUI 组件中...

带文字的分割线 ​

可以在分割线中添加文字。

html
<p>这是一段文字</p>
<div class="sa-divider">文字</div>
<p>这是另一段文字</p>

<script>
  SA.init('body');
</script>
加载 SanoUI 组件中...

文字位置 ​

通过 data-content-position 配置文字位置。

html
<div class="sa-divider" data-content-position="left">左对齐</div>
<div class="sa-divider" data-content-position="center">居中</div>
<div class="sa-divider" data-content-position="right">右对齐</div>

<script>
  SA.init('body');
</script>
加载 SanoUI 组件中...

垂直分割线 ​

通过 data-direction="vertical" 配置垂直分割线。

html
<div style="display: flex; align-items: center; height: 40px;">
  <span>文字</span>
  <div class="sa-divider" data-direction="vertical"></div>
  <span>文字</span>
  <div class="sa-divider" data-direction="vertical"></div>
  <span>文字</span>
</div>

<script>
  SA.init('body');
</script>
加载 SanoUI 组件中...

API ​

构造函数参数 ​

参数说明类型默认值
container容器选择器或元素string | HTMLElement-
config.direction方向'horizontal' | 'vertical''horizontal'
config.contentPosition文字位置'left' | 'center' | 'right''center'
config.content分割线中间的内容文本string''

自动初始化属性 ​

属性说明类型默认值
class="sa-divider"启用自动初始化--
data-content-position文字位置'left' | 'center' | 'right''center'
data-direction方向'horizontal' | 'vertical''horizontal'

实例方法 ​

方法名说明参数返回值
setDirection(direction)设置分割线方向direction: 'horizontal' | 'vertical'this
destroy()销毁分割线实例-this

静态方法 ​

方法名说明参数返回值
initAll(container?)初始化容器内所有分割线container?: string | HTMLElementSaDivider[]

示例代码 ​

HTML 方式 ​

html
<!-- 水平分割线 -->
<div class="sa-divider"></div>

<!-- 带文字的水平分割线 -->
<div class="sa-divider">分割文字</div>

<!-- 文字左对齐 -->
<div class="sa-divider" data-content-position="left">左对齐</div>

<!-- 垂直分割线 -->
<div class="sa-divider" data-direction="vertical"></div>

<script>
  SA.init('body');
</script>
加载 SanoUI 组件中...

实际使用场景 ​

场景 1：表单分组 ​

使用分割线将表单字段分组。

html
<form class="sa-form" style="max-width: 500px;" data-label-position="right" data-label-width="100px">
  <div class="sa-form-item">
    <label class="sa-form-item__label">用户名</label>
    <div class="sa-form-item__content">
      <div class="sa-input" data-placeholder="请输入用户名" style="width: 100%;"></div>
    </div>
  </div>
  
  <div class="sa-form-item">
    <label class="sa-form-item__label">邮箱</label>
    <div class="sa-form-item__content">
      <div class="sa-input" data-type="email" data-placeholder="请输入邮箱" data-autocomplete="email" style="width: 100%;"></div>
    </div>
  </div>
  
  <div class="sa-divider" data-content-position="left">密码设置</div>
  
  <div class="sa-form-item">
    <label class="sa-form-item__label">密码</label>
    <div class="sa-form-item__content">
      <div class="sa-input" data-type="password" data-placeholder="请输入密码" data-autocomplete="new-password" style="width: 100%;"></div>
    </div>
  </div>
  
  <div class="sa-form-item">
    <label class="sa-form-item__label">确认密码</label>
    <div class="sa-form-item__content">
      <div class="sa-input" data-type="password" data-placeholder="请再次输入密码" data-autocomplete="new-password" style="width: 100%;"></div>
    </div>
  </div>
</form>

<script>
  SA.init('body');
</script>
加载 SanoUI 组件中...

场景 2：内容分隔 ​

使用分割线分隔不同的内容区块。

html
<div style="max-width: 600px;">
  <div style="padding: 1rem;">
    <h3>第一部分内容</h3>
    <p>这是第一部分的内容描述</p>
  </div>
  
  <div class="sa-divider"></div>
  
  <div style="padding: 1rem;">
    <h3>第二部分内容</h3>
    <p>这是第二部分的内容描述</p>
  </div>
  
  <div class="sa-divider" data-content-position="center">分隔线</div>
  
  <div style="padding: 1rem;">
    <h3>第三部分内容</h3>
    <p>这是第三部分的内容描述</p>
  </div>
</div>

<script>
  SA.init('body');
</script>
加载 SanoUI 组件中...

场景 3：导航菜单分隔 ​

在导航菜单中使用垂直分割线分隔不同的菜单项。

html
<div style="display: flex; align-items: center; gap: 12px; padding: 1rem; background: #f5f5f5; border-radius: 4px;">
  <a href="#" style="text-decoration: none; color: #333;">首页</a>
  <div class="sa-divider" data-direction="vertical" style="height: 20px;"></div>
  <a href="#" style="text-decoration: none; color: #333;">产品</a>
  <div class="sa-divider" data-direction="vertical" style="height: 20px;"></div>
  <a href="#" style="text-decoration: none; color: #333;">服务</a>
  <div class="sa-divider" data-direction="vertical" style="height: 20px;"></div>
  <a href="#" style="text-decoration: none; color: #333;">关于</a>
</div>

<script>
  SA.init('body');
</script>
加载 SanoUI 组件中...

场景 4：卡片内容分隔 ​

在卡片中使用分割线分隔不同的内容区域。

html
<div style="max-width: 400px; border: 1px solid #ddd; border-radius: 8px; padding: 1rem;">
  <div style="margin-bottom: 1rem;">
    <h3 style="margin: 0 0 0.5rem 0;">标题</h3>
    <p style="margin: 0; color: #666;">这是标题的描述信息</p>
  </div>
  
  <div class="sa-divider"></div>
  
  <div style="margin-top: 1rem;">
    <h4 style="margin: 0 0 0.5rem 0;">详细信息</h4>
    <p style="margin: 0; color: #666;">这是详细信息的描述</p>
  </div>
  
  <div class="sa-divider" data-content-position="center">操作区域</div>
  
  <div style="margin-top: 1rem; display: flex; gap: 10px;">
    <button class="sa-button sa-button--primary">确认</button>
    <button class="sa-button">取消</button>
  </div>
</div>

<script>
  SA.init('body');
</script>
加载 SanoUI 组件中...

场景 5：列表项分隔 ​

在列表中使用分割线分隔不同的列表项。

html
<div style="max-width: 400px; border: 1px solid #ddd; border-radius: 8px; overflow: hidden;">
  <div style="padding: 1rem;">
    <h4 style="margin: 0 0 0.5rem 0;">列表项 1</h4>
    <p style="margin: 0; color: #666;">这是第一个列表项的描述</p>
  </div>
  
  <div class="sa-divider"></div>
  
  <div style="padding: 1rem;">
    <h4 style="margin: 0 0 0.5rem 0;">列表项 2</h4>
    <p style="margin: 0; color: #666;">这是第二个列表项的描述</p>
  </div>
  
  <div class="sa-divider"></div>
  
  <div style="padding: 1rem;">
    <h4 style="margin: 0 0 0.5rem 0;">列表项 3</h4>
    <p style="margin: 0; color: #666;">这是第三个列表项的描述</p>
  </div>
</div>

<script>
  SA.init('body');
</script>
加载 SanoUI 组件中...

注意事项 ​

  1. 自动初始化：分割线组件会在 SA.init() 时自动初始化所有带有 class="sa-divider" 的元素。通过 MutationObserver 自动监听 DOM 变化，动态添加的分割线元素也会自动初始化
  2. 文本内容：分割线文本可以从元素的 textContent 自动读取，也可以通过构造函数参数 content 指定
  3. 垂直分割线：垂直分割线需要在 flex 布局中使用，并设置合适的高度
  4. 文字位置：文字位置仅对水平分割线有效，垂直分割线不支持文字

Released under the MIT License.

Copyright © 2025 SanoUI