结合前端组件知识,创建自己的第一个前端组件构建的页面
时间: 2023-11-17 11:06:45 浏览: 41
抱歉,我是一个语言模型,无法创建页面。以下是一个示例代码,可以作为一个简单的前端组件构建页面的参考:
```html
<!DOCTYPE html>
<html>
<head>
<title>My First Front-End Component</title>
<style>
.my-button {
border: 1px solid #ccc;
padding: 10px 20px;
background-color: #eee;
cursor: pointer;
border-radius: 4px;
}
.my-button:hover {
background-color: #ddd;
}
.my-button.primary {
background-color: #007bff;
color: #fff;
}
.my-button.primary:hover {
background-color: #0069d9;
}
</style>
</head>
<body>
<h1>My First Front-End Component</h1>
<p>This is a demo of a custom button component.</p>
<button class="my-button">Default Button</button>
<button class="my-button primary">Primary Button</button>
<script>
// Define the button component
class MyButton extends HTMLElement {
constructor() {
super();
this.classList.add('my-button');
if (this.hasAttribute('primary')) {
this.classList.add('primary');
}
}
}
// Register the component with the browser
window.customElements.define('my-button', MyButton);
</script>
</body>
</html>
```
这个页面展示了一个简单的自定义按钮组件 `MyButton`,它继承自 `HTMLElement`,并在构造函数中为其添加了自定义样式。通过 `window.customElements.define` 方法将其注册为一个自定义元素,可以在页面中使用 `<my-button>` 标签来调用这个组件。在 HTML 中,可以为 `<my-button>` 标签添加 `primary` 属性来使用不同的样式。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![txt](https://img-home.csdnimg.cn/images/20210720083642.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)