Sass 语义UI

semantic-ui-sass 是 Sass 驱动的版本 语义UI 准备降落 进入铁道,指南针,或螺旋桨.

页:1

宝石只有默认主题 .

安装和使用

gem 'semantic-ui-sass'

bundle install 并重新启动您的服务器,以便通过 输油管.

带有铁道或螺旋桨的语义- ui- sass

支助科

在 SCSS 文件中导入语义( 例如, ), application.css.scss获得一切 语义的风格

@import 'semantic-ui';

也可以包括模块

@import 'semantic-ui/collections/menu';

自定义字体

$font-url: 'http://fonts.useso.com/css?family=Lato:400,700,400italic,700italic&subset=latin';
@import 'semantic-ui';

跳过字体加载

$import-google-fonts: false;
@import 'semantic-ui';

自定义字体家族

$font-family: 'custom-font-family';
@import 'semantic-ui';

跳过自定义滚动条的使用

$use-custom-scrollbars: false;
@import 'semantic-ui';

所有变量,你可以自定义其中任何

字体 :

$font-name: 'Lato' !default;
$font-family: $font-name, 'Helvetica Neue', Arial, Helvetica, sans-serif !default;
$font-url: 'https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic&subset=latin,latin-ext' !default;
$import-google-fonts: true !default;

滚动栏 :

$use-custom-scrollbars: true !default;

断点 :

$mobile-breakpoint: 320px !default;
$tablet-breakpoint: 768px !default;
$computer-breakpoint: 992px !default;
$large-monitor-breakpoint: 1200px !default;
$widescreen-monitor-breakpoint: 1920px !default;

爪哇脚本

Ruby on Rails 版本 5

我们有个帮手 包括所有语义的Javascript。 把这个放进你的 Javascript 运算符( 通常在 application.js改为:

// Loads all Semantic javascripts
//= require semantic-ui

也可以装入单个模块,条件是您还需要任何 依赖性.

//= require semantic-ui/modal
//= require semantic-ui/dropdown

Ruby on Rails 版本 6+ 有网络包装器

用纱线添加包 :

yarn add jquery popper.js @doabit/semantic-ui-sass

在配置/网包/环境.js中,增加以下内容:

const webpack = require('webpack')

environment.plugins.append(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    Popper: ['popper.js', 'default']
  })
)

在app/javascript/packs/applications.js中,增加以下内容:

import '@doabit/semantic-ui-sass'

如果您使用 webpakcer 要导入样式表,请添加

import '@doabit/semantic-ui-sass/src/scss/semantic-ui.scss'

语义学 - ui - ass with Copass

新项目

安装宝石并使用宝石创建新工程.

gem install semantic-ui-sass
compass create compass-project -r semantic-ui-sass --using semantic-ui

这会解决一些问题:

• 你会有一个开始 styles.scss
• 您将获得一个编译的样式表, 并准备降入您的 应用程序
• 我们还会把语义的javascripts和图像与字体复制到他们的 各个文件夹

现有项目

安装宝石, 在配置上方添加所需语句 文件,并安装扩展名.

gem install semantic-ui-sass

# In config.rb
require 'semantic-ui-sass'

compass install semantic-ui

页:1

当使用指南针时,您应该访问本地服务器中的文件, eg http://localhost:3000/index.html,而不是 file:///Users/doabit/demo/index.html

铁路辅助人员

面包屑帮助器

添加面包屑帮助器 <%= semantic_breadcrumbs %> 到您的布局.

class ApplicationController
  semantic_breadcrumb :index, :root_path
end

class ExamplesController < ApplicationController
  semantic_breadcrumb :index, :examples_path

  def index
  end

  def show
    @example = Example.find params[:id]
    semantic_breadcrumb @example.name, example_path(@example)
    # semantic_breadcrumb :show, example_path(@example)
  end
end

闪光助手

添加闪存帮助 <%= semantic_flash %> 到您的布局

图标助手

semantic_icon('add')
# => <i class="add icon"></i>
semantic_icon(:add)
# => <i class="add icon"></i>
semantic_icon('add sign')
# => <i class="add sign icon"></i>
semantic_icon('add', 'sign')
# => <i class="add sign icon"></i>
semantic_icon(:add, :sign)
# => <i class="add sign icon"></i>
semantic_icon('add', id: 'id')
# => <i class="add icon" id="id"></i>

开始

• 添加全局变量
• 添加栏杆帮助器 render_flash? 吗?

捐款

1. 叉开它
2. 创建您的特性分支( E)git checkout -b my-new-feature(中文(简体) )
3. 提交更改( E)git commit -am 'Add some feature'(中文(简体) )
4. 推向分行(git push origin my-new-feature(中文(简体) )
5. 创建新的拉请求