mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 12:09:26 +00:00
Update descriptions
This commit is contained in:
Cory LaViska
4
.github/CONTRIBUTING.md
vendored
4
.github/CONTRIBUTING.md
vendored
@@ -58,7 +58,9 @@ In order to keep the project in a maintainable state, code that doesn't follow c
|
||||
|
||||
### Semantic Versioning
|
||||
|
||||
This project follows [Semantic Versioning](https://semver.org/). Breaking changes will not be accepted until the next major version. As such, all contributions must consider the project's roadmap and take this into consideration.
|
||||
This project follows [Semantic Versioning](https://semver.org/). Breaking changes in stable components will not be accepted until the next major version. As such, all contributions must consider the project's roadmap and take this into consideration. Features that are deemed no longer necessary in future versions will be deprecated instead.
|
||||
|
||||
**Components marked "experimental" should not be used in production,** as changes to them will not be subject to this rule.
|
||||
|
||||
### Code Formatting & Linting
|
||||
|
||||
|
||||
@@ -160,22 +160,13 @@
|
||||
|
||||
/* Lead sentences that occur immediately after the header */
|
||||
.component-header + p {
|
||||
font-size: var(--sl-font-size-x-large);
|
||||
font-size: var(--sl-font-size-large);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* In component pages we have:
|
||||
*
|
||||
* .component-header
|
||||
* p (leading sentence)
|
||||
* p (optional secondary sentence)
|
||||
* .code-block (main example)
|
||||
*
|
||||
* So if we have this structure, space out the code block a bit to make it appear on its own.
|
||||
*/
|
||||
.component-header + p + .code-block,
|
||||
.component-header + p + p + .code-block {
|
||||
margin-top: 2.5rem;
|
||||
/* Code blocks that occur immediately after the leading sentence. */
|
||||
p + .code-block {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
/* Content */
|
||||
|
||||
@@ -2,9 +2,7 @@
|
||||
|
||||
[component-header:sl-alert]
|
||||
|
||||
Alerts...
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
Alerts are used to display important messages.
|
||||
|
||||
```html preview
|
||||
<sl-alert type="primary" open>
|
||||
|
||||
@@ -4,8 +4,6 @@
|
||||
|
||||
Avatars are used to represent a person or object.
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
|
||||
```html preview
|
||||
<sl-avatar></sl-avatar>
|
||||
|
||||
|
||||
@@ -4,8 +4,6 @@
|
||||
|
||||
Badges are used to draw attention and display statuses or counts.
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
|
||||
```html preview
|
||||
<sl-badge type="primary">Primary</sl-icon></sl-badge>
|
||||
<sl-badge type="success">Success</sl-badge>
|
||||
|
||||
@@ -4,8 +4,6 @@
|
||||
|
||||
Buttons represent actions that are available to the user.
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
|
||||
```html preview
|
||||
<sl-button type="default">Default</sl-button>
|
||||
<sl-button type="primary">Primary</sl-button>
|
||||
|
||||
@@ -2,9 +2,7 @@
|
||||
|
||||
[component-header:sl-checkbox]
|
||||
|
||||
Checkboxes...
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
Checkboxes allow the user to toggle an option on or off.
|
||||
|
||||
```html preview
|
||||
<sl-checkbox>Default</sl-checkbox><br />
|
||||
|
||||
@@ -2,9 +2,7 @@
|
||||
|
||||
[component-header:sl-color-picker]
|
||||
|
||||
Color pickers give users a way to select a color.
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
Color pickers allow the user to select a color.
|
||||
|
||||
```html preview
|
||||
<sl-color-picker></sl-color-picker>
|
||||
|
||||
@@ -2,9 +2,7 @@
|
||||
|
||||
[component-header:sl-details]
|
||||
|
||||
Details...
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
Details show a brief summary and expand to show additional content.
|
||||
|
||||
```html preview
|
||||
<sl-details summary="Toggle Me">
|
||||
@@ -26,7 +24,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
|
||||
|
||||
### Grouping Details
|
||||
|
||||
Details are designed to function independently, but you can simulate a group where only one is shown at a time by listening for the `slShow` event.
|
||||
Details are designed to function independently, but you can simulate a group or "accordion" where only one is shown at a time by listening for the `slShow` event.
|
||||
|
||||
```html preview
|
||||
<div class="details-group-example">
|
||||
|
||||
@@ -2,9 +2,7 @@
|
||||
|
||||
[component-header:sl-dialog]
|
||||
|
||||
Dialogs...
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
Dialogs appear above the page and require the user's immediate attention.
|
||||
|
||||
```html preview
|
||||
<sl-dialog label="Dialog" class="dialog-overview">
|
||||
@@ -26,6 +24,12 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
|
||||
</script>
|
||||
```
|
||||
|
||||
## UX Tips
|
||||
|
||||
- Use a dialog when you immediately require the user's attention, e.g. confirming a destructive action.
|
||||
- Always provide an obvious way for the user to dismiss the dialog.
|
||||
- Don't nest dialogs. It almost always leads to a poor experience for the user.
|
||||
|
||||
## Examples
|
||||
|
||||
### No Overlay Dismiss
|
||||
|
||||
@@ -2,9 +2,7 @@
|
||||
|
||||
[component-header:sl-drawer]
|
||||
|
||||
Drawers...
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
Drawers slide out from a container to expose additional options and information.
|
||||
|
||||
```html preview
|
||||
<sl-drawer label="Drawer" class="drawer-overview">
|
||||
|
||||
@@ -110,11 +110,11 @@ Custom icons can be loaded by setting the `src` attribute. Only SVG images are s
|
||||
// Filter as the user types
|
||||
input.addEventListener('slInput', () => {
|
||||
[...list.querySelectorAll('sl-icon')].map(slIcon => {
|
||||
if (input.value === '') {
|
||||
const filter = input.value.toLowerCase();
|
||||
if (filter === '') {
|
||||
slIcon.hidden = false;
|
||||
} else {
|
||||
const terms = slIcon.getAttribute('data-terms').toLowerCase();
|
||||
const filter = input.value.toLowerCase();
|
||||
slIcon.hidden = terms.indexOf(filter) < 0;
|
||||
}
|
||||
});
|
||||
|
||||
@@ -2,9 +2,7 @@
|
||||
|
||||
[component-header:sl-input]
|
||||
|
||||
Inputs...
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
Inputs collect data from the user.
|
||||
|
||||
```html preview
|
||||
<sl-input type="text" placeholder="Input"></sl-input>
|
||||
|
||||
@@ -2,9 +2,7 @@
|
||||
|
||||
[component-header:sl-menu-divider]
|
||||
|
||||
Menu dividers are used to separate menu items within a menu.
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
Menu dividers are used to visually group menu items.
|
||||
|
||||
```html preview
|
||||
<sl-menu
|
||||
|
||||
@@ -2,9 +2,7 @@
|
||||
|
||||
[component-header:sl-menu-item]
|
||||
|
||||
Menu items...
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
Menu items provide options for the user to pick from in a menu.
|
||||
|
||||
```html preview
|
||||
<sl-menu
|
||||
|
||||
@@ -4,8 +4,6 @@
|
||||
|
||||
Menu labels are used to describe a group of menu items.
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
|
||||
```html preview
|
||||
<sl-menu
|
||||
style="max-width: 200px; border: solid 1px var(--sl-color-gray-90); border-radius: var(--sl-border-radius-medium);"
|
||||
|
||||
@@ -2,11 +2,7 @@
|
||||
|
||||
[component-header:sl-menu]
|
||||
|
||||
Menus...
|
||||
|
||||
Menus are designed to work well with [dropdowns](/components/dropdown.md), but they can be used in other applications as well (e.g. [select](/components/select.md)).
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
Menus provide a list of options for the user.
|
||||
|
||||
```html preview
|
||||
<sl-menu
|
||||
|
||||
@@ -2,9 +2,7 @@
|
||||
|
||||
[component-header:sl-progress-bar]
|
||||
|
||||
Progress bars...
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
Progress bars are used to show the progress of a determinate operation.
|
||||
|
||||
```html preview
|
||||
<sl-progress-bar percentage="0"></sl-progress-bar><br />
|
||||
|
||||
@@ -2,9 +2,7 @@
|
||||
|
||||
[component-header:sl-progress-ring]
|
||||
|
||||
Progress rings...
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
Progress rings are used to show the progress of a determinate operation in a circular fashion.
|
||||
|
||||
```html preview
|
||||
<div style="display: flex; justify-content: space-between; flex-wrap: wrap;">
|
||||
|
||||
@@ -2,14 +2,12 @@
|
||||
|
||||
[component-header:sl-radio]
|
||||
|
||||
Radios...
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
Radios allow the user to select one option from a group of many.
|
||||
|
||||
```html preview
|
||||
<sl-radio name="my-radio">Default</sl-radio><br />
|
||||
<sl-radio name="my-radio" checked>Checked</sl-radio><br />
|
||||
<sl-radio name="my-radio" disabled>Disabled</sl-radio><br />
|
||||
```
|
||||
|
||||
```
|
||||
[component-metadata:sl-radio]
|
||||
|
||||
@@ -2,9 +2,7 @@
|
||||
|
||||
[component-header:sl-range]
|
||||
|
||||
Ranges...
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
Ranges allow the user to select a single value within a given range using a slider.
|
||||
|
||||
```html preview
|
||||
<sl-range min="0" max="100" step="1"></sl-range>
|
||||
|
||||
@@ -2,9 +2,7 @@
|
||||
|
||||
[component-header:sl-spinner]
|
||||
|
||||
Spinners...
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
Spinners are used to show the progress of an indeterminate operation.
|
||||
|
||||
```html preview
|
||||
<sl-spinner></sl-spinner>
|
||||
|
||||
@@ -2,9 +2,7 @@
|
||||
|
||||
[component-header:sl-switch]
|
||||
|
||||
Switches...
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
Switches allow the user to toggle an option on or off.
|
||||
|
||||
```html preview
|
||||
<sl-switch>Default</sl-switch>
|
||||
|
||||
@@ -2,9 +2,7 @@
|
||||
|
||||
[component-header:sl-tab-group]
|
||||
|
||||
Tab groups...
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
Tab groups organize content into a container that shows one section at a time.
|
||||
|
||||
```html preview
|
||||
<sl-tab-group placement="top">
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
[component-header:sl-tab-panel]
|
||||
|
||||
Tab panels...
|
||||
Tab panels are used inside tab groups to display content.
|
||||
|
||||
A demonstration of this component can be found in the [tab group examples](/components/tab-group.md).
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
[component-header:sl-tab]
|
||||
|
||||
Tabs...
|
||||
Tabs are used inside tab groups to represent tab panels.
|
||||
|
||||
A demonstration of this component can be found in the [tab group examples](/components/tab-group.md).
|
||||
|
||||
|
||||
@@ -4,8 +4,6 @@
|
||||
|
||||
Tags are used as labels to organize things or to indicate a selection.
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
|
||||
```html preview
|
||||
<sl-tag type="primary">Primary</sl-tag>
|
||||
<sl-tag type="success">Success</sl-tag>
|
||||
@@ -42,6 +40,32 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
|
||||
<sl-tag size="large" type="danger">Danger</sl-tag>
|
||||
```
|
||||
|
||||
### Pill
|
||||
|
||||
```html preview
|
||||
<sl-tag type="primary" size="small" pill>Primary</sl-tag>
|
||||
<sl-tag type="success" size="small" pill>Success</sl-tag>
|
||||
<sl-tag type="info" size="small" pill>Info</sl-tag>
|
||||
<sl-tag type="warning" size="small" pill>Warning</sl-tag>
|
||||
<sl-tag type="danger" size="small" pill>Danger</sl-tag>
|
||||
|
||||
<br /><br />
|
||||
|
||||
<sl-tag size="medium" type="primary" pill>Primary</sl-tag>
|
||||
<sl-tag size="medium" type="success" pill>Success</sl-tag>
|
||||
<sl-tag size="medium" type="info" pill>Info</sl-tag>
|
||||
<sl-tag size="medium" type="warning" pill>Warning</sl-tag>
|
||||
<sl-tag size="medium" type="danger" pill>Danger</sl-tag>
|
||||
|
||||
<br /><br />
|
||||
|
||||
<sl-tag size="large" type="primary" pill>Primary</sl-tag>
|
||||
<sl-tag size="large" type="success" pill>Success</sl-tag>
|
||||
<sl-tag size="large" type="info" pill>Info</sl-tag>
|
||||
<sl-tag size="large" type="warning" pill>Warning</sl-tag>
|
||||
<sl-tag size="large" type="danger" pill>Danger</sl-tag>
|
||||
```
|
||||
|
||||
### Removable
|
||||
|
||||
```html preview
|
||||
|
||||
@@ -2,9 +2,7 @@
|
||||
|
||||
[component-header:sl-textarea]
|
||||
|
||||
Textareas...
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
Textareas collect data from the user and allow multiple lines of text.
|
||||
|
||||
```html preview
|
||||
<sl-textarea placeholder="Textarea"></sl-textarea>
|
||||
|
||||
@@ -2,9 +2,11 @@
|
||||
|
||||
[component-header:sl-tooltip]
|
||||
|
||||
Tooltips...
|
||||
Tooltips display additional information based on a specific action.
|
||||
|
||||
A tooltip's target is its _first child element_, so you should only wrap one element inside of a tooltip. If you need the tooltip to show up for multiple elements, nest them inside a container first.
|
||||
A tooltip's target is its _first child element_, so you should only wrap one element inside of the tooltip. If you need the tooltip to show up for multiple elements, nest them inside a container first.
|
||||
|
||||
Tooltip's use `display: contents` so they won't interfere with how elements are positioned in a flex or grid layout.
|
||||
|
||||
```html preview
|
||||
<sl-tooltip content="This is a tooltip">
|
||||
|
||||
@@ -8,7 +8,7 @@ Version 2.1 is still in the planning phase. To request a feature, please [submit
|
||||
|
||||
?> Is there a feature you really want to see here? Sponsoring Shoelace is the best way to prioritize its development. [Learn more](https://github.com/sponsors/claviska)
|
||||
|
||||
## 2.0 📦
|
||||
## 2.0 🚀
|
||||
|
||||
- [x] Alert
|
||||
- [x] Avatar
|
||||
|
||||
@@ -4,7 +4,7 @@ Color tokens are used to maintain consistent color use throughout your app.
|
||||
|
||||
## Theme Colors
|
||||
|
||||
Theme colors are based on HSL values rather than hex or RGB. This technique lets us generate more consistent palettes for every theme color, ranging from 5% to 95% lightness. There are no 0% nor 100% values for theme colors. Use `--sl-color-black` and `--sl-color-white` instead.
|
||||
Theme colors are based on HSL values rather than hex or RGB. This technique lets us generate more consistent palettes for every theme color, ranging from 5% to 95% lightness. There are no 0% or 100% values for theme colors. Use `--sl-color-black` and `--sl-color-white` instead.
|
||||
|
||||
Theme colors include primary, gray, success, info, warning, and danger. They are used extensively throughout the library to maintain a consistent appearance across components.
|
||||
|
||||
@@ -16,7 +16,7 @@ To customize a theme color, change its respective hue, saturation, and text toke
|
||||
--sl-color-primary-text: var(--sl-color-white);
|
||||
```
|
||||
|
||||
?> Palettes are comprised of CSS custom properties ("CSS variables"), so you can update them live in your app and see the changes reflect instantly.
|
||||
?> Color palettes are comprised of CSS custom properties ("CSS variables"), so you can update them live in your app and see the changes reflect instantly.
|
||||
|
||||
## Primary
|
||||
|
||||
|
||||
12
src/components.d.ts
vendored
12
src/components.d.ts
vendored
@@ -138,7 +138,7 @@ export namespace Components {
|
||||
*/
|
||||
"disabled": boolean;
|
||||
/**
|
||||
* The format to use for the generated color `value`. If opacity is enabled, these will translate to HEXA, RGBA, and HSLA respectively. Note that browser support for HEXA doesn't include pre-Chromium Edge, so it's usually safer to use RGBA or HSLA when using opacity.
|
||||
* The format to use for the display value. If opacity is enabled, these will translate to HEXA, RGBA, and HSLA respectively. The color picker will always accept user input in any format (including CSS color names) and convert it to the desired format.
|
||||
*/
|
||||
"format": 'hex' | 'rgb' | 'hsl';
|
||||
/**
|
||||
@@ -680,6 +680,10 @@ export namespace Components {
|
||||
"name": string;
|
||||
}
|
||||
interface SlTag {
|
||||
/**
|
||||
* Set to true to draw a pill-style button with rounded edges.
|
||||
*/
|
||||
"pill": boolean;
|
||||
/**
|
||||
* Set to true to make the tag removable.
|
||||
*/
|
||||
@@ -1188,7 +1192,7 @@ declare namespace LocalJSX {
|
||||
*/
|
||||
"disabled"?: boolean;
|
||||
/**
|
||||
* The format to use for the generated color `value`. If opacity is enabled, these will translate to HEXA, RGBA, and HSLA respectively. Note that browser support for HEXA doesn't include pre-Chromium Edge, so it's usually safer to use RGBA or HSLA when using opacity.
|
||||
* The format to use for the display value. If opacity is enabled, these will translate to HEXA, RGBA, and HSLA respectively. The color picker will always accept user input in any format (including CSS color names) and convert it to the desired format.
|
||||
*/
|
||||
"format"?: 'hex' | 'rgb' | 'hsl';
|
||||
/**
|
||||
@@ -1806,6 +1810,10 @@ declare namespace LocalJSX {
|
||||
* Emitted when the remove button is activated.
|
||||
*/
|
||||
"onSlRemove"?: (event: CustomEvent<any>) => void;
|
||||
/**
|
||||
* Set to true to draw a pill-style button with rounded edges.
|
||||
*/
|
||||
"pill"?: boolean;
|
||||
/**
|
||||
* Set to true to make the tag removable.
|
||||
*/
|
||||
|
||||
@@ -63,9 +63,9 @@ export class ColorPicker {
|
||||
@Prop({ mutable: true, reflect: true }) value = '#ffffff';
|
||||
|
||||
/**
|
||||
* The format to use for the generated color `value`. If opacity is enabled, these will translate to HEXA, RGBA, and
|
||||
* HSLA respectively. Note that browser support for HEXA doesn't include pre-Chromium Edge, so it's usually safer to
|
||||
* use RGBA or HSLA when using opacity.
|
||||
* The format to use for the display value. If opacity is enabled, these will translate to HEXA, RGBA, and HSLA
|
||||
* respectively. The color picker will always accept user input in any format (including CSS color names) and convert
|
||||
* it to the desired format.
|
||||
*/
|
||||
@Prop() format: 'hex' | 'rgb' | 'hsl' = 'hex';
|
||||
|
||||
|
||||
@@ -102,3 +102,11 @@
|
||||
margin-right: calc(-1 * var(--sl-spacing-small));
|
||||
}
|
||||
}
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// Pill modifier
|
||||
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
.tag--pill {
|
||||
border-radius: var(--sl-border-radius-pill);
|
||||
}
|
||||
|
||||
@@ -25,6 +25,9 @@ export class Tag {
|
||||
/** The tag's size. */
|
||||
@Prop() size: 'small' | 'medium' | 'large' = 'medium';
|
||||
|
||||
/** Set to true to draw a pill-style button with rounded edges. */
|
||||
@Prop() pill = false;
|
||||
|
||||
/** Set to true to make the tag removable. */
|
||||
@Prop() removable = false;
|
||||
|
||||
@@ -56,6 +59,7 @@ export class Tag {
|
||||
'tag--large': this.size === 'large',
|
||||
|
||||
// Modifers
|
||||
'tag--pill': this.pill,
|
||||
'tag--removable': this.removable
|
||||
}}
|
||||
>
|
||||
|
||||
@@ -16,15 +16,15 @@
|
||||
--sl-color-success-text: var(--sl-color-white);
|
||||
|
||||
--sl-color-info-hue: var(--sl-color-primary-hue);
|
||||
--sl-color-info-saturation: 20%;
|
||||
--sl-color-info-saturation: 10%;
|
||||
--sl-color-info-text: var(--sl-color-white);
|
||||
|
||||
--sl-color-warning-hue: 36;
|
||||
--sl-color-warning-hue: 40;
|
||||
--sl-color-warning-saturation: 90%;
|
||||
--sl-color-warning-text: var(--sl-color-white);
|
||||
|
||||
--sl-color-danger-hue: 0;
|
||||
--sl-color-danger-saturation: 80%;
|
||||
--sl-color-danger-hue: 10;
|
||||
--sl-color-danger-saturation: 95%;
|
||||
--sl-color-danger-text: var(--sl-color-white);
|
||||
|
||||
--sl-color-gray-hue: var(--sl-color-primary-hue);
|
||||
|
||||
Reference in New Issue
Block a user