xtt-ui

Appearance

List 列表 ​

列表组件，用于展示一系列有序的信息。

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

基础用法 ​

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

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

> 1200px --> 6 列

> 800px --> 4 列

> 500px --> 3 列

> 200px --> 2 列

> 0px --> 1 列

如果想要自定义宽度与列数的对应关系，可以通过监听 xtt-resize 事件来实现。

改变 xtt-resize 事件的 event.detail.next 属性，可以改变列数。

Item 1Item 2Item 3Item 4Item 5Item 6Item 7Item 8Item 9Item 10Item 11Item 12
html
<xtt-list 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>

cols ​

设置固定的列数

Item 1Item 2Item 3Item 4Item 5Item 6Item 7Item 8Item 9Item 10Item 11Item 12
html
<xtt-list 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>