Skip to content

Commit af0cdfd

Browse files
ArgoZhangArgoZhang
committed
doc: 更新 CardUpload 组件文档
1 parent 8d2cd8b commit af0cdfd

5 files changed

Lines changed: 64 additions & 23 deletions

File tree

‎src/BootstrapBlazor.Server/Components/Samples/UploadCards.razor‎

Lines changed: 54 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -15,15 +15,61 @@
1515
Introduction="@Localizer["ButtonUploadIntro"]"
1616
Name="Normal">
1717
<section ignore>
18-
<div>@((MarkupString)Localizer["UploadPreCardStyleSSR"].Value)</div>
19-
<div class="mb-3">@((MarkupString)Localizer["UploadPreCardStyleServerSide"].Value)</div>
20-
<div>@((MarkupString)Localizer["UploadPreCardStyleWasm"].Value)</div>
21-
<div>@((MarkupString)Localizer["UploadPreCardStyleWasmSide"].Value)</div>
22-
<div>@((MarkupString)Localizer["UploadPreCardStyleLink", WebsiteOption.CurrentValue.VideoLibUrl].Value)</div>
23-
<div>@((MarkupString)Localizer["UploadPreCardStyleValidation"].Value)</div>
24-
<div class="mt-3">@((MarkupString)Localizer["UploadPreCardStyleTips1"].Value)</div>
18+
<div class="row g-3">
19+
<div class="col-12 col-sm-6 col-xl-3">
20+
<BootstrapInputGroup>
21+
<BootstrapInputGroupLabel DisplayText="IsDisabled"></BootstrapInputGroupLabel>
22+
<Switch @bind-Value="@_isDisabled"></Switch>
23+
</BootstrapInputGroup>
24+
</div>
25+
<div class="col-12 col-sm-6 col-xl-3">
26+
<BootstrapInputGroup>
27+
<BootstrapInputGroupLabel DisplayText="IsMultiple"></BootstrapInputGroupLabel>
28+
<Switch @bind-Value="@_isMultiple"></Switch>
29+
</BootstrapInputGroup>
30+
</div>
31+
<div class="col-12 col-sm-6 col-xl-3">
32+
<BootstrapInputGroup>
33+
<BootstrapInputGroupLabel DisplayText="IsDirectory"></BootstrapInputGroupLabel>
34+
<Switch @bind-Value="@_isDirectory"></Switch>
35+
</BootstrapInputGroup>
36+
</div>
37+
<div class="col-12 col-sm-6 col-xl-3">
38+
<BootstrapInputGroup>
39+
<BootstrapInputGroupLabel DisplayText="IsUploadButtonAtFirst"></BootstrapInputGroupLabel>
40+
<Switch @bind-Value="@_isUploadButtonAtFirst"></Switch>
41+
</BootstrapInputGroup>
42+
</div>
43+
<div class="col-12 col-sm-6 col-xl-3">
44+
<BootstrapInputGroup>
45+
<BootstrapInputGroupLabel DisplayText="ShowProgress"></BootstrapInputGroupLabel>
46+
<Switch @bind-Value="@_showProgress"></Switch>
47+
</BootstrapInputGroup>
48+
</div>
49+
<div class="col-12 col-sm-6 col-xl-3">
50+
<BootstrapInputGroup>
51+
<BootstrapInputGroupLabel DisplayText="ShowDeleteButton"></BootstrapInputGroupLabel>
52+
<Switch @bind-Value="@_showDeleteButton"></Switch>
53+
</BootstrapInputGroup>
54+
</div>
55+
<div class="col-12 col-sm-6 col-xl-3">
56+
<BootstrapInputGroup>
57+
<BootstrapInputGroupLabel DisplayText="ShowZoomButton"></BootstrapInputGroupLabel>
58+
<Switch @bind-Value="@_showZoomButton"></Switch>
59+
</BootstrapInputGroup>
60+
</div>
61+
<div class="col-12 col-sm-6 col-xl-3">
62+
<BootstrapInputGroup>
63+
<BootstrapInputGroupLabel DisplayText="ShowDownloadButton"></BootstrapInputGroupLabel>
64+
<Switch @bind-Value="@_showDownloadButton"></Switch>
65+
</BootstrapInputGroup>
66+
</div>
67+
</div>
2568
</section>
26-
<CardUpload TValue="string" IsMultiple="true" ShowProgress="true" OnChange="@OnCardUpload"></CardUpload>
69+
<CardUpload TValue="string" IsMultiple="@_isMultiple" IsDirectory="@_isDirectory"
70+
IsDisabled="@_isDisabled" IsUploadButtonAtFirst="@_isUploadButtonAtFirst"
71+
ShowProgress="@_showProgress" ShowDeletedButton="@_showDeleteButton"
72+
ShowDownloadButton="@_showDownloadButton" ShowZoomButton="@_showZoomButton" OnChange="@OnCardUpload"></CardUpload>
2773
</DemoBlock>
2874

2975
<DemoBlock Title="@Localizer["UploadFileIconTitle"]"

‎src/BootstrapBlazor.Server/Components/Samples/UploadCards.razor.cs‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,15 @@ namespace BootstrapBlazor.Server.Components.Samples;
1212
/// </summary>
1313
public partial class UploadCards : IDisposable
1414
{
15+
private bool _isMultiple = true;
16+
private bool _isDirectory = false;
17+
private bool _isDisabled = false;
18+
private bool _isUploadButtonAtFirst = false;
19+
private bool _showProgress = true;
20+
private bool _showZoomButton = true;
21+
private bool _showDeleteButton = true;
22+
private bool _showDownloadButton = true;
23+
1524
private List<UploadFile> DefaultFormatFileList { get; } =
1625
[
1726
new() { FileName = "Test.xls" },

‎src/BootstrapBlazor.Server/Locales/en-US.json‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3537,13 +3537,6 @@
35373537
"ButtonUploadIntro": "Use <code>DefaultFileList</code> to set up uploaded content",
35383538
"UploadPreCardStyleTitle": "Preview the card style",
35393539
"UploadPreCardStyleIntro": "<code>CardUpload</code> components and rendered in card-style band preview mode",
3540-
"UploadPreCardStyleSSR": "<b>SSR mode </b>",
3541-
"UploadPreCardStyleServerSide": "<code>Server Side</code> mode, you can use the <code>IWebHostEnvironment</code> injection service to get to the <code>wwwroot</code> directory and save the file to the <code>images/uploader</code>, which does not require a direct call the controller secondary of <b> MVC</b><code>SaveToFile</code> method",
3542-
"UploadPreCardStyleWasm": "<b>Wasm mode </b>",
3543-
"UploadPreCardStyleWasmSide": "It wasn't available in <code>wasm</code> mode, <code>IWebHostEnvironment</code> needed to save files to the server side by calling <code>webapi</code> interface, and so on",
3544-
"UploadPreCardStyleLink": "Interested students can view their knowledge of <code>Upload</code> components through the <code>wiki</code> in the open source repository related resources of the <a href='{0}' target='_blank'>[The portal]</a>",
3545-
"UploadPreCardStyleValidation": "In this example, server-side verification prompts the file for too much prompt when the file size exceeds <code>5MB</code>",
3546-
"UploadPreCardStyleTips1": "In this example, the <code>ShowProgress=true</code> display upload progress bar",
35473540
"UploadFileIconTitle": "The file icon",
35483541
"UploadFileIconIntro": "Icons are displayed in different file formats",
35493542
"UploadFileIconTemplateTitle": "Custom file icon",

‎src/BootstrapBlazor.Server/Locales/zh-CN.json‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3537,13 +3537,6 @@
35373537
"ButtonUploadIntro": "使用 <code>DefaultFileList</code> 设置已上传的内容",
35383538
"UploadPreCardStyleTitle": "预览卡片式",
35393539
"UploadPreCardStyleIntro": "<code>CardUpload</code> 组件，呈现为卡片式带预览模式",
3540-
"UploadPreCardStyleSSR": "<b>SSR 模式</b>",
3541-
"UploadPreCardStyleServerSide": "<code>Server Side</code> 模式中可以使用 <code>IWebHostEnvironment</code> 注入服务获取到 <code>wwwwroot</code> 目录，保存文件到 <code>images\\uploader</code> 中，此功能无需 <b>MVC</b> 的控制器辅助进行文件的保存，直接调用 <code>SaveToFile</code> 方法即可",
3542-
"UploadPreCardStyleWasm": "<b>Wasm 模式</b>",
3543-
"UploadPreCardStyleWasmSide": "<code>wasm</code> 模式中无法使用 <code>IWebHostEnvironment</code> 需要调用 <code>webapi</code> 接口等形式将文件保存到服务器端",
3544-
"UploadPreCardStyleLink": "有兴趣的同学可以通过开源仓库中的 <code>wiki</code> 文档中相关资源查看关于 <code>Upload</code> 组件的相关知识技巧 <a href='{0}' target='_blank'>[传送门]</a>",
3545-
"UploadPreCardStyleValidation": "本例中通过服务器端验证当文件大小超过 <code>5MB</code> 时，提示文件太大提示信息",
3546-
"UploadPreCardStyleTips1": "本例中设置 <code>ShowProgress=true</code> 显示上传进度条，通过设置 <code>IsMultiple=\"true\"</code> 允许一次选择多张图片上传",
35473540
"UploadFileIconTitle": "文件图标",
35483541
"UploadFileIconIntro": "不同文件格式显示的图标不同",
35493542
"UploadFileIconTemplateTitle": "自定义文件图标",

‎src/BootstrapBlazor/Components/Upload/InputUpload.razor.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -146,7 +146,7 @@
146146
}
147147

148148
.upload .upload-body.is-avatar .upload-item .upload-item-actions,
149-
.upload .upload-body.is-card .upload-item .upload-item-actions.btn-browser {
149+
.upload .upload-body.is-card .upload-item .upload-item-actions > .upload-item-plus {
150150
position: absolute;
151151
top: 0;
152152
left: 0;

0 commit comments

Comments
 (0)