-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
6 changed files
with
632 additions
and
0 deletions.
There are no files selected for viewing
313 changes: 313 additions & 0 deletions
313
docs/documentation/components/button-destructive-test.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,313 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="nl"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <title>Destructieve knop testpagina</title> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | ||
| <link href="../../static/css/main.css" rel="stylesheet" /> | ||
| <link href="../../static/img/favicon.ico" rel="shortcut icon" /> | ||
| <script defer src="../../static/js/manon.js"></script> | ||
| </head> | ||
| <body id="index"> | ||
| <header> | ||
| <a href="#main-content" class="button focus-only skip-to-content">Ga direct naar inhoud</a> | ||
|
|
||
| <nav aria-label="Hoofdnavigatie"> | ||
| <div> | ||
| <ul> | ||
| <li><a href="../../index.html">Home</a></li> | ||
| <li><a href="../components.html">Componenten</a></li> | ||
| <li><a href="../documentation.html">Documentatie</a></li> | ||
| </ul> | ||
| </div> | ||
| </nav> | ||
|
|
||
| <nav class="breadcrumb-bar"> | ||
| <div> | ||
| <ul> | ||
| <li><a href="../components.html">Componenten</a></li> | ||
| <li><a href="./button.html">Knoppen</a></li> | ||
| <li> | ||
| <a href="./button-destructive-test.html" aria-current="page">"Destructieve testpagina</a> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| </nav> | ||
| </header> | ||
|
|
||
| <main id="main-content" tabindex="-1"> | ||
| <article id="button-base"> | ||
| <div> | ||
| <section id="introduction"> | ||
| <h1>"Destructieve testpagina</h1> | ||
| <p>Overzicht van het element in mogelijke structuren om te testen.</p> | ||
| </section> | ||
|
|
||
| <section id="tests"> | ||
| <h2>Tests</h2> | ||
|
|
||
| <h3><code>button</code></h3> | ||
| <h4>Visueel voorbeeld:</h4> | ||
| <button class="destructive">Lorem ipsum</button> | ||
|
|
||
| <h4>Html-voorbeeld:</h4> | ||
| <pre> | ||
| <code> | ||
| <button class="destructive">Lorem ipsum</button> | ||
| </code> | ||
| </pre> | ||
|
|
||
| <h3><code>button</code> disabled</h3> | ||
| <h4>Visueel voorbeeld:</h4> | ||
| <button class="destructive" disabled>Lorem ipsum</button> | ||
|
|
||
| <h4>Html-voorbeeld:</h4> | ||
| <pre> | ||
| <code> | ||
| <button class="destructive" disabled>Lorem ipsum</button> | ||
| </code> | ||
| </pre> | ||
| <h4>States</h4> | ||
| <ul> | ||
| <li><button class="destructive focus">Focus</button></li> | ||
| <li><button class="destructive active">Active</button></li> | ||
| <li><button class="destructive visited">Visited</button></li> | ||
| <li><button class="destructive hover">Hover</button></li> | ||
| </ul> | ||
|
|
||
| <h3><code>button</code> met een afbeelding</h3> | ||
| <h4>Visueel voorbeeld:</h4> | ||
| <button class="destructive">Lorem ipsum <img src="" /></button> | ||
|
|
||
| <h4>Html-voorbeeld:</h4> | ||
| <pre> | ||
| <code> | ||
| <button class="destructive">Lorem ipsum <img src=""></button> | ||
| </code> | ||
| </pre> | ||
|
|
||
| <h3>Link als knop</h3> | ||
| <h4>Visueel voorbeeld:</h4> | ||
| <a href="./button-destructive-test.html" class="button destructive">Lorem ipsum</a> | ||
|
|
||
| <h4>Html-voorbeeld:</h4> | ||
| <pre> | ||
| <code> | ||
| <input class="button destructive">Lorem ipsum</a> | ||
| </code> | ||
| </pre> | ||
|
|
||
| <h3>Link als knop: disabled</h3> | ||
| <h4>Visueel voorbeeld:</h4> | ||
| <a href="./button-destructive-test.html" class="button destructive" disabled>Lorem ipsum</a> | ||
|
|
||
| <h4>Html-voorbeeld:</h4> | ||
| <pre> | ||
| <code> | ||
| <input class="button destructive" disabled>Lorem ipsum</a> | ||
| </code> | ||
| </pre> | ||
|
|
||
| <h4>States</h4> | ||
| <ul> | ||
| <li> | ||
| <a href="./button-destructive-test.html" class="button destructive focus">Focus</a> | ||
| </li> | ||
| <li> | ||
| <a href="./button-destructive-test.html" class="button destructive active">Active</a> | ||
| </li> | ||
| <li> | ||
| <a href="./button-destructive-test.html" class="button destructive visited">Visited</a> | ||
| </li> | ||
| <li> | ||
| <a href="./button-destructive-test.html" class="button destructive hover">Hover</a> | ||
| </li> | ||
| </ul> | ||
|
|
||
| <h3>Link als knop: met een afbeelding</h3> | ||
| <h4>Visueel voorbeeld:</h4> | ||
| <a href="./button-destructive-test.html" class="button destructive">Lorem ipsum <img src="" /></a> | ||
|
|
||
| <h4>Html-voorbeeld:</h4> | ||
| <pre> | ||
| <code> | ||
| <input class="button destructive">Lorem ipsum <img src=""></a> | ||
| </code> | ||
| </pre> | ||
|
|
||
| <h3><code>input type="button"</code></h3> | ||
| <h4>Visueel voorbeeld:</h4> | ||
| <input type="button" value="Button" class="destructive" /> | ||
|
|
||
| <h4>Html-voorbeeld:</h4> | ||
| <pre> | ||
| <code> | ||
| <input type="button" value="Button" class="destructive"> | ||
| </code> | ||
| </pre> | ||
|
|
||
| <h3><code>input type="button"</code>: disabled</h3> | ||
| <h4>Visueel voorbeeld:</h4> | ||
| <input type="button" value="Button disabled" class="destructive" disabled /> | ||
|
|
||
| <h4>Html-voorbeeld:</h4> | ||
| <pre> | ||
| <code> | ||
| <input type="button" value="Button disabled" class="destructive" disabled> | ||
| </code> | ||
| </pre> | ||
|
|
||
| <h4>States</h4> | ||
| <h4>Visueel voorbeeld:</h4> | ||
| <ul> | ||
| <li><input type="button" value="Focus" class="destructive focus" /></li> | ||
| <li> | ||
| <input type="button" value="Active" class="destructive active" /> | ||
| </li> | ||
| <li> | ||
| <input type="button" value="Visited" class="destructive visited" /> | ||
| </li> | ||
| <li><input type="button" value="Hover" class="destructive hover" /></li> | ||
| </ul> | ||
|
|
||
| <h3><code>button type="submit"</code></h3> | ||
| <h4>Visueel voorbeeld:</h4> | ||
| <button type="submit" class="destructive">Lorem ipsum</button> | ||
|
|
||
| <h4>Html-voorbeeld:</h4> | ||
| <pre> | ||
| <code> | ||
| <button type="submit" class="destructive">Lorem ipsum</button> | ||
| </code> | ||
| </pre> | ||
|
|
||
| <h3><code>button type="submit"</code>: disabled</h3> | ||
| <h4>Visueel voorbeeld:</h4> | ||
| <button type="submit" class="destructive" disabled>Lorem ipsum</button> | ||
|
|
||
| <h4>Html-voorbeeld:</h4> | ||
| <pre> | ||
| <code> | ||
| <button type="submit" value="Button disabled" class="destructive" disabled> | ||
| </code> | ||
| </pre> | ||
|
|
||
| <h4>States</h4> | ||
| <h4>Visueel voorbeeld:</h4> | ||
| <ul> | ||
| <li><button type="submit" class="destructive focus">Focus</button></li> | ||
| <li> | ||
| <button type="submit" class="destructive active">Active</button> | ||
| </li> | ||
| <li> | ||
| <button type="submit" class="destructive visited">Visited</button> | ||
| </li> | ||
| <li><button type="submit" class="destructive hover">Hover</button></li> | ||
| </ul> | ||
|
|
||
| <h3><code>input type="submit"</code></h3> | ||
| <h4>Visueel voorbeeld:</h4> | ||
| <input type="submit" value="Input" class="destructive" /> | ||
|
|
||
| <h4>Html-voorbeeld:</h4> | ||
| <pre> | ||
| <code> | ||
| <input type="submit" value="Input" class="destructive"> | ||
| </code> | ||
| </pre> | ||
|
|
||
| <h3><code>input type="submit"</code>: disabled</h3> | ||
| <h4>Visueel voorbeeld:</h4> | ||
| <input type="submit" value="Input" class="destructive" disabled /> | ||
|
|
||
| <h4>Html-voorbeeld:</h4> | ||
| <pre> | ||
| <code> | ||
| <input type="submit" value="Input" class="destructive" disabled> | ||
| </code> | ||
| </pre> | ||
|
|
||
| <h3><code>button type="reset"</code></h3> | ||
| <h4>Visueel voorbeeld:</h4> | ||
| <button type="reset" class="destructive">Lorem ipsum</button> | ||
|
|
||
| <h4>Html-voorbeeld:</h4> | ||
| <pre> | ||
| <code> | ||
| <button type="reset" class="destructive">Lorem ipsum</button> | ||
| </code> | ||
| </pre> | ||
|
|
||
| <h3><code>button type="reset"</code>: disabled</h3> | ||
| <h4>Visueel voorbeeld:</h4> | ||
| <button type="reset" class="destructive" disabled>Lorem ipsum</button> | ||
|
|
||
| <h4>Html-voorbeeld:</h4> | ||
| <pre> | ||
| <code> | ||
| <button type="reset" value="Button disabled" class="destructive" disabled> | ||
| </code> | ||
| </pre> | ||
|
|
||
| <h4>States</h4> | ||
| <h4>Visueel voorbeeld:</h4> | ||
| <ul> | ||
| <li><button type="reset" class="destructive focus">Focus</button></li> | ||
| <li><button type="reset" class="destructive active">Active</button></li> | ||
| <li> | ||
| <button type="reset" class="destructive visited">Visited</button> | ||
| </li> | ||
| <li><button type="reset" class="destructive hover">Hover</button></li> | ||
| </ul> | ||
|
|
||
| <h3><code>input type="reset"</code>: disabled</h3> | ||
| <h4>Visueel voorbeeld:</h4> | ||
| <input type="reset" value="Input" class="destructive" disabled /> | ||
|
|
||
| <h4>Html-voorbeeld:</h4> | ||
| <pre> | ||
| <code> | ||
| <input type="reset" value="Input" class="destructive" disabled> | ||
| </code> | ||
| </pre> | ||
|
|
||
| <h3><code>input type="reset"</code></h3> | ||
| <h4>Visueel voorbeeld:</h4> | ||
| <input type="reset" class="destructive" /> | ||
|
|
||
| <h4>Html-voorbeeld:</h4> | ||
| <pre> | ||
| <code> | ||
| <input type="reset" class="destructive"> | ||
| </code> | ||
| </pre> | ||
|
|
||
| <h3><code>input type="reset"</code>: disabled</h3> | ||
| <h4>Visueel voorbeeld:</h4> | ||
| <input type="reset" class="destructive" disabled /> | ||
|
|
||
| <h4>Html-voorbeeld:</h4> | ||
| <pre> | ||
| <code> | ||
| <input type="reset" value="Button disabled" class="destructive" disabled> | ||
| </code> | ||
| </pre> | ||
|
|
||
| <h4>States</h4> | ||
| <h4>Visueel voorbeeld:</h4> | ||
| <ul> | ||
| <li><input type="reset" value="focus" class="destructive focus" /></li> | ||
| <li> | ||
| <input type="reset" value="active" class="destructive active" /> | ||
| </li> | ||
| <li> | ||
| <input type="reset" value="visited" class="destructive visited" /> | ||
| </li> | ||
| <li><input type="reset" value="hover" class="destructive hover" /></li> | ||
| </ul> | ||
| </section> | ||
| </div> | ||
| </article> | ||
| </main> | ||
| </body> | ||
| </html> |
Oops, something went wrong.