Bootstrapで指定できないStyleは、UnoCSSで指定できます。
現在は Windi CSS を Class 属性で指定する方法をサポートしています。
Theme 変数の値はBootstrap5との互換性のため調整されています。
Windiのオンラインドキュメントとは設定値や結果が異なる場合があります。
Windi CSS
General | Colors Typography SVG |
Accessibility | Screen Readers |
Animations | Animation Transforms Transitions |
Backgrounds | Background Gradients Background Blend Mode |
Behaviors | Box Decoration Break Image Rendering Listings Overflow Overscroll Behavior Placeholder |
Borders | Border Divider Outline Ring |
Effects | Box Shadow Opacity Mix Blend Mode |
Filters | Filter Backdrop Filter |
Interactivity | Accent Color Appearance Cursor Caret Pointer Events Resize Scroll Behavior Touch Action User Select Will Change |
Layout | Columns Container Display Flexbox Grid Positioning Sizing Spacing Tables |
Usage
Class attribute
un- プリフィックスを利用してUnoCSSを利用できます。
Element Content
vue
<template>
<div class="un-bg-teal">
Element Content
</div>
</template>
Responsive Design
Custom Range プリフィックスを利用して特定の範囲のbreakpointを対象にCSSを適用できます。
Element Content
vue
<template>
<div class="lt-lg:un-bg-teal lg:un-animate-bounce">
Element Content
</div>
</template>
Button Translate on Hover
vue
<template>
<b-button
color="primary"
size="md"
class="hover:-un-translate-y-0.5"
>
Large button
</b-button>
</template>
Card Translate on Hover
vue
<template>
<Card
class="hover:-un-translate-y-0.5"
>
<CardImg
src="/unsplash/image/480x220/dlxmedia-hu-U-W8FKeC6Mo-unsplash.jpg"
alt="Image Description"
ratio="16x9"
/>
<CardImgOverlay>
<CardBody>
<CardTitle text-color="dark">
Design Tools
</CardTitle>
<CardText text-color="dark">
Access to advanced design techniques
</CardText>
</CardBody>
<CardFooter>
<CardLink
stretched
to="/"
icon="bi:chevron-right"
icon-end
>
Browse tools
</CardLink>
</CardFooter>
</CardImgOverlay>
</Card>
</template>