isu-element

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes"> <title>isu-dialog demo</title> <script type="application/javascript" src="../../node_modules/web-animations-js/web-animations-next.min.js"></script> <script type="module"> import '../../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js'; import '../../node_modules/@polymer/iron-demo-helpers/demo-pages-shared-styles.js'; import '../../node_modules/@polymer/iron-demo-helpers/demo-snippet.js'; import '../../isu-dialog'; </script> <script type="module"> const $_documentContainer = document.createElement('template'); $_documentContainer.innerHTML = `<custom-style> <style is="custom-style" include="demo-pages-shared-styles"> .centered { min-width: 800px; } demo-snippet { --demo-snippet-code: { max-height: 500px; } } </style> </custom-style>`; document.body.appendChild($_documentContainer.content); </script> </head> <body> <div class="vertical-section-container centered"> <h3>Basic isu-dialog demo</h3> <demo-snippet> <template> <style is="custom-style"> div[slot=container] { font-size: 20px; } #dialog { --isu-dialog-width: 400px; --isu-dialog-height: 80px; } </style> <isu-dialog id="dialog" stop-auto-dismiss top="12" left="30"> <div> Put your Content here inside an element which with </div> </isu-dialog> <button id="btn">Click to open the Dialog</button> <script> btn.onclick = () => dialog.open(); </script> </template> </demo-snippet> </div> <div class="vertical-section-container centered"> <h3>禁用点击弹窗外部关闭</h3> <demo-snippet> <template> <style is="custom-style"> div[slot=container] { font-size: 20px; } #dialog1 { --isu-dialog-width: 400px; --isu-dialog-height: 100px; } </style> <isu-dialog id="dialog1" stop-auto-dismiss no-cancel-on-outside-click> <div> Put your Content here inside an element which with </div> </isu-dialog> <button id="btn1">Click to open the Dialog</button> <script> btn1.onclick = () => dialog1.open(); </script> </template> </demo-snippet> </div> <div class="vertical-section-container centered"> <h3>打开弹框时禁止body滚动</h3> <demo-snippet> <template> <style is="custom-style"> div[slot=container] { font-size: 20px; } #dialog1 { --isu-dialog-width: 400px; --isu-dialog-height: 100px; } </style> <isu-dialog id="dialogLock" stop-auto-dismiss no-cancel-on-outside-click lock-scroll> <div> Put your Content here inside an element which with </div> </isu-dialog> <button id="lockScroll">Click to open the Dialog</button> <script> lockScroll.onclick = () => dialogLock.open(); </script> </template> </demo-snippet> </div> <div class="vertical-section-container centered"> <h3>模态弹窗</h3> <demo-snippet> <template> <style is="custom-style"> p { margin: 0 0 10px; font-size: 14px; } </style> <isu-dialog id="dialog2" stop-auto-dismiss title="Dialog demo" modal> <div> <p>It was all very well to say 'Drink me,' but the wise little Alice was not going to do <i>that</i> in a hurry. 'No, I'll look first,' she said, 'and see whether it's marked "<i>poison</i>" or not'; for she had read several nice little histories about children who had got burnt, and eaten up by wild beasts and other unpleasant things, all because they <i>would</i> not remember the simple rules their friends had taught them: such as, that a red-hot poker will burn you if you hold it too long; and that if you cut your finger <i>very</i> deeply with a knife, it usually bleeds; and she had never forgotten that, if you drink much from a bottle marked '<i>poison</i>,' it is almost certain to disagree with you, sooner or later.</p> <p>It was all very well to say 'Drink me,' but the wise little Alice was not going to do <i>that</i> in a hurry. 'No, I'll look first,' she said, 'and see whether it's marked "<i>poison</i>" or not'; for she had read several nice little histories about children who had got burnt, and eaten up by wild beasts and other unpleasant things, all because they <i>would</i> not remember the simple rules their friends had taught them: such as, that a red-hot poker will burn you if you hold it too long; and that if you cut your finger <i>very</i> deeply with a knife, it usually bleeds; and she had never forgotten that, if you drink much from a bottle marked '<i>poison</i>,' it is almost certain to disagree with you, sooner or later.</p> <p>It was all very well to say 'Drink me,' but the wise little Alice was not going to do <i>that</i> in a hurry. 'No, I'll look first,' she said, 'and see whether it's marked "<i>poison</i>" or not'; for she had read several nice little histories about children who had got burnt, and eaten up by wild beasts and other unpleasant things, all because they <i>would</i> not remember the simple rules their friends had taught them: such as, that a red-hot poker will burn you if you hold it too long; and that if you cut your finger <i>very</i> deeply with a knife, it usually bleeds; and she had never forgotten that, if you drink much from a bottle marked '<i>poison</i>,' it is almost certain to disagree with you, sooner or later.</p> <p>It was all very well to say 'Drink me,' but the wise little Alice was not going to do <i>that</i> in a hurry. 'No, I'll look first,' she said, 'and see whether it's marked "<i>poison</i>" or not'; for she had read several nice little histories about children who had got burnt, and eaten up by wild beasts and other unpleasant things, all because they <i>would</i> not remember the simple rules their friends had taught them: such as, that a red-hot poker will burn you if you hold it too long; and that if you cut your finger <i>very</i> deeply with a knife, it usually bleeds; and she had never forgotten that, if you drink much from a bottle marked '<i>poison</i>,' it is almost certain to disagree with you, sooner or later.</p> </div> </isu-dialog> <button id="btn2" onclick="dialog2.open();">Click to open the Dialog</button> </template> </demo-snippet> </div> </body> </html>