@okcy/yui v0.1.32

拉取 npm 包。

npm install @okcy/yui

解决uni-app Mixins 的Prop 不生效

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

投影（elevation）

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

自定义颜色

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

间距（margin/padding）

将 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

.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*。

文本（font-size）

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

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

布局（flex）

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

自定义响应布局样式

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

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

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

主题设置（theme）

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

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

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

其它

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

颜色 Colors

在scss中调用颜色map-get(颜色变量,key)

map-get($blue,lighten-4 )