mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
style(Collapse): adjust border gag (#6361)
This commit is contained in:
parent
dc45ab8d96
commit
43f9857688
@ -1,6 +1,5 @@
|
||||
// Utils
|
||||
import { createNamespace, isDef } from '../utils';
|
||||
import { BORDER_TOP } from '../utils/constant';
|
||||
import { raf, doubleRaf } from '../utils/dom/raf';
|
||||
|
||||
// Mixins
|
||||
@ -173,7 +172,7 @@ export default createComponent({
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div class={[bem(), { [BORDER_TOP]: this.index }]}>
|
||||
<div class={[bem({ border: this.index })]}>
|
||||
{this.genTitle()}
|
||||
{this.genContent()}
|
||||
</div>
|
||||
|
@ -1,6 +1,15 @@
|
||||
@import '../style/var';
|
||||
@import '../style/mixins/hairline';
|
||||
|
||||
.van-collapse-item {
|
||||
position: relative;
|
||||
|
||||
&--border {
|
||||
&::after {
|
||||
.hairline-top(@cell-border-color, @padding-md, @padding-md);
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
.van-cell__right-icon::before {
|
||||
transform: rotate(90deg);
|
||||
@ -8,7 +17,8 @@
|
||||
}
|
||||
|
||||
&::after {
|
||||
visibility: hidden;
|
||||
right: @padding-md;
|
||||
display: none;
|
||||
}
|
||||
|
||||
&--expanded {
|
||||
@ -17,7 +27,7 @@
|
||||
}
|
||||
|
||||
&::after {
|
||||
visibility: visible;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -15,13 +15,13 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-collapse-item van-hairline--top">
|
||||
<div class="van-collapse-item van-collapse-item--border">
|
||||
<div role="button" tabindex="0" aria-expanded="false" class="van-cell van-cell--clickable van-collapse-item__title">
|
||||
<div class="van-cell__title"><span>标题2</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||
<!----></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-collapse-item van-hairline--top">
|
||||
<div class="van-collapse-item van-collapse-item--border">
|
||||
<div role="button" tabindex="-1" aria-expanded="false" class="van-cell van-cell--clickable van-collapse-item__title van-collapse-item__title--disabled">
|
||||
<div class="van-cell__title"><span>标题3</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||
<!----></i>
|
||||
@ -42,13 +42,13 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-collapse-item van-hairline--top">
|
||||
<div class="van-collapse-item van-collapse-item--border">
|
||||
<div role="button" tabindex="0" aria-expanded="false" class="van-cell van-cell--clickable van-collapse-item__title">
|
||||
<div class="van-cell__title"><span>标题2</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||
<!----></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-collapse-item van-hairline--top">
|
||||
<div class="van-collapse-item van-collapse-item--border">
|
||||
<div role="button" tabindex="0" aria-expanded="false" class="van-cell van-cell--clickable van-collapse-item__title">
|
||||
<div class="van-cell__title"><span>标题3</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||
<!----></i>
|
||||
@ -66,7 +66,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<!----></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-collapse-item van-hairline--top">
|
||||
<div class="van-collapse-item van-collapse-item--border">
|
||||
<div role="button" tabindex="0" aria-expanded="false" class="van-cell van-cell--clickable van-collapse-item__title"><i class="van-icon van-icon-shop-o van-cell__left-icon">
|
||||
<!----></i>
|
||||
<div class="van-cell__title"><span>标题2</span></div>
|
||||
|
@ -8,13 +8,13 @@ exports[`disable border 1`] = `
|
||||
<!----></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-collapse-item van-hairline--top">
|
||||
<div class="van-collapse-item van-collapse-item--border">
|
||||
<div role="button" tabindex="0" aria-expanded="false" class="van-cell van-cell--clickable van-collapse-item__title">
|
||||
<div class="van-cell__title"><span>b</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||
<!----></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-collapse-item van-hairline--top">
|
||||
<div class="van-collapse-item van-collapse-item--border">
|
||||
<div role="button" tabindex="0" aria-expanded="false" class="van-cell van-cell--clickable van-collapse-item__title">
|
||||
<div class="van-cell__title"><span>c</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||
<!----></i>
|
||||
@ -31,7 +31,7 @@ exports[`lazy render collapse content 1`] = `
|
||||
<!----></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-collapse-item van-hairline--top" style="padding: 0px;">
|
||||
<div class="van-collapse-item van-collapse-item--border" style="padding: 0px;">
|
||||
<div role="button" tabindex="0" aria-expanded="true" class="van-cell van-cell--clickable van-collapse-item__title van-collapse-item__title--expanded">
|
||||
<div class="van-cell__title"><span>b</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||
<!----></i>
|
||||
|
Loading…
x
Reference in New Issue
Block a user