如何在 React Semantic UI 中的 Progressbar 上设置自定义文本

激酶

有什么办法,如何在 Progress 组件上设置自定义文本?我想这样设置秒:

http://prntscr.com/kk7ms0

我没有找到任何解决方案如何做到这一点。我有百分比值,但我想用“标题”秒设置时间。

所以,我不想在进度条下使用“标签”。

感谢您的帮助。

edant92

我有办法!它有点老套,有点超出 React Semantic UI 的领域,但它可以完成工作。

HTML:

<div className='ui progress'>
  <div className='bar' style={{width: `${percent}%`}}>
    <div className='progress progress-text'>{percent}% Completed</div>
  </div>
</div>

CSS:

.progress-text {
   text-align: center !important;
   right: 0 !important;
   left: 0 !important;
}

让我知道这是否需要扩展,但我认为这涵盖了您的问题!:)

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在Semantic-react-ui的Modal屏幕上显示弹出窗口?

来自分类Dev

React - 如何在 Select Material UI 中自定义下拉菜单

来自分类Dev

如何在JFace向导(Java)中的按钮上设置自定义文本

来自分类Dev

修复了 react-semantic-ui 中的侧边栏

来自分类Dev

如何使用 react-semantic-ui 将选定的值设置为状态

来自分类Dev

如何在 React Material UI 的 AppBar 组件中设置容器?

来自分类Dev

如何在材料UI中应用自定义主题

来自分类Dev

如何在Android中自定义UI大小元素

来自分类Dev

如何在material-ui中自定义DialogTitle

来自分类Dev

如何在react-native中为webview请求设置自定义标头

来自分类Dev

如何在JavaFX中设置ProgressBar组件的样式

来自分类Dev

如何在 Semantic-UI-React 下拉菜单中选择图像?

来自分类Dev

如何在react js中的材料ui中的列表项上设置单击侦听器

来自分类Dev

如何在React中应用UI道具

来自分类Dev

如何在React Hook中添加自定义className?

来自分类Dev

如何在React中实现自定义光标组件

来自分类Dev

如何在 React 中创建自定义表?

来自分类Dev

如何自定义React Material UI的Tab组件的文本样式

来自分类Dev

如何使用 Semantic-UI 中的占位符元素?

来自分类Dev

如何在Laravel 5.2中增加Semantic-UI表的计数

来自分类Dev

如何在Webpack Angular 2中包含jQuery和Semantic-ui

来自分类Dev

HERE Map UI JS-如何在地图UI中添加自定义按钮?

来自分类Dev

如何在SAP UI中的控制器中定义自定义控制器?

来自分类Dev

如何在KV lang中设置来自父项的自定义窗口小部件的文本?

来自分类Dev

如何在iOS中的自定义tableviewcell中的图像上添加文本标签

来自分类Dev

如何在react native的透明视图上创建自定义UI?

来自分类Dev

Semantic-ui-react:如何在没有点击/悬停的情况下触发弹出窗口?

来自分类Dev

如何在 React -Semantic UI - Dropdown 组件中生成带有数字数组的下拉列表?

来自分类常见问题

如何在Android中创建循环ProgressBar?

Related 相关文章

  1. 1

    如何在Semantic-react-ui的Modal屏幕上显示弹出窗口?

  2. 2

    React - 如何在 Select Material UI 中自定义下拉菜单

  3. 3

    如何在JFace向导(Java)中的按钮上设置自定义文本

  4. 4

    修复了 react-semantic-ui 中的侧边栏

  5. 5

    如何使用 react-semantic-ui 将选定的值设置为状态

  6. 6

    如何在 React Material UI 的 AppBar 组件中设置容器?

  7. 7

    如何在材料UI中应用自定义主题

  8. 8

    如何在Android中自定义UI大小元素

  9. 9

    如何在material-ui中自定义DialogTitle

  10. 10

    如何在react-native中为webview请求设置自定义标头

  11. 11

    如何在JavaFX中设置ProgressBar组件的样式

  12. 12

    如何在 Semantic-UI-React 下拉菜单中选择图像?

  13. 13

    如何在react js中的材料ui中的列表项上设置单击侦听器

  14. 14

    如何在React中应用UI道具

  15. 15

    如何在React Hook中添加自定义className?

  16. 16

    如何在React中实现自定义光标组件

  17. 17

    如何在 React 中创建自定义表?

  18. 18

    如何自定义React Material UI的Tab组件的文本样式

  19. 19

    如何使用 Semantic-UI 中的占位符元素?

  20. 20

    如何在Laravel 5.2中增加Semantic-UI表的计数

  21. 21

    如何在Webpack Angular 2中包含jQuery和Semantic-ui

  22. 22

    HERE Map UI JS-如何在地图UI中添加自定义按钮?

  23. 23

    如何在SAP UI中的控制器中定义自定义控制器?

  24. 24

    如何在KV lang中设置来自父项的自定义窗口小部件的文本?

  25. 25

    如何在iOS中的自定义tableviewcell中的图像上添加文本标签

  26. 26

    如何在react native的透明视图上创建自定义UI?

  27. 27

    Semantic-ui-react:如何在没有点击/悬停的情况下触发弹出窗口?

  28. 28

    如何在 React -Semantic UI - Dropdown 组件中生成带有数字数组的下拉列表?

  29. 29

    如何在Android中创建循环ProgressBar?

热门标签

归档