From 10806ca2a4d6fbd733f5a6f55bd29aa068d0a162 Mon Sep 17 00:00:00 2001 From: liangshiwei Date: Tue, 24 Mar 2020 22:50:30 +0800 Subject: [PATCH] Translate abp-helpers document --- .../UI/AspNetCore/Tag-Helpers/Alerts.md | 80 +++++ .../UI/AspNetCore/Tag-Helpers/Buttons.md | 4 +- .../UI/AspNetCore/Tag-Helpers/Cards.md | 180 ++++++++++++ .../UI/AspNetCore/Tag-Helpers/Collapse.md | 90 ++++++ .../UI/AspNetCore/Tag-Helpers/Dropdowns.md | 93 ++++++ .../UI/AspNetCore/Tag-Helpers/Grids.md | 273 ++++++++++++++++++ .../UI/AspNetCore/Tag-Helpers/Index.md | 12 + .../UI/AspNetCore/Tag-Helpers/List-Groups.md | 76 +++++ .../UI/AspNetCore/Tag-Helpers/Modals.md | 79 +++++ .../UI/AspNetCore/Tag-Helpers/Paginator.md | 55 ++++ .../AspNetCore/Tag-Helpers/Progress-Bars.md | 68 +++++ .../zh-Hans/UI/AspNetCore/Tag-Helpers/Tabs.md | 91 ++++++ .../UI/AspNetCore/Tag-Helpers/Tooltips.md | 33 +++ .../Tag-Helpers/fa-address-card.png | Bin 1270 -> 0 bytes 14 files changed, 1132 insertions(+), 2 deletions(-) create mode 100644 docs/zh-Hans/UI/AspNetCore/Tag-Helpers/Alerts.md create mode 100644 docs/zh-Hans/UI/AspNetCore/Tag-Helpers/Cards.md create mode 100644 docs/zh-Hans/UI/AspNetCore/Tag-Helpers/Collapse.md create mode 100644 docs/zh-Hans/UI/AspNetCore/Tag-Helpers/Dropdowns.md create mode 100644 docs/zh-Hans/UI/AspNetCore/Tag-Helpers/Grids.md create mode 100644 docs/zh-Hans/UI/AspNetCore/Tag-Helpers/List-Groups.md create mode 100644 docs/zh-Hans/UI/AspNetCore/Tag-Helpers/Modals.md create mode 100644 docs/zh-Hans/UI/AspNetCore/Tag-Helpers/Paginator.md create mode 100644 docs/zh-Hans/UI/AspNetCore/Tag-Helpers/Progress-Bars.md create mode 100644 docs/zh-Hans/UI/AspNetCore/Tag-Helpers/Tabs.md create mode 100644 docs/zh-Hans/UI/AspNetCore/Tag-Helpers/Tooltips.md delete mode 100644 docs/zh-Hans/UI/AspNetCore/Tag-Helpers/fa-address-card.png diff --git a/docs/zh-Hans/UI/AspNetCore/Tag-Helpers/Alerts.md b/docs/zh-Hans/UI/AspNetCore/Tag-Helpers/Alerts.md new file mode 100644 index 0000000000..fa70c1c9b0 --- /dev/null +++ b/docs/zh-Hans/UI/AspNetCore/Tag-Helpers/Alerts.md @@ -0,0 +1,80 @@ +# Alerts + +## 介绍 + +`abp-alert` 是创建alert的主要元素. + +基本用法: + +````xml + + A simple primary alert—check it out! + +```` + +## Demo + +参阅[alerts demo页面](https://bootstrap-taghelpers.abp.io/Components/Alerts)查看示例. + +## Attributes + +### alert-type + +值做为alert的Type,应为以下值之一: + +* `Default` (默认值) +* `Primary` +* `Secondary` +* `Success` +* `Danger` +* `Warning` +* `Info` +* `Light` +* `Dark` + +示例: + +````xml + + A simple warning alert—check it out! + +```` + +### alert-link + +alert的链接. + +示例: + +````xml + + A simple danger alert with an example link. Give it a click if you like. + +```` + +### dismissible + +使alert可被忽略: + +示例: + +````xml + + Holy guacamole! You should check in on some of those fields below. + +```` + +### Additional content + +`abp-alert`还可以包含其他HTML元素,例如标题,段落和分隔符. + +示例: + +````xml + +

Well done!

+

Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.

+
+

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

+ +```` diff --git a/docs/zh-Hans/UI/AspNetCore/Tag-Helpers/Buttons.md b/docs/zh-Hans/UI/AspNetCore/Tag-Helpers/Buttons.md index 76307ad820..f628f17ef4 100644 --- a/docs/zh-Hans/UI/AspNetCore/Tag-Helpers/Buttons.md +++ b/docs/zh-Hans/UI/AspNetCore/Tag-Helpers/Buttons.md @@ -12,7 +12,7 @@ ## Demo -参阅 [按钮Demo页面](https://bootstrap-taghelpers.abp.io/Components/Buttons) 查看示例. +参阅[按钮Demo页面](https://bootstrap-taghelpers.abp.io/Components/Buttons)查看示例. ## Attributes @@ -20,7 +20,7 @@ 指定按钮的主样式/类型. 应为以下值之一: -* `Default` (default value) +* `Default` (默认值) * `Primary` * `Secondary` * `Success` diff --git a/docs/zh-Hans/UI/AspNetCore/Tag-Helpers/Cards.md b/docs/zh-Hans/UI/AspNetCore/Tag-Helpers/Cards.md new file mode 100644 index 0000000000..4cb75ea3b0 --- /dev/null +++ b/docs/zh-Hans/UI/AspNetCore/Tag-Helpers/Cards.md @@ -0,0 +1,180 @@ +# 卡片 + +## 介绍 + +`abp-card` 是从bootstrap card元素派生的内容容器. + +基本用法: + +````xml + + + + Card Title + Some quick example text to build on the card title and make up the bulk of the card's content. + Go somewhere + + +```` + +##### 使用标题,文本和链接: + +`abp-card` 可以使用以下标签 + +* `abp-card-title` +* `abp-card-subtitle` +* `a abp-card-link` + +示例: + +````xml + + + Card title + Card subtitle + Some quick example text to build on the card title and make up the bulk of the card's content. + Card link + Another link + + +```` + +##### 使用列表组: + +* `abp-list-group flush="true"` : `flush` 属性渲染到 bootstrap `list-group-flush` 的 calss 中,该类用于删除边界和圆角以使列表组项在父容器中并排显示. +* `abp-list-group-item` + +示例: + +````xml + + + + Card Title + Some quick example text to build on the card title and make up the bulk of the card's content. + + + Cras justo odio + Dapibus ac facilisis in + Vestibulum at eros + + + Card link + Another link + + +```` + +##### 使用页眉,页脚和块引用: + +* `abp-card-header` +* `abp-card-footer` +* `abp-blockquote` + +示例: + +```xml + + Featured + + Special title treatment + With supporting text below as a natural lead-in to additional content. + Go somewhere + + +``` + +引用示例: + +```xml + + Quote + + +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

+
Someone famous in Source Title
+ + + +``` + +页脚示例: + +```xml + + Featured + + +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

+
Someone famous in Source Title
+ + + 2 days ago + +``` + +## Demo + +参阅[卡片demo页面](https://bootstrap-taghelpers.abp.io/Components/Cards)查看示例. + +## abp-card Attributes + +- **background:** 值指定卡片背景的颜色. +- **text-color**: 值指定卡片内文本的颜色. +- **border:** 值指定卡片边框的颜色. + +应为以下值之一: + +* `Default` (默认值) +* `Primary` +* `Secondary` +* `Success` +* `Danger` +* `Warning` +* `Info` +* `Light` +* `Dark` + +示例: + +````xml + +```` + +### sizing + +卡片的默认值为100%,可以使用自定义CSS,栅格类,栅格Sass mixins或[utilities](https://getbootstrap.com/docs/4.0/utilities/sizing/)进行更改. + +````xml + +```` + +### card-deck 和 card-columns + +`abp-card` 可以在 `card-deck` 或 `card-columns` 里使用. + +````xml +
+ + First Deck + + Ace + Here is the content for Ace. + + + + Second Deck + + Beta + Beta content. + + + + Third Deck + + Epsilon + Content for Epsilon. + + +
+```` diff --git a/docs/zh-Hans/UI/AspNetCore/Tag-Helpers/Collapse.md b/docs/zh-Hans/UI/AspNetCore/Tag-Helpers/Collapse.md new file mode 100644 index 0000000000..65327de438 --- /dev/null +++ b/docs/zh-Hans/UI/AspNetCore/Tag-Helpers/Collapse.md @@ -0,0 +1,90 @@ +# Collapse + +## 介绍 + +`abp-collapse-body` 是显示和隐藏内容的主要容器. `abp-collapse-id` 用于显示和隐藏内容容器. 可以通过 `abp-button` 和 `a` 标签触发. + +基本用法: + +````xml + + Link with href + + + Anim pariatur wolf moon tempor,,, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. + +```` + +## Demo + +参阅[collapse demo 页面](https://bootstrap-taghelpers.abp.io/Components/Collapse)查看示例. + +## Attributes + +### show + +指定折叠主体初始化时是折叠还是展开. 应为以下值之一: + +* `false` (默认值) +* `true` + +### multi + +指定 `abp-collapse-body` 是否可以通过显示/隐藏多个折叠体的元素显示或隐藏. 此属性做为 "multi-collapse" class 添加到 `abp-collapse-body`. 应为以下值之一: + +* `false` (默认值) +* `true` + +示例: + +````xml + Toggle first element + + + + + + + Curabitur porta porttitor libero eu luctus. Praesent ultrices mattis commodo. Integer sodales massa risus, in molestie enim sagittis blandit + + + + + Anim pariatur wolf moon tempor,,, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. + + + +```` + +## 手风琴示例 + +`abp-accordion` 是手风琴项的主容器. + +基本用法: + +````xml + + + Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry rtat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. + + + Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. + + + Anim pariatur wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. + + +```` + +## Attributes + +### active + +指定手风琴项目在初始化时是显示还是隐藏. 应为以下值之一: + +* `false` (默认值) +* `true` + +### title + +指定手风琴项的标题. 应为字符串类型的值. diff --git a/docs/zh-Hans/UI/AspNetCore/Tag-Helpers/Dropdowns.md b/docs/zh-Hans/UI/AspNetCore/Tag-Helpers/Dropdowns.md new file mode 100644 index 0000000000..971dce7a1c --- /dev/null +++ b/docs/zh-Hans/UI/AspNetCore/Tag-Helpers/Dropdowns.md @@ -0,0 +1,93 @@ +# 下拉菜单 + +## 介绍 + +`abp-dropdown` 是下拉菜单的主要容器. + +基本用法: + +````xml + + + + Action + Another action + Something else here + + +```` + +## Demo + +参阅 [下拉菜单demo页面](https://bootstrap-taghelpers.abp.io/Components/Dropdowns)查看示例. + +## Attributes + +### direction + +指定下拉菜单的方向. 应为以下值之一: + +* `Down` (默认值) +* `Up` +* `Right` +* `Left` + +### dropdown-style + +指定 `abp-dropdown-button` 是否具有用于拆分的拆分图标. 应为以下值之一: + +* `Single` (默认值) +* `Split` + +## Menu items + +`abp-dropdown-menu` 下拉菜单项的主要容器. + +基本用法: + +````xml + + + + Dropdown Header + Action + Active action + Disabled action + + Dropdown Item Text + Something else here + + +```` + +## Attributes + +### align + +指定 `abp-dropdown-menu` 在哪个方向对齐. 应为以下值之一: + +* `Left` (默认值) +* `Right` + +### Additional content + +`abp-dropdown-menu` 也可以包含其他HTML元素,例如标题,段落,分隔符或form元素. + +示例: + +````xml + + + +
+ + + + + + + New around here? Sign up + Forgot password? +
+ +```` diff --git a/docs/zh-Hans/UI/AspNetCore/Tag-Helpers/Grids.md b/docs/zh-Hans/UI/AspNetCore/Tag-Helpers/Grids.md new file mode 100644 index 0000000000..0605e893f0 --- /dev/null +++ b/docs/zh-Hans/UI/AspNetCore/Tag-Helpers/Grids.md @@ -0,0 +1,273 @@ +# 栅格 + +## 介绍 + +ABP标签助手基于bootstrap栅格系统. + +## Demo + +参阅[网络demo页面](https://bootstrap-taghelpers.abp.io/Components/Grids)查看示例. + +### Sizing + +**等宽:** 创建等宽的列. + +示例: + +````xml + + + 1 of 2 + 2 of 2 + + + 1 of 3 + 2 of 3 + 3 of 3 + + +```` + +**列中断:** `abp-column-breaker` 用于中断当前行的自动放置宽度,然后在新行中开始. + +示例: + +````xml + + + column + column + + column + column + + +```` + +**设置列宽度:** size属性用于设置特定列的宽度. + +示例: + +```xml + + + 1 of 3 + 2 of 3 (wider) + 3 of 3 + + + 1 of 3 + 2 of 3 (wider) + 3 of 3 + + +``` + +**可变宽度内容:** 根据内容自动调整列的大小. + +```xml + + + 1 of 3 + Contrary to popular belief, Lorem Ipsum is not simply random text. + 3 of 3 + + + 1 of 3 + Variable width content + 3 of 3 + + +``` + +### 响应类 + +响应式类可以在abp标签中强类型使用. + +```xml + + col-sm-8 + col-sm-4 + + + col-sm + col-sm + col-sm + col-sm + + + + .col-12 .col-md-8 + .col-6 .col-md-4 + + + + + .col-6 .col-md-4 + .col-6 .col-md-4 + .col-6 .col-md-4 + + + + + .col-6 + .col-6 + +``` + +### 对齐 + +可以使用强类型的abp标签在垂直和水平方向上进行列对齐. + +**垂直对齐**: `v-align` 属性值用于对垂直齐列. + +示例: + +```xml + + + column + column + column + + + column + column + column + + + column + column + column + + +``` + +**水平对齐**: `h-align` 属性值用于对水平齐列. + +示例: + +```xml + + + One of two columns + One of two columns + + + One of two columns + One of two columns + + + One of two columns + One of two columns + + + One of two columns + One of two columns + + + One of two columns + One of two columns + + +``` + +**无间隙**: 可以使用 `gutters="false"` 删除预定义栅格类中列之间的栅格线. 这会从 `abp-row` 中消除负边距,并从所有直接子列中消除水平边距. + +示例: + +```xml + + One of two columns + One of two columns + +``` + +**列包装**: 如果在一行中放置超过12列,则将每组额外的列作为一个单元包装到新行上. + +示例: + +```xml + + .col-9 + .col-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit. + .col-6
Subsequent columns continue along the new line.s + +``` + +### 重新排序 + +**Order类**: `order` 属性用于控制内容的视觉顺序. + +示例: + +```xml + + + First, but Last + Second, but unordered + Third, but Second + + +``` + +**偏移列**: `offset` 属性用于设置栅格列的偏移量. + +示例: + +```xml + + + .col-md-4 + .col-md-4 .offset-md-4 + + + .col-md-3 .offset-md-3 + .col-md-3 .offset-md-3 + + + .col-md-6 .offset-md-3 + + + .col-sm-5 .col-md-6 + .col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0 + + + col-sm-6 .col-md-5 .col-lg-6 + .col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0 + + +``` + +## abp-row Attributes + +- **v-align:** 指定包含列的垂直位置. 应为以下值之一: + * `Default` (默认值) + * `Start` + * `Center` + * `End` + +- **h-align**: 指定包含列的水平位置. 应为以下值之一: + * `Default` (默认值) + * `Start` + * `Center` + * `Around` + * `Between` + * `End` +- **gutter**: 指定是否将从所有子列中删除负边距和水平填充. 如果未设置,默认为 `true`. 应为以下值之一: + * `true` + * `false` + +## abp-column Attributes + +- **size:** 指定列的宽度: `_`, `Undefined`, `_1`..`_12`, `Auto`. 或者可以与预定义值一起使用,例如: + - `size-sm` + - `size-md` + - `size-lg` + - `size-xl` +- **order**: 指定列的顺序: `Undefined`, `_1`..`_12`, `First` 和 `Last`. +- **offset:** 指定列的偏移量: `_`, `Undefined`, `_1`..`_12`, `Auto`. 或者可以与预定义值一起使用,例如: + - `offset-sm` + - `offset-md` + - `offset-lg` + - `offset-xl` \ No newline at end of file diff --git a/docs/zh-Hans/UI/AspNetCore/Tag-Helpers/Index.md b/docs/zh-Hans/UI/AspNetCore/Tag-Helpers/Index.md index acbb9e872b..20d1119969 100644 --- a/docs/zh-Hans/UI/AspNetCore/Tag-Helpers/Index.md +++ b/docs/zh-Hans/UI/AspNetCore/Tag-Helpers/Index.md @@ -13,6 +13,18 @@ ABP框架还向标准bootstrap组件添加了一些**实用的功能**. 这里是ABP框架包装的组件列表: * [Buttons](Buttons.md) +* [Cards](Cards.md) +* [Alerts](Alerts.md) +* [Tabs](Tabs.md) +* [Grids](Grids.md) +* [Modals](Modals.md) +* [Collapse](Collapse.md) +* [Dropdowns](Dropdowns.md) +* [List Groups](List-Groups.md) +* [Paginator](Paginator.md) +* [Popovers](Popovers.md) +* [Progress Bars](Progress-Bars.md) +* [Tooltips](Tooltips.md) * ... > 在为所有的标签助手完成文档之前,你可以访问 https://bootstrap-taghelpers.abp.io/ 查看在线示例. diff --git a/docs/zh-Hans/UI/AspNetCore/Tag-Helpers/List-Groups.md b/docs/zh-Hans/UI/AspNetCore/Tag-Helpers/List-Groups.md new file mode 100644 index 0000000000..411a8a3b8a --- /dev/null +++ b/docs/zh-Hans/UI/AspNetCore/Tag-Helpers/List-Groups.md @@ -0,0 +1,76 @@ +# 列表组 + +## 介绍 + +`abp-list-group` 是列表组内容的主要容器. + +基本用法: + +````xml + + Cras justo odio + Dapibus ac facilisis in + Morbi leo risus + Vestibulum at eros + +```` + +## Demo + +参阅[列表组demo页面](https://bootstrap-taghelpers.abp.io/Components/ListGroups)查看示例. + +## Attributes + +### flush + +指定 `abp-list-group` 项可删除某些边框和圆角,以在父容器中无边框呈现列表组项. 应为以下值之一: + +* `false` (默认值) +* `true` + +### active + +指定 `abp-list-group-item` 是否处于active. 应为以下值之一: + +* `false` (默认值) +* `true` + +### disabled + +指定 `abp-list-group-item` 是否被禁用. 应为以下值之一: + +* `false` (默认值) +* `true` + +### href + +指定 `abp-list-group-item` 是否含有链接. 应该是一个字符串链接值. + +### type + +指定 `abp-list-group-item` 具有状态背景和颜色的样式类. 应为以下值之一: + +* `Default` (默认值) +* `Primary` +* `Secondary` +* `Success` +* `Danger` +* `Warning` +* `Info` +* `Light` +* `Dark` +* `Link` + +### Additional content + +`abp-list-group-item` 还可以包含其他HTML元素(例如span). + +示例: + +````xml + + Cras justo odio 14 + Dapibus ac facilisis in 2 + Morbi leo risus 1 + +```` diff --git a/docs/zh-Hans/UI/AspNetCore/Tag-Helpers/Modals.md b/docs/zh-Hans/UI/AspNetCore/Tag-Helpers/Modals.md new file mode 100644 index 0000000000..28b92254bd --- /dev/null +++ b/docs/zh-Hans/UI/AspNetCore/Tag-Helpers/Modals.md @@ -0,0 +1,79 @@ +# 模态框 + +## 介绍 + +`abp-modal` 是创建模态框的主要元素. + +基本用法: + +````xml +Launch modal + + + + + Woohoo, you're reading this text in a modal! + + + +```` + +## Demo + +参阅[模态框demo页面](https://bootstrap-taghelpers.abp.io/Components/Modals)查看示例. + +## Attributes + +### centered + +指定模态框的位置. 应为以下值之一: + +* `false` (默认值) +* `true` + +### size + +指定模态框的大小. 应为以下值之一: + +* `Default` (默认值) +* `Small` +* `Large` +* `ExtraLarge` + +### static + +指定模态框是否是静态的. 应为以下值之一: + +* `false` (默认值) +* `true` + +### Additional content + +`abp-modal-footer` 可以有多个带有对齐选项的按钮. + +添加 `@using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Modal` 到你的页面. + +示例: + +````xml +Launch modal + + + + + Woohoo, you're reading this text in a modal! + + + +```` + +### button-alignment + +指定模态页脚按钮的位置. 应为以下值之一: + +* `Default` (默认值) +* `Start` +* `Center` +* `Around` +* `Between` +* `End` \ No newline at end of file diff --git a/docs/zh-Hans/UI/AspNetCore/Tag-Helpers/Paginator.md b/docs/zh-Hans/UI/AspNetCore/Tag-Helpers/Paginator.md new file mode 100644 index 0000000000..7a9b3de126 --- /dev/null +++ b/docs/zh-Hans/UI/AspNetCore/Tag-Helpers/Paginator.md @@ -0,0 +1,55 @@ +# 分页器 + +## 介绍 + +`abp-paginator` 是分页器的abp标签. 需要 `Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Pagination.PagerModel` 类型的模型. + +基本用法: + +````xml + +```` + +模型: + +````csharp +using Microsoft.AspNetCore.Mvc.RazorPages; +using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Pagination; + +namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components +{ + public class PaginatorModel : PageModel + { + public PagerModel PagerModel { get; set; } + + public void OnGet(int currentPage, string sort) + { + PagerModel = new PagerModel(100, 10, currentPage, 10, "Paginator", sort); + } + } +} +```` + +## Demo + +参阅[分页器demo页面](https://bootstrap-taghelpers.abp.io/Components/Paginator)查看示例. + +## Attributes + +### model + +`Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Pagination.PagerModel` 类型模型可以用以下数据初始化: + +* `totalCount` +* `shownItemsCount` +* `currentPage` +* `pageSize` +* `pageUrl` +* `sort` (默认值为null) + +### show-info + +指定是否显示开始,结束和总记录的其他信息. 应为以下值之一: + +* `false` (默认值) +* `true` diff --git a/docs/zh-Hans/UI/AspNetCore/Tag-Helpers/Progress-Bars.md b/docs/zh-Hans/UI/AspNetCore/Tag-Helpers/Progress-Bars.md new file mode 100644 index 0000000000..e77580cd99 --- /dev/null +++ b/docs/zh-Hans/UI/AspNetCore/Tag-Helpers/Progress-Bars.md @@ -0,0 +1,68 @@ +# 进度条 + +## 介绍 + +`abp-progress-bar` 是进度条状态的abp标签. + +基本用法: + +````xml + + + %25 + + + + %50 + + + + %10 + + +```` + +## Demo + +参阅[进度条demo页面](https://bootstrap-taghelpers.abp.io/Components/Progress-Bars)查看示例. + +## Attributes + +### value + +指定当前进度条的进度. + +### type + +指定进度条的背景颜色. 应为下列值之一: + +* `Default` (默认值) +* `Secondary` +* `Success` +* `Danger` +* `Warning` +* `Info` +* `Light` +* `Dark` + +### min-value + +进度条的最小值. 默认值是0。 + +### max-value + +进度条的最大值. 默认值是100. + +### strip + +指定进度条的背景样式是否被去除. 应为以下值之一: + +* `false` (默认值) +* `true` + +### animation + +指定进度条的背景样式是否为动画. 应为以下值之一: + +* `false` (默认值) +* `true` \ No newline at end of file diff --git a/docs/zh-Hans/UI/AspNetCore/Tag-Helpers/Tabs.md b/docs/zh-Hans/UI/AspNetCore/Tag-Helpers/Tabs.md new file mode 100644 index 0000000000..ed8efd188c --- /dev/null +++ b/docs/zh-Hans/UI/AspNetCore/Tag-Helpers/Tabs.md @@ -0,0 +1,91 @@ +# 标签页 + +## 介绍 + +`abp-tab` 是从引导标签元素派生的基本标签导航内容容器. + +基本用法: + +````xml + + + Content_Home + + + + Content_Profile + + + + Content_1_Content + + + Content_2_Content + + + +```` + +## Demo + +参阅[卡面demo页面](https://bootstrap-taghelpers.abp.io/Components/Cards)查看示例. + +## abp-tab Attributes + +- **title**: 设置标签页菜单文字. +- **name:** 设置生成元素的"id"属性. 默认值为Guid. 除非使用Jquery更改或修改了选项卡,否则不需要. +- **active**: 设置active标签页. + +示例: + +````xml + + + Content_Home + + + Content_Profile + + + Content_Contact + + +```` + +### Pills + +示例: + +````xml + + + Content_Home + + + Content_Profile + + + Content_Contact + + +```` + +### Vertical + +**vertical-header-size**: 设置标签标题的列宽. + +示例: + +````xml + + + Content_Home + + + Content_Profile + + + Content_Contact + + +```` diff --git a/docs/zh-Hans/UI/AspNetCore/Tag-Helpers/Tooltips.md b/docs/zh-Hans/UI/AspNetCore/Tag-Helpers/Tooltips.md new file mode 100644 index 0000000000..0f404911b7 --- /dev/null +++ b/docs/zh-Hans/UI/AspNetCore/Tag-Helpers/Tooltips.md @@ -0,0 +1,33 @@ +# 提示工具 + +## 介绍 + +`abp-tooltip` 是提示工具的abp标签. + +基本用法: + +````xml + + Tooltip Default + + + + Tooltip on top + + + + Tooltip on right + + + + Tooltip on bottom + + + + Disabled button Tooltip + +```` + +## Demo + +参阅[提示工具demo页面](https://bootstrap-taghelpers.abp.io/Components/Tooltips)查看示例. diff --git a/docs/zh-Hans/UI/AspNetCore/Tag-Helpers/fa-address-card.png b/docs/zh-Hans/UI/AspNetCore/Tag-Helpers/fa-address-card.png deleted file mode 100644 index a3b2c815b8fa1d6783aa361fffc3d024edd68d18..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1270 zcmeAS@N?(olHy`uVBq!ia0vp^DImtP4)8{Yk60%54pGS;-_9D&pwa+w{G);#$*o0j{7mF?aXJ2+cCQ zo_76a?Kz9h_vLr*{_ErU>0X+nhnt(*v;RJC(wLc_hAvBe6M3XTa(nN&P@Y-RVxL%< z)w=@(ZygA2nb)Lj(dSc3fKXUp2ldy3nvCqF5=sz@cGYp_>9vkEE9ZZ`d(?|{QD$iA`S%sFGYYgm z8SeCQUACTg-+`@v=9})cjFFU?S@fQH|3}-8{BK`RH2>(cKlZRtt>~UB$>Hlg15=Og z+&G2%np*10wA^St>+lsfM4EVZ{@b8FFMqH6THon0<_8;$^ZOQ;o&7Ppe}CA%lC){b zT9&f}Tc2d;Z8_CE}hS+S){aA=Y*i&6ASL53-flZa`Stop!_^y!o6#6 z>uxKgCr#|JNpR#j_dLZl(ZT25rlNUybDpe=eZ4!=?UVTbX)6jfZk^EMzF8jHUd7cS zv-?NbJRwgPC832%(jPqJYTMnvEp%U^SREge^lRGju+5k6O=vTnqTEx%XDOwm`Zn)h zqfc({UgbR}|Fcfov|Nm1ahP(>>Vrz@Zx0@EcSza%#N?{6e8YsPp5F_X-FjzVlijNp rxoPj@puh6vFFx(RXaocofAW^hd-h|(FPZ1SJj3AW>gTe~DWM4f&9zD@