| 1 | <!DOCTYPE html>
|
| 2 | <html>
|
| 3 | <head>
|
| 4 | <title>zui-bundle</title>
|
| 5 | <link rel="stylesheet" href="./dist/css/zui-bundle.fouc.css" />
|
| 6 | <link rel="stylesheet" href="./dist/css/zui-bundle.app.css" />
|
| 7 |
|
| 8 | <style>
|
| 9 | .tabbed-page:not(.is-visible) {
|
| 10 | display: none;
|
| 11 | }
|
| 12 | </style>
|
| 13 | </head>
|
| 14 |
|
| 15 | <body>
|
| 16 | <zui-shell app-name="Test">
|
| 17 | <zui-shell-topbar>
|
| 18 | <zui-logo slot="logo"></zui-logo>
|
| 19 | <zui-button slot="modules">
|
| 20 | <a href="#">Logout</a>
|
| 21 | </zui-button>
|
| 22 | <zui-shell-user
|
| 23 | slot="user"
|
| 24 | given-name="John"
|
| 25 | family-name="Cruikshank"
|
| 26 | profile-name="Zywave"
|
| 27 | username="john.cruikshank@zywave.com"
|
| 28 | profile-detail="Milwaukee, WI"
|
| 29 | logout-user-url="#"
|
| 30 | manage-user-url="#"
|
| 31 | manage-profile-url="#"
|
| 32 | switch-profile-url="#"
|
| 33 | notification-count="6"
|
| 34 | view-notifications-url="https://google.com"
|
| 35 | impersonating-profile-name="jxiong1337"
|
| 36 | impersonating-given-name="Julie"
|
| 37 | impersonating-family-name="Xiong"
|
| 38 | impersonating
|
| 39 | ></zui-shell-user>
|
| 40 | </zui-shell-topbar>
|
| 41 |
|
| 42 | <zui-shell-nav>
|
| 43 | <zui-shell-context-switcher context-title="ABC Company" context-label="Viewing as" action-text="switch">
|
| 44 | </zui-shell-context-switcher>
|
| 45 | <zui-shell-nav-item>
|
| 46 | <zui-icon icon="zui-nav-company" slot="icon"></zui-icon>
|
| 47 | <a href="#">Overview</a>
|
| 48 | </zui-shell-nav-item>
|
| 49 | <zui-shell-nav-item>
|
| 50 | <zui-icon icon="zui-nav-administrators" slot="icon"></zui-icon>
|
| 51 | <a href="#">Administrators</a>
|
| 52 | </zui-shell-nav-item>
|
| 53 | </zui-shell-nav>
|
| 54 |
|
| 55 | <zui-shell-content>
|
| 56 | <div class="zui shell-content-wrapper">
|
| 57 | <zui-tabs>
|
| 58 | <zui-tab>Form fields</zui-tab>
|
| 59 | <zui-tab>Buttons</zui-tab>
|
| 60 | <zui-tab>Wells</zui-tab>
|
| 61 | <zui-tab>Table</zui-tab>
|
| 62 | <zui-tab>Dialog</zui-tab>
|
| 63 | </zui-tabs>
|
| 64 |
|
| 65 | <section class="tabbed-page-container">
|
| 66 | <div class="tabbed-page">
|
| 67 | <h2>Form fields</h2>
|
| 68 | <div class="zui row">
|
| 69 | <div class="zui column vanilla">
|
| 70 | <zui-formfield label="Vanilla select">
|
| 71 | <select name="vanilla-select">
|
| 72 | <option>Vanilla1</option>
|
| 73 | <option>Vanilla2</option>
|
| 74 | </select>
|
| 75 | </zui-formfield>
|
| 76 | <zui-formfield label="Vanilla multiselect">
|
| 77 | <select id="multiple" name="vanilla-multiselect" multiple>
|
| 78 | <option>VanillaM1</option>
|
| 79 | <option selected>VanillaM2</option>
|
| 80 | </select>
|
| 81 | </zui-formfield>
|
| 82 | <zui-formfield class="part-demo" label="Vanilla input">
|
| 83 | <input type="text" name="vanilla-input" />
|
| 84 | </zui-formfield>
|
| 85 | <zui-formfield label="Vanilla checkbox">
|
| 86 | <input type="checkbox" name="vanilla-checkbox" />
|
| 87 | </zui-formfield>
|
| 88 | <zui-formfield label="Vanilla radio">
|
| 89 | <input type="radio" name="vanilla-radio" />
|
| 90 | </zui-formfield>
|
| 91 | <zui-formfield label="Vanilla radio2">
|
| 92 | <input type="radio" name="vanilla-radio2" value="vanilla-radio2" />
|
| 93 | </zui-formfield>
|
| 94 | </div>
|
| 95 | <div class="zui column boujie">
|
| 96 | <zui-formfield label="ZUI Multiselect Dropdown">
|
| 97 | <zui-select-dropdown
|
| 98 | id="zuiSelectDropdown"
|
| 99 | name="zui-select-dropdown"
|
| 100 | multiple
|
| 101 | placeholder="Select multiple values..."
|
| 102 | >
|
| 103 | <zui-option value="test-1">Test1</zui-option>
|
| 104 | <zui-option value="test-2">Test2</zui-option>
|
| 105 | <zui-option value="test-3">Test3</zui-option>
|
| 106 | <zui-option value="test-4">Test4</zui-option>
|
| 107 | <zui-option value="test-5">Test5</zui-option>
|
| 108 | </zui-select-dropdown>
|
| 109 | </zui-formfield>
|
| 110 | <zui-formfield label="ZUI MultiSelect">
|
| 111 | <zui-select id="zuiSelect" name="zui-select" placeholder="Select multiple values..." multiple>
|
| 112 | <zui-option value="test-1">Test1</zui-option>
|
| 113 | <zui-option value="test-2">Test2</zui-option>
|
| 114 | <zui-option value="test-3">Test3</zui-option>
|
| 115 | <zui-option value="test-4">Test4</zui-option>
|
| 116 | <zui-option value="test-5">Test5</zui-option>
|
| 117 | </zui-select>
|
| 118 | </zui-formfield>
|
| 119 | <zui-formfield label="ZUI Select">
|
| 120 | <zui-select id="zuiSelect2" name="zui-select2">
|
| 121 | <zui-option value="test-1">Test1</zui-option>
|
| 122 | <zui-option value="test-2">Test2</zui-option>
|
| 123 | <zui-option value="test-3">Test3</zui-option>
|
| 124 | <zui-option value="test-4">Test4</zui-option>
|
| 125 | <zui-option value="test-5">Test5</zui-option>
|
| 126 | </zui-select>
|
| 127 | </zui-formfield>
|
| 128 | <zui-formfield class="part-demo" label="ZUI input">
|
| 129 | <zui-input name="zui-input"></zui-input>
|
| 130 | </zui-formfield>
|
| 131 | <zui-formfield label="ZUI Checkbox">
|
| 132 | <zui-checkbox name="zui-checkbox"></zui-checkbox>
|
| 133 | </zui-formfield>
|
| 134 | <zui-formfield label="ZUI Toggle">
|
| 135 | <zui-toggle name="zui-toggle"></zui-toggle>
|
| 136 | </zui-formfield>
|
| 137 | <zui-formfield label="ZUI radio">
|
| 138 | <zui-radio name="zui-radio"></zui-radio>
|
| 139 | </zui-formfield>
|
| 140 | <zui-formfield label="ZUI radio2">
|
| 141 | <zui-radio name="zui-radio2" value="zui-radio2-value"></zui-radio>
|
| 142 | </zui-formfield>
|
| 143 | </div>
|
| 144 | </div>
|
| 145 | </div>
|
| 146 | <div class="tabbed-page">
|
| 147 | <h2>Buttons</h2>
|
| 148 | <h3>Primary & Secondary</h3>
|
| 149 | <zui-button-group style="margin-bottom: 10px;">
|
| 150 | <zui-button>One</zui-button>
|
| 151 | <zui-button id="dialogOpen">Two (open dialog)</zui-button>
|
| 152 | <zui-button>Three</zui-button>
|
| 153 | <zui-button-dropdown icon>
|
| 154 | <zui-icon icon="zui-more"></zui-icon>
|
| 155 | <button slot="option">Update</button>
|
| 156 | <button slot="option">Print</button>
|
| 157 | <button slot="option">Email</button>
|
| 158 | <a href="#" slot="option" style="color: red;">Delete</a>
|
| 159 | </zui-button-dropdown>
|
| 160 | </zui-button-group>
|
| 161 | <zui-button-group>
|
| 162 | <zui-button type="secondary">One</zui-button>
|
| 163 | <zui-button type="secondary">Two</zui-button>
|
| 164 | <zui-button type="secondary">Three</zui-button>
|
| 165 | <zui-button-dropdown type="secondary" icon>
|
| 166 | <zui-icon icon="zui-more"></zui-icon>
|
| 167 | <button slot="option">Update</button>
|
| 168 | <button slot="option">Print</button>
|
| 169 | <button slot="option">Email</button>
|
| 170 | <a href="#" slot="option" style="color: red;">Delete</a>
|
| 171 | </zui-button-dropdown>
|
| 172 | </zui-button-group>
|
| 173 |
|
| 174 | <hr />
|
| 175 |
|
| 176 | <h3>Disabled</h3>
|
| 177 | <zui-button-group style="margin-bottom: 10px;">
|
| 178 | <zui-button disabled>One</zui-button>
|
| 179 | <zui-button>Two</zui-button>
|
| 180 | <zui-button>Three</zui-button>
|
| 181 | <zui-button disabled>Four</zui-button>
|
| 182 | <zui-button>Five</zui-button>
|
| 183 | </zui-button-group>
|
| 184 | <zui-button-group style="margin-bottom: 10px;">
|
| 185 | <zui-button type="secondary">One</zui-button>
|
| 186 | <zui-button disabled class="secondary">Two</zui-button>
|
| 187 | <zui-button type="secondary">Three</zui-button>
|
| 188 | </zui-button-group>
|
| 189 |
|
| 190 | <hr />
|
| 191 |
|
| 192 | <h3>Slotted variations</h3>
|
| 193 | <zui-button-group>
|
| 194 | <zui-button>
|
| 195 | <zui-icon icon="zui-download"></zui-icon>
|
| 196 | Download
|
| 197 | </zui-button>
|
| 198 | <zui-button>
|
| 199 | <zui-icon icon="zui-mail"></zui-icon>
|
| 200 | Email
|
| 201 | </zui-button>
|
| 202 | <zui-button-dropdown>
|
| 203 | <zui-icon icon="zui-share"></zui-icon>
|
| 204 | <span>Share</span>
|
| 205 | <button slot="option">Facebook</button>
|
| 206 | <button slot="option">LinkedIn</button>
|
| 207 | <button slot="option">Portal</button>
|
| 208 | </zui-button-dropdown>
|
| 209 | <zui-button-dropdown icon>
|
| 210 | <zui-icon icon="zui-more"></zui-icon>
|
| 211 | <button slot="option">Update</button>
|
| 212 | <button slot="option">Print</button>
|
| 213 | <button slot="option">Email</button>
|
| 214 | <a href="#" slot="option" style="color: red;">Delete</a>
|
| 215 | </zui-button-dropdown>
|
| 216 | </zui-button-group>
|
| 217 |
|
| 218 | <div style="margin-top: 6px;">
|
| 219 | <zui-button-group>
|
| 220 | <zui-button icon>
|
| 221 | <zui-icon icon="zui-download"></zui-icon>
|
| 222 | </zui-button>
|
| 223 | <zui-button icon>
|
| 224 | <zui-icon icon="zui-mail"></zui-icon>
|
| 225 | </zui-button>
|
| 226 | <zui-button-dropdown icon>
|
| 227 | <zui-icon icon="zui-share"></zui-icon>
|
| 228 | <a href="http://www.facebook.com" slot="option">Facebook</a>
|
| 229 | <button slot="option">LinkedIn</button>
|
| 230 | <button slot="option">Portal</button>
|
| 231 | </zui-button-dropdown>
|
| 232 | <zui-button-dropdown>
|
| 233 | <zui-icon icon="zui-share"></zui-icon>
|
| 234 | <span>Share</span>
|
| 235 | <button slot="option">Facebook</button>
|
| 236 | <button slot="option">LinkedIn</button>
|
| 237 | <button slot="option">Portal</button>
|
| 238 | </zui-button-dropdown>
|
| 239 | <zui-button-dropdown icon>
|
| 240 | <zui-icon icon="zui-more"></zui-icon>
|
| 241 | <button slot="option">Update</button>
|
| 242 | <button slot="option">Print</button>
|
| 243 | <button slot="option">Email</button>
|
| 244 | <a href="#" slot="option" style="color: red;">Delete</a>
|
| 245 | </zui-button-dropdown>
|
| 246 | </zui-button-group>
|
| 247 | </div>
|
| 248 |
|
| 249 |
|
| 250 | <h1>ZUI Buttons</h1>
|
| 251 | <zui-button-group style="margin-bottom: 10px;">
|
| 252 | <zui-button disabled>One</zui-button>
|
| 253 | <zui-button>Two</zui-button>
|
| 254 | <zui-button>Three</zui-button>
|
| 255 | <zui-button disabled>Four</zui-button>
|
| 256 | <zui-button>Five</zui-button>
|
| 257 | </zui-button-group>
|
| 258 | <zui-button-group style="margin-bottom: 10px;">
|
| 259 | <zui-button type="secondary">One</zui-button>
|
| 260 | <zui-button disabled class="secondary">Two</zui-button>
|
| 261 | <zui-button type="secondary">Three</zui-button>
|
| 262 | </zui-button-group>
|
| 263 | <zui-button-group style="margin-bottom: 10px;">
|
| 264 | <zui-button>One</zui-button>
|
| 265 | <zui-button>Two</zui-button>
|
| 266 | <zui-button>Three</zui-button>
|
| 267 | <zui-button-dropdown icon>
|
| 268 | <zui-icon icon="zui-more"></zui-icon>
|
| 269 | <button slot="option">Update</button>
|
| 270 | <button slot="option">Print</button>
|
| 271 | <button slot="option">Email</button>
|
| 272 | <a href="#" slot="option" style="color: red;">Delete</a>
|
| 273 | </zui-button-dropdown>
|
| 274 | </zui-button-group>
|
| 275 | <zui-button-group>
|
| 276 | <zui-button type="secondary">One</zui-button>
|
| 277 | <zui-button type="secondary">Two</zui-button>
|
| 278 | <zui-button type="secondary">Three</zui-button>
|
| 279 | <zui-button-dropdown type="secondary" icon>
|
| 280 | <zui-icon icon="zui-more"></zui-icon>
|
| 281 | <button slot="option">Update</button>
|
| 282 | <button slot="option">Print</button>
|
| 283 | <button slot="option">Email</button>
|
| 284 | <a href="#" slot="option" style="color: red;">Delete</a>
|
| 285 | </zui-button-dropdown>
|
| 286 | </zui-button-group>
|
| 287 |
|
| 288 | <hr />
|
| 289 |
|
| 290 | <zui-button-group>
|
| 291 | <zui-button>
|
| 292 | <zui-icon icon="zui-download"></zui-icon>
|
| 293 | Download
|
| 294 | </zui-button>
|
| 295 | <zui-button>
|
| 296 | <zui-icon icon="zui-mail"></zui-icon>
|
| 297 | Email
|
| 298 | </zui-button>
|
| 299 | <zui-button-dropdown>
|
| 300 | <zui-icon icon="zui-share" style="margin-right: 5px;"></zui-icon>
|
| 301 | <span>Share</span>
|
| 302 | <button slot="option">Facebook</button>
|
| 303 | <button slot="option">LinkedIn</button>
|
| 304 | <button slot="option">Portal</button>
|
| 305 | </zui-button-dropdown>
|
| 306 | <zui-button-dropdown icon>
|
| 307 | <zui-icon icon="zui-more"></zui-icon>
|
| 308 | <button slot="option">Update</button>
|
| 309 | <button slot="option">Print</button>
|
| 310 | <button slot="option">Email</button>
|
| 311 | <a href="#" slot="option" style="color: red;">Delete</a>
|
| 312 | </zui-button-dropdown>
|
| 313 | </zui-button-group>
|
| 314 | <script>
|
| 315 | document.getElementById("dialogOpen").addEventListener("click", () => {
|
| 316 | const dialog = document.getElementById("dialog");
|
| 317 | dialog.open();
|
| 318 | });
|
| 319 | </script>
|
| 320 | </div>
|
| 321 | <div class="tabbed-page">
|
| 322 | <h2>Wells</h2>
|
| 323 | <zui-well type="info">Employees must sign their own enrollment forms.</zui-well>
|
| 324 | <zui-well type="warning"
|
| 325 | >Make sure you review your enrollment form for accuracy before signing and sending to your
|
| 326 | administrator.</zui-well
|
| 327 | >
|
| 328 | <zui-well type="error"
|
| 329 | >Please edit the statement details to not match another carrier statement.
|
| 330 | </zui-well>
|
| 331 | </div>
|
| 332 | <div class="tabbed-page">
|
| 333 | <h2>Table</h2>
|
| 334 | <zui-table columns="6">
|
| 335 | <zui-table-row header>
|
| 336 | <zui-table-cell>Name</zui-table-cell>
|
| 337 | <zui-table-cell>Title</zui-table-cell>
|
| 338 | <zui-table-cell>Born</zui-table-cell>
|
| 339 | <zui-table-cell>Died</zui-table-cell>
|
| 340 | <zui-table-cell>Age</zui-table-cell>
|
| 341 | <zui-table-cell>Action</zui-table-cell>
|
| 342 | </zui-table-row>
|
| 343 | <zui-table-row>
|
| 344 | <zui-table-cell>Paulus Atreides</zui-table-cell>
|
| 345 | <zui-table-cell>Old Duke</zui-table-cell>
|
| 346 | <zui-table-cell>10,089 A.G.</zui-table-cell>
|
| 347 | <zui-table-cell>10,156 A.G.</zui-table-cell>
|
| 348 | <zui-table-cell>67 years old</zui-table-cell>
|
| 349 | <zui-table-cell action>
|
| 350 | <zui-button type="secondary">Betray</zui-button>
|
| 351 | </zui-table-cell>
|
| 352 | </zui-table-row>
|
| 353 | <zui-table-row>
|
| 354 | <zui-table-cell>Leto Atreides I</zui-table-cell>
|
| 355 | <zui-table-cell>Red Duke</zui-table-cell>
|
| 356 | <zui-table-cell>10,140 A.G.</zui-table-cell>
|
| 357 | <zui-table-cell>10,191 A.G.</zui-table-cell>
|
| 358 | <zui-table-cell>51 years old</zui-table-cell>
|
| 359 | <zui-table-cell action>
|
| 360 | <zui-button type="secondary">Betray</zui-button>
|
| 361 | </zui-table-cell>
|
| 362 | </zui-table-row>
|
| 363 | <zui-table-row>
|
| 364 | <zui-table-cell>Paul Atreides</zui-table-cell>
|
| 365 | <zui-table-cell>Padishah Emperor</zui-table-cell>
|
| 366 | <zui-table-cell>10,176 A.G.</zui-table-cell>
|
| 367 | <zui-table-cell>10,219 A.G.</zui-table-cell>
|
| 368 | <zui-table-cell>43 years old</zui-table-cell>
|
| 369 | <zui-table-cell action>
|
| 370 | <zui-button type="secondary">Betray</zui-button>
|
| 371 | </zui-table-cell>
|
| 372 | </zui-table-row>
|
| 373 | <zui-table-row>
|
| 374 | <zui-table-cell>Alia Atreides</zui-table-cell>
|
| 375 | <zui-table-cell>Imperial Regent</zui-table-cell>
|
| 376 | <zui-table-cell>10,191 A.G.</zui-table-cell>
|
| 377 | <zui-table-cell>10,219 A.G.</zui-table-cell>
|
| 378 | <zui-table-cell>28 years old</zui-table-cell>
|
| 379 | <zui-table-cell action>
|
| 380 | <zui-button type="secondary">Betray</zui-button>
|
| 381 | </zui-table-cell>
|
| 382 | </zui-table-row>
|
| 383 | <zui-table-row>
|
| 384 | <zui-table-cell>Leto Atreides II</zui-table-cell>
|
| 385 | <zui-table-cell>God Emperor</zui-table-cell>
|
| 386 | <zui-table-cell>10,207 A.G.</zui-table-cell>
|
| 387 | <zui-table-cell>13,728 A.G.</zui-table-cell>
|
| 388 | <zui-table-cell>3,521 years old</zui-table-cell>
|
| 389 | <zui-table-cell action>
|
| 390 | <zui-button type="secondary">Betray</zui-button>
|
| 391 | </zui-table-cell>
|
| 392 | </zui-table-row>
|
| 393 | <zui-table-row summary>
|
| 394 | <zui-table-cell span="6" style="text-align: right;">
|
| 395 | Average lifespan: 742 years
|
| 396 | </zui-table-cell>
|
| 397 | </zui-table-row>
|
| 398 | </zui-table>
|
| 399 | </div>
|
| 400 | <div class="tabbed-page">
|
| 401 | <h2>Dialog</h2>
|
| 402 | <zui-button id="openDialogBtn">Open dialog</zui-button>
|
| 403 | <zui-button id="openGiantDialogBtn">Open giant dialog</zui-button>
|
| 404 | </div>
|
| 405 | </section>
|
| 406 | </div>
|
| 407 | </zui-shell-content>
|
| 408 | <zui-shell-footer></zui-shell-footer>
|
| 409 | </zui-shell>
|
| 410 |
|
| 411 | <zui-dialog id="dialog">
|
| 412 | <h1 slot="header">Default dialog (max-width: 100%)</h1>
|
| 413 | <div slot="content">
|
| 414 | <p>I saw what you did to my stylized modal Julie, stop hiding the secrets from everyone.</p>
|
| 415 | This is a default dialog.
|
| 416 | <p>Content size determines width but it does not automatically span full width.</p>
|
| 417 | </div>
|
| 418 | <div slot="footer">
|
| 419 | <zui-button dialog-confirm>
|
| 420 | Ok
|
| 421 | </zui-button>
|
| 422 | <zui-button type="link" dialog-close>
|
| 423 | Cancel
|
| 424 | </zui-button>
|
| 425 | </div>
|
| 426 | </zui-dialog>
|
| 427 |
|
| 428 | <zui-dialog id="giantDialog">
|
| 429 | <h1 slot="header">Big boi scrolling modal, Baby.</h1>
|
| 430 | <div slot="content">
|
| 431 | <p><b>We should put the cool scroll bar in here.</b></p>
|
| 432 | <p>
|
| 433 | Yo, VIP, let's kick it!<br />
|
| 434 | Ice ice baby<br />
|
| 435 | Ice ice baby<br />
|
| 436 | All right stop<br />
|
| 437 | Collaborate and listen<br />
|
| 438 | Ice is back with my brand new invention<br />
|
| 439 | Something grabs a hold of me tightly<br />
|
| 440 | Then I flow that a harpoon daily and nightly<br />
|
| 441 | Will it ever stop?<br />
|
| 442 | Yo, I don't know<br />
|
| 443 | Turn off the lights and I'll glow<br />
|
| 444 | To the extreme, I rock a mic like a vandal<br />
|
| 445 | Light up a stage and wax a chump like a candle<br />
|
| 446 | Dance <br />
|
| 447 | Bum rush the speaker that booms<br />
|
| 448 | I'm killin' your brain like a poisonous mushroom<br />
|
| 449 | Deadly, when I play a dope melody<br />
|
| 450 | Anything less that the best is a felony<br />
|
| 451 | Love it or leave it<br />
|
| 452 | You better gain way<br />
|
| 453 | You better hit bull's eye<br />
|
| 454 | The kid don't play<br />
|
| 455 | If there was a problem<br />
|
| 456 | Yo, I'll solve it<br />
|
| 457 | Check out the hook while my DJ revolves it<br />
|
| 458 | Ice ice baby Vanilla<br />
|
| 459 | Ice ice baby Vanilla<br />
|
| 460 | Ice ice baby Vanilla<br />
|
| 461 | Ice ice baby Vanilla<br />
|
| 462 | Now that the party is jumping<br />
|
| 463 | With the bass kicked in, the fingers are pumpin'<br />
|
| 464 | Quick to the point, to the point no faking<br />
|
| 465 | I'm cooking MC's like a pound of bacon<br />
|
| 466 | Burning them if they're not quick and nimble<br />
|
| 467 | I go crazy when I hear a cymbal<br />
|
| 468 | And a hi hat with a souped up tempo<br />
|
| 469 | I'm on a roll and it's time to go solo<br />
|
| 470 | Rollin in my 5.0<br />
|
| 471 | With my ragtop down so my hair can blow<br />
|
| 472 | The girlies on standby<br />
|
| 473 | Waving just to say hi<br />
|
| 474 | Did you stop?<br />
|
| 475 | No, I just drove by<br />
|
| 476 | Kept on pursuing to the next stop<br />
|
| 477 | I busted a left and I'm heading to the next block<br />
|
| 478 | That block was dead<br />
|
| 479 | Yo so I continued to a1a Beachfront Ave<br />
|
| 480 | Girls were hot wearing less than bikinis<br />
|
| 481 | Rock man lovers driving Lamborghini<br />
|
| 482 | Jealous 'cause I'm out getting mine<br />
|
| 483 | Shay with a gauge and Vanilla with a nine<br />
|
| 484 | Ready for the chumps on the wall<br />
|
| 485 | The chumps are acting ill because they're so full of eight balls<br />
|
| 486 | Gunshots ranged out like a bell<br />
|
| 487 | I grabbed my nine<br />
|
| 488 | All I heard were shells<br />
|
| 489 | Fallin' on the concrete real fast<br />
|
| 490 | Jumped in my car, slammed on the gas<br />
|
| 491 | Bumper to bumper the avenue's packed<br />
|
| 492 | I'm tryin' to get away before the jackers jack<br />
|
| 493 | Police on the scene<br />
|
| 494 | You know what I mean<br />
|
| 495 | They passed me up, confronted all the dope fiends<br />
|
| 496 | If there was a problem<br />
|
| 497 | Yo, I'll solve it<br />
|
| 498 | Check out the hook while my DJ revolves it
|
| 499 | </p>
|
| 500 | </div>
|
| 501 | <zui-button slot="footer" type="link" dialog-close>Cancel</zui-button>
|
| 502 | <zui-button slot="footer" dialog-confirm>Ok</zui-button>
|
| 503 | </zui-dialog>
|
| 504 |
|
| 505 | <script type="module" src="./dist/bundle.js"></script>
|
| 506 | <script type="module" src="./dist/components/table.js"></script>
|
| 507 | <script>
|
| 508 | const tabEls = document.querySelectorAll("zui-tab");
|
| 509 |
|
| 510 | function setSelectedTabVisible() {
|
| 511 | const selectedTabEl = document.querySelector("zui-tabs");
|
| 512 | const selectedTabVal = selectedTabEl.getAttribute("selected");
|
| 513 | const pageTabs = Array.from(document.querySelectorAll('.tabbed-page-container > .tabbed-page'));
|
| 514 | pageTabs[Number(selectedTabVal)].classList.add('is-visible');
|
| 515 | }
|
| 516 |
|
| 517 | function handleTabClick() {
|
| 518 | setTimeout(() => {
|
| 519 | const selectedPageTab = document.querySelector('.tabbed-page-container .tabbed-page.is-visible');
|
| 520 | selectedPageTab && selectedPageTab.classList.remove('is-visible');
|
| 521 | setSelectedTabVisible();
|
| 522 | }, 1);
|
| 523 | }
|
| 524 |
|
| 525 | setSelectedTabVisible();
|
| 526 |
|
| 527 | tabEls.forEach((tab) => {
|
| 528 | tab.addEventListener("click", handleTabClick);
|
| 529 | });
|
| 530 | </script>
|
| 531 | <script defer>
|
| 532 | setTimeout(() => {
|
| 533 | const btn = document.querySelector('#openDialogBtn');
|
| 534 | const btnGiant = document.querySelector('#openGiantDialogBtn');
|
| 535 | btn.addEventListener('click', () => {
|
| 536 | document.querySelector('#dialog').open();
|
| 537 | });
|
| 538 | btnGiant.addEventListener('click', () => {
|
| 539 | document.querySelector('#giantDialog').open();
|
| 540 | });
|
| 541 | }, 200);
|
| 542 | </script>
|
| 543 | </body>
|
| 544 | </html>
|