xtt-ui

Appearance

List Next 列表 ​

列表组件，用于展示一系列有序的信息。与 List 组件不同的是，List Next 组件基于 CSS 容器查询实现，List 组件基于 resizeObserver 实现。

Item 1Item 2Item 3Item 4Item 5Item 6Item 7Item 8Item 9Item 10Item 11Item 12

基础用法 ​

默认情况下，列数会根据容器宽度自动计算。

默认宽度与列数的对应关系如下：

> 1200px --> 6 列

> 800px --> 4 列

> 500px --> 3 列

> 200px --> 2 列

> 0px --> 1 列

如果想要自定义宽度与列数的对应关系，可以通过监听宽度变化然后更改 cols 属性来实现。

注意：list-next 没有 xtt-resize 事件。

Item 1Item 2Item 3Item 4Item 5Item 6Item 7Item 8Item 9Item 10Item 11Item 12
html
<xtt-list-next style="resize: horizontal">
	<xtt-list-item>Item 1</xtt-list-item>
	<xtt-list-item>Item 2</xtt-list-item>
	<xtt-list-item>Item 3</xtt-list-item>
	<xtt-list-item>Item 4</xtt-list-item>
	<xtt-list-item>Item 5</xtt-list-item>
	<xtt-list-item>Item 6</xtt-list-item>
	<xtt-list-item>Item 7</xtt-list-item>
	<xtt-list-item>Item 8</xtt-list-item>
	<xtt-list-item>Item 9</xtt-list-item>
	<xtt-list-item>Item 10</xtt-list-item>
	<xtt-list-item>Item 11</xtt-list-item>
	<xtt-list-item>Item 12</xtt-list-item>
</xtt-list-next>

cols ​

设置固定的列数

Item 1Item 2Item 3Item 4Item 5Item 6Item 7Item 8Item 9Item 10Item 11Item 12
html
<xtt-list-next cols="3" style="resize: horizontal">
	<xtt-list-item>Item 1</xtt-list-item>
	<xtt-list-item>Item 2</xtt-list-item>
	<xtt-list-item>Item 3</xtt-list-item>
	<xtt-list-item>Item 4</xtt-list-item>
	<xtt-list-item>Item 5</xtt-list-item>
	<xtt-list-item>Item 6</xtt-list-item>
	<xtt-list-item>Item 7</xtt-list-item>
	<xtt-list-item>Item 8</xtt-list-item>
	<xtt-list-item>Item 9</xtt-list-item>
	<xtt-list-item>Item 10</xtt-list-item>
	<xtt-list-item>Item 11</xtt-list-item>
	<xtt-list-item>Item 12</xtt-list-item>
</xtt-list-next>