Navigate

Test Elements

120 characters left

Shipping Address

Billing Address

 63

Email Type

I want to get emails about:


Chronograph

You must initialize new [data-chronograph] elements in TypeScript whenever they are added to the page.

Attributes

Model
Attribute Type Default Description
DataType DataType.Date | DataType.DateTime none Adds default attributes to input element.
ValidateAgeWithClientValidation MinimumAge none Sets maximum (latest) date that the user may select.
ChronographRange Start, End none Sets the related end or start date.
HTML
Element Attribute Type Default Description
input data-chronograph date | datetime none Whether to show calendar and/or clock. Attaches flatpickr to this element. Added automatically when using DataType and field helper.
input data-allow-input true | false true Whether to allow the user to type a value directly into the input.
input data-date-format ... n/j/Y for date
n/j/Y h:i:S K for datetime
Tokens to specify a desired date format. See the documentation and type definitions for the available tokens. Added automatically when using DataType and field helper.
input data-range-end selector none Selector for corresponding range end date. Use on the range start date.
input data-range-start date | datetime none Selector for corresponding range start date. Use on the range end date.
input data-change-callback global function none Name of a function on window to call when date/datetime changes.
input data-change-callback-parameters [any, ...] none Parameters to pass to the change callback function.
input data-... ... ... All flatpickr options can be specified using data attributes. See the documentation and type definitions for the available options.

Date Example

Demo
Model
[Display(Name = "Date of Birth")]
[DataType(DataType.Date, ErrorMessage = "Please select a valid date of birth.")]
[ValidateAgeWithClientValidation(MinimumAge = 13)]
public DateTime? DateOfBirth { get; set; }
View
@Html.TextFieldFor(m => m.DateOfBirth, new { data_change_callback = "logDate",
                                             data_change_callback_parameters = "[\"You selected:\"]" })
TypeScript
import LsChronograph from ".../Src/Components/Chronograph/Chronograph";
const cg = new LsChronograph("form");
window.logDate = (dates, value, fp, message, el) => {
    console.log(`${message} ${value}`);
};

DateTime Range Example

Demo
Model
[Display(Name = "Start Date")]
[DataType(DataType.DateTime, ErrorMessage = "Please select a valid start date.")]
[ChronographRange(End = nameof(EndDate))]
public DateTime? StartDate { get; set; }

[Display(Name = "End Date")]
[DataType(DataType.DateTime, ErrorMessage = "Please select a valid end date.")]
[ChronographRange(Start = nameof(StartDate))]
public DateTime? EndDate { get; set; }
View
@Html.TextFieldFor(m => m.StartDate)
@Html.TextFieldFor(m => m.EndDate)
TypeScript
import LsChronograph from ".../Src/Components/Chronograph/Chronograph";
const cg = new LsChronograph("form");

Hint

Tooltip to provide additional information about nearby text or fields.

Attributes

HTML
Element Attribute Type Default Description
any data-toggle hint none Display a tooltip when hovering over, clicking on, or focusing in this element.
any data-target hint none Selector for content to show in the tooltip. This will be shown if both data-target and title are given.
any title hint none Text to show in the tooltip. This will not be shown if both data-target and title are given.
any data-adjacent selector this element Element to display the tooltip next to.
any data-position top | left | right | bottom none Position of the tooltip in relation to the adjacent element.
any data-width css width value| auto none A fixed or auto width for the tooltip.
any data-prevent-default true | false true Prevent the default action when clicking on this element.

Selective

You must initialize new [data-selective] elements in TypeScript whenever they are added to the page.

Attributes

Model
Attribute Type Default Description
Selective Format, DisplayLimit, DisplayTemplate SelectiveFormat.Pill, none, none Adds default attributes to select element. Sets the value format, display limit, and template.
HTML
Element Attribute Type Default Description
select data-selective none none Attaches Select2 to this element. Added automatically when using field helper.
select class lsc-selective none
select multiple none none Whether to allow multiple options to be selected.
select data-format csv | pill pill Whether to show selection values as pills or comma-separated values.
select data-display-limit number none Maximum number of selection values to show. If more values than the limit are selected, a summary message is displayed.
select data-display-template Lodash template string ${ count } item${ count === 1 ? '' : 's' } selected Lodash template for selection value summary message.
select data-change-callback global function none Name of a function on window to call when an option is selected or removed.
select data-change-callback-parameters [any, ...] none Parameters to pass to the change callback function.
select data-close-callback global function none Name of a function on window to call when the dropdown is closed.
select data-close-callback-parameters [any, ...] none Parameters to pass to the close callback function.
select data-... ... ... All Select2 options can be specified using data attributes. See the documentation for the available options.

Single-Select Example

Demo
Model
[Display(Name = "Year")]
[Selective]
public int Year { get; set; }
public List<SelectListItem> Years { get; set; }
View
@Html.DropdownFieldFor(m => m.Year, Model.Years, "Select")
TypeScript
import LsSelective from ".../Src/Components/Selective/Selective";
const sv = new LsSelective("form");
Rendered HTML
<div class="ls-field-wrapper lsf lsf-floatlabel"><div class="ls-input-animation"><select class="ls-field-input text-filled lsf-filled valid lsf-text lsc-selective" data-selective="" id="Year--02764_36e8" name="Year" size="1"><option value="">Select</option>
<option value="2019">2019</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
<option value="2015">2015</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
</select><svg class="ls-dropdown-arrow lsf-dropdown-arrow" focusable="false" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path class="background" d="M0 0h512v512H0z" fill="#FFF"></path><path d="M352 226l-36-36-60 60-60-60-36 36 96 96z"></path></svg><label for="Year--02764_36e8">Year</label></div><div class="lsh-m-l-xs"><span class="field-validation-valid" data-valmsg-for="Year" data-valmsg-replace="true"></span></div></div>

Multi-Select Example

Demo
Model
[Display(Name = "Months")]
[Selective]
public List<int> Months { get; set; }
public List<SelectListItem> MonthNames { get; set; }
View
@Html.DropdownFieldFor(m => m.Months, Model.MonthNames)
TypeScript
import LsSelective from ".../Src/Components/Selective/Selective";
const sv = new LsSelective("form");
Rendered HTML
<div class="ls-field-wrapper lsf lsf-floatlabel"><div class="ls-input-animation"><select class="ls-field-input lsf-text lsc-selective" data-maximum-selection-length="3" data-selective="" id="Months--02764_9a5b" multiple="multiple" name="Months" size="1"><option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select><svg class="ls-dropdown-arrow lsf-dropdown-arrow" focusable="false" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path class="background" d="M0 0h512v512H0z" fill="#FFF"></path><path d="M352 226l-36-36-60 60-60-60-36 36 96 96z"></path></svg><label for="Months--02764_9a5b">Months</label></div><div class="lsh-m-l-xs"><span class="field-validation-valid" data-valmsg-for="Months" data-valmsg-replace="true"></span></div></div>

Selection Display Example

Demo
Model
[Display(Name = "Days")]
[Selective(Format = SelectiveFormat.Csv, DisplayLimit = 3, DisplayTemplate = "${count} days selected")]
public List<int> Days { get; set; }
public List<SelectListItem> DayNames { get; set; }
View
@Html.DropdownFieldFor(m => m.Days, Model.DayNames)
TypeScript
import LsSelective from ".../Src/Components/Selective/Selective";
const sv = new LsSelective("form");
Rendered HTML
<div class="ls-field-wrapper lsf lsf-floatlabel"><div class="ls-input-animation"><select class="ls-field-input lsf-text lsc-selective" data-display-limit="3" data-display-template="${count} days selected" data-format="csv" data-select-all="true" data-selective="" id="Days--02764_a487" multiple="multiple" name="Days" size="1"><option value="1">Sunday</option>
<option value="2">Monday</option>
<option value="3">Tuesday</option>
<option value="4">Wednesday</option>
<option value="5">Thursday</option>
<option value="6">Friday</option>
<option value="7">Saturday</option>
</select><svg class="ls-dropdown-arrow lsf-dropdown-arrow" focusable="false" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path class="background" d="M0 0h512v512H0z" fill="#FFF"></path><path d="M352 226l-36-36-60 60-60-60-36 36 96 96z"></path></svg><label for="Days--02764_a487">Days</label></div><div class="lsh-m-l-xs"><span class="field-validation-valid" data-valmsg-for="Days" data-valmsg-replace="true"></span></div></div>


Success

This notification is meant to inform customers of a message in a positive, unalarming way. Often this will be informative in nature, requiring only action of acceptance.

Information

This notification is meant to inform customers of a message in a positive, unalarming way. Often this will be informative in nature, rarely required action of acceptance.

Warning!

This is a warning notification that occurs when a customer needs to be informed of a situation that will affect their experience in a potentially unpleasant way. These will often require action by the user.

Error

An error notification alert informs the customer that the website or an action made by them has caused their intended action to fail. It is important not to blame the user for a mistake. These may cause action by the user.


Font Icons

arrow-back-circle
arrow-down
arrow-left
arrow-right
arrow-up
calendar
camera
cancel-circle-reverse
cancel-thick
cancel-thin
cart
cart-empty
check-mark
check-mark-circle
check-mark-reverse-circle
check-mark-thick
close-reversed
comment
compare
credit-card
cycle
download
edit
envelope
expand
eye
favorite
flag
gift
half-star
info
info-2
input-check-box-checked
input-check-box-empty
location
lock
lovely-skin-flower
menu
menu-thin
minus-circle-reverse
phone
play
plus
plus-circle-reverse
print
profile
question
quotes-left
quotes-right
radio-selected
radio-unselected
reply
search-minus
search-plus
share
shield
shield-check
social-facebook
social-google-plus
social-instagram
social-pinterest
social-rss
social-twitter
social-youtube
social-youtube2
star
star-empty
thin-menu
thin-minus
thin-plus
thumbs-down
thumbs-up
trophy-star
user
users
warning
wishlist

Font Arrows

down
left
right
up

Grid Guide

Mobile Examples

This grid system is designed to be mobile first. Any grid unit specifications left without a media query specifiation (shown below) will be attributed to mobile. To fill a single column one would simply have "ls-unit-1" for all screen sizes.

Key

These two units are 50% at the medium screen width and above and will turn to 100% width on screen sizes under 768px (md)

ls-unit-1 / ls-unit-md-1-2
ls-unit-1 / ls-unit-md-1-2

The three units below are set to have 2, 25% columns and 1, 50% column. For mobile, the 25% columns (6-24) turn to 50% and the 1, 50% column turns to 100%.

ls-unit-6-24
ls-unit-6-24
ls-unit-1 / ls-unit-12-24

Grid Units

ls-unit-0 (hide element)

ls-unit-1

ls-unit-1-2
ls-unit-1-2

ls-unit-1-3
ls-unit-2-3

ls-unit-1-4
ls-unit-3-4
ls-unit-2-4
ls-unit-2-4

ls-unit-1-5
ls-unit-4-5
ls-unit-2-5
ls-unit-3-5

ls-unit-1-6
ls-unit-5-6
ls-unit-2-6
ls-unit-4-6
ls-unit-3-6
ls-unit-3-6

1
ls-unit-7-8
ls-unit-2-8
ls-unit-6-8
ls-unit-3-8
ls-unit-5-8
ls-unit-4-8
ls-unit-4-8

1
ls-unit-11-12
ls-unit-2-12
ls-unit-10-12
ls-unit-3-12
ls-unit-9-12
ls-unit-4-12
ls-unit-8-12
ls-unit-5-12
ls-unit-7-12
ls-unit-6-12
ls-unit-6-12

1
ls-unit-23-24
2
ls-unit-22-24
3
ls-unit-21-24
ls-unit-4-24
ls-unit-20-24
ls-unit-5-24
ls-unit-19-24
ls-unit-6-24
ls-unit-18-24
ls-unit-7-24
ls-unit-17-24
ls-unit-8-24
ls-unit-16-24
ls-unit-9-24
ls-unit-15-24
ls-unit-10-24
ls-unit-14-24
ls-unit-11-24
ls-unit-13-24
ls-unit-12-24
ls-unit-12-24