This repository has been archived by the owner on Jan 5, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 21
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'master' into feature/component/tooltip
- Loading branch information
Showing
8 changed files
with
364 additions
and
9 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
176 changes: 176 additions & 0 deletions
176
doc/TDesign.Docs.Shared/Pages/Components/SelectPage.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,176 @@ | ||
| @page "/components/select" | ||
| <PageHeader Title="Select 选择器">用于收纳大量选项的信息录入类组件。</PageHeader> | ||
| <HighlightAlert/> | ||
|
|
||
| <LayoutContent AnchorItems="@(new[]{"示例","禁用状态","不同尺寸的选择器","自定义下拉选项的选择器","API"})"> | ||
|
|
||
| <Example Title="示例"> | ||
| <Description></Description> | ||
| <RunContent> | ||
|
|
||
| <TSpace> | ||
| <TSpaceItem> | ||
|
|
||
| <TSelect @bind-Value="Value1"> | ||
| <TSelectOption Value="1" Label="男" /> | ||
| <TSelectOption Value="2" Label="女" /> | ||
| </TSelect> | ||
| </TSpaceItem> | ||
| <TSpaceItem> | ||
|
|
||
| <TSelect @bind-Value="Value2"> | ||
| <TSelectOption Value="@("云计算")" Label="云计算" /> | ||
| <TSelectOption Value="@("RDS")" Label="RDS" /> | ||
| <TSelectOption Value="@("云存储")" Label="云存储" Disabled/> | ||
| </TSelect> | ||
| </TSpaceItem> | ||
| </TSpace> | ||
|
|
||
|
|
||
| </RunContent> | ||
| <CodeContent> | ||
| @Code.Create(@" | ||
| ```html | ||
| <TSelect bind-Value=""Value""> | ||
| <TSelectOption Value=""1"" Label=""男""/> | ||
| <TSelectOption Value=""2"" Label=""女""/> | ||
| </TSelect> | ||
|
|
||
| <TSelect bind-Value=""Value2""> | ||
| <TSelectOption Value=""云计算"" Label=""云计算"" /> | ||
| <TSelectOption Value=""RDS"" Label=""RDS"" /> | ||
| <TSelectOption Value=""云存储"" Label=""云存储"" Disabled/> | ||
| </TSelect> | ||
| ``` | ||
| ") | ||
| </CodeContent> | ||
| </Example> | ||
|
|
||
| @code{ | ||
| int Value1{ get; set; } | ||
| string Value2 { get; set; } | ||
| } | ||
|
|
||
| <Example Title="禁用状态"> | ||
| <Description></Description> | ||
| <RunContent> | ||
|
|
||
| <TSelect @bind-Value="Value1" Disabled> | ||
| <TSelectOption Value="1" Label="男" /> | ||
| <TSelectOption Value="2" Label="女" /> | ||
| </TSelect> | ||
| </RunContent> | ||
| <CodeContent> | ||
| @Code.Create(@" | ||
| ```html | ||
| <TSelect bind-Value=""Value"" Disabled> | ||
| <TSelectOption Value=""1"" Label=""男""/> | ||
| <TSelectOption Value=""2"" Label=""女""/> | ||
| </TSelect> | ||
| ``` | ||
| ") | ||
| </CodeContent> | ||
| </Example> | ||
|
|
||
|
|
||
| <Example Title="不同尺寸的选择器"> | ||
| <Description>提供大、中（默认）、小三种不同尺寸的的选择器。</Description> | ||
| <RunContent> | ||
| <TSpace> | ||
| <TSpaceItem> | ||
| <TSelect @bind-Value="Value1" Size="Size.Small"> | ||
| <TSelectOption Value="1" Label="男" /> | ||
| <TSelectOption Value="2" Label="女" /> | ||
| </TSelect> | ||
| </TSpaceItem> | ||
| <TSpaceItem> | ||
| <TSelect @bind-Value="Value1"> | ||
| <TSelectOption Value="1" Label="男" /> | ||
| <TSelectOption Value="2" Label="女" /> | ||
| </TSelect> | ||
| </TSpaceItem> | ||
| <TSpaceItem> | ||
| <TSelect @bind-Value="Value1" Size="Size.Large"> | ||
| <TSelectOption Value="1" Label="男" /> | ||
| <TSelectOption Value="2" Label="女" /> | ||
| </TSelect> | ||
| </TSpaceItem> | ||
| </TSpace> | ||
| </RunContent> | ||
| <CodeContent> | ||
| @Code.Create(@" | ||
| ```html | ||
| <TSelect bind-Value=""Value"" Size=""Size.Small""> | ||
| <TSelectOption Value=""1"" Label=""男""/> | ||
| <TSelectOption Value=""2"" Label=""女""/> | ||
| </TSelect> | ||
|
|
||
| <TSelect bind-Value=""Value"" Size=""Size.Small""> | ||
| <TSelectOption Value=""1"" Label=""男""/> | ||
| <TSelectOption Value=""2"" Label=""女""/> | ||
| </TSelect> | ||
|
|
||
| <TSelect bind-Value=""Value"" Size=""Size.Large""> | ||
| <TSelectOption Value=""1"" Label=""男""/> | ||
| <TSelectOption Value=""2"" Label=""女""/> | ||
| </TSelect> | ||
| ``` | ||
| ") | ||
| </CodeContent> | ||
| </Example> | ||
|
|
||
| <Example Title="自定义下拉选项的选择器"> | ||
| <Description></Description> | ||
| <RunContent> | ||
|
|
||
| <TSelect @bind-Value="Value1"> | ||
| <TSelectOption Value="1" Label="男" > | ||
| <div style="display:flex"> | ||
| <TImage Src="avatar.jpg" AdditionalStyle="width:24px"/> | ||
| <div style="margin-left:16px"> | ||
| 男 | ||
| </div> | ||
| </div> | ||
| </TSelectOption> | ||
| <TSelectOption Value="2" Label="女" > | ||
|
|
||
| <div style="display:flex"> | ||
| <TImage Src="avatar.jpg" AdditionalStyle="width:24px" /> | ||
| <div style="margin-left:16px"> | ||
| 女 | ||
| </div> | ||
| </div> | ||
| </TSelectOption> | ||
| </TSelect> | ||
| </RunContent> | ||
| <CodeContent> | ||
| @Code.Create(@" | ||
| ```html | ||
| <TSelect bind-Value=""Value1""> | ||
| <TSelectOption Value=""1"" Label=""男"" > | ||
| <div style=""display:flex""> | ||
| <TImage Src=""avatar.jpg"" AdditionalStyle=""width:24px""/> | ||
| <div style=""margin-left:16px""> | ||
| 男 | ||
| </div> | ||
| </div> | ||
| </TSelectOption> | ||
| <TSelectOption Value=""2"" Label=""女"" > | ||
|
|
||
| <div style=""display:flex""> | ||
| <TImage Src=""avatar.jpg"" AdditionalStyle=""width:24px"" /> | ||
| <div style=""margin-left:16px""> | ||
| 女 | ||
| </div> | ||
| </div> | ||
| </TSelectOption> | ||
| </TSelect> | ||
| ``` | ||
| ") | ||
| </CodeContent> | ||
| </Example> | ||
| <div id="API"></div> | ||
| <ComponentAPI Title="TSelect" Component="typeof(TSelect<>)" /> | ||
| <ComponentAPI Title="TSelectOption" Component="typeof(TSelectOption<>)" /> | ||
|
|
||
| </LayoutContent> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| @namespace TDesign | ||
| @inherits BlazorInputComponentBase<TValue> | ||
| @typeparam TValue | ||
|
|
||
| <TPopup @ref="RefPopup" Trigger="PopupTrigger.Click" AdditionalStyle="position:absolute"> | ||
| <ChildContent> | ||
| <div class="t-select__wrap"> | ||
| <div class="@GetCssClassString()"> | ||
| <TInputText @bind-Value="SelectedLabel" Readonly SuffixIcon="@(RefPopup.Visible?IconName.ChevronUp:IconName.ChevronDown)" AutoWidth="AutoWidth" Placeholder="@Placeholder" Disabled="Disabled" Size="Size"/> | ||
|
|
||
| </div> | ||
| </div> | ||
| </ChildContent> | ||
| <PopupContent> | ||
| <div class="t-select__dropdown-inner t-select__dropdown-inner--size-m"> | ||
| <ul class="t-select__list"> | ||
| <CascadingValue Value="this"> | ||
| @ChildContent | ||
| </CascadingValue> | ||
| </ul> | ||
| </div> | ||
| </PopupContent> | ||
| </TPopup> |
Oops, something went wrong.