
import CssTable from '../../components/CssTable'
import Demo from '../../components/demo/navbar/index.mdx'

## 默认类名表格
  
<CssTable name="navbar" />
  
## 样例
  
<Demo></Demo>
  
## Css 结构


### Base

<div className="collapse">
<input type="checkbox" /> 
<div class="collapse-title px-0">
<span class="btn">Click to Show Base Schema</span>
</div>
<div class="collapse-content"> 

```css
.navbar {
  @apply flex items-center;
}

:where(.navbar > *) {
  @apply inline-flex items-center;
}

.navbar-start {
  width: 50%;
  justify-content: flex-start;
}

.navbar-center {
  @apply shrink-0;
}

.navbar-end {
  width: 50%;
  justify-content: flex-end;
}

```

</div>
</div>



### Styled

<div className="collapse">
<input type="checkbox" /> 
<div class="collapse-title px-0">
<span class="btn">Click to Show Styled Schema</span>
</div>
<div class="collapse-content"> 

```css
.navbar {
  padding: var(--navbar-padding, 0.5rem);
  min-height: 4rem;
  @apply w-full;
}

```

</div>
</div>



### Utils

<div className="collapse">
<input type="checkbox" /> 
<div class="collapse-title px-0">
<span class="btn">Click to Show Utils Schema</span>
</div>
<div class="collapse-content"> 

```css

```

</div>
</div>



