内置样式
提示
全局使用内置样式,请按照全局配置进行配置后即可正常使用
说明
fusions-ui 组件库功能的实现,并不依赖全局样式,内置的一些类名,只是提供一些基础且常用的样式,方便开发者快速上手,仅此而已。
文字省略
fu-line-1、fu-line-2、fu-line-3、fu-line-4、fu-line-5 五个类名在文字超出内容盒子时,分别只显示一行、两行、三行、四行、五行+省略号。
html
<text class="fu-line-1">这里显示一行文字,内容超出隐藏并显示省略号</text>重置按钮样式
uni-app和微信小程序、支付宝小程序等的 button 按钮是自带样式的,比如边框、内边距、行高等,在某些特殊情况场景下,我们可能会需要清楚这些样式,仅保留按钮文本,就像 view 元素一样,不带预置样式,场景:
在小程序中,我们知道 button 设置 open-type 属性为 getUserInfo(或者手机号授权、分享等场景),点击按钮可以弹出让用户授权的系统弹窗,有时候我们可能需要按钮形式展示,但也有时候我们仅需要 点击登录/授权/分享 等文字,同时具备获取相应的功能,就需要清楚按钮的样式了,只需要在 button 元素上添加 class="fu-reset-button" 类名即可。
html
<button class="fu-reset-button">授权登录</button>提示
- 此场景不建议使用
fusions-ui的fu-button组件,使用原生的button即可 - 有时候,我们可能弹出询问用户是否授权,可以用
fu-modal组件,此组件有一个confirm-button的slot用来替换确定按钮,用户点击确定,即可授权