Coder Social home page Coder Social logo

ktibow / m3-svelte Goto Github PK

View Code? Open in Web Editor NEW
214.0 5.0 9.0 953 KB

M3 Svelte implements the Material 3 design system in Svelte, from the components to the animations to the theming.

Home Page: https://ktibow.github.io/m3-svelte/

License: Other

JavaScript 1.11% HTML 0.19% Svelte 86.62% TypeScript 9.35% CSS 2.72%
material material-3 svelte material-you

m3-svelte's Introduction

m3-svelte

M3 Svelte implements the Material 3 design system in Svelte. See the website for demos and usage instructions.

m3-svelte's People

Contributors

dependabot[bot] avatar hubertmalkowski avatar jl102 avatar ktibow avatar kwaa avatar mytja avatar not-nullptr avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

m3-svelte's Issues

Allow passing custom classes

First of all: Great work on the library, the components look amazing.

It'd be nice to have the ability to pass custom classes to components.
It only takes a simple modification for each component to allow this, here's an example on Button.svelte

<button
  on:click|stopPropagation
  {disabled}
  class="m3-container m3-font-label-large {type} icon-{iconType} {$$props.class}" <--- this part
  style="display: {display};"
  {...extraOptions}
>
  <div class="layer" />
  <slot />
</button>

$$props.class will add all classes passed to the component, which makes it very easy to customise the positioning, sizing, etc.

I use the modified component like so (tailwind, in this case):

<Button type="filled" class="absolute right-2">Load</Button>

feat: A component similar to Textfield

With the lack of a generic component that is similar to TextField, it's harder to implement things like a dropdown menu as you would need to recreate the component from scratch

TextField pretty much has all the stuff needed for that kind of component. It just needs an option to customize what happens when you click it, and of course, not be a textfield

feat: Toggleable icon buttons

Material 3 defines toggleable icon buttons with different appearances and icons depending on whether the icon button is toggled or not.

Currently I do not see a way of doing this without swapping out the button and/or using custom css.

It would be nice to have a ToggleButton with a selectedIcon and unselectedIcon (names taken from the M3 Figma), with a toggled boolean property that the developer can bind:toggled to.

feat: More flexible choice of icons in components

IconifyIcons includes so many icons from many icon packs, so it certainly was a smart decision choosing to be the provider of icons for the components

But, sometimes we need the icons to represent specific things, like entities, in that case, we'd want to use an HTMLImage

Less restrictive open source license

Thank you for sharing your project. I like your works and want to test them in my personal or commercial products, but not all my works can be open sourced due to the contract.

Can you change or add (e.g. dual license) a less restrictive license like Apache-2.0 or MIT?

Even if you don't want it, I will fully respect your decision.

Shape customization

I want to have control over the border radius of material components. Since the official web components library allows customization through CSS variables, I would go with the same approach.

For instance, the variable for adjusting a button's border radius would be named --m3-button-shape.

GG

Just found out someone else is also making an m3-svelte library after searching on npm. Good work! While mine is mostly non-functional, I still have some components that you haven't implement such as the Dialog or Snackbar at https://m3-svelte.vercel.app/ Though my code isn't close to being as polished or done as yours, let me know if you want me to open a PR for these.

Form field improvements

The current DateField & Textfield components have quite a few issues:

  • You can't set an error property on DateField
  • DateFields change year/month buttons are causing forms to be submitted

Button changes

1. The type prop on Button

The type prop is the same name as one of the default html button attributes. I know I can access it through extraOptions but it is not too handy. HtmlButtonAttributes type can be actually combined using $$Props helper. And I would rename type prop to variant. I know it is a breaking change so I don't want to push too hard on this.

Reference: https://svelte.dev/docs/basic-markup#attributes-and-props

2. Button and ButtonLink could be combined into one component.

Reference: https://github.com/huntabyte/bits-ui/blob/main/src/lib/bits/button/components/button.svelte

Documentation

There is no documentation as far as I see so I don't know how to import or anything like I don't know how to import in StyleFromScheme. import { StyleFromScheme } from '@m3-svelte';. This doesn't work for example. Can you make a documentation for all the componentes?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.