Bulma-components-tabs
提供：Dev Guides
ブルマ-タブ
説明
Bulmaは、コンテンツを表示するためのさまざまなスタイルのタブ付きナビゲーションメニューを提供します。 _tabs_の基本クラスと番号なしリストを使用して、タブ付きナビゲーションメニューを作成できます。
以下の例は、_tabs_クラスを使用して、タブ付きナビゲーションメニューとアイコンを作成する方法を示しています-
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Elements Example</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<section class = "section">
<div class = "container">
<span class = "title">Tabs</span><br><br>
<span class = "is-size-5">Simple Tab</span><br><br>
<div class = "tabs">
<ul>
<li class = "is-active"><a>Home</a></li>
<li><a>About Us</a></li>
<li><a>Services</a></li>
<li><a>Contact Us</a></li>
</ul>
</div>
<br>
<br>
<span class = "is-size-5">
Centered Tab
</span>
<br>
<br>
<div class = "tabs is-centered">
<ul>
<li class = "is-active"><a>Home</a></li>
<li><a>About Us</a></li>
<li><a>Services</a></li>
<li><a>Contact Us</a></li>
</ul>
</div>
<br>
<br>
<span class = "is-size-5">
Right Tab
</span>
<br>
<br>
<div class = "tabs is-right">
<ul>
<li class = "is-active"><a>Home</a></li>
<li><a>About Us</a></li>
<li><a>Services</a></li>
<li><a>Contact Us</a></li>
</ul>
</div>
<br>
<br>
<span class = "is-size-5">
Tabs with Icons
</span>
<br>
<br>
<div class = "tabs">
<ul>
<li class = "is-active">
<a>
<span class = "icon is-small">
<i class = "fas fa-home" aria-hidden = "true"></i>
</span>
<span>Home</span>
</a>
</li>
<li>
<a>
<span class = "icon is-small">
<i class = "fas fa-building" aria-hidden = "true"></i>
</span>
<span>About Us</span>
</a>
</li>
<li>
<a>
<span class = "icon is-small">
<i class = "fas fa-cogs" aria-hidden = "true"></i>
</span>
<span>Services</span>
</a>
</li>
<li>
<a>
<span class = "icon is-small">
<i class = "fas fa-file-signature" aria-hidden = "true"></i>
</span>
<span>Contact Us</span>
</a>
</li>
</ul>
</div>
</div>
</section>
</body>
</html>以下の出力が表示されます-
タブサイズ
タブコンポーネントに_is-small 、 is-medium 、 is-large_などの3つの修飾子を使用して、タブのサイズを指定できます。
以下の例では、さまざまなサイズでタブを表示する方法を決定します-
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Elements Example</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<section class = "section">
<div class = "container">
<span class = "title">
Tab Sizes
</span>
<br>
<br>
<span class = "is-size-5">
Small Tab
</span>
<br>
<br>
<div class = "tabs is-small">
<ul>
<li class = "is-active"><a>Home</a></li>
<li><a>About Us</a></li>
<li><a>Services</a></li>
<li><a>Contact Us</a></li>
</ul>
</div>
<br>
<br>
<span class = "is-size-5">
Medium Tab
</span>
<br>
<br>
<div class = "tabs is-medium">
<ul>
<li class = "is-active"><a>Home</a></li>
<li><a>About Us</a></li>
<li><a>Services</a></li>
<li><a>Contact Us</a></li>
</ul>
</div>
<br>
<br>
<span class = "is-size-5">
Large Tab
</span>
<br>
<br>
<div class = "tabs is-large">
<ul>
<li class = "is-active"><a>Home</a></li>
<li><a>About Us</a></li>
<li><a>Services</a></li>
<li><a>Contact Us</a></li>
</ul>
</div>
</div>
</section>
</body>
</html>以下の出力が表示されます-
タブスタイル
次の例に示すように、境界線（_is-boxed_クラス）、丸みを帯びた（_is-toggle-rounded_クラス）要素を持つタブのスタイルを指定できます-
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Elements Example</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<section class = "section">
<div class = "container">
<span class = "title">
Tab Styles
</span>
<br>
<br>
<span class = "is-size-5">
Bordered Tab
</span>
<br>
<br>
<div class = "tabs is-boxed">
<ul>
<li class = "is-active"><a>Home</a></li>
<li><a>About Us</a></li>
<li><a>Services</a></li>
<li><a>Contact Us</a></li>
</ul>
</div>
<br>
<br>
<span class = "is-size-5">
Toggle Tab
</span>
<br>
<br>
<div class = "tabs is-toggle">
<ul>
<li class = "is-active"><a>Home</a></li>
<li><a>About Us</a></li>
<li><a>Services</a></li>
<li><a>Contact Us</a></li>
</ul>
</div>
<br>
<br>
<span class = "is-size-5">
Rounded Tab
</span>
<br>
<br>
<div class = "tabs is-toggle is-toggle-rounded">
<ul>
<li class = "is-active"><a>Home</a></li>
<li><a>About Us</a></li>
<li><a>Services</a></li>
<li><a>Contact Us</a></li>
</ul>
</div>
</div>
</section>
</body>
</html>以下の出力が表示されます-
タブを組み合わせる
Bulmaでは、以下の例に示すように、is-centered _、 is-boxed 、 is-medium 、 is-fullwidth_などのさまざまなタイプの修飾子とタブを組み合わせることができます-
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Elements Example</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<section class = "section">
<div class = "container">
<span class = "title">
Combining Tabs
</span>
<br>
<br>
<span class = "is-size-5">
Centered and Boxed Tab
</span>
<br>
<br>
<div class = "tabs is-centered is-boxed">
<ul>
<li class = "is-active"><a>Home</a></li>
<li><a>About Us</a></li>
<li><a>Services</a></li>
<li><a>Contact Us</a></li>
</ul>
</div>
<br>
<br>
<span class = "is-size-5">
Toggle and Fullwidth Tab
</span>
<br>
<br>
<div class = "tabs is-toggle is-fullwidth">
<ul>
<li class = "is-active"><a>Home</a></li>
<li><a>About Us</a></li>
<li><a>Services</a></li>
<li><a>Contact Us</a></li>
</ul>
</div>
<br>
<br>
<span class = "is-size-5">
Centered, Boxed and Medium Tab
</span>
<br>
<br>
<div class = "tabs is-centered is-boxed is-medium">
<ul>
<li class = "is-active"><a>Home</a></li>
<li><a>About Us</a></li>
<li><a>Services</a></li>
<li><a>Contact Us</a></li>
</ul>
</div>
<br>
<br>
<span class = "is-size-5">
Toggle, Fullwidth and Large Tab
</span>
<br>
<br>
<div class = "tabs is-toggle is-fullwidth is-large">
<ul>
<li class = "is-active"><a>Home</a></li>
<li><a>About Us</a></li>
<li><a>Services</a></li>
<li><a>Contact Us</a></li>
</ul>
</div>
</div>
</section>
</body>
</html>以下の出力が表示されます-
