在前端开发中，type 属性通常用于指定按钮或其他元素的样式或行为。不同的框架和库可能对 type 属性有不同的定义和用法。常见的框架包括 Bootstrap、Ant Design（antd）、Element Plus 等。下面我将分别介绍在这些框架中 type="danger" 和 type="text" 的用法。
1. Bootstrap
Bootstrap 是一个流行的前端框架，提供了多种按钮类型。
type="danger"
- 用途: 表示危险操作，通常用于删除、取消等操作。
- 样式: 通常显示为红色背景，白色文字。
<button type="button" class="btn btn-danger">Danger</button>
type="text"
- 用途: 文本样式的按钮，通常用于不强调的操作。
- 样式: 通常没有背景色，只有文字颜色。
<button type="button" class="btn btn-text">Text Button</button>
注意：Bootstrap 默认并没有 btn-text 类，但你可以通过自定义 CSS 来实现类似的效果。
2. Ant Design (antd)
Ant Design 是另一个流行的 React UI 库，提供了丰富的组件和样式。
type="danger"
- 用途: 表示危险操作，通常用于删除、取消等操作。
- 样式: 通常显示为红色背景，白色文字。
import { Button } from 'antd';<Button type="primary" danger>Danger</Button>
注意：Ant Design 使用 danger 属性来表示危险按钮，而不是 type="danger"。
type="text"
- 用途: 文本样式的按钮，通常用于不强调的操作。
- 样式: 通常没有背景色，只有文字颜色。
import { Button } from 'antd';<Button type="text">Text Button</Button>
3. Element Plus
Element Plus 是一个基于 Vue 3 的 UI 库，提供了丰富的组件和样式。
type="danger"
- 用途: 表示危险操作，通常用于删除、取消等操作。
- 样式: 通常显示为红色背景，白色文字。
<template><el-button type="danger">Danger</el-button>
</template><script>
import { ElButton } from 'element-plus';export default {components: {ElButton,},
};
</script>
type="text"
- 用途: 文本样式的按钮，通常用于不强调的操作。
- 样式: 通常没有背景色，只有文字颜色。
<template><el-button type="text">Text Button</el-button>
</template><script>
import { ElButton } from 'element-plus';export default {components: {ElButton,},
};
</script>
自定义 CSS
如果你使用的框架没有直接支持 type="danger" 和 type="text"，你可以通过自定义 CSS 来实现这些样式。
示例：自定义 type="danger" 和 type="text"
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Custom Buttons</title><style>.btn-danger {background-color: #ff4d4f;color: white;border: none;padding: 10px 20px;cursor: pointer;}.btn-danger:hover {background-color: #ff7875;}.btn-text {background-color: transparent;color: #000;border: none;padding: 10px 20px;cursor: pointer;}.btn-text:hover {text-decoration: underline;}</style>
</head>
<body><button class="btn-danger">Danger</button><button class="btn-text">Text Button</button>
</body>
</html>
总结
-
type="danger":- 用途: 表示危险操作。
- 样式: 通常红色背景，白色文字。
-
type="text":- 用途: 文本样式的按钮，不强调操作。
- 样式: 通常没有背景色，只有文字颜色。
具体的实现方式取决于你使用的前端框架。以上示例涵盖了 Bootstrap、Ant Design 和 Element Plus 中的常见用法，并提供了一个自定义 CSS 的示例。