我已经导入了Material Design库的css和js文件，但是由于某些原因，即使其下方的按钮组件显示正确，文本字段也无法正常工作。
看起来JS根本没有得到应用
Codepen： https://codepen.io/x84733/pen/yEEbjK
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
<style>@import url("https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css");</style>
<div class="mdc-text-field">
<input type="text" id="my-text-field" class="mdc-text-field__input">
<label class="mdc-floating-label" for="my-text-field">Hint text</label>
<div class="mdc-line-ripple"></div>
</div>
<button class="foo-button mdc-button">Button</button>
text-field组件代码来自文档：
https://material.io/develop/web/components/input-controls/text-field/
答案 0 :(得分：2)
有关如何导入样式的信息，请参见here，有关import UIKit
import UserNotifications
class TableViewController: UITableViewController {
var realTime = String()
var items = [Item]()
override func viewDidLoad() {
super.viewDidLoad()
UNUserNotificationCenter.current().requestAuthorization(options: [.alert, .sound, .badge], completionHandler: {didAllow, error in})
}
override func viewWillAppear(_ animated: Bool) {
getData()
tableView.reloadData()
}
override func numberOfSections(in tableView: UITableView) -> Int {
return 1
}
override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return items.count
}
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "reuseIdentifier", for: indexPath) as! TableViewCell
let row = items[indexPath.row]
cell.timeLbl.text = row.time
cell.switchBtn.isOn = row.isOn
cell.callback = { newValue in
row.isOn = newValue
(UIApplication.shared.delegate as! AppDelegate).saveContext()
}
return cell
}
func getData() {
let context = (UIApplication.shared.delegate as! AppDelegate).persistentContainer.viewContext
do {
items = try context.fetch(Item.fetchRequest())
}catch{
print("\(error)")
}
}
func triggerAlarm() {
realTime = DateFormatter.localizedString(from: Date(), dateStyle: .none, timeStyle: .short)
print(realTime)
for i in 0..<items.count {
if (items[i].time!) == realTime && items[i].isOn == true{
print(time)
self.notificationTrigger()
}else {
return
}
}
}
func notificationTrigger() {
let content = UNMutableNotificationContent()
content.title = "time is up \(time)"
content.subtitle = "asdf"
content.body = "qwer"
content.badge = 0
let trigger = UNTimeIntervalNotificationTrigger(timeInterval: 1, repeats: false)
let request = UNNotificationRequest(identifier: "customNotification", content: content, trigger: trigger)
UNUserNotificationCenter.current().add(request, withCompletionHandler: nil)
}
}
的不同组件的信息，请参见here来自动实例化JavaScript。对于文本字段，您必须在material.io中导入以下代码：
css然后将以下代码添加到您的@import "@material/textfield/mdc-text-field";
：
js这是整体演示：
mdc.textField.MDCTextField.attachTo(document.querySelector('.mdc-text-field'));
mdc.textField.MDCTextField.attachTo(document.querySelector('.mdc-text-field'));@import "@material/textfield/mdc-text-field";
和codepen链接：https://codepen.io/anon/pen/pKKPBK