From ae15940e5ed207422b75fbb5c2dd79634ab0c1ab Mon Sep 17 00:00:00 2001 From: BcRikko <s.shin1106@gmail.com> Date: Thu, 21 Feb 2019 18:53:01 +0900 Subject: [PATCH] docs: add dialog samples --- docs/index.html | 1 + docs/script.js | 79 +++++++++++++++++++++++++++++++++++++++++++++++-- docs/style.css | 4 +++ 3 files changed, 81 insertions(+), 3 deletions(-) diff --git a/docs/index.html b/docs/index.html index d22f869..474c24d 100644 --- a/docs/index.html +++ b/docs/index.html @@ -76,6 +76,7 @@ class="item" v-html="sample.code"> </div> + <p v-if="sample.note" class="note nes-text is-error">{{ sample.note }}</p> <button type="button" class="nes-btn is-primary showcode" @click="sample.showCode = !sample.showCode"><></button> </section> <section class="samplecode" v-show="sample.showCode"> diff --git a/docs/script.js b/docs/script.js index 1ba6442..98544f7 100644 --- a/docs/script.js +++ b/docs/script.js @@ -39,7 +39,7 @@ const sampleCollection = [ </div>`, }, { - title: 'Inputs', + title: 'inputs', showCode: false, code: `<div class="nes-field"> <label for="name_field">Your name</label> @@ -62,13 +62,13 @@ const sampleCollection = [ </div>`, }, { - title: 'Textarea', + title: 'textarea', showCode: false, code: `<label for="textarea_field">Textarea</label> <textarea id="textarea_field" class="nes-textarea"></textarea>`, }, { - title: 'Selects', + title: 'selects', showCode: false, code: `<div class="nes-select"> <select required> @@ -123,6 +123,79 @@ const sampleCollection = [ <p>Good morning. Thou hast had a good night's sleep, I hope.</p> </div>`, }, + { + title: 'dialogs', + note: + 'NES.css does not include any JavaScript. If you want to use dialog element other than Chrome, you need polyfill.', + showCode: false, + code: `<!-- Dialog --> +<section> + <button type="button" class="nes-btn is-primary" onclick="document.getElementById('dialog-default').showModal();"> + Open dialog + </button> + <dialog class="nes-dialog" id="dialog-default"> + <form method="dialog"> + <p class="title">Dialog</p> + <p>Alert: this is a dialog.</p> + <menu class="dialog-menu"> + <button class="nes-btn">Cancel</button> + <button class="nes-btn is-primary">Confirm</button> + </menu> + </form> + </dialog> +</section> + +<!-- Dark dialog --> +<section> + <button type="button" class="nes-btn is-primary" onclick="document.getElementById('dialog-dark').showModal();"> + Open dark dialog + </button> + <dialog class="nes-dialog is-dark" id="dialog-dark"> + <form method="dialog"> + <p class="title">Dark dialog</p> + <p>Alert: this is a dialog.</p> + <menu class="dialog-menu"> + <button class="nes-btn">Cancel</button> + <button class="nes-btn is-primary">Confirm</button> + </menu> + </form> + </dialog> +</section> + +<!-- Rounded dialog --> +<section> + <button type="button" class="nes-btn is-primary" onclick="document.getElementById('dialog-rounded').showModal();"> + Open rounded dialog + </button> + <dialog class="nes-dialog is-rounded" id="dialog-rounded"> + <form method="dialog"> + <p class="title">Rounded dialog</p> + <p>Alert: this is a dialog.</p> + <menu class="dialog-menu"> + <button class="nes-btn">Cancel</button> + <button class="nes-btn is-primary">Confirm</button> + </menu> + </form> + </dialog> +</section> + +<!-- Dark and Rounded dialog --> +<section> + <button type="button" class="nes-btn is-primary" onclick="document.getElementById('dialog-dark-rounded').showModal();"> + Open dark and rounded dialog + </button> + <dialog class="nes-dialog is-dark is-rounded" id="dialog-dark-rounded"> + <form method="dialog"> + <p class="title">Dark and Rounded dialog</p> + <p>Alert: this is a dialog.</p> + <menu class="dialog-menu"> + <button class="nes-btn">Cancel</button> + <button class="nes-btn is-primary">Confirm</button> + </menu> + </form> + </dialog> +</section>`, + }, ]; const coreteam = [ diff --git a/docs/style.css b/docs/style.css index 2d2265b..135127b 100644 --- a/docs/style.css +++ b/docs/style.css @@ -77,6 +77,10 @@ section.showcase > section.samplecode { right: 0px; } +section.showcase > section.nes-container > p.note { + margin-top: 2.5rem; +} + section.showcase > section.samplecode > pre code { font-size: 13px; line-height: 1.5;