4 changed files
WPE.App.Shared.BaseComponents | ||
Pages/ActionElement/DropDown | ||
DropDownBasic.razor + | ||
DropDownBasic.razor.css + | ||
WPE.App.Shared.BaseComponents.csproj | ||
ReadMe.md | ||
DropDownBasic.razor
/WPE.App.Shared.BaseComponents/Pages/ActionElement/DropDown/DropDownBasic.razor+66/WPE.App.Shared.BaseComponents/Pages/ActionElement/DropDown/DropDownBasic.razor
Add comment 1 Plus <div class="dropdown-container @(isOpen ? "opened" : "")">
Add comment 2 Plus <div class="dropdown" @onclick="() => isOpen = !isOpen">
Add comment 3 Plus <div class="selection">
Add comment 4 Plus @if (!string.IsNullOrEmpty(Label)) {
Add comment 5 Plus <span class="label">@Label</span>
Add comment 6 Plus }
Add comment 7 Plus <span class="value">@value</span>
Add comment 8 Plus </div>
Add comment 9 Plus <i class="chevron icon-chevron-down-7x11@(isOpen ? " rotated" : "")"></i>
Add comment 10 Plus </div>
Add comment 11 Plus @if (isOpen)
Add comment 12 Plus {
Add comment 13 Plus <div class="items" data-simplebar data-simplebar-auto-hide="false" style="max-height: @(MaxCount * 36)px">
Add comment 14 Plus <div class="items-wrapper">
Add comment 15 Plus @if (!string.IsNullOrEmpty(DefaultValue))
Add comment 16 Plus {
Add comment 17 Plus <span @onclick="() => Select(null)" class="item">@autoValue</span>
Add comment 18 Plus <span class="default-separator"></span>
Add comment 19 Plus }
Add comment 20 Plus @foreach (var v in Values)
Add comment 21 Plus {
Add comment 22 Plus <span class="item" @onclick="() => Select(v)">@v</span>
Add comment 23 Plus }
Add comment 24 Plus </div>
Add comment 25 Plus </div>
Add comment 26 Plus }
Add comment 27 Plus </div>
Add comment 28 Plus
Add comment 29 Plus @code {
Add comment 30 Plus [Parameter]
Add comment 31 Plus [EditorRequired]
Add comment 32 Plus public required IEnumerable<string> Values { get; set; }
Add comment 33 Plus
Add comment 34 Plus [Parameter]
Add comment 35 Plus public string? DefaultValue { get; set; }
Add comment 36 Plus
Add comment 37 Plus [Parameter]
Add comment 38 Plus public string? SelectedValue { get; set; }
Add comment 39 Plus
Add comment 40 Plus [Parameter]
Add comment 41 Plus public string Placeholder { get; set; } = string.Empty;
Add comment 42 Plus
Add comment 43 Plus [Parameter]
Add comment 44 Plus public string? Label { get; set; }
Add comment 45 Plus
Add comment 46 Plus [Parameter]
Add comment 47 Plus public int MaxCount { get; set; } = 5;
Add comment 48 Plus
Add comment 49 Plus [Parameter]
Add comment 50 Plus [EditorRequired]
Add comment 51 Plus public required EventCallback<string?> OnSelection { get; set; }
Add comment 52 Plus
Add comment 53 Plus [Parameter]
Add comment 54 Plus public string DefaultValueLabel { get; set; } = "Auto";
Add comment 55 Plus
Add comment 56 Plus private string value => SelectedValue == null ? DefaultValue == null ? Placeholder : autoValue : SelectedValue;
Add comment 57 Plus private bool isOpen = false;
Add comment 58 Plus private string autoValue => $"{DefaultValueLabel} ({DefaultValue})";
Add comment 59 Plus
Add comment 60 Plus private async Task Select(string? value) {
Add comment 61 Plus SelectedValue = value;
Add comment 62 Plus isOpen = false;
Add comment 63 Plus await OnSelection.InvokeAsync(value);
Add comment 64 Plus StateHasChanged();
Add comment 65 Plus }
Add comment 66 Plus }
DropDownBasic.razor.css
/WPE.App.Shared.BaseComponents/Pages/ActionElement/DropDown/DropDownBasic.razor.css+97/WPE.App.Shared.BaseComponents/Pages/ActionElement/DropDown/DropDownBasic.razor.css
Add comment 1 Plus .chevron {
Add comment 2 Plus transition: .2s ease-in-out;
Add comment 3 Plus color: var(--primaryWcag, #005929);
Add comment 4 Plus }
Add comment 5 Plus
Add comment 6 Plus .opened .dropdown {
Add comment 7 Plus border-bottom: 2px solid var(--color-black-Black-100, #000);
Add comment 8 Plus }
Add comment 9 Plus
Add comment 10 Plus .dropdown-container.opened {
Add comment 11 Plus border: none;
Add comment 12 Plus box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.12);
Add comment 13 Plus }
Add comment 14 Plus .dropdown-container {
Add comment 15 Plus width: 100%;
Add comment 16 Plus max-width: 400px;
Add comment 17 Plus border-radius: 2px;
Add comment 18 Plus border: 1px solid var(--color-grey-primary-4-grey-mid-808080100, #808080);
Add comment 19 Plus }
Add comment 20 Plus
Add comment 21 Plus .dropdown {
Add comment 22 Plus padding: 0 12px 0 12px;
Add comment 23 Plus display: flex;
Add comment 24 Plus align-items: center;
Add comment 25 Plus justify-content: space-between;
Add comment 26 Plus }
Add comment 27 Plus
Add comment 28 Plus .selection {
Add comment 29 Plus display: inline-flex;
Add comment 30 Plus height: 40px;
Add comment 31 Plus flex-direction: column;
Add comment 32 Plus align-items: flex-start;
Add comment 33 Plus justify-content: center;
Add comment 34 Plus flex-shrink: 0;
Add comment 35 Plus }
Add comment 36 Plus
Add comment 37 Plus .label {
Add comment 38 Plus color: var(--color-grey-primary-4-grey-mid-808080100, #808080);
Add comment 39 Plus font-size: 10px;
Add comment 40 Plus font-style: normal;
Add comment 41 Plus font-weight: 400;
Add comment 42 Plus line-height: 12px;
Add comment 43 Plus }
Add comment 44 Plus
Add comment 45 Plus .value {
Add comment 46 Plus color: var(--primaryWcag, #005929);
Add comment 47 Plus font-size: 14px;
Add comment 48 Plus font-style: normal;
Add comment 49 Plus font-weight: 400;
Add comment 50 Plus line-height: 20px;
Add comment 51 Plus }
Add comment 52 Plus
Add comment 53 Plus .rotated {
Add comment 54 Plus transform: rotate(180deg);
Add comment 55 Plus }
Add comment 56 Plus
Add comment 57 Plus .items {
Add comment 58 Plus border-radius: 0px 0px 2px 2px;
Add comment 59 Plus box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.07);
Add comment 60 Plus width: 100%;
Add comment 61 Plus max-width: 400px;
Add comment 62 Plus }
Add comment 63 Plus
Add comment 64 Plus .items-wrapper {
Add comment 65 Plus display: flex;
Add comment 66 Plus justify-content: space-between;
Add comment 67 Plus width: 100%;
Add comment 68 Plus flex-direction: column;
Add comment 69 Plus }
Add comment 70 Plus
Add comment 71 Plus .default-separator {
Add comment 72 Plus height: 1px;
Add comment 73 Plus background: black;
Add comment 74 Plus margin-left: 12px;
Add comment 75 Plus margin-right: 12px;
Add comment 76 Plus }
Add comment 77 Plus
Add comment 78 Plus .item {
Add comment 79 Plus display: flex;
Add comment 80 Plus padding: 8px 0px 8px 12px;
Add comment 81 Plus flex-direction: column;
Add comment 82 Plus align-items: flex-start;
Add comment 83 Plus gap: 8px;
Add comment 84 Plus align-self: stretch;
Add comment 85 Plus font-size: 14px;
Add comment 86 Plus font-style: normal;
Add comment 87 Plus font-weight: 400;
Add comment 88 Plus line-height: 20px;
Add comment 89 Plus }
Add comment 90 Plus
Add comment 91 Plus .item:hover {
Add comment 92 Plus background: var(--color-grey-secondary-26-grey-tone-f-7-f-7-f-7100, #F7F7F7);
Add comment 93 Plus }
Add comment 94 Plus
Add comment 95 Plus .item:active {
Add comment 96 Plus background: var(--color-blue-active-BLUE-ACTIVE-10, rgba(0, 102, 204, 0.10));
Add comment 97 Plus }
WPE.App.Shared.BaseComponents.csproj
/WPE.App.Shared.BaseComponents/WPE.App.Shared.BaseComponents.csproj/WPE.App.Shared.BaseComponents/WPE.App.Shared.BaseComponents.csproj