refactor:collapse (#6266)
* refactor:collapse * fix collapse props version * docs:update & refactor: collapse type & fix collapsiblepull/6265/head^2
果冻橙
GitHub
parent
dc9987aea8
commit
2f51f2d3af
|
|
@ -17,6 +17,9 @@ import useConfigInject from '../config-provider/hooks/useConfigInject';
|
|||
import type { CollapsePanelProps } from './CollapsePanel';
|
||||
import collapseMotion from '../_util/collapseMotion';
|
||||
|
||||
// CSSINJS
|
||||
import useStyle from './style';
|
||||
|
||||
type Key = number | string;
|
||||
|
||||
function getActiveKeysArray(activeKey: Key | Key[]) {
|
||||
|
|
@ -39,7 +42,7 @@ export default defineComponent({
|
|||
destroyInactivePanel: false,
|
||||
bordered: true,
|
||||
openAnimation: collapseMotion('ant-motion-collapse', false),
|
||||
expandIconPosition: 'left',
|
||||
expandIconPosition: 'start',
|
||||
}),
|
||||
slots: ['expandIcon'],
|
||||
// emits: ['change', 'update:activeKey'],
|
||||
|
|
@ -56,12 +59,16 @@ export default defineComponent({
|
|||
{ deep: true },
|
||||
);
|
||||
const { prefixCls, direction } = useConfigInject('collapse', props);
|
||||
|
||||
// style
|
||||
const [wrapSSR, hashId] = useStyle(prefixCls);
|
||||
|
||||
const iconPosition = computed(() => {
|
||||
const { expandIconPosition } = props;
|
||||
if (expandIconPosition !== undefined) {
|
||||
return expandIconPosition;
|
||||
}
|
||||
return direction.value === 'rtl' ? 'right' : 'left';
|
||||
return direction.value === 'rtl' ? 'end' : 'start';
|
||||
});
|
||||
|
||||
const renderExpandIcon = (panelProps: CollapsePanelProps) => {
|
||||
|
|
@ -73,7 +80,12 @@ export default defineComponent({
|
|||
);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div
|
||||
class={`${prefixCls.value}-expand-icon`}
|
||||
onClick={() =>
|
||||
['header', 'icon'].includes(props.collapsible) && onClickItem(panelProps.panelKey)
|
||||
}
|
||||
>
|
||||
{isValidElement(Array.isArray(expandIcon) ? icon[0] : icon)
|
||||
? cloneElement(
|
||||
icon,
|
||||
|
|
@ -162,15 +174,18 @@ export default defineComponent({
|
|||
|
||||
return () => {
|
||||
const { accordion, bordered, ghost } = props;
|
||||
const collapseClassName = classNames({
|
||||
[prefixCls.value]: true,
|
||||
[`${prefixCls.value}-borderless`]: !bordered,
|
||||
[`${prefixCls.value}-icon-position-${iconPosition.value}`]: true,
|
||||
[`${prefixCls.value}-rtl`]: direction.value === 'rtl',
|
||||
[`${prefixCls.value}-ghost`]: !!ghost,
|
||||
[attrs.class as string]: !!attrs.class,
|
||||
});
|
||||
return (
|
||||
const collapseClassName = classNames(
|
||||
prefixCls.value,
|
||||
{
|
||||
[`${prefixCls.value}-borderless`]: !bordered,
|
||||
[`${prefixCls.value}-icon-position-${iconPosition.value}`]: true,
|
||||
[`${prefixCls.value}-rtl`]: direction.value === 'rtl',
|
||||
[`${prefixCls.value}-ghost`]: !!ghost,
|
||||
[attrs.class as string]: !!attrs.class,
|
||||
},
|
||||
hashId.value,
|
||||
);
|
||||
return wrapSSR(
|
||||
<div
|
||||
class={collapseClassName}
|
||||
{...getDataAndAriaProps(attrs)}
|
||||
|
|
@ -178,7 +193,7 @@ export default defineComponent({
|
|||
role={accordion ? 'tablist' : null}
|
||||
>
|
||||
{getItems()}
|
||||
</div>
|
||||
</div>,
|
||||
);
|
||||
};
|
||||
},
|
||||
|
|
|
|||
|
|
@ -57,6 +57,7 @@ export default defineComponent({
|
|||
const headerCls = classNames(`${prefixClsValue}-header`, {
|
||||
[headerClass]: headerClass,
|
||||
[`${prefixClsValue}-header-collapsible-only`]: collapsible === 'header',
|
||||
[`${prefixClsValue}-icon-collapsible-only`]: collapsible === 'icon',
|
||||
});
|
||||
const itemCls = classNames({
|
||||
[`${prefixClsValue}-item`]: true,
|
||||
|
|
@ -91,20 +92,19 @@ export default defineComponent({
|
|||
<div {...attrs} class={itemCls}>
|
||||
<div
|
||||
class={headerCls}
|
||||
onClick={() => collapsible !== 'header' && handleItemClick()}
|
||||
onClick={() => !['header', 'icon'].includes(collapsible) && handleItemClick()}
|
||||
role={accordion ? 'tab' : 'button'}
|
||||
tabindex={disabled ? -1 : 0}
|
||||
aria-expanded={isActive}
|
||||
onKeypress={handleKeyPress}
|
||||
>
|
||||
{showArrow && icon}
|
||||
{collapsible === 'header' ? (
|
||||
<span onClick={handleItemClick} class={`${prefixClsValue}-header-text`}>
|
||||
{header}
|
||||
</span>
|
||||
) : (
|
||||
header
|
||||
)}
|
||||
<span
|
||||
onClick={() => collapsible === 'header' && handleItemClick()}
|
||||
class={`${prefixClsValue}-header-text`}
|
||||
>
|
||||
{header}
|
||||
</span>
|
||||
{extra && <div class={`${prefixClsValue}-extra`}>{extra}</div>}
|
||||
</div>
|
||||
<Transition {...transitionProps}>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,8 @@
|
|||
import type { PropType } from 'vue';
|
||||
import type { Key } from '../_util/type';
|
||||
import { tuple } from '../_util/type';
|
||||
import { tuple, booleanType, someType, stringType, functionType } from '../_util/type';
|
||||
import PropTypes from '../_util/vue-types';
|
||||
|
||||
export type CollapsibleType = 'header' | 'disabled';
|
||||
export type CollapsibleType = 'header' | 'icon' | 'disabled';
|
||||
|
||||
export type ActiveKeyType = Array<string | number> | string | number;
|
||||
|
||||
|
|
@ -20,18 +19,18 @@ export interface PanelProps {
|
|||
|
||||
const collapseProps = () => ({
|
||||
prefixCls: String,
|
||||
activeKey: { type: [Array, Number, String] as PropType<ActiveKeyType> },
|
||||
defaultActiveKey: { type: [Array, Number, String] as PropType<ActiveKeyType> },
|
||||
accordion: { type: Boolean, default: undefined },
|
||||
destroyInactivePanel: { type: Boolean, default: undefined },
|
||||
bordered: { type: Boolean, default: undefined },
|
||||
expandIcon: Function as PropType<(panelProps: PanelProps) => any>,
|
||||
activeKey: someType<ActiveKeyType>([Array, Number, String]),
|
||||
defaultActiveKey: someType<ActiveKeyType>([Array, Number, String]),
|
||||
accordion: booleanType(),
|
||||
destroyInactivePanel: booleanType(),
|
||||
bordered: booleanType(),
|
||||
expandIcon: functionType<(panelProps: PanelProps) => any>(),
|
||||
openAnimation: PropTypes.object,
|
||||
expandIconPosition: PropTypes.oneOf(tuple('left', 'right')),
|
||||
collapsible: { type: String as PropType<CollapsibleType> },
|
||||
ghost: { type: Boolean, default: undefined },
|
||||
onChange: Function as PropType<(key: Key | Key[]) => void>,
|
||||
'onUpdate:activeKey': Function as PropType<(key: Key | Key[]) => void>,
|
||||
expandIconPosition: PropTypes.oneOf(tuple('start', 'end')),
|
||||
collapsible: stringType<CollapsibleType>(),
|
||||
ghost: booleanType(),
|
||||
onChange: functionType<(key: Key | Key[]) => void>(),
|
||||
'onUpdate:activeKey': functionType<(key: Key | Key[]) => void>(),
|
||||
});
|
||||
|
||||
const collapsePanelProps = () => ({
|
||||
|
|
@ -39,19 +38,19 @@ const collapsePanelProps = () => ({
|
|||
prefixCls: String,
|
||||
header: PropTypes.any,
|
||||
headerClass: String,
|
||||
showArrow: { type: Boolean, default: undefined },
|
||||
isActive: { type: Boolean, default: undefined },
|
||||
destroyInactivePanel: { type: Boolean, default: undefined },
|
||||
showArrow: booleanType(),
|
||||
isActive: booleanType(),
|
||||
destroyInactivePanel: booleanType(),
|
||||
/** @deprecated Use `collapsible="disabled"` instead */
|
||||
disabled: { type: Boolean, default: undefined },
|
||||
accordion: { type: Boolean, default: undefined },
|
||||
forceRender: { type: Boolean, default: undefined },
|
||||
expandIcon: Function as PropType<(panelProps: PanelProps) => any>,
|
||||
disabled: booleanType(),
|
||||
accordion: booleanType(),
|
||||
forceRender: booleanType(),
|
||||
expandIcon: functionType<(panelProps: PanelProps) => any>(),
|
||||
extra: PropTypes.any,
|
||||
panelKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
||||
collapsible: { type: String as PropType<CollapsibleType> },
|
||||
collapsible: stringType<CollapsibleType>(),
|
||||
role: String,
|
||||
onItemClick: { type: Function as PropType<(panelKey: Key) => void> },
|
||||
onItemClick: functionType<(panelKey: Key) => void>(),
|
||||
});
|
||||
|
||||
export { collapseProps, collapsePanelProps };
|
||||
|
|
|
|||
|
|
@ -0,0 +1,55 @@
|
|||
<docs>
|
||||
---
|
||||
order: 7
|
||||
title:
|
||||
zh-CN: 可折叠触发区域
|
||||
en-US: Collapsible
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
通过 `collapsible` 属性，可以设置面板的可折叠触发区域。
|
||||
|
||||
## en-US
|
||||
|
||||
Specify the trigger area of collapsible by `collapsible`.
|
||||
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
<a-space direction="vertical">
|
||||
<a-collapse collapsible="header" v-model:activeKey="activeKey">
|
||||
<a-collapse-panel header="This panel can only be collapsed by clicking text" key="1">
|
||||
<p>{{ text }}</p>
|
||||
</a-collapse-panel>
|
||||
</a-collapse>
|
||||
<a-collapse collapsible="icon" v-model:activeKey="activeKey">
|
||||
<a-collapse-panel header="This panel can only be collapsed by clicking icon" key="1">
|
||||
<p>{{ text }}</p>
|
||||
</a-collapse-panel>
|
||||
</a-collapse>
|
||||
<a-collapse collapsible="disabled">
|
||||
<a-collapse-panel header="This panel can't be collapsed" key="1">
|
||||
<p>{{ text }}</p>
|
||||
</a-collapse-panel>
|
||||
</a-collapse>
|
||||
</a-space>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from 'vue';
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const activeKey = ref(['1']);
|
||||
const text = `A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.`;
|
||||
return {
|
||||
activeKey,
|
||||
text,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
.ant-space {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -17,7 +17,11 @@ Customize the background, border and margin styles and icon for each panel.
|
|||
</docs>
|
||||
|
||||
<template>
|
||||
<a-collapse v-model:activeKey="activeKey" :bordered="false">
|
||||
<a-collapse
|
||||
v-model:activeKey="activeKey"
|
||||
:bordered="false"
|
||||
style="background: rgb(255, 255, 255)"
|
||||
>
|
||||
<template #expandIcon="{ isActive }">
|
||||
<caret-right-outlined :rotate="isActive ? 90 : 0" />
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -34,8 +34,8 @@ More than one panel can be expanded at a time, the first panel is initialized to
|
|||
<br />
|
||||
<span>Expand Icon Position:</span>
|
||||
<a-select v-model:value="expandIconPosition">
|
||||
<a-select-option value="left">left</a-select-option>
|
||||
<a-select-option value="right">right</a-select-option>
|
||||
<a-select-option value="start">start</a-select-option>
|
||||
<a-select-option value="end">end</a-select-option>
|
||||
</a-select>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
|
|
@ -50,7 +50,7 @@ export default defineComponent({
|
|||
setup() {
|
||||
const text = `A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.`;
|
||||
const activeKey = ref(['1']);
|
||||
const expandIconPosition = ref<CollapseProps['expandIconPosition']>('left');
|
||||
const expandIconPosition = ref<CollapseProps['expandIconPosition']>('start');
|
||||
|
||||
const handleClick = (event: MouseEvent) => {
|
||||
// If you don't want click extra trigger collapse, you can prevent this:
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
<Noarrow />
|
||||
<Extra />
|
||||
<Ghost />
|
||||
<Collapsible />
|
||||
</demo-sort>
|
||||
</template>
|
||||
|
||||
|
|
@ -20,6 +21,7 @@ import Mix from './mix.vue';
|
|||
import Noarrow from './noarrow.vue';
|
||||
import Extra from './extra.vue';
|
||||
import Ghost from './ghost.vue';
|
||||
import Collapsible from './collapsible.vue';
|
||||
import CN from '../index.zh-CN.md';
|
||||
import US from '../index.en-US.md';
|
||||
|
||||
|
|
@ -35,6 +37,7 @@ export default {
|
|||
Noarrow,
|
||||
Extra,
|
||||
Ghost,
|
||||
Collapsible,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
category: Components
|
||||
type: Data Display
|
||||
title: Collapse
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/IxH16B9RD/Collapse.svg
|
||||
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*B7HKR5OBe8gAAAAAAAAAAAAADrJ8AQ/original
|
||||
---
|
||||
|
||||
A content area which can be collapsed and expanded.
|
||||
|
|
@ -19,12 +19,12 @@ A content area which can be collapsed and expanded.
|
|||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| accordion | If `true`, `Collapse` renders as `Accordion` | boolean | `false` | |
|
||||
| activeKey(v-model) | Key of the active panel | string\[]\|string | No default value. In `accordion` mode, it's the key of the first panel. | |
|
||||
| activeKey(v-model) | Key of the active panel | string\[] \| string <br> number\[] \| number | No default value. In `accordion` mode, it's the key of the first panel. | |
|
||||
| bordered | Toggles rendering of the border around the collapse block | boolean | `true` | |
|
||||
| collapsible | Specify whether the panels of children be collapsible or the trigger area of collapsible | `header` \| `disabled` | - | 3.0 |
|
||||
| collapsible | Specify whether the panels of children be collapsible or the trigger area of collapsible | `header` \| `icon` \| `disabled` | - | 4.0 |
|
||||
| destroyInactivePanel | Destroy Inactive Panel | boolean | `false` | |
|
||||
| expandIcon | allow to customize collapse icon | Function(props):VNode \| v-slot:expandIcon="props" | | |
|
||||
| expandIconPosition | Set expand icon position: `left`, `right` | `left` | - | 1.5.0 |
|
||||
| expandIconPosition | Set expand icon position | `start` \| `end` | - | 4.0 |
|
||||
| ghost | Make the collapse borderless and its background transparent | boolean | false | 3.0 |
|
||||
|
||||
### events
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ category: Components
|
|||
type: 数据展示
|
||||
title: Collapse
|
||||
subtitle: 折叠面板
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/IxH16B9RD/Collapse.svg
|
||||
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*B7HKR5OBe8gAAAAAAAAAAAAADrJ8AQ/original
|
||||
---
|
||||
|
||||
可以折叠/展开的内容区域。
|
||||
|
|
@ -20,12 +20,12 @@ cover: https://gw.alipayobjects.com/zos/alicdn/IxH16B9RD/Collapse.svg
|
|||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| accordion | 手风琴模式 | boolean | `false` | |
|
||||
| activeKey(v-model) | 当前激活 tab 面板的 key | string\[]\|string | 默认无，accordion 模式下默认第一个元素 | |
|
||||
| activeKey(v-model) | 当前激活 tab 面板的 key | string\[] \| string <br> number\[] \| number | 默认无，accordion 模式下默认第一个元素 | |
|
||||
| bordered | 带边框风格的折叠面板 | boolean | `true` | |
|
||||
| collapsible | 所有子面板是否可折叠或指定可折叠触发区域 | `header` \| `disabled` | - | 3.0 |
|
||||
| collapsible | 所有子面板是否可折叠或指定可折叠触发区域 | `header` \| `icon` \| `disabled` | - | 4.0 |
|
||||
| destroyInactivePanel | 销毁折叠隐藏的面板 | boolean | `false` | |
|
||||
| expandIcon | 自定义切换图标 | Function(props):VNode \| slot="expandIcon" slot-scope="props"\|#expandIcon="props" | | |
|
||||
| expandIconPosition | 设置图标位置： `left`, `right` | `left` | - | 1.5.0 |
|
||||
| expandIconPosition | 设置图标位置 | `start` \| `end` | - | 4.0 |
|
||||
| ghost | 使折叠面板透明且无边框 | boolean | false | 3.0 |
|
||||
|
||||
### 事件
|
||||
|
|
|
|||
|
|
@ -1,162 +0,0 @@
|
|||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
|
||||
@collapse-prefix-cls: ~'@{ant-prefix}-collapse';
|
||||
|
||||
.@{collapse-prefix-cls} {
|
||||
.reset-component();
|
||||
|
||||
background-color: @collapse-header-bg;
|
||||
border: @border-width-base @border-style-base @border-color-base;
|
||||
border-bottom: 0;
|
||||
border-radius: @collapse-panel-border-radius;
|
||||
|
||||
& > &-item {
|
||||
border-bottom: @border-width-base @border-style-base @border-color-base;
|
||||
|
||||
&:last-child {
|
||||
&,
|
||||
& > .@{collapse-prefix-cls}-header {
|
||||
border-radius: 0 0 @collapse-panel-border-radius @collapse-panel-border-radius;
|
||||
}
|
||||
}
|
||||
|
||||
> .@{collapse-prefix-cls}-header {
|
||||
position: relative; // Compatible with old version of antd, should remove in next version
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: flex-start;
|
||||
padding: @collapse-header-padding;
|
||||
color: @heading-color;
|
||||
line-height: @line-height-base;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s, visibility 0s;
|
||||
|
||||
.@{collapse-prefix-cls}-arrow {
|
||||
display: inline-block;
|
||||
margin-right: @margin-sm;
|
||||
font-size: @font-size-sm;
|
||||
vertical-align: -1px;
|
||||
|
||||
& svg {
|
||||
transition: transform 0.24s;
|
||||
}
|
||||
}
|
||||
|
||||
.@{collapse-prefix-cls}-extra {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.@{collapse-prefix-cls}-header-collapsible-only {
|
||||
cursor: default;
|
||||
.@{collapse-prefix-cls}-header-text {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
&.@{collapse-prefix-cls}-no-arrow {
|
||||
> .@{collapse-prefix-cls}-header {
|
||||
padding-left: @padding-sm;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Expand Icon right
|
||||
&-icon-position-right {
|
||||
& > .@{collapse-prefix-cls}-item {
|
||||
> .@{collapse-prefix-cls}-header {
|
||||
position: relative;
|
||||
padding: @collapse-header-padding;
|
||||
padding-right: @collapse-header-padding-extra;
|
||||
|
||||
.@{collapse-prefix-cls}-arrow {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: @padding-md;
|
||||
left: auto;
|
||||
margin: 0;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-content {
|
||||
color: @text-color;
|
||||
background-color: @collapse-content-bg;
|
||||
border-top: @border-width-base @border-style-base @border-color-base;
|
||||
|
||||
& > &-box {
|
||||
padding: @collapse-content-padding;
|
||||
}
|
||||
|
||||
&-hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&-item:last-child {
|
||||
> .@{collapse-prefix-cls}-content {
|
||||
border-radius: 0 0 @collapse-panel-border-radius @collapse-panel-border-radius;
|
||||
}
|
||||
}
|
||||
|
||||
&-borderless {
|
||||
background-color: @collapse-header-bg;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
&-borderless > &-item {
|
||||
border-bottom: 1px solid @border-color-base;
|
||||
}
|
||||
|
||||
&-borderless > &-item:last-child,
|
||||
&-borderless > &-item:last-child &-header {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
// hide the last border-bottom in borderless mode
|
||||
&-borderless > &-item:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
&-borderless > &-item > &-content {
|
||||
background-color: transparent;
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
&-borderless > &-item > &-content > &-content-box {
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
&-ghost {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
> .@{collapse-prefix-cls}-item {
|
||||
border-bottom: 0;
|
||||
> .@{collapse-prefix-cls}-content {
|
||||
background-color: transparent;
|
||||
border-top: 0;
|
||||
> .@{collapse-prefix-cls}-content-box {
|
||||
padding-top: 12px;
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& &-item-disabled > &-header {
|
||||
&,
|
||||
& > .arrow {
|
||||
color: @disabled-color;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@import './rtl';
|
||||
|
|
@ -1,2 +1,271 @@
|
|||
import '../../style/index.less';
|
||||
import './index.less';
|
||||
import { genCollapseMotion } from '../../_style/motion';
|
||||
import type { FullToken, GenerateStyle } from '../../theme/internal';
|
||||
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
|
||||
import { resetComponent, resetIcon } from '../../_style';
|
||||
|
||||
export interface ComponentToken {}
|
||||
|
||||
type CollapseToken = FullToken<'Collapse'> & {
|
||||
collapseContentBg: string;
|
||||
collapseHeaderBg: string;
|
||||
collapseHeaderPadding: string;
|
||||
collapsePanelBorderRadius: number;
|
||||
collapseContentPaddingHorizontal: number;
|
||||
};
|
||||
|
||||
export const genBaseStyle: GenerateStyle<CollapseToken> = token => {
|
||||
const {
|
||||
componentCls,
|
||||
collapseContentBg,
|
||||
padding,
|
||||
collapseContentPaddingHorizontal,
|
||||
collapseHeaderBg,
|
||||
collapseHeaderPadding,
|
||||
collapsePanelBorderRadius,
|
||||
|
||||
lineWidth,
|
||||
lineType,
|
||||
colorBorder,
|
||||
colorText,
|
||||
colorTextHeading,
|
||||
colorTextDisabled,
|
||||
fontSize,
|
||||
lineHeight,
|
||||
marginSM,
|
||||
paddingSM,
|
||||
motionDurationSlow,
|
||||
fontSizeIcon,
|
||||
} = token;
|
||||
|
||||
const borderBase = `${lineWidth}px ${lineType} ${colorBorder}`;
|
||||
|
||||
return {
|
||||
[componentCls]: {
|
||||
...resetComponent(token),
|
||||
backgroundColor: collapseHeaderBg,
|
||||
border: borderBase,
|
||||
borderBottom: 0,
|
||||
borderRadius: `${collapsePanelBorderRadius}px`,
|
||||
|
||||
[`&-rtl`]: {
|
||||
direction: 'rtl',
|
||||
},
|
||||
|
||||
[`& > ${componentCls}-item`]: {
|
||||
borderBottom: borderBase,
|
||||
[`&:last-child`]: {
|
||||
[`
|
||||
&,
|
||||
& > ${componentCls}-header`]: {
|
||||
borderRadius: `0 0 ${collapsePanelBorderRadius}px ${collapsePanelBorderRadius}px`,
|
||||
},
|
||||
},
|
||||
|
||||
[`> ${componentCls}-header`]: {
|
||||
position: 'relative', // Compatible with old version of antd, should remove in next version
|
||||
display: 'flex',
|
||||
flexWrap: 'nowrap',
|
||||
alignItems: 'flex-start',
|
||||
padding: collapseHeaderPadding,
|
||||
color: colorTextHeading,
|
||||
lineHeight,
|
||||
cursor: 'pointer',
|
||||
transition: `all ${motionDurationSlow}, visibility 0s`,
|
||||
|
||||
[`> ${componentCls}-header-text`]: {
|
||||
flex: 'auto',
|
||||
},
|
||||
|
||||
'&:focus': {
|
||||
outline: 'none',
|
||||
},
|
||||
|
||||
// >>>>> Arrow
|
||||
[`${componentCls}-expand-icon`]: {
|
||||
height: fontSize * lineHeight,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
paddingInlineEnd: marginSM,
|
||||
},
|
||||
|
||||
[`${componentCls}-arrow`]: {
|
||||
...resetIcon(),
|
||||
fontSize: fontSizeIcon,
|
||||
|
||||
svg: {
|
||||
transition: `transform ${motionDurationSlow}`,
|
||||
},
|
||||
},
|
||||
|
||||
// >>>>> Text
|
||||
[`${componentCls}-header-text`]: {
|
||||
marginInlineEnd: 'auto',
|
||||
},
|
||||
},
|
||||
|
||||
[`${componentCls}-header-collapsible-only`]: {
|
||||
cursor: 'default',
|
||||
|
||||
[`${componentCls}-header-text`]: {
|
||||
flex: 'none',
|
||||
cursor: 'pointer',
|
||||
},
|
||||
[`${componentCls}-expand-icon`]: {
|
||||
cursor: 'pointer',
|
||||
},
|
||||
},
|
||||
|
||||
[`${componentCls}-icon-collapsible-only`]: {
|
||||
cursor: 'default',
|
||||
|
||||
[`${componentCls}-expand-icon`]: {
|
||||
cursor: 'pointer',
|
||||
},
|
||||
},
|
||||
|
||||
[`&${componentCls}-no-arrow`]: {
|
||||
[`> ${componentCls}-header`]: {
|
||||
paddingInlineStart: paddingSM,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
[`${componentCls}-content`]: {
|
||||
color: colorText,
|
||||
backgroundColor: collapseContentBg,
|
||||
borderTop: borderBase,
|
||||
|
||||
[`& > ${componentCls}-content-box`]: {
|
||||
padding: `${padding}px ${collapseContentPaddingHorizontal}px`,
|
||||
},
|
||||
|
||||
[`&-hidden`]: {
|
||||
display: 'none',
|
||||
},
|
||||
},
|
||||
|
||||
[`${componentCls}-item:last-child`]: {
|
||||
[`> ${componentCls}-content`]: {
|
||||
borderRadius: `0 0 ${collapsePanelBorderRadius}px ${collapsePanelBorderRadius}px`,
|
||||
},
|
||||
},
|
||||
|
||||
[`& ${componentCls}-item-disabled > ${componentCls}-header`]: {
|
||||
[`
|
||||
&,
|
||||
& > .arrow
|
||||
`]: {
|
||||
color: colorTextDisabled,
|
||||
cursor: 'not-allowed',
|
||||
},
|
||||
},
|
||||
|
||||
// ========================== Icon Position ==========================
|
||||
[`&${componentCls}-icon-position-end`]: {
|
||||
[`& > ${componentCls}-item`]: {
|
||||
[`> ${componentCls}-header`]: {
|
||||
[`${componentCls}-expand-icon`]: {
|
||||
order: 1,
|
||||
paddingInlineEnd: 0,
|
||||
paddingInlineStart: marginSM,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
const genArrowStyle: GenerateStyle<CollapseToken> = token => {
|
||||
const { componentCls } = token;
|
||||
|
||||
const fixedSelector = `> ${componentCls}-item > ${componentCls}-header ${componentCls}-arrow svg`;
|
||||
|
||||
return {
|
||||
[`${componentCls}-rtl`]: {
|
||||
[fixedSelector]: {
|
||||
transform: `rotate(180deg)`,
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
const genBorderlessStyle: GenerateStyle<CollapseToken> = token => {
|
||||
const {
|
||||
componentCls,
|
||||
collapseHeaderBg,
|
||||
paddingXXS,
|
||||
|
||||
colorBorder,
|
||||
} = token;
|
||||
|
||||
return {
|
||||
[`${componentCls}-borderless`]: {
|
||||
backgroundColor: collapseHeaderBg,
|
||||
border: 0,
|
||||
|
||||
[`> ${componentCls}-item`]: {
|
||||
borderBottom: `1px solid ${colorBorder}`,
|
||||
},
|
||||
|
||||
[`
|
||||
> ${componentCls}-item:last-child,
|
||||
> ${componentCls}-item:last-child ${componentCls}-header
|
||||
`]: {
|
||||
borderRadius: 0,
|
||||
},
|
||||
|
||||
[`> ${componentCls}-item:last-child`]: {
|
||||
borderBottom: 0,
|
||||
},
|
||||
|
||||
[`> ${componentCls}-item > ${componentCls}-content`]: {
|
||||
backgroundColor: 'transparent',
|
||||
borderTop: 0,
|
||||
},
|
||||
|
||||
[`> ${componentCls}-item > ${componentCls}-content > ${componentCls}-content-box`]: {
|
||||
paddingTop: paddingXXS,
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
const genGhostStyle: GenerateStyle<CollapseToken> = token => {
|
||||
const { componentCls, paddingSM } = token;
|
||||
|
||||
return {
|
||||
[`${componentCls}-ghost`]: {
|
||||
backgroundColor: 'transparent',
|
||||
border: 0,
|
||||
[`> ${componentCls}-item`]: {
|
||||
borderBottom: 0,
|
||||
[`> ${componentCls}-content`]: {
|
||||
backgroundColor: 'transparent',
|
||||
border: 0,
|
||||
[`> ${componentCls}-content-box`]: {
|
||||
paddingBlock: paddingSM,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
export default genComponentStyleHook('Collapse', token => {
|
||||
const collapseToken = mergeToken<CollapseToken>(token, {
|
||||
collapseContentBg: token.colorBgContainer,
|
||||
collapseHeaderBg: token.colorFillAlter,
|
||||
collapseHeaderPadding: `${token.paddingSM}px ${token.padding}px`,
|
||||
collapsePanelBorderRadius: token.borderRadiusLG,
|
||||
collapseContentPaddingHorizontal: 16, // Fixed value
|
||||
});
|
||||
|
||||
return [
|
||||
genBaseStyle(collapseToken),
|
||||
genBorderlessStyle(collapseToken),
|
||||
genGhostStyle(collapseToken),
|
||||
genArrowStyle(collapseToken),
|
||||
genCollapseMotion(collapseToken),
|
||||
];
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,48 +0,0 @@
|
|||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
|
||||
@collapse-prefix-cls: ~'@{ant-prefix}-collapse';
|
||||
|
||||
.@{collapse-prefix-cls} {
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
& > &-item {
|
||||
> .@{collapse-prefix-cls}-header {
|
||||
.@{collapse-prefix-cls}-rtl & {
|
||||
padding: @collapse-header-padding;
|
||||
padding-right: @collapse-header-padding-extra;
|
||||
}
|
||||
|
||||
.@{collapse-prefix-cls}-arrow {
|
||||
.@{collapse-prefix-cls}-rtl& {
|
||||
margin-right: 0;
|
||||
margin-left: @margin-sm;
|
||||
}
|
||||
|
||||
& svg {
|
||||
.@{collapse-prefix-cls}-rtl& {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.@{collapse-prefix-cls}-extra {
|
||||
.@{collapse-prefix-cls}-rtl& {
|
||||
margin-right: auto;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.@{collapse-prefix-cls}-no-arrow {
|
||||
> .@{collapse-prefix-cls}-header {
|
||||
.@{collapse-prefix-cls}-rtl& {
|
||||
padding-right: @padding-sm;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -18,7 +18,7 @@ import './tabs/style';
|
|||
// import './dropdown/style';
|
||||
// import './divider/style';
|
||||
// import './card/style';
|
||||
import './collapse/style';
|
||||
// import './collapse/style';
|
||||
// import './carousel/style';
|
||||
// import './notification/style';
|
||||
// import './message/style';
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ import type { ComponentToken as CardComponentToken } from '../../card/style';
|
|||
import type { ComponentToken as CarouselComponentToken } from '../../carousel/style';
|
||||
// import type { ComponentToken as CascaderComponentToken } from '../../cascader/style';
|
||||
import type { ComponentToken as CheckboxComponentToken } from '../../checkbox/style';
|
||||
// import type { ComponentToken as CollapseComponentToken } from '../../collapse/style';
|
||||
import type { ComponentToken as CollapseComponentToken } from '../../collapse/style';
|
||||
import type { ComponentToken as DatePickerComponentToken } from '../../date-picker/style';
|
||||
import type { ComponentToken as DividerComponentToken } from '../../divider/style';
|
||||
import type { ComponentToken as DropdownComponentToken } from '../../dropdown/style';
|
||||
|
|
@ -63,7 +63,7 @@ export interface ComponentTokenMap {
|
|||
Carousel?: CarouselComponentToken;
|
||||
// Cascader?: CascaderComponentToken;
|
||||
Checkbox?: CheckboxComponentToken;
|
||||
// Collapse?: CollapseComponentToken;
|
||||
Collapse?: CollapseComponentToken;
|
||||
Comment?: {};
|
||||
DatePicker?: DatePickerComponentToken;
|
||||
Descriptions?: {};
|
||||
|
|
|
|||
Loading…
Reference in New Issue