mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2025-02-23 11:59:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(style): [el-dropdown] fix doc style (#5266)

Browse Source 
* fix: update style

* style: update

* feat: update test
This commit is contained in:
kooriookami 2022-01-11 10:29:25 +08:00 committed by GitHub
parent df57ddfe39
commit 57e0d1d1bb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 46 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/en-US/component/dropdown.md
View File

@ -18,6 +18,8 @@ Toggleable menu for displaying lists of links and actions.
.el-dropdown-link {
cursor: pointer;
color: var(--el-color-primary);
display: flex;
align-items: center;
}
}

54
docs/examples/dropdown/triggering-element.vue
View File

@ -1,30 +1,32 @@
<template>
<el-dropdown>
<el-button type="primary">
Dropdown List<el-icon class="el-icon--right"><arrow-down /></el-icon>
</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>Action 1</el-dropdown-item>
<el-dropdown-item>Action 2</el-dropdown-item>
<el-dropdown-item>Action 3</el-dropdown-item>
<el-dropdown-item>Action 4</el-dropdown-item>
<el-dropdown-item>Action 5</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<el-dropdown split-button type="primary" @click="handleClick">
Dropdown List
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>Action 1</el-dropdown-item>
<el-dropdown-item>Action 2</el-dropdown-item>
<el-dropdown-item>Action 3</el-dropdown-item>
<el-dropdown-item>Action 4</el-dropdown-item>
<el-dropdown-item>Action 5</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<div class="flex flex-wrap items-center">
<el-dropdown>
<el-button type="primary">
Dropdown List<el-icon class="el-icon--right"><arrow-down /></el-icon>
</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>Action 1</el-dropdown-item>
<el-dropdown-item>Action 2</el-dropdown-item>
<el-dropdown-item>Action 3</el-dropdown-item>
<el-dropdown-item>Action 4</el-dropdown-item>
<el-dropdown-item>Action 5</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<el-dropdown split-button type="primary" @click="handleClick">
Dropdown List
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>Action 1</el-dropdown-item>
<el-dropdown-item>Action 2</el-dropdown-item>
<el-dropdown-item>Action 3</el-dropdown-item>
<el-dropdown-item>Action 4</el-dropdown-item>
<el-dropdown-item>Action 5</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</template>
<script lang="ts" setup>

2
packages/components/dropdown/__tests__/dropdown.spec.ts
View File

@ -103,6 +103,7 @@ describe('Dropdown', () => {
.findComponent({
name: 'DropdownItemImpl',
})
.find('.el-dropdown-menu__item')
.trigger('click')
await nextTick()
jest.runAllTimers()
@ -352,6 +353,7 @@ describe('Dropdown', () => {
.findComponent({
name: 'DropdownItemImpl',
})
.find('.el-dropdown-menu__item')
.element.getAttribute('tabindex')
).toBe('0')
})

2
packages/components/dropdown/src/dropdown-item-impl.vue
View File

@ -1,4 +1,5 @@
<template>
<div v-if="divided" class="el-dropdown-menu__item--divided"></div>
<div
:ref="itemRef"
v-bind="dataset"
@ -6,7 +7,6 @@
:class="{
'el-dropdown-menu__item': true,
'is-disabled': disabled,
'el-dropdown-menu__item--divided': divided,
}"
:tabindex="tabIndex"
role="menuitem"

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

@ -24,6 +24,16 @@ $dropdown-item-padding: map.merge(
$dropdown-item-padding
);
$dropdown-item-divided-margin: () !default;
$dropdown-item-divided-margin: map.merge(
(
'large': 8px 0,
'default': 6px 0,
'small': 4px 0,
),
$dropdown-item-divided-margin
);
$dropdown-caret-width: () !default;
$dropdown-caret-width: map.merge($common-component-size, $dropdown-caret-width);
@ -175,18 +185,8 @@ $dropdown-menu-padding-vertical: map.merge(
}
@include m(divided) {
$divided-offset: 6px;
position: relative;
margin-top: $divided-offset;
margin: map.get($dropdown-item-divided-margin, 'default');
border-top: 1px solid var(--el-border-color-lighter);
&:before {
content: '';
height: $divided-offset;
display: block;
background-color: $color-white;
}
}
@include when(disabled) {
@ -205,13 +205,8 @@ $dropdown-menu-padding-vertical: map.merge(
line-height: map.get($dropdown-item-line-height, $size);
font-size: map.get($input-font-size, $size);
&.#{$namespace}-dropdown-menu__item--divided {
$divided-offset: 3px;
margin-top: $divided-offset;
&:before {
height: $divided-offset;
}
@include m(divided) {
margin: map.get($dropdown-item-divided-margin, $size);
}
}
}