0.6.2 • Published 2 years ago

svelte-luna v0.6.2

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

LUNA

Luna is a simple, elegant and beautiful UI component library for Svelte.

Remember that Luna is still in an EARLY STAGE. Many aspects could change in the future.

Get started

Install the package:

npm i svelte-luna

Then import luna in your project:

import {
  Avatar,
  Button,
  Card,
  CheckBox,
  CircleProgress,
  Divider,
  FlipView,
  LineProgress,
  Dropdown,
  DropdownMenu,
  ContextMenu,
  MenuItem,
  Radio,
  Segment,
  SegmentedControl,
  Select,
  Switch,
  TextField,
} from "svelte-luna";

// OR

import Avatar from "svelte-luna/widgets/Avatar.svelte";
import Button from "svelte-luna/widgets/Button.svelte";
import Card from "svelte-luna/widgets/Card.svelte";
// ecc...

Remember to import the required css files (rollup-plugin-css-only is required):

import "svelte-luna/css/theme.css";
import "svelte-luna/css/global.css";

If you prefer you can copy the css files from the package folder into your project and import them directly into your html. Finally select the desired theme (dark-theme or light-theme):

<body class="dark-theme"></body>
<!-- OR -->
<body class="light-theme"></body>

<!-- You can assign the desired theme wherever you want -->
<MyComponent class="dark-theme"></MyComponet>

<!-- dynamic theme example -->
<script>
  import {theme} from "stores/theme";

  $: {
    document.body.className = $theme;
  }
</script>

Actions

Luna provides some Svelte actions.

import {
  autofocus,
  badge,
  modal,
  pannable,
} from "svelte-luna/actions";

Styling

To customize the appearance of the components you can override the CSS variables found in svelte-luna/css/theme.css.

Project Showcase

There is currently no documentation for Luna but you can find a components showcase at https://loskware.github.io/svelte-luna

sveltesvelte-uilunaui
@infinitebrahmanuniverse/nolb-svelte-l@everything-registry/sub-chunk-2855
0.5.4

2 years ago

0.3.6

2 years ago

0.5.3

2 years ago

0.3.5

2 years ago

0.5.6

2 years ago

0.3.8

2 years ago

0.5.5

2 years ago

0.3.7

2 years ago

0.5.0

2 years ago

0.3.2

2 years ago

0.5.2

2 years ago

0.3.4

2 years ago

0.5.1

2 years ago

0.3.3

2 years ago

0.5.8

2 years ago

0.5.7

2 years ago

0.5.9

2 years ago

0.6.2

2 years ago

0.4.1

2 years ago

0.4.0

2 years ago

0.6.1

2 years ago

0.6.0

2 years ago

0.1.0

2 years ago

0.3.0

2 years ago

0.2.1

2 years ago

0.1.2

2 years ago

0.0.3

2 years ago

0.2.0

2 years ago

0.1.1

2 years ago

0.0.2

2 years ago

0.2.7

2 years ago

0.1.8

2 years ago

0.2.6

2 years ago

0.1.7

2 years ago

0.2.9

2 years ago

0.2.8

2 years ago

0.1.9

2 years ago

0.2.3

2 years ago

0.1.4

2 years ago

0.0.5

2 years ago

0.3.1

2 years ago

0.2.2

2 years ago

0.1.3

2 years ago

0.0.4

2 years ago

0.2.5

2 years ago

0.1.6

2 years ago

0.2.4

2 years ago

0.1.5

2 years ago

0.0.1

3 years ago

0.0.1-alpha.9

3 years ago

0.0.1-alpha.8

3 years ago

0.0.1-alpha.7

3 years ago

0.0.1-alpha.6

3 years ago

0.0.1-alpha.5

3 years ago

0.0.1-alpha.4

3 years ago

0.0.1-alpha.3

3 years ago

0.0.1-alpha.2

3 years ago

0.0.1-alpha.1

3 years ago