Giter Site home page Giter Site logo

ngogiaphat / sveltematerialui Goto Github PK

View Code? Open in Web Editor NEW

This project forked from hperrin/svelte-material-ui

0.0 0.0 0.0 17.21 MB

Svelte Material UI Components

Home Page: https://sveltematerialui.com/

License: Apache License 2.0

Shell 0.04% JavaScript 0.81% TypeScript 9.88% HTML 0.40% SCSS 8.88% Svelte 79.99%

sveltematerialui's Introduction

Svelte Material UI

A library of Svelte Material UI components, based on Material Design Components - Web.

Demos, Code Samples, and Guides

https://sveltematerialui.com

Features

Here are some unique features that help SMUI stand out:

  • Full TypeScript support, including HTML attributes.
  • You can add arbitrary attributes to all of the components and many of the elements within them.
  • You can add actions to the components with use={[Action1, [Action2, action2Props], Action3]}.
  • You can add props to lower components and elements with "$" props, like input$maxlength="15".
  • All events are forwarded. This includes DOM events, SMUI events, and custom events.
    • You can add event modifiers with the on:click$preventDefault$capture={handler} syntax.
      • You have to use "$" instead of "|" like in native Svelte. (The extra S inside the | stands for SMUI.)
      • Supported modifiers are:
        • passive
        • nonpassive
        • capture
        • once
        • preventDefault
        • stopPropagation
        • stopImmediatePropagation
        • self
        • trusted
  • SMUI supports RTL languages.

Installation

To get started, check out the installation docs or the SvelteKit docs.

Need Help?

If you need help installing or using SMUI, join the Discord server.

Migration

Upgrading from an old version? Be sure to read the migration doc.

Upgrading from v6? You need Svelte 4. No more elemental components; you can now use the "tag" prop for HTML elements or the "Svg" component. No more "ComponentDev" types; components can now be used as their type. Check out the upgrade instructions.

Upgrading from v5? If you're still using the advanced styling method, it's really time to switch to the easy styling method. '/styled' endpoints are no longer provided. Check out the upgrade instructions.

Upgrading from v4? SMUI v5 requires the TypeScript preprocessor. SMUI v6 does not though, so if you upgrade straight to v6, don't worry. Check out the upgrade instructions.

Upgrading from v3? SMUI's styling method has been simplified. Check out the upgrade instructions.

Upgrading from v2? There are lots of changes listed in the upgrade instructions.

Old Docs

You can find older versions of the docs on their respective branch:

Icons

You can include icons in a number of ways, but the easiest is the Material Icon Font. This will give you the standard set of Material Icons, available with the CSS class "material-icons".

<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons"
  rel="stylesheet"
/>

However, there are two downsides. First is that all icons are downloaded, no matter which ones you use, so the size over the wire will almost certainly be more than necessary. Second is that it only includes the Material Icons from Google.

Another option is the Material Design Icons library. See the "Using SVGs" demo on the Icon Button demo page for instructions to use icons from the @mdi/js package (or any other SVG icons).

You can even use them in data URLs:

To get a data URL for the icon:

  1. Find your icon and click "View SVG" under the code menu.
  2. Click the "SVG File" tab and copy the full SVG document.
  3. Base64 encode the document.
  4. Format the URL like this data:image/svg+xml;base64,encodedcontent, replacing "encodedcontent" with the Base64 results.
  5. Now you have an image URL you can use in an "img" tag src attribute or anywhere else you put an image URL (like background-image: url();).

Components

Click a component/package below to go to the documentation. (Note that this documentation is a work in progress. The demo code should be your main source of truth for how something works.)

† This is Sass based, and therefore doesn't require Svelte components. I've included a demo showing how you can use it.

‡ This is not an MDC-Web component (upstream library). It is an addition that SMUI provides.

  • Labels and icons are named exports in the components that use them, or you can use the 'Label' and 'Icon' exports from '@smui/common'. (Except for chips labels and icons, textfield icons, and select icons, because they are special snowflakes.)

License

Copyright 2019-2023 Hunter Perrin

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

sveltematerialui's People

Contributors

allevaton avatar catchspider2002 avatar cryptalchemy avatar csaltos avatar dependabot[bot] avatar detachhead avatar diegosanchezp avatar eddiew avatar efattal avatar eradash avatar fiorelorenzo avatar hperrin avatar johnsonjsyuen avatar laughingbubba avatar leonardas103 avatar leonavas avatar lluchkaa avatar manuel3108 avatar mintymods avatar morgandixon avatar mwamp avatar splamy avatar sumitbando avatar tamaki-tech avatar thebosz avatar tylerrick avatar vhscom avatar vtpatrickeddy avatar wesleyegbertsen avatar y330 avatar

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.