1.0.3 • Published 12 months ago
Last release12 months ago
nifty-style
nifty-style是一个实用的样式库。
安装
从GitHub上下载最新的nifty-style，或使用npm安装:
npm install nifty-style
如何使用
import 'nifty-style'
目录
background
cursor
display
elevation
flex
rounded
solid
margin
padding
text
深色背景
| 类 | 描述 |
| :---- | :---- |
| bg-red | 嫣红 |
| bg-orange | 橘橙 |
| bg-yellow | 明黄 |
| bg-olive | 橄榄 |
| bg-green | 森绿 |
| bg-cyan | 天青 |
| bg-blue | 海蓝 |
| bg-purple | 姹紫 |
| bg-mauve | 木槿 |
| bg-pink | 桃粉 |
| bg-brown | 棕褐 |
| bg-grey | 玄灰 |
| bg-gray | 草灰 |
| bg-black | 墨黑 |
| bg-white | 雅白 |
浅色背景
<!-- [深色背景].light -->
<div class="bg-red light"></div
渐变背景
| 类 | 描述 |
| :---- | :---- |
| bg-gradual-red | 魅红 |
| bg-gradual-orange | 鎏金 |
| bg-gradual-green | 翠柳 |
| bg-gradual-blue | 靛青 |
| bg-gradual-purple | 惑紫 |
| bg-gradual-pink | 霞彩 |
| 类 | 描述 |
|---|
| c-auto | 默认 浏览器设置的光标 |
| c-crosshair | 光标呈现为十字线 |
| c-default | 默认光标（通常是一个箭头） |
| c-e-resize | 此光标指示矩形框的边缘可被向右（东）移动 |
| c-help | 此光标指示可用的帮助（通常是一个问号或一个气球） |
| c-move | 此光标指示某对象可被移动 |
| c-n-resize | 此光标指示矩形框的边缘可被向上（北）移动 |
| c-ne-resize | 此光标指示矩形框的边缘可被向上及向右移动（北/东） |
| c-nw-resize | 此光标指示矩形框的边缘可被向上及向左移动（北/西） |
| c-pointer | 光标呈现为指示链接的指针（一只手） |
| c-progress | 此光标指示正在加载 |
| c-s-resize | 此光标指示矩形框的边缘可被向下移动（南） |
| c-se-resize | 此光标指示矩形框的边缘可被向下及向右移动（南/东） |
| c-sw-resize | 此光标指示矩形框的边缘可被向下及向左移动（南/西） |
| c-text | 此光标指示文本 |
| c-w-resize | 此光标指示矩形框的边缘可被向左移动（西） |
| c-wait | 此光标指示程序正忙（通常是一只表或沙漏） |
| 类 | 描述 |
|---|
| d-none | 此元素不会被显示 |
| d-inline | 默认 此元素会被显示为内联元素 |
| d-inline-block | 行内块元素 |
| d-block | 此元素将显示为块级元素 |
为元素指定自定义的z-index
| 类 | 类 | 类 | 类 | 类 | 类 | 类 |
| :---- | :---- | :---- | :---- | :---- | :---- | :---- |
| elevation-0 | elevation-1 | elevation-2 | elevation-3 | elevation-4 | elevation-5 | elevation-6 |
| elevation-7 | elevation-8 | elevation-9 | elevation-10 | elevation-11 | elevation-12 | elevation-13 |
| elevation-14 | elevation-15 | elevation-16 | elevation-17 | elevation-18 | elevation-19 | elevation-20 |
| elevation-21 | elevation-22 | elevation-23 | elevation-24 |
| 类 | 描述 |
|---|
| flex-row | 水平方向为主轴 左端为起点 |
| flex-row-reverse | 水平方向为主轴 右端为起点 |
| flex-column | 垂直方向为主轴 上沿为起点 |
| flex-column-reverse | 垂直方向为主轴 下沿为起点 |
| 类 | 描述 |
|---|
| justify-start | 左对齐 |
| justify-end | 右对齐 |
| justify-center | 居中 |
| justify-between | 两端对齐 |
| justify-around | 环绕对齐 |
| 类 | 描述 |
|---|
| align-start | 交叉轴起点对齐 |
| align-end | 交叉轴终点对齐 |
| align-center | 交叉轴中点对齐 |
| align-baseline | 项目第一行文字的基线对齐 |
| align-stretch | 项目占满整个容器的高度 |
| 类 | 描述 |
|---|
| align-self-start | 当前元素交叉轴起点对齐 |
| align-self-end | 当前元素交叉轴终点对齐 |
| align-self-center | 当前元素交叉轴中点对齐 |
| align-self-baseline | 当前元素第一行文字的基线对齐 |
| align-self-stretch | 当前元素占满整个容器的高度 |
| align-self-auto | 默认值 |
| 类 | 描述 |
|---|
| align-content-start | 交叉轴的起点对齐 |
| align-content-end | 交叉轴的终点对齐 |
| align-content-center | 交叉轴的中点对齐 |
| align-content-between | 交叉轴两端对齐 |
| align-content-around | 每根轴线两侧的间隔都相等 |
| 类 | 描述 |
|---|
| flex-nowrap | 不换行 |
| flex-wrap | 换行 第一行在上方 |
| flex-wrap-reverse | 换行 第一行在下方 |
| 类 | 描述 |
|---|
| flex-shrink-0 | 阻止该条件的发生 |
| flex-shrink-1 | 允许项目收缩到它的内容所需要的空间 |
| flex-grow-0 | 阻止该条件的发生 |
| flex-grow-1 | 允许元素增长以填充可用的空间 |
| 类 | 描述 |
|---|
| float-left | 左浮动 |
| float-right | 右浮动 |
| float-none | 默认值 不浮动 |
| 类 | 描述 |
|---|
| rounded-0 | 0px |
| rounded-sm | 4px |
| rounded-md | 8px |
| rounded-lg | 16px |
| rounded-xl | 24px |
| rounded-pill | 胶囊 |
| rounded-circle | 圆角 |
| 类 | 描述 |
|---|
| b-all | 边框 |
| b-top | 上边框 |
| b-right | 右边框 |
| b-bottom | 下边框 |
| b-left | 左边框 |
| b-x | 水平方向边框 |
| b-y | 垂直方向边框 |
n为0~16的自然数
| 类 | 描述 |
| :---- | :---- |
| mt-n | 上外边距 |
| mt-auto | 浏览器设置的上外边距 |
| mb-n | 下外边距 |
| mb-auto | 浏览器设置的下外边距 |
| ml-n | 左外边距 |
| ml-auto | 浏览器设置的左外边距 |
| mr-n | 右外边距 |
| mr-auto | 浏览器设置的右外边距 |
| mx-n | 左右外边距 |
| mx-auto | 浏览器设置的左右外边距 |
| my-n | 上下外边距 |
| my-auto | 浏览器设置的上下外边距 |
| ma-n | 外边距 |
| ma-auto | 浏览器设置的外边距 |
| 类 | 描述 |
|---|
| mt-nn | 上外负边距 |
| mb-nn | 下外负边距 |
| ml-nn | 左外负边距 |
| mr-nn | 右外负边距 |
| mx-nn | 左右负外边距 |
| my-nn | 上下负外边距 |
| ma-nn | 负外边距 |
n为0~16的自然数
| 类 | 描述 |
| :---- | :---- |
| pt-n | 上内边距 |
| pb-n | 下内边距 |
| pl-n | 左内边距 |
| pr-n | 右内边距 |
| px-n | 左右内边距 |
| py-n | 上下内边距 |
| pa-n | 内边距 |
| 类 | 描述 |
|---|
| text-center | 居中 |
| text-justify | 两端对齐 |
| text-left | 左对齐 |
| text-right | 右对齐 |
| 类 | 描述 |
|---|
| text-red | 嫣红 |
| text-orange | 橘橙 |
| text-yellow | 明黄 |
| text-olive | 橄榄 |
| text-green | 森绿 |
| text-cyan | 天青 |
| text-blue | 海蓝 |
| text-purple | 姹紫 |
| text-mauve | 木槿 |
| text-pink | 桃粉 |
| text-brown | 棕褐 |
| text-grey | 玄灰 |
| text-gray | 草灰 |
| text-black | 墨黑 |
| text-white | 雅白 |
| 类 | 描述 |
|---|
| text-none | 默认 |
| text-line-through | 中划线 |
| text-overline | 上划线 |
| text-underline | 下划线 |
| 类 | 描述 |
|---|
| text-bolder | 900 |
| text-bold | 700 |
| text-medium | 500 |
| text-regular | 400 |
| text-light | 300 |
| text-thin | 100 |
| text-italic | italic |
| 类 | 描述 |
|---|
| text-primary | .87 |
| text-secondary | .6 |
| text-disabled | .38 |
| 类 | 描述 |
|---|
| text-12px | 12px |
| text-14px | 14px |
| text-16px | 16px |
| text-18px | 18px |
| text-20px | 20px |
| text-22px | 22px |
| text-24px | 24px |
| text-26px | 26px |
| text-28px | 28px |
| text-30px | 30px |
| text-32px | 32px |
| text-34px | 34px |
| text-36px | 36px |
| text-38px | 38px |
| text-40px | 40px |
| text-42px | 42px |
| text-44px | 44px |
| text-46px | 46px |
| text-48px | 48px |
| text-50px | 50px |
| text-52px | 52px |
| text-54px | 54px |
| text-56px | 56px |
| text-58px | 58px |
| text-60px | 60px |
| text-62px | 62px |
| text-64px | 64px |
| text-66px | 66px |
| 类 | 描述 |
|---|
| text-lowercase | 大写 |
| text-uppercase | 小写 |
| text-capitalize | 首字母大写 |
| 类 | 描述 |
|---|
| text-rtl | 文本方向从右到左 |
| text-ltr | 文本方向从左到右 |
| 类 | 描述 |
|---|
| text-no-wrap | 不换行 |
| text-truncate | 溢出不换行且截断 |