{{:ModuleInclude('public/header')}}

# 配色说明

- 基准数大小

  -

  --html-body-size: 10px;

- 背景颜色

  --body-bg-color: #f7f7f7;

- 价格颜色

  --color-price: #E22C08;

- 红色

  --color-red: #f00;

- 默认圆角

  --border-radius: 0.4rem;

- 小圆角

  --border-radius-sm: 0.2rem;

- 大圆角

  --border-radius-lg:0.8rem;

- 阴影效果

  --box-shadow: 0 5px 20px rgba(50,55,58,0.1);

- 小阴影效果

  --box-shadow-sm: 0 2px 8px rgba(50,55,58,0.1);

- 大阴影效果

  --box-shadow-lg: 0 8px 34px rgba(50,55,58,0.1);

# 辅助class说明

- class说明

  am-margin-top-sm

# 操作按钮

### 默认样式

- 默认

  .am-btn-default

- 主色按钮

  .am-btn-primary

- 次色按钮

  .am-btn-secondary

- 成功按钮

  .am-btn-success

- 警告按钮

  .am-btn-warning

- 危险按钮

  .am-btn-danger

- 辅助按钮

  .am-btn-assist

- 链接

  链接按钮

  .am-btn-link

### 空心按钮

- 默认

  .am-btn-default-plain

- 主色按钮

  .am-btn-primary-plain

- 次色按钮

  .am-btn-secondary-plain

- 成功按钮

  .am-btn-success-plain

- 警告按钮

  .am-btn-warning-plain

- 危险按钮

  .am-btn-danger-plain

### 圆角按钮.am-radius

### 椭圆形按钮.am-round

### 激活状态.am-active

### 激活状态.am-disabled或disabled

### 按钮尺寸

### 块级显示.am-block

### 按钮 Icon

结账

# 小徽章Badge

### 默认样式

1 2 3 4 5 6
Default Free Secondary Success Warning Danger

### 空心样式-plain

1 2 3 4 5 6 Allmobilize
Default Free Secondary Success Warning Danger

### 圆角样式.am-radius

1 2 3 4 5 6 Allmobilize
Default Free Secondary Success Warning Danger

### 椭圆形按钮.am-round

1 2 3 4 5 6 Allmobilize
Default Free Secondary Success Warning Danger

### 大小 <spoan>结合辅助类中的字号 class，改变徽章大小。</spoan>

default small normal large x large

# 警告框

### 默认样式

default

primary

链接地址

secondary

链接地址

warning

链接地址

danger

链接地址

success

链接地址

# 输入组框

下面的代码中演示了结合 Icon 组件及添加文字的样式。

.00
$ .00

# 输入框结合 Button

需要用 .am-input-group-btn 包住按钮，而不是 .am-input-group-label。

# 尺寸

在 .am-input-group 添加标明尺寸的 class 即可。包含 .am-input-group-lg、.am-input-group-sm。

@
@
@

# 颜色

在 .am-input-group 添加标明尺寸的 class 即可。包含 .am-input-group-lg、.am-input-group-sm。

使用按钮时除了在容器上设置颜色 class 外，还需要设置按钮的样式。

{{:ModuleInclude('dev/public/doc')}}
{{:ModuleInclude('public/footer')}}