解决方法如下:
npm install -g @angular/cli
npm install tailwindcss
ng new my-app
cd my-app
dropdown.component.ts
:import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-dropdown',
templateUrl: './dropdown.component.html',
styleUrls: ['./dropdown.component.css']
})
export class DropdownComponent implements OnInit {
isOpen = false;
constructor() { }
ngOnInit(): void {
}
toggleDropdown() {
this.isOpen = !this.isOpen;
}
}
dropdown.component.html
文件中添加下拉菜单的HTML代码:
- Option 1
- Option 2
- Option 3
dropdown.component.css
文件中添加样式代码,引用TailwindCSS的样式:@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
app-dropdown
组件:
ng serve
现在,你就可以在浏览器中看到一个带有下拉菜单的按钮。当你点击按钮时,下拉菜单会展开或收起。下拉菜单的样式由TailwindCSS提供。