代码拉取完成,页面将自动刷新
gitee-frontend 是一个前端组件库,基于 jQuery 和 Semantic-UI 实现,包含了码云现在用到的一些通用性较强的组件。
以下依赖项需要手动引入。
npm install gitee-frontend --save
具体用法请参考示例:https://gitee-frontend.gitee.io/gitee-frontend/
在页面里作为 jQuery 插件使用:
<link rel="stylesheet" href="dist/jquery/jquery.filtered-search-box.css">
<link rel="stylesheet" href="dist/jquery/jquery.boards.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="dist/jquery/jquery.filtered-search-box.min.js"></script>
<script src="dist/jquery/jquery.boards.min.js"></script>
<script>
var $search = $('#js-search-box');
var $boards = $('#js-boards');
$search.filteredSearchBox({
// ...
});
$boards.boards({
// ...
});
var search = $search.data('filteredsearchbox');
var boards = $boards.data('boards')
</script>
作为 ES 模块使用:
import '~gitee-frontend/dist/gitee-frontend.css'
import { Boards, FilteredSearchBox } from 'gitee-frontend'
const boards = new Boards($('#js-boards'), { /* options... */ })
const search = new FilteredSearchBox($('#js-search-box'), { /* options... */ })
自定义组件样式:
// 自定义组件的主题色
$primary-color: #409eff;
@import "~gitee-frontend/src/variables";
@import "~gitee-frontend/src/components/filtered-search-box.scss";
@import "~gitee-frontend/src/components/boards.scss";
// 覆盖组件样式
.filtered-search-token {
// ...
}
示例:
var options = {
data: function () {
return {
gender: 'male'
}
},
text: {
loading: '载入中...',
searchHelp: '按回车键或点击此处搜索',
selectOtherFilter: '选择其它筛选条件',
placeholder: '搜索或过滤结果...'
},
filters: [
{
name: '性别',
key: 'gender',
none: {
name: '不限',
value: 'none'
},
items: [
{
name: '男',
value: 'male'
}, {
name: '女',
value: 'female'
}
]
}
],
callback: function (data) {
console.log('性别是:', data.gender)
}
}
$('#example-element').filteredSearchBox(options)
配置说明:
Function(): Object
初始数据,值必须是个函数,其返回值类型必须是 Object
Object,Boolean
历史记录,如果想禁用用该功能,可设置为 false
Number
最大数量,默认值为 5,即:最多保存近 5 条搜索历史Object
存储库对象,默认值为 localStorage
,如需自定义存储位置,请提供包含 setItem()
、getItem()
和 removeItem()
方法的对象。String
存储键值,默认值为 "GiteeSearchHistory"
Array
筛选器列表
String
筛选器标识,例如:"member_id"
String
筛选器名称,例如:"成员"
String
筛选器类型,如需日期范围筛选,请指定为"daterange"
String
筛选器图标,例如:"icon user"
Object
“无”条件,例如:{ name: "未关联", value: 0 }
Object
tab 配置
String
tab 名称String
tab keyString
'active' || '' 初始化激活 tabObject
开启远程搜索选项,远程搜索的配置(暂时在 tabs 中使用)
Function(config, onSuccess, onError)
获取器,如需自定义请求方式,可指定它Function(data): Object
数据转换器,用于将请求到的数据转换为组件支持的结构any
给筛选器的配置参数,当筛选器类型为 "daterange"
时,需要手动指定 DateRangePicker 插件的配置Array
选项列表
String
名称String
值String
图片地址,例如:"https://gitee.com/logo-black.svg"
String
图标String
图标样式,例如:"background-color: #f00;"
String
颜色,例如:"#f00"
String
附加说明String
关键词[Object, Array]
远程选项列表的配置(可选),设置它后,将会请求指定地址来获取选项列表
String
API 地址Object, Function(data): Object
,请求时携带的参数Function(config, onSuccess, onError)
获取器,如需自定义请求方式,可指定它Function(data): Object
数据转换器,用于将请求到的数据转换为组件支持的结构Array
分组
Array
组内的筛选器的标识列表,例如:["author_id", "project_id"]
String
组名Object
文本翻译Function(data)
确定搜索时的回调,传入参数是当前的筛选参数Boolean
是否开启调试用法:
var options = {
// 配置
}
$('#example-element').boards(options)
配置说明:
String
用于标识任务所属板块的字段名,默认值为 "state"
Sting
看板名称,默认值为 "board"
。当页面中存在多个看板时建议设置该属性,以避免内容冲突Object
提示信息
String
加载中的提示String
当板块不接受某一状态的任务时的提示String
板块内所有任务已经加载完的提示String
板块前置按钮的提示String
板块后置按钮的提示Object
一些元素的样式类名称
String
评论图标String
任务图标String
左箭头图标String
右箭头图标String
卡片String
头像String
操作按钮String
操作按钮组Array
板块列表
String
名称String
状态String
主题色Object
插件
Object
字符头像插件,当传入该插件后,对于未设置头像用户,将显示字符头像。地址:https://gist.github.com/leecrossley/6027780
Object
排序插件,当传入该插件后,将支持对板块进行排序。地址:https://github.com/RubaXa/Sortable
Function(Config)
板块的操作按钮集的构造函数,返回值类型必须为 Array
Array
板块的操作按钮集
String
标识String
样式类名称String
图标String
提示文本Function(Boards, Board, Event)
在用户点击操作按钮时的回调Array
任务类型,当拖动任务卡片时,如果有的板块的状态不属于该任务的类型,则会被禁用
Number,String
类型标识Array
状态列表
Number,String
标识Function(Object, Function)
在开始加载下一页任务列表时的回调Function(Object, any)
在更新任务状态时的回调Function(Object, JQuery)
在渲染任务卡片时的回调Function(Array)
在板块列表被排序后的回调详细的配置参数可参考 src/components/boards/config.js 文件,以及示例页面中的 js 代码。
# 生成用于示例的相关资源
npm run demo
# 生成全部用于发行的资源:
npm run dist
# 创建 beta 版的发行版
npm run release-beta
# 创建正式发行版
npm run release
# 发布测试版到 npm 服务器上
npm publish --tag=beta
# 发布正式版到 npm 服务器上
npm publish
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。
1. 开源生态
2. 协作、人、软件
3. 评估模型