kopia lustrzana https://github.com/shoelace-style/shoelace
remove md extension from docs
Cory LaViska
rodzic
22b359a612
commit
5dff7b2855
124
docs/_sidebar.md
124
docs/_sidebar.md
|
|
@ -1,74 +1,74 @@
|
|||
- Getting Started
|
||||
- [Overview](/)
|
||||
- [Installation](/getting-started/installation.md)
|
||||
- [Usage](/getting-started/usage.md)
|
||||
- [Customizing](/getting-started/customizing.md)
|
||||
- [Themes](/getting-started/themes.md)
|
||||
- [Installation](/getting-started/installation)
|
||||
- [Usage](/getting-started/usage)
|
||||
- [Customizing](/getting-started/customizing)
|
||||
- [Themes](/getting-started/themes)
|
||||
|
||||
- Resources
|
||||
- [Community](/resources/community.md)
|
||||
- [Contributing](/resources/contributing.md)
|
||||
- [Changelog](/resources/changelog.md)
|
||||
- [Community](/resources/community)
|
||||
- [Contributing](/resources/contributing)
|
||||
- [Changelog](/resources/changelog)
|
||||
|
||||
- Components
|
||||
- [Alert](/components/alert.md)
|
||||
- [Avatar](/components/avatar.md)
|
||||
- [Badge](/components/badge.md)
|
||||
- [Button](/components/button.md)
|
||||
- [Button Group](/components/button-group.md)
|
||||
- [Card](/components/card.md)
|
||||
- [Checkbox](/components/checkbox.md)
|
||||
- [Color Picker](/components/color-picker.md)
|
||||
- [Details](/components/details.md)
|
||||
- [Dialog](/components/dialog.md)
|
||||
- [Drawer](/components/drawer.md)
|
||||
- [Dropdown](/components/dropdown.md)
|
||||
- [Form](/components/form.md)
|
||||
- [Icon](/components/icon.md)
|
||||
- [Icon Button](/components/icon-button.md)
|
||||
- [Image Comparer](/components/image-comparer.md)
|
||||
- [Input](/components/input.md)
|
||||
- [Menu](/components/menu.md)
|
||||
- [Menu Divider](/components/menu-divider.md)
|
||||
- [Menu Item](/components/menu-item.md)
|
||||
- [Menu Label](/components/menu-label.md)
|
||||
- [Progress Bar](/components/progress-bar.md)
|
||||
- [Progress Ring](/components/progress-ring.md)
|
||||
- [Radio](/components/radio.md)
|
||||
- [Radio Group](/components/radio-group.md)
|
||||
- [Range](/components/range.md)
|
||||
- [Rating](/components/rating.md)
|
||||
- [Select](/components/select.md)
|
||||
- [Skeleton](/components/skeleton.md)
|
||||
- [Spinner](/components/spinner.md)
|
||||
- [Switch](/components/switch.md)
|
||||
- [Tab Group](/components/tab-group.md)
|
||||
- [Tab](/components/tab.md)
|
||||
- [Tab Panel](/components/tab-panel.md)
|
||||
- [Tag](/components/tag.md)
|
||||
- [Textarea](/components/textarea.md)
|
||||
- [Tooltip](/components/tooltip.md)
|
||||
- [Alert](/components/alert)
|
||||
- [Avatar](/components/avatar)
|
||||
- [Badge](/components/badge)
|
||||
- [Button](/components/button)
|
||||
- [Button Group](/components/button-group)
|
||||
- [Card](/components/card)
|
||||
- [Checkbox](/components/checkbox)
|
||||
- [Color Picker](/components/color-picker)
|
||||
- [Details](/components/details)
|
||||
- [Dialog](/components/dialog)
|
||||
- [Drawer](/components/drawer)
|
||||
- [Dropdown](/components/dropdown)
|
||||
- [Form](/components/form)
|
||||
- [Icon](/components/icon)
|
||||
- [Icon Button](/components/icon-button)
|
||||
- [Image Comparer](/components/image-comparer)
|
||||
- [Input](/components/input)
|
||||
- [Menu](/components/menu)
|
||||
- [Menu Divider](/components/menu-divider)
|
||||
- [Menu Item](/components/menu-item)
|
||||
- [Menu Label](/components/menu-label)
|
||||
- [Progress Bar](/components/progress-bar)
|
||||
- [Progress Ring](/components/progress-ring)
|
||||
- [Radio](/components/radio)
|
||||
- [Radio Group](/components/radio-group)
|
||||
- [Range](/components/range)
|
||||
- [Rating](/components/rating)
|
||||
- [Select](/components/select)
|
||||
- [Skeleton](/components/skeleton)
|
||||
- [Spinner](/components/spinner)
|
||||
- [Switch](/components/switch)
|
||||
- [Tab Group](/components/tab-group)
|
||||
- [Tab](/components/tab)
|
||||
- [Tab Panel](/components/tab-panel)
|
||||
- [Tag](/components/tag)
|
||||
- [Textarea](/components/textarea)
|
||||
- [Tooltip](/components/tooltip)
|
||||
|
||||
- Utilities
|
||||
- [Animation](/components/animation.md)
|
||||
- [Format Bytes](/components/format-bytes.md)
|
||||
- [Format Date](/components/format-date.md)
|
||||
- [Format Number](/components/format-number.md)
|
||||
- [Include](/components/include.md)
|
||||
- [QR Code](/components/qr-code.md)
|
||||
- [Relative Time](/components/relative-time.md)
|
||||
- [Resize Observer](/components/resize-observer.md)
|
||||
- [Responsive Media](/components/responsive-media.md)
|
||||
- [Animation](/components/animation)
|
||||
- [Format Bytes](/components/format-bytes)
|
||||
- [Format Date](/components/format-date)
|
||||
- [Format Number](/components/format-number)
|
||||
- [Include](/components/include)
|
||||
- [QR Code](/components/qr-code)
|
||||
- [Relative Time](/components/relative-time)
|
||||
- [Resize Observer](/components/resize-observer)
|
||||
- [Responsive Media](/components/responsive-media)
|
||||
|
||||
- Design Tokens
|
||||
- [Typography](/tokens/typography.md)
|
||||
- [Color](/tokens/color.md)
|
||||
- [Spacing](/tokens/spacing.md)
|
||||
- [Elevation](/tokens/elevation.md)
|
||||
- [Border Radius](/tokens/border-radius.md)
|
||||
- [Transition](/tokens/transition.md)
|
||||
- [Z-index](/tokens/z-index.md)
|
||||
- [Typography](/tokens/typography)
|
||||
- [Color](/tokens/color)
|
||||
- [Spacing](/tokens/spacing)
|
||||
- [Elevation](/tokens/elevation)
|
||||
- [Border Radius](/tokens/border-radius)
|
||||
- [Transition](/tokens/transition)
|
||||
- [Z-index](/tokens/z-index)
|
||||
|
||||
- Tutorials
|
||||
- [Integrating with NextJS](/tutorials/integrating-with-nextjs.md)
|
||||
- [Integrating with Rails](/tutorials/integrating-with-rails.md)
|
||||
- [Integrating with NextJS](/tutorials/integrating-with-nextjs)
|
||||
- [Integrating with Rails](/tutorials/integrating-with-rails)
|
||||
|
|
@ -8,7 +8,7 @@ Checkboxes allow the user to toggle an option on or off.
|
|||
<sl-checkbox>Checkbox</sl-checkbox>
|
||||
```
|
||||
|
||||
?> This component doesn't work with standard forms. Use [`<sl-form>`](/components/form.md) instead.
|
||||
?> This component doesn't work with standard forms. Use [`<sl-form>`](/components/form) instead.
|
||||
|
||||
## Examples
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ Dropdowns expose additional content that "drops down" in a panel.
|
|||
|
||||
Dropdowns consist of a trigger and a panel. By default, activating the trigger will expose the panel and interacting outside of the panel will close it.
|
||||
|
||||
Dropdowns are designed to work well with [menus](/components/menu.md) to provide a list of options the user can select from. However, dropdowns can also be used in lower-level applications (e.g. [color picker](/components/color-picker.md) and [select](/components/select.md)). The API gives you complete control over showing, hiding, and positioning the panel.
|
||||
Dropdowns are designed to work well with [menus](/components/menu) to provide a list of options the user can select from. However, dropdowns can also be used in lower-level applications (e.g. [color picker](/components/color-picker) and [select](/components/select)). The API gives you complete control over showing, hiding, and positioning the panel.
|
||||
|
||||
```html preview
|
||||
<sl-dropdown>
|
||||
|
|
@ -123,7 +123,7 @@ Dropdown panels will be clipped if they're inside a container that has `overflow
|
|||
|
||||
### Getting the Selected Item
|
||||
|
||||
When dropdowns are used with [menus](/components/menu.md), you can listen for the `sl-select` event to determine which menu item was selected. The menu item element will be exposed in `event.detail.item`. You can set `value` props to make it easier to identify commands.
|
||||
When dropdowns are used with [menus](/components/menu), you can listen for the `sl-select` event to determine which menu item was selected. The menu item element will be exposed in `event.detail.item`. You can set `value` props to make it easier to identify commands.
|
||||
|
||||
```html preview
|
||||
<div class="dropdown-selection">
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ Inputs collect data from the user.
|
|||
<sl-input></sl-input>
|
||||
```
|
||||
|
||||
?> This component doesn't work with standard forms. Use [`<sl-form>`](/components/form.md) instead.
|
||||
?> This component doesn't work with standard forms. Use [`<sl-form>`](/components/form) instead.
|
||||
|
||||
?> Please refer to the section on [form control validation](/components/form?id=form-control-validation) to learn how to do client-side validation.
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
Menus provide a list of options for the user to choose from.
|
||||
|
||||
You can use [menu items](/components/menu-item.md), [menu dividers](/components/menu-divider.md), and [menu labels](/components/menu-label.md) to compose a menu.
|
||||
You can use [menu items](/components/menu-item), [menu dividers](/components/menu-divider), and [menu labels](/components/menu-label) to compose a menu.
|
||||
|
||||
```html preview
|
||||
<sl-menu style="max-width: 200px; border: solid 1px var(--sl-panel-border-color); border-radius: var(--sl-border-radius-medium);">
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ Radios are designed to be used with [radio groups](/components/radio-group). As
|
|||
</sl-radio-group>
|
||||
```
|
||||
|
||||
?> This component doesn't work with standard forms. Use [`<sl-form>`](/components/form.md) instead.
|
||||
?> This component doesn't work with standard forms. Use [`<sl-form>`](/components/form) instead.
|
||||
|
||||
## Examples
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ Ranges allow the user to select a single value within a given range using a slid
|
|||
<sl-range min="0" max="100" step="1"></sl-range>
|
||||
```
|
||||
|
||||
?> This component doesn't work with standard forms. Use [`<sl-form>`](/components/form.md) instead.
|
||||
?> This component doesn't work with standard forms. Use [`<sl-form>`](/components/form) instead.
|
||||
|
||||
## Examples
|
||||
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ Selects allow you to choose one or more items from a dropdown menu.
|
|||
</sl-select>
|
||||
```
|
||||
|
||||
?> This component doesn't work with standard forms. Use [`<sl-form>`](/components/form.md) instead.
|
||||
?> This component doesn't work with standard forms. Use [`<sl-form>`](/components/form) instead.
|
||||
|
||||
## Examples
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ Switches allow the user to toggle an option on or off.
|
|||
<sl-switch>Switch</sl-switch>
|
||||
```
|
||||
|
||||
?> This component doesn't work with standard forms. Use [`<sl-form>`](/components/form.md) instead.
|
||||
?> This component doesn't work with standard forms. Use [`<sl-form>`](/components/form) instead.
|
||||
|
||||
## Examples
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
Tab groups organize content into a container that shows one section at a time.
|
||||
|
||||
Tab groups make use of [tabs](/components/tab.md) and [tab panels](/components/tab-panel.md). Each tab must be slotted into the `nav` slot and its `panel` must refer to a tab panel of the same name.
|
||||
Tab groups make use of [tabs](/components/tab) and [tab panels](/components/tab-panel). Each tab must be slotted into the `nav` slot and its `panel` must refer to a tab panel of the same name.
|
||||
|
||||
```html preview
|
||||
<sl-tab-group>
|
||||
|
|
|
|||
|
|
@ -18,6 +18,6 @@ Tab panels are used inside tab groups to display content.
|
|||
</sl-tab-group>
|
||||
```
|
||||
|
||||
?> Additional demonstrations can be found in the [tab group examples](/components/tab-group.md).
|
||||
?> Additional demonstrations can be found in the [tab group examples](/components/tab-group).
|
||||
|
||||
[component-metadata:sl-tab-panel]
|
||||
|
|
|
|||
|
|
@ -11,6 +11,6 @@ Tabs are used inside tab groups to represent tab panels.
|
|||
<sl-tab disabled>Disabled</sl-tab>
|
||||
```
|
||||
|
||||
?> Additional demonstrations can be found in the [tab group examples](/components/tab-group.md).
|
||||
?> Additional demonstrations can be found in the [tab group examples](/components/tab-group).
|
||||
|
||||
[component-metadata:sl-tab]
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ Textareas collect data from the user and allow multiple lines of text.
|
|||
<sl-textarea></sl-textarea>
|
||||
```
|
||||
|
||||
?> This component doesn't work with standard forms. Use [`<sl-form>`](/components/form.md) instead.
|
||||
?> This component doesn't work with standard forms. Use [`<sl-form>`](/components/form) instead.
|
||||
|
||||
?> Please refer to the section on [form control validation](/components/form?id=form-control-validation) to learn how to do client-side validation.
|
||||
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ The easiest way to install Shoelace is with the CDN. Just add the following tags
|
|||
<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/dist/shoelace.js"></script>
|
||||
```
|
||||
|
||||
Now you can [start using Shoelace!](/getting-started/usage.md)
|
||||
Now you can [start using Shoelace!](/getting-started/usage)
|
||||
|
||||
## Local Installation
|
||||
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ Now you have access to all of Shoelace's components! Try adding a button:
|
|||
<sl-button>Click me</sl-button>
|
||||
```
|
||||
|
||||
See the [installation instructions](getting-started/installation.md) for more details and other ways to install Shoelace.
|
||||
See the [installation instructions](getting-started/installation) for more details and other ways to install Shoelace.
|
||||
|
||||
## New to Web Components?
|
||||
|
||||
|
|
|
|||
|
|
@ -112,7 +112,7 @@ For example, `<button>` and `<sl-button>` both have a `type` attribute, but it d
|
|||
|
||||
Shoelace ships with a file called `vscode.html-custom-data.json` that can be used to describe its components to Visual Studio Code. This enables code completion for Shoelace components (also known as "code hinting" or "IntelliSense"). To enable it, you need to tell VS Code where the file is.
|
||||
|
||||
1. [Install Shoelace locally](/getting-started/installation.md#local-installation)
|
||||
1. [Install Shoelace locally](/getting-started/installation#local-installation)
|
||||
2. Create a folder called `.vscode` at the root of your project
|
||||
3. Create a file inside the folder called `settings.json`
|
||||
4. Add the following to the file
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue