简介：语义UI组件库

最新推荐文章于 2024-04-17 15:10:30 发布

dingshi7798

最新推荐文章于 2024-04-17 15:10:30 发布

阅读量327

点赞数

文章标签： ui javascript 前端 ViewUI

正如我们大多数人可能知道的那样，Bootstrap和Foundation是前端开发框架中的当前领导者。但是历史告诉我们，最终会出现更好的情况，在这种情况下，可能不会那么遥远。

本文将向您介绍一个名为Semantic UI的框架前景新候选人。

语义UI是由LESS和jQuery支持的现代前端开发框架。它具有光滑，微妙且平坦的设计外观，可提供轻量级的用户体验。

根据语义UI网站的说法，该框架的目标是“通过创建一种用于共享UI的语言”来赋予设计人员和开发人员权力。他们通过利用语义，描述性语言为其类和命名约定来做到这一点。它没有像其他框架那样使用缩写，而是以更接近普通英语的方式使用了真实单词。

特征

语义UI在两种方面是独特的。首先是框架的结构方式。它使用五个描述性类别来定义可重用的UI组件。

UI元素是基本的构建块。它可以单独出现，也可以统一出现。例如，按钮可以是独立的，也可以放在按钮组中。
UI集合是一组相互依赖的不同种类的元素。例如，Web表单可以具有按钮，输入，复选框，图标等。
UI视图代表网站的常见内容。例如，提要或评论部分。
UI模块是具有基于JavaScript的交互式功能的组件。示例包括手风琴，调光器，模态等。
UI行为是不能独立存在的组件，而是用于将功能注入其他组件。例如，表单验证行为为表单组件提供了验证功能。

几乎每个组件都有类型，状态和变体。例如，某些按钮组件的类型包括：标准按钮，带图标的按钮，动画按钮，并且按钮可以处于活动，禁用或加载状态。最后，按钮的大小和颜色可以不同，并且可以设置为基本，社交，流畅，切换等格式。该方案为您提供了极大的组件外观灵活性。

如您所见，语义UI不仅在命名其类方面有意义，而且结构合理，在命名，定义和描述其组件方面也是如此。与在Bootstrap或Foundation中发现的结构相比，此结构具有更多的语义。

语义UI的第二个独特之处在于，它提供了一些其他框架中没有的专有功能和组件。例如，“ UI视图”组件中的“ 提要”和“ 注释” ，或“ UI模块”中的“ 侧边栏和形状 ”。此外，当与语义UI组件进行交互时，您将获得实时调试输出。只需打开您的Web控制台，您将看到您的组件准确地传达了他们在做什么。

语义UI的另一个优势在于，它使用最小化和中性的样式，使您可以自由定制。它包含重要和有用的内容，同时遗漏了您可能永远不会使用的其他功能。另外，该框架的组件是可移植的且独立的，因此您仅可以抓住和使用所需的组件。

框架使用em和rem单元作为其元素，使其完全响应并适应任何大小。您只需要更改基本字体，其他所有元素都会相应调整。

最后，语义UI的文档非常丰富，该网站提供了许多有关不同组件的示例。此外，它还有一个样式指南，其中包含有关如何编写代码的技术和说明。所有这些使学习框架成为一种轻松的体验。

要查找Semantic UI如何与其他项目和工具集成，请查看集成页面。

要查看使用语义UI构建的网站的外观，可以访问Quirky 。

好。到目前为止，一切都很好。但是我认为，如果不动手，对语义UI的概述将是不完整的。因此，现在让我们品尝一下语义UI的甜美之处。我将向您展示如何使用各种语义UI组件创建出色的“登录/注册”表单。

如何使用语义UI创建登录/注册表单

我们将创建一个表单，该表单根据用户是要“登录”还是“注册”来切换视图。这是视图的外观：

首先下载Semantic UI ，打开压缩文件并解压缩名为“ packaged”的文件夹。重命名为“ 语义UI表单示例” （或其他可以轻松识别的示例）。

要查看我们的表单示例的可行演示，只需下载完整的form.html文件并将其放入“ 语义UI表单示例”文件夹中。在浏览器中打开form.html文件，并玩弄表单以了解它的含义。现在，我将向您展示如何通过显示和解释所涉及的代码来重新创建表单。

首先，将文件重命名为complete_form.html并创建一个名为form.html的空文件。打开它并添加以下HTML：

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8" />
  <title>Semantic UI Sign In/Sign Up Form</title>

  <link href="css/semantic.css" rel="stylesheet" type="text/css" />

  <style type="text/css">

  </style>

</head>
<body>


  <!-- content will go here -->


  <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
  <script src="javascript/semantic.js" type="text/javascript"></script>

  <script type="text/javascript">

  </script>      
</body>
</html>

这是我们的起始模板。它链接到semantic.css和semantic.js文件，并添加了对jQuery库的引用。它还具有我们要添加的JavaScript和CSS的script和style标签。我在内部包括JavaScript和CSS只是出于学习目的，因为它更容易，而且您无需在多个文件之间跳转。但是在实际项目中，最好使用外部文件。

在开始之前，让我们考虑一下语义UI的工作方式。所有组件定义ui类开头，后跟组件名称。例如，要添加一个Button元素，只需为其提供ui button类。要添加状态和/或变量，只需插入所需的类。例如，要创建一个在悬停时将其颜色更改为蓝色的按钮，请添加hover状态类和blue变体类： ui hover blue button 。

让我们回到表格。我不会解释每个类的作用，因为这些类或多或少是自描述性的，您可以在文档中更多地了解它们的含义。

我们需要做的第一件事是添加一个包含我们表单的Segment元素。为此，我们添加了div标签以及一类ui raised segment signin 。对于表单的标题，我们使用h3标签和一类ui inverted blue block header 。接下来，我们创建一个两列网格，各列之间有一个垂直分隔线。在第一列中，我们添加一个带有ui blue stacked segment类的div ，该ui blue stacked segment将保存我们的表单元素。在底部，我们放置了另一个Divider元素，以及一个带有footer类的div 。

<div class="ui raised segment signin">
  <h3 class="ui inverted blue block header"> SIGN IN </h3>
  <div class="ui two column grid basic segment">
    <div class="column">
      <div class="ui blue stacked segment">
           <!-- form here -->
      </div>
    </div>
    <div class="ui vertical divider"> OR </div>
    <div class="center aligned column">
      <!-- Facebook button here -->
    </div>
  </div>
  <div class="ui divider"></div>
  <div class="footer">
    <!-- text plus button here -->
  </div>
</div>

现在我们需要添加一些样式。将代码放在您当前为空的style标签内。

body, .ui.vertical.divider {
  color: #696969;
}

.ui.vertical.divider {
  margin: 0 4px;
}

.ui.raised.segment {
  background-color: #fffacd;
  width: 600px;
  margin-top: 0;
  position: fixed;
  left: 10px;
  top: 10px;
}

接下来，在第一列（HTML注释显示“此处为表单”）中，添加表单的代码。为了创建表单，我们添加了带有ui form类的div标签。然后，我们再放置两个div标签，每个div标签具有一个field类，另一个则包含一个inline field类，最后一个带有ui red submit button 。前两个字段用于Username和Password 。在格式为inline的第三个div ，我们放置了一个复选框。

<div class="ui form">
  <div class="field">
    <label> Username </label>
    <div class="ui left labeled icon input">
      <input type="text">
      <i class="user icon"></i>
    </div>
  </div>
  <div class="field">
    <label> Password </label>
    <div class="ui left labeled icon input">
      <input type="password">
      <i class="lock icon"></i>
    </div>
  </div>
  <div class="inline field">
    <div class="ui checkbox">
      <input id="remember" type="checkbox">
      <label for="remember"> Remember me </label>
    </div>
  </div>
  <div class="ui red submit button"> Sign In </div>
</div>

在第二行中，类center aligned column （HTML注释显示“此处的Facebook按钮”）中，我们使用h4标题并添加语义UI的Facebook社交按钮：

<h4 class="ui header"> Sign in with: </h4>
<div class="ui facebook button">
  <i class="facebook icon"></i>
  Facebook
</div>

我们通过添加一些文本和一个动画按钮来完成页脚，该按钮会将表单从“登录”切换为“注册”。添加了以下HTML，其中HTML注释显示“此处的文本加号”：

<div class="text"> Not a member? </div>
<div class="ui vertical animated blue mini button signup">
  <div class="visible content"> Join Us </div>
  <div class="hidden content">
    <i class="users icon"></i>
  </div>
</div>

我们还需要添加一些样式以正确显示我们的页脚。在style标签内现有CSS下方添加以下CSS：

.footer {
  text-align: right;
}

.text {
  display: inline;
}

现在第一面（“注册”）已准备就绪。让我们创建第二个。我们从下面的代码开始，该代码与我们已经介绍的代码相似。该HTML被添加到我们所有现有HTML的下方：

<div class="ui raised segment signup inactive">
  <h3 class="ui inverted blue block header"> SIGN UP </h3>
  <div class="ui blue stacked segment">
       <!-- form here -->
  </div>
  <div class="ui divider"></div>
  <div class="footer">
    <div class="text"> Already a member? </div>
    <div class="ui vertical animated blue mini button signin">
      <div class="visible content"> Log In </div>
      <div class="hidden content">
        <i class="sign in icon"></i>
      </div>
    </div>
  </div>
</div>

接下来，在刚才添加的HTML中，将代码的表单代码添加到segment元素内（其中HTML注释显示“此处为表单”）。带有类ui error message的div放在表单的末尾，因为我们稍后将添加的Form Validation行为要求它向用户显示错误。

<div class="ui form">
  <div class="two fields">
    <div class="field">
      <!-- Username here -->              
    </div>
    <div class="field">
      <!-- Email here -->
    </div>
  </div>
  <div class="two fields">
    <div class="field">
      <!-- Password here -->        
    </div>
    <div class="field">
      <!-- Confirm Password here -->
    </div>
  </div>
  <div class="inline field">
    <!-- checkbox here -->
  </div>
  <div class="ui red submit button"> Sign Up </div>
  <div class="ui error message"></div>
</div>

请注意，上述HTML中的每个field元素都有一个注释，该注释指示我们将在表单的哪一部分中添加。现在开始吧。

这是“ 用户名”字段的代码：

<label> Username </label>
<div class="ui left labeled icon input">
  <input id="username" placeholder="e.g., Tarzan" type="text">
  <i class="user icon"></i>
  <div class="ui corner label">
    <i class="asterisk icon"></i>
  </div>
</div>

这是电子邮件字段的代码：

<label> Email </label>
<div class="ui left labeled icon input">
  <input id="email" placeholder="e.g., tarzan@jungle.org" type="text">
  <i class="mail icon"></i>
  <div class="ui corner label">
    <i class="asterisk icon"></i>
  </div>
</div>

这是密码字段的代码：

<label> Password </label>
<div class="ui left labeled icon input">
  <input id="password" placeholder="e.g., !@#$%^&amp;*()_+:)" type="password">
  <i class="lock icon"></i>
  <div class="ui corner label">
    <i class="asterisk icon"></i>
  </div>
</div>

这是确认密码字段的代码：

<label> Confirm Password </label>
<div class="ui left labeled icon input">
  <input id="confirm-password" placeholder="e.g., !@#$%^&amp;*()_+:)" type="password">
  <i class="lock icon"></i>
  <div class="ui corner label">
    <i class="asterisk icon"></i>
  </div>
</div>

复选框的代码：

<div class="ui checkbox">
  <input id="terms" type="checkbox">
  <label for="terms"> I agree to the <a href="#"> Terms and Conditions </a></label>
</div>

我们还为链接添加样式：

a {
  text-decoration: none;
  color: #1E90FF;
}

现在我们已经准备好表单的两个部分，我们需要添加代码以从表单的一侧切换到另一侧。将以下代码放入空script标记中。

$( document ).ready(function() {

  // Hide Sign Up side on initialization
  $( '.inactive' ).hide();


  $( '.mini.button.signup' ).click(function() {

    // Hide Sign In and show Sign Up side with slide down effect
    $( '.ui.segment.signin' )
      .hide()
      .end()
    .find( '.ui.segment.signup' )
      .slideDown();

  });


  $( '.mini.button.signin' ).click(function() {

    // Hide Sign Up and show Sign In side with slide down effect
    $( '.ui.segment.signup' )
      .hide()
      .end()
    .find( '.ui.segment.signin' )
      .slideDown();

  });
});

我们的表单看起来不错-但是，如果用户键入无效值怎么办？我们需要添加验证。为此，我们在上面刚刚添加的代码之后在script标记内添加了以下代码：

$( '.ui.form' )
  .form({
    username: {
      identifier : 'username',
      rules: [
        {  
          type   : 'empty',
          prompt : 'Please enter a username'
        }
      ]
    },
    email: {
      identifier : 'email',
      rules: [
        {
          type   : 'email',
          prompt : 'Please enter a valid email addres'
        }
      ]
    },
    password: {
      identifier : 'password',
      rules: [
        {
          type   : 'empty',
          prompt : 'Please enter a password'
        },
        {
          type   : 'length[6]',
          prompt : 'Your password must be at least 6 characters'
        }
      ]
    },
    passwordConfirm: {
      identifier : 'confirm-password',
      rules: [
        {
          type   : 'empty',
          prompt : 'Please confirm your password'
        },
        {
          type   : 'match[password]',
          prompt : 'Password doesn\'t match'
        }
      ]
    },
    terms: {
      identifier : 'terms',
      rules: [
        {
          type   : 'checked',
          prompt : 'You must agree to the terms and conditions'
        }
      ]
    }
});

您可以在文档中详细了解上述代码的工作方式。

做得好！这是一个非常简单的示例，在此示例中，我们仅涉及了语义UI功能的表面。

结论

如您所见，语义UI在前端开发框架的外观方面是一个全新的，新鲜的，并且在某些方面是独特的。从我们在这里考虑的内容来看，尽管截至本文撰写之时仅几个月，但您可以看到它是非常有前途的，值得在今年的许多开发人员关注列表中列出。

再一次，您可以在此处下载完整的教程文件，并记得在解压缩完整的语义UI库时将其添加到“打包”文件夹中。

From: https://www.sitepoint.com/introducing-semantic-ui-component-library/

dingshi7798

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简介：语义UI组件库

因为我们大多数人可能已经注意到，引导和基金会是前端开发框架之一的现任领导人。但历史告诉我们，最终更好的东西将沿着在这种情况下，可能不会那么远来。本文将向您介绍关于称为框架景观新的候选语义UI 。语义UI是一个现代化的前端开发框架，搭载LESS和jQuery。它有一个圆滑的，微妙的，扁平的外观设计，提供了一个轻量级的用户体验。根据语意UI网站，框架的目标是“通过创建共享用户界面语言...
复制链接

扫一扫