|
26 | 26 | <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet"></link>
|
27 | 27 | <link rel="shortcut icon" href="favicon.ico" />
|
28 | 28 | <style id="themelink"></style>
|
29 |
| - <link rel="stylesheet" href="./src/common/codemirror/lib/codemirror.css"> |
30 |
| - <link rel="stylesheet" href="./src/common/codemirror/theme/mbo.css"> |
31 | 29 | <link rel="stylesheet" type="text/css" href="./styles/index.css" />
|
32 |
| - <script src="./src/common/codemirror/lib/codemirror.js"></script> |
33 |
| - <script src="./src/common/codemirror/mode/javascript/javascript.js"></script> |
34 |
| - <script src="./src/common/codemirror/mode/jsx/jsx.js"></script> |
35 |
| - <script src="./src/common/codemirror/mode/xml/xml.js"></script> |
36 |
| - <script src="./src/common/codemirror/mode/css/css.js"></script> |
37 | 30 | <script>
|
38 | 31 | var orgin = location.origin;
|
39 | 32 | var baseref = location.href.split('#')[0].replace(orgin, '');
|
|
113 | 106 | </div>
|
114 | 107 | </div>
|
115 | 108 | <div class='sb-header-right sb-right sb-table'>
|
| 109 | + <div class='sb-header-item sb-table-cell sb-nextjs-wrapper sb-hide'> |
| 110 | + <a href='https://ej2.syncfusion.com/nextjs/demos' target="_blank" |
| 111 | + aria-label="Next.js Demos (Opens in a new window)"> |
| 112 | + <button id='sb-nextjs-btn' type="button" class='e-btn e-lib e-link'> |
| 113 | + <span class='sb-nextjs-text'>NEXT.JS DEMOS</span> |
| 114 | + </button> |
| 115 | + </a> |
| 116 | + </div> |
| 117 | + <div class='sb-header-item sb-table-cell sb-nextjs-mobile-wrapper sb-hide'> |
| 118 | + <a href='https://ej2.syncfusion.com/nextjs/demos' target="_blank" |
| 119 | + aria-label="Next.js Demos (Opens in a new window)"> |
| 120 | + <svg class="sb-nextjs-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 180" width="20"> |
| 121 | + <mask height="180" id="a" maskUnits="userSpaceOnUse" width="180" x="0" y="0" |
| 122 | + style="mask-type:alpha"> |
| 123 | + <circle cx="90" cy="90" r="90" /> |
| 124 | + </mask> |
| 125 | + <g mask="url(#a)"> |
| 126 | + <circle cx="90" cy="90" data-circle="true" r="90" /> |
| 127 | + <path class="sb-nextjs-pathb" d="M149.508 157.52 69.142 54H54v71.97h12.114V69.384l73.885 95.461a90 90 0 0 0 9.509-7.325" |
| 128 | + fill="url(#b)" /> |
| 129 | + <path class="sb-nextjs-pathc" fill="url(#c)" d="M115 54h12v72h-12z" /> |
| 130 | + </g> |
| 131 | + <defs> |
| 132 | + <linearGradient gradientUnits="userSpaceOnUse" id="b" x1="109" x2="144.5" y1="116.5" |
| 133 | + y2="160.5"> |
| 134 | + <stop stop-color="#fff" /> |
| 135 | + <stop offset="1" stop-color="#fff" stop-opacity="0" /> |
| 136 | + </linearGradient> |
| 137 | + <linearGradient gradientUnits="userSpaceOnUse" id="c" x1="121" x2="120.799" y1="54" |
| 138 | + y2="106.875"> |
| 139 | + <stop stop-color="#fff" /> |
| 140 | + <stop offset="1" stop-color="#fff" stop-opacity="0" /> |
| 141 | + </linearGradient> |
| 142 | + </defs> |
| 143 | + </svg> |
| 144 | + </a> |
| 145 | + </div> |
116 | 146 | <div class="sb-header-item sb-table-cell">
|
117 | 147 | <div id="header-theme-switcher" role="button" tabindex="0" class="theme-wrapper" title="Theme selection" class="theme-wrapper">
|
118 | 148 | <div id="sb-theme-text" class="sb-theme-text">
|
|
123 | 153 | </div>
|
124 | 154 | </div>
|
125 | 155 | </div>
|
| 156 | + <div class="sb-table-cell" id="dark-light-content"></div> |
| 157 | + <div class="sb-table-cell sb-theme-splitter sb-download-splitter"></div> |
126 | 158 | <div class='sb-header-item sb-table-cell sb-search-wrapper'>
|
127 | 159 | <div class='sb-search-btn' role="button" tabindex="0" aria-label="toggle sample search" id='sb-trigger-search'>
|
128 | 160 | <span class='sb-settings sb-icons sb-icon-Search' role="presentation"></span>
|
|
182 | 214 | </div>
|
183 | 215 | <div id='theme-switcher-popup' class='sb-theme-popup'>
|
184 | 216 | <ul id="themelist" class="options">
|
185 |
| - <li class="e-list" id="fluent"> |
| 217 | + <li class="e-list" id="material3"> |
186 | 218 | <span class='sb-icons sb-theme-select sb-icon-icon-selection'></span>
|
187 |
| - <span class="switch-text">Fluent</span> |
188 |
| - </li> |
189 |
| - <li class="e-list" id="fluent-dark"> |
190 |
| - <span class='sb-icons sb-theme-select sb-icon-icon-selection'></span> |
191 |
| - <span class="switch-text">Fluent Dark</span> |
| 219 | + <span class="switch-text">Material 3</span> |
192 | 220 | </li>
|
193 | 221 | <li class="e-list" id="bootstrap5">
|
194 | 222 | <span class='sb-icons sb-theme-select sb-icon-icon-selection'></span>
|
195 |
| - <span class="switch-text">Bootstrap v5</span> |
| 223 | + <span class="switch-text">Bootstrap 5</span> |
196 | 224 | </li>
|
197 |
| - <li class="e-list" id="bootstrap5-dark"> |
| 225 | + <li class="e-list" id="fluent2"> |
198 | 226 | <span class='sb-icons sb-theme-select sb-icon-icon-selection'></span>
|
199 |
| - <span class="switch-text">Bootstrap v5 dark</span> |
| 227 | + <span class="switch-text">Fluent 2</span> |
200 | 228 | </li>
|
201 | 229 | <li class="e-list" id="tailwind">
|
202 |
| - <span class='sb-icons sb-theme-select sb-icon-icon-selection'></span> |
203 |
| - <span class="switch-text">Tailwind CSS</span> |
204 |
| - </li> |
205 |
| - <li class="e-list" id="tailwind-dark"> |
206 |
| - <span class='sb-icons sb-theme-select sb-icon-icon-selection'></span> |
207 |
| - <span class="switch-text">Tailwind CSS Dark</span> |
208 |
| - </li> |
209 |
| - <li class='e-list' id="material"> |
210 |
| - <span class='sb-icons sb-theme-select sb-icon-icon-selection'></span> |
211 |
| - <span class="switch-text">Material</span> |
212 |
| - </li> |
213 |
| - <li class="e-list" id="material-dark"> |
214 |
| - <span class='sb-icons sb-theme-select sb-icon-icon-selection'></span> |
215 |
| - <span class="switch-text">Material Dark</span> |
216 |
| - </li> |
217 |
| - <li class='active' id="material3"> |
218 |
| - <span class='sb-icons sb-theme-select sb-icon-icon-selection'></span> |
219 |
| - <span class="switch-text">Material 3</span> |
220 |
| - </li> |
221 |
| - <li class="e-list" id="material3-dark"> |
222 | 230 | <span class='sb-icons sb-theme-select sb-icon-icon-selection'></span>
|
223 |
| - <span class="switch-text">Material 3 Dark</span> |
224 |
| - </li> |
225 |
| - <li id="fabric"> |
226 |
| - <span class='sb-icons sb-theme-select sb-icon-icon-selection'></span> |
227 |
| - <span class="switch-text">Fabric</span> |
228 |
| - </li> |
229 |
| - <li class="e-list" id="fabric-dark"> |
230 |
| - <span class='sb-icons sb-theme-select sb-icon-icon-selection'></span> |
231 |
| - <span class="switch-text">Fabric Dark</span> |
232 |
| - </li> |
233 |
| - <li class="e-list" id="bootstrap4"> |
234 |
| - <span class='sb-icons sb-theme-select sb-icon-icon-selection'></span> |
235 |
| - <span class="switch-text">Bootstrap v4</span> |
236 |
| - </li> |
237 |
| - <li class="e-list" id="bootstrap"> |
238 |
| - <span class='sb-icons sb-theme-select sb-icon-icon-selection'></span> |
239 |
| - <span class="switch-text">Bootstrap</span> |
240 |
| - </li> |
241 |
| - <li class="e-list" id="bootstrap-dark"> |
242 |
| - <span class='sb-icons sb-theme-select sb-icon-icon-selection'></span> |
243 |
| - <span class="switch-text">Bootstrap Dark</span> |
244 |
| - </li> |
| 231 | + <span class="switch-text">Tailwind CSS</span> |
| 232 | + </li> |
245 | 233 | <li class="e-list" id="highcontrast">
|
246 | 234 | <span class='sb-icons sb-theme-select sb-icon-icon-selection'></span>
|
247 | 235 | <span class="switch-text">High Contrast</span>
|
248 | 236 | </li>
|
| 237 | + <li class="e-list" id="fluent"> |
| 238 | + <span class='sb-icons sb-theme-select sb-icon-icon-selection'></span> |
| 239 | + <span class="switch-text">Fluent</span> |
| 240 | + </li> |
249 | 241 | <div class="sb-theme-studio"><a target="_blank" href="https://ej2.syncfusion.com/themestudio/?theme=material" aria-label="Go to Theme Studio">Go to Theme Studio</a></div>
|
250 | 242 | </ul>
|
251 | 243 | </div>
|
|
262 | 254 | </div>
|
263 | 255 | <div class='setting-content setting-theme-change'>
|
264 | 256 | <select id='sb-setting-theme' class='sb-setting-theme-select'>
|
265 |
| - <option value="fluent">Fluent</option> |
266 |
| - <option value="fluent-dark">Fluent Dark</option> |
267 |
| - <option value="bootstrap5">Bootstrap v5</option> |
268 |
| - <option value="bootstrap5-dark">Bootstrap v5 Dark</option> |
269 |
| - <option value="tailwind">Tailwind CSS</option> |
270 |
| - <option value="tailwind-dark">Tailwind CSS Dark</option> |
271 |
| - <option value="material">Material</option> |
272 |
| - <option value="material-dark">Material Dark</option> |
273 |
| - <option value="material3">Material 3</option> |
274 |
| - <option value="material3-dark">Material 3 Dark</option> |
275 |
| - <option value="fabric">Fabric</option> |
276 |
| - <option value="fabric-dark">Fabric Dark</option> |
277 |
| - <option value="bootstrap4">Bootstrap v4</option> |
278 |
| - <option value="bootstrap">Bootstrap</option> |
279 |
| - <option value="bootstrap-dark">Bootstrap Dark</option> |
| 257 | + <option value="material3">Material 3</option> |
| 258 | + <option value="bootstrap5">Bootstrap 5</option> |
| 259 | + <option value="fluent2">Fluent 2</option> |
| 260 | + <option value="tailwind">Tailwind CSS</option> |
280 | 261 | <option value="highcontrast">High Contrast</option>
|
| 262 | + <option value="fluent">Fluent</option> |
281 | 263 | </select>
|
282 | 264 | </div>
|
283 | 265 | </div>
|
|
291 | 273 | <div id='mouse' class="sb-responsive-items set-border-radious-mouse">Mouse</div>
|
292 | 274 | </div>
|
293 | 275 | </div>
|
| 276 | + <div class="sb-setting-item" id="theme-mode"> |
| 277 | + <div class="theme-mode-label"> |
| 278 | + <div class="sb-icons " id="mobile-mode-icon"></div> |
| 279 | + <div class='mode-label'>Theme Modes</div> |
| 280 | + </div> |
| 281 | + <div class="sb-theme-option"> |
| 282 | + <select id="sb-theme-mode"> |
| 283 | + <option value="Light">Light Mode</option> |
| 284 | + <option value="Dark">Dark Mode</option> |
| 285 | + </select> |
| 286 | + </div> |
| 287 | + </div> |
294 | 288 | <div class='sb-setting-item sb-setting-culture'>
|
295 | 289 | <div class='setting-label'>
|
296 | 290 | <div class='sb-icons sb-setting-icons sb-icon-Localization'></div>
|
@@ -353,25 +347,25 @@ <h1 class='sb-sample-text' role="heading" aria-level="1"></h1>
|
353 | 347 | <div id='tab-component'></div>
|
354 | 348 | <div class='description-section sb-rightpane-padding'>
|
355 | 349 | </div>
|
356 |
| - <div class="ad-wrapper"> |
357 |
| - <div id='ad-image' class="ad-img"> |
| 350 | + <div class="banner-wrapper"> |
| 351 | + <div id='ad-image' class="banner-img"> |
358 | 352 | <div class="row">
|
359 | 353 | <div class="col-sm-12">
|
360 | 354 | <div class="col-sm-12">
|
361 |
| - <div id="ad-banner-head" class="ad-header">Transform your React web apps today with Syncfusion React components</div> |
| 355 | + <div id="banner-head" class="banner-header">Transform your React web apps today with Syncfusion React components</div> |
362 | 356 | </div>
|
363 | 357 | <div class="col-sm-12 cnt-area">
|
364 | 358 | <div class="content-area">
|
365 |
| - <div class="ad-cnt-pt"> |
366 |
| - <div class="ad-cnt-icon click-icon sb-icons sb-icon-icon-selection"></div> |
| 359 | + <div class="banner-cnt-pt"> |
| 360 | + <div class="banner-cnt-icon click-icon sb-icons sb-icon-icon-selection"></div> |
367 | 361 | <div class="cnt-text">80+ high-performance and responsive UI components</div>
|
368 | 362 | </div>
|
369 |
| - <div class="ad-cnt-pt"> |
370 |
| - <div class="ad-cnt-icon click-icon sb-icons sb-icon-icon-selection"></div> |
| 363 | + <div class="banner-cnt-pt"> |
| 364 | + <div class="banner-cnt-icon click-icon sb-icons sb-icon-icon-selection"></div> |
371 | 365 | <div class="cnt-text">Dedicated support</div>
|
372 | 366 | </div>
|
373 |
| - <div class="ad-cnt-pt"> |
374 |
| - <div class="ad-cnt-icon click-icon sb-icons sb-icon-icon-selection"></div> |
| 367 | + <div class="banner-cnt-pt"> |
| 368 | + <div class="banner-cnt-icon click-icon sb-icons sb-icon-icon-selection"></div> |
375 | 369 | <div class="cnt-text">Hassle-free licensing</div>
|
376 | 370 | </div>
|
377 | 371 | </div>
|
|
0 commit comments