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-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
到 4px2
- 设置margin
或者padding
到 8px3
- 设置margin
或者padding
到 12px4
- 设置margin
或者padding
到 16px5
- 设置margin
或者padding
到 20px6
- 设置margin
或者padding
到 24px7
- 设置margin
或者padding
到 28px8
- 设置margin
或者padding
到 32px9
- 设置margin
或者padding
到 36px10
- 设置margin
或者padding
到 40px11
- 设置margin
或者padding
到 44px12
- 设置margin
或者padding
到 48pxn1
- 将负的margin
设置到 4pxn2
- 将负的margin
设置到 8pxn3
- 将负的margin
设置到 12pxn4
- 将负的margin
设置到 16pxn5
- 将负的margin
设置到 20pxn6
- 将负的margin
设置到 24pxn7
- 将负的margin
设置到 28pxn8
- 将负的margin
设置到 32pxn9
- 将负的margin
设置到 36pxn10
- 将负的margin
设置到 40pxn11
- 将负的margin
设置到 44pxn12
- 将负的margin
设置到 48pxauto
- 设置边距为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--dark
or.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
map-get($blue,lighten-4 )