@okcy/yui

```shell npm install @okcy/yui ```

Usage no npm install needed!

<script type="module">
  import okcyYui from 'https://cdn.skypack.dev/@okcy/yui';
</script>

README

拉取 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-toppadding-top 的间距。
  • b - 应用 margin-bottompadding-bottom 的间距。
  • l - 适用 margin-leftpadding-left 的间距。
  • r - 应用 margin-rightpadding-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)

辅助类在给定的响应应用 marginpadding。这些类可以使用以下格式应用。{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 )