菜单

前言

渐进真实 (Progressive Truthfulness)

[渐进的真实性]可能是构建物理对象模型的更好方法......从一个完全详细但仅类似于所需内容的模型开始。然后,一个接一个地调整一个属性,使结果更接近新创建的精神视觉,或更接近现实世界对象的真实属性。

......从样本本身具有一致性的样本开始,确保设计师失去这种一致性。

弗雷德里克布鲁克斯 - 设计中的设计

Semantic UI中的组件旨在帮助开发人员在开发过程中遵循渐进的真实性

使用Semantic UI的开发人员只需要使用CSS变量指定其组件与默认主题的区别,而不必从空白画布创建组件。

对于没有时间磨练特定外观的开发人员来说,默认主题是优雅和中性的,具有清晰易读的开源sans-serif字体Lato

用例引导 (Lead By Example)

重新创建GitHub (Recreating GitHub)

Semantic UI包括一个旨在展示主题的示例项目。此项目包括创建打包主题,使用组件CSS覆盖以及使用管理主题的示例theme.config

示例项目包括两个HTML文件,index.html旨在使用侧边栏交换主题,并使用预编译的CSS。static.html 使用Semantic UI输出的文件,可以与我们的 gulp pipeline 一起使用,尝试修改主题。

一些特别需要注意的事项:

使用 site.variables 修改页面容器大小,默认字体和颜色。
使用带有变量的 overrides 来添加 GitHub 的特殊格式的选项卡样式。
theme.config中将多个单独的组件主题组合在一起。
查看主题演示

使用主题

全站默认设置 (Sitewide Defaults)

Semantic UI 包括十二种命名颜色。具有颜色变化的组件在定义颜色应如何显示时会继承这些全局变量。

每个 继承级别 包含一个特殊文件 site.variables ,该文件定义了每个组件可以扩展的主题范围的默认值。

全局变量使用更高级别的抽象,以避免繁琐的必须修改多个属性以更改元素的外观。

其他按钮阴影(如悬停hover、活动active和焦点focus状态中使用的按钮阴影)是通过修改颜色变量的饱和度和亮度来创建的,这些派生的变量将自动调整为新的调色板。

@primaryColor : @pink; @secondaryColor : @grey; @red : #B03060; @orange : #FE9A76; @yellow : #FFD700; @olive : #32CD32; @green : #016936; @teal : #008080; @blue : #0E6EB8; @violet : #EE82EE; @purple : #B413EC; @pink : #FF1493; @brown : #A52A2A; @grey : #A0A0A0; @black : #000000;
所有颜色

组件默认值 (Component Defaults)

组件继承默认值site.variables,可以从中专门为其组件重新定义。

比如,你可以决定使用您的网站的品牌颜色而不是默认的灰色复选框。这可以通过调整几个变量就能完成。

/* Checkbox */ @checkboxActiveBackground: @primaryColor; @checkboxActiveBorderColor: @primaryColor; @checkboxActiveCheckColor: @white; /* Focused Checkbox */ @checkboxActiveFocusBackground: @primaryColorFocus; @checkboxActiveFocusBorderColor: @primaryColorFocus; @checkboxActiveFocusCheckColor: @white; @checkboxTransition: none; /* Radio */ @radioActiveBackground: @white; @radioActiveBorderColor: @primaryColor; @radioActiveBulletColor: @primaryColor; /* Focused Radio */ @radioActiveFocusBackground: @white; @radioActiveFocusBorderColor: @primaryColorFocus; @radioActiveFocusBulletColor: @primaryColorFocus; /* Slider */ @sliderOnLineColor: @primaryColor; /* Focused Slider */ @sliderOnFocusLineColor: @primaryColorFocus;

使用包主题 (Using Packaged Themes)

下载Semantic UI时,所有组件都将设置为使用默认主题。Semantic UI 使用特殊文件theme.config来控制项目的打包主题配置。

打包的主题适用于每个组件,而不是全局。这意味着您可以为每个组件指定单独的主题,从可用主题中混合和匹配。

默认情况下,theme.config 将所有组件值都设置为默认值。要选择主题,只需更改组件以匹配主题名称即可。

比如:

/******************************* Theme Selection *******************************/ /* Global */ @site : 'material'; /* Loads material site defaults */ @reset : 'default'; /* Elements */ @button : 'github'; /* But uses them with GitHub Buttons */ @container : 'default'; @divider : 'default'; @flag : 'default'; @header : 'default'; @icon : 'default'; @image : 'default'; @input : 'default'; @label : 'default'; @list : 'default'; @loader : 'default'; @rail : 'default'; @reveal : 'default'; @segment : 'default'; @step : 'default'; /* Collections */ @breadcrumb : 'default'; @form : 'default'; @grid : 'default'; @menu : 'chubby'; /* Other UI can use different themes as well */ @message : 'default'; @table : 'default'; /* Modules */ @accordion : 'default'; @checkbox : 'default'; @dimmer : 'default'; @dropdown : 'default'; @embed : 'default'; @modal : 'default'; @nag : 'default'; @popup : 'default'; @progress : 'default'; @rating : 'default'; @search : 'default'; @shape : 'default'; @sidebar : 'default'; @sticky : 'default'; @tab : 'default'; @transition : 'default'; /* Views */ @ad : 'default'; @card : 'default'; @comment : 'default'; @feed : 'default'; @item : 'default'; @statistic : 'default';

浏览主题 (Browsing for Themes)

每个UI定义都包含页面顶部的下拉列表,以预览项目中包含的主题。

主题是 每个组建的集合,比如说 material 主题可用于菜单, 按钮, 和 站点, 修改 "material" 的所有的值,将对未包含在该主题中的组件产生错误。

组件构成

定义文件 (Definition File)

每个组件都包含一个源CSS和Javascript文件,用于声明组件变量应如何影响其在屏幕上的显示。定义文件随每个新版本的语义UI更新,其中也可能包含新变量。

对于熟悉CSS的开发人员来说,导航定义文件是一种很好的方式,可以了解主题如何影响组件显示。

这是一个删节版本的 按钮 其中包含文件每个部分的说明。

/******************************* Theme *******************************/ /* Define type and element to help locate theme files */ @type : 'element'; @element : 'button'; /* Processes Variable Inheritance */ @import (multiple) '../../theme.config'; /* Create scope */ & { /******************************* Button *******************************/ /* Define Component */ .ui.button { cursor: pointer; display: inline-block; min-height: 1em; outline: none; border: none; vertical-align: @verticalAlign; background: @background; color: @textColor; font-family: @fontFamily; margin: 0em @horizontalMargin @verticalMargin 0em; padding: @verticalPadding @horizontalPadding (@verticalPadding + @shadowOffset); text-transform: @textTransform; text-shadow: @textShadow; font-weight: @fontWeight; line-height: @lineHeight; font-style: normal; text-align: center; text-decoration: none; border-radius: @borderRadius; box-shadow: @boxShadow; user-select: none; transition: @transition; will-change: @willChange; -webkit-tap-highlight-color: @tapColor; } /* Additional CSS removed for brevity */ /* Load CSS Overrides and Inline */ .loadUIOverrides(); }

主题文件 (Theme Files)

主题由两个文件组成 .variables 文件和.overrides 文件。主题可以包括变量和覆盖,也可以只包含一个。

变量文件 (Variables Files)

一个 .variables 文件指明应当为主题进行调节的变量。

主题的变量文件只需要包含主题不同的变量。

重写文件 (Override Files)

.overrides 件指定要添加到主题定义的其他CSS规则。此文件还可以访问组件的所有继承变量。

联级继承

主题继承 (Theme Inheritance)

主题包含三个不同级别的变量继承。

每个继承级别对应于变量的不同持久性级别。

默认
UI 默认
打包主题
可分发的包
网站主题
网站特定修改

默认主题 (Default Theme)

默认主题为组件提供基准变量。

了解哪些变量可用于包含在主题中的最佳方法是检查组件的默认 .variables 文件。

打包主题 (Packaged Theme)

打包的主题是捆绑在一起的文件夹中的主题。这些可以从互联网上下载,也可以在项目之间传输。

可以通过修改 theme.config 文件中的值来使用打包的主题。

站点主题 (Site Theme)

一个网站主题,不要与每一个主题文件夹中 site.variables 混淆, 它是是一个特殊的用户主题,可以加载到所有其他主题之上。

这是存储将在单个站点上使用的更改的最佳位置。站点主题可以被认为类似于Wordpress中的 子主题

站点主题文件是 可选包含 如果您不需要对项目中的组件添加其他更改,则可以安全地删除它们。