@matthiesenxyz/astrolace
v0.3.2
Published
An easy way to use Shoelace.style within your Astro Project!
Downloads
428
Maintainers
adammatthiesenReadme
Astrolace
An easy way to use Shoelace.style within your Astro Project!
Usage
Installation
Install the integration automatically using the Astro CLI:
pnpm astro add @matthiesenxyz/astrolacenpx astro add @matthiesenxyz/astrolaceyarn astro add @matthiesenxyz/astrolaceOr install it manually:
- Install the required dependencies
pnpm add @matthiesenxyz/astrolacenpm install @matthiesenxyz/astrolaceyarn add @matthiesenxyz/astrolace- Add the integration to your astro config
+import astrolace from "@matthiesenxyz/astrolace";
export default defineConfig({
integrations: [
+ astrolace(),
],
});Setup
- Add the
<ShoelaceHeader>Element to your Layout's<head>
---
import { ShoelaceHeader } from "astrolace:components/header";
---
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Example</title>
<ShoelaceHeader />
</head>
</html>- Use any of the exported components!
---
import {
Alert, AnimatedImage, Avatar, Badge, Breadcrumb, BreadcrumbItem,
ButtonGroup, Button, Card, Carousel, CarouselItem, Checkbox,
ColorPicker, CopyButton, Details, Divider, Dialog, Drawer,
Dropdown, FormatBytes, FormatDate, FormatNumber, Icon, IconButton,
ImageComparer, Include, Input, Menu, MenuItem, MenuLabel, MutationObserver,
Option, Popup, ProgressBar, ProgressRing, QrCode, Radio, RadioButton,
RadioGroup, Range, Rating, RelativeTime, ResizeObserver, Select,
Skeleton, Spinner, SplitPanel, Switch, Tab, TabGroup, TabPanel,
Tag, Textarea, Tooltip, Tree, TreeItem, VisuallyHidden
} from "astrolace:components";
---Advanced Configuration
Tools
registerIconLibrary- Allows the user to register extra icons (example shown is to register the default icon library(Bootstrap Icons))
---
import { ShoelaceHeader } from "astrolace:components/header";
---
<html>
<head>
<ShoelaceHeader />
<script>
// `registerIconLibrary` function from Shoelace.style
import { registerIconLibrary } from "astrolace:tools";
// Register the default icon library
registerIconLibrary('default', {
resolver: name => `https://cdn.jsdelivr.net/npm/[email protected]/icons/${name}.svg`
});
</script>
</head>
</html>Types
All types are exported from "astrolace:types".
Contributing
This package is structured as a monorepo:
playgroundcontains code for testing the packagepackagecontains the actual package
Install dependencies using pnpm:
pnpm i --frozen-lockfileStart the playground and package watcher:
pnpm devYou can now edit files in package. Please note that making changes to those files may require restarting the playground dev server.
Licensing
MIT Licensed. Made with ❤️ by AdamMatthiesen.
Acknowledgements
Shoelace.style- The whole purpose of this project!