HarmonyOS API:系统资源 | 您所在的位置:网站首页 › harmonyos社区51cto51cto › HarmonyOS API:系统资源 |
版本:v3.1 Beta
系统资源
更新时间: 2023-02-17 09:19
表1 系统颜色资源 参数分组 参数类型 参数场景 ID值 浅色模式下的值 浅色模式对应颜色 深色模式下的值 深色模式对应颜色 系统色 前背景 前景色 id_color_foreground #000000 #FFFFFF 前景反色 id_color_foreground_contrary #FFFFFF #E5E5E5
id_color_foreground_contrary_disable #FFFFF #666666 背景色 id_color_background #FFFFFF #000000 辅助背景色 id_color_sub_background #F1F3F5 #000000 主色调 高亮色 id_color_emphasize #0A59F7 #317AF7 高亮色反色 id_color_emphasize_contrary #317AF7 #317AF7 警告色 id_color_warning #E84026 #D94838 警示色 id_color_alert #ED6F21 #DB6B42 通讯色 id_color_handup #E84026 #D94838 通讯色 id_color_connected #64BB5C #5BA854 控件选中高亮状态色 id_color_component_activated #0A59F7 #317AF7
控件通用背景色 id_color_component_normal #19000000 #19FFFFFF
分割线颜色 id_color_list_separator #33000000 #33FFFFFF
列表分隔条颜色 id_color_subheading_separator #08000000 #19FFFFFF
通用点击效果背景 id_color_click_effect #19000000 #26FFFFFF 鼠标悬停bg 通用悬停效果背景 id_color_hover #0C000000 #19FFFFFF 获焦状态前景色(文本/图标) 获焦状态一级颜色 id_color_focused_content_primary #E5000000 #E5FFFFFF
获焦状态二级颜色 id_color_focused_content_second #99000000 #99FFFFFF
获焦状态三级色 id_color_focused_content_tertiary #66000000 #66FFFFFF 获焦态颜色 获焦状态颜色(描边) id_color_focused_outline #0A59F7 #5291FF 获焦状态背景色 获焦状态背景色 id_color_focused_bg #0A59F7 #5291FF 图标公共 图标颜色 界面可点击图标颜色 id_color_primary #E5000000 #DBFFFFFF 界面可点击图标反色 id_color_primary_contrary #FFFFFF #E5E5E5 界面二级图标颜色 id_color_secondary #99000000 #99FFFFFF 界面三级图标颜色 id_color_tertiary #66000000 #66FFFFFF 界面四级图标颜色/拖拽bar id_color_fourth #33000000 #33FFFFFF 图标高亮色 id_color_activated #0A59F7 #5291FF id_color_activated_start #0A59F7 #5291FF id_color_activated_end #0A59F7 #5291FF 文本色 不可点击文本颜色 一级文本颜色 id_color_text_primary #E5000000 #DBFFFFFF 一级文本颜色反色 id_color_text_primary_contrary #FFFFFF #E5E5E5 二级文本颜色 id_color_text_secondary #99000000 #99FFFFFF 二级文本颜色反色 id_color_text_secondary_contrary #99FFFFFF #99FFFFFF 三级文本颜色 id_color_text_tertiary #66000000 #66FFFFFF 三级文本颜色反色 id_color_text_tertiary_contrary #66FFFFFF #66FFFFFF 弹出框文本色 dialog_text_alert #E5000000 #DBFFFFFF 可操作文本颜色 文本高亮色 id_color_text_primary_activated #0A59F7 #5291FF 二级文本高亮色 id_color_text_secondary_activated #0A59F7 #5291FF 搜索结果文本高亮色 id_color_text_search_url #0A59F7 #5291FF 提示性文本色 id_color_text_hint #99000000 #99FFFFFF 提示性文本反色 id_color_text_hint_contrary #99FFFFFF #99FFFFFF 可点击文本\超链接\网址文本色 id_color_text_hyperlink #0A59F7 #5291FF 可点击文本\超链接\网址文本色反色 id_color_text_hyperlink_contrary #5291FF #5291FF 文本选中背景色 id_color_text_highlight_bg #330A59F7 #66317AF7 文本选中背景反色 id_color_text_highlight_bg_contrary #66317AF7 #66317AF7 系统多彩色板 功能性多彩色 多彩色1 id_color_palette1 #564AF7 #5F58C7 多彩色2 id_color_palette2 #46B1E3 #4796C4 多彩色3 id_color_palette3 #61CFBE #5AADA0 多彩色4 id_color_palette4 #64BB5C #5BA854 多彩色5 id_color_palette5 #A5D61D #86AD53 多彩色6 id_color_palette6 #AC49F5 #8C55C2 多彩色7 id_color_palette7 #E64566 #D64966 多彩色8 id_color_palette8 #E84026 #D94838 多彩色9 id_color_palette9 #ED6F21 #DB6B42 多彩色10 id_color_palette10 #F9A01E #E08C3A 多彩色11 id_color_palette11 #F7CE00 #D1A738 功能性多彩辅助色 多彩辅助色1 id_color_palette_aux1 #8981F7 #5550A6 多彩辅助色2 id_color_palette_aux2 #86C5E3 #467794 多彩辅助色3 id_color_palette_aux3 #92D6CC #4C7A73 多彩辅助色4 id_color_palette_aux4 #92C48D #5C8059 多彩辅助色5 id_color_palette_aux5 #BDDB69 #6B8052 多彩辅助色6 id_color_palette_aux6 #C386F0 #634794 多彩辅助色7 id_color_palette_aux7 #E67C92 #A14A5C 多彩辅助色8 id_color_palette_aux8 #E87361 #9C554B 多彩辅助色9 id_color_palette_aux9 #ED955F #9E644F 多彩辅助色10 id_color_palette_aux10 #F9BC64 #9E7349 多彩辅助色11 id_color_palette_aux11 #F5DC62 #997E39 莫兰迪色 莫兰迪色1 id_color_special1 #BBB2C8 #392F49 莫兰迪色2 id_color_special2 #B6C5D1 #343E4A 莫兰迪色3 id_color_special3 #A6C2BE #354B47 莫兰迪色4 id_color_special4 #B6C6B3 #3C4B34 莫兰迪色5 id_color_special5 #C1C8AC #444B34 莫兰迪色6 id_color_special6 #C2B1C8 #403046 莫兰迪色7 id_color_special7 #D1BFC5 #443038 莫兰迪色8 id_color_special8 #CFB4B4 #462F2F 莫兰迪色9 id_color_special9 #D4BFB8 #463630 莫兰迪色10 id_color_special10 #D2C3B2 #4B3F35 莫兰迪色11 id_color_special11 #D2CAB3 #4A4333 系统蒙黑 系统蒙黑 蒙黑 id_color_mask_thin #33000000 #66000000 蒙黑 id_color_mask_light #66000000 #99000000 蒙黑 id_color_mask_regular #99000000 #B2000000 蒙黑 id_color_mask_thick #CC000000 #E5000000 系统不透明度 系统不透明度 一级文本、图标不透明度 id_alpha_content_primary 0.9
0.86
二级文本、图标不透明度 id_alpha_content_secondary 0.6
0.6
三级/提示性文本、图标不透明度 id_alpha_content_tertiary 0.4
0.4
通用四级不透明度 id_alpha_content_fourth 0.2
0.2
不可用状态不透明度 id_alpha_disabled 0.4
0.4
选中背景高亮色不透明度 id_alpha_highlight_bg 0.2
0.4
普通控件背景不透明度 id_alpha_normal_bg 0.1
0.1
提示性背景不透明度 id_alpha_inapptip_bg 0.05
0.1
分隔线不透明度 id_alpha_separator_line 0
0.1
表2 系统圆角资源 参数类型 参数场景 ID值 取值 可拉伸 toast圆角 id_corner_radius_tips_toast 18vp badge圆角 id_corner_radius_tips_badge 14vp tips圆角 id_corner_radius_tips_tips 18vp 等比放大 大button圆角 id_corner_radius_button 20vp 小button圆角 id_corner_radius_small_button 14vp 提示性标签圆角 id_corner_radius_mark 4vp 副标题栏选中下划线圆角 id_corner_radius_subtab 4vp 其他 点击效果圆角 id_corner_radius_clicked 8vp 半模态卡片圆角 id_corner_radius_panel 32vp 通知卡片圆角 id_corner_radius_notification 16vp 普通卡片圆角 id_corner_radius_card 16vp 进度条圆角 id_corner_radius_progress_bar 2vp 弹出框类背景圆角 id_corner_radius_dialog 24vp 宫格元素圆角大小(图库grid圆角) id_corner_radius_grid 12vp 菜单背景圆角大小 id_corner_radius_menu 20vp 图标背景圆角大小(带背板小图标背景圆角) id_corner_radius_icon 8vp 通用 通用超大圆角 id_corner_radius_default_xl 24vp 通用大圆角 id_corner_radius_default_l 16vp 通用中圆角 id_corner_radius_default_m 12vp 通用小圆角 id_corner_radius_default_s 8vp 通用超小圆角 id_corner_radius_default_xs 4vp
表3 系统字体资源 视觉元素 参数类型 参数场景 典型场景 ID值 取值 字体 字体样式 标题1 锁屏时钟/天气 id_text_size_headline1 96vp 标题2 强调数字 id_text_size_headline2 72vp 标题3 强调数据 id_text_size_headline3 60vp 标题4 计算器 id_text_size_headline4 48vp 标题5 计算器 id_text_size_headline5 38vp 标题6 强调型大标题 id_text_size_headline6 30vp 标题7 普通标题 id_text_size_headline7 24vp 标题8 普通小标题 id_text_size_headline8 20vp 标题9 普通子页签(未选中状态) id_text_size_headline9 18vp 次标题1 内容或设置项的分组标题 id_text_size_sub_title1 18fp 次标题2 段落文本的分组标题 id_text_size_sub_title2 16fp 次标题3 段落文本的分组标题 id_text_size_sub_title3 14fp 按钮文本1 内容区的大文本按钮 id_text_size_button1 16fp 按钮文本2 列表内的小文本按钮 id_text_size_button2 14fp 按钮文本3
id_text_size_button3 12fp 正文1 列表正文/段落文本 id_text_size_body1 16fp 正文2 列表辅助文本/宫格描述文本/段落文本 id_text_size_body2 14fp 正文3 功能入口说明文本/段落文本 id_text_size_body3 12fp 辅助文本 toolbar/tabbar描述文本 id_text_size_caption 10vp 辅助文本1 隐私的描述文本 id_text_size_caption1 10fp 图表格刻度1 图表格刻度 id_text_size_chart1 10fp 图表格刻度2 图表格刻度 id_text_size_chart2 0vp 眉题 大标题下的描述文本 id_text_size_over_line 14vp 弹出框标题 弹出框标题文本字号 id_text_size_dialog_tittle 20fp 字重 字体粗细 Regular 标准 id_text_font_family_regular sans-serif Medium 中粗 id_text_font_family_medium HwChinese-medium
表4 系统间距资源 参数类型 参数场景 ID值 取值 屏幕边缘间隔 屏幕左侧边距(热区场景) id_default_padding_start 12vp 屏幕左侧边距(不带热区场景) id_max_padding_start 24vp 屏幕右侧边距(热区场景) id_default_padding_end 12vp 屏幕右侧边距(不带热区场景) id_max_padding_end 24vp 屏幕顶部边距 id_default_padding_top 24vp 屏幕底部边距动态 id_default_padding_bottom_flexible 0vp 屏幕底部边距固定 id_default_padding_bottom_fixed 24vp 特殊屏幕边缘间隔 dialog屏幕左侧边距 id_dialog_margin_start 12vp dialog屏幕右侧边距 id_dialog_margin_end 12vp dialog屏幕底部边距 id_dialog_margin_bottom 16vp 通知卡片左边距 id_notification_margin_start 12vp 通知卡片右边距 id_notification_margin_end 12vp 卡片两侧的边距 id_card_margin_start 12vp 卡片两侧的边距 id_card_margin_end 12vp 卡片间间隔 id_card_margin_middle 12vp 文本间间隔 主次文本上下间隔 id_text_margin_vertical 2vp 主次文本左右间隔 id_text_margin_horizontal 8vp 第一层级文本段落间隔 id_text_paragraph_margin_xl 48vp 第二层级文本段落间隔 id_text_paragraph_margin_l 24vp 第三层级文本段落间隔 id_text_paragraph_margin_m 16vp 第四层级文本段落间隔 id_text_paragraph_margin_s 8vp 第五层级文本段落间隔 id_text_paragraph_margin_xs 4vp 组件间间隔 上下方向较大间隔 id_elements_margin_vertical_l 16vp 上下方向普通间隔 id_elements_margin_vertical_m 8vp 左右方向较大间隔 id_elements_margin_horizontal_l 16vp 左右方向普通间隔 id_elements_margin_horizontal_m 8vp 文本行间距(倍) 小段落文本 id_text_line_space_s 1.1 大段落文本 id_text_line_space_l 1.4 文章转载自:https://developer.harmonyos.com/cn/docs/documentation/doc-references-V3/ts-appendix-system-resources-0000001440645981-V3?catalogVersion=V3 |
CopyRight 2018-2019 实验室设备网 版权所有 |