Border radius fix, forecast example, disabled classes, tabs example, buttons example
This commit is contained in:
Vinícius Biavatti
33
examples/buttons.html
Normal file
33
examples/buttons.html
Normal file
@@ -0,0 +1,33 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="tui-bg-blue-black">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Buttons Example</title>
|
||||
<script src="../dist/tuicss.min.js"></script>
|
||||
<link rel="stylesheet" href="../dist/tuicss.min.css">
|
||||
<style>
|
||||
.tui-button {
|
||||
width: 100% !important;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<style>
|
||||
</style>
|
||||
<body>
|
||||
<div class="center" style="margin-top: 100px;">
|
||||
<div class="tui-window blue-168" style="width: 200px;">
|
||||
<fieldset class="tui-fieldset">
|
||||
<legend>Buttons</legend>
|
||||
<button class="tui-button">Button</button><br>
|
||||
<input type="button" class="tui-button" value="Input" /><br>
|
||||
<a href="#!" class="tui-button">Anchor</a><br>
|
||||
<button class="tui-button red-168">Custom</button><br>
|
||||
<button class="tui-button red-168 disabled" disabled style="margin-bottom: 5px;">Disabled</button><br>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -13,7 +13,7 @@
|
||||
|
||||
<div class="tui-window black-168 left-align">
|
||||
<fieldset class="tui-fieldset">
|
||||
<legend class="">Chart</legend>
|
||||
<legend class="">Vertical Chart</legend>
|
||||
<div class="tui-chart-vertical" style="width: 500px; height: 200px;">
|
||||
<div class="tui-chart-display">
|
||||
<div class="tui-chart-value red-168 animated" style="height: 80%;">80%</div>
|
||||
@@ -49,7 +49,7 @@
|
||||
|
||||
<div class="tui-window black-168 left-align">
|
||||
<fieldset class="tui-fieldset">
|
||||
<legend class="">Horizontal Bar Chart</legend>
|
||||
<legend class="">Horizontal Chart</legend>
|
||||
<div class="tui-chart-horizontal" style="width: 500px; height: 200px;">
|
||||
<div class="tui-chart-display">
|
||||
<div class="tui-chart-value red-168" style="width: 80%;">80%</div>
|
||||
|
||||
172
examples/forecast.html
Normal file
172
examples/forecast.html
Normal file
@@ -0,0 +1,172 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Forecast Example</title>
|
||||
<script src="../dist/tuicss.min.js"></script>
|
||||
<link rel="stylesheet" href="../dist/tuicss.min.css">
|
||||
<style>
|
||||
th, td {
|
||||
padding: 10px!important;
|
||||
border: none!important;
|
||||
}
|
||||
.tui-progress-bar {
|
||||
margin-bottom: -4px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="tui-screen-800-600 bordered black-255" style="padding: 2px;">
|
||||
<div class="red-168 full-width white-text" style="padding: 0px 10px;">
|
||||
FORECAST 1.0
|
||||
</div>
|
||||
<br>
|
||||
<table class="tui-table full-width no-border">
|
||||
<thead class="white-255-text tui-border-double orange-168-border" style="margin-bottom: 5px;">
|
||||
<tr class="left-align">
|
||||
<th>#</th>
|
||||
<th>LOCATION</th>
|
||||
<th>TEMPERATURE</th>
|
||||
<th>STATUS</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="tui-border-double orange-168-border">
|
||||
<tr>
|
||||
<td class="red-168-text">1</td>
|
||||
<td>Lisbon</td>
|
||||
<td>
|
||||
<span class="green-168-text"> 8.0</span>
|
||||
[
|
||||
<div class="tui-progress-bar inline-block tui-bg-red-black" style="width: 350px;">
|
||||
<span class="tui-progress red-255" style="width: 58%"></span>
|
||||
</div>
|
||||
]
|
||||
</td>
|
||||
<td class="blue-255-text">COLD</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="red-168-text">2</td>
|
||||
<td>Vancouver</td>
|
||||
<td>
|
||||
<span class="green-168-text"> 9.0</span>
|
||||
[
|
||||
<div class="tui-progress-bar inline-block tui-bg-red-black" style="width: 350px;">
|
||||
<span class="tui-progress red-255" style="width: 59%"></span>
|
||||
</div>
|
||||
]
|
||||
</td>
|
||||
<td class="blue-255-text">COLD</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="red-168-text">3</td>
|
||||
<td>Rio</td>
|
||||
<td>
|
||||
<span class="green-168-text">31.0</span>
|
||||
[
|
||||
<div class="tui-progress-bar inline-block tui-bg-red-black" style="width: 350px;">
|
||||
<span class="tui-progress red-255" style="width: 81%"></span>
|
||||
</div>
|
||||
]
|
||||
</td>
|
||||
<td class="yellow-255-text">WARM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="red-168-text">4</td>
|
||||
<td>Sydney</td>
|
||||
<td>
|
||||
<span class="green-168-text">22.0</span>
|
||||
[
|
||||
<div class="tui-progress-bar inline-block tui-bg-red-black" style="width: 350px;">
|
||||
<span class="tui-progress red-255" style="width: 72%"></span>
|
||||
</div>
|
||||
]
|
||||
</td>
|
||||
<td class="yellow-255-text">WARM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="red-168-text">5</td>
|
||||
<td>New York</td>
|
||||
<td>
|
||||
<span class="green-168-text"> 7.0</span>
|
||||
[
|
||||
<div class="tui-progress-bar inline-block tui-bg-red-black" style="width: 350px;">
|
||||
<span class="tui-progress red-255" style="width: 57%"></span>
|
||||
</div>
|
||||
]
|
||||
</td>
|
||||
<td class="blue-255-text">COLD</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="red-168-text">6</td>
|
||||
<td>London</td>
|
||||
<td>
|
||||
<span class="green-168-text"> 6.0</span>
|
||||
[
|
||||
<div class="tui-progress-bar inline-block tui-bg-red-black" style="width: 350px;">
|
||||
<span class="tui-progress red-255" style="width: 56%"></span>
|
||||
</div>
|
||||
]
|
||||
</td>
|
||||
<td class="blue-255-text">COLD</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="red-168-text">7</td>
|
||||
<td>Paris</td>
|
||||
<td>
|
||||
<span class="green-168-text"> 4.0</span>
|
||||
[
|
||||
<div class="tui-progress-bar inline-block tui-bg-red-black" style="width: 350px;">
|
||||
<span class="tui-progress red-255" style="width: 54%"></span>
|
||||
</div>
|
||||
]
|
||||
</td>
|
||||
<td class="cyan-255-text">VERY COLD</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="red-168-text">8</td>
|
||||
<td>Casablanca</td>
|
||||
<td>
|
||||
<span class="green-168-text">17.0</span>
|
||||
[
|
||||
<div class="tui-progress-bar inline-block tui-bg-red-black" style="width: 350px;">
|
||||
<span class="tui-progress red-255" style="width: 67%"></span>
|
||||
</div>
|
||||
]
|
||||
</td>
|
||||
<td class="green-168-text">NORMAL</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="red-168-text">9</td>
|
||||
<td>Reykjavik</td>
|
||||
<td>
|
||||
<span class="green-168-text">-1.0</span>
|
||||
[
|
||||
<div class="tui-progress-bar inline-block tui-bg-red-black" style="width: 350px;">
|
||||
<span class="tui-progress red-255" style="width: 49%"></span>
|
||||
</div>
|
||||
]
|
||||
</td>
|
||||
<td class="cyan-255-text">VERY COLD</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="purple-168 full-width white-text" style="padding: 0px 10px; margin-top: 2px;">
|
||||
<span class="red-168">HIGH</span>: Rio 31.0<br>
|
||||
<span class="cyan-168">LESS</span>: Reykjavik -1.0
|
||||
</div>
|
||||
<br>
|
||||
<div class="tui-window full-width no-shadow black">
|
||||
<fieldset class="tui-fieldset center">
|
||||
<button class="tui-button left">Previous</button>
|
||||
<span class="center">9/201 records</span>
|
||||
<button class="tui-button right">Next</button>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="red-168 full-width white-text" style="padding: 0px 10px;">
|
||||
FORECAST 1.0
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,5 +1,5 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="tui-bg-blue-black">
|
||||
<html lang="en" class="tui-bg-blue-black tui-cursor">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
@@ -8,7 +8,7 @@
|
||||
<link rel="stylesheet" href="../dist/tuicss.min.css">
|
||||
<style>
|
||||
.tui-input {
|
||||
width: 300px;
|
||||
width: 430px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -18,6 +18,7 @@
|
||||
<fieldset class="tui-fieldset">
|
||||
<legend class="center">Form</legend>
|
||||
Text.......: <input class="tui-input" value="text" /><br>
|
||||
Disabled...: <input class="tui-input disabled" disabled value="disabled" /><br>
|
||||
Number.....: <input class="tui-input" type="number" value="25" /><br>
|
||||
Password...: <input class="tui-input" type="password" value="12345" /><br>
|
||||
Color......: <input class="tui-input" type="color" value="#00FF00" /><br>
|
||||
@@ -25,6 +26,11 @@
|
||||
<option>First</option>
|
||||
<option>Second</option>
|
||||
<option>Third</option>
|
||||
<optgroup label="Group">
|
||||
<option>First</option>
|
||||
<option>Second</option>
|
||||
<option>Third</option>
|
||||
</optgroup>
|
||||
</select><br>
|
||||
Date.......: <input class="tui-input" type="date" value="2019-01-01" /><br>
|
||||
Time.......: <input class="tui-input" type="datetime-local" value="2019-01-01T12:00" />
|
||||
@@ -39,8 +45,8 @@
|
||||
<input type="checkbox" />
|
||||
<span></span>
|
||||
</label>
|
||||
<label class="tui-checkbox">Third
|
||||
<input type="checkbox" />
|
||||
<label class="tui-checkbox disabled">Disabled
|
||||
<input type="checkbox" disabled />
|
||||
<span></span>
|
||||
</label>
|
||||
</fieldset>
|
||||
@@ -55,14 +61,17 @@
|
||||
<input type="radio" name="radio" />
|
||||
<span></span>
|
||||
</label>
|
||||
<label class="tui-radio">Third
|
||||
<input type="radio" name="radio" />
|
||||
<label class="tui-radio disabled">Disabled
|
||||
<input type="radio" name="radio" disabled />
|
||||
<span></span>
|
||||
</label>
|
||||
</fieldset>
|
||||
<br>
|
||||
Textarea<br>
|
||||
<textarea class="tui-input" style="width: 100%"></textarea>
|
||||
<textarea class="tui-input" style="width: 100%">Content ...</textarea>
|
||||
<br>
|
||||
Disabled Textarea<br>
|
||||
<textarea class="tui-input disabled" disabled style="width: 100%">Disabled</textarea>
|
||||
<br>
|
||||
Multiple<br>
|
||||
<select multiple class="tui-input" style="width: 100%">
|
||||
@@ -70,6 +79,11 @@
|
||||
<option>First</option>
|
||||
<option>Second</option>
|
||||
<option>Third</option>
|
||||
<optgroup label="Group">
|
||||
<option>First</option>
|
||||
<option>Second</option>
|
||||
<option>Third</option>
|
||||
</optgroup>
|
||||
</select><br>
|
||||
File <input class="tui-input full-width" type="file" />
|
||||
</fieldset>
|
||||
|
||||
40
examples/tabs.html
Normal file
40
examples/tabs.html
Normal file
@@ -0,0 +1,40 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="tui-bg-blue-black">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Tabs Example</title>
|
||||
<script src="../dist/tuicss.min.js"></script>
|
||||
<link rel="stylesheet" href="../dist/tuicss.min.css">
|
||||
</head>
|
||||
<style>
|
||||
</style>
|
||||
<body>
|
||||
<div class="center" style="margin-top: 100px; margin-bottom: 100px;">
|
||||
<div class="tui-panel white-168" style="width: 400px;">
|
||||
<div class="tui-tabs red-168">
|
||||
<ul>
|
||||
<li><a class="tui-tab active" data-tab-content="tab-1-content">Tab 1</a></li>
|
||||
<li><a class="tui-tab" data-tab-content="tab-2-content">Tab 2</a></li>
|
||||
<li><a class="tui-tab disabled" data-tab-content="tab-3-content">Disabled</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="content black-255-text">
|
||||
<div class="tui-tab-content" id="tab-1-content">
|
||||
<h3>Content 1</h3>
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit incidunt ullam nemo ad id. Temporibus, impedit reiciendis quidem ea quasi fugiat! Illum unde eaque porro sint voluptates corporis reiciendis tempora?
|
||||
</div>
|
||||
<div class="tui-tab-content" id="tab-2-content">
|
||||
<h3>Content 2</h3>
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit incidunt ullam nemo ad id.
|
||||
</div>
|
||||
<div class="tui-tab-content" id="tab-3-content">
|
||||
<h3>Content 3</h3>
|
||||
You could not see it!
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user