javascript/element-plus
1
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2026-03-13 07:51:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(components): [el-timeline] add center prop (#3436)

Browse Source 
* feat(components): [el-timeline]add center prop

* fix: remove unnecessary selector
This commit is contained in:
BeADre
2021-09-18 11:31:58 +08:00
committed by GitHub
parent 48a787d55f
commit fdc2bef0c1
5 changed files with 116 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
docs/en-US/component/timeline.md
View File

@@ -32,6 +32,16 @@ timeline/custom-timestamp
:::
## Vertically centered
Timeline-Item is centered vertically.
:::demo
timeline/center
:::
## Timeline Slots
| Name | Description |
@@ -40,16 +50,17 @@ timeline/custom-timestamp
## Timeline-Item Attributes
| Attribute | Description | Type | Accepted Values | Default |
| -------------- | ------------------------- | ------- | ------------------------------------------- | ------- |
| timestamp | timestamp content | string | — | — |
| hide-timestamp | whether to show timestamp | boolean | — | false |
| placement | position of timestamp | string | top / bottom | bottom |
| type | node type | string | primary / success / warning / danger / info | — |
| color | background color of node | string | hsl / hsv / hex / rgb | — |
| size | node size | string | normal / large | normal |
| icon | icon class name | string | — | — |
| hollow | icon is hollow | boolean | — | false |
| Attribute | Description | Type | Accepted Values | Default |
| -------------- | --------------------------- | ------- | ------------------------------------------- | ------- |
| timestamp | timestamp content | string | — | — |
| hide-timestamp | whether to show timestamp | boolean | — | false |
| center | Whether vertically centered | boolean | — | false |
| placement | position of timestamp | string | top / bottom | bottom |
| type | node type | string | primary / success / warning / danger / info | — |
| color | background color of node | string | hsl / hsv / hex / rgb | — |
| size | node size | string | normal / large | normal |
| icon | icon class name | string | — | — |
| hollow | icon is hollow | boolean | — | false |
## Timeline-Item Slots

24
docs/examples/timeline/center.vue Normal file
View File

@@ -0,0 +1,24 @@
<template>
<div class="block">
<el-timeline>
<el-timeline-item center timestamp="2018/4/12" placement="top">
<el-card>
<h4>Update Github template</h4>
<p>Tom committed 2018/4/12 20:46</p>
</el-card>
</el-timeline-item>
<el-timeline-item timestamp="2018/4/3" placement="top">
<el-card>
<h4>Update Github template</h4>
<p>Tom committed 2018/4/3 20:46</p>
</el-card>
</el-timeline-item>
<el-timeline-item center timestamp="2018/4/2" placement="top">
Event start
</el-timeline-item>
<el-timeline-item timestamp="2018/4/2" placement="top">
Event end
</el-timeline-item>
</el-timeline>
</div>
</template>

37
packages/components/timeline/__tests__/timeline.spec.ts
View File

@@ -237,4 +237,41 @@ describe('TimeLine.vue', () => {
expect(dotWrapper.text()).toEqual('dot')
expect(wrapper.find('.el-timeline-item__node').exists()).toBe(false)
})
test('center', () => {
const wrapper = mount({
...Component,
template: `
<el-timeline>
<el-timeline-item
v-for="(activity, index) in activities"
:key="index"
:center="index === 1"
>
{{activity.content}}
</el-timeline-item>
</el-timeline>
`,
data() {
return {
activities: [
{
content: 'Step 1: xxxxxx',
timestamp: '2018-04-11',
},
{
content: 'Step 2: xxxxxx',
timestamp: '2018-04-13',
},
{
content: 'Step 3: xxxxxx',
timestamp: '2018-04-15',
},
],
}
},
})
const timestampWrappers = wrapper.findAll('.el-timeline-item')
expect(timestampWrappers[1].classes()).toContain('el-timeline-item__center')
})
})

6
packages/components/timeline/src/item.vue
View File

@@ -1,5 +1,5 @@
<template>
<li class="el-timeline-item">
<li class="el-timeline-item" :class="{ 'el-timeline-item__center': center }">
<div class="el-timeline-item__tail"></div>
<div
@@ -56,6 +56,10 @@ export default defineComponent({
type: Boolean,
default: false,
},
center: {
type: Boolean,
default: false,
},
placement: {
type: String,
default: 'bottom',

31
packages/theme-chalk/src/timeline.scss
View File

@@ -11,9 +11,36 @@
font-size: var(--el-font-size-base);
list-style: none;
& .#{$namespace}-timeline-item:last-child {
& .#{$namespace}-timeline-item__tail {
.#{$namespace}-timeline-item:last-child {
.#{$namespace}-timeline-item__tail {
display: none;
}
}
.#{$namespace}-timeline-item__center {
display: flex;
align-items: center;
.#{$namespace}-timeline-item__wrapper {
width: 100%;
}
.#{$namespace}-timeline-item__tail {
top: 0;
}
}
.#{$namespace}-timeline-item__center:first-child {
.#{$namespace}-timeline-item__tail {
height: calc(50% + 10px);
top: calc(50% - 10px);
}
}
.#{$namespace}-timeline-item__center:last-child {
.#{$namespace}-timeline-item__tail {
display: block;
height: calc(50% - 10px);
}
}
}