Tôi đang cố gắng sử dụng hiệu ứng gợn trên danh sách các mục có thể nhấp nhưng tôi đang gặp vấn đề hiệu ứng gợn sóng trên màn hình khi tôi gói gọn danh sách đó thành một phần tử tùy chỉnh. Nó hoạt động tuyệt vời nếu tôi đặt nó trong index.html của tôi nhưng không thành công khi tôi tạo một phần tử tùy chỉnh được bao gồm ở đó. Xem hình ảnh về vấn đề này:Polymer 1.0 - giấy-gợn di chuyển trên màn hình thay vì khớp với phần tử
Tôi đã đọc câu hỏi tương tự mà câu trả lời là để làm cho tương container, mà phải được đưa vào thực hiện. Vì vậy, tôi tự hỏi nếu nó là cần thiết để thiết lập bất kỳ thuộc tính đặc biệt trong máy chủ khi sử dụng hiệu ứng gợn từ một yếu tố tùy chỉnh.
Mã ví dụ của tôi như sau.
index.html
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>List test</title>
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="elements/elements.html">
<style>
paper-icon-item {
position: relative;
height: 48px;
}
</style>
</head>
<body unresolved class="fullbleed layout vertical">
<template is="dom-bind" id="app">
<my-list></my-list>
</template>
<script src="scripts/app.js"></script>
</body>
</html>
my-list.html
<dom-module id="my-list">
<style>
paper-icon-item {
position: relative;
height: 48px;
}
</style>
<template>
<section>
<div class="menu">
<paper-icon-item>
<div class="label" fit>Mark as unread</div>
<paper-ripple></paper-ripple>
</paper-icon-item>
<paper-icon-item>
<div class="label" fit>Mark as important</div>
<paper-ripple></paper-ripple>
</paper-icon-item>
<paper-icon-item>
<div class="label" fit>Add to Tasks</div>
<paper-ripple></paper-ripple>
</paper-icon-item>
<paper-icon-item>
<div class="label" fit>Create event</div>
<paper-ripple></paper-ripple>
</paper-icon-item>
</div>
</section>
</template>
</dom-module>
<script>
(function() {
Polymer({
is: 'my-list'
});
})();
</script>
Khi thay thế trong index.html bởi nội dung phần thẻ (tag phần bao gồm) của danh sách của tôi. html, hiệu ứng gợn hoạt động tốt. Các tài sản phù hợp trong gợn đã không giải quyết vấn đề hoặc. Tôi đang thiếu gì trong thành phần tùy chỉnh?
tôi cập nhật các giấy gợn lên phiên bản 1.0.1 nhưng nó didnt giải quyết vấn đề này –
@WaleedAsender OP đã gặp một vấn đề khác với một bạn chạy ngang qua. Giống như @zerodevx được đề cập, nếu phần tử 'position: absolute' được kéo dài thành' top: 0; trái: 0; dưới cùng: 0; right: 0; ', chẳng hạn như gợn, không nằm trong vùng chứa' position: relative', sau đó nó sẽ lấp đầy cửa sổ thay vì phần tử cha của nó. Điều này dẫn đến một vấn đề tương tự, nhưng nó thực sự là, như bạn đã chỉ ra, khác với những gì tôi giải quyết được với câu trả lời của tôi. Tôi sẽ tiếp tục và cập nhật câu trả lời, vì lỗi đã được vá từ lâu, đối với bất kỳ ai khác chạy qua câu hỏi này. –