mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 12:09:26 +00:00
Updates
This commit is contained in:
@@ -20,7 +20,7 @@ To customize a design token, simply override it in your stylesheet using a `:roo
|
||||
}
|
||||
```
|
||||
|
||||
Many design tokens are described further along in this documentation. For a complete list, refer to one `shoelace.css` or `shoelace.scss` in the project's source code.
|
||||
Design tokens are described further along in this documentation. For a complete list, refer to `shoelace.scss` in the project's [source code](https://github.com/shoelace-style/shoelace/blob/master/src/styles/shoelace.scss).
|
||||
|
||||
!> **Never modify variables directly in `shoelace.css`** because your changes will be overwritten when you upgrade the library. Even if you don't plan on upgrading, it's always better to override design tokens in your own stylesheet for better maintainability.
|
||||
|
||||
@@ -73,7 +73,7 @@ Most (but not all) components expose parts. You can find them in each component'
|
||||
|
||||
### Custom Properties
|
||||
|
||||
For convenience, some components expose CSS custom properties that you can customize. These are not design tokens, nor do they have the same `--sl-` prefix since they're always scoped to a component.
|
||||
For convenience, some components expose CSS custom properties you can override. These are not design tokens, nor do they have the same `--sl-` prefix since they're scoped to a component.
|
||||
|
||||
You can set custom properties on a component in your stylesheet.
|
||||
|
||||
@@ -107,7 +107,7 @@ It's a good practice to include `shoelace.css` in your app and add your theme's
|
||||
|
||||
### Submitting a Theme
|
||||
|
||||
**I am very interested in offering well-designed themes to compliment this library.** To submit a theme for review, please open an issue on GitHub with the theme attached. Once approved, your theme will be showcased in the project's documentation (that section is coming soon).
|
||||
**I am very interested in offering well-designed themes to complement this library.** To submit a theme for review, please open an issue on GitHub with the theme attached. Once approved, your theme will be showcased in the project's documentation (that section is coming soon).
|
||||
|
||||
Themes that are in high demand include:
|
||||
|
||||
|
||||
@@ -48,15 +48,15 @@ Shoelace provides a collection of professionally designed, every day UI componen
|
||||
|
||||
With Shoelace, you can:
|
||||
|
||||
- Start building things faster (no need to roll your own buttons or inputs)
|
||||
- Build multiple apps in different frameworks that all share the same UI
|
||||
- Stop worrying about new component libraries when you switch frameworks
|
||||
- Start building things faster (no need to roll your own buttons)
|
||||
- Build multiple apps with different frameworks that all share the same UI
|
||||
- Skip having to learn a new component library every time you switch frameworks
|
||||
|
||||
If your organization is looking to build a design system, [Shoelace will save you thousands of dollars](https://medium.com/eightshapes-llc/and-you-thought-buttons-were-easy-26eb5b5c1871).* All the foundational components you need are right here, ready to be customized for your brand.
|
||||
If your organization is looking to build a design system, [Shoelace will save you thousands of dollars](https://medium.com/eightshapes-llc/and-you-thought-buttons-were-easy-26eb5b5c1871).* All the foundational components you need are right here, ready to be customized for your brand. And since it's built on web standards, browsers will continue to support it for many years to come.
|
||||
|
||||
Whether you use Shoelace as a starting point for your organization's design system or for a fun personal project, there's no limit to what you can do with it.
|
||||
|
||||
<small>*You're more than welcome to do this, but please [support the project with a sponsorship](https://github.com/sponsors/claviska) to continue its development.</small>
|
||||
<small>*Please consider giving back some of what you save by [supporting this project with a sponsorship](https://github.com/sponsors/claviska).</small>
|
||||
|
||||
## Browser Support
|
||||
|
||||
|
||||
@@ -9,13 +9,13 @@ Shoelace components are just regular HTML elements, or "custom elements" to be p
|
||||
Many components have properties ("props") that can be set using attributes. For example, buttons accept a `size` attribute that dictates the button's size.
|
||||
|
||||
```html
|
||||
<sl-button size="small">Small</sl-button>
|
||||
<sl-button size="small">Click me</sl-button>
|
||||
```
|
||||
|
||||
Some props are booleans, so they only have true/false values. To activate a boolean prop, add the corresponding attribute without a value.
|
||||
|
||||
```html
|
||||
<sl-button disabled>Pill Button</sl-button>
|
||||
<sl-button disabled>Click me</sl-button>
|
||||
```
|
||||
|
||||
In rare cases, a prop may require an array, an object, or a function. For example, to customize the color picker's list of preset swatches, you set the `swatches` prop to an array of colors. This can be done with JavaScript.
|
||||
@@ -36,7 +36,7 @@ Refer to a component's documentation for a complete list of its properties.
|
||||
You can listen for standard events such as `click`, `mouseover`, etc. as you normally would. In addition, some components emit custom events. These work the same way as standard events, but are prefixed with `sl` to prevent collisions with standard events and other libraries.
|
||||
|
||||
```html
|
||||
<sl-checkbox>Checkbox</sl-checkbox>
|
||||
<sl-checkbox>Check me</sl-checkbox>
|
||||
|
||||
<script>
|
||||
const checkbox = document.querySelector('sl-checkbox');
|
||||
@@ -65,12 +65,12 @@ Refer to a component's documentation for a complete list of its methods and thei
|
||||
|
||||
### Slots
|
||||
|
||||
Most components use slots to accept content inside of them. The most common slot is the _default_ slot, which includes any content inside the component that doesn't have a `slot` attribute.
|
||||
Many components use slots to accept content inside of them. The most common slot is the _default_ slot, which includes any content inside the component that doesn't have a `slot` attribute.
|
||||
|
||||
For example, a button's default slot is used to populate its label.
|
||||
|
||||
```html
|
||||
<sl-button>Label</sl-button>
|
||||
<sl-button>Click me</sl-button>
|
||||
```
|
||||
|
||||
Some components also have _named_ slots. A named slot can be populated by adding a child element with the appropriate `slot` attribute. Notice how the icon below has the `slot="prefix"` attribute? This tells the component to place the icon into its `prefix` slot.
|
||||
|
||||
Reference in New Issue
Block a user