209 lines
11 KiB
PHP
209 lines
11 KiB
PHP
@extends('layout.layout')
|
|
@php
|
|
$title='Input From';
|
|
$subTitle = 'Input From';
|
|
@endphp
|
|
|
|
@section('content')
|
|
|
|
<div class="row gy-4">
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h6 class="card-title mb-0">Default Inputs</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row gy-3">
|
|
<div class="col-12">
|
|
<label class="form-label">Basic Input</label>
|
|
<input type="text" name="#0" class="form-control">
|
|
</div>
|
|
<div class="col-12">
|
|
<label class="form-label">Input with Placeholder</label>
|
|
<input type="text" name="#0" class="form-control" placeholder="info@gmail.com">
|
|
</div>
|
|
<div class="col-12">
|
|
<label class="form-label">Input with Phone </label>
|
|
<input type="text" class="form-control flex-grow-1" placeholder="+1 (555) 253-08515">
|
|
</div>
|
|
<div class="col-12">
|
|
<label class="form-label">Input Date</label>
|
|
<input type="date" name="#0" class="form-control">
|
|
</div>
|
|
<div class="col-12">
|
|
<label class="form-label">Input with Payment</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text bg-base">
|
|
<img src="{{ asset('assets/images/card/payment-icon.png') }}" alt="image">
|
|
</span>
|
|
<input type="text" class="form-control flex-grow-1" placeholder="Card number">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div><!-- card end -->
|
|
<div class="card mt-24">
|
|
<div class="card-header">
|
|
<h6 class="card-title mb-0">Input Group</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row gy-3">
|
|
<div class="col-12">
|
|
<label class="form-label">Input</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text bg-base">
|
|
<iconify-icon icon="mynaui:envelope"></iconify-icon>
|
|
</span>
|
|
<input type="text" class="form-control flex-grow-1" placeholder="info@gmail.com">
|
|
</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<label class="form-label">Input</label>
|
|
<div class="input-group">
|
|
<select class="form-select input-group-text w-90-px flex-grow-0">
|
|
<option>US</option>
|
|
<option>US</option>
|
|
<option>US</option>
|
|
<option>US</option>
|
|
<option>US</option>
|
|
</select>
|
|
<input type="text" class="form-control flex-grow-1" placeholder="info@gmail.com">
|
|
</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<label class="form-label">Input</label>
|
|
<div class="input-group">
|
|
<input type="text" class="form-control flex-grow-1" placeholder="info@gmail.com">
|
|
<select class="form-select input-group-text w-90-px flex-grow-0">
|
|
<option>US</option>
|
|
<option>US</option>
|
|
<option>US</option>
|
|
<option>US</option>
|
|
<option>US</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<label class="form-label">Input</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text bg-base"> http:// </span>
|
|
<input type="text" class="form-control" placeholder="www.random.com">
|
|
</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<label class="form-label">Input</label>
|
|
<div class="input-group">
|
|
<input type="text" class="form-control" placeholder="www.random.com">
|
|
<button type="button" class="input-group-text bg-base">
|
|
<iconify-icon icon="lucide:copy"></iconify-icon> Copy
|
|
</button>
|
|
</div>
|
|
<p class="text-sm mt-1 mb-0">This is a hint text to help user.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div><!-- card end -->
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h6 class="card-title mb-0">Input Sizing</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row gy-3">
|
|
<div class="col-12">
|
|
<label class="form-label">Input Large</label>
|
|
<input type="text" name="#0" class="form-control form-control-lg" placeholder="info@gmail.com">
|
|
</div>
|
|
<div class="col-12">
|
|
<label class="form-label">Input Medium</label>
|
|
<input type="text" name="#0" class="form-control" placeholder="info@gmail.com">
|
|
</div>
|
|
<div class="col-12">
|
|
<label class="form-label">Input Small</label>
|
|
<input type="text" name="#0" class="form-control form-control-sm" placeholder="info@gmail.com">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div><!-- card end -->
|
|
<div class="card mt-24">
|
|
<div class="card-header">
|
|
<h6 class="card-title mb-0">File Input Sizing</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row gy-3">
|
|
<div class="col-12">
|
|
<label class="form-label">Large Size File Input </label>
|
|
<input class="form-control form-control-lg" name="#0" type="file">
|
|
</div>
|
|
<div class="col-12">
|
|
<label class="form-label">Medium Size File Input </label>
|
|
<input class="form-control" type="file" name="#0">
|
|
</div>
|
|
<div class="col-12">
|
|
<label class="form-label">Small Size File Input </label>
|
|
<input class="form-control form-control-sm" name="#0" type="file">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div><!-- card end -->
|
|
<div class="card mt-24">
|
|
<div class="card-header">
|
|
<h6 class="card-title mb-0">Custom Forms</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row gy-3">
|
|
<div class="col-12">
|
|
<label class="form-label">Readonly Input</label>
|
|
<input type="text" name="#0" class="form-control" placeholder="info@gmail.com" value="info@gmail.com" readonly>
|
|
</div>
|
|
<div class="col-12">
|
|
<label class="form-label">Input with Phone </label>
|
|
<div class="form-mobile-field">
|
|
<select class="form-select">
|
|
<option>US</option>
|
|
<option>US</option>
|
|
<option>US</option>
|
|
<option>US</option>
|
|
</select>
|
|
<input type="text" name="#0" class="form-control" placeholder="+1 (555) 000-0000">
|
|
</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<label class="form-label">Medium Size File Input </label>
|
|
<input class="form-control" type="file" name="#0">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="card-title mb-0">Textarea input field</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-lg-4">
|
|
<label class="form-label">Description</label>
|
|
<textarea name="#0" class="form-control" rows="4" cols="50" placeholder="Enter a description..."></textarea>
|
|
</div>
|
|
<div class="col-lg-4">
|
|
<label class="form-label">Description</label>
|
|
<textarea name="#0" class="form-control" rows="4" cols="50" placeholder="Enter a description..." readonly></textarea>
|
|
</div>
|
|
<div class="col-lg-4 was-validated">
|
|
<label class="form-label">Description</label>
|
|
<textarea class="form-control" rows="4" cols="50" placeholder="Enter a description..." required=""></textarea>
|
|
<div class="invalid-feedback">
|
|
Please enter a message in the textarea.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@endsection
|