活动标题
自定义活动admin模板
安装
作为活动 skin 是 cs 的主题 活动admin 行政框架 - 您必须先安装 .
作为宝石
在您应用程序的 Gemfile 中添加以下一行:
gem 'active_admin_theme'
然后执行:
$ bundle
或者自己装作:
$ gem install active_admin_theme
作为国家预防机制模块(Yarn软件包)
执行 :
$ npm i @activeadmin-plugins/active_admin_theme
或者说
$ yarn add @activeadmin-plugins/active_admin_theme
或者手动添加到 package.json数字 :
"dependencies": {
"@activeadmin-plugins/active_admin_theme": "^3.1.1"
}
并执行 :
$ yarn
使用量
在基本样式表条目点 active_admin.scss (例如)增加一行:
作为宝石通过喷出
@import 'wigu/active_admin_theme';
作为国家预防机制模块(Yarn软件包),通过Webpacker或任何其他资产捆绑器
@import '@activeadmin-plugins/active_admin_theme';
自定义
设置以下任何变量 上文 导入行 :
$skinMainFirstColor: #A5A7AA;
$skinMainSecondColor: #0066CC;
$skinBorderWindowColor: #B8BABE;
@import 'wigu/active_admin_theme';
变量被键入。 一种错误的价值—— none 颜色是
或没有单位的长度
命名变量,而不是默默地释放 CSS 浏览器丢弃.
黑暗模式
主题遵循操作系统通过 prefers-color-scheme,并且能够
每页被锁定 data-theme="light" 或者说 data-theme="dark" 打开 <html>。 。 。 .
下方的每个颜色都有 …Dark 双胞胎是暗模式使用的; 每个双胞胎
除非注意, 否则默认为光对应, 因此一个只设定
光值在两种模式中都保持一个一致的颜色.
实例
默认是此主题运行于 雪地网络回到蓝色 标出之前运出的主题 :
$skinMenuPillColor: $skinMainSecondColor;
$skinMenuPanelColor: $skinMainSecondColor;
$skinMenuTextColor: #ffffff;
$skinMenuItemHoverColor: transparent;
$skinMenuItemHoverTextColor: #ffffff;
$skinMenuFontSize: 1em;
$skinHeaderPaddingY: 7px; // one value top and bottom
$skinTitleBarColor: lighten($skinMainFirstColor, 8%);
$skinTitleBarBorderWidth: 3px;
$skinPanelHeaderColor: $skinMainSecondColor;
$skinPanelHeaderTextColor: #ffffff;
$skinTabInactiveColor: $skinMainSecondColor;
$skinInactiveTabTextColor: #ffffff;
$skinLinkColor: $skinMainSecondColor;
@import 'wigu/active_admin_theme';
说明 var(--aa-page-bg) 工作为可变值:以下为自定义属性
模式本身,所以一行覆盖两个主题.
切换主题
样式表遵循操作系统本身和荣誉
data-theme="light" 或者说 data-theme="dark" 打开 <html>开关是可选的
和有宝石的船只:
// app/assets/javascripts/active_admin.js
//= require wigu/theme_toggle
// or, as an npm module
import "@activeadmin-plugins/active_admin_theme/src/theme_toggle";
宝石无法添加菜单项: ActiveAdmin 构建工具导航
主机应用程序的初始化器, 样式表或资产中的任何内容
运行在那个时候。 所以,没有别的事做, 脚本注入自己的
li#theme_toggle 输入 #utility_nav 装入量。 这有效,但项目是
插入到服务器上, 而您不能订购或隐藏 .
自己宣布要花四行钱 怎么样 雪地网络 是否为:
# config/initializers/active_admin.rb
config.namespace :admin do |admin|
admin.build_menu :utility_navigation do |menu|
# A real url, not "#": ActiveAdmin drops a blank utility item.
menu.add id: "theme_toggle", label: "", url: "#theme",
priority: 9_999_998, html_options: { role: "button" }
end
end
脚本找到 #theme_toggle 或任何携带 .dark-mode-toggle, (中文(简体) ),
受代表团的约束——因此控制得以维持下去——并且写不出任何东西
转到页面,但 data-mode。可见的一切来自样式表.
两页下方:休养地的三个州——半圆为: 自动太阳 页:1 光线月亮为 阴暗 - 然后最后两个徘徊。 点击移动到 ,所以控制要花费一个图标的宽度 通常已经满了。 标题上写着点击方向,因为有一个图标 无法显示两者.
auto 删除属性, 因此媒体查询决定, 页面随行
操作系统存在;另外两个将选择插入 localStorage 下级
aa-theme。第三个状态存在,以便遵循系统
可达:在第一次点击时使用双状态切换写出首选项,但没有
距离手动清理存储器还差得远.
格子是内置的 SVG 用作 CSS mask因此,宝石仍然船 没有图像
文件, 主机应用程序的 CSP 不允许, 图标
带 currentColor —— 说 $skinMenuTextColor 像其他酒吧,还有
徘徊着颜色 要使用自己的图标字体, 请覆盖
$theme-icon-auto 编号 : $theme-icon-light 编号 : $theme-icon-dark,或重新样式
#theme_toggle > a:before 绝对的.
控制器是连接 没有目的地,所以 标签 到达它 输入 财务报告和审定财务报表 空间 操作它。 在一个标签中更改主题 应用到其他的.
禁用暗模式
仅以轻取为主的船舶,两只手动步骤(没有建造旗):
- 别包括
wigu/theme_toggle在你的JS名单。 那会切掉开关 自动data-theme转换它驱动器. - 将文档绑入光线:添加
data-theme="light"页:1<html>元素 (例如通过凌驾于ActiveAdmin布局),所以@media (prefers-color-scheme: dark)样式从不适用.
服务器时钟
这个 #utility_nav 现在带一个打勾的服务器时钟——两行,时间+区域
主题 server_clock.js 注射数
以 Ruby 后端命名空间( N)ActiveAdminTheme.install!),登录
按钮旁边.
后端只注入标记; 加载脚本的方式与 主题切换,或者导航显示一个静态的一行标签,并永不勾选 :
// app/assets/javascripts/active_admin.js
//= require wigu/server_clock
// or, as an npm module
import "@activeadmin-plugins/active_admin_theme/src/server_clock";
主题还保留了导航中的登录项目. 如果您的应用程序没有登录路径 (custom auth) 或者您故意运行一个无登录导航,使用 ActiveAdmin 自己的 每个名称空间开关——主题向它致敬:
# config/initializers/active_admin.rb
config.logout_link_path = nil
恢复的当前用户项有一个主题开关( ActiveAdmin 提供无
未设置 current_user_method,中断授权时:
ActiveAdminTheme.add_current_user = false
交叉表突出显示
单击索引表格中的单元格会突出显示其整行和列——
单元格获得分类 selected,主题绘制为 --aa-selected,所以请
单击值位于十字架的中心,单元格上带有重音大纲
自己来 用于在宽的表格中追踪其行和列的值的手性.
这个 selected 填充总是在主题中(它也覆盖 ActiveAdmin 自己)
批量动作行选择); 点击行为是选入的 — 加载脚本到
让它保持平稳
// app/assets/javascripts/active_admin.js
//= require wigu/table_crisscross
// or, as an npm module
import "@activeadmin-plugins/active_admin_theme/src/table_crisscross";
它使用 jQuery , 它已经加载了 ActiveAdmin .
被绑起的条和粘贴的桌子头
在比取景口宽的表格上,整个页面会滚动侧道;
主题指针 #header, (中文(简体) ), #title_bar (标题和动作按钮)和闪光
栏到可见的取景口,所以他们留在原地。 栏杆大小 100vw, (中文(简体) ),
它包括垂直滚动条沟道——装入已运出
scrollbar_width.js 以去除,或者条子坐到 ~15px 上方可见
极右滚动位置的视图端口 :
// app/assets/javascripts/active_admin.js
//= require wigu/scrollbar_width
// or, as an npm module
import "@activeadmin-plugins/active_admin_theme/src/scrollbar_width";
没有脚本,CSS会回到原地 100vw -没事的,你
保持极右转.
索引表列标题也粘贴在视图口上方,而长长的列表
垂直滚动 。 ActiveAdmin 索引表格默认此选项 。 AA 3.x 电源
硬代码索引表的类( )index class: 因此选择退出
应用宽度, 样式表内有一行 :
.paginated_collection table.index_table thead tr th { position: static; }
对于那些你使自己变得适合的桌子, skip-sticky-headers 一个
index_table 选择退出,和 with-sticky-headers 在
(单行台词:只收首行针.
//= require wigu/all 一次拉出全部四个运出脚本;每个都留下
个人应酬.
Trix / ActionText 编辑器
Trix 有 ActionText (铁路内置) 的飞船, 因此任何 ActiveAdmin app都可以有一个
富文场. 主题样式为编辑器铬-工具栏,编辑器表面,
链接对话框,内容 pre编号 :blockquote ——两相光下的主题变量
和黑暗,倒置 Trix的黑色工具栏图标 在黑暗模式下,所以他们留下
看得出来 无法选择: 您的应用程序仍然导入 Trix 自己的 CSS 基础
(单位:千美元)trix/dist/trix),主题只重塑了它,规则在没有时是惰性的
编辑器在页面上.
升级
3.2.0 (中文(简体) )
可变合同只会增加—— $skinTitleBarHeight 加入它却一无所有
但现在看来
不同,其中两个从主机应用中取消了布局:
#header, (中文(简体) ),#title_bar闪光条被固定在可见的视门上, 因此,他们在一个比窗口更宽的表格滚动页面时停留 侧道. 贴有自己样式表的条子应该放下 这些规则:主题设置了标题栏,并带有弹性框和重排#titlebar_right改为position: static,还有剩下的position: absolute/sticky对抗它。 装入wigu/scrollbar_width删除 卷杆沟-见 被绑起的条和粘贴的桌子头。 。 。 .- 索引表列标题粘贴每个活动admin上的取景口
索引表。 您样式表中的一行选择退出全应用程序 :
.paginated_collection table.index_table thead tr th { position: static; }。 。 。 . - 标题栏拥有自己的衡量标准: 记录标题为16px,在一行
带有椭圆形,而不是 ActiveAdmin 的大包头; 动作
项为空; 带为
$skinTitleBarHeight(37px) 高,与$skinTitleBarButtonPaddingY编号 :$skinTitleBarButtonPaddingX在按钮上. 标题栏在自己的按钮下右向下放下面板 . - 通用导航带有服务器时钟、主题开关和已绘制的日志
以示弃绝的格言 注销。 。 。 .
ActiveAdminTheme .add_current_user = false放弃添加的当前用户项,并 ActiveAdmin 属于自己config.logout_link_path = nil丢弃日志 .
新建和选入, 升级时没有任何变化: Trix / ActionText 编辑器是
以两种模式为主, crisscross 单元格突出显示(wigu/table_crisscross, (中文(简体) ),
--aa-datetimepicker-* 用于相伴日期选择器的桥变量, 暗色
用于选择 2 和 tom 选择的样式,以及 //= require wigu/all 以拉动
立即运出脚本 .
3.1.0 (中文(简体) )
- 状态标记填充更暗,因此标签可以是白色并仍然清晰的 4.5: 1 -
之前是黑色的 中间的填充。 每个填充物现在都是变量
(单位:千美元)
$skinStatusTagOkColor和它的四周$skinStatusTagTextColor: #000000;以填充符恢复旧标签 你选择. - 索引表格栏标题
$skinTextColor而不是哑巴的灰色, 所以一个标题读得和下面的一栏一样强烈.
3.0.0 (单位:千美元)
三件事改变了形状,值得知道,如果你已经设置了变量:
- 下放面板——标题栏菜单、批量动作菜单和
表格工具菜单——现在遵循表面调色板(
$skinSurfaceColor财务报告和审定财务报表 而不是朋友们)$skinMainFirstColor编号 :$skinMainSecondColor这是 让他们在两种模式下工作。 如果你把那些面板打上烙印 两个主要颜色, 点$skinSurfaceColor财务报告和审定财务报表$skinSurfaceHoverColor时间 同样的价值. - 主按钮填充更暗 (
darken($skinMainSecondColor, 20%)相当 而不是口音本身). 口音为2.74:1,在4.5:1下为小 文本需要, 而暗模式已经使用此音调—— 按钮现在是 两种模式中的颜色。 设定$skinButtonColor: $skinMainSecondColor;联 合 国 老样子. - 默认内容链接颜色更暗( E)
#1f5f8d而不是口音. 口音为填充颜色并失败了WCAG AA作为正文. 设定$skinLinkColor返回到$skinMainSecondColor如果你喜欢老样子.
变量
核心
| 变量 | 默认( 浅/ 暗) | |
|---|---|---|
$skinMainFirstColor |  #23282f | |
$skinMainSecondColor |  #5ea3d3 | |
$skinBorderRadius | 4px | |
$skinBorderWindowColor |  #e6e9ee | |
$skinTablePadding | 10px |
表面、文字和边框
| 变量 | 默认( 浅/ 暗) | |
|---|---|---|
$skinPageBgColor 编号 : $skinPageBgColorDark |  #f7f9fb 编号 :  #161a1e | 页面背景 |
$skinSurfaceColor 编号 : $skinSurfaceColorDark |  #ffffff 编号 :  #25292f | 面板/卡片/内容 |
$skinSurface2Color 编号 : $skinSurface2ColorDark |  #f0f2f5 编号 :  #2c3137 | 表格标题/条纹/微妙填充 |
$skinSurfaceHoverColor 编号 : $skinSurfaceHoverColorDark |  #f5f7fa 编号 :  #3f454d | 行/ 项徘徊 |
$skinSelectedRowColor 编号 : $skinSelectedRowColorDark |  #d9e4ec 编号 :  #304457 | 选中的表格行 |
$skinElevatedColor 编号 : $skinElevatedColorDark | $skinSurfaceColor 编号 :  #363c43 | 工具按钮和浮动在页面上方的下拉面板 |
$skinTextColor 编号 : $skinTextColorDark |  #323537 编号 :  #dde2e8 | 正文文本 |
$skinTextMutedColor 编号 : $skinTextMutedColorDark |  #6b7177 编号 :  #b0b8c2 | 次要文本/轴标签 |
$skinBorderColor 编号 : $skinBorderColorDark |  #e0e4e9 编号 :  #404750 | 边框/网格线 |
$skinInputBgColor 编号 : $skinInputBgColorDark | #ffffff 编号 :  #1e2227 | 窗体控制背景 |
$skinInputBorderColor 编号 : $skinInputBorderColorDark |  #c9ced4 编号 :  #4d555f | 窗体控制边框 |
$skinErrorTextColor 编号 : $skinErrorTextColorDark |  #932419 编号 :  #f49b9b | 验证信件 |
$skinErrorBgColor 编号 : $skinErrorBgColorDark |  #fae6e4 编号 :  #3a2224 | 窗体上方的错误摘要 |
页眉菜单
| 变量 | 默认( 浅/ 暗) | |
|---|---|---|
$skinMenuPillColor |  #2e3236 | 顶级流药/悬浮药 |
$skinMenuPillTextColor |  #6cb0de | 在药丸上的文本; 跟着倒下文本这样 |
$skinMenuPanelColor | #2e3236 | 下拉面板 bg + 悬浮"桥"边框 |
$skinMenuTextColor |  #dfe2e6 | 下放项目文本( 已继承 #fff) |
$skinMenuItemHoverColor |  #3f454c | 悬浮/当前 bg( 是: 无) |
$skinMenuItemHoverTextColor | #6cb0de | 徘徊/当前下放项目文字, 相同原因 |
$skinMenuFontSize | 13px | 页眉菜单文本大小 |
$skinMenuItemPaddingY | 5px | 下拉项上/下贴( 是 6px/4px + a 7px 边框) |
$skinMenuItemLineHeight | 1.35 | 降下的项目行高 |
$skinMenuPanelMaxWidth | 260px | 下拉面板天花板; 更长的标签包装而不是离开取景口 |
$skinHeaderPaddingY | null | 将两半同时设定 |
$skinHeaderPaddingTop | 4.5px | 头顶上加( 基值, 保留所以头不移) |
$skinHeaderPaddingBottom | 4.5px | 页眉下贴 |
$skinHeaderLogoMaxHeight | none | 封顶站点 标题标志图像高度 |
标题栏
| 变量 | 默认( 浅/ 暗) | |
|---|---|---|
$skinTitleBarColor |  #343c46 | |
$skinTitleBarBorderColor | $skinMainSecondColor | |
$skinTitleBarBorderWidth | 0 | |
$skinTitleBarButtonPaddingY | 6px | 动作按钮垂直绑定 |
$skinTitleBarButtonPaddingX | 10px | 动作按钮水平编码 |
$skinTitleBarHeight | 37px | 最小栏高; 为适应内容而生长 |
面板、标签和标签
| 变量 | 默认( 浅/ 暗) | |
|---|---|---|
$skinPanelHeaderColor 编号 : $skinPanelHeaderColorDark | var(--aa-page-bg) 编号 : var(--aa-page-bg) | |
$skinPanelHeaderTextColor 编号 : $skinPanelHeaderTextColorDark | var(--aa-inactive-tab-text) 编号 : var(--aa-inactive-tab-text) | |
$skinPanelHeaderPaddingY | 5px | 面板+侧边栏头高 |
$skinLabelColor 编号 : $skinLabelColorDark |  #8494a8 编号 : $skinTextColorDark | |
$skinTabInactiveColor 编号 : $skinTabInactiveColorDark | #f7f9fb 编号 : #161a1e | 不活动标签填充 |
$skinActiveTabTextColor 编号 : $skinActiveTabTextColorDark | $skinMainSecondColor 编号 :  #7cc0ec | 选中标签 |
$skinInactiveTabTextColor 编号 : $skinInactiveTabTextColorDark |  #5e6469 编号 : #b0b8c2 | 不活动标签标签 |
$skinTableHeaderTextColor 编号 : $skinTableHeaderTextColorDark | $skinTextColor 编号 : $skinTextColorDark | 索引表列标题; 正文文字颜色, 所以标题读取强烈如行 |
$skinStatusTagTextColor | #ffffff | 在已填充状态标签内设置标签; empty 编号 : unknown 编号 : none 没有填充和保存 $skinTextMutedColor |
$skinStatusTagNeutralColor |  #707681 | 未分类标签 : No,协议标记 |
$skinStatusTagOkColor |  #5e7e63 | ok published complete completed green yes |
$skinStatusTagNoticeColor |  #3874d2 | notice blue |
$skinStatusTagWarnColor |  #9e6c15 | warn warning orange |
$skinStatusTagErrorColor |  #ce483b | error errored red |
$skinTabPaddingY | 8px | 选项卡高度 |
$skinTabPaddingX | 15px | 选项卡标签水平编码(文本 ~ 边框) |
按钮和表格工具
| 变量 | 默认( 浅/ 暗) | |
|---|---|---|
$skinButtonColor 编号 : $skinButtonColorDark | darken($skinMainSecondColor, 20%) 编号 : $skinButtonColor | 两种模式中一个音调; 白色为 5. 35:1 |
$skinButtonTextColor 编号 : $skinButtonTextColorDark | #ffffff 编号 : $skinButtonTextColor | 这些按钮上的标签 |
$skinTableToolsHeight | 30px | |
$skinTableToolsPaddingX | $skinTableToolsHeight * 0.4 | 12px 时为 30px |
链接
| 变量 | 默认( 浅/ 暗) | |
|---|---|---|
$skinAccentColor 编号 : $skinAccentColorDark | $skinMainSecondColor 编号 : $skinAccentColor | 焦点环/口音大纲 |
$skinLinkColor 编号 : $skinLinkColorDark |  #38678b 编号 : #7cc0ec | |
$skinDeleteLinkColor 编号 : $skinDeleteLinkColorDark | $skinLinkColor 编号 : #f49b9b |
屏幕
带有过滤器、 显示页面、 嵌入式索引 has_many 窗体,打开批次动作
菜单和取日期器——两种模式中相同的管理员。 主题如下:
操作系统,每页可粘贴 data-theme。 。 。 .
光线
阴暗
窗体和过滤器控制
以全尺寸显示,因为两发子弹比控制器大
说明它们是什么颜色。 输入、选择和
文本区域 $skinInputBgColor 编号 : $skinInputBorderColor - 白开
#c9ced4 灯光模式下,休庭 #1e2227 不错 #4d555f 在黑暗中——和
重点领域Name, (中文(简体) ), Title载体 $skinMainSecondColor。 。 。 .
捐款
- 叉开它 https://github.com/活性admin-plugins/活性 admin 主题/fork (中文(简体) )
- 创建您的特性分支( E)
git checkout -b my-new-feature(中文(简体) ) - 提交更改( E)
git commit -am 'Add some feature'(中文(简体) ) - 推向分行(
git push origin my-new-feature(中文(简体) ) - 创建新拉请求