共享語義 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語義

總結

以上是生活随笔為你收集整理的共享语义 unix语义_语义UI按钮的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。