开发者文档

Appearance

  1. 基础组件
    • Button  按钮
    • Icon  图标
  1. 导航组件
    • Tabs  选项卡切换
  1. 操作反馈
    • Dialog  对话框
    • Switch  开关
    • Toast  吐司
  1. 展示组件
    • Tag  标签
    • Badge  徽标
    • Empty  缺省图
    • Popover  气泡弹出框

Button 按钮 ​

主按钮 ​

vue
<template>
    <nex-button type="primary">主按钮</nex-button>
    <nex-button plain type="primary">主按钮</nex-button>
</template>
<template>
    <nex-button type="primary">主按钮</nex-button>
    <nex-button plain type="primary">主按钮</nex-button>
</template>

次按钮 ​

vue
<template>
    <nex-button type="default">次按钮</nex-button>
    <nex-button plain>次按钮</nex-button>
</template>
<template>
    <nex-button type="default">次按钮</nex-button>
    <nex-button plain>次按钮</nex-button>
</template>

禁用状态 ​

vue
<template>
    <nex-button disabled type="primary">主按钮</nex-button>
    <nex-button plain disabled type="primary">主按钮</nex-button>
    <nex-button disabled type="default">次按钮</nex-button>
    <nex-button plain disabled type="default">次按钮</nex-button>
</template>
<template>
    <nex-button disabled type="primary">主按钮</nex-button>
    <nex-button plain disabled type="primary">主按钮</nex-button>
    <nex-button disabled type="default">次按钮</nex-button>
    <nex-button plain disabled type="default">次按钮</nex-button>
</template>

按钮形状 ​

vue
<template>
    <nex-button shape="square" type="primary">方块</nex-button>
    <nex-button shape="round" type="primary">圆形</nex-button>
</template>
<template>
    <nex-button shape="square" type="primary">方块</nex-button>
    <nex-button shape="round" type="primary">圆形</nex-button>
</template>

加载状态 ​

vue
<template>
    <nex-button loading type="primary"></nex-button>
    <nex-button loading type="primary">加载中...</nex-button>
    <nex-button :loading="isLoading" type="primary" @click="onChange"
        >点击!</nex-button
    >
</template>

<script setup lang="ts">
import { ref } from 'vue';
const isLoading = ref(false);
const onChange = () => {
    isLoading.value = true;
    setTimeout(() => {
        isLoading.value = false;
    }, 3000);
};
</script>
<template>
    <nex-button loading type="primary"></nex-button>
    <nex-button loading type="primary">加载中...</nex-button>
    <nex-button :loading="isLoading" type="primary" @click="onChange"
        >点击!</nex-button
    >
</template>

<script setup lang="ts">
import { ref } from 'vue';
const isLoading = ref(false);
const onChange = () => {
    isLoading.value = true;
    setTimeout(() => {
        isLoading.value = false;
    }, 3000);
};
</script>

图标按钮 ​

vue
<template>
    <nex-button shape="square" type="primary">
        <template #icon>
            <Star />
        </template>
        Star
    </nex-button>
    <nex-button shape="square" plain type="primary">
        <template #icon>
            <StarFill />
        </template>
    </nex-button>
</template>
<script setup lang="ts">
import { StarFill, Star } from '@nutui/icons-vue-taro';
</script>
<template>
    <nex-button shape="square" type="primary">
        <template #icon>
            <Star />
        </template>
        Star
    </nex-button>
    <nex-button shape="square" plain type="primary">
        <template #icon>
            <StarFill />
        </template>
    </nex-button>
</template>
<script setup lang="ts">
import { StarFill, Star } from '@nutui/icons-vue-taro';
</script>

按钮尺寸 ​

vue
<template>
    <nex-button size="large" type="primary">大按钮</nex-button>
    <nex-button type="primary">正常按钮</nex-button>
    <nex-button size="small" type="primary">小按钮</nex-button>
    <nex-button size="mini" type="primary">最小按钮</nex-button>
</template>
<template>
    <nex-button size="large" type="primary">大按钮</nex-button>
    <nex-button type="primary">正常按钮</nex-button>
    <nex-button size="small" type="primary">小按钮</nex-button>
    <nex-button size="mini" type="primary">最小按钮</nex-button>
</template>

自定义颜色 ​

vue
<template>
    <nex-button color="#7232dd">纯颜色</nex-button>
    <nex-button color="#7232dd" plain>纯颜色</nex-button>
    <nex-button color="linear-gradient(to right, #ff6034, #ee0a24)">
        渐变
    </nex-button>
</template>
<template>
    <nex-button color="#7232dd">纯颜色</nex-button>
    <nex-button color="#7232dd" plain>纯颜色</nex-button>
    <nex-button color="linear-gradient(to right, #ff6034, #ee0a24)">
        渐变
    </nex-button>
</template>

文字按钮 ​

vue
<template>
    <view class="button-text">
        <nex-button size="mini" type="text">
            <template #icon>
                <Plus />
            </template>
            新建分组
        </nex-button>
    </view>
</template>

<script setup lang="ts">
import { Plus } from '@nutui/icons-vue-taro';
</script>

<style lang="less">
.button-text {
    --nex-icon-font-size: 50px;
}
</style>
<template>
    <view class="button-text">
        <nex-button size="mini" type="text">
            <template #icon>
                <Plus />
            </template>
            新建分组
        </nex-button>
    </view>
</template>

<script setup lang="ts">
import { Plus } from '@nutui/icons-vue-taro';
</script>

<style lang="less">
.button-text {
    --nex-icon-font-size: 50px;
}
</style>

Props ​

参数说明类型默认值
type类型，可选值为 primary info warning danger success defaultstringdefault
size尺寸，可选值为 large small mini
shape形状，可选值为 square roundstringround
color按钮颜色，支持传入 linear-gradient 渐变色string-
plain是否为幽灵按钮booleanfalse
disabled是否禁用按钮booleanfalse
loading按钮 loading 状态booleanfalse

Slots ​

名称说明
default按钮内容
icon按钮图标

Events ​

事件名说明回调参数
click点击按钮时触发event: MouseEvent

Last updated:

lhiro

Copyright © 2002-present Evan investoday