Skip to content

内置样式

提示

全局使用内置样式,请按照全局配置进行配置后即可正常使用

说明

fusions-ui 组件库功能的实现,并不依赖全局样式,内置的一些类名,只是提供一些基础且常用的样式,方便开发者快速上手,仅此而已。

文字省略

fu-line-1fu-line-2fu-line-3fu-line-4fu-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>

提示

  1. 此场景不建议使用 fusions-uifu-button 组件,使用原生的 button 即可
  2. 有时候,我们可能弹出询问用户是否授权,可以用 fu-modal 组件,此组件有一个 confirm-buttonslot 用来替换 确定 按钮,用户点击确定,即可授权