折叠面板 Collapse

可以折叠/展开的内容区域。

使用

API

安装使用

import { TiCollapse, TiCollapseItem } from '@titian-design/mobile-react';

用法示例

基本使用

- 标题A下的内容 -- 标题B下的内容 -

codesanbox

copy

code

import React from 'react';
import { TiCollapse, TiCollapseItem } from 'titian-h5-react';

export default function App() {
  return (
    <div className="content">
      <TiCollapse>
        <TiCollapseItem title="标题文字A">- 标题A下的内容 -</TiCollapseItem>
        <TiCollapseItem title="标题文字B">- 标题B下的内容 -</TiCollapseItem>
      </TiCollapse>
    </div>
  );
}

设置图标

- 标题A下的内容 -- 标题B下的内容 -

codesanbox

copy

code

import React from 'react';
import { TiCollapse, TiCollapseItem } from 'titian-h5-react';

export default function App() {
  return (
    <div className="content">
      <TiCollapse icon="share-wechat-moments">
        <TiCollapseItem title="标题文字A">- 标题A下的内容 -</TiCollapseItem>
        <TiCollapseItem title="标题文字B">- 标题B下的内容 -</TiCollapseItem>
      </TiCollapse>
    </div>
  );
}

禁用

- 标题A下的内容 -- 标题B下的内容 -

codesanbox

copy

code

import React from 'react';
import { TiCollapse, TiCollapseItem } from 'titian-h5-react';

export default function App() {
  return (
    <div className="content">
      <TiCollapse disabled>
        <TiCollapseItem title="标题文字A">- 标题A下的内容 -</TiCollapseItem>
        <TiCollapseItem title="标题文字B">- 标题B下的内容 -</TiCollapseItem>
      </TiCollapse>
    </div>
  );
}

事件监听

- 标题A下的内容 -- 标题B下的内容 -

- 标题A下的内容 -- 标题B下的内容 -

codesanbox

copy

code

import React, { useCallback } from 'react';
import { TiCollapse, TiCollapseItem } from 'titian-h5-react';

export default function App() {
  const handleChange = useCallback((e: CustomEvent) => {
    console.log('切换', e.detail);
  }, []);

  const handleOpen = useCallback((e: CustomEvent) => {
    console.log('打开', e.detail);
  }, []);

  const handleClose = useCallback((e: CustomEvent) => {
    console.log('关闭', e.detail);
  }, []);

  return (
    <div className="code-container">
      <div className="content">
        <TiCollapse onClose={handleClose} onOpen={handleOpen} onChange={handleChange}>
          <TiCollapseItem title="标题文字A">- 标题A下的内容 -</TiCollapseItem>
          <TiCollapseItem title="标题文字B">- 标题B下的内容 -</TiCollapseItem>
        </TiCollapse>
      </div>
      <div className="content">
        <TiCollapse onClose={handleClose} onOpen={handleOpen} onChange={handleChange} repel>
          <TiCollapseItem title="标题文字A">- 标题A下的内容 -</TiCollapseItem>
          <TiCollapseItem title="标题文字B">- 标题B下的内容 -</TiCollapseItem>
        </TiCollapse>
      </div>
    </div>
  );
}

手风琴模式

- 标题A下的内容 -- 标题B下的内容 -

codesanbox

copy

code

import React from 'react';
import { TiCollapse, TiCollapseItem } from 'titian-h5-react';

export default function App() {
  return (
    <div className="content">
      <TiCollapse repel>
        <TiCollapseItem title="标题文字A">- 标题A下的内容 -</TiCollapseItem>
        <TiCollapseItem title="标题文字B">- 标题B下的内容 -</TiCollapseItem>
      </TiCollapse>
    </div>
  );
}

设置默认值

- 标题A下的内容 -- 标题B下的内容 -

codesanbox

copy

code

import React from 'react';
import { TiCollapse, TiCollapseItem } from 'titian-h5-react';

export default function App() {
  return (
    <div className="content">
      <TiCollapse value={[0]}>
        <TiCollapseItem title="标题文字A">- 标题A下的内容 -</TiCollapseItem>
        <TiCollapseItem title="标题文字B">- 标题B下的内容 -</TiCollapseItem>
      </TiCollapse>
    </div>
  );
}

使用 options 属性创建面板

codesanbox

copy

code

import React from 'react';
import { TiCollapse } from 'titian-h5-react';

export default function App() {
  const options = [
    { title: '标题文字A', content: '- 标题A下的内容 -' },
    { title: '标题文字B', content: '- 标题B下的内容 -' },
  ];

  return (
    <div className="content">
      <TiCollapse options={options} />
    </div>
  );
}

TiCollapse API

属性 Properties

名称	类型	必填	默认值	说明	备注
value	<code>Array<string | number></code> | string | number	否	null	选中值	-
options	Options	否	[]		-
icon	string	否	-	全局设置左侧 icon	-
rightIcon	string	否	-	全局设置右侧 icon	-
disabled	boolean	否	-	全局设置是否禁用	-
repel	boolean	否	-	是否手风琴模式	-
divider	boolean	否	-	是否展示分割线	-
clickable	boolean	否	-	开启点击反馈	-
extOptionStyle	string	否	-	子项容器样式

Options

详情可参考 ti-cell 属性

interface Options {
  "clickable"?: boolean;
  "desc"?: string;
  "disabled"?: boolean;
  "divider"?: boolean;
  "icon"?: string;
  "label"?: string;
  "rightIcon"?: string;
  "title": string;
  "content": string;
  "value"?: string | number;
}

事件 Events

名称	参数	描述	备注
onChange	<code>(e: CustomEvent<string | number | Array<string | number>>) => void </code>	折叠面板选中值	当为手风琴模式时返回值为 <code>string | number </code>，否则为 <code>Array<string | number></code>
onOpen	<code>(e: CustomEvent<string | number>) => void </code>	折叠面板展开事件	-
onClose	<code>(e: CustomEvent<string | number>) => void </code>	折叠面板关闭事件	-

可扩展样式名 External Class

类名	说明	备注
extOptionClass	子项容器样式
extOptionContentClass	子项容器折叠区样式

TiCollapseItem API

属性 Properties

名称	类型	必填	默认值	说明	备注
value	string	否	null	用来匹配父类 value，判断当前面板是否需要被展开，如果不传入，默认使用下标(index)	-
title	string	否	[]	标题文字	-
desc	string	否	null	内容文字	-
icon	string	否	false	左侧 icon	-
rightIcon	string	否	null	右侧 icon	-
disabled	boolean	否	false	是否禁用	-
useRightIconSlot	boolean	否	false	是否使用右侧 icon 插槽	-
extStyle	string	否	''	容器样式	-
divider	boolean	否	-	是否展示分割线	-
clickable	boolean	否	-	开启点击反馈	-

插槽 Slots

名称	说明	备注
cell	常显示区域插槽，配合useCellSlot使用	-
title	文档	-
icon	左侧 icon	-
rightIcon	右侧 icon	-
desc	内容	-
default	内容区默认插槽	-

可扩展样式名 External Class

类名	说明	备注
extClass	容器样式

CSS 变量 CSS Variables

变量	默认值	说明	备注
--collapse-item-padding-v	-	折叠区垂直方向的内边距	-
--collapse-item-padding-h	-	折叠区水平方向的内边距	-
--collapse-item-text-color	-	折叠区文本颜色	-
--collapse-item-icon-color	-	右侧 icon 颜色	-
--collapse-item-cubic-bezier	-	动画执行速度	-
--collapse-item-cell-padding-v	-	同 Cell 组件 --cell-padding-v	-
--collapse-item-cell-padding-h	-	同 Cell 组件 --cell-padding-h	-
--collapse-item-cell-text-color	-	同 Cell 组件 --cell-text-color	-
--collapse-item-cell-title-text-color	-	同 Cell 组件 --cell-title-text-color	-
--collapse-item-cell-label-text-color	-	同 Cell 组件 --cell-label-text-color	-
--collapse-item-cell-desc-text-color	-	同 Cell 组件 --cell-desc-text-color	-
--collapse-item-cell-bg-color	-	同 Cell 组件 --cell-bg-color	-
--collapse-item-cell-value-text-color	-	同 Cell 组件 --cell-right-icon-color	-
--collapse-item-cell-text-disabled-color	-	同 Cell 组件 --cell-text-disabled-color	-
--collapse-item-cell-hover-bg-color	-	同 Cell 组件 --cell-hover-bg-color	-
--collapse-item-line-height	theme.lineHeight.single.t4	内容区文字行高	-
--collapse-item-font-weight	theme.fontWeight.regular	内容区文字字重	-
--collapse-item-font-size	theme.fontSize.t4	内容区文字大小	-
--collapse-padding-h	28px	内容区横向间距	-
--collapse-padding-v	46px	内容区垂直间距	-