refactor: Collapse 组件支持展开收缩文字设置

This commit is contained in:
Argo-PD 2020-04-04 12:14:35 +08:00
parent a7440d4f10
commit d6269fb96d
5 changed files with 39 additions and 8 deletions

View File

@ -3,10 +3,10 @@
<Block Title="折叠" Introduction="常用的折叠。" CodeFile="collapse.1.txt"> <Block Title="折叠" Introduction="常用的折叠。" CodeFile="collapse.1.txt">
<div class="form-inline"> <div class="form-inline">
<div class="form-group col-12"> <div class="form-group col-12">
<Collapse Title="折叠">学习让我快乐</Collapse> <Collapse>学习让我快乐</Collapse>
</div> </div>
<div class="form-group col-12"> <div class="form-group col-12">
<Collapse Color="Color.Danger" Title="折叠">学习让我进步</Collapse> <Collapse Color="Color.Danger">学习让我进步</Collapse>
</div> </div>
</div> </div>
</Block> </Block>
@ -14,7 +14,7 @@
<Block Title="IsCollapsed 是否折叠" Introduction="是否把折叠面板展开" CodeFile="collapse.2.txt"> <Block Title="IsCollapsed 是否折叠" Introduction="是否把折叠面板展开" CodeFile="collapse.2.txt">
<div class="form-inline"> <div class="form-inline">
<div class="form-group col-12"> <div class="form-group col-12">
<Collapse IsCollapsed="false" Title="展开折叠">学习让我快乐</Collapse> <Collapse IsCollapsed="false">学习让我快乐</Collapse>
</div> </div>
</div> </div>
</Block> </Block>
@ -22,7 +22,15 @@
<Block Title="IsDisabled 禁止按钮" Introduction="禁止按钮" CodeFile="collapse.3.txt"> <Block Title="IsDisabled 禁止按钮" Introduction="禁止按钮" CodeFile="collapse.3.txt">
<div class="form-inline"> <div class="form-inline">
<div class="form-group col-12"> <div class="form-group col-12">
<Collapse IsDisabled="true" IsCollapsed="false" Title="禁止按钮">学习让我快乐</Collapse> <Collapse IsDisabled="true" IsCollapsed="false">学习让我快乐</Collapse>
</div>
</div>
</Block>
<Block Title="CollapsedText|ExpandText 显示文字" Introduction="设置折叠展开后的显示文字" CodeFile="collapse.4.txt">
<div class="form-inline">
<div class="form-group col-12">
<Collapse ExpandedText="点击我折叠" CollapsedText="点击我展开">学习让我快乐</Collapse>
</div> </div>
</div> </div>
</Block> </Block>

View File

@ -80,8 +80,21 @@ namespace BootstrapBlazor.WebConsole.Pages
Type = "Size", Type = "Size",
ValueList = "None / ExtraSmall / Small / Medium / Large / ExtraLarge", ValueList = "None / ExtraSmall / Small / Medium / Large / ExtraLarge",
DefaultValue = "None" DefaultValue = "None"
},
new AttributeItem() {
Name = "CollapsedText",
Description = "折叠后显示的文字",
Type = "string",
ValueList = "",
DefaultValue = "展开"
},
new AttributeItem() {
Name = "ExpandedText",
Description = "展开后显示的文字",
Type = "string",
ValueList = "",
DefaultValue = "折叠"
} }
}; };
} }
} }

View File

@ -0,0 +1 @@
<Collapse ExpandedText="点击我折叠" CollapsedText="点击我展开">学习让我快乐</Collapse>

View File

@ -16,4 +16,3 @@
<div>我是弹窗内正文</div> <div>我是弹窗内正文</div>
</ModalBody> </ModalBody>
</Modal> </Modal>

View File

@ -48,6 +48,11 @@ namespace BootstrapBlazor.Components
/// </summary> /// </summary>
protected CollapseBody? CollapseContent { get; set; } protected CollapseBody? CollapseContent { get; set; }
/// <summary>
/// 获得 显示文字
/// </summary>
protected string? Title => IsCollapsed ? ExpandedText : CollapsedText;
/// <summary> /// <summary>
/// 获得/设置 是否禁用 /// 获得/设置 是否禁用
/// </summary> /// </summary>
@ -59,9 +64,14 @@ namespace BootstrapBlazor.Components
[Parameter] public RenderFragment? ChildContent { get; set; } [Parameter] public RenderFragment? ChildContent { get; set; }
/// <summary> /// <summary>
/// 设置值 /// 获得/设置 折叠后显示的文字
/// </summary> /// </summary>
[Parameter] public string? Title { get; set; } = "折叠"; [Parameter] public string? CollapsedText { get; set; } = "展开";
/// <summary>
/// 获得/设置 展开后显示的文字
/// </summary>
[Parameter] public string? ExpandedText { get; set; } = "折叠";
/// <summary> /// <summary>
/// 点击选择框方法 /// 点击选择框方法