LuLu UI Edge版中文文档 » Rel切换
文档 Github➹

Rel 切换

本组件为一对一或一对多的点击切换引擎。

安装与调用

引入相应的 JS 即可：

<script type="module" src="https://qidian.gtimg.com/lulu/hope/ui/Rel/index.js"></script>

或者：

<script type="module">
import 'https://qidian.gtimg.com/lulu/hope/ui/Rel/index.js';
</script>

使用说明

本组件不控制任何元素的显示与隐藏，只负责状态的变化。

使用 <ui-rel> 自定义元素实现，当点击此元素的时候，该元素的 open 属性会变化，同时，关联的目标元素（如果有），或添加类名 active。

<ui-rel class="rel">点击我</ui-rel>
.rel[open] {
    color: var(--ui-red);
}
点击我

禁用与否使用 disabled 属性。

target 属性关联

关联的目标元素通过 target 属性进行关联，当点击 <ui-rel> 元素的时候，页面中 id 为 target 属性值的元素会切换类名 active，配合对应的 CSS，我们就可以实现我们想要的交互效果了。

例如下面的展开与收起效果：

  • 列表1
  • 列表2
  • 列表3
    • 更多↓ 
<ul id="c1">
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
    <li hidden>列表4</li>
    <li hidden>列表5</li>
    <li hidden>列表6</li>
    <ui-rel target="c1">更多↓</ui-rel>
</ul>
ul.active [hidden] {
    display: list-item;
}
ul.active ui-rel {
    -webkit-text-fill-color: transparent;
}
ul.active ui-rel::before {
    position: absolute;
    content: '收起↑';
    -webkit-text-fill-color: currentColor;
}

name属性与分组

如果 <ui-rel> 元素有 name 属性值，则点击该元素的时候，open 属性只会添加，不会移除。

只有当点击相同 name 属性值的其他 <ui-rel> 元素的时候才会移除。

<ui-rel class="rel" name="any">点击我高亮</ui-rel>
点击我高亮

下面这个例子演示多个同 name <ui-rel> 元素并存时候的效果。

元素1 | 元素2 | 元素3 
<ui-rel class="rel" name="some" open>元素1</ui-rel>
|
<ui-rel class="rel" name="some">元素2</ui-rel>
|
<ui-rel class="rel" name="some">元素3</ui-rel>

下面这个例子演示了 <ui-rel> 元素有 name 和没有 name 属性值时候的区别。

标题A
内容1
内容2
标题B
内容1
内容2
标题C
内容1
内容2
标题A
内容1
内容2
标题B
内容1
内容2
标题C
内容1
内容2
<div class="accordion">
<dl>
    <dt id="dt1"><ui-rel target="dt1">标题A</ui-rel></dt>
    <dd>内容1</dd>
    <dd>内容2</dd>
    <dt id="dt2"><ui-rel target="dt2">标题B</ui-rel></dt>
    <dd>内容1</dd>
    <dd>内容2</dd>
    <dt id="dt3"><ui-rel target="dt3">标题C</ui-rel></dt>
    <dd>内容1</dd>
    <dd>内容2</dd>
</dl>

<dl>
    <dt id="dt4"><ui-rel target="dt4" name="dt">标题A</ui-rel></dt>
    <dd>内容1</dd>
    <dd>内容2</dd>
    <dt id="dt5"><ui-rel target="dt5" name="dt">标题B</ui-rel></dt>
    <dd>内容1</dd>
    <dd>内容2</dd>
    <dt id="dt6"><ui-rel target="dt6" name="dt">标题C</ui-rel></dt>
    <dd>内容1</dd>
    <dd>内容2</dd>
</dl>
</div>
.accordion dd {
display: none;
}
.accordion .active + dd,
.accordion .active + dd + dd {
display: block;
}

当设置了 name 属性，同时设置了 target 对象，再配合一些 CSS 样式，就可以实现的选项卡切换效果。

选项卡1 选项卡2 选项卡3

我是选项卡1对应的图片

我是选项卡2对应的图片

我是选项卡3对应的图片

<div class="tab-x">
    <div class="tab">
        <ui-rel class="tab-label" name="s-tab" target="t1" open>选项卡1</ui-rel>
        <ui-rel class="tab-label" name="s-tab" target="t2">选项卡2</ui-rel>
        <ui-rel class="tab-label" name="s-tab" target="t3">选项卡3</ui-rel>
    </div>
    <div id="t1" class="tab-content active">
        <p>我是选项卡1对应的图片</p>
        <img src="1.jpg" />
    </div>
    <div id="t2" class="tab-content">
        <p>我是选项卡2对应的图片</p>
        <img src="2.jpg" />
    </div>
    <div id="t3" class="tab-content">
        <p>我是选项卡3对应的图片</p>
        <img src="3.jpg" />
    </div>
</div>
本页贡献者：

zhangxinxu