diff --git a/docs/components/alert.md b/docs/components/alert.md index 9972f7e29..c113e9bd9 100644 --- a/docs/components/alert.md +++ b/docs/components/alert.md @@ -89,7 +89,7 @@ Icons are optional. Simply omit the `icon` slot if you don't want them. ### Duration -Set the `duration` prop to automatically hide an alert after a period of time. This is useful for alerts that don't require acknowledgement. +Set the `duration` attribute to automatically hide an alert after a period of time. This is useful for alerts that don't require acknowledgement. ```html preview
@@ -120,7 +120,7 @@ Set the `duration` prop to automatically hide an alert after a period of time. T To display an alert as a toast notification, or "toast", create the alert and call its `toast()` method. This will move the alert out of its position in the DOM and into [the toast stack](#the-toast-stack) where it will be shown. Once dismissed, it will be removed from the DOM completely. To reuse a toast, store a reference to it and call `toast()` again later on. -You should always use the `closable` prop so users can dismiss the notification. It's also common to set a reasonable `duration` when the notification doesn't require acknowledgement. +You should always use the `closable` attribute so users can dismiss the notification. It's also common to set a reasonable `duration` when the notification doesn't require acknowledgement. ```html preview
diff --git a/docs/components/button.md b/docs/components/button.md index 3b528fe89..c59700e02 100644 --- a/docs/components/button.md +++ b/docs/components/button.md @@ -25,7 +25,7 @@ Use the `type` attribute to set the button's type. ### Sizes -Use the `size` prop to change a button's size. +Use the `size` attribute to change a button's size. ```html preview Small @@ -35,7 +35,7 @@ Use the `size` prop to change a button's size. ### Pill Buttons -Use the `pill` prop to give buttons rounded edges. +Use the `pill` attribute to give buttons rounded edges. ```html preview Small @@ -45,7 +45,7 @@ Use the `pill` prop to give buttons rounded edges. ### Circle Buttons -Use the `circle` prop to create circular icon buttons. +Use the `circle` attribute to create circular icon buttons. ```html preview @@ -146,7 +146,7 @@ Use the `prefix` and `suffix` slots to add icons. ### Caret -Use the `caret` prop to add a dropdown indicator when a button will trigger a dropdown, menu, or popover. +Use the `caret` attribute to add a dropdown indicator when a button will trigger a dropdown, menu, or popover. ```html preview Small @@ -156,7 +156,7 @@ Use the `caret` prop to add a dropdown indicator when a button will trigger a dr ### Loading -Use the `loading` prop to make a button busy. The width will remain the same as before, preventing adjacent elements from moving around. Clicks will be suppressed until the loading state is removed. +Use the `loading` attribute to make a button busy. The width will remain the same as before, preventing adjacent elements from moving around. Clicks will be suppressed until the loading state is removed. ```html preview Default @@ -169,7 +169,7 @@ Use the `loading` prop to make a button busy. The width will remain the same as ### Disabled -Use the `disabled` prop to disable a button. Clicks will be suppressed until the disabled state is removed. +Use the `disabled` attribute to disable a button. Clicks will be suppressed until the disabled state is removed. ```html preview Default diff --git a/docs/components/drawer.md b/docs/components/drawer.md index f60688dd2..f6a880b1f 100644 --- a/docs/components/drawer.md +++ b/docs/components/drawer.md @@ -92,7 +92,7 @@ To make the drawer slide in from the bottom, set the `placement` attribute to `b ### Contained to an Element -By default, the drawer slides out of its [containing block](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#Identifying_the_containing_block), which is usually the viewport. To make the drawer slide out of its parent element, add the `contained` prop and `position: relative` to the parent. +By default, the drawer slides out of its [containing block](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#Identifying_the_containing_block), which is usually the viewport. To make the drawer slide out of its parent element, add the `contained` attribute and `position: relative` to the parent. ```html preview
``` -The `date` prop determines the date/time to use when formatting. It must be a string that [`Date.parse()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse) can interpret or a [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) object set via JavaScript. If omitted, the current date/time will be assumed. +The `date` attribute determines the date/time to use when formatting. It must be a string that [`Date.parse()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse) can interpret or a [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) object set via JavaScript. If omitted, the current date/time will be assumed. ?> When using strings, avoid ambiguous dates such as `03/04/2020` which can be interpreted as March 4 or April 3 depending on the user's browser and locale. Instead, always use a valid [ISO 8601 date time string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse#Date_Time_String_Format) to ensure the date will be parsed properly by all clients. @@ -44,7 +44,7 @@ Formatting options are based on those found in the [`Intl.DateTimeFormat` API](h ### Hour Formatting -By default, the browser will determine whether to use 12-hour or 24-hour time. To force one or the other, set the `hourFormat` prop to `12` or `24`. +By default, the browser will determine whether to use 12-hour or 24-hour time. To force one or the other, set the `hour-format` attribute to `12` or `24`. ```html preview
diff --git a/docs/components/input.md b/docs/components/input.md index c182ee52e..4de41792b 100644 --- a/docs/components/input.md +++ b/docs/components/input.md @@ -24,7 +24,7 @@ Use the `placeholder` attribute to add a placeholder. ### Clearable -Add the `clearable` prop to add a clear button when the input has content. +Add the `clearable` attribute to add a clear button when the input has content. ```html preview @@ -32,7 +32,7 @@ Add the `clearable` prop to add a clear button when the input has content. ### Toggle Password -Add the `toggle-password` prop to add a toggle button that will show the password when activated. +Add the `toggle-password` attribute to add a toggle button that will show the password when activated. ```html preview @@ -44,7 +44,7 @@ Add the `toggle-password` prop to add a toggle button that will show the passwor ### Pill -Use the `pill` prop to give inputs rounded edges. +Use the `pill` attribute to give inputs rounded edges. ```html preview diff --git a/docs/components/qr-code.md b/docs/components/qr-code.md index 373167037..40758701f 100644 --- a/docs/components/qr-code.md +++ b/docs/components/qr-code.md @@ -14,7 +14,7 @@ QR codes are useful for providing small pieces of information to users who can q ### Colors -Use the `fill` and `background` props to modify the QR code's colors. You should always ensure good contrast for optimal compatibility with QR code scanners. +Use the `fill` and `background` attributes to modify the QR code's colors. You should always ensure good contrast for optimal compatibility with QR code scanners. ```html preview @@ -22,7 +22,7 @@ Use the `fill` and `background` props to modify the QR code's colors. You should ### Size -Use the `size` prop to change the size of the QR code. +Use the `size` attribute to change the size of the QR code. ```html preview @@ -30,7 +30,7 @@ Use the `size` prop to change the size of the QR code. ### Radius -Create a rounded effect with the `radius` prop. +Create a rounded effect with the `radius` attribute. ```html preview diff --git a/docs/components/range.md b/docs/components/range.md index 9b5f66d7c..963bcbf42 100644 --- a/docs/components/range.md +++ b/docs/components/range.md @@ -14,7 +14,7 @@ Ranges allow the user to select a single value within a given range using a slid ### Disabled -Use the `disabled` prop to disable a slider. +Use the `disabled` attribute to disable a slider. ```html preview @@ -38,7 +38,7 @@ To disable the tooltip, set `tooltip` to `none`. ### Custom Tooltip Formatter -You can change the tooltip's content by setting the `tooltipFormatter` prop to a function that accepts the range's value as an argument. +You can change the tooltip's content by setting the `tooltipFormatter` property to a function that accepts the range's value as an argument. ```html preview diff --git a/docs/components/relative-time.md b/docs/components/relative-time.md index b42f4f988..3f660bea4 100644 --- a/docs/components/relative-time.md +++ b/docs/components/relative-time.md @@ -11,7 +11,7 @@ Localization is handled by the browser's [`Intl.RelativeTimeFormat` API](https:/ ``` -The `date` prop determines when the date/time is calculated from. It must be a string that [`Date.parse()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse) can interpret or a [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) object set via JavaScript. +The `date` attribute determines when the date/time is calculated from. It must be a string that [`Date.parse()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse) can interpret or a [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) object set via JavaScript. ?> When using strings, avoid ambiguous dates such as `03/04/2020` which can be interpreted as March 4 or April 3 depending on the user's browser and locale. Instead, always use a valid [ISO 8601 date time string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse#Date_Time_String_Format) to ensure the date will be parsed properly by all clients. diff --git a/docs/components/select.md b/docs/components/select.md index 5101dd269..d2d495f23 100644 --- a/docs/components/select.md +++ b/docs/components/select.md @@ -46,7 +46,7 @@ Use the `clearable` attribute to make the control clearable. ### Pill -Use the `pill` prop to give selects rounded edges. +Use the `pill` attribute to give selects rounded edges. ```html preview @@ -58,7 +58,7 @@ Use the `pill` prop to give selects rounded edges. ### Disabled -Use the `disabled` prop to disable a select. +Use the `disabled` attribute to disable a select. ```html preview @@ -132,7 +132,7 @@ Use the `size` attribute to change a select's size. ### Selecting Options Programmatically -The `value` prop is bound to the current selection. As the selection changes, so will the value. To programmatically manage the selection, update the `value` property. +The `value` property is bound to the current selection. As the selection changes, so will the value. To programmatically manage the selection, update the `value` property. ```html preview
diff --git a/docs/components/tab-group.md b/docs/components/tab-group.md index 927ecdc9c..11cd4089f 100644 --- a/docs/components/tab-group.md +++ b/docs/components/tab-group.md @@ -78,7 +78,7 @@ Tabs can be shown on the ending side by setting `placement` to `end`. ### Closable Tabs -Add the `closable` prop to a tab to show a close button. This example shows how you can dynamically remove tabs from the DOM when the close button is activated. +Add the `closable` attribute to a tab to show a close button. This example shows how you can dynamically remove tabs from the DOM when the close button is activated. ```html preview diff --git a/docs/components/tag.md b/docs/components/tag.md index d0d046d23..ce1682843 100644 --- a/docs/components/tag.md +++ b/docs/components/tag.md @@ -16,7 +16,7 @@ Tags are used as labels to organize things or to indicate a selection. ### Sizes -Use the `size` prop to change a tab's size. +Use the `size` attribute to change a tab's size. ```html preview Small @@ -26,7 +26,7 @@ Use the `size` prop to change a tab's size. ### Pill -Use the `pill` prop to give tabs rounded edges. +Use the `pill` attribute to give tabs rounded edges. ```html preview Small diff --git a/docs/components/tooltip.md b/docs/components/tooltip.md index 451b0b184..c15911904 100644 --- a/docs/components/tooltip.md +++ b/docs/components/tooltip.md @@ -122,7 +122,7 @@ Set the `trigger` attribute to `click` to toggle the tooltip on click instead of ### Manual Trigger -Tooltips can be controller programmatically by setting the `trigger` attribute to `manual`. Use the `open` prop to control when the tooltip is shown. +Tooltips can be controller programmatically by setting the `trigger` attribute to `manual`. Use the `open` attribute to control when the tooltip is shown. ```html preview Toggle Manually diff --git a/docs/getting-started/usage.md b/docs/getting-started/usage.md index e56d860f2..b98fbf12c 100644 --- a/docs/getting-started/usage.md +++ b/docs/getting-started/usage.md @@ -6,19 +6,19 @@ Shoelace components are just regular HTML elements, or "custom elements" to be p ### Properties -Many components have properties ("props") that can be set using attributes. For example, buttons accept a `size` attribute that dictates the button's size. +Many components have properties that can be set using attributes. For example, buttons accept a `size` attribute that maps to the `size` property which dictates the button's size. ```html Click me ``` -Some props are booleans, so they only have true/false values. To activate a boolean prop, add the corresponding attribute without a value. +Some properties are boolean, so they only have true/false values. To activate a boolean property, add the corresponding attribute without a value. ```html Click me ``` -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. +In rare cases, a property 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` property to an array of colors. This can be done with JavaScript. ```html @@ -102,9 +102,9 @@ Custom elements cannot have self-closing tags. Similar to `