mirror of https://github.com/abpframework/abp
liangshiwei
6 years ago
parent
9a4b1c99e1
commit
10806ca2a4
@ -0,0 +1,80 @@
|
||||
# Alerts
|
||||
|
||||
## 介绍
|
||||
|
||||
`abp-alert` 是创建alert的主要元素.
|
||||
|
||||
基本用法:
|
||||
|
||||
````xml
|
||||
<abp-alert alert-type="Primary">
|
||||
A simple primary alert—check it out!
|
||||
</abp-alert>
|
||||
````
|
||||
|
||||
## 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
|
||||
<abp-alert alert-type="Warning">
|
||||
A simple warning alert—check it out!
|
||||
</abp-alert>
|
||||
````
|
||||
|
||||
### alert-link
|
||||
|
||||
alert的链接.
|
||||
|
||||
示例:
|
||||
|
||||
````xml
|
||||
<abp-alert alert-type="Danger">
|
||||
A simple danger alert with <a abp-alert-link href="#">an example link</a>. Give it a click if you like.
|
||||
</abp-alert>
|
||||
````
|
||||
|
||||
### dismissible
|
||||
|
||||
使alert可被忽略:
|
||||
|
||||
示例:
|
||||
|
||||
````xml
|
||||
<abp-alert alert-type="Warning" dismissible="true">
|
||||
Holy guacamole! You should check in on some of those fields below.
|
||||
</abp-alert>
|
||||
````
|
||||
|
||||
### Additional content
|
||||
|
||||
`abp-alert`还可以包含其他HTML元素,例如标题,段落和分隔符.
|
||||
|
||||
示例:
|
||||
|
||||
````xml
|
||||
<abp-alert alert-type="Success">
|
||||
<h4>Well done!</h4>
|
||||
<p>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.</p>
|
||||
<hr>
|
||||
<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
|
||||
</abp-alert>
|
||||
````
|
||||
@ -0,0 +1,180 @@
|
||||
# 卡片
|
||||
|
||||
## 介绍
|
||||
|
||||
`abp-card` 是从bootstrap card元素派生的内容容器.
|
||||
|
||||
基本用法:
|
||||
|
||||
````xml
|
||||
<abp-card style="width: 18rem;">
|
||||
<img abp-card-image="Top" src="~/imgs/demo/300x200.png"/>
|
||||
<abp-card-body>
|
||||
<abp-card-title>Card Title</abp-card-title>
|
||||
<abp-card-text>Some quick example text to build on the card title and make up the bulk of the card's content.</abp-card-text>
|
||||
<a abp-button="Primary" href="#"> Go somewhere</a>
|
||||
</abp-card-body>
|
||||
</abp-card>
|
||||
````
|
||||
|
||||
##### 使用标题,文本和链接:
|
||||
|
||||
`abp-card` 可以使用以下标签
|
||||
|
||||
* `abp-card-title`
|
||||
* `abp-card-subtitle`
|
||||
* `a abp-card-link`
|
||||
|
||||
示例:
|
||||
|
||||
````xml
|
||||
<abp-card style="width: 18rem;">
|
||||
<abp-card-body>
|
||||
<abp-card-title>Card title</abp-card-title>
|
||||
<abp-card-subtitle class="mb-2 text-muted">Card subtitle</abp-card-subtitle>
|
||||
<abp-card-text>Some quick example text to build on the card title and make up the bulk of the card's content.</abp-card-text>
|
||||
<a abp-card-link href="#">Card link</a>
|
||||
<a abp-card-link href="#">Another link</a>
|
||||
</abp-card-body>
|
||||
</abp-card>
|
||||
````
|
||||
|
||||
##### 使用列表组:
|
||||
|
||||
* `abp-list-group flush="true"` : `flush` 属性渲染到 bootstrap `list-group-flush` 的 calss 中,该类用于删除边界和圆角以使列表组项在父容器中并排显示.
|
||||
* `abp-list-group-item`
|
||||
|
||||
示例:
|
||||
|
||||
````xml
|
||||
<abp-card style="width: 18rem;">
|
||||
<img abp-card-image="Top" src="~/imgs/demo/300x200.png" />
|
||||
<abp-card-body>
|
||||
<abp-card-title>Card Title</abp-card-title>
|
||||
<abp-card-text>Some quick example text to build on the card title and make up the bulk of the card's content.</abp-card-text>
|
||||
</abp-card-body>
|
||||
<abp-list-group flush="true">
|
||||
<abp-list-group-item>Cras justo odio</abp-list-group-item>
|
||||
<abp-list-group-item>Dapibus ac facilisis in</abp-list-group-item>
|
||||
<abp-list-group-item>Vestibulum at eros</abp-list-group-item>
|
||||
</abp-list-group>
|
||||
<abp-card-body>
|
||||
<a abp-card-link href="#">Card link</a>
|
||||
<a abp-card-link href="#">Another link</a>
|
||||
</abp-card-body>
|
||||
</abp-card>
|
||||
````
|
||||
|
||||
##### 使用页眉,页脚和块引用:
|
||||
|
||||
* `abp-card-header`
|
||||
* `abp-card-footer`
|
||||
* `abp-blockquote`
|
||||
|
||||
示例:
|
||||
|
||||
```xml
|
||||
<abp-card style="width: 18rem;">
|
||||
<abp-card-header>Featured</abp-card-header>
|
||||
<abp-card-body>
|
||||
<abp-card-title> Special title treatment</abp-card-title>
|
||||
<abp-card-text>With supporting text below as a natural lead-in to additional content.</abp-card-text>
|
||||
<a abp-button="Primary" href="#"> Go somewhere</a>
|
||||
</abp-card-body>
|
||||
</abp-card>
|
||||
```
|
||||
|
||||
引用示例:
|
||||
|
||||
```xml
|
||||
<abp-card>
|
||||
<abp-card-header>Quote</abp-card-header>
|
||||
<abp-card-body>
|
||||
<abp-blockquote>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in Source Title</footer>
|
||||
</abp-blockquote>
|
||||
</abp-card-body>
|
||||
</abp-card>
|
||||
```
|
||||
|
||||
页脚示例:
|
||||
|
||||
```xml
|
||||
<abp-card class="text-center">
|
||||
<abp-card-header>Featured</abp-card-header>
|
||||
<abp-card-body>
|
||||
<abp-blockquote>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in Source Title</footer>
|
||||
</abp-blockquote>
|
||||
</abp-card-body>
|
||||
<abp-card-footer class="text-muted"> 2 days ago</abp-card-footer>
|
||||
</abp-card>
|
||||
```
|
||||
|
||||
## 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
|
||||
<abp-card background="Success" text-color="Danger" border="Dark">
|
||||
````
|
||||
|
||||
### sizing
|
||||
|
||||
卡片的默认值为100%,可以使用自定义CSS,栅格类,栅格Sass mixins或[utilities](https://getbootstrap.com/docs/4.0/utilities/sizing/)进行更改.
|
||||
|
||||
````xml
|
||||
<abp-card style="width: 18rem;">
|
||||
````
|
||||
|
||||
### card-deck 和 card-columns
|
||||
|
||||
`abp-card` 可以在 `card-deck` 或 `card-columns` 里使用.
|
||||
|
||||
````xml
|
||||
<div class="card-deck">
|
||||
<abp-card background="Primary">
|
||||
<abp-card-header>First Deck</abp-card-header>
|
||||
<abp-card-body>
|
||||
<abp-card-title> Ace </abp-card-title>
|
||||
<abp-card-text>Here is the content for Ace.</abp-card-text>
|
||||
</abp-card-body>
|
||||
</abp-card>
|
||||
<abp-card background="Info">
|
||||
<abp-card-header>Second Deck</abp-card-header>
|
||||
<abp-card-body>
|
||||
<abp-card-title> Beta </abp-card-title>
|
||||
<abp-card-text>Beta content.</abp-card-text>
|
||||
</abp-card-body>
|
||||
</abp-card>
|
||||
<abp-card background="Warning">
|
||||
<abp-card-header>Third Deck</abp-card-header>
|
||||
<abp-card-body>
|
||||
<abp-card-title> Epsilon </abp-card-title>
|
||||
<abp-card-text>Content for Epsilon.</abp-card-text>
|
||||
</abp-card-body>
|
||||
</abp-card>
|
||||
</div>
|
||||
````
|
||||
@ -0,0 +1,90 @@
|
||||
# Collapse
|
||||
|
||||
## 介绍
|
||||
|
||||
`abp-collapse-body` 是显示和隐藏内容的主要容器. `abp-collapse-id` 用于显示和隐藏内容容器. 可以通过 `abp-button` 和 `a` 标签触发.
|
||||
|
||||
基本用法:
|
||||
|
||||
````xml
|
||||
<abp-button button-type="Primary" abp-collapse-id="collapseExample" text="Button with data-target" />
|
||||
<a abp-button="Primary" abp-collapse-id="collapseExample"> Link with href </a>
|
||||
|
||||
<abp-collapse-body id="collapseExample">
|
||||
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.
|
||||
</abp-collapse-body>
|
||||
````
|
||||
|
||||
## 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
|
||||
<a abp-button="Primary" abp-collapse-id="FirstCollapseExample"> Toggle first element </a>
|
||||
<abp-button button-type="Primary" abp-collapse-id="SecondCollapseExample" text="Toggle second element" />
|
||||
<abp-button button-type="Primary" abp-collapse-id="FirstCollapseExample SecondCollapseExample" text="Toggle both elements" />
|
||||
|
||||
<abp-row class="mt-3">
|
||||
<abp-column size-sm="_6">
|
||||
<abp-collapse-body id="FirstCollapseExample" multi="true">
|
||||
Curabitur porta porttitor libero eu luctus. Praesent ultrices mattis commodo. Integer sodales massa risus, in molestie enim sagittis blandit
|
||||
</abp-collapse-body>
|
||||
</abp-column>
|
||||
<abp-column size-sm="_6">
|
||||
<abp-collapse-body id="SecondCollapseExample" multi="true">
|
||||
Anim pariatur wolf moon tempor,,, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
|
||||
</abp-collapse-body>
|
||||
</abp-column>
|
||||
</abp-row>
|
||||
````
|
||||
|
||||
## 手风琴示例
|
||||
|
||||
`abp-accordion` 是手风琴项的主容器.
|
||||
|
||||
基本用法:
|
||||
|
||||
````xml
|
||||
<abp-accordion>
|
||||
<abp-accordion-item title="Collapsible Group Item #1">
|
||||
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.
|
||||
</abp-accordion-item>
|
||||
<abp-accordion-item title="Collapsible Group Item #2">
|
||||
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.
|
||||
</abp-accordion-item>
|
||||
<abp-accordion-item title="Collapsible Group Item #3">
|
||||
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.
|
||||
</abp-accordion-item>
|
||||
</abp-accordion>
|
||||
````
|
||||
|
||||
## Attributes
|
||||
|
||||
### active
|
||||
|
||||
指定手风琴项目在初始化时是显示还是隐藏. 应为以下值之一:
|
||||
|
||||
* `false` (默认值)
|
||||
* `true`
|
||||
|
||||
### title
|
||||
|
||||
指定手风琴项的标题. 应为字符串类型的值.
|
||||
@ -0,0 +1,93 @@
|
||||
# 下拉菜单
|
||||
|
||||
## 介绍
|
||||
|
||||
`abp-dropdown` 是下拉菜单的主要容器.
|
||||
|
||||
基本用法:
|
||||
|
||||
````xml
|
||||
<abp-dropdown>
|
||||
<abp-dropdown-button text="Dropdown button" />
|
||||
<abp-dropdown-menu>
|
||||
<abp-dropdown-item href="#">Action</abp-dropdown-item>
|
||||
<abp-dropdown-item href="#">Another action</abp-dropdown-item>
|
||||
<abp-dropdown-item href="#">Something else here</abp-dropdown-item>
|
||||
</abp-dropdown-menu>
|
||||
</abp-dropdown>
|
||||
````
|
||||
|
||||
## 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
|
||||
<abp-dropdown>
|
||||
<abp-dropdown-button button-type="Secondary" text="Dropdown"/>
|
||||
<abp-dropdown-menu>
|
||||
<abp-dropdown-header>Dropdown Header</abp-dropdown-header>
|
||||
<abp-dropdown-item href="#">Action</abp-dropdown-item>
|
||||
<abp-dropdown-item active="true" href="#">Active action</abp-dropdown-item>
|
||||
<abp-dropdown-item disabled="true" href="#">Disabled action</abp-dropdown-item>
|
||||
<abp-dropdown-divider/>
|
||||
<abp-dropdown-item-text>Dropdown Item Text</abp-dropdown-item-text>
|
||||
<abp-dropdown-item href="#">Something else here</abp-dropdown-item>
|
||||
</abp-dropdown-menu>
|
||||
</abp-dropdown>
|
||||
````
|
||||
|
||||
## Attributes
|
||||
|
||||
### align
|
||||
|
||||
指定 `abp-dropdown-menu` 在哪个方向对齐. 应为以下值之一:
|
||||
|
||||
* `Left` (默认值)
|
||||
* `Right`
|
||||
|
||||
### Additional content
|
||||
|
||||
`abp-dropdown-menu` 也可以包含其他HTML元素,例如标题,段落,分隔符或form元素.
|
||||
|
||||
示例:
|
||||
|
||||
````xml
|
||||
<abp-dropdown >
|
||||
<abp-dropdown-button button-type="Secondary" text="Dropdown With Form"/>
|
||||
<abp-dropdown-menu>
|
||||
<form class="px-4 py-3">
|
||||
<abp-input asp-for="EmailAddress"></abp-input>
|
||||
<abp-input asp-for="Password"></abp-input>
|
||||
<abp-input asp-for="RememberMe"></abp-input>
|
||||
<abp-button button-type="Primary" text="Sign In" type="submit" />
|
||||
</form>
|
||||
<abp-dropdown-divider></abp-dropdown-divider>
|
||||
<abp-dropdown-item href="#">New around here? Sign up</abp-dropdown-item>
|
||||
<abp-dropdown-item href="#">Forgot password?</abp-dropdown-item>
|
||||
</abp-dropdown-menu>
|
||||
</abp-dropdown>
|
||||
````
|
||||
@ -0,0 +1,273 @@
|
||||
# 栅格
|
||||
|
||||
## 介绍
|
||||
|
||||
ABP标签助手基于bootstrap栅格系统.
|
||||
|
||||
## Demo
|
||||
|
||||
参阅[网络demo页面](https://bootstrap-taghelpers.abp.io/Components/Grids)查看示例.
|
||||
|
||||
### Sizing
|
||||
|
||||
**等宽:** 创建等宽的列.
|
||||
|
||||
示例:
|
||||
|
||||
````xml
|
||||
<abp-container>
|
||||
<abp-row>
|
||||
<abp-column abp-border="Info">1 of 2</abp-column>
|
||||
<abp-column abp-border="Danger">2 of 2</abp-column>
|
||||
</abp-row>
|
||||
<abp-row>
|
||||
<abp-column abp-border="Primary">1 of 3</abp-column>
|
||||
<abp-column abp-border="Secondary">2 of 3</abp-column>
|
||||
<abp-column abp-border="Dark">3 of 3</abp-column>
|
||||
</abp-row>
|
||||
</abp-container>
|
||||
````
|
||||
|
||||
**列中断:** `abp-column-breaker` 用于中断当前行的自动放置宽度,然后在新行中开始.
|
||||
|
||||
示例:
|
||||
|
||||
````xml
|
||||
<abp-container>
|
||||
<abp-row>
|
||||
<abp-column>column</abp-column>
|
||||
<abp-column>column</abp-column>
|
||||
<abp-column-breaker/>
|
||||
<abp-column>column</abp-column>
|
||||
<abp-column>column</abp-column>
|
||||
</abp-row>
|
||||
</abp-container>
|
||||
````
|
||||
|
||||
**设置列宽度:** size属性用于设置特定列的宽度.
|
||||
|
||||
示例:
|
||||
|
||||
```xml
|
||||
<abp-container>
|
||||
<abp-row>
|
||||
<abp-column>1 of 3</abp-column>
|
||||
<abp-column size="_6">2 of 3 (wider)</abp-column>
|
||||
<abp-column>3 of 3</abp-column>
|
||||
</abp-row>
|
||||
<abp-row>
|
||||
<abp-column>1 of 3</abp-column>
|
||||
<abp-column size="_5">2 of 3 (wider)</abp-column>
|
||||
<abp-column>3 of 3</abp-column>
|
||||
</abp-row>
|
||||
</abp-container>
|
||||
```
|
||||
|
||||
**可变宽度内容:** 根据内容自动调整列的大小.
|
||||
|
||||
```xml
|
||||
<abp-container>
|
||||
<abp-row h-align="Center">
|
||||
<abp-column size-lg="_2" abp-border="Info">1 of 3</abp-column>
|
||||
<abp-column size-md="Auto" abp-border="Danger">Contrary to popular belief, Lorem Ipsum is not simply random text.</abp-column>
|
||||
<abp-column size-lg="_2" abp-border="Warning">3 of 3</abp-column>
|
||||
</abp-row>
|
||||
<abp-row>
|
||||
<abp-column>1 of 3</abp-column>
|
||||
<abp-column size-md="Auto">Variable width content</abp-column>
|
||||
<abp-column size-lg="_2">3 of 3</abp-column>
|
||||
</abp-row>
|
||||
</abp-container>
|
||||
```
|
||||
|
||||
### 响应类
|
||||
|
||||
响应式类可以在abp标签中强类型使用.
|
||||
|
||||
```xml
|
||||
<abp-row>
|
||||
<abp-column size-sm="_8">col-sm-8</abp-column>
|
||||
<abp-column size-sm="_4">col-sm-4</abp-column>
|
||||
</abp-row>
|
||||
<abp-row>
|
||||
<abp-column size-sm="_">col-sm</abp-column>
|
||||
<abp-column size-sm="_">col-sm</abp-column>
|
||||
<abp-column size-sm="_">col-sm</abp-column>
|
||||
<abp-column size-sm="_">col-sm</abp-column>
|
||||
</abp-row>
|
||||
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
|
||||
<abp-row>
|
||||
<abp-column size="_12" size-md="_8">.col-12 .col-md-8</abp-column>
|
||||
<abp-column size="_6" size-md="_4">.col-6 .col-md-4</abp-column>
|
||||
</abp-row>
|
||||
|
||||
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
|
||||
<abp-row>
|
||||
<abp-column size="_6" size-md="_4">.col-6 .col-md-4</abp-column>
|
||||
<abp-column size="_6" size-md="_4">.col-6 .col-md-4</abp-column>
|
||||
<abp-column size="_6" size-md="_4">.col-6 .col-md-4</abp-column>
|
||||
</abp-row>
|
||||
|
||||
<!-- Columns are always 50% wide, on mobile and desktop -->
|
||||
<abp-row>
|
||||
<abp-column size="_6">.col-6</abp-column>
|
||||
<abp-column size="_6">.col-6</abp-column>
|
||||
</abp-row>
|
||||
```
|
||||
|
||||
### 对齐
|
||||
|
||||
可以使用强类型的abp标签在垂直和水平方向上进行列对齐.
|
||||
|
||||
**垂直对齐**: `v-align` 属性值用于对垂直齐列.
|
||||
|
||||
示例:
|
||||
|
||||
```xml
|
||||
<abp-container>
|
||||
<abp-row v-align="Start">
|
||||
<abp-column>column</abp-column>
|
||||
<abp-column>column</abp-column>
|
||||
<abp-column>column</abp-column>
|
||||
</abp-row>
|
||||
<abp-row v-align="Center">
|
||||
<abp-column>column</abp-column>
|
||||
<abp-column>column</abp-column>
|
||||
<abp-column>column</abp-column>
|
||||
</abp-row>
|
||||
<abp-row v-align="End">
|
||||
<abp-column>column</abp-column>
|
||||
<abp-column>column</abp-column>
|
||||
<abp-column>column</abp-column>
|
||||
</abp-row>
|
||||
</abp-container>
|
||||
```
|
||||
|
||||
**水平对齐**: `h-align` 属性值用于对水平齐列.
|
||||
|
||||
示例:
|
||||
|
||||
```xml
|
||||
<abp-container>
|
||||
<abp-row h-align="Start">
|
||||
<abp-column size="_4">One of two columns</abp-column>
|
||||
<abp-column size="_4">One of two columns</abp-column>
|
||||
</abp-row>
|
||||
<abp-row h-align="Center">
|
||||
<abp-column size="_4">One of two columns</abp-column>
|
||||
<abp-column size="_4">One of two columns</abp-column>
|
||||
</abp-row>
|
||||
<abp-row h-align="End">
|
||||
<abp-column size="_4">One of two columns</abp-column>
|
||||
<abp-column size="_4">One of two columns</abp-column>
|
||||
</abp-row>
|
||||
<abp-row h-align="Around">
|
||||
<abp-column size="_4">One of two columns</abp-column>
|
||||
<abp-column size="_4">One of two columns</abp-column>
|
||||
</abp-row>
|
||||
<abp-row h-align="Between">
|
||||
<abp-column size="_4">One of two columns</abp-column>
|
||||
<abp-column size="_4">One of two columns</abp-column>
|
||||
</abp-row>
|
||||
</abp-container>
|
||||
```
|
||||
|
||||
**无间隙**: 可以使用 `gutters="false"` 删除预定义栅格类中列之间的栅格线. 这会从 `abp-row` 中消除负边距,并从所有直接子列中消除水平边距.
|
||||
|
||||
示例:
|
||||
|
||||
```xml
|
||||
<abp-row gutters="false">
|
||||
<abp-column size="_8">One of two columns</abp-column>
|
||||
<abp-column size="_4">One of two columns</abp-column>
|
||||
</abp-row>
|
||||
```
|
||||
|
||||
**列包装**: 如果在一行中放置超过12列,则将每组额外的列作为一个单元包装到新行上.
|
||||
|
||||
示例:
|
||||
|
||||
```xml
|
||||
<abp-row>
|
||||
<abp-column size="_9">.col-9</abp-column>
|
||||
<abp-column size="_4">.col-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</abp-column>
|
||||
<abp-column size="_6">.col-6<br>Subsequent columns continue along the new line.s</abp-column>
|
||||
</abp-row>
|
||||
```
|
||||
|
||||
### 重新排序
|
||||
|
||||
**Order类**: `order` 属性用于控制内容的视觉顺序.
|
||||
|
||||
示例:
|
||||
|
||||
```xml
|
||||
<abp-container>
|
||||
<abp-row>
|
||||
<abp-column order="_12">First, but Last</abp-column>
|
||||
<abp-column>Second, but unordered</abp-column>
|
||||
<abp-column order="_6">Third, but Second</abp-column>
|
||||
</abp-row>
|
||||
</abp-container>
|
||||
```
|
||||
|
||||
**偏移列**: `offset` 属性用于设置栅格列的偏移量.
|
||||
|
||||
示例:
|
||||
|
||||
```xml
|
||||
<abp-container>
|
||||
<abp-row>
|
||||
<abp-column size-md="_4">.col-md-4</abp-column>
|
||||
<abp-column size-md="_4" offset-md="_4">.col-md-4 .offset-md-4</abp-column>
|
||||
</abp-row>
|
||||
<abp-row>
|
||||
<abp-column size-md="_3" offset-md="_3">.col-md-3 .offset-md-3</abp-column>
|
||||
<abp-column size-md="_3" offset-md="_3">.col-md-3 .offset-md-3</abp-column>
|
||||
</abp-row>
|
||||
<abp-row>
|
||||
<abp-column size-md="_6" offset-md="_3">.col-md-6 .offset-md-3</abp-column>
|
||||
</abp-row>
|
||||
<abp-row>
|
||||
<abp-column size-sm="_5" size-md="_6">.col-sm-5 .col-md-6</abp-column>
|
||||
<abp-column size-sm="_5" offset-sm="_2" size-md="_6" offset-md="_">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</abp-column>
|
||||
</abp-row>
|
||||
<abp-row>
|
||||
<abp-column size-sm="_6" size-md="_5" size-lg="_6">col-sm-6 .col-md-5 .col-lg-6</abp-column>
|
||||
<abp-column size-sm="_6" size-md="_5" offset-md="_2" size-lg="_6" offset-lg="_">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</abp-column>
|
||||
</abp-row>
|
||||
</abp-container>
|
||||
```
|
||||
|
||||
## 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`
|
||||
@ -0,0 +1,76 @@
|
||||
# 列表组
|
||||
|
||||
## 介绍
|
||||
|
||||
`abp-list-group` 是列表组内容的主要容器.
|
||||
|
||||
基本用法:
|
||||
|
||||
````xml
|
||||
<abp-list-group>
|
||||
<abp-list-group-item>Cras justo odio</abp-list-group-item>
|
||||
<abp-list-group-item>Dapibus ac facilisis in</abp-list-group-item>
|
||||
<abp-list-group-item>Morbi leo risus</abp-list-group-item>
|
||||
<abp-list-group-item>Vestibulum at eros</abp-list-group-item>
|
||||
</abp-list-group>
|
||||
````
|
||||
|
||||
## 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
|
||||
<abp-list-group>
|
||||
<abp-list-group-item>Cras justo odio <span abp-badge-pill="Primary">14</span></abp-list-group-item>
|
||||
<abp-list-group-item>Dapibus ac facilisis in <span abp-badge-pill="Primary">2</span></abp-list-group-item>
|
||||
<abp-list-group-item>Morbi leo risus <span abp-badge-pill="Primary">1</span></abp-list-group-item>
|
||||
</abp-list-group>
|
||||
````
|
||||
@ -0,0 +1,79 @@
|
||||
# 模态框
|
||||
|
||||
## 介绍
|
||||
|
||||
`abp-modal` 是创建模态框的主要元素.
|
||||
|
||||
基本用法:
|
||||
|
||||
````xml
|
||||
<abp-button button-type="Primary" data-toggle="modal" data-target="#myModal">Launch modal</abp-button>
|
||||
|
||||
<abp-modal centered="true" size="Large" id="myModal">
|
||||
<abp-modal-header title="Modal title"></abp-modal-header>
|
||||
<abp-modal-body>
|
||||
Woohoo, you're reading this text in a modal!
|
||||
</abp-modal-body>
|
||||
<abp-modal-footer buttons="Close"></abp-modal-footer>
|
||||
</abp-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
|
||||
<abp-button button-type="Primary" data-toggle="modal" data-target="#myModal">Launch modal</abp-button>
|
||||
|
||||
<abp-modal centered="true" size="Large" id="myModal" static="true">
|
||||
<abp-modal-header title="Modal title"></abp-modal-header>
|
||||
<abp-modal-body>
|
||||
Woohoo, you're reading this text in a modal!
|
||||
</abp-modal-body>
|
||||
<abp-modal-footer buttons="@(AbpModalButtons.Save|AbpModalButtons.Close)" button-alignment="Between"></abp-modal-footer>
|
||||
</abp-modal>
|
||||
````
|
||||
|
||||
### button-alignment
|
||||
|
||||
指定模态页脚按钮的位置. 应为以下值之一:
|
||||
|
||||
* `Default` (默认值)
|
||||
* `Start`
|
||||
* `Center`
|
||||
* `Around`
|
||||
* `Between`
|
||||
* `End`
|
||||
@ -0,0 +1,55 @@
|
||||
# 分页器
|
||||
|
||||
## 介绍
|
||||
|
||||
`abp-paginator` 是分页器的abp标签. 需要 `Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Pagination.PagerModel` 类型的模型.
|
||||
|
||||
基本用法:
|
||||
|
||||
````xml
|
||||
<abp-paginator model="Model.PagerModel" show-info="true"></abp-paginator>
|
||||
````
|
||||
|
||||
模型:
|
||||
|
||||
````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`
|
||||
@ -0,0 +1,68 @@
|
||||
# 进度条
|
||||
|
||||
## 介绍
|
||||
|
||||
`abp-progress-bar` 是进度条状态的abp标签.
|
||||
|
||||
基本用法:
|
||||
|
||||
````xml
|
||||
<abp-progress-bar value="70" />
|
||||
|
||||
<abp-progress-bar type="Warning" value="25"> %25 </abp-progress-bar>
|
||||
|
||||
<abp-progress-bar type="Success" value="40" strip="true"/>
|
||||
|
||||
<abp-progress-bar type="Dark" value="10" min-value="5" max-value="15" strip="true"> %50 </abp-progress-bar>
|
||||
|
||||
<abp-progress-group>
|
||||
<abp-progress-part type="Success" value="25"/>
|
||||
<abp-progress-part type="Danger" value="10" strip="true"> %10 </abp-progress-part>
|
||||
<abp-progress-part type="Primary" value="50" animation="true" strip="true" />
|
||||
</abp-progress-group>
|
||||
````
|
||||
|
||||
## 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`
|
||||
@ -0,0 +1,91 @@
|
||||
# 标签页
|
||||
|
||||
## 介绍
|
||||
|
||||
`abp-tab` 是从引导标签元素派生的基本标签导航内容容器.
|
||||
|
||||
基本用法:
|
||||
|
||||
````xml
|
||||
<abp-tabs>
|
||||
<abp-tab title="Home">
|
||||
Content_Home
|
||||
</abp-tab>
|
||||
<abp-tab-link title="Link" href="#" />
|
||||
<abp-tab title="profile">
|
||||
Content_Profile
|
||||
</abp-tab>
|
||||
<abp-tab-dropdown title="Contact" name="ContactDropdown">
|
||||
<abp-tab title="Contact 1" parent-dropdown-name="ContactDropdown">
|
||||
Content_1_Content
|
||||
</abp-tab>
|
||||
<abp-tab title="Contact 2" parent-dropdown-name="ContactDropdown">
|
||||
Content_2_Content
|
||||
</abp-tab>
|
||||
</abp-tab-dropdown>
|
||||
</abp-tabs>
|
||||
````
|
||||
|
||||
## Demo
|
||||
|
||||
参阅[卡面demo页面](https://bootstrap-taghelpers.abp.io/Components/Cards)查看示例.
|
||||
|
||||
## abp-tab Attributes
|
||||
|
||||
- **title**: 设置标签页菜单文字.
|
||||
- **name:** 设置生成元素的"id"属性. 默认值为Guid. 除非使用Jquery更改或修改了选项卡,否则不需要.
|
||||
- **active**: 设置active标签页.
|
||||
|
||||
示例:
|
||||
|
||||
````xml
|
||||
<abp-tabs name="TabId">
|
||||
<abp-tab name="nav-home" title="Home">
|
||||
Content_Home
|
||||
</abp-tab>
|
||||
<abp-tab name="nav-profile" active="true" title="profile">
|
||||
Content_Profile
|
||||
</abp-tab>
|
||||
<abp-tab name="nav-contact" title="Contact">
|
||||
Content_Contact
|
||||
</abp-tab>
|
||||
</abp-tabs>
|
||||
````
|
||||
|
||||
### Pills
|
||||
|
||||
示例:
|
||||
|
||||
````xml
|
||||
<abp-tabs tab-style="Pill">
|
||||
<abp-tab title="Home">
|
||||
Content_Home
|
||||
</abp-tab>
|
||||
<abp-tab title="profile">
|
||||
Content_Profile
|
||||
</abp-tab>
|
||||
<abp-tab title="Contact">
|
||||
Content_Contact
|
||||
</abp-tab>
|
||||
</abp-tabs>
|
||||
````
|
||||
|
||||
### Vertical
|
||||
|
||||
**vertical-header-size**: 设置标签标题的列宽.
|
||||
|
||||
示例:
|
||||
|
||||
````xml
|
||||
<abp-tabs tab-style="PillVertical" vertical-header-size="_2" >
|
||||
<abp-tab active="true" title="Home">
|
||||
Content_Home
|
||||
</abp-tab>
|
||||
<abp-tab title="profile">
|
||||
Content_Profile
|
||||
</abp-tab>
|
||||
<abp-tab title="Contact">
|
||||
Content_Contact
|
||||
</abp-tab>
|
||||
</abp-tabs>
|
||||
````
|
||||
@ -0,0 +1,33 @@
|
||||
# 提示工具
|
||||
|
||||
## 介绍
|
||||
|
||||
`abp-tooltip` 是提示工具的abp标签.
|
||||
|
||||
基本用法:
|
||||
|
||||
````xml
|
||||
<abp-button abp-tooltip="Tooltip">
|
||||
Tooltip Default
|
||||
</abp-button>
|
||||
|
||||
<abp-button abp-tooltip-top="Tooltip">
|
||||
Tooltip on top
|
||||
</abp-button>
|
||||
|
||||
<abp-button abp-tooltip-right="Tooltip">
|
||||
Tooltip on right
|
||||
</abp-button>
|
||||
|
||||
<abp-button abp-tooltip-bottom="Tooltip">
|
||||
Tooltip on bottom
|
||||
</abp-button>
|
||||
|
||||
<abp-button disabled="true" abp-tooltip="Tooltip">
|
||||
Disabled button Tooltip
|
||||
</abp-button>
|
||||
````
|
||||
|
||||
## Demo
|
||||
|
||||
参阅[提示工具demo页面](https://bootstrap-taghelpers.abp.io/Components/Tooltips)查看示例.
|
||||
|
Before Width: | Height: | Size: 1.2 KiB |
Loading…
Reference in new issue