开发指南
何时使用
可以折叠/展开的内容区域。
基础组件- 通用
- 导航
- 信息录入
- 反馈与告知
- 信息展示
- 工具
区块组件
业务组件
页面模板
Collapse 折叠面板
simple tile
- Promotions are marketing campaigns ran by Marketplace
- Participate to sale your products during that promotion and make a profit
What are Promotion Products?
- Promotion Products is a service that helps you to promote products you list on Marketplace during a certain time range
- You can choose which products should be available for the promotion
- Not all Products of you will be available, because Promotions will only attract certain Product areas
Why can i not submit a higher price?
- The Promotion requires a certain price to make sure that our customers are attracted
What is Promo Stock?
Promo Stock is the criteria needed to be followed to be able to join Promotion. With setting particular Promo Stock value you commit to have this amount of stock available while Promotion is active.
基本
simple tile
- Promotions are marketing campaigns ran by Marketplace
- Participate to sale your products during that promotion and make a profit
What are Promotion Products?
- Promotion Products is a service that helps you to promote products you list on Marketplace during a certain time range
- You can choose which products should be available for the promotion
- Not all Products of you will be available, because Promotions will only attract certain Product areas
Why can i not submit a higher price?
- The Promotion requires a certain price to make sure that our customers are attracted
What is Promo Stock?
Promo Stock is the criteria needed to be followed to be able to join Promotion. With setting particular Promo Stock value you commit to have this amount of stock available while Promotion is active.
带图标
标题带图标
Well, hello there
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Gigantomaniac Monster Text, very long, much width, wow
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Generic Title
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Login Infomation
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
数据
There is a long title, you can set the multiTitle to multi line display, the associated configuration properties and a single height is not the same, the specific configuration platform configuration can be configured.
- Promotions are marketing campaigns ran by Marketplace
- Participate to sale your products during that promotion and make a profit
What are Promotion Products?
- Promotion Products is a service that helps you to promote products you list on Marketplace during a certain time range
- You can choose which products should be available for the promotion
- Not all Products of you will be available, because Promotions will only attract certain Product areas
Why can i not submit a higher price?
- The Promotion requires a certain price to make sure that our customers are attracted
What is Promo Stock?
Promo Stock is the criteria needed to be followed to be able to join Promotion. With setting particular Promo Stock value you commit to have this amount of stock available while Promotion is active.
手风琴
手风琴单例模式，每次只打开一个 Panel。
disable collapse
- Promotions are marketing campaigns ran by Marketplace
- Participate to sale your products during that promotion and make a profit
disable collapse
- Promotion Products is a service that helps you to promote products you list on Marketplace during a certain time range
- You can choose which products should be available for the promotion
- Not all Products of you will be available, because Promotions will only attract certain Product areas
disable collapse
- The Promotion requires a certain price to make sure that our customers are attracted
disable collapse
Promo Stock is the criteria needed to be followed to be able to join Promotion. With setting particular Promo Stock value you commit to have this amount of stock available while Promotion is active.
simple title(disabled)
- Promotions are marketing campaigns ran by Marketplace
- Participate to sale your products during that promotion and make a profit
What are Promotion Products?(disabled)
- Promotion Products is a service that helps you to promote products you list on Marketplace during a certain time range
- You can choose which products should be available for the promotion
- Not all Products of you will be available, because Promotions will only attract certain Product areas
Why can i not submit a higher price?
- The Promotion requires a certain price to make sure that our customers are attracted
What is Promo Stock?
Promo Stock is the criteria needed to be followed to be able to join Promotion. With setting particular Promo Stock value you commit to have this amount of stock available while Promotion is active.
禁用
simple tile
- Promotions are marketing campaigns ran by Marketplace
- Participate to sale your products during that promotion and make a profit
What are Promotion Products?
- Promotion Products is a service that helps you to promote products you list on Marketplace during a certain time range
- You can choose which products should be available for the promotion
- Not all Products of you will be available, because Promotions will only attract certain Product areas
Why can i not submit a higher price?
- The Promotion requires a certain price to make sure that our customers are attracted
What is Promo Stock?
Promo Stock is the criteria needed to be followed to be able to join Promotion. With setting particular Promo Stock value you commit to have this amount of stock available while Promotion is active.
事件
所有的 Panel 不传入 Key,自动分配 key 为 index
任意一个 Panel 手动传入 key,则不分配 key.
建议所有的 Panel 都传入 key 或者都不传 key
There is a long title, you can set the multiTitle to multi line display, the associated configuration properties and a single height is not the same, the specific configuration platform configuration can be configured.
- Promotions are marketing campaigns ran by Marketplace
- Participate to sale your products during that promotion and make a profit
What are Promotion Products?
- Promotion Products is a service that helps you to promote products you list on Marketplace during a certain time range
- You can choose which products should be available for the promotion
- Not all Products of you will be available, because Promotions will only attract certain Product areas
无障碍
组件内置了部分支持无障碍, 但是额外需要开发者手动事情才能完整支持无障碍: 给 Collapse 传入一个 id, 组件会根据 Collapse 的 id 自动给每一个 Panel 生成 Id。如果你想指定 Panel 的 Id 也可以, 给某个 Panel 传入 Id 属性,就会覆盖根据 CollapseId 生成的 Id。
simple tile
simple tile
- Promotions are marketing campaigns ran by Marketplace
- Participate to sale your products during that promotion and make a profit
What are Promotion Products?
- Promotion Products is a service that helps you to promote products you list on Marketplace during a certain time range
- You can choose which products should be available for the promotion
- Not all Products of you will be available, because Promotions will only attract certain Product areas
Why can i not submit a higher price?
- The Promotion requires a certain price to make sure that our customers are attracted
What is Promo Stock?
Promo Stock is the criteria needed to be followed to be able to join Promotion. With setting particular Promo Stock value you commit to have this amount of stock available while Promotion is active.
What are Promotion Products?
- Promotion Products is a service that helps you to promote products you list on Marketplace during a certain time range
- You can choose which products should be available for the promotion
- Not all Products of you will be available, because Promotions will only attract certain Product areas
嵌入
API
Collapse
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| dataSource | 使用数据模型构建 | Array | - |
| defaultExpandedKeys | 默认展开keys | Array | - |
| expandedKeys | 受控展开keys | Array | - |
| onExpand | 展开状态发升变化时候的回调 签名: Function() => void | Function | func.noop |
| disabled | 所有禁用 | Boolean | - |
| accordion | 手风琴模式，一次只能打开一个 | Boolean | false |
Collapse.Panel
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| disabled | 是否禁止用户操作 | Boolean | - |
| title | 标题 | ReactNode | - |
| icon | 标题前的图标 | ReactNode，string | - |
ARIA and KeyBoard
| 按键 | 说明 |
|---|---|
| Tab | 切换到下一个collapse panel |
| Space | 切换collapse的折叠状态 |