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

## 默认类名表格
  
<CssTable name="stat" />
  
## 样例
  
<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
.stats {
  @apply inline-grid;
}

:where(.stats) {
  @apply grid-flow-col;
}

.stat {
  @apply inline-grid w-full;
  grid-template-columns: repeat(1, 1fr);
}
.stat-figure {
  @apply col-start-2 row-span-3 row-start-1 place-self-center justify-self-end;
}
.stat-title {
  @apply col-start-1 whitespace-nowrap;
}
.stat-value {
  @apply col-start-1 whitespace-nowrap;
}
.stat-desc {
  @apply col-start-1 whitespace-nowrap;
}
.stat-actions {
  @apply col-start-1 whitespace-nowrap;
}

```

</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
.stats {
  @apply bg-base-100 text-base-content rounded-box;
}

:where(.stats) {
  @apply divide-x divide-y-0 overflow-x-auto;
}

:is([dir="rtl"] .stats > :not([hidden]) ~ :not([hidden])) {
  --tw-divide-x-reverse: 1;
}

.stat {
  @apply border-base-content gap-x-4 border-opacity-10 px-6 py-4;
}
.stat-title {
  @apply text-base-content/60;
}
.stat-value {
  @apply text-4xl font-extrabold;
}
.stat-desc {
  @apply text-base-content/60 text-xs;
}
.stat-actions {
  @apply mt-4;
}

```

</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
.stats-horizontal {
  @apply grid-flow-col;
  @apply divide-x divide-y-0 overflow-x-auto rtl:[--tw-divide-x-reverse:1];
}

.stats-vertical {
  @apply grid-flow-row;
  @apply divide-x-0 divide-y overflow-y-auto;
}

```

</div>
</div>



