Web Components

介绍

LiteLoaderQQNT 使用 Web Components 封装了 QQNT 设置界面的一些组件，使你能够简单且快速的构建 QQNT 原生样式的插件配置界面

自定义标签全部由 setting- 开头，所有组件继承自 BaseElement 父类可调用对应方法，自定义属性全部由 data- is- 开头并且是响应式

以下是 BaseElement 父类方法可在组件实例中调用：

	setter method	getter method
data-title	setTitle(title: String)	getTitle(): String
data-value	setValue(value: String)	getValue(): String
data-type	setType(type: String)	getType(): String
data-direction	setDirection(direction: String)	getDirection(): String
is-collapsible	setCollapsible(collapsible: Boolean )	getCollapsible(): Boolean
is-selected	setSelected(selected: Boolean)	getSelected(): Boolean
is-active	setActive(active: Boolean)	getActive(): Boolean
is-disabled	setDisabled(disabled: Boolean)	getDisabled(): Boolean

• data-type 仅接受或返回 "primary" | "secondary"
• data-direction 仅接受或返回 "column" | "row"

以下是已封装实现的组件标签以及属性：

	data-title	data-value	data-type	data-direction
setting-section	√
setting-panel
setting-list	√			√
setting-item				√
setting-select
setting-option		√
setting-switch
setting-button			√
setting-text			√
setting-link		√
setting-divider				√
setting-modal	√

	is-collapsible	is-selected	is-active	is-disabled
setting-section				√
setting-panel				√
setting-list	√		√	√
setting-item				√
setting-select				√
setting-option		√		√
setting-switch			√	√
setting-button				√
setting-text				√
setting-link				√
setting-divider				√
setting-modal			√	√

用法

setting-section

每一节的设置，可以不设置 data-title

• data-title - 标题

<setting-section data-title="标题">...</setting-section>
<setting-section>...</setting-section>
<setting-section>...</setting-section>

setting-panel

选项容器

<setting-section data-title="标题">
    <setting-panel>...</setting-panel>
    <setting-panel>...</setting-panel>
    <setting-panel>...</setting-panel>
</setting-section>

setting-list

选项列表

• data-direction - 排列方向
  • column - 纵向
  • row - 横向
• is-collapsible - 是否为可折叠列表
  • data-title - 标题
  • data-direction - 排列方向
    • column - 纵向

<setting-section data-title="标题">
    <setting-panel>
        <setting-list data-direction="column">...</setting-list>
        <setting-list data-direction="row">...</setting-list>
        <setting-list data-direction="column" is-collapsible data-title="折叠列表">...</setting-list>
    </setting-panel>
</setting-section>

setting-item

选项条目，一般无需给此组件添加属性，因为 setting-list 会根据自身属性来自动设置此组件的属性

• data-direction - 排列方向
  • column - 纵向
  • row - 横向

<setting-section data-title="标题">
    <setting-panel>
        <setting-list data-direction="column">
            <setting-item data-direction="row">...</setting-item>
        </setting-list>
        <setting-list data-direction="row">
            <setting-item data-direction="column">...</setting-item>
        </setting-list>
    </setting-panel>
</setting-section>

setting-select

下拉选择框

<setting-section data-title="标题">
    <setting-panel>
        <setting-list data-direction="column">
            <setting-item>
                <setting-select>...</setting-select>
            </setting-item>
        </setting-list>
    </setting-panel>
</setting-section>

setting-option

选择框选项

• data-value - 数据值

<setting-section data-title="标题">
    <setting-panel>
        <setting-list data-direction="column">
            <setting-item>
                <setting-select>
                    <setting-option data-value="1" is-selected>...</setting-option>
                    <setting-option data-value="2">...</setting-option>
                    <setting-option data-value="3">...</setting-option>
                </setting-select>
            </setting-item>
        </setting-list>
    </setting-panel>
</setting-section>

下拉框可通过 selected 事件监听选项修改，示例：

<setting-select>
    <setting-option data-value="1" is-selected>a</setting-option>
    <setting-option data-value="2">b</setting-option>
    <setting-option data-value="3">c</setting-option>
</setting-select>

const settingSelectElement = document.querySelector("setting-select");
settingSelectElement.addEventListener("selected", (event) => {
    console.log(event.detail); // {name: 'b', value: '2'}
})

setting-switch

开关按钮

<setting-section data-title="标题">
    <setting-panel>
        <setting-list data-direction="column">
            <setting-item>
                <setting-switch>...</setting-switch>
            </setting-item>
            <setting-item>
                <setting-switch is-active>...</setting-switch>
            </setting-item>
        </setting-list>
    </setting-panel>
</setting-section>

setting-button

普通按钮

• data-type - 类型
  • primary - 主要
  • secondary - 次要

<setting-section data-title="标题">
    <setting-panel>
        <setting-list data-direction="column">
            <setting-item>
                <setting-button data-type="primary">...</setting-button>
            </setting-item>
            <setting-item>
                <setting-button data-type="secondary">...</setting-button>
            </setting-item>
            <setting-item>
                <setting-button data-type="primary" is-disabled>...</setting-button>
            </setting-item>
            <setting-item>
                <setting-button data-type="secondary" is-disabled>...</setting-button>
            </setting-item>
        </setting-list>
    </setting-panel>
</setting-section>

setting-text

文本

• data-type - 类型
  • secondary - 次要

<setting-section data-title="标题">
    <setting-panel>
        <setting-list data-direction="column">
            <setting-item>
                <div>
                    <setting-text>...</setting-text>
                    <setting-text data-type="secondary">...</setting-text>
                </div>
            </setting-item>
        </setting-list>
    </setting-panel>
</setting-section>

setting-link

链接

• data-value - 链接

<setting-link data-value="https://liteloaderqqnt.github.io/">进入官网</setting-link>

setting-divider

提示

一般无需使用此组件，因为 setting-list 会给每个 setting-item 之间添加此组件

分割线

• data-direction - 排列方向
  • column - 纵向
  • row - 横向

<setting-section data-title="标题">
    <setting-panel>
        <setting-list data-direction="column">
            <setting-item>...</setting-item>
            <setting-divider data-direction="row"></setting-divider>
            <setting-item>...</setting-item>
        </setting-list>
        <setting-list data-direction="row">
            <setting-item>...</setting-item>
            <setting-divider data-direction="column"></setting-divider>
            <setting-item>...</setting-item>
        </setting-list>
    </setting-panel>
</setting-section>

setting-modal

模态窗口

• data-title - 标题
• is-active - 显示

<setting-modal data-title="LiteLoaderQQNT">...</setting-modal>
<setting-modal data-title="LiteLoaderQQNT" is-active>...</setting-modal>