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

## 默认类名表格
  
<CssTable name="toast" />
  
## 样例
  
<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
.toast {
  @apply fixed flex min-w-fit flex-col 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
.toast {
  @apply gap-2 p-4;
}
.toast > * {
  animation: toast-pop 0.25s ease-out;
}

@keyframes toast-pop {
  0% {
    transform: scale(0.9);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

```

</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
:where(.toast) {
  @apply bottom-0 end-0 start-auto top-auto translate-x-0 translate-y-0;
}

.toast:where(.toast-start) {
  @apply end-auto start-0 translate-x-0;
}

.toast:where(.toast-center) {
  @apply end-1/2 start-1/2 -translate-x-1/2 rtl:translate-x-1/2;
}

.toast:where(.toast-end) {
  @apply end-0 start-auto translate-x-0;
}

.toast:where(.toast-bottom) {
  @apply bottom-0 top-auto translate-y-0;
}

.toast:where(.toast-middle) {
  @apply bottom-auto top-1/2 -translate-y-1/2;
}

.toast:where(.toast-top) {
  @apply bottom-auto top-0 translate-y-0;
}

```

</div>
</div>



