YouScene: UI - YouScene Documentation

YouScene: UI

点击颜色更换主题颜色

1. 按钮元素

查看代码

				<div>
					<button type="button" class="ys-btn">默认按钮</button>
					<button type="button" class="ys-btn ys-btn-primary" style="margin-left: 20px;">主要按钮</button>
				</div>
				<div style="margin-top: 10px;">
					<button type="button" class="ys-btn is-disabled">默认禁用</button>
					<button type="button" class="ys-btn ys-btn-primary is-disabled" style="margin-left: 20px;">主要禁用</button>
				</div>
				<div style="margin-top: 10px;">
					<button type="button" class="ys-btn">
						<i class="fa fa-search"></i>
						<span>默认按钮</span>
					</button>
					<button type="button" class="ys-btn ys-btn-primary" style="margin-left: 20px;">
						<span>默认按钮</span>
						<i class="fa fa-trash"></i>
					</button>
				</div>

2. 下拉框

查看代码

				<div>
					<select class="ys-select">
					  <option value ="volvo">Volvo</option>
					  <option value ="saab">Saab</option>
					  <option value="opel">Opel</option>
					  <option value="audi">Audi</option>
					</select>
				</div>

3. 输入框

查看代码

				<div class="input" style="margin-top: 20px; width: 300px;">
					<input type="text" name="" class="ys-input">
				</div>

4. 单选框

默认单选框

主要单选框

未选中禁用

选中禁用

主要选中禁用

查看代码

			<div class="ys-radio">
		            <input type="radio" name="radio2" id="radio1">
		            <label for="radio1">
		                默认单选框
		            </label>
		        </div>
		        <div class="ys-radio ys-radio-primary" style="margin-left: 20px;">
		            <input type="radio" name="radio2" id="radio2">
		            <label for="radio2">
		                主要单选框
		            </label>
		        </div>
		        <div class="ys-radio is-disabled" style="margin-left: 20px;">
		            <input type="radio" name="radio3" id="radio3" disabled>
		            <label for="radio3">
		                未选中禁用
		            </label>
		        </div>
		        <div class="ys-radio is-disabled" style="margin-left: 20px;">
		            <input type="radio" name="radio3" id="radio3" checked disabled>
		            <label for="radio3">
		                选中禁用
		            </label>
		        </div>
		        <div class="ys-radio ys-radio-primary is-disabled" style="margin-left: 20px;">
		            <input type="radio" name="radio4" id="radio4" checked disabled>
		            <label for="radio4">
		                主要选中禁用
		            </label>
		        </div>

5. 复选框

默认复选框

主要复选框

默认未选中禁用复选框

默认选中禁用复选框

主要选中禁用复选框

查看代码

	    		    <div class="ys-checkbox" style="margin-left: 20px;">
			        <input id="checkbox1" type="checkbox">
			        <label for="checkbox1">
			            默认复选框
			        </label>
			    </div>
			    <div class="ys-checkbox ys-checkbox-primary" style="margin-left: 20px;">
			        <input id="checkbox2" type="checkbox">
			        <label for="checkbox2">
			            主要复选框
			        </label>
			    </div>
			    <div class="ys-checkbox is-disabled" style="margin-left: 20px;">
			        <input id="checkbox3" type="checkbox" disabled>
			        <label for="checkbox3">
			            默认未选中禁用复选框
			        </label>
			    </div>
			    <div class="ys-checkbox is-disabled" style="margin-left: 20px;">
			        <input id="checkbox4" type="checkbox" checked disabled>
			        <label for="checkbox4">
			            默认选中禁用复选框
			        </label>
			    </div>
			   	<div class="ys-checkbox ys-checkbox-primary is-disabled" style="margin-left: 20px;">
			        <input id="checkbox4" type="checkbox" checked disabled>
			        <label for="checkbox4">
			            主要选中禁用复选框
			        </label>
			    </div>

6. 滑块

查看代码

	    			<div class="slider" style="width: 240px;height: 10px; margin-top: 20px;">
					<input type="range" name="" min="0" max="1" value="0.5" step="0.02" class="ys-slider">	
				</div>

7. 文本气泡

默认文本气泡

默认文本气泡
默认文本气泡
默认文本气泡

主要文本气泡

主要文本气泡
主要文本气泡
主要文本气泡

查看代码

				<div class="ys-bubbleWindow" style="left: 50px; top: 80px;">
					<div class="ys-bubbleWindow-dom">
						<div class="ys-bubbleWindow-text">
							默认文本气泡
						</div>
						<div class="ys-bubbleWindow-close">×</div>
					</div>
				</div>
				<div class="ys-bubbleWindow" style="left: 200px; top: 108px;">
					<div class="ys-bubbleWindow-dom">
						<div class="ys-bubbleWindow-text">
							默认文本气泡
							<br/>
							默认文本气泡
							<br/>
							默认文本气泡
							<br/>
						</div>
						<div class="ys-bubbleWindow-close">×</div>
					</div>
				</div>
				<div class="ys-bubbleWindow ys-bubbleWindow-primary" style="left: 350px; top: 80px;">
					<div class="ys-bubbleWindow-dom">
						<div class="ys-bubbleWindow-text">
							主要文本气泡
						</div>
						<div class="ys-bubbleWindow-close">×</div>
					</div>
				</div>
				<div class="ys-bubbleWindow ys-bubbleWindow-primary" style="left: 520px; top: 108px;">
					<div class="ys-bubbleWindow-dom">
						<div class="ys-bubbleWindow-text">
							主要文本气泡
							<br/>
							主要文本气泡
							<br/>
							主要文本气泡
							<br/>
						</div>
						<div class="ys-bubbleWindow-close">×</div>
					</div>
				</div>

8. HTML气泡

默认HTML气泡

主要HTML气泡

查看代码

				<div class="ys-htmlWindow" style="left: 120px; top: 100px;">
					<div class="ys-htmlWindow-dom">
						<div class="ys-htmlWindow-html">
							<div style="width: 200px; height: 60px;">
								<span>默认HTML气泡</span>
							</div>
						</div>
						<div class="ys-htmlWindow-close">×</div>
					</div>
				</div>
				<div class="ys-htmlWindow ys-htmlWindow-primary" style="left: 400px; top: 100px;">
					<div class="ys-htmlWindow-dom">
						<div class="ys-htmlWindow-html">
							<div style="width: 200px; height: 60px;">
								<span>主要HTML气泡</span>
							</div>
						</div>
						<div class="ys-htmlWindow-close">×</div>
					</div>
				</div>

9. 弹出框

查看代码

				<div class="ys-popover" style="position:absolute; top: 40px;left: 20px;">
					<div>弹出框</div>
					<div class="ys-popover-close">×</div>
				</div>