Navigation Bar
Properties
Variant
| Property | Type | Default | Description |
|---|---|---|---|
| variant | Variant | horizontal | 用於控制bar組件樣式變體 |
bar提供三種樣式變體：
| Variant | Description |
|---|---|
| vertical | Vertical orientation |
| horizontal | Horizontal orientation |
| vertical-xr | Vertical orientation with XR support |
Variant對象取值：
| Variant | Value |
|---|---|
| Variant.Vertical | vertical |
| Variant.Horizontal | horizontal |
| Variant.VerticalXR | vertical-xr |
Navigation Scope
Code
<mdc-navigation-bar open navigation-scope="scope-a">
<mdc-navigation-tab name="nsa" value="/" checked label="A1" navigation-scope="scope-a">
<mdc-icon slot="inactive-icon">home</mdc-icon>
<mdc-icon slot="active-icon" filled>home</mdc-icon>
</mdc-navigation-tab>
</mdc-navigation-bar>
<mdc-navigation-bar open navigation-scope="scope-b">
<mdc-navigation-tab name="nsb" value="/" checked label="B1" navigation-scope="scope-b">
<mdc-icon slot="inactive-icon">home</mdc-icon>
<mdc-icon slot="active-icon" filled>home</mdc-icon>
</mdc-navigation-tab>
</mdc-navigation-bar>Variant
Code
<mdc-navigation-bar open variant="horizontal">
<mdc-navigation-tab name="nv1" value="/" checked label="A">
<mdc-icon slot="inactive-icon">home</mdc-icon>
<mdc-icon slot="active-icon" filled>home</mdc-icon>
</mdc-navigation-tab>
<mdc-navigation-tab name="nv1" value="/b" label="B">
<mdc-icon slot="inactive-icon">home</mdc-icon>
<mdc-icon slot="active-icon" filled>home</mdc-icon>
</mdc-navigation-tab>
</mdc-navigation-bar>
<mdc-navigation-bar open variant="vertical" style="height: 200px;">
<mdc-navigation-tab name="nv2" value="/" checked label="A" variant="bar-vertical">
<mdc-icon slot="inactive-icon">home</mdc-icon>
<mdc-icon slot="active-icon" filled>home</mdc-icon>
</mdc-navigation-tab>
<mdc-navigation-tab name="nv2" value="/b" label="B" variant="bar-vertical">
<mdc-icon slot="inactive-icon">home</mdc-icon>
<mdc-icon slot="active-icon" filled>home</mdc-icon>
</mdc-navigation-tab>
</mdc-navigation-bar>