@okcy/yui

$3

``shell
npm install @okcy/yui
`

$3

`typescript
import Sheet from "../Sheet/index.vue";
let sheetProps = (Sheet as any).options.props;
@Component({
props: {
...sheetProps
}
})
export default class Card extends Mixins(Sheet) {}

`


$3

共有25个投影层级，您可以使用类 elevation-{n} 去设置一个元素的投影，其中的 n 是一个对应投影层级所用到的介于 0-24 的整数。

#### 自定义颜色

`scss
// $index 0-24 层级
@include elevation($index, red);
`

$3

将 margin 或者 padding 应用于一个元素，范围在 0 到 12 之间。每个尺寸增量都设计成与常用 Material Design 间距对齐。这些类可以使用 {property}{direction}-{size} 这个格式来应用。

占位符 property 用来设置间距的类型：

- m - 对应 margin
- p - 对应 padding

占位符 direction 指定属性所应用到的方向：

- t - 应用 margin-top 和 padding-top 的间距。
- b - 应用 margin-bottom 和 padding-bottom 的间距。
- l - 适用 margin-left 和 padding-left 的间距。
- r - 应用 margin-right 和 padding-right 的间距。
- s - 应用 margin-left/padding-left (LTR mode) 和 margin-right/padding-right (RTL mode)
- e - 应用 margin-right/padding-right (LTR model) 和 margin-left/padding-left (RTL model)
- x - 同时对应-left和-right属性
- y - 同时对应-top和-bottom属性
- a - 在所有方向应用该属性的间距。

占位符 size 控制在 4px 间隔中的属性增量：

- 0 - 消除所有 margin 或者 padding 并设置为 0
- 1 - 设置 margin 或者 padding 到 4px
- 2 - 设置 margin 或者 padding 到 8px
- 3 - 设置 margin 或者 padding 到 12px
- 4 - 设置 margin 或者 padding 到 16px
- 5 - 设置 margin 或者 padding 到 20px
- 6 - 设置 margin 或者 padding 到 24px
- 7 - 设置 margin 或者 padding 到 28px
- 8 - 设置 margin 或者 padding 到 32px
- 9 - 设置 margin 或者 padding 到 36px
- 10 - 设置 margin 或者 padding 到 40px
- 11 - 设置 margin 或者 padding 到 44px
- 12 - 设置 margin 或者 padding 到 48px
- n1 - 将负的 margin 设置到 4px
- n2 - 将负的 margin 设置到 8px
- n3 - 将负的 margin 设置到 12px
- n4 - 将负的 margin 设置到 16px
- n5 - 将负的 margin 设置到 20px
- n6 - 将负的 margin 设置到 24px
- n7 - 将负的 margin 设置到 28px
- n8 - 将负的 margin 设置到 32px
- n9 - 将负的 margin 设置到 36px
- n10 - 将负的 margin 设置到 40px
- n11 - 将负的 margin 设置到 44px
- n12 - 将负的 margin 设置到 48px
- auto - 设置边距为 auto

`css
.ma-1
.pa-1
`

#### 响应式（media）

辅助类在给定的响应应用 margin 或 padding。这些类可以使用以下格式应用。{property}{direction}-{breakpoint}-{size}。这并不适用于 xs，因为它是推断出来的；例如，ma-xs-2 等于 ma-2。

占位符 breakpoint 指定属性所应用到的布局：

- xs - 适用 < 600px。
- sm - 适用 600px > < 960px。
- md - 适用 960px > < 1264px*。
- lg - 适用 1264px > < 1904px。
- xl - 适用 > 1904px*。

$3

您可以使用类 font-size-{n} 去设置一个文本大小，其中的 n 是一个对应文本层级所用到的介于 0-24 的整数。

文本初始大小10px 每一级向下加2px 。

$3

- .flex-wrap 自动换行
- .flex-column 竖向
- .flex-row 横向
- .flex 扩充
- .flex-center 上下居中
- .flex-center-justify 上下左右居中

#### 自定义响应布局样式

`scss
@include media() using ($breakpoint) {
.col-#{$breakpoint} {};
}
`

你也可以使用 media-name方法来处理一个class name，返回格式 {name}-{breakpoint}当$breakpoint= xs 时返回{name}。

`scss
@include theme() using ($material, $theme) {
@if $theme == dark {
} @else {
}
color: $material;
}
`

$3

主题设置会在你的 className 前加上样式 .theme--darkor.theme--light 。输出样式名.theme--light.className $color 支持#000和#fff 两个颜色。通常用于设置文本颜色。

使用时需要注意最终输出的样式将会是两套，不需要更改主题的样式不建议放在里面。

`scss
@include theme(className) using ($color) {
color: $color;
}
`

$3

- .text-left 文本左对齐
- .text-right 文本右对齐
- .text-center 文本居中
- .text-justify 文本两端对齐
- .text-nowrap 强制不换行
- .text-lowercase 全小写
- .text-uppercase 全大写
- .text-capitalize 每个单词以大写字母开头

$3


在scss中调用颜色map-get(颜色变量,key)
`scss
map-get($blue,lighten-4 )
``