共享语义 unix语义_语义UI按钮

共享语义 unix语义

什么是语义UI按钮？ (What are Semantic UI Buttons?)

A button indicates a possible user action. Semantic UI provides an easy-to-use syntax that simplifies not only the styling of a button, but also the natural language semantics.

按钮指示可能的用户操作。 语义UI提供了易于使用的语法，不仅简化了按钮的样式，还简化了自然语言的语义。

如何使用 (How to use them)

The Semantic UI class is simply added to a button element. Various example are given below to indicate how to use it.

语义UI类仅添加到button元素。 下面给出了各种示例以指示如何使用它。

种类 (Types)

• Standard Button
  标准按钮

Standard Semantic UI button

标准语义UI按钮

<button class="ui button">Standard Button</button>

• Emphasis Button
  强调按钮

A button with a different level of emphasis

重点不同的按钮

<button class="ui primary button">

Other emphasis classes are secondary, positive, and negative

其他重点类别是secondary ， positive和negative

• Animated Button
  动画按钮

A button with animation, showing hidden contents

带有动画的按钮，显示隐藏的内容

<div class="ui animated fade button" tabindex="0">
  <div class="visible content">Sign-up for a Pro account</div>
  <div class="hidden content">$12.99 a month</div>
</div>

The property tabindex="0" above makes the button keyboard focusable, since the <button>tag was not used.

上面的属性tabindex="0"使按钮键盘可聚焦，因为未使用<button>标记。

• Labeled Button
  标记按钮

A button alongside a label

标签旁边的按钮

<div class="ui labeled button" tabindex="0">
  <div class="ui button"><i class="heart icon"></i> Like</div>
  <a class="ui basic label">2,048</a>
</div>

the element <i> is used to specify an icon, here it is a heart icon <i class="heart icon"></i> alongside basic label <a class="ui basic label">2,048</a>

元素<i>用于指定图标，这里是心脏图标<i class="heart icon"></i>和基本标签<a class="ui basic label">2,048</a>

• Icon Button
  图标按钮

A Semantic UI button can be just an icon

语义UI按钮可以只是一个图标

<button class="ui icon button">
  <i class="camera icon"></i>
</button>

The above is just a camera icon

上面只是一个相机图标

团体 (Groups)

Semantic UI buttons can exist in a group

语义UI按钮可以成组存在

<div class="ui buttons">
  <button class="ui button">One</button>
  <button class="ui button">Two</button>
  <button class="ui button">Three</button>
</div>

内容 (Content)

Semantic UI buttons can contain conditionals

语义UI按钮可以包含条件

<div class="ui buttons">
  <button class="ui positive button">Yes</button>
  <div class="or" data-text="or"></div>
  <button class="ui negative button">No</button>
</div>

状态 (States)

Semantic UI buttons can exist in different states, active, disabled, loading. Simply add a state name to the class attributeof` element.

语义UI按钮可以以不同的状态存在： active ， disabled ， loading 。 一个简单的状态名称添加到class属性of元素'。

<button class="ui loading button">Loading</button>

变化 (Variations)

Semantic UI buttons exist in variety of sizes, mini, tiny, small, medium, large, big, huge, and massive.

语义UI按钮存在各种尺寸，包括mini ， mini ， tiny ， small ， medium ， large ， big ， huge和massive 。

<button class="ui massive button">Massive Button</button>

There is a lot more about Semantic UI buttons, visit the provided link in More Information section to learn more.

关于语义UI按钮的更多信息，请访问“更多信息”部分中提供的链接以了解更多信息。

更多信息： (More Information:)

• Semantic UI Buttons Docs

  语义UI按钮文档

翻译自: https://www.freecodecamp.org/news/semantic-ui-buttons/

共享语义 unix语义