拉取 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--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
在scss中调用颜色map-get(颜色变量,key)
map-get($blue,lighten-4 )