You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1198 lines
62 KiB
1198 lines
62 KiB
@page "/democomp"
|
|
|
|
|
|
|
|
|
|
<body class="">
|
|
<div class="top-loading-bar"></div>
|
|
<div class="document-container d-flex">
|
|
|
|
<aside>
|
|
<div class="sidebar @sidebarClosed bottombar">
|
|
|
|
<div class="sidebar-toggler">
|
|
<button @onclick="ToggleSidebar" class="btn btn-icon-alt">
|
|
<Glyph SVG="@Icons.Material.Filled.FormatIndentIncrease" class="icon-root svg-icon" />
|
|
</button>
|
|
</div>
|
|
|
|
<div class="profile-details">
|
|
<div class="avatar">
|
|
<img src="http://sys-app/core/app/sys/avatar/1733c1cf-a588-4a45-9773-dcd320bee57f/1" title="Janko Jordan">
|
|
</div>
|
|
<div class="profile-description">
|
|
<div class="profile-name">Janko Jordan</div>
|
|
<div class="profile-job">Web Designer</div>
|
|
</div>
|
|
|
|
|
|
<button class="btn btn-icon-alt" style="transform:scalex(-1)">
|
|
<Glyph SVG="@Icons.Material.Filled.Logout" class="icon-root svg-icon" />
|
|
</button>
|
|
|
|
|
|
<button @onclick="ToggleSidebar" class="btn btn-icon-alt">
|
|
<Glyph SVG="@Icons.Material.Filled.Close" class="icon-root svg-icon" />
|
|
</button>
|
|
|
|
|
|
</div>
|
|
|
|
<nav>
|
|
<ul class="navbar mt-sm-5 pt-sm-5">
|
|
<li class="navbar-item fab">
|
|
<a href="#">
|
|
<div class="navbar-leading-icon">
|
|
<Glyph SVG="@Icons.Material.Outlined.Create" class="icon-root svg-icon icon icon icon-size-md" />
|
|
</div>
|
|
<span class="navbar-link">New document</span>
|
|
</a>
|
|
<span class="navbar-tooltip">
|
|
New document
|
|
</span>
|
|
</li>
|
|
|
|
|
|
<li class="navbar-item">
|
|
<a href="#">
|
|
<div class="navbar-leading-icon">
|
|
<div class="badge-group">
|
|
<Glyph SVG="@Icons.Material.Filled.PublishedWithChanges" class="icon-root svg-icon icon icon-size-md" />
|
|
<span class="badge-content">
|
|
<span class="badge badge-top right bg-danger badge-overlap">22</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<span class="navbar-link">Tasks</span>
|
|
<span class="navbar-link navbar-link-detail">
|
|
<div class="badge-label">
|
|
22
|
|
</div>
|
|
</span>
|
|
</a>
|
|
<span class="navbar-tooltip">
|
|
Tasks
|
|
</span>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li class="navbar-item">
|
|
<a href="#">
|
|
<div class="navbar-leading-icon">
|
|
<Glyph SVG="@Icons.Material.Outlined.Notifications" class="icon-root svg-icon icon icon-size-md" />
|
|
</div>
|
|
<span class="navbar-link">Notification</span>
|
|
<span class="navbar-link navbar-link-detail">
|
|
<div class="badge-label">
|
|
22
|
|
</div>
|
|
</span>
|
|
</a>
|
|
<span class="navbar-tooltip">
|
|
Notification
|
|
</span>
|
|
</li>
|
|
|
|
<li class="navbar-item">
|
|
<a href="#">
|
|
<div class="navbar-leading-icon">
|
|
<Glyph SVG="@Icons.Material.Outlined.DateRange" class="icon-root svg-icon icon icon-size-md" />
|
|
</div>
|
|
<span class="navbar-link">Calendar</span>
|
|
<span class="navbar-link navbar-link-detail">
|
|
<div class="badge-label">
|
|
22
|
|
</div>
|
|
</span>
|
|
</a>
|
|
<span class="navbar-tooltip">
|
|
Calendar
|
|
</span>
|
|
</li>
|
|
|
|
<li class="navbar-item">
|
|
<a href="#">
|
|
<div class="navbar-leading-icon">
|
|
<Glyph SVG="@Icons.Material.Filled.Apps" class="icon-root svg-icon icon icon-size-md" />
|
|
</div>
|
|
<span class="navbar-link">Main navigation</span>
|
|
<span class="navbar-link navbar-link-detail">
|
|
<div class="badge-label">
|
|
22
|
|
</div>
|
|
</span>
|
|
</a>
|
|
<span class="navbar-tooltip">
|
|
Main navigation
|
|
</span>
|
|
</li>
|
|
<div class="sidebar-divider"></div>
|
|
</ul>
|
|
|
|
</nav>
|
|
</div>
|
|
</aside>
|
|
|
|
|
|
<main class="main @sidebarClosed @sidebarRightClosed">
|
|
|
|
|
|
|
|
<div class="appbar">
|
|
|
|
<div class="d-none d-sm-inline-block" @onclick="ToggleSidebar">
|
|
@* <button class="btn btn-icon-alt">
|
|
<Glyph SVG="@Icons.Material.Outlined.Menu" class="icon-root svg-icon" />
|
|
</button>
|
|
<span class="text"> Sidebar</span> *@
|
|
</div>
|
|
<div class="d-flex gap-5 items-center">
|
|
<div class="form-group-alt">
|
|
<div class="input-group-content">
|
|
<div class="input-leading-icon"><Glyph SVG="@Icons.Material.Filled.Search" class="icon-root svg-icon icon-size-md" /></div>
|
|
<div class="input-area">
|
|
<form>
|
|
<input id="search" type="search" placeholder="Search about recipes">
|
|
@* <input class="button" type="button" value="Search"> *@
|
|
</form>
|
|
</div>
|
|
<div class="input-cta-icon"><Glyph SVG="@Icons.Material.Filled.Close" class="icon-root svg-icon" /></div>
|
|
</div>
|
|
</div>
|
|
<div class="badge-group">
|
|
<Glyph SVG="@Icons.Material.Outlined.Notifications" class="icon-root svg-icon icon-size-md" />
|
|
<span class="badge-content badge-top right">
|
|
<span class="badge badge-top right bg-core badge-overlap">3</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<section id="buttons" class="mt-3 b-1 b-r-4 p-5">
|
|
<h2>Buttons</h2>
|
|
<p>Use custom button styles for actions in forms, dialogs, and more with support for multiple sizes,
|
|
states, and more.
|
|
</p>
|
|
<div>
|
|
<h4 class="text-core mt-5">Examples</h4>
|
|
<div class="btn-content">
|
|
<button type="button" href="#" class="btn btn-core">click me</button>
|
|
<button type="button" href="#" class="btn btn-primary">click me</button>
|
|
<button type="button" href="#" class="btn btn-secondary">click me</button>
|
|
<button type="button" href="#" class="btn btn-success">click me</button>
|
|
<button type="button" href="#" class="btn btn-info">click me</button>
|
|
<button type="button" href="#" class="btn btn-warning">click me</button>
|
|
<button type="button" href="#" class="btn btn-danger">click me</button>
|
|
<button type="button" href="#" class="btn btn-white">click me</button>
|
|
<button type="button" href="#" class="btn btn-light">click me</button>
|
|
<button type="button" href="#" class="btn btn-dark">click me</button>
|
|
</div>
|
|
</div>
|
|
<hr class="mt-4 mb-4">
|
|
<div>
|
|
<h4 class="text-core mt-5">Outline buttons</h4>
|
|
<div class="btn-content">
|
|
<button type="button" href="#" class="btn btn-outline-core">click me</button>
|
|
<button type="button" href="#" class="btn btn-outline-primary">click me</button>
|
|
<button type="button" href="#" class="btn btn-outline-secondary">click me</button>
|
|
<button type="button" href="#" class="btn btn-outline-success">click me</button>
|
|
<button type="button" href="#" class="btn btn-outline-info">click me</button>
|
|
<button type="button" href="#" class="btn btn-outline-warning">click me</button>
|
|
<button type="button" href="#" class="btn btn-outline-danger">click me</button>
|
|
<button type="button" href="#" class="btn btn-outline-white">click me</button>
|
|
<button type="button" href="#" class="btn btn-outline-light">click me</button>
|
|
<button type="button" href="#" class="btn btn-outline-dark">click me</button>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<hr class="mt-4 mb-4">
|
|
<div>
|
|
<h4 class="text-core mt-5">Link buttons</h4>
|
|
<div class="btn-content">
|
|
<button type="button" href="#" class="btn btn-link-core">click me</button>
|
|
<button type="button" href="#" class="btn btn-link-primary">click me</button>
|
|
<button type="button" href="#" class="btn btn-link-secondary">click me</button>
|
|
<button type="button" href="#" class="btn btn-link-success">click me</button>
|
|
<button type="button" href="#" class="btn btn-link-info">click me</button>
|
|
<button type="button" href="#" class="btn btn-link-warning">click me</button>
|
|
<button type="button" href="#" class="btn btn-link-danger">click me</button>
|
|
<button type="button" href="#" class="btn btn-link-white">click me</button>
|
|
<button type="button" href="#" class="btn btn-link-light">click me</button>
|
|
<button type="button" href="#" class="btn btn-link-dark">click me</button>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="mt-4 mb-4">
|
|
<div>
|
|
<h4 class="text-core mt-5">Sizes</h4>
|
|
<div class="btn-content">
|
|
<button type="button" href="#" class="btn btn-sm btn-core">small button</button>
|
|
<button type="button" href="#" class="btn btn-sm btn-secondary">small button</button>
|
|
</div>
|
|
<div class="btn-content">
|
|
<button type="button" href="#" class="btn btn-lg btn-core">large button</button>
|
|
<button type="button" href="#" class="btn btn-lg btn-secondary">large button</button>
|
|
</div>
|
|
<div class="btn-content">
|
|
<button type="button" href="#" class="btn btn-block btn-core">full width button</button>
|
|
<button type="button" href="#" class="mt-4 btn btn-block btn-secondary">full width
|
|
button</button>
|
|
</div>
|
|
</div>
|
|
<hr class="mt-4 mb-4">
|
|
<div>
|
|
<h4 class="text-core mt-5">Button states</h4>
|
|
<div class="btn-content">
|
|
<button type="button" href="#" class="btn btn-core active" aria-pressed="true">active
|
|
button</button>
|
|
<button type="button" href="#" class="btn btn-core">normal button</button>
|
|
<button type="button" href="#" class="btn btn-core disabled" aria-disabled="true">disabled
|
|
button</button>
|
|
</div>
|
|
<div class="btn-content">
|
|
<button type="button" href="#" class="btn btn-outline-core active" aria-pressed="true">active button</button>
|
|
<button type="button" href="#" class="btn btn-outline-core">normal button</button>
|
|
<button type="button" href="#" class="btn btn-outline-core disabled" aria-disabled="true">disabled
|
|
button</button>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="mt-4 mb-4">
|
|
<div>
|
|
<h4 class="text-core mt-5">Segmented Buttons</h4>
|
|
|
|
<div class="btn-content btn-segmented" role="group" aria-label="Basic example">
|
|
<button type="button" class="btn btn-primary">Left</button>
|
|
<button type="button" class="btn btn-primary">Middle</button>
|
|
<button type="button" class="btn btn-primary">Right</button>
|
|
</div>
|
|
|
|
<div class="btn-content btn-segmented" role="group" aria-label="Basic example">
|
|
<button type="button" class="btn btn-outline-primary">Left</button>
|
|
<button type="button" class="btn btn-outline-primary">Middle</button>
|
|
<button type="button" class="btn btn-outline-primary">Right</button>
|
|
</div>
|
|
|
|
<div class="btn-content btn-segmented" role="group" aria-label="Basic example">
|
|
<input type="checkbox" class="btn btn-check" id="btncheck1" autocomplete="off">
|
|
<label class="btn btn-sm btn-outline-success" for="btncheck1">Checkbox 1</label>
|
|
|
|
<input type="checkbox" class="btn btn-check" id="btncheck2" autocomplete="off">
|
|
<label class="btn btn-sm btn-outline-success" for="btncheck2">Checkbox 2</label>
|
|
|
|
<input type="checkbox" class="btn btn-check" id="btncheck3" autocomplete="off">
|
|
<label class="btn btn-sm btn-outline-success" for="btncheck3">Checkbox 3</label>
|
|
</div>
|
|
|
|
|
|
<div class="btn-content btn-segmented" role="group" aria-label="Basic example">
|
|
<input type="radio" class=" btn btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
|
|
<label class="btn btn-outline-core" for="btnradio1"><Glyph SVG="@Icons.Material.Filled.Check" class="icon-root svg-icon icon-size-md" />Radio 1</label>
|
|
|
|
<input type="radio" class="btn btn-check" name="btnradio" id="btnradio2" autocomplete="off">
|
|
<label class="btn btn-outline-core" for="btnradio2"><Glyph SVG="@Icons.Material.Filled.Check" class="icon-root svg-icon icon-size-md" />Radio 2</label>
|
|
|
|
<input type="radio" class="btn btn-check" name="btnradio" id="btnradio3" autocomplete="off">
|
|
<label class="btn btn-outline-core" for="btnradio3"><Glyph SVG="@Icons.Material.Filled.Check" class="icon-root svg-icon icon-size-md" />Radio 3</label>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<hr class="mt-4 mb-4">
|
|
<div>
|
|
<h4 class="text-core mt-5">Icon Buttons</h4>
|
|
|
|
<div class="btn-content" role="group" aria-label="Basic example">
|
|
|
|
<button aria-label="delete" type="button" class="btn btn-danger btn-icon">
|
|
<span class="icon-button-label">
|
|
<Glyph SVG="@Icons.Material.Filled.AirplanemodeActive" class="icon-root svg-icon " />
|
|
</span>
|
|
</button>
|
|
|
|
<button aria-label="delete" type="button" class="btn btn-outline-success btn-icon">
|
|
<span class="icon-button-label">
|
|
<Glyph SVG="@Icons.Material.Filled.AirplanemodeActive" class="icon-root svg-icon " />
|
|
</span>
|
|
</button>
|
|
|
|
|
|
<button class="btn btn-icon-alt btn-icon-alt-info" >
|
|
<Glyph SVG="@Icons.Material.Filled.AirplanemodeActive" class="icon-root svg-icon" />
|
|
</button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<section id="buttons" class="mt-3 b-1 b-r-4 p-5">
|
|
<h2>Radio
|
|
</h2>
|
|
<p>Radio buttons allow the user to select a single choice from a group of options.
|
|
|
|
|
|
</p>
|
|
<div>
|
|
<div class="grid grid-col-3 gap-3">
|
|
|
|
<div>
|
|
<label class="toggle-group" for="toggle-1">
|
|
<input class="toggle-input" id="toggle-1" name="toggle" type="checkbox" checked>
|
|
<div class="toggle-fill"></div>
|
|
<label for="toggle-1" class="toggle-label">Checked</label>
|
|
</label>
|
|
|
|
<label class="toggle-group" for="toggle-2">
|
|
<input class="toggle-input" id="toggle-2" name="toggle" type="checkbox">
|
|
<div class="toggle-fill"></div>
|
|
<label for="toggle-2" class="toggle-label">Unchecked</label>
|
|
</label>
|
|
|
|
<label class="toggle-group" for="toggle-3">
|
|
<input class="toggle-input" id="toggle-3" name="toggle" type="checkbox" disabled>
|
|
<div class="toggle-fill"></div>
|
|
<label for="toggle-3" class="toggle-label">Disabled</label>
|
|
</label>
|
|
|
|
</div>
|
|
|
|
@* <div>
|
|
<div class="checkbox-group">
|
|
<input id="checkbox-1" name="checkbox" type="checkbox" checked>
|
|
<label for="checkbox-1" class="checkbox-label">Checked</label>
|
|
</div>
|
|
|
|
<div class="checkbox-group">
|
|
<input id="checkbox-2" name="checkbox" type="checkbox">
|
|
<label for="checkbox-2" class="checkbox-label">Unchecked</label>
|
|
</div>
|
|
|
|
<div class="checkbox-group">
|
|
<input id="checkbox-3" name="checkbox" type="checkbox" disabled>
|
|
<label for="checkbox-3" class="checkbox-label">Checked disabled</label>
|
|
</div>
|
|
</div> *@
|
|
|
|
|
|
|
|
<div>
|
|
<label class="checkbox-group" for="checkbox-1">
|
|
<input class="checkbox-input" id="checkbox-1" name="checkbox" type="checkbox" checked>
|
|
<div class="checkbox-fill"></div>
|
|
<label for="checkbox-1" class="checkbox-label">Checked</label>
|
|
</label>
|
|
|
|
<label class="checkbox-group" for="checkbox-2">
|
|
<input class="checkbox-input" id="checkbox-2" name="checkbox" type="checkbox">
|
|
<div class="checkbox-fill"></div>
|
|
<label for="checkbox-2" class="checkbox-label">Unchecked</label>
|
|
</label>
|
|
|
|
<label class="checkbox-group" for="checkbox-3">
|
|
<input class="checkbox-input" id="checkbox-3" name="checkbox" type="checkbox" disabled>
|
|
<div class="checkbox-fill"></div>
|
|
<label for="checkbox-3" class="checkbox-label">Disabled</label>
|
|
</label>
|
|
|
|
</div>
|
|
|
|
|
|
@* <div>
|
|
<div class="radio-group">
|
|
<input id="radio-1" name="radio" type="radio" checked>
|
|
<label for="radio-1" class="radio-label">Checked</label>
|
|
</div>
|
|
|
|
<div class="radio-group">
|
|
<input id="radio-2" name="radio" type="radio">
|
|
<label for="radio-2" class="radio-label">Unchecked</label>
|
|
</div>
|
|
|
|
<div class="radio-group">
|
|
<input id="radio-3" name="radio" type="radio" disabled>
|
|
<label for="radio-3" class="radio-label">Disabled</label>
|
|
</div>
|
|
</div> *@
|
|
|
|
|
|
|
|
<div>
|
|
<label class="radio-group" for="radio-1">
|
|
<input class="radio-input" id="radio-1" name="radio" type="radio" checked>
|
|
<div class="radio-fill"></div>
|
|
<label for="radio-1" class="radio-label">Checked</label>
|
|
</label>
|
|
|
|
<label class="radio-group" for="radio-2">
|
|
<input class="radio-input" id="radio-2" name="radio" type="radio">
|
|
<div class="radio-fill"></div>
|
|
<label for="radio-2" class="radio-label">Unchecked</label>
|
|
</label>
|
|
|
|
<label class="radio-group" for="radio-3">
|
|
<input class="radio-input" id="radio-3" name="radio" type="radio" disabled>
|
|
<div class="radio-fill"></div>
|
|
<label for="radio-3" class="radio-label">Disabled</label>
|
|
</label>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="inputs" class="mt-3 b-1 b-r-4 p-5">
|
|
<h2>Input
|
|
</h2>
|
|
<p>Inputs buttons allow the user to select a single choice from a group of options.
|
|
</p>
|
|
|
|
|
|
<form>
|
|
<div class="grid grid-col-3 gap-3">
|
|
|
|
|
|
<div class="form-group error">
|
|
<input type="text" required="required" /><span class="highlight"></span><span class="bar"></span>
|
|
<label class="label-animated">Name</label>
|
|
<div class="input-helper-text">Some helping Text</div>
|
|
<div class="input-error-text">At least 6 characters required</div>
|
|
<span class="input-glyph-wraper">
|
|
<span class="input-glyph">
|
|
<span class="input-glyph button">
|
|
<Glyph SVG="@Icons.Material.Outlined.Cancel" class="icon-root svg-icon" />
|
|
</span>
|
|
<span class="input-glyph error">
|
|
<Glyph SVG="@Icons.Material.Outlined.ErrorOutline" class="icon-root svg-icon" />
|
|
</span>
|
|
</span>
|
|
</span>
|
|
</div>
|
|
|
|
|
|
<div class="form-group">
|
|
<input type="text" required="required" /><span class="highlight"></span><span class="bar"></span>
|
|
<label class="label-animated">Email</label>
|
|
<div class="input-helper-text">Some helping Text</div>
|
|
<div class="input-error-text">At least 6 characters required</div>
|
|
<span class="input-glyph-wraper">
|
|
<span class="input-glyph">
|
|
<span class="input-glyph button">
|
|
<Glyph SVG="@Icons.Material.Outlined.Cancel" class="icon-root svg-icon" />
|
|
</span>
|
|
<span class="input-glyph error">
|
|
<Glyph SVG="@Icons.Material.Outlined.ErrorOutline" class="icon-root svg-icon" />
|
|
</span>
|
|
</span>
|
|
</span>
|
|
</div>
|
|
|
|
|
|
<div class="form-group">
|
|
<input type="password" required="required" /><span class="highlight"></span><span class="bar"></span>
|
|
<label class="label-animated">Password</label>
|
|
<div class="input-helper-text">Some helping Text</div>
|
|
<div class="input-error-text">At least 6 characters required</div>
|
|
<span class="input-glyph-wraper">
|
|
<span class="input-glyph">
|
|
<span class="input-glyph button">
|
|
<Glyph SVG="@Icons.Material.Outlined.Cancel" class="icon-root svg-icon" />
|
|
</span>
|
|
<span class="input-glyph error">
|
|
<Glyph SVG="@Icons.Material.Outlined.ErrorOutline" class="icon-root svg-icon" />
|
|
</span>
|
|
</span>
|
|
</span>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<input type="number" required="required" /><span class="highlight"></span><span class="bar"></span>
|
|
<label class="label-animated">Number</label>
|
|
<div class="input-helper-text">Some helping Text</div>
|
|
<div class="input-error-text">At least 6 characters required</div>
|
|
<span class="input-glyph-wraper">
|
|
<span class="input-glyph">
|
|
<span class="input-glyph button">
|
|
<Glyph SVG="@Icons.Material.Outlined.Cancel" class="icon-root svg-icon" />
|
|
</span>
|
|
<span class="input-glyph error">
|
|
<Glyph SVG="@Icons.Material.Outlined.ErrorOutline" class="icon-root svg-icon" />
|
|
</span>
|
|
</span>
|
|
</span>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="form-group-alt" style="width:50%">
|
|
<div class="input-group-content">
|
|
<div class="input-cta-icon"><Glyph SVG="@Icons.Material.Filled.HorizontalRule" class="icon-root svg-icon icon-size-md" /></div>
|
|
<div class="input-area">
|
|
<form>
|
|
<input style="text-align:center;width:100%" id="number" type="number" placeholder="0" value="1">
|
|
</form>
|
|
</div>
|
|
<div class="input-cta-icon"><Glyph SVG="@Icons.Material.Filled.Add" class="icon-root svg-icon icon-size-md" /></div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="form-group">
|
|
<select type="textarea" required="required">
|
|
<option value="" disabled selected hidden></option>
|
|
<option value="1">Twitter </option>
|
|
<option value="2">Facebook</option>
|
|
</select>
|
|
<span class="highlight"></span><span class="bar"></span>
|
|
<label class="label-animated">Select</label>
|
|
<span class="input-glyph-wraper">
|
|
<span class="input-glyph"><Glyph SVG="@Icons.Material.Filled.ArrowDropDown" class="icon-root svg-icon icon-size-md" /></span>
|
|
</span>
|
|
</div>
|
|
|
|
|
|
<div class="form-group ">
|
|
<select type="textarea" required="required">
|
|
</select>
|
|
<span class="highlight"></span><span class="bar"></span>
|
|
<label class="label-animated">Select</label>
|
|
<div class="input-helper-text">Some helping Text</div>
|
|
<div class="input-error-text">At least 6 characters required</div>
|
|
<span class="input-glyph-wraper">
|
|
<span class="input-glyph button">
|
|
<Glyph SVG="@Icons.Material.Outlined.Cancel" class="icon-root svg-icon" />
|
|
</span>
|
|
<span class="input-glyph">
|
|
<Glyph SVG="@Icons.Material.Filled.ArrowDropDown" class="icon-root svg-icon icon-size-md" />
|
|
</span>
|
|
<span class="input-glyph error">
|
|
<Glyph SVG="@Icons.Material.Outlined.ErrorOutline" class="icon-root svg-icon" />
|
|
</span>
|
|
</span>
|
|
<div class="backdrop d-sm-none"></div>
|
|
<div class="drop-down">
|
|
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
|
|
<div class="dropdown-header">Header</div>
|
|
|
|
<a class="dropdown-item" href="#">Action</a>
|
|
<a class="dropdown-item" href="#">Another action</a>
|
|
<div class="dropdown-divider"></div>
|
|
<a class="dropdown-item" href="#">Something else here</a>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<DatePicker
|
|
CloseOnDateSelect=true
|
|
@bind-SelectedDate=@date>
|
|
</DatePicker>
|
|
@code {
|
|
DateTime date = DateTime.Today;
|
|
}
|
|
|
|
<div class="form-group">
|
|
<textarea type="textarea" rows="5" required="required"></textarea><span class="highlight"></span><span class="bar"></span>
|
|
<label class="label-animated">Message</label>
|
|
<div class="input-helper-text">Some helping Text</div>
|
|
<div class="input-error-text">At least 6 characters required</div>
|
|
<span class="input-glyph-wraper">
|
|
<span class="input-glyph">
|
|
<span class="input-glyph button">
|
|
<Glyph SVG="@Icons.Material.Outlined.Cancel" class="icon-root svg-icon" />
|
|
</span>
|
|
<span class="input-glyph error">
|
|
<Glyph SVG="@Icons.Material.Outlined.ErrorOutline" class="icon-root svg-icon" />
|
|
</span>
|
|
</span>
|
|
</span>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
<div class="btn-content">
|
|
<button type="button" href="#" class="btn btn-secondary" aria-pressed="true">Cancel</button>
|
|
<button type="button" href="#" class="btn btn-core mr-2" aria-pressed="true">Accept</button>
|
|
</div>
|
|
</form>
|
|
|
|
</section>
|
|
|
|
|
|
<hr class="mt-4 mb-4">
|
|
|
|
<h2 class="mb-2">Grid</h2>
|
|
<div class="grid test grid-col-4 gap-3">
|
|
<div class="col-span-23">1</div>
|
|
<div>2</div>
|
|
<div>3</div>
|
|
<div>4</div>
|
|
<div>5</div>
|
|
<div>6</div>
|
|
<div>7</div>
|
|
<div>8</div>
|
|
<div>9</div>
|
|
<div>10</div>
|
|
<div>11</div>
|
|
<div>12</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div>
|
|
<hr class="mt-4 mb-4">
|
|
<h2 class="mb-2"> Data Grid</h2>
|
|
<p>Data grid DENSE + COLLAPSE + SELECT</p>
|
|
|
|
|
|
<div class="chip-icon float-left" @onclick="ToggleSidebarRight"><Glyph SVG="@Icons.Material.Filled.FilterList" class="icon-root svg-icon" /></div>
|
|
<div class="horizontal-scroll-container">
|
|
|
|
<div class="chip-group">
|
|
<div class="chip-group-content">
|
|
<div class="chip-leading-icon"><Glyph SVG="@Icons.Material.Filled.Face" class="icon-root svg-icon" /></div>
|
|
<div class="chip-label">Chip label text</div>
|
|
<div class="chip-cta-icon"><Glyph SVG="@Icons.Material.Filled.Close" class="icon-root svg-icon" /></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="chip-group">
|
|
<div class="chip-group-content">
|
|
<div class="chip-leading-icon"><Glyph SVG="@Icons.Material.Filled.SortByAlpha" class="icon-root svg-icon" /></div>
|
|
<div class="chip-label">
|
|
|
|
<input type="textarea" placeholder="Sort by">
|
|
|
|
<div class="backdrop d-sm-none"></div>
|
|
<div class="drop-down">
|
|
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
|
|
<a class="dropdown-item" href="#">Date of entry</a>
|
|
<a class="dropdown-item" href="#">Product</a>
|
|
<a class="dropdown-item" href="#">Material code</a>
|
|
<a class="dropdown-item" href="#">Price</a>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="chip-cta-icon"><Glyph SVG="@Icons.Material.Filled.Upgrade" class="icon-root svg-icon" /></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="chip-group">
|
|
<div class="chip-group-content">
|
|
<div class="chip-leading-icon"> <img class="img-fluid" src="https://source.unsplash.com/random?face" /> </div>
|
|
<div class="chip-label">Chip label text</div>
|
|
<div class="chip-cta-icon"><Glyph SVG="@Icons.Material.Filled.Close" class="icon-root svg-icon" /></div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="chip-group filter"> <!-- TO DO on chip-group filter toggle class active-->
|
|
<div class="chip-group-content">
|
|
<div class="chip-leading-icon"><Glyph SVG="@Icons.Material.Filled.Check" class="icon-root svg-icon" /></div>
|
|
<div class="chip-label">Select all</div>
|
|
<div class="chip-cta-icon"><Glyph SVG="@Icons.Material.Filled.Close" class="icon-root svg-icon" /></div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="chip-group filter active"> <!-- TO DO on chip-group filter toggle class active-->
|
|
<div class="chip-group-content">
|
|
<div class="chip-leading-icon"><Glyph SVG="@Icons.Material.Filled.Check" class="icon-root svg-icon" /></div>
|
|
<div class="chip-label">Select all active</div>
|
|
<div class="chip-cta-icon"><Glyph SVG="@Icons.Material.Filled.Close" class="icon-root svg-icon" /></div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<div class="data-grid dense image select collapse mt-5">
|
|
<!--dense select collapse-->
|
|
<div class="data-grid-row-content @NavClosed">
|
|
<!--active-->
|
|
<div class="data-grid-select">
|
|
@* <label class="checkbox-group m-0" for="checkbox-S11">
|
|
<input class="checkbox-input" id="checkbox-S11" name="checkbox" type="checkbox" checked>
|
|
<div class="checkbox-fill"></div>
|
|
</label> *@
|
|
<label class="toggle-group m-0" for="toggle-s11">
|
|
<input class="toggle-input" id="toggle-s11" name="toggle" type="checkbox">
|
|
<div class="toggle-fill"></div>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="data-grid-img">
|
|
|
|
<img class="img-fluid" src="https://source.unsplash.com/random?face" />
|
|
</div>
|
|
|
|
<div class="data-grid-container">
|
|
<div class="row">
|
|
<div class="col-12 col-md-4">
|
|
<div class="text-hc">Product 1</div>
|
|
<a class="text-link text-semibold" href="#">0023 001445669 1</a>
|
|
<div class="text-small">Product serial code</div>
|
|
<div class="badge-group">
|
|
<span class="badge-label bg-core">Test</span>
|
|
<span class="badge-label bg-core">Test 1</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md-4">
|
|
<label>Material code</label>
|
|
<div class="">Material 29</div>
|
|
</div>
|
|
|
|
<div class="col-12 col-md-4 text-md-right">
|
|
<label>Price</label>
|
|
<div class="text-semibold ">77,29</div>
|
|
</div>
|
|
</div>
|
|
<div class="row collapsed @NavClosed">
|
|
<div class="col-12 col-md-4 ">
|
|
<div class="text-small">
|
|
You have successfully published ticket You have successfully published ticket Partner network on desk Connected Partner network on desk Connected
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="data-grid-collapse-cta" @onclick="ToggleNav">
|
|
<Glyph SVG="@Icons.Material.Filled.KeyboardArrowDown" class="icon-root svg-icon icon-size-md" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<section id="form-wizard" class="form-wizard mt-5">
|
|
<h3>Form wizard</h3>
|
|
|
|
|
|
<div class="form-outer">
|
|
<div class="form-step @NextSlide">
|
|
<div class="row">
|
|
<div class="col-12">Description for step 1</div>
|
|
@* <div class="col-12 col-md-6 ">
|
|
<div class="d-flex justify-flex-end gap-3">
|
|
<div class="dot active"></div>
|
|
<div class="dot"></div>
|
|
<div class="dot"></div>
|
|
<div class="dot"></div>
|
|
</div>
|
|
</div> *@
|
|
|
|
<div class="form-group col-12 col-md-6">
|
|
<input type="text" required="required" /><span class="highlight"></span><span class="bar"></span>
|
|
<label class="label-animated">Name</label>
|
|
<div class="input-helper-text">Some helping Text</div>
|
|
<div class="input-error-text">At least 6 characters required</div>
|
|
<span class="input-glyph-wraper">
|
|
<span class="input-glyph">
|
|
<span class="input-glyph button">
|
|
<Glyph SVG="@Icons.Material.Outlined.Cancel" class="icon-root svg-icon" />
|
|
</span>
|
|
<span class="input-glyph error">
|
|
<Glyph SVG="@Icons.Material.Outlined.ErrorOutline" class="icon-root svg-icon" />
|
|
</span>
|
|
</span>
|
|
</span>
|
|
</div>
|
|
|
|
<div class="form-group col-12 col-md-6">
|
|
<input type="text" required="required" /><span class="highlight"></span><span class="bar"></span>
|
|
<label class="label-animated">Surname</label>
|
|
<div class="input-helper-text">Some helping Text</div>
|
|
<div class="input-error-text">At least 6 characters required</div>
|
|
<span class="input-glyph-wraper">
|
|
<span class="input-glyph">
|
|
<span class="input-glyph button">
|
|
<Glyph SVG="@Icons.Material.Outlined.Cancel" class="icon-root svg-icon" />
|
|
</span>
|
|
<span class="input-glyph error">
|
|
<Glyph SVG="@Icons.Material.Outlined.ErrorOutline" class="icon-root svg-icon" />
|
|
</span>
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="form-step @NextSlide">
|
|
<div class="bg-info">2</div>
|
|
</div>
|
|
|
|
<div class="form-step @NextSlide">
|
|
<div class="bg-warning">3</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="btn-content justify-space-between">
|
|
<button type="button" href="#" class="btn btn-secondary" aria-pressed="true">Cancel</button>
|
|
<div class="btn-group">
|
|
<button type="button" @onclick="TogglePreviousSlide" class="btn btn-core" aria-pressed="true"><Glyph SVG="@Icons.Material.Filled.ChevronLeft" class="icon-root svg-icon" /> Back</button>
|
|
<button type="button" @onclick="ToggleNextSlide" class="btn btn-core" aria-pressed="true">Next <Glyph SVG="@Icons.Material.Filled.ChevronRight" class="icon-root svg-icon" /></button>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="dots d-flex justify-center gap-3">
|
|
<div class="dot completed"></div>
|
|
<div class="dot @NextSlide"></div>
|
|
<div class="dot"></div>
|
|
<div class="dot"></div>
|
|
</div>
|
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
<section id="card" class="mt-3 b-1 b-r-4 p-5">
|
|
<h2>Card</h2>
|
|
<p>Cards contain content and actions that relate information about a subject.</p>
|
|
|
|
<div class="grid grid-col-3 gap-3">
|
|
|
|
<div class="card @NavClosed warning border elevation-1"> <!--classes for priority (info, success, warning, danger), class for border (border), class for shadow (elevation-1)-->
|
|
|
|
<div class="card-header-cta">
|
|
<button class="btn btn-white btn-icon">
|
|
<Glyph SVG="@Icons.Material.Filled.FavoriteBorder" class="icon-root svg-icon" />
|
|
</button>
|
|
<button @onclick="ToggleNav" class="btn btn-white btn-icon collapse"> <!--optional button for toggle collapsed contnent-->
|
|
<Glyph SVG="@Icons.Material.Filled.KeyboardArrowDown" class="icon-root svg-icon" />
|
|
</button>
|
|
</div>
|
|
|
|
<div class="card-media"> <!--optional media contnent-->
|
|
<img class="img-fluid" style="height:250px" src="https://source.unsplash.com/random?face">
|
|
</div>
|
|
|
|
<div class="card-avatar"> <!--optional profile contnent-->
|
|
<img class="img-fluid" src="https://source.unsplash.com/random?face">
|
|
<div class="">
|
|
<div class="avatar-title">Profile title</div>
|
|
<div class="avatar-subhead">Profile subhead</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-content-container"> <!--main card contnent-->
|
|
|
|
<div class="card-header">
|
|
<p class="card-header-title">Card Title</p>
|
|
<p class="card-header-subhead">Card Subhead</p>
|
|
</div>
|
|
|
|
<div class="card-content">
|
|
<p class="typography typography-body2">Cards contain content and actions that relate information about a subject.</p>
|
|
</div>
|
|
|
|
<div class="collapsed @NavClosed"> <!--optional collapsed contnent-->
|
|
<div class="text-small pb-3">
|
|
You have successfully published ticket You have successfully published ticket Partner network on desk Connected Partner network on desk Connected
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-divider"></div>
|
|
|
|
<div class="card-actions justify-flex-end"> <!--optional action contnent-->
|
|
<div class="btn-content">
|
|
<button type="button" class="btn btn-sm btn-secondary" @onclick="ToggleNav">Close</button>
|
|
<button type="button" class="btn btn-sm btn-core">Understood</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
|
|
|
|
<section id="modal">
|
|
<!-- TO DO close modal on pres esc and when clicked outside the modal-->
|
|
<!-- TO DO when modal is open add class to body .scroll-disabled-->
|
|
|
|
<!-- Button trigger modal -->
|
|
<button type="button" class="btn btn-primary" @onclick="ToggleModal" data-bs-target="#staticBackdrop">
|
|
Launch backdrop modal
|
|
</button>
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade " tabindex="-1"> <!--@NavClosed-->
|
|
<div class="modal-dialog modal-dialog-scrollable modal-dialog-centered">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3 class="modal-title">Modal title</h3>
|
|
@* <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> *@
|
|
</div>
|
|
<div class="modal-body">
|
|
ssss
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" @onclick="ToggleModal">Close</button>
|
|
<button type="button" class="btn btn-core">Understood</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</section>
|
|
</main>
|
|
|
|
|
|
|
|
<aside>
|
|
<div class="sidebar @sidebarRightClosed right">
|
|
|
|
|
|
|
|
<div class="position-sticky" style="top:0">
|
|
<div class="sidebar-header text-right">
|
|
|
|
<button @onclick="ToggleSidebarRight" class="btn btn-icon-alt" style="transform:scalex(-1)">
|
|
<Glyph SVG="@Icons.Material.Filled.Close" class="icon-root svg-icon" />
|
|
</button>
|
|
|
|
</div>
|
|
<div class="scrollable">
|
|
<div class="scroll-wrapper ">
|
|
<div class="scroll-container ">
|
|
<div class="scroll-content ">
|
|
|
|
<nav>
|
|
<ul class="navbar">
|
|
|
|
|
|
<li class="navbar-header">Pick a color scheme</li>
|
|
|
|
<div class="color-picker-container">
|
|
|
|
<form class="color-picker" action="">
|
|
<fieldset>
|
|
|
|
<label for="light" class="visually-hidden">Light</label>
|
|
<input type="radio" id="light" name="theme" checked>
|
|
|
|
|
|
<label for="pink" class="visually-hidden">Pink theme</label>
|
|
<input type="radio" id="pink" name="theme">
|
|
|
|
<label for="dark" class="visually-hidden">Dark theme</label>
|
|
<input type="radio" id="dark" name="theme">
|
|
</fieldset>
|
|
</form>
|
|
|
|
</div>
|
|
<div class="sidebar-divider"></div>
|
|
<li class="navbar-header">Header</li>
|
|
|
|
<li class="navbar-item">
|
|
<a href="#">
|
|
<span class="navbar-link">Main navbar link 1</span>
|
|
<span class="navbar-link navbar-link-detail">
|
|
<div class="badge-label">
|
|
22
|
|
</div>
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li class="navbar-item">
|
|
<a href="#">
|
|
<span class="navbar-link">Main navbar link 1</span>
|
|
<span class="navbar-link navbar-link-detail">
|
|
<div class="badge-label">
|
|
22
|
|
</div>
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<div class="sidebar-divider"></div>
|
|
<li class="navbar-header">Header</li>
|
|
<form>
|
|
<div class="form-group ">
|
|
<input type="name" required="required" /><span class="highlight"></span><span class="bar"></span>
|
|
<label class="label-animated">Password</label>
|
|
<div class="input-helper-text">Some helping Text</div>
|
|
<div class="input-error-text">At least 6 characters required</div>
|
|
<span class="input-glyph-wraper">
|
|
<span class="input-glyph">
|
|
<span class="input-glyph button">
|
|
<svg class="icon-root svg-icon icon-size-md" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
|
|
@Icons.Material.Filled.Analytics
|
|
</svg>
|
|
</span>
|
|
<span class="input-glyph error">
|
|
<Glyph SVG="@Icons.Material.Outlined.ErrorOutline" class="icon-root svg-icon" />
|
|
</span>
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</form>
|
|
<div>
|
|
<div class="sidebar-divider mt-5"></div>
|
|
<li class="navbar-header">Header</li>
|
|
<div>
|
|
<label class="toggle-group reversed" for="toggle-r1">
|
|
<input class="toggle-input" id="toggle-r1" name="toggle" type="checkbox" checked>
|
|
<div class="toggle-fill"></div>
|
|
<label for="toggle-r1" class="toggle-label">Checked</label>
|
|
</label>
|
|
</div>
|
|
|
|
|
|
<div>
|
|
<label class="toggle-group reversed" for="toggle-r2">
|
|
<input class="toggle-input" id="toggle-r2" name="toggle" type="checkbox">
|
|
<div class="toggle-fill"></div>
|
|
<label for="toggle-r2" class="toggle-label">Checked</label>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</ul>
|
|
</nav>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="">test</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
<div class="snackbar-group bottom right"> <!--set position top, right, bottom, left, class show when group is visible-->
|
|
<div class="snackbar slide-in success"> <!-- Snackbars disappear automatically, classes for priority info, success, warning, danger-->
|
|
<div class="snackbar-content">
|
|
<div class="snackbar-leading-icon"><Glyph SVG="@Icons.Material.Filled.Check" class="icon-root svg-icon" /></div>
|
|
<div class="snackbar-message">Snackbar message text</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="snackbar slide-in banner"> <!-- Banners remain until dismissed by the user, or if the state that caused the banner is resolved -->
|
|
<div class="snackbar-content">
|
|
<div class="snackbar-leading-icon"><Glyph SVG="@Icons.Material.Filled.PersonOutline" class="icon-root svg-icon" /></div>
|
|
<div class="snackbar-message">
|
|
<div class="snackbar-header">
|
|
<div class="snackbar-title">Snackbar banner title</div>
|
|
<div class="snackbar-recived">17:22</div>
|
|
</div>
|
|
<div class="snackbar-label">Snackbar banner message text </div>
|
|
|
|
</div>
|
|
@* <div class="snackbar-cta-icon"><Glyph SVG="@Icons.Material.Filled.Close" class="icon-root svg-icon" /></div> *@
|
|
<div class="snackbar-cta-abs">
|
|
<button class="btn btn-white btn-icon">
|
|
<Glyph SVG="@Icons.Material.Filled.Close" class="icon-root svg-icon" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="snackbar slide-in dialog"> <!-- Dialogs block app usage until the user takes a dialog action or exits the dialog (if available) -->
|
|
<div class="snackbar-content">
|
|
<div class="snackbar-leading-icon"><Glyph SVG="@Icons.Material.Filled.WarningAmber" class="icon-root svg-icon" /></div>
|
|
<div class="snackbar-message">
|
|
<div class="snackbar-header">
|
|
<div class="snackbar-title">Snackbar dialog title</div>
|
|
<div class="snackbar-recived">17:22</div>
|
|
</div>
|
|
<div class="snackbar-label">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Obcaecati nihil totam, modi minus</div>
|
|
<div class="snackbar-action">
|
|
<div class="btn btn-secondary">Snackbar action</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-backdrop fade show"></div>
|
|
</body>
|
|
|
|
@code {
|
|
private string sidebarClosed { get; set; } = "close";
|
|
|
|
private void ToggleSidebar()
|
|
{
|
|
sidebarClosed = string.IsNullOrWhiteSpace(sidebarClosed) ? "close" : "";
|
|
}
|
|
|
|
private string sidebarRightClosed { get; set; } = "close-r";
|
|
|
|
private void ToggleSidebarRight()
|
|
{
|
|
sidebarRightClosed = string.IsNullOrWhiteSpace(sidebarRightClosed) ? "close-r" : "";
|
|
}
|
|
|
|
|
|
|
|
private string NavClosed { get; set; } = "";
|
|
|
|
private void ToggleNav()
|
|
{
|
|
NavClosed = string.IsNullOrWhiteSpace(NavClosed) ? "show" : "";
|
|
}
|
|
|
|
private string ModalShown { get; set; } = "";
|
|
|
|
private void ToggleModal()
|
|
{
|
|
ModalShown = string.IsNullOrWhiteSpace(ModalShown) ? "show" : "";
|
|
}
|
|
|
|
|
|
private string NextSlide { get; set; } = "";
|
|
|
|
private void ToggleNextSlide()
|
|
{
|
|
NextSlide = string.IsNullOrWhiteSpace(NextSlide) ? "next" : "";
|
|
}
|
|
|
|
|
|
private string PreviousSlide { get; set; } = "";
|
|
|
|
private void TogglePreviousSlide()
|
|
{
|
|
PreviousSlide = string.IsNullOrWhiteSpace(PreviousSlide) ? "previous" : "";
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|