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 |

| 类 | 描述 | | :---- | :---- | | z-flex | 指定为 Flex 布局 |

| 类 | 描述 | | :---- | :---- | | 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-n[n] | 上外负边距 | | mb-n[n] | 下外负边距 | | ml-n[n] | 左外负边距 | | mr-n[n] | 右外负边距 | | mx-n[n] | 左右负外边距 | | my-n[n] | 上下负外边距 | | ma-n[n] | 负外边距 |

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 | 溢出不换行且截断 |