首页 > 其他分享 >tailwindcss封装一个按钮

tailwindcss封装一个按钮

时间:2023-03-04 09:12:19浏览次数:52  
标签:bg 封装 text focus hover tailwindcss 按钮 ring 500

template tag

<template>
    <button :class="classes" >
        <slot :iconSizeClasses="iconSizeClasses" />
    </button>
</template>

script tag

<script setup>
import { toRefs, computed } from 'vue'

const baseClasses = [
    'inline-flex items-center transition-colors font-medium select-none disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-dark-eval-2',
]

const variantClasses = (variant) => ({
    'bg-purple-500 text-white hover:bg-purple-600 focus:ring-purple-500': variant == 'primary',
    'bg-white text-gray-500 hover:bg-gray-100 focus:ring-purple-500 dark:text-gray-400 dark:bg-dark-eval-1 dark:hover:bg-dark-eval-2 dark:hover:text-gray-200':
        variant == 'secondary',
    'bg-green-500 text-white hover:bg-green-600 focus:ring-green-500': variant == 'success',
    'bg-red-500 text-white hover:bg-red-600 focus:ring-red-500': variant == 'danger',
    'bg-yellow-500 text-white hover:bg-yellow-600 focus:ring-yellow-500': variant == 'warning',
    'bg-cyan-500 text-white hover:bg-cyan-600 focus:ring-cyan-500': variant == 'info',
    'bg-black text-gray-300 hover:text-white hover:bg-gray-800 focus:ring-black dark:hover:bg-dark-eval-3':
        variant == 'black',
})

// 通过计算属性,绑定一堆类名,不知道这样的形式好不好
// <button :class="classes" >
const classes = computed(() => [
    ...baseClasses,
    iconOnly
        ? {
            'p-1.5': size == 'sm',
            'p-2': size == 'base',
            'p-3': size == 'lg',
        }
        : {
            'px-2.5 py-1.5 text-sm': size == 'sm',
            'px-4 py-2 text-base': size == 'base',
            'px-5 py-2 text-xl': size == 'lg',
        },
    variantClasses(variant),
    {
        'rounded-md': !squared && !pill,
        'rounded-full': pill,
    },
    {
        'pointer-events-none opacity-50': href && disabled.value,
    },
])

// <slot :iconSizeClasses="iconSizeClasses" />
const iconSizeClasses = [
    {
        'w-5 h-5': size == 'sm',
        'w-6 h-6': size == 'base',
        'w-7 h-7': size == 'lg',
    },
]
</script>

标签:bg,封装,text,focus,hover,tailwindcss,按钮,ring,500
From: https://www.cnblogs.com/zhuoss/p/17177558.html

相关文章

  • 多种按钮风格
    按钮风格1<divclass="button1"><span>立即下载</span></div><style>.button1{width:200px;height:46px;line-height:46px;background......
  • 6.封装axios定义ajax请求函数模块与优化统一处理异常
    安装axios包:【版本:1.3.3】npminstallaxios初级版本api/ajax.js文件内容/*能发送异步ajax请求的函数模块封装axios库函数的返回值是promise对象:.......
  • 《Ext JS 6.2实战》一书上传按钮的问题
    近日,有热心读者发邮件给我说上传按钮有bug,第一次打开上传按钮时,可以打开文件选择对话框,当打开第二个视图时,就不能打开文件选择对话框了。经研究,发现是创建​​plupload.Uplo......
  • 七牛文件上传服务封装
    packagecom.sxsoft.admin.utils;importcn.hutool.http.HttpUtil;importcom.alibaba.fastjson.JSON;importcom.alibaba.fastjson.JSONObject;importcom.baomidou......
  • 将项目封装进docker进行迁移和使用
    首先要理解docker的基本使用,本文不做过多阐述,博主也对docker没有了解透彻。这里列一下docker的基本命令:dockerinfo#查看docker信息docker-v......
  • 记录--虚拟滚动探索与封装
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助1.介绍什么是虚拟滚动?虚拟滚动就是通过js控制大列表中的dom创建与销毁,只创建可视区域dom,非可视区域的d......
  • 使用WPF创建炫亮按钮
    1.创建三个按钮(创建多个按钮的目的是作对比及样式演示)(1)打开Microsoft ExpressionBlend2(我这里是AugustPreview版本,以下简称Blend)(2)File-> NewProject,默认选......
  • [Java] 2.封装
    封装封装就是要程序员学会正确设计类对象的属性和方法,举个例题:请对“人在加油站加200块汽油”进行面向对象设计。显然我们可以得到两个类人:classPerson{}加油......
  • 通过8个常用hook手把手教你封装hooks
    通过8个常用hook手把手教你封装hooksFE情报局 ​关注他 11人赞同了该文章对于使用react的同学来说,hook一定不陌生,但是如何封装hook以及在业务......
  • [go]封装go的docker镜像
    前言多阶段封装docker镜像,使用scratch镜像,尽量减小镜像包的体积。封装用于编译的go镜像DockerfileFROMgolang:1.20.1ASbuilderWORKDIR/appsCOPY./apps/ENVCG......