2021-05-26 14:21:53 +00:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< title > Web Components Example.< / title >
<!-- TODO: Use your own style sheet? -->
< link rel = "stylesheet" href = "https://cdn.jsdelivr.net/gh/yegor256/tacit@gh-pages/tacit-css-1.5.1.min.css" / >
2021-05-26 15:17:05 +00:00
< script defer src = "DjlJson.js" > < / script >
2021-05-26 14:21:53 +00:00
< script defer src = "DjlLipsum.js" > < / script >
2021-05-26 15:17:05 +00:00
< script defer src = "DjlScript.js" > < / script >
2021-05-27 11:38:13 +00:00
< script defer src = "DjlSpinner.js" > < / script >
2021-05-26 14:21:53 +00:00
< / head >
< body >
< article id = "djl-lipsum" >
2021-05-26 15:28:47 +00:00
< p > Below is a djl-lipsum element. Without a value, it outputs lorem ipsum< / p >
2021-05-26 14:21:53 +00:00
< blockquote >
< p > < djl-lipsum > < / djl-lipsum > < / p >
< / blockquote >
2021-05-26 15:28:47 +00:00
< p > The < code > random-start< / code > property starts the text at a random word.< / p >
2021-05-26 14:21:53 +00:00
< blockquote >
< p > < djl-lipsum random-start > < / djl-lipsum > < / p >
< / blockquote >
2021-05-26 15:28:47 +00:00
< p > You can limit the length of the text with the < code > length< / code > property.< / p >
2021-05-26 14:21:53 +00:00
< blockquote >
< p > < djl-lipsum length = "25" > < / djl-lipsum > < / p >
< / blockquote >
2021-05-26 15:28:47 +00:00
< p > You can provide arbitrary text to display (instead of lipsum) by giving it inside the element< / p >
2021-05-26 14:21:53 +00:00
< blockquote >
2021-05-26 15:28:47 +00:00
< djl-lipsum length = "250" wrap > You can combine the length and wrap attributes to get placeholder text that wraps around until text is length long.< / djl-lipsum >
2021-05-26 14:21:53 +00:00
< / blockquote >
< blockquote >
< p > < djl-lipsum random-start length = "250" wrap > You can also combine all three attributes.< / djl-lipsum > < / p >
< / blockquote >
< / article >
< article id = "djl-script" >
2021-05-26 15:28:47 +00:00
< p > Below are some examples of the djl-code element. It executes the JavaScript given as it's text, and allows editing and re-execution by clicking on it< / p >
2021-05-26 14:21:53 +00:00
< p > < djl-script > ['This','is','a','djl-script','element', '(click', 'on', 'me', 'to', 'edit).'].join(' ');< / djl-script > < / p >
< p > < djl-script > `Happy ${['Sun', 'Mon', 'Tues', 'Wednes', 'Thurs', 'Fri', 'Satur'][new Date().getDay()]}day`< / djl-script > < / p >
< / article >
2021-05-26 15:17:05 +00:00
2021-05-27 11:38:13 +00:00
< article id = "djl-spinner" >
< p > Loading spinners!< / p >
< p > < djl-spinner / > < / p >
< p > Customize < code > size< / code > , < code > background< / code > and < code > foreground< / code > colours< / p >
< p > < djl-spinner size = "25px" background = "green" foreground = "cyan" > < / djl-spinner > < / p >
< / article >
2021-05-26 15:17:05 +00:00
< article id = "djl-json" >
2021-05-26 15:28:47 +00:00
< p > Below are some examples of the djl-json element. It retrieves a JSON document from < code > src< / code > , and displays the property < code > prop< / code > < / p >
2021-05-27 11:38:13 +00:00
< p > My pets are called:
< djl-json src = "example.json" prop = "about.pets" > < / djl-json >
< / p >
< p > My name in example.json is: < djl-json src = "example.json" prop = "about.name" > < code > loading...< / code > < / djl-json > < / p >
< p > Stick a spinner inside to let people know you're getting something!< djl-json src = "example.json" prop = "about.dob" > < djl-spinner / > < / djl-json > (you may need to throttle your network if running this locally)< / p >
2021-05-26 15:17:05 +00:00
< / article >
2021-05-26 14:21:53 +00:00
< / body >
< / html >