Simplify example.html
* Don't use djl-lipsum elements instead of p tags * Add section headers * Wrap references to properties in code tags
This commit is contained in:
parent
3702767a44
commit
44cfe71d0d
11
example.html
11
example.html
|
@ -12,20 +12,21 @@
|
|||
|
||||
<body>
|
||||
<article id="djl-lipsum">
|
||||
<p><djl-lipsum>This is a djl-lipsum element. Without a value, it outputs lorem ipsum</djl-lipsum></p>
|
||||
<p>Below is a djl-lipsum element. Without a value, it outputs lorem ipsum</p>
|
||||
<blockquote>
|
||||
<p><djl-lipsum></djl-lipsum></p>
|
||||
</blockquote>
|
||||
<p><djl-lipsum>The random-start property starts the text at a random word.</djl-lipsum></p>
|
||||
<p>The <code>random-start</code> property starts the text at a random word.</p>
|
||||
<blockquote>
|
||||
<p><djl-lipsum random-start></djl-lipsum></p>
|
||||
</blockquote>
|
||||
<p><djl-lipsum>You can limit the length of the text with the length property.</djl-lipsum></p>
|
||||
<p>You can limit the length of the text with the <code>length</code> property.</p>
|
||||
<blockquote>
|
||||
<p><djl-lipsum length="25"></djl-lipsum></p>
|
||||
</blockquote>
|
||||
<p>You can provide arbitrary text to display (instead of lipsum) by giving it inside the element</p>
|
||||
<blockquote>
|
||||
<p><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></p>
|
||||
<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>
|
||||
</blockquote>
|
||||
<blockquote>
|
||||
<p><djl-lipsum random-start length="250" wrap>You can also combine all three attributes.</djl-lipsum></p>
|
||||
|
@ -33,12 +34,14 @@
|
|||
</article>
|
||||
|
||||
<article id="djl-script">
|
||||
<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>
|
||||
<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>
|
||||
|
||||
|
||||
<article id="djl-json">
|
||||
<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>
|
||||
<p>My name in example.json is: <djl-json src="example.json" prop="about.name">loading...</djl-json></p>
|
||||
<p>My pets are called: <djl-json src="example.json" prop="about.pets">loading...</djl-json></p>
|
||||
</article>
|
||||
|
|
Loading…
Reference in New Issue