|
6 | 6 | <script type="module" src="./index.js" defer></script>
|
7 | 7 | <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
8 | 8 | </head>
|
9 |
| - |
10 | 9 | <body>
|
11 |
| - <wc-navbar>Storybook</wc-navbar> |
| 10 | + <wc-navbar>Web Components Storybook</wc-navbar> |
12 | 11 | <wc-row>
|
13 | 12 | <wc-col width="2" style="background-color: lightgray">NAV</wc-col>
|
14 | 13 | <wc-col width="10">
|
@@ -79,17 +78,60 @@ <h4>Nav (Vertical)</h4>
|
79 | 78 | <div class="container m-1">
|
80 | 79 | <h4>Form Elements</h4>
|
81 | 80 | <wc-form action="/">
|
| 81 | + <wc-form-head>Form to fill in</wc-form-head> |
82 | 82 | <wc-input name="input-a" placeholder="Placeholder">First input value</wc-input>
|
83 | 83 | <wc-input name="input-b" placeholder="Placeholder">Second input value</wc-input>
|
84 |
| - <wc-checkbox-group name="checkbox-c" radio> |
85 |
| - <wc-checkbox value="1">Checkbox 1</wc-checkbox> |
86 |
| - <wc-checkbox value="2" checked>Checkbox 2</wc-checkbox> |
87 |
| - <wc-checkbox value="3" disabled>Checkbox 3</wc-checkbox> |
88 |
| - </wc-checkbox-group> |
| 84 | + <wc-row> |
| 85 | + <wc-col width="6"> |
| 86 | + <wc-checkbox-group name="checkbox-c"> |
| 87 | + <wc-checkbox value="1">Checkbox 1</wc-checkbox> |
| 88 | + <wc-checkbox value="2" checked>Checkbox 2</wc-checkbox> |
| 89 | + <wc-checkbox value="3" disabled>Checkbox 3</wc-checkbox> |
| 90 | + </wc-checkbox-group> |
| 91 | + </wc-col> |
| 92 | + <wc-col width="6"> |
| 93 | + <wc-checkbox-group name="radio-d" radio> |
| 94 | + <wc-checkbox value="1">Radio 1</wc-checkbox> |
| 95 | + <wc-checkbox value="2" checked>Radio 2</wc-checkbox> |
| 96 | + <wc-checkbox value="3" disabled>Radio 3</wc-checkbox> |
| 97 | + </wc-checkbox-group> |
| 98 | + </wc-col> |
| 99 | + </wc-row> |
89 | 100 | <wc-button>Submit</wc-button>
|
90 | 101 | </wc-form>
|
91 | 102 | </div>
|
92 | 103 |
|
| 104 | + <div class="container m-1"> |
| 105 | + <h4>Modal</h4> |
| 106 | + <wc-button id="open-button">Open</wc-button> |
| 107 | + <wc-modal id="modal-window" bg="white"> |
| 108 | + <wc-close></wc-close> |
| 109 | + <h3>This is a modal box</h3> |
| 110 | + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore |
| 111 | + et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut |
| 112 | + aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse |
| 113 | + cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in |
| 114 | + culpa qui officia deserunt |
| 115 | + mollit anim id est laborum.</p> |
| 116 | + <p>Duis aute irure dolor in reprehenderit in voluptate velit esse |
| 117 | + cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in |
| 118 | + culpa qui officia deserunt |
| 119 | + mollit anim id est laborum.</p> |
| 120 | + </wc-modal> |
| 121 | + <script> |
| 122 | + var open = document.getElementById('open-button'); |
| 123 | + var win = document.getElementById('modal-window'); |
| 124 | + open.addEventListener('click', function() { |
| 125 | + win.style.display = 'block'; |
| 126 | + }); |
| 127 | + </script> |
| 128 | + </div> |
| 129 | + |
| 130 | + <div class="container m-1"> |
| 131 | + <h4>Table</h4> |
| 132 | + <wc-table columns="Col A, Col B, Col C" head foot data="fake-data"></wc-table> |
| 133 | + </div> |
| 134 | + |
93 | 135 | </wc-col>
|
94 | 136 | </wc-row>
|
95 | 137 | </body>
|
|
0 commit comments