Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(button): add iconPos for button component #1867

Open
wants to merge 4 commits into
base: dev
Choose a base branch
from
Open

feat(button): add iconPos for button component #1867

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
68f685c
feat(button): add `iconPos` prop for button
fu050409 May 30, 2024
fc87c4a
fix(button): fix left margin for icon
fu050409 May 30, 2024
b579f91
docs(button): add docs for `iconPos`
fu050409 May 30, 2024
05b62d3
docs(button): add `iconPos` for prop definition
fu050409 May 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions packages/devui-vue/devui/button/src/button-types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ export type IButtonColor = 'secondary' | 'primary' | 'danger';
export type IButtonSize = 'lg' | 'md' | 'sm';
export type IButtonShape = 'round' | 'circle';
export type IButtonType = 'button' | 'submit' | 'reset';
export type IButtonIconPos = 'left' | 'right';

export const buttonProps = {
variant: {
Expand All @@ -22,6 +23,10 @@ export const buttonProps = {
type: String,
default: '',
},
iconPos: {
type: String as PropType<IButtonIconPos>,
default: 'left',
},
loading: {
type: Boolean,
default: false,
Expand Down
7 changes: 6 additions & 1 deletion packages/devui-vue/devui/button/src/button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -337,7 +337,8 @@ $devui-btn-lg-padding: var(--devui-btn-lg-padding, 0 24px);
}

.#{$devui-prefix}-button {
transition: background-color $devui-animation-duration-slow $devui-animation-ease-in-out-smooth,
transition:
background-color $devui-animation-duration-slow $devui-animation-ease-in-out-smooth,
border-color $devui-animation-duration-slow $devui-animation-ease-in-out-smooth,
color $devui-animation-duration-slow $devui-animation-ease-in-out-smooth;
white-space: nowrap;
Expand Down Expand Up @@ -402,6 +403,10 @@ $devui-btn-lg-padding: var(--devui-btn-lg-padding, 0 24px);
margin-right: 5px;
}

.clear-left-5 {
margin-left: 5px;
}

.loading-icon__container {
display: inline-flex;
align-items: center;
Expand Down
13 changes: 11 additions & 2 deletions packages/devui-vue/devui/button/src/button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export default defineComponent({
props: buttonProps,
emits: ['click'],
setup(props: ButtonProps, ctx: SetupContext) {
const { icon, disabled, loading, nativeType } = toRefs(props);
const { icon, iconPos, disabled, loading, nativeType } = toRefs(props);
const { classes, iconClass } = useButton(props, ctx);
const isMouseDown = ref(false);
const showWave = ref(false);
Expand All @@ -23,6 +23,10 @@ export default defineComponent({
left: '0px',
});

if (!['right', 'left'].includes(iconPos.value)) {
iconPos.value = 'left';
}

const showClickWave = (e: MouseEvent) => {
waveStyle.left = e.offsetX + 'px';
waveStyle.top = e.offsetY + 'px';
Expand All @@ -49,11 +53,16 @@ export default defineComponent({
type={nativeType.value}
onMousedown={() => (isMouseDown.value = true)}
onMouseup={() => (isMouseDown.value = false)}>
{icon.value && <Icon name={icon.value} size="var(--devui-font-size, 12px)" color="" class={iconClass.value} />}
{iconPos.value === 'left' && icon.value && (
<Icon name={icon.value} size="var(--devui-font-size, 12px)" color="" class={iconClass.value} />
)}
<div class="loading-icon__container" v-show={loading.value}>
<d-icon name="icon-loading" class="button-icon-loading" color="#BBDEFB"></d-icon>
</div>
<span class="button-content">{ctx.slots.default?.()}</span>
{iconPos.value === 'right' && icon.value && (
<Icon name={icon.value} size="var(--devui-font-size, 12px)" color="" class={iconClass.value} />
)}
{showWave.value && <div class="water-wave" style={waveStyle}></div>}
</button>
);
Expand Down
6 changes: 5 additions & 1 deletion packages/devui-vue/devui/button/src/use-button.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,11 @@ export default function useButton(props: ButtonProps, ctx: SetupContext): UseBut
}
const origin = `${ns.e('icon-fix')} icon`;
if (hasContent.value) {
return `${origin} clear-right-5`;
if (props.iconPos === 'left') {
return `${origin} clear-right-5`;
} else {
return `${origin} clear-left-5`;
}
} else {
return origin;
}
Expand Down
23 changes: 23 additions & 0 deletions packages/devui-vue/docs/components/button/iconPos.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<template>
<div class="demo-between">
<d-button icon="arrow-left">
Prev
</d-button>
<d-button
icon="arrow-right"
variant="solid"
icon-pos="right"
>
Next
</d-button>
</div>
</template>

<style scoped>
.demo-between {
display: flex;
gap: 10px;
align-items: center;
justify-content: space-between;
}
</style>
35 changes: 25 additions & 10 deletions packages/devui-vue/docs/components/button/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,14 @@ button/icon

:::

### 图标位置

:::demo

button/iconPos

:::

### 按钮组

将多个按钮作为一组放入按钮组容器中。按钮组可通过 size 设置尺寸，并与下拉菜单混合使用。
Expand All @@ -66,16 +74,17 @@ button/buttonGroup

### Button 参数

| 参数名 | 类型 | 默认 | 说明 | 跳转 Demo |
| :------- | :-------------------------------- | :---------- | :------------------------ | :------------------------ |
| variant | [IButtonVariant](#ibuttonvariant) | 'outline' | 可选，按钮形态 | [形态](#形态) |
| color | [IButtonColor](#ibuttoncolor) | 'secondary' | 可选，按钮主题 | [主题色](#主题色) |
| size | [IButtonSize](#ibuttonsize) | 'md' | 可选，按钮尺寸 | [尺寸](#尺寸) |
| icon | `string` | -- | 可选，自定义按钮图标 | [图标按钮](#图标按钮) |
| shape | [IButtonShape](#ibuttonshape) | -- | 可选，按钮形状(圆形/圆角) | [图标按钮](#图标按钮) |
| disabled | `boolean` | false | 可选，是否禁用 button | [禁用状态](#禁用状态) |
| loading | `boolean` | false | 可选，设置加载中状态 | [加载中状态](#加载中状态) |
| native-type | [IButtonType](#ibuttontype) | 'button' | 可选，按钮原生type属性 | |
| 参数名 | 类型 | 默认 | 说明 | 跳转 Demo |
| :---------- | :-------------------------------- | :---------- | :------------------------ | :------------------------ |
| variant | [IButtonVariant](#ibuttonvariant) | 'outline' | 可选，按钮形态 | [形态](#形态) |
| color | [IButtonColor](#ibuttoncolor) | 'secondary' | 可选，按钮主题 | [主题色](#主题色) |
| size | [IButtonSize](#ibuttonsize) | 'md' | 可选，按钮尺寸 | [尺寸](#尺寸) |
| icon | `string` | -- | 可选，自定义按钮图标 | [图标按钮](#图标按钮) |
| iconPos | [IButtonIconPos](#ibuttoniconpos) | 'left' | 可选，自定义按钮图标位置 | [图标位置](#图标位置) |
| shape | [IButtonShape](#ibuttonshape) | -- | 可选，按钮形状(圆形/圆角) | [图标按钮](#图标按钮) |
| disabled | `boolean` | false | 可选，是否禁用 button | [禁用状态](#禁用状态) |
| loading | `boolean` | false | 可选，设置加载中状态 | [加载中状态](#加载中状态) |
| native-type | [IButtonType](#ibuttontype) | 'button' | 可选，按钮原生 type 属性 | |

### Button 类型定义

Expand Down Expand Up @@ -109,6 +118,12 @@ type IButtonShape = 'circle' | 'round';
type IButtonType = 'button' | 'submit' | 'reset';
```

#### IButtonIconPos

```ts
type IButtonIconPos = 'left' | 'right';
```

### ButtonGroup 参数

| 参数名 | 类型 | 默认 | 说明 | 跳转 Demo |
Expand Down
Loading