使用Bootstrap Bar来增加Onboarding Progress Bar功能。
git初始代码https://github.com/chentianwei411/at-mentions-with-action-text
首先,开分支onboardingbar.
然后,
rails g scaffold Team user:references name
rails g migration AddTwitterToUsers twitter
rails db:migrate
在user.rb上添加
has_many :teams
在_navbar.html.erb上添加导航链接:
<li class="nav-item"><%= link_to "Teams", teams_path, class: "nav-link" %></li>
在用户注册app/views/devise/registrations/edit.html.erb上添加twitter field:
<div class="form-group">
<%= f.text_field :twitter, class: 'form-control', placeholder: 'Twitter Username' %>
</div>
在application_controller.rb上添加参数白名单:
protected
def configure_permitted_parameters
devise_parameter_sanitizer.permit(:sign_up, keys: [:name])
devise_parameter_sanitizer.permit(:account_update, keys: [:name, :twitter])
end
添加OnboardingBar:
在app/views/home/index.html.erb
<% if user_signed_in? %>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 25%"></div>
</div> <%= current_user.twitter? %>
<%= current_user.teams.any? %>
<% end %>

下一步,user.rb添加方法来判断onboardingbar的进度:
def onboarding_percent
steps = [:twitter?, :has_team?]
conplete = steps.select{ |step| send(step)}
complete.length / steps.length.to_f * 100
end def has_team?
teams.any?
end # select()方法,筛选返回值为true的数组项
# Ruby#send()方法,可以使用symbol符号方法
# 方法最后返回的值的计算必须使用浮点格式,不能是整数格式。使用to_f。
在views/home/index.html.erb,从bootstrap拷贝下来进度条代码,并修改
使用Bootstrap Bar来增加Onboarding Progress Bar功能。的更多相关文章
- WPF 4 开发Windows 7 任务栏(Overlay Icon、Thumbnail Toolbar、Progress Bar)
原文:WPF 4 开发Windows 7 任务栏(Overlay Icon.Thumbnail Toolbar.Progress Bar) 在上一篇我们介绍了如何在WPF 4 中开发Wind ...
- unity3d插件Daikon Forge GUI 中文教程5-高级控件listbox和progress bar的使用
3.3.listbox列表框 Atlas 图集: 下面应用到的精灵都是在这里的. ListBox中的内容: 背景精灵 图片的主颜色 Padding边距 Scrollbar 滚动条对象的预制体或者对象, ...
- Circular progress bar in Unity 3D
Circular progress bar in Unity 3D - UnityScripthttp://stackoverflow.com/questions/22662706/circular- ...
- Create a “% Complete” Progress Bar with JS Link in SharePoint 2013
Create a “% Complete” Progress Bar with JS Link in SharePoint 2013 SharePoint 2013 has a lot new fea ...
- unity3d插件Daikon Forge GUI 中文教程-5-高级控件listbox和progress bar的使用
(游戏蛮牛首发)大家好我是孙广东.官网提供了专业的视频教程http://www.daikonforge.com/dfgui/tutorials/,只是是在youtube上,要观看是须要FQ的. 只是教 ...
- C#控制台进度条(Programming Progress bar in C# Consle application)
以下代码从Stack Overflow,觉得以后会用到就收藏一下,我是辛勤的搬运工,咿呀咿呀哟- 1.showing percentage in .net console application(在. ...
- 打印进度条——(progress bar才是专业的)
# 打印进度条——(progress bar是专业的) import time for i in range(0,101,2): time.sleep(0.1) char_num = i//2 #打印 ...
- Python tqdm show progress bar
tqdm can help to show a smart progress bar, and it is very easy to use, just wrap any iterable with ...
- how to create a ring progress bar in web skills
how to create a ring progress bar in web skills ring progress bar & circle progress bar canvas j ...
随机推荐
- Oracle创建表空间、表、一级用户授权
---恢复内容开始--- 1. 安装: 百度一下你就知道 2. sqlplus登录/sqlplus命令登录 在安装Oracle时,你需要记住设置的“全局数据库名”(默认为orcl) 和 口令,在以两种 ...
- Blender学习
学习顺序(下面为引用他人的视频或博客) 51个必须知道的blender操作 https://www.bilibili.com/video/av4619930/ Blender常用快捷键一览表 http ...
- flask 电子邮件进阶实践-用模板发送163邮件
电子邮件进阶实践 下面来学习构建邮件的HTML正文,并使用模板组织内容. 一封电子邮件的正文可以是纯文本(text/plain),也可以是HTML格式的文本(text/html).处于全面的考虑,一封 ...
- v-charts
因为工作需要,使用v-chart也有一段时间了,期间针对配置图表也遇到了不少问题,在这里总结一下. 如何配置图表信息 echart的配置项可谓是相当的海量,能不看就不看.而v-chart对其进行了不少 ...
- java.sql.SQLException: ORA-28000: the account is locked
解决方式:参考博客https://blog.csdn.net/java280580332/article/details/70756533
- [dart学习]第四篇:函数和操作符(本篇未完待续)
接着学习dart的函数和操作符. 1.函数Function dart是一种真正的面向对象的语言,通常一个函数也是Function类型的对象,这也就是说可以把函数赋值给一个变量,或者作为另一个函数的入参 ...
- jqGrid实现表头自动换行
当jqGrid表头内容过多无法全部展示时,添加以下css实现表头自动换行. <style type="text/css"> /* jqgrid 表头自动换行 */ th ...
- Jenkins 配置git
点击"新建任务"创建一个自用风格的项目 点击"源码管理",选择 git 系统管理 --> Global Tool Configuration<为访问 ...
- 【WEB】带边框的网页页面实现
前言 这是编程入学者尝试各种技术的备忘记录和自我激励,内容非常简单而单纯. 正文 成品 样式参考 http://tenhou.net/ 上边框 http://tenhou.net/img/f0t ...
- 使用laraval框架和前端完成restful风格的请求对接(这里只是讨论restful的概念)
现在,在开发中restful风格的api是比较流行的,尤其是在前后端分离的架构中. 这些东西这一下这篇文章中说的很详细:RESTful接口设计原则和优点 下面,我们来讨论如何使用laraval和前端完 ...