mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-18 19:46:36 +00:00
Compare commits
No commits in common. "master" and "v0.32.0" have entirely different histories.
1145 changed files with 42915 additions and 69741 deletions
1
.github/FUNDING.yml
vendored
1
.github/FUNDING.yml
vendored
|
|
@ -1 +0,0 @@
|
||||||
github: metonym
|
|
||||||
8
.github/ISSUE_TEMPLATE/config.yml
vendored
8
.github/ISSUE_TEMPLATE/config.yml
vendored
|
|
@ -1,8 +0,0 @@
|
||||||
blank_issues_enabled: true
|
|
||||||
contact_links:
|
|
||||||
- name: Ask a question
|
|
||||||
url: https://github.com/carbon-design-system/carbon-components-svelte/discussions
|
|
||||||
about: Please ask and answer questions here.
|
|
||||||
- name: Carbon Design System Discord
|
|
||||||
url: https://discord.gg/J7JEUEkTRX
|
|
||||||
about: Chat with us on Discord.
|
|
||||||
60
.github/workflows/checks.yml
vendored
60
.github/workflows/checks.yml
vendored
|
|
@ -1,60 +0,0 @@
|
||||||
on:
|
|
||||||
pull_request:
|
|
||||||
paths-ignore:
|
|
||||||
- "**.md"
|
|
||||||
- "docs/**"
|
|
||||||
- "examples/**"
|
|
||||||
push:
|
|
||||||
branches: [master]
|
|
||||||
paths-ignore:
|
|
||||||
- "**.md"
|
|
||||||
- "docs/**"
|
|
||||||
- "examples/**"
|
|
||||||
|
|
||||||
permissions:
|
|
||||||
contents: read
|
|
||||||
|
|
||||||
jobs:
|
|
||||||
lint:
|
|
||||||
runs-on: macos-15-xlarge
|
|
||||||
steps:
|
|
||||||
- uses: actions/checkout@v5
|
|
||||||
- uses: actions/setup-node@v5
|
|
||||||
with:
|
|
||||||
node-version: 22
|
|
||||||
cache: "npm"
|
|
||||||
- run: npm ci
|
|
||||||
- run: npm run lint
|
|
||||||
|
|
||||||
test:
|
|
||||||
runs-on: macos-15-xlarge
|
|
||||||
steps:
|
|
||||||
- uses: actions/checkout@v5
|
|
||||||
- uses: actions/setup-node@v5
|
|
||||||
with:
|
|
||||||
node-version: 22
|
|
||||||
cache: "npm"
|
|
||||||
- run: npm ci
|
|
||||||
- run: npm run test
|
|
||||||
|
|
||||||
types:
|
|
||||||
runs-on: macos-15-xlarge
|
|
||||||
steps:
|
|
||||||
- uses: actions/checkout@v5
|
|
||||||
- uses: actions/setup-node@v5
|
|
||||||
with:
|
|
||||||
node-version: 22
|
|
||||||
cache: "npm"
|
|
||||||
- run: npm ci
|
|
||||||
- run: npm run test:src-types
|
|
||||||
- run: npm run test:types
|
|
||||||
|
|
||||||
deploy-docs:
|
|
||||||
if: github.ref == 'refs/heads/master'
|
|
||||||
needs: [lint, test, types]
|
|
||||||
runs-on: macos-15-xlarge
|
|
||||||
steps:
|
|
||||||
- name: Trigger deploy
|
|
||||||
env:
|
|
||||||
deploy_url: ${{ secrets.RENDER_DEPLOY_HOOK_URL }}
|
|
||||||
run: curl -f "$deploy_url"
|
|
||||||
40
.github/workflows/release.yml
vendored
40
.github/workflows/release.yml
vendored
|
|
@ -1,40 +0,0 @@
|
||||||
on:
|
|
||||||
push:
|
|
||||||
tags:
|
|
||||||
- "v*"
|
|
||||||
|
|
||||||
jobs:
|
|
||||||
release:
|
|
||||||
runs-on: macos-latest-xlarge
|
|
||||||
permissions:
|
|
||||||
contents: read
|
|
||||||
id-token: write
|
|
||||||
steps:
|
|
||||||
- uses: actions/checkout@v5
|
|
||||||
- uses: actions/setup-node@v5
|
|
||||||
with:
|
|
||||||
node-version: 22
|
|
||||||
registry-url: "https://registry.npmjs.org"
|
|
||||||
|
|
||||||
- name: Install dependencies
|
|
||||||
run: npm install
|
|
||||||
|
|
||||||
- name: Build docs
|
|
||||||
run: npm run build:docs
|
|
||||||
|
|
||||||
- name: Prune package.json
|
|
||||||
run: npx culls --preserve=svelte
|
|
||||||
|
|
||||||
- name: Publish package (stable)
|
|
||||||
if: ${{ ! contains(github.ref, '-next') }}
|
|
||||||
env:
|
|
||||||
NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
|
|
||||||
run: |
|
|
||||||
npm publish --provenance --access public
|
|
||||||
|
|
||||||
- name: Publish package (next)
|
|
||||||
if: ${{ contains(github.ref, '-next') }}
|
|
||||||
env:
|
|
||||||
NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
|
|
||||||
run: |
|
|
||||||
npm publish --provenance --access public --tag next
|
|
||||||
8
.gitignore
vendored
8
.gitignore
vendored
|
|
@ -1,4 +1,10 @@
|
||||||
node_modules
|
/coverage
|
||||||
|
/lib
|
||||||
|
/node_modules
|
||||||
|
/css/*.css
|
||||||
.DS_Store
|
.DS_Store
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
*.tgz
|
||||||
.vscode
|
.vscode
|
||||||
.idea
|
.idea
|
||||||
|
|
@ -1,9 +1,9 @@
|
||||||
|
/coverage
|
||||||
|
/lib
|
||||||
/css
|
/css
|
||||||
/types
|
/**/__sapper__
|
||||||
.svelte-kit
|
/**/.routify
|
||||||
.routify
|
/**/dist
|
||||||
dist
|
/**/client
|
||||||
client
|
/**/build
|
||||||
build
|
|
||||||
*.svx
|
*.svx
|
||||||
COMPONENT_API.json
|
|
||||||
6
.travis.yml
Normal file
6
.travis.yml
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
language: node_js
|
||||||
|
node_js: 12
|
||||||
|
cache: yarn
|
||||||
|
script:
|
||||||
|
- yarn prepack
|
||||||
|
- yarn test
|
||||||
2391
CHANGELOG.md
2391
CHANGELOG.md
File diff suppressed because it is too large
Load diff
2
CODEOWNERS
Normal file
2
CODEOWNERS
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
* @metonym
|
||||||
|
* @josefaidt
|
||||||
3111
COMPONENT_INDEX.md
3111
COMPONENT_INDEX.md
File diff suppressed because it is too large
Load diff
|
|
@ -1,11 +1,11 @@
|
||||||
# Contributing
|
# Contributing
|
||||||
|
|
||||||
Before submitting a pull request (PR), consider [filing an issue](https://github.com/carbon-design-system/carbon-components-svelte/issues) to gain clarity and direction.
|
Before submitting a pull request (PR), consider [filing an issue](https://github.com/IBM/carbon-components-svelte/issues) to gain clarity and direction.
|
||||||
|
|
||||||
## Prerequisites
|
## Prerequisites
|
||||||
|
|
||||||
- [Node.js](https://nodejs.org/en/download/package-manager/) (version >=20)
|
- [Node.js](https://nodejs.org/en/download/package-manager/) (version >=12)
|
||||||
- [npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm#using-a-node-installer-to-install-nodejs-and-npm)
|
- [Yarn](https://classic.yarnpkg.com/en/docs/install)
|
||||||
|
|
||||||
## Project set-up
|
## Project set-up
|
||||||
|
|
||||||
|
|
@ -19,35 +19,42 @@ cd carbon-components-svelte
|
||||||
Set the original repository as the upstream:
|
Set the original repository as the upstream:
|
||||||
|
|
||||||
```sh
|
```sh
|
||||||
git remote add upstream git@github.com:carbon-design-system/carbon-components-svelte.git
|
git remote add upstream git@github.com:IBM/carbon-components-svelte.git
|
||||||
# verify that the upstream is added
|
# verify that the upstream is added
|
||||||
git remote -v
|
git remote -v
|
||||||
```
|
```
|
||||||
|
|
||||||
### Install
|
### Install
|
||||||
|
|
||||||
Install the project dependencies.
|
Install the project dependencies:
|
||||||
|
|
||||||
```sh
|
```sh
|
||||||
npm install
|
# carbon-components-svelte/
|
||||||
|
yarn install
|
||||||
```
|
```
|
||||||
|
|
||||||
## Documentation set-up
|
## Documentation set-up
|
||||||
|
|
||||||
Component documentation is located in the `docs` folder. The website is built using svite, routify, and MDsveX. You will need to create a symbolic project link in order to see live changes reflected when developing locally.
|
Component documentation is located in the `docs` folder. The website is built using svite, routify, and MDsveX. You will need to create a symbolic project link in order to see live changes reflected when developing locally.
|
||||||
|
|
||||||
First, create a symbolic link at the root of the project:
|
First, create a symbolic link at the root of the project folder:
|
||||||
|
|
||||||
```sh
|
```sh
|
||||||
npm link
|
# carbon-components-svelte/
|
||||||
|
yarn link
|
||||||
```
|
```
|
||||||
|
|
||||||
Then, go into `docs` and link the package.
|
Go into the `docs` folder:
|
||||||
|
|
||||||
```sh
|
```sh
|
||||||
cd docs
|
cd docs
|
||||||
npm link "carbon-components-svelte"
|
```
|
||||||
npm install
|
|
||||||
|
Link `"carbon-components-svelte"`:
|
||||||
|
|
||||||
|
```sh
|
||||||
|
yarn link "carbon-components-svelte"
|
||||||
|
yarn install
|
||||||
```
|
```
|
||||||
|
|
||||||
If linked correctly, any change to a component in the `src` folder should be reflected in the `docs` site.
|
If linked correctly, any change to a component in the `src` folder should be reflected in the `docs` site.
|
||||||
|
|
@ -67,10 +74,10 @@ Preview changes to components from the `src` folder in the documentation website
|
||||||
In the `docs` folder, run:
|
In the `docs` folder, run:
|
||||||
|
|
||||||
```sh
|
```sh
|
||||||
npm run dev
|
yarn dev
|
||||||
```
|
```
|
||||||
|
|
||||||
The site should be served at http://localhost:5173/ (or the next available port).
|
The site should be served at `http://localhost:3000/` (or the next available port).
|
||||||
|
|
||||||
### Component Format
|
### Component Format
|
||||||
|
|
||||||
|
|
@ -98,7 +105,7 @@ export let size = "default";
|
||||||
|
|
||||||
### Creating a component
|
### Creating a component
|
||||||
|
|
||||||
First, [submit an issue](https://github.com/carbon-design-system/carbon-components-svelte/issues).
|
First, [submit an issue](https://github.com/IBM/carbon-components-svelte/issues).
|
||||||
|
|
||||||
If creating a new component, don't forget it from `src/index.js`:
|
If creating a new component, don't forget it from `src/index.js`:
|
||||||
|
|
||||||
|
|
@ -114,14 +121,23 @@ export {
|
||||||
} from "./ComposedModal";
|
} from "./ComposedModal";
|
||||||
```
|
```
|
||||||
|
|
||||||
### Run `npm run build:docs`
|
### Build
|
||||||
|
|
||||||
Run the following command to re-generate TypeScript definitions and documentation.
|
Verify that you can build the library by running the following command at the project root:
|
||||||
|
|
||||||
```sh
|
```sh
|
||||||
npm run build:docs
|
# carbon-components-svelte/
|
||||||
|
yarn prepack
|
||||||
```
|
```
|
||||||
|
|
||||||
|
This does several things:
|
||||||
|
|
||||||
|
- uses `node-sass` to pre-compile CSS StyleSheets in the `css` folder
|
||||||
|
- uses Rollup to bundle the Svelte components in `src` in ESM/UMD formats; emitted to `lib`
|
||||||
|
- uses a Rollup plugin to:
|
||||||
|
- generate component documentation in Markdown format (`COMPONENT_INDEX.md`)
|
||||||
|
- generate TypeScript definitions (`types/index.d.ts`)
|
||||||
|
|
||||||
## Submit a Pull Request
|
## Submit a Pull Request
|
||||||
|
|
||||||
### Sync Your Fork
|
### Sync Your Fork
|
||||||
|
|
@ -137,51 +153,3 @@ git merge upstream/master
|
||||||
### Submit a PR
|
### Submit a PR
|
||||||
|
|
||||||
After you've pushed your changes to remote, submit your PR. Make sure you are comparing `<YOUR_USER_ID>/feature` to `origin/master`.
|
After you've pushed your changes to remote, submit your PR. Make sure you are comparing `<YOUR_USER_ID>/feature` to `origin/master`.
|
||||||
|
|
||||||
## Maintainer guide
|
|
||||||
|
|
||||||
The following items only apply to project maintainers.
|
|
||||||
|
|
||||||
### Release
|
|
||||||
|
|
||||||
This library is published to NPM with [provenance](https://docs.npmjs.com/generating-provenance-statements) via a [GitHub workflow](https://github.com/carbon-design-system/carbon-components-svelte/blob/master/.github/workflows/release.yml).
|
|
||||||
|
|
||||||
The workflow is automatically triggered when pushing a tag that begins with `v` (e.g., `v0.81.1`).
|
|
||||||
|
|
||||||
However, maintainers must perform a few things in preparation for a release.
|
|
||||||
|
|
||||||
Locally, while on `master` and the branch is clean, run `npm run release`. This command will:
|
|
||||||
|
|
||||||
- Bump the semantic version in `package.json`
|
|
||||||
- Generate notes in `CHANGELOG.md`
|
|
||||||
- Run `npm run build:docs` to update the generated documentation
|
|
||||||
|
|
||||||
This command will not create a commit nor tag. Afterwards, perform the following manually:
|
|
||||||
|
|
||||||
```sh
|
|
||||||
# 1. Commit the changes using the new version as the commit message.
|
|
||||||
git commit -am "v0.81.1"
|
|
||||||
|
|
||||||
# 2. Create a tag.
|
|
||||||
git tag v0.81.1
|
|
||||||
|
|
||||||
# 3. Push the tag to the remote.
|
|
||||||
# This will trigger the `release.yml` workflow to publish a new package to NPM (with provenance).
|
|
||||||
git push origin v0.81.1
|
|
||||||
```
|
|
||||||
|
|
||||||
If all goes as expected, the [`release.yml` workflow](https://github.com/carbon-design-system/carbon-components-svelte/actions/workflows/release.yml) should trigger a new run and publish the new version to NPM.
|
|
||||||
|
|
||||||
### Post-release checklist
|
|
||||||
|
|
||||||
After confirming that the new release is published to NPM, perform the following:
|
|
||||||
|
|
||||||
1. Create a [new release](https://github.com/carbon-design-system/carbon-components-svelte/releases/new) on GitHub. Click "Generate release notes" to automatically list changes by commit with the relevant Pull Request and author metadata. You may manually remove notes that are not relevant to the release (e.g., CI changes).
|
|
||||||
|
|
||||||
2. Publish the release as the latest release.
|
|
||||||
|
|
||||||
3. As good practice, visit the Pull Request and/or issue for each commit and manually confirm that it's been released. This is helpful for future readers to understand what version includes the new feature or fix.
|
|
||||||
|
|
||||||
```md
|
|
||||||
Released in [v0.81.1](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.81.1).
|
|
||||||
```
|
|
||||||
|
|
|
||||||
2
LICENSE
2
LICENSE
|
|
@ -186,7 +186,7 @@
|
||||||
same "printed page" as the copyright notice for easier
|
same "printed page" as the copyright notice for easier
|
||||||
identification within third-party archives.
|
identification within third-party archives.
|
||||||
|
|
||||||
Copyright 2019 IBM
|
Copyright [yyyy] [name of copyright owner]
|
||||||
|
|
||||||
Licensed under the Apache License, Version 2.0 (the "License");
|
Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
you may not use this file except in compliance with the License.
|
you may not use this file except in compliance with the License.
|
||||||
|
|
|
||||||
5
MAINTAINERS.md
Normal file
5
MAINTAINERS.md
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
# Maintainers
|
||||||
|
|
||||||
|
[Eric Liu](https://github.com/metonym) - eric.young.liu@ibm.com
|
||||||
|
|
||||||
|
[Josef Aidt](https://github.com/josefaidt) - josef.aidt@gmail.com
|
||||||
370
README.md
370
README.md
|
|
@ -1,11 +1,9 @@
|
||||||
# carbon-components-svelte
|
# carbon-components-svelte
|
||||||
|
|
||||||
[![NPM][npm]][npm-url]
|
[![NPM][npm]][npm-url]
|
||||||
|
|
||||||
|
|
||||||
<a href="https://discord.gg/J7JEUEkTRX">
|
[![Build][build]][build-badge]
|
||||||
<img src="https://img.shields.io/discord/689212587170201628?color=5865F2&style=for-the-badge" alt="Chat with us on Discord">
|
|
||||||
</a>
|
|
||||||
|
|
||||||
Carbon Components Svelte is a [Svelte](https://github.com/sveltejs/svelte) component library that implements the [Carbon Design System](https://github.com/carbon-design-system), an open source design system by IBM.
|
Carbon Components Svelte is a [Svelte](https://github.com/sveltejs/svelte) component library that implements the [Carbon Design System](https://github.com/carbon-design-system), an open source design system by IBM.
|
||||||
|
|
||||||
|
|
@ -13,119 +11,62 @@ Design systems facilitate design and development through reuse, consistency, and
|
||||||
|
|
||||||
The Carbon Svelte portfolio also includes:
|
The Carbon Svelte portfolio also includes:
|
||||||
|
|
||||||
- **[Carbon Icons Svelte](https://github.com/carbon-design-system/carbon-icons-svelte)**: 2,500+ Carbon icons as Svelte components
|
- **[Carbon Icons Svelte](https://github.com/IBM/carbon-icons-svelte)**: 6000+ Carbon icons as Svelte components
|
||||||
- **[Carbon Pictograms Svelte](https://github.com/carbon-design-system/carbon-pictograms-svelte)**: 1,300+ Carbon pictograms as Svelte components
|
- **[Carbon Pictograms Svelte](https://github.com/IBM/carbon-pictograms-svelte)**: 700+ Carbon pictograms as Svelte components
|
||||||
- **[Carbon Charts Svelte](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/svelte)**: 25+ charts, powered by d3
|
- **[Carbon Charts Svelte](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/svelte)**: 16 chart types, powered by d3
|
||||||
- **[Carbon Preprocess Svelte](https://github.com/carbon-design-system/carbon-preprocess-svelte)**: Collection of Svelte preprocessors for Carbon
|
|
||||||
|
|
||||||
## [Documentation](https://svelte.carbondesignsystem.com)
|
## [Documentation](http://ibm.biz/carbon-svelte)
|
||||||
|
|
||||||
|
<a href="https://www.vercel.com?utm_source=carbon-components-svelte&utm_campaign=oss" target="_blank"><img height="34px" src="./docs/public/powered-by-vercel.svg" alt="Deploys by Vercel" /></a>
|
||||||
|
|
||||||
|
The [documentation website](http://ibm.biz/carbon-svelte) contains live demos and examples.
|
||||||
|
|
||||||
Other forms of documentation are auto-generated:
|
Other forms of documentation are auto-generated:
|
||||||
|
|
||||||
- **[TypeScript definitions](types)**: Component TypeScript definitions
|
- **[TypeScript definitions](types)**: Component TypeScript definitions
|
||||||
- **[Component Index](COMPONENT_INDEX.md)**: Component API in Markdown format
|
- **[Component Index](COMPONENT_INDEX.md)**: Markdown file documenting component props, slots, and events
|
||||||
- **[Component API](docs/src/COMPONENT_API.json)**: Component API in JSON format
|
- **[Component API](docs/src/COMPONENT_API.json)**: Component API metadata in JSON format
|
||||||
|
|
||||||
## Installation
|
## Getting started
|
||||||
|
|
||||||
|
Install `carbon-components-svelte` as a development dependency.
|
||||||
|
|
||||||
```sh
|
```sh
|
||||||
# npm
|
yarn add -D carbon-components-svelte
|
||||||
npm i carbon-components-svelte
|
# OR
|
||||||
|
npm i -D carbon-components-svelte
|
||||||
# pnpm
|
|
||||||
pnpm i carbon-components-svelte
|
|
||||||
|
|
||||||
# Yarn
|
|
||||||
yarn add carbon-components-svelte
|
|
||||||
|
|
||||||
# Bun
|
|
||||||
bun add carbon-components-svelte
|
|
||||||
```
|
```
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
### Styling
|
The quickest way to get started is to customize a template from the [examples](examples/) folder.
|
||||||
|
|
||||||
Before importing components, you will need to first apply Carbon component styles. The Carbon Design System supports five themes (2 light, 3 dark).
|
Example set-ups demonstrate usage with popular application bundlers and frameworks. They include a mix of client-side rendering (CSR) and server-side rendering (SSR) approaches.
|
||||||
|
|
||||||
- **white.css**: Default Carbon theme (light)
|
- **[examples/rollup](examples/rollup/)**: SPA bundled using [Rollup](https://github.com/rollup/rollup)
|
||||||
- **g10.css**: Gray 10 theme (light)
|
- **[examples/rollup-typescript](examples/rollup-typescript/)**: SPA bundled using [Rollup](https://github.com/rollup/rollup) with TypeScript support
|
||||||
- **g80.css**: Gray 80 theme (dark)
|
- **[examples/routify](examples/routify/)**: SPA + static export using [Routify](https://github.com/roxiness/routify)
|
||||||
- **g90.css**: Gray 90 theme (dark)
|
- **[examples/sapper](examples/sapper/)**: SSR + static export using [Sapper](https://github.com/sveltejs/sapper)
|
||||||
- **g100.css**: Gray 100 theme (dark)
|
- **[examples/svite](examples/svite/)**: SPA developed with Svite, bundled with [Rollup](https://github.com/rollup/rollup)
|
||||||
- **all.css**: All themes (White, Gray 10, Gray 90, Gray 100) using [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)
|
- **[examples/webpack](examples/webpack/)**: SPA bundled with [webpack](https://github.com/webpack/webpack)
|
||||||
|
|
||||||
Each StyleSheet is [generated](scripts/build-css.js) from the flagship [carbon-components](https://github.com/carbon-design-system/carbon/tree/main/packages/carbon-components) library.
|
### Scaffolding
|
||||||
|
|
||||||
The compiled CSS is generated from the following `.scss` files:
|
Each example is published in a dedicated branch of the same name.
|
||||||
|
|
||||||
- [css/white.scss](css/white.scss)
|
Use [degit](https://github.com/Rich-Harris/degit) to scaffold a new project:
|
||||||
- [css/g10.scss](css/g10.scss)
|
|
||||||
- [css/g80.scss](css/g80.scss)
|
|
||||||
- [css/g90.scss](css/g90.scss)
|
|
||||||
- [css/g100.scss](css/g100.scss)
|
|
||||||
- [css/all.scss](css/all.scss)
|
|
||||||
|
|
||||||
#### CSS StyleSheet
|
For example, to use the `svite` template, run the following commands:
|
||||||
|
|
||||||
```js
|
```sh
|
||||||
// White theme
|
npx degit ibm/carbon-components-svelte#svite svelte-app
|
||||||
import "carbon-components-svelte/css/white.css";
|
cd svelte-app
|
||||||
|
yarn install
|
||||||
// Gray 10 theme
|
|
||||||
import "carbon-components-svelte/css/g10.css";
|
|
||||||
|
|
||||||
// Gray 80 theme
|
|
||||||
import "carbon-components-svelte/css/g80.css";
|
|
||||||
|
|
||||||
// Gray 90 theme
|
|
||||||
import "carbon-components-svelte/css/g90.css";
|
|
||||||
|
|
||||||
// Gray 100 theme
|
|
||||||
import "carbon-components-svelte/css/g100.css";
|
|
||||||
|
|
||||||
// All themes
|
|
||||||
import "carbon-components-svelte/css/all.css";
|
|
||||||
```
|
|
||||||
|
|
||||||
### SCSS
|
|
||||||
|
|
||||||
The most performant method to load styles is to import SCSS directly from carbon-components. Although it requires more set up, you can reduce the size of the bundle CSS by importing individual component styles instead of a pre-compiled CSS StyleSheet.
|
|
||||||
|
|
||||||
Refer to the [official Carbon guide on SASS](https://github.com/carbon-design-system/carbon/blob/v10/docs/guides/sass.md) for documentation.
|
|
||||||
|
|
||||||
### Dynamic theming
|
|
||||||
|
|
||||||
Use the "all.css" StyleSheet for dynamic, client-side theming.
|
|
||||||
|
|
||||||
```js
|
|
||||||
import "carbon-components-svelte/css/all.css";
|
|
||||||
```
|
|
||||||
|
|
||||||
Update the theme by setting the `theme` attribute on the `html` element. The default `theme` is `"white"`.
|
|
||||||
|
|
||||||
```html
|
|
||||||
<!doctype html>
|
|
||||||
<html lang="en" theme="g10">
|
|
||||||
<body>
|
|
||||||
...
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
```
|
|
||||||
|
|
||||||
Programmatically switch between each of the five Carbon themes by setting the "theme" attribute on the HTML element.
|
|
||||||
|
|
||||||
```html
|
|
||||||
<script>
|
|
||||||
let theme = "white"; // "white" | "g10" | "g80" | "g90" | "g100"
|
|
||||||
|
|
||||||
$: document.documentElement.setAttribute("theme", theme);
|
|
||||||
</script>
|
|
||||||
```
|
```
|
||||||
|
|
||||||
### Importing components
|
### Importing components
|
||||||
|
|
||||||
Import components from `carbon-components-svelte` in the `script` tag of your Svelte file. Visit the [documentation site](https://svelte.carbondesignsystem.com) for examples.
|
Import components from `carbon-components-svelte` in the `script` tag of your Svelte file.
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<!-- App.svelte -->
|
<!-- App.svelte -->
|
||||||
|
|
@ -142,126 +83,163 @@ Import components from `carbon-components-svelte` in the `script` tag of your Sv
|
||||||
|
|
||||||
**Refer to [COMPONENT_INDEX.md](COMPONENT_INDEX.md) for component API documentation.**
|
**Refer to [COMPONENT_INDEX.md](COMPONENT_INDEX.md) for component API documentation.**
|
||||||
|
|
||||||
## Preprocessors & Plugins
|
### Pre-compiled CSS StyleSheets
|
||||||
|
|
||||||
[carbon-preprocess-svelte](https://github.com/carbon-design-system/carbon-preprocess-svelte) is a collection of Svelte preprocessors for Carbon.
|
`carbon-components-svelte` includes pre-compiled CSS StyleSheets for each Carbon theme:
|
||||||
|
|
||||||
> [!NOTE]
|
- **white.css**: Default Carbon theme (light)
|
||||||
> Using `carbon-preprocess-svelte` is optional and not a prerequisite for this library. It should be installed as a development dependency.
|
- **g10.css**: Gray 10 theme (light)
|
||||||
|
- **g90.css**: Gray 90 theme (dark)
|
||||||
|
- **g100.css**: Gray 100 theme (dark)
|
||||||
|
- **all.css**: All themes (White, Gray 10, Gray 90, Gray 100) using [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)
|
||||||
|
|
||||||
```sh
|
Each StyleSheet is [generated](scripts/build-css.js) from the flagship [carbon-components](https://github.com/carbon-design-system/carbon/tree/master/packages/components) library.
|
||||||
# npm
|
|
||||||
npm i -D carbon-preprocess-svelte
|
|
||||||
|
|
||||||
# pnpm
|
The compiled CSS is generated from the following `.scss` files:
|
||||||
pnpm i -D carbon-preprocess-svelte
|
|
||||||
|
|
||||||
# Yarn
|
- [css/white.scss](css/white.scss)
|
||||||
yarn add -D carbon-preprocess-svelte
|
- [css/g10.scss](css/g10.scss)
|
||||||
|
- [css/g90.scss](css/g90.scss)
|
||||||
# Bun
|
- [css/g100.scss](css/g100.scss)
|
||||||
bun add -D carbon-preprocess-svelte
|
- [css/all.scss](css/all.scss)
|
||||||
```
|
|
||||||
|
|
||||||
### `optimizeImports`
|
|
||||||
|
|
||||||
`optimizeImports` is a Svelte preprocessor that rewrites barrel imports from Carbon components/icons/pictograms packages to their source Svelte code paths. This can significantly speed up development and production build compile times while preserving typeahead and autocompletion offered by integrated development environments (IDE) like VS Code.
|
|
||||||
|
|
||||||
The preprocessor optimizes imports from the following packages:
|
|
||||||
|
|
||||||
- [carbon-components-svelte](https://github.com/carbon-design-system/carbon-components-svelte)
|
|
||||||
- [carbon-icons-svelte](https://github.com/carbon-design-system/carbon-icons-svelte)
|
|
||||||
- [carbon-pictograms-svelte](https://github.com/carbon-design-system/carbon-pictograms-svelte)
|
|
||||||
|
|
||||||
**Before & After**
|
|
||||||
|
|
||||||
```diff
|
|
||||||
- import { Button } from "carbon-components-svelte";
|
|
||||||
+ import Button from "carbon-components-svelte/src/Button/Button.svelte";
|
|
||||||
|
|
||||||
- import { Add } from "carbon-icons-svelte";
|
|
||||||
+ import Add from "carbon-icons-svelte/lib/Add.svelte";
|
|
||||||
|
|
||||||
- import { Airplane } from "carbon-pictograms-svelte";
|
|
||||||
+ import Airplane from "carbon-pictograms-svelte/lib/Airplane.svelte";
|
|
||||||
```
|
|
||||||
|
|
||||||
#### Usage
|
#### Usage
|
||||||
|
|
||||||
See [examples](examples) for full configurations.
|
##### `svelte-preprocess`
|
||||||
|
|
||||||
|
The easiest way to import a StyleSheet is with [svelte-preprocess](https://github.com/sveltejs/svelte-preprocess).
|
||||||
|
|
||||||
```js
|
```js
|
||||||
// svelte.config.js
|
const svelteOptions = {
|
||||||
import { optimizeImports } from "carbon-preprocess-svelte";
|
preprocess: require("svelte-preprocess")(),
|
||||||
|
|
||||||
export default {
|
|
||||||
preprocess: [optimizeImports()],
|
|
||||||
};
|
};
|
||||||
```
|
```
|
||||||
|
|
||||||
Any other preprocessors that transpile code in the `script` block should be invoked before `optimizeImports`.
|
```html
|
||||||
|
<!-- App.svelte -->
|
||||||
|
<style lang="scss" global>
|
||||||
|
/** Gray 10 theme **/
|
||||||
|
@import "carbon-components-svelte/css/g10";
|
||||||
|
</style>
|
||||||
|
```
|
||||||
|
|
||||||
For example, `vitePreprocess` should precede `optimizeImports`.
|
##### JavaScript import
|
||||||
|
|
||||||
```diff
|
Importing a CSS file in a JavaScript file will require the appropriate file loader(s).
|
||||||
|
|
||||||
|
```js
|
||||||
|
import "carbon-components-svelte/css/all.css";
|
||||||
|
import App from "./App.svelte";
|
||||||
|
|
||||||
|
const app = new App({ target: document.body });
|
||||||
|
|
||||||
|
export default app;
|
||||||
|
```
|
||||||
|
|
||||||
|
See [webpack.config.js](examples/webpack/webpack.config.js) in [examples/webpack](examples/webpack).
|
||||||
|
|
||||||
|
#### Dynamic theming
|
||||||
|
|
||||||
|
Use `carbon-components-svelte/css/all.css` for dynamic, client-side styling.
|
||||||
|
|
||||||
|
Update the theme by setting the `theme` attribute on the `html` element. The default `theme` is `"white"`.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" theme="g10">
|
||||||
|
<body>
|
||||||
|
...
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
Using JavaScript:
|
||||||
|
|
||||||
|
```svelte
|
||||||
|
<script>
|
||||||
|
/** @type {"white" | "g10" | "g90" | "g100"} */
|
||||||
|
let theme = "white";
|
||||||
|
|
||||||
|
$: document.documentElement.setAttribute("theme", theme);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<button on:click="{() => (theme = 'g90')}">Update theme</button>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Preprocessors
|
||||||
|
|
||||||
|
### optimizeCarbonImports
|
||||||
|
|
||||||
|
`optimizeCarbonImports` is a Svelte preprocessor that optimizes base imports inside the `script` block of a Svelte file from the following libraries:
|
||||||
|
|
||||||
|
- carbon-components-svelte
|
||||||
|
- carbon-icons-svelte
|
||||||
|
- carbon-pictograms-svelte
|
||||||
|
|
||||||
|
The preprocessor rewrites base imports to directly import the source Svelte file. This may lead to faster complile times **during development**.
|
||||||
|
|
||||||
|
Example:
|
||||||
|
|
||||||
|
**Before**
|
||||||
|
|
||||||
|
```js
|
||||||
|
import { Button, Header } from "carbon-components-svelte";
|
||||||
|
import { Notification20 } from "carbon-icons-svelte";
|
||||||
|
import { Airplane } from "carbon-pictograms-svelte";
|
||||||
|
```
|
||||||
|
|
||||||
|
**After**
|
||||||
|
|
||||||
|
```js
|
||||||
|
import Button from "carbon-components-svelte/Button/Button.svelte";
|
||||||
|
import Header from "carbon-components-svelte/UIShell/GlobalHeader/Header.svelte";
|
||||||
|
import Notification20 from "carbon-icons-svelte/lib/Notification20/Notification20.svelte";
|
||||||
|
import Airplane from "carbon-pictograms-svelte/lib/Airplane/Airplane.svelte";
|
||||||
|
```
|
||||||
|
|
||||||
|
#### svelte.config.js
|
||||||
|
|
||||||
|
```js
|
||||||
// svelte.config.js
|
// svelte.config.js
|
||||||
+ import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
|
const {
|
||||||
import { optimizeImports } from "carbon-preprocess-svelte";
|
optimizeCarbonImports,
|
||||||
|
} = require("carbon-components-svelte/preprocess");
|
||||||
|
|
||||||
export default {
|
module.exports = {
|
||||||
preprocess: [
|
preprocess: [optimizeCarbonImports()],
|
||||||
+ vitePreprocess(),
|
};
|
||||||
optimizeImports()
|
```
|
||||||
|
|
||||||
|
#### svelte-loader
|
||||||
|
|
||||||
|
```js
|
||||||
|
// webpack.config.js
|
||||||
|
const {
|
||||||
|
optimizeCarbonImports,
|
||||||
|
} = require("carbon-components-svelte/preprocess");
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
// ...
|
||||||
|
module: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
test: /\.svelte$/,
|
||||||
|
use: {
|
||||||
|
loader: "svelte-loader",
|
||||||
|
options: {
|
||||||
|
hotReload: true,
|
||||||
|
preprocess: [optimizeCarbonImports()],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
],
|
],
|
||||||
|
},
|
||||||
};
|
};
|
||||||
```
|
```
|
||||||
|
|
||||||
### `optimizeCss`
|
|
||||||
|
|
||||||
`optimizeCss` is a Vite plugin that removes unused Carbon styles at build time. The plugin is compatible with Rollup ([Vite](https://vitejs.dev/guide/api-plugin) extends the Rollup plugin API).
|
|
||||||
|
|
||||||
`carbon-components-svelte@0.85.0` or greater is required.
|
|
||||||
|
|
||||||
```diff
|
|
||||||
$ vite build
|
|
||||||
|
|
||||||
Optimized index-CU4gbKFa.css
|
|
||||||
- Before: 606.26 kB
|
|
||||||
+ After: 53.22 kB (-91.22%)
|
|
||||||
|
|
||||||
dist/index.html 0.34 kB │ gzip: 0.24 kB
|
|
||||||
dist/assets/index-CU4gbKFa.css 53.22 kB │ gzip: 6.91 kB
|
|
||||||
dist/assets/index-Ceijs3eO.js 53.65 kB │ gzip: 15.88 kB
|
|
||||||
```
|
|
||||||
|
|
||||||
> [!NOTE]
|
|
||||||
> This is a plugin and not a Svelte preprocessor. It should be added to the list of `vite.plugins`. For Vite set-ups, this plugin is only run when building the app. For Rollup and Webpack, you should conditionally apply the plugin to only execute when building for production.
|
|
||||||
|
|
||||||
#### Usage
|
|
||||||
|
|
||||||
See [examples](examples) for full configurations.
|
|
||||||
|
|
||||||
```js
|
|
||||||
// vite.config.js
|
|
||||||
import { sveltekit } from "@sveltejs/kit/vite";
|
|
||||||
import { optimizeCss } from "carbon-preprocess-svelte";
|
|
||||||
import { defineConfig } from "vite";
|
|
||||||
|
|
||||||
export default defineConfig({
|
|
||||||
plugins: [sveltekit(), optimizeCss()],
|
|
||||||
});
|
|
||||||
```
|
|
||||||
|
|
||||||
## Examples
|
|
||||||
|
|
||||||
- [examples/rollup](examples/rollup/)
|
|
||||||
- [examples/sveltekit](examples/sveltekit/)
|
|
||||||
- [examples/vite](examples/vite/)
|
|
||||||
- [examples/webpack](examples/webpack/)
|
|
||||||
|
|
||||||
## TypeScript support
|
## TypeScript support
|
||||||
|
|
||||||
[TypeScript definitions](types) are generated by [sveld](https://github.com/carbon-design-system/sveld).
|
[TypeScript definitions](types) are generated by [sveld](https://github.com/IBM/sveld).
|
||||||
|
|
||||||
## Contributing
|
## Contributing
|
||||||
|
|
||||||
|
|
@ -275,11 +253,5 @@ Refer to the [Contributing guidelines](CONTRIBUTING.md).
|
||||||
|
|
||||||
[npm]: https://img.shields.io/npm/v/carbon-components-svelte.svg?color=262626&style=for-the-badge
|
[npm]: https://img.shields.io/npm/v/carbon-components-svelte.svg?color=262626&style=for-the-badge
|
||||||
[npm-url]: https://npmjs.com/package/carbon-components-svelte
|
[npm-url]: https://npmjs.com/package/carbon-components-svelte
|
||||||
|
[build]: https://img.shields.io/travis/com/ibm/carbon-components-svelte?color=24a148&style=for-the-badge
|
||||||
## <picture><source height="20" width="20" media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-dark.svg"><source height="20" width="20" media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-light.svg"><img height="20" width="20" alt="IBM Telemetry" src="https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-light.svg"></picture> IBM Telemetry
|
[build-badge]: https://travis-ci.com/ibm/carbon-components-svelte
|
||||||
|
|
||||||
This package uses IBM Telemetry to collect de-identified and anonymized metrics data in CI environments. By installing
|
|
||||||
this package as a dependency you are agreeing to telemetry collection. To opt out, see
|
|
||||||
[Opting out of IBM Telemetry data collection](https://github.com/ibm-telemetry/telemetry-js/tree/main#opting-out-of-ibm-telemetry-data-collection).
|
|
||||||
For more information on the data being collected, please see the
|
|
||||||
[IBM Telemetry documentation](https://github.com/ibm-telemetry/telemetry-js/tree/main#ibm-telemetry-collection-basics).
|
|
||||||
|
|
|
||||||
32
SECURITY.md
32
SECURITY.md
|
|
@ -1,32 +0,0 @@
|
||||||
# Security Policy
|
|
||||||
|
|
||||||
## Supported Versions
|
|
||||||
|
|
||||||
| Version | Supported |
|
|
||||||
| ------- | ------------------ |
|
|
||||||
| 0.x | :white_check_mark: |
|
|
||||||
|
|
||||||
## Reporting a Vulnerability
|
|
||||||
|
|
||||||
_Please do not report security vulnerabilities through public GitHub issues._
|
|
||||||
|
|
||||||
Instead, report a vulnerability through GitHub's security advisory feature at
|
|
||||||
https://github.com/carbon-design-system/carbon-components-svelte/security/advisories/new
|
|
||||||
|
|
||||||
Please include a description of the issue, the steps you took to create the
|
|
||||||
issue, affected versions, and, if known, mitigations for the issue. Our team
|
|
||||||
aims to respond to all new vulnerability reports within 7 business days.
|
|
||||||
|
|
||||||
Additional information on reporting vulnerabilities to IBM is available at
|
|
||||||
https://www.ibm.com/trust/security-psirt
|
|
||||||
|
|
||||||
## Preferred languages
|
|
||||||
|
|
||||||
We prefer all communications to be in English.
|
|
||||||
|
|
||||||
## Comments on this policy
|
|
||||||
|
|
||||||
If you have suggestions on how this process could be improved please
|
|
||||||
[submit a pull request](https://github.com/carbon-design-system/carbon-components-svelte/compare)
|
|
||||||
or [file an issue](https://github.com/carbon-design-system/carbon-components-svelte/issues/new) to
|
|
||||||
discuss.
|
|
||||||
1
actions/index.js
Normal file
1
actions/index.js
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
export { truncate } from "./truncate";
|
||||||
|
|
@ -1,12 +1,16 @@
|
||||||
/**
|
/**
|
||||||
* Svelte action that applies single-line text truncation to an element
|
* Svelte action that applies single-line text truncation to an element
|
||||||
* @typedef {{ clamp?: "end" | "front" }} TruncateOptions
|
* @param {HTMLElement} node
|
||||||
* @type {(node: HTMLElement, options?: TruncateOptions) => { update: (options?: TruncateOptions) => void; }}
|
* @param {{ clamp?: "end" | "front" }} params
|
||||||
* @example
|
* @example
|
||||||
|
* <script>
|
||||||
|
* import { truncate } from "carbon-components-svelte/actions";
|
||||||
|
* </script>
|
||||||
|
*
|
||||||
* <h1 use:truncate>...</h1>
|
* <h1 use:truncate>...</h1>
|
||||||
* <h1 use:truncate={{ clamp: "front" }}>...</h1>
|
* <h1 use:truncate={{ clamp: "front" }}>...</h1>
|
||||||
*/
|
*/
|
||||||
export function truncate(node, options = {}) {
|
export function truncate(node, params = {}) {
|
||||||
const prefix = "bx--text-truncate--";
|
const prefix = "bx--text-truncate--";
|
||||||
|
|
||||||
function toggleClass(front = false) {
|
function toggleClass(front = false) {
|
||||||
|
|
@ -17,13 +21,11 @@ export function truncate(node, options = {}) {
|
||||||
node.className = `${classes} ${prefix}${front ? "front" : "end"}`;
|
node.className = `${classes} ${prefix}${front ? "front" : "end"}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
toggleClass(options.clamp === "front");
|
toggleClass(params.clamp === "front");
|
||||||
|
|
||||||
return {
|
return {
|
||||||
update(options) {
|
update(params) {
|
||||||
toggleClass(options.clamp === "front");
|
toggleClass(params.clamp === "front");
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
export default truncate;
|
|
||||||
737
carbon.yml
737
carbon.yml
|
|
@ -1,737 +0,0 @@
|
||||||
# yaml-language-server: $schema=https://unpkg.com/@carbon-platform/schemas@v1/carbon-resources.schema.json
|
|
||||||
library:
|
|
||||||
id: carbon-components-svelte
|
|
||||||
name: Carbon Svelte
|
|
||||||
description: Build user interfaces with Carbon's core components.
|
|
||||||
externalDocsUrl: https://svelte.carbondesignsystem.com
|
|
||||||
inherits: carbon-styles
|
|
||||||
navData:
|
|
||||||
- title: Get started
|
|
||||||
path: "https://github.com/carbon-design-system/carbon-website/blob/carbon-platform/src/pages/developing/frameworks/svelte.mdx"
|
|
||||||
designKits:
|
|
||||||
carbon-white-sketch:
|
|
||||||
$ref: https://unpkg.com/@carbon-platform/resources/carbon.yml#/designKits/carbon-white-sketch
|
|
||||||
carbon-g10-sketch:
|
|
||||||
$ref: https://unpkg.com/@carbon-platform/resources/carbon.yml#/designKits/carbon-g10-sketch
|
|
||||||
carbon-g90-sketch:
|
|
||||||
$ref: https://unpkg.com/@carbon-platform/resources/carbon.yml#/designKits/carbon-g90-sketch
|
|
||||||
carbon-g100-sketch:
|
|
||||||
$ref: https://unpkg.com/@carbon-platform/resources/carbon.yml#/designKits/carbon-g100-sketch
|
|
||||||
carbon-shell-sketch:
|
|
||||||
$ref: https://unpkg.com/@carbon-platform/resources/carbon.yml#/designKits/carbon-shell-sketch
|
|
||||||
carbon-white-adobe-xd:
|
|
||||||
$ref: https://unpkg.com/@carbon-platform/resources/carbon.yml#/designKits/carbon-white-adobe-xd
|
|
||||||
carbon-g10-adobe-xd:
|
|
||||||
$ref: https://unpkg.com/@carbon-platform/resources/carbon.yml#/designKits/carbon-g10-adobe-xd
|
|
||||||
carbon-g90-adobe-xd:
|
|
||||||
$ref: https://unpkg.com/@carbon-platform/resources/carbon.yml#/designKits/carbon-g90-adobe-xd
|
|
||||||
carbon-g100-adobe-xd:
|
|
||||||
$ref: https://unpkg.com/@carbon-platform/resources/carbon.yml#/designKits/carbon-g100-adobe-xd
|
|
||||||
axure-widget-library:
|
|
||||||
$ref: https://unpkg.com/@carbon-platform/resources/carbon.yml#/designKits/axure-widget-library
|
|
||||||
text-toolbar-sketch:
|
|
||||||
$ref: https://unpkg.com/@carbon-platform/resources/carbon.yml#/designKits/text-toolbar-sketch
|
|
||||||
carbon-mid-fi-sketch:
|
|
||||||
$ref: https://unpkg.com/@carbon-platform/resources/carbon.yml#/designKits/carbon-mid-fi-sketch
|
|
||||||
carbon-wireframe-invision-freehand:
|
|
||||||
$ref: https://unpkg.com/@carbon-platform/resources/carbon.yml#/designKits/carbon-wireframe-invision-freehand
|
|
||||||
carbon-white-figma:
|
|
||||||
$ref: https://unpkg.com/@carbon-platform/resources/carbon.yml#/designKits/carbon-white-figma
|
|
||||||
carbon-g10-figma:
|
|
||||||
$ref: https://unpkg.com/@carbon-platform/resources/carbon.yml#/designKits/carbon-g10-figma
|
|
||||||
carbon-g90-figma:
|
|
||||||
$ref: https://unpkg.com/@carbon-platform/resources/carbon.yml#/designKits/carbon-g90-figma
|
|
||||||
carbon-g100-figma:
|
|
||||||
$ref: https://unpkg.com/@carbon-platform/resources/carbon.yml#/designKits/carbon-g100-figma
|
|
||||||
assets:
|
|
||||||
accordion:
|
|
||||||
status: stable
|
|
||||||
externalDocsUrl: https://www.carbondesignsystem.com/components/accordion/usage
|
|
||||||
framework: svelte
|
|
||||||
demoLinks:
|
|
||||||
- type: storybook
|
|
||||||
name: Storybook
|
|
||||||
action: link
|
|
||||||
url: https://svelte.carbondesignsystem.com/components/Accordion
|
|
||||||
aspect-ratio:
|
|
||||||
status: stable
|
|
||||||
framework: svelte
|
|
||||||
demoLinks:
|
|
||||||
- type: storybook
|
|
||||||
name: Storybook
|
|
||||||
action: link
|
|
||||||
url: https://svelte.carbondesignsystem.com/components/AspectRatio
|
|
||||||
breadcrumb:
|
|
||||||
status: stable
|
|
||||||
externalDocsUrl: https://www.carbondesignsystem.com/components/breadcrumb/usage
|
|
||||||
framework: svelte
|
|
||||||
demoLinks:
|
|
||||||
- type: storybook
|
|
||||||
name: Storybook
|
|
||||||
action: link
|
|
||||||
url: https://svelte.carbondesignsystem.com/components/Breadcrumb
|
|
||||||
breakpoint:
|
|
||||||
name: Breakpoint
|
|
||||||
status: stable
|
|
||||||
type: component
|
|
||||||
platform: web
|
|
||||||
framework: svelte
|
|
||||||
thumbnailPath: './thumbnails/breakpoint.svg'
|
|
||||||
demoLinks:
|
|
||||||
- type: storybook
|
|
||||||
name: Storybook
|
|
||||||
action: link
|
|
||||||
url: https://svelte.carbondesignsystem.com/components/Breakpoint
|
|
||||||
tags:
|
|
||||||
- shell
|
|
||||||
button:
|
|
||||||
status: stable
|
|
||||||
externalDocsUrl: https://www.carbondesignsystem.com/components/button/usage
|
|
||||||
framework: svelte
|
|
||||||
demoLinks:
|
|
||||||
- type: storybook
|
|
||||||
name: Storybook
|
|
||||||
action: link
|
|
||||||
url: https://svelte.carbondesignsystem.com/components/Button
|
|
||||||
button-set:
|
|
||||||
name: Button set
|
|
||||||
description: Buttons in a button set are juxtaposed by default.
|
|
||||||
status: stable
|
|
||||||
type: component
|
|
||||||
platform: web
|
|
||||||
framework: svelte
|
|
||||||
thumbnailPath: './thumbnails/button-set.svg'
|
|
||||||
demoLinks:
|
|
||||||
- type: storybook
|
|
||||||
name: Storybook
|
|
||||||
action: link
|
|
||||||
url: https://svelte.carbondesignsystem.com/components/ButtonSet
|
|
||||||
tags:
|
|
||||||
- input-control
|
|
||||||
checkbox:
|
|
||||||
status: stable
|
|
||||||
externalDocsUrl: https://www.carbondesignsystem.com/components/checkbox/usage
|
|
||||||
framework: svelte
|
|
||||||
demoLinks:
|
|
||||||
- type: storybook
|
|
||||||
name: Storybook
|
|
||||||
action: link
|
|
||||||
url: https://svelte.carbondesignsystem.com/components/Checkbox
|
|
||||||
clickable-tile:
|
|
||||||
name: Clickable tile
|
|
||||||
status: stable
|
|
||||||
type: component
|
|
||||||
platform: web
|
|
||||||
framework: svelte
|
|
||||||
thumbnailPath: './thumbnails/clickable-tile.svg'
|
|
||||||
demoLinks:
|
|
||||||
- type: storybook
|
|
||||||
name: Storybook
|
|
||||||
action: link
|
|
||||||
url: https://svelte.carbondesignsystem.com/components/ClickableTile
|
|
||||||
tags:
|
|
||||||
- contextual-navigation
|
|
||||||
code-snippet:
|
|
||||||
status: stable
|
|
||||||
externalDocsUrl: https://www.carbondesignsystem.com/components/code-snippet/usage
|
|
||||||
framework: svelte
|
|
||||||
demoLinks:
|
|
||||||
- type: storybook
|
|
||||||
name: Storybook
|
|
||||||
action: link
|
|
||||||
url: https://svelte.carbondesignsystem.com/components/CodeSnippet
|
|
||||||
combo-box:
|
|
||||||
status: stable
|
|
||||||
framework: svelte
|
|
||||||
demoLinks:
|
|
||||||
- type: storybook
|
|
||||||
name: Storybook
|
|
||||||
action: link
|
|
||||||
url: https://svelte.carbondesignsystem.com/components/ComboBox
|
|
||||||
composed-modal:
|
|
||||||
name: Composed modal
|
|
||||||
status: stable
|
|
||||||
type: component
|
|
||||||
platform: web
|
|
||||||
framework: svelte
|
|
||||||
thumbnailPath: './thumbnails/composed-modal.svg'
|
|
||||||
demoLinks:
|
|
||||||
- type: storybook
|
|
||||||
name: Storybook
|
|
||||||
action: link
|
|
||||||
url: https://svelte.carbondesignsystem.com/components/ComposedModal
|
|
||||||
tags:
|
|
||||||
- input-control
|
|
||||||
content-switcher:
|
|
||||||
status: stable
|
|
||||||
externalDocsUrl: https://www.carbondesignsystem.com/components/content-switcher/usage
|
|
||||||
framework: svelte
|
|
||||||
demoLinks:
|
|
||||||
- type: storybook
|
|
||||||
name: Storybook
|
|
||||||
action: link
|
|
||||||
url: https://svelte.carbondesignsystem.com/components/ContentSwitcher
|
|
||||||
context-menu:
|
|
||||||
name: Context menu
|
|
||||||
status: stable
|
|
||||||
type: component
|
|
||||||
platform: web
|
|
||||||
framework: svelte
|
|
||||||
thumbnailPath: './thumbnails/context-menu.svg'
|
|
||||||
demoLinks:
|
|
||||||
- type: storybook
|
|
||||||
name: Storybook
|
|
||||||
action: link
|
|
||||||
url: https://svelte.carbondesignsystem.com/components/ContextMenu
|
|
||||||
tags:
|
|
||||||
- input-control
|
|
||||||
- contextual-navigation
|
|
||||||
copy-button:
|
|
||||||
status: stable
|
|
||||||
framework: svelte
|
|
||||||
demoLinks:
|
|
||||||
- type: storybook
|
|
||||||
name: Storybook
|
|
||||||
action: link
|
|
||||||
url: https://svelte.carbondesignsystem.com/components/CopyButton
|
|
||||||
data-table:
|
|
||||||
status: stable
|
|
||||||
framework: svelte
|
|
||||||
externalDocsUrl: https://www.carbondesignsystem.com/components/data-table/usage
|
|
||||||
demoLinks:
|
|
||||||
- type: storybook
|
|
||||||
name: Storybook
|
|
||||||
action: link
|
|
||||||
url: https://svelte.carbondesignsystem.com/components/DataTable
|
|
||||||
date-picker:
|
|
||||||
status: stable
|
|
||||||
framework: svelte
|
|
||||||
externalDocsUrl: https://www.carbondesignsystem.com/components/date-picker/usage
|
|
||||||
demoLinks:
|
|
||||||
- type: storybook
|
|
||||||
name: Storybook
|
|
||||||
action: link
|
|
||||||
url: https://svelte.carbondesignsystem.com/components/DatePicker
|
|
||||||
definition-tooltip:
|
|
||||||
status: stable
|
|
||||||
framework: svelte
|
|
||||||
demoLinks:
|
|
||||||
- type: storybook
|
|
||||||
name: Storybook
|
|
||||||
action: link
|
|
||||||
url: https://svelte.carbondesignsystem.com/components/TooltipDefinition
|
|
||||||
dropdown:
|
|
||||||
status: stable
|
|
||||||
framework: svelte
|
|
||||||
externalDocsUrl: https://www.carbondesignsystem.com/components/dropdown/usage
|
|
||||||
demoLinks:
|
|
||||||
- type: storybook
|
|
||||||
name: Storybook
|
|
||||||
action: link
|
|
||||||
url: https://svelte.carbondesignsystem.com/components/Dropdown
|
|
||||||
expandable-tile:
|
|
||||||
name: Expandable tile
|
|
||||||
status: stable
|
|
||||||
type: component
|
|
||||||
platform: web
|
|
||||||
framework: svelte
|
|
||||||
thumbnailPath: './thumbnails/expandable-tile.svg'
|
|
||||||
demoLinks:
|
|
||||||
- type: storybook
|
|
||||||
name: Storybook
|
|
||||||
action: link
|
|
||||||
url: https://svelte.carbondesignsystem.com/components/ExpandableTile
|
|
||||||
tags:
|
|
||||||
- data-display
|
|
||||||
- content-element
|
|
||||||
file-uploader:
|
|
||||||
status: stable
|
|
||||||
framework: svelte
|
|
||||||
externalDocsUrl: https://www.carbondesignsystem.com/components/file-uploader/usage
|
|
||||||
demoLinks:
|
|
||||||
- type: storybook
|
|
||||||
name: Storybook
|
|
||||||
action: link
|
|
||||||
url: https://svelte.carbondesignsystem.com/components/FileUploader
|
|
||||||
fluid-form:
|
|
||||||
name: Fluid form
|
|
||||||
status: stable
|
|
||||||
type: component
|
|
||||||
platform: web
|
|
||||||
framework: svelte
|
|
||||||
thumbnailPath: './thumbnails/fluid-form.svg'
|
|
||||||
demoLinks:
|
|
||||||
- type: storybook
|
|
||||||
name: Storybook
|
|
||||||
action: link
|
|
||||||
url: https://svelte.carbondesignsystem.com/components/FluidForm
|
|
||||||
tags:
|
|
||||||
- form
|
|
||||||
form:
|
|
||||||
status: stable
|
|
||||||
framework: svelte
|
|
||||||
externalDocsUrl: https://www.carbondesignsystem.com/components/form/usage
|
|
||||||
demoLinks:
|
|
||||||
- type: storybook
|
|
||||||
name: Storybook
|
|
||||||
action: link
|
|
||||||
url: https://svelte.carbondesignsystem.com/components/Form
|
|
||||||
grid:
|
|
||||||
status: stable
|
|
||||||
framework: svelte
|
|
||||||
demoLinks:
|
|
||||||
- type: storybook
|
|
||||||
name: Storybook
|
|
||||||
action: link
|
|
||||||
url: https://svelte.carbondesignsystem.com/components/Grid
|
|
||||||
image-loader:
|
|
||||||
name: Image loader
|
|
||||||
status: stable
|
|
||||||
type: component
|
|
||||||
platform: web
|
|
||||||
framework: svelte
|
|
||||||
thumbnailPath: './thumbnails/image-loader.svg'
|
|
||||||
demoLinks:
|
|
||||||
- type: storybook
|
|
||||||
name: Storybook
|
|
||||||
action: link
|
|
||||||
url: https://svelte.carbondesignsystem.com/components/ImageLoader
|
|
||||||
tags:
|
|
||||||
- shell
|
|
||||||
- media
|
|
||||||
- media
|
|
||||||
inline-loading:
|
|
||||||
status: stable
|
|
||||||
framework: svelte
|
|
||||||
externalDocsUrl: https://www.carbondesignsystem.com/components/inline-loading/usage
|
|
||||||
demoLinks:
|
|
||||||
- type: storybook
|
|
||||||
name: Storybook
|
|
||||||
action: link
|
|
||||||
url: https://svelte.carbondesignsystem.com/components/InlineLoading
|
|
||||||
inline-notification:
|
|
||||||
name: Inline notification
|
|
||||||
status: stable
|
|
||||||
type: component
|
|
||||||
platform: web
|
|
||||||
framework: svelte
|
|
||||||
thumbnailPath: './thumbnails/inline-notification.svg'
|
|
||||||
demoLinks:
|
|
||||||
- type: storybook
|
|
||||||
name: Storybook
|
|
||||||
action: link
|
|
||||||
url: https://svelte.carbondesignsystem.com/components/InlineNotification
|
|
||||||
tags:
|
|
||||||
- system-feedback
|
|
||||||
link:
|
|
||||||
status: stable
|
|
||||||
framework: svelte
|
|
||||||
externalDocsUrl: https://www.carbondesignsystem.com/components/link/usage
|
|
||||||
demoLinks:
|
|
||||||
- type: storybook
|
|
||||||
name: Storybook
|
|
||||||
action: link
|
|
||||||
url: https://svelte.carbondesignsystem.com/components/Link
|
|
||||||
loading:
|
|
||||||
status: stable
|
|
||||||
framework: svelte
|
|
||||||
externalDocsUrl: https://www.carbondesignsystem.com/components/loading/usage
|
|
||||||
demoLinks:
|
|
||||||
- type: storybook
|
|
||||||
name: Storybook
|
|
||||||
action: link
|
|
||||||
url: https://svelte.carbondesignsystem.com/components/Loading
|
|
||||||
local-storage:
|
|
||||||
name: Local storage
|
|
||||||
status: stable
|
|
||||||
type: component
|
|
||||||
platform: web
|
|
||||||
framework: svelte
|
|
||||||
thumbnailPath: './thumbnails/local-storage.svg'
|
|
||||||
demoLinks:
|
|
||||||
- type: storybook
|
|
||||||
name: Storybook
|
|
||||||
action: link
|
|
||||||
url: https://svelte.carbondesignsystem.com/components/LocalStorage
|
|
||||||
tags:
|
|
||||||
- input-control
|
|
||||||
modal:
|
|
||||||
status: stable
|
|
||||||
framework: svelte
|
|
||||||
externalDocsUrl: https://www.carbondesignsystem.com/components/modal/usage
|
|
||||||
demoLinks:
|
|
||||||
- type: storybook
|
|
||||||
name: Storybook
|
|
||||||
action: link
|
|
||||||
url: https://svelte.carbondesignsystem.com/components/Modal
|
|
||||||
multiselect:
|
|
||||||
status: stable
|
|
||||||
framework: svelte
|
|
||||||
externalDocsUrl: https://www.carbondesignsystem.com/components/dropdown/usage/#multiselect
|
|
||||||
demoLinks:
|
|
||||||
- type: storybook
|
|
||||||
name: Storybook
|
|
||||||
action: link
|
|
||||||
url: https://svelte.carbondesignsystem.com/components/MultiSelect
|
|
||||||
number-input:
|
|
||||||
status: stable
|
|
||||||
framework: svelte
|
|
||||||
externalDocsUrl: https://www.carbondesignsystem.com/components/number-input/usage
|
|
||||||
demoLinks:
|
|
||||||
- type: storybook
|
|
||||||
name: Storybook
|
|
||||||
action: link
|
|
||||||
url: https://svelte.carbondesignsystem.com/components/NumberInput
|
|
||||||
ordered-list:
|
|
||||||
name: Ordered list
|
|
||||||
status: stable
|
|
||||||
type: component
|
|
||||||
platform: web
|
|
||||||
framework: svelte
|
|
||||||
thumbnailPath: './thumbnails/ordered-list.svg'
|
|
||||||
demoLinks:
|
|
||||||
- type: storybook
|
|
||||||
name: Storybook
|
|
||||||
action: link
|
|
||||||
url: https://svelte.carbondesignsystem.com/components/OrderedList
|
|
||||||
tags:
|
|
||||||
- data-display
|
|
||||||
overflow-menu:
|
|
||||||
name: Overflow menu
|
|
||||||
status: stable
|
|
||||||
type: component
|
|
||||||
platform: web
|
|
||||||
framework: svelte
|
|
||||||
thumbnailPath: ''
|
|
||||||
demoLinks:
|
|
||||||
- type: storybook
|
|
||||||
name: Storybook
|
|
||||||
action: link
|
|
||||||
url: https://svelte.carbondesignsystem.com/components/OverflowMenu
|
|
||||||
tags:
|
|
||||||
- input-control
|
|
||||||
pagination:
|
|
||||||
status: stable
|
|
||||||
framework: svelte
|
|
||||||
externalDocsUrl: https://www.carbondesignsystem.com/components/pagination/usage
|
|
||||||
demoLinks:
|
|
||||||
- type: storybook
|
|
||||||
name: Storybook
|
|
||||||
action: link
|
|
||||||
url: https://svelte.carbondesignsystem.com/components/Pagination
|
|
||||||
pagination-nav:
|
|
||||||
status: stable
|
|
||||||
framework: svelte
|
|
||||||
demoLinks:
|
|
||||||
- type: storybook
|
|
||||||
name: Storybook
|
|
||||||
action: link
|
|
||||||
url: https://svelte.carbondesignsystem.com/components/PaginationNav
|
|
||||||
password-input:
|
|
||||||
name: Password input
|
|
||||||
status: stable
|
|
||||||
type: component
|
|
||||||
platform: web
|
|
||||||
framework: svelte
|
|
||||||
thumbnailPath: './thumbnails/password-input.svg'
|
|
||||||
demoLinks:
|
|
||||||
- type: storybook
|
|
||||||
name: Storybook
|
|
||||||
action: link
|
|
||||||
url: https://svelte.carbondesignsystem.com/components/PasswordInput
|
|
||||||
tags:
|
|
||||||
- form
|
|
||||||
- contextual-navigation
|
|
||||||
popover:
|
|
||||||
status: stable
|
|
||||||
framework: svelte
|
|
||||||
demoLinks:
|
|
||||||
- type: storybook
|
|
||||||
name: Storybook
|
|
||||||
action: link
|
|
||||||
url: https://svelte.carbondesignsystem.com/components/Popover
|
|
||||||
progress-bar:
|
|
||||||
status: stable
|
|
||||||
framework: svelte
|
|
||||||
externalDocsUrl: https://www.carbondesignsystem.com/components/progress-bar/usage
|
|
||||||
demoLinks:
|
|
||||||
- type: storybook
|
|
||||||
name: Storybook
|
|
||||||
action: link
|
|
||||||
url: https://svelte.carbondesignsystem.com/components/ProgressBar
|
|
||||||
progress-indicator:
|
|
||||||
status: stable
|
|
||||||
framework: svelte
|
|
||||||
externalDocsUrl: https://www.carbondesignsystem.com/components/progress-indicator/usage
|
|
||||||
demoLinks:
|
|
||||||
- type: storybook
|
|
||||||
name: Storybook
|
|
||||||
action: link
|
|
||||||
url: https://svelte.carbondesignsystem.com/components/ProgressIndicator
|
|
||||||
radio-button:
|
|
||||||
status: stable
|
|
||||||
framework: svelte
|
|
||||||
externalDocsUrl: https://www.carbondesignsystem.com/components/radio-button/usage
|
|
||||||
demoLinks:
|
|
||||||
- type: storybook
|
|
||||||
name: Storybook
|
|
||||||
action: link
|
|
||||||
url: https://svelte.carbondesignsystem.com/components/RadioButton
|
|
||||||
radio-tile:
|
|
||||||
name: Radio tile
|
|
||||||
status: stable
|
|
||||||
type: component
|
|
||||||
platform: web
|
|
||||||
framework: svelte
|
|
||||||
thumbnailPath: './thumbnails/radio-tile.svg'
|
|
||||||
demoLinks:
|
|
||||||
- type: storybook
|
|
||||||
name: Storybook
|
|
||||||
action: link
|
|
||||||
url: https://svelte.carbondesignsystem.com/components/RadioTile
|
|
||||||
tags:
|
|
||||||
- input-control
|
|
||||||
recursive-list:
|
|
||||||
name: Recursive list
|
|
||||||
status: stable
|
|
||||||
type: component
|
|
||||||
platform: web
|
|
||||||
framework: svelte
|
|
||||||
thumbnailPath: './thumbnails/recursive-list.svg'
|
|
||||||
demoLinks:
|
|
||||||
- type: storybook
|
|
||||||
name: Storybook
|
|
||||||
action: link
|
|
||||||
url: https://svelte.carbondesignsystem.com/components/RecursiveList
|
|
||||||
tags:
|
|
||||||
- data-display
|
|
||||||
search:
|
|
||||||
status: stable
|
|
||||||
framework: svelte
|
|
||||||
externalDocsUrl: https://www.carbondesignsystem.com/components/search/usage
|
|
||||||
demoLinks:
|
|
||||||
- type: storybook
|
|
||||||
name: Storybook
|
|
||||||
action: link
|
|
||||||
url: https://svelte.carbondesignsystem.com/components/Search
|
|
||||||
select:
|
|
||||||
status: stable
|
|
||||||
framework: svelte
|
|
||||||
externalDocsUrl: https://www.carbondesignsystem.com/components/select/usage
|
|
||||||
demoLinks:
|
|
||||||
- type: storybook
|
|
||||||
name: Storybook
|
|
||||||
action: link
|
|
||||||
url: https://svelte.carbondesignsystem.com/components/Select
|
|
||||||
selectable-tile:
|
|
||||||
name: Selectable tile
|
|
||||||
status: stable
|
|
||||||
type: component
|
|
||||||
platform: web
|
|
||||||
framework: svelte
|
|
||||||
thumbnailPath: './thumbnails/selectable-tile.svg'
|
|
||||||
demoLinks:
|
|
||||||
- type: storybook
|
|
||||||
name: Storybook
|
|
||||||
action: link
|
|
||||||
url: https://svelte.carbondesignsystem.com/components/SelectableTile
|
|
||||||
tags:
|
|
||||||
- input-control
|
|
||||||
skeleton-placeholder:
|
|
||||||
name: Skeleton placeholder
|
|
||||||
status: stable
|
|
||||||
type: component
|
|
||||||
platform: web
|
|
||||||
framework: svelte
|
|
||||||
thumbnailPath: './thumbnails/skeleton-placeholder.svg'
|
|
||||||
demoLinks:
|
|
||||||
- type: storybook
|
|
||||||
name: Storybook
|
|
||||||
action: link
|
|
||||||
url: https://svelte.carbondesignsystem.com/components/SkeletonPlaceholder
|
|
||||||
tags:
|
|
||||||
- system-feedback
|
|
||||||
skeleton-text:
|
|
||||||
name: Skeleton text
|
|
||||||
status: stable
|
|
||||||
type: component
|
|
||||||
platform: web
|
|
||||||
framework: svelte
|
|
||||||
thumbnailPath: './thumbnails/skeleton-text.svg'
|
|
||||||
demoLinks:
|
|
||||||
- type: storybook
|
|
||||||
name: Storybook
|
|
||||||
action: link
|
|
||||||
url: https://svelte.carbondesignsystem.com/components/SkeletonText
|
|
||||||
tags:
|
|
||||||
- shell
|
|
||||||
slider:
|
|
||||||
status: stable
|
|
||||||
framework: svelte
|
|
||||||
externalDocsUrl: https://www.carbondesignsystem.com/components/slider/usage
|
|
||||||
demoLinks:
|
|
||||||
- type: storybook
|
|
||||||
name: Storybook
|
|
||||||
action: link
|
|
||||||
url: https://svelte.carbondesignsystem.com/components/Slider
|
|
||||||
structured-list:
|
|
||||||
status: stable
|
|
||||||
framework: svelte
|
|
||||||
externalDocsUrl: https://www.carbondesignsystem.com/components/structured-list/usage
|
|
||||||
demoLinks:
|
|
||||||
- type: storybook
|
|
||||||
name: Storybook
|
|
||||||
action: link
|
|
||||||
url: https://svelte.carbondesignsystem.com/components/StructuredList
|
|
||||||
tabs:
|
|
||||||
status: stable
|
|
||||||
framework: svelte
|
|
||||||
externalDocsUrl: https://www.carbondesignsystem.com/components/tabs/usage
|
|
||||||
demoLinks:
|
|
||||||
- type: storybook
|
|
||||||
name: Storybook
|
|
||||||
action: link
|
|
||||||
url: https://svelte.carbondesignsystem.com/components/Tabs
|
|
||||||
tag:
|
|
||||||
status: stable
|
|
||||||
framework: svelte
|
|
||||||
externalDocsUrl: https://www.carbondesignsystem.com/components/tag/usage
|
|
||||||
demoLinks:
|
|
||||||
- type: storybook
|
|
||||||
name: Storybook
|
|
||||||
action: link
|
|
||||||
url: https://svelte.carbondesignsystem.com/components/Tag
|
|
||||||
text-area:
|
|
||||||
status: stable
|
|
||||||
framework: svelte
|
|
||||||
demoLinks:
|
|
||||||
- type: storybook
|
|
||||||
name: Storybook
|
|
||||||
action: link
|
|
||||||
url: https://svelte.carbondesignsystem.com/components/TextArea
|
|
||||||
text-input:
|
|
||||||
status: stable
|
|
||||||
framework: svelte
|
|
||||||
externalDocsUrl: https://www.carbondesignsystem.com/components/text-input/usage
|
|
||||||
demoLinks:
|
|
||||||
- type: storybook
|
|
||||||
name: Storybook
|
|
||||||
action: link
|
|
||||||
url: https://svelte.carbondesignsystem.com/components/TextInput
|
|
||||||
theme:
|
|
||||||
status: stable
|
|
||||||
framework: svelte
|
|
||||||
demoLinks:
|
|
||||||
- type: storybook
|
|
||||||
name: Storybook
|
|
||||||
action: link
|
|
||||||
url: https://svelte.carbondesignsystem.com/components/Theme
|
|
||||||
tile:
|
|
||||||
status: stable
|
|
||||||
framework: svelte
|
|
||||||
externalDocsUrl: https://www.carbondesignsystem.com/components/tile/usage
|
|
||||||
demoLinks:
|
|
||||||
- type: storybook
|
|
||||||
name: Storybook
|
|
||||||
action: link
|
|
||||||
url: https://svelte.carbondesignsystem.com/components/Tile
|
|
||||||
time-picker:
|
|
||||||
status: stable
|
|
||||||
framework: svelte
|
|
||||||
demoLinks:
|
|
||||||
- type: storybook
|
|
||||||
name: Storybook
|
|
||||||
action: link
|
|
||||||
url: https://svelte.carbondesignsystem.com/components/TimePicker
|
|
||||||
toast-notification:
|
|
||||||
name: Toast notification
|
|
||||||
status: stable
|
|
||||||
type: component
|
|
||||||
platform: web
|
|
||||||
framework: svelte
|
|
||||||
thumbnailPath: './thumbnails/toast-notification.svg'
|
|
||||||
demoLinks:
|
|
||||||
- type: storybook
|
|
||||||
name: Storybook
|
|
||||||
action: link
|
|
||||||
url: https://svelte.carbondesignsystem.com/components/ToastNotification
|
|
||||||
tags:
|
|
||||||
- input-control
|
|
||||||
toggle:
|
|
||||||
status: stable
|
|
||||||
framework: svelte
|
|
||||||
externalDocsUrl: https://www.carbondesignsystem.com/components/toggle/usage
|
|
||||||
demoLinks:
|
|
||||||
- type: storybook
|
|
||||||
name: Storybook
|
|
||||||
action: link
|
|
||||||
url: https://svelte.carbondesignsystem.com/components/Toggle
|
|
||||||
tooltip:
|
|
||||||
status: stable
|
|
||||||
framework: svelte
|
|
||||||
externalDocsUrl: https://www.carbondesignsystem.com/components/tooltip/usage
|
|
||||||
demoLinks:
|
|
||||||
- type: storybook
|
|
||||||
name: Storybook
|
|
||||||
action: link
|
|
||||||
url: https://svelte.carbondesignsystem.com/components/Tooltip
|
|
||||||
tooltip-icon:
|
|
||||||
name: Tootlip icon
|
|
||||||
status: stable
|
|
||||||
type: component
|
|
||||||
platform: web
|
|
||||||
framework: svelte
|
|
||||||
thumbnailPath: './thumbnails/tooltip-icon.svg'
|
|
||||||
demoLinks:
|
|
||||||
- type: storybook
|
|
||||||
name: Storybook
|
|
||||||
action: link
|
|
||||||
url: https://svelte.carbondesignsystem.com/components/TooltipIcon
|
|
||||||
tags:
|
|
||||||
- content-element
|
|
||||||
tree-view:
|
|
||||||
status: stable
|
|
||||||
framework: svelte
|
|
||||||
demoLinks:
|
|
||||||
- type: storybook
|
|
||||||
name: Storybook
|
|
||||||
action: link
|
|
||||||
url: https://svelte.carbondesignsystem.com/components/TreeView
|
|
||||||
truncate:
|
|
||||||
name: Truncate
|
|
||||||
status: stable
|
|
||||||
type: component
|
|
||||||
platform: web
|
|
||||||
framework: svelte
|
|
||||||
thumbnailPath: './thumbnails/truncate.svg'
|
|
||||||
demoLinks:
|
|
||||||
- type: storybook
|
|
||||||
name: Storybook
|
|
||||||
action: link
|
|
||||||
url: https://svelte.carbondesignsystem.com/components/Truncate
|
|
||||||
tags:
|
|
||||||
- data-display
|
|
||||||
ui-shell-header:
|
|
||||||
status: stable
|
|
||||||
framework: svelte
|
|
||||||
externalDocsUrl: https://www.carbondesignsystem.com/components/UI-shell-header/usage
|
|
||||||
demoLinks:
|
|
||||||
- type: storybook
|
|
||||||
name: Storybook
|
|
||||||
action: link
|
|
||||||
url: https://svelte.carbondesignsystem.com/components/UIShell
|
|
||||||
unordered-list:
|
|
||||||
name: Unordered list
|
|
||||||
status: stable
|
|
||||||
type: component
|
|
||||||
platform: web
|
|
||||||
framework: svelte
|
|
||||||
thumbnailPath: './thumbnails/unordered-list.svg'
|
|
||||||
demoLinks:
|
|
||||||
- type: storybook
|
|
||||||
name: Storybook
|
|
||||||
action: link
|
|
||||||
url: https://svelte.carbondesignsystem.com/components/UnorderedList
|
|
||||||
tags:
|
|
||||||
- data-display
|
|
||||||
|
|
||||||
|
|
@ -1,325 +0,0 @@
|
||||||
// This file is inlined from `carbon-components@10.47` as
|
|
||||||
// Popover styles were removed since version 10.48.
|
|
||||||
|
|
||||||
//
|
|
||||||
// Copyright IBM Corp. 2016, 2018
|
|
||||||
//
|
|
||||||
// This source code is licensed under the Apache-2.0 license found in the
|
|
||||||
// LICENSE file in the root directory of this source tree.
|
|
||||||
//
|
|
||||||
|
|
||||||
@import 'carbon-components/scss/globals/scss/vars';
|
|
||||||
@import 'carbon-components/scss/globals/scss/helper-mixins';
|
|
||||||
@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
|
|
||||||
|
|
||||||
/// Popover component
|
|
||||||
/// @access private
|
|
||||||
/// @group components
|
|
||||||
@mixin popover {
|
|
||||||
$popover-text-color: $text-01;
|
|
||||||
$popover-caret-offset: 1rem;
|
|
||||||
$popover-offset: 8px;
|
|
||||||
|
|
||||||
.#{$prefix}--popover {
|
|
||||||
// Specify the distance between the popover and the trigger. This value must
|
|
||||||
// have a unit otherwise the `calc()` expression will not work
|
|
||||||
// stylelint-disable-next-line length-zero-no-unit
|
|
||||||
--cds-popover-offset: 0rem;
|
|
||||||
|
|
||||||
// Specify the distance that the caret should be offset from the side of the
|
|
||||||
// popover when not centered
|
|
||||||
--cds-popover-caret-offset: 1rem;
|
|
||||||
|
|
||||||
position: absolute;
|
|
||||||
z-index: z('floating');
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
// We use a pseudo element inside of the popover to create a space between the
|
|
||||||
// target and the popover. This helps in situations like tooltips where you do
|
|
||||||
// not want the tooltip to disappear when the user moves from the target to
|
|
||||||
// the popover.
|
|
||||||
.#{$prefix}--popover::before {
|
|
||||||
position: absolute;
|
|
||||||
display: block;
|
|
||||||
content: '';
|
|
||||||
}
|
|
||||||
|
|
||||||
.#{$prefix}--popover--open {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.#{$prefix}--popover-contents {
|
|
||||||
@include box-shadow;
|
|
||||||
|
|
||||||
position: relative;
|
|
||||||
width: max-content;
|
|
||||||
max-width: rem(368px);
|
|
||||||
background-color: $ui-01;
|
|
||||||
border-radius: 2px;
|
|
||||||
color: $popover-text-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.#{$prefix}--popover--light .#{$prefix}--popover-contents {
|
|
||||||
background-color: $ui-background;
|
|
||||||
}
|
|
||||||
|
|
||||||
.#{$prefix}--popover--high-contrast .#{$prefix}--popover-contents {
|
|
||||||
background-color: $inverse-02;
|
|
||||||
color: $inverse-01;
|
|
||||||
}
|
|
||||||
|
|
||||||
.#{$prefix}--popover--caret {
|
|
||||||
--cds-popover-offset: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.#{$prefix}--popover--caret .#{$prefix}--popover-contents::before,
|
|
||||||
.#{$prefix}--popover--caret .#{$prefix}--popover-contents::after {
|
|
||||||
position: absolute;
|
|
||||||
display: inline-block;
|
|
||||||
width: rem(8px);
|
|
||||||
height: rem(8px);
|
|
||||||
background-color: inherit;
|
|
||||||
content: '';
|
|
||||||
}
|
|
||||||
|
|
||||||
.#{$prefix}--popover--caret .#{$prefix}--popover-contents::before {
|
|
||||||
z-index: -1;
|
|
||||||
box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
// The popover's tooltip is created by drawing two 8px x 8px boxes, one for
|
|
||||||
// rendering the box-shadow that the popover content uses and another for
|
|
||||||
// layering on top of this box to create an effect of a popover caret with a
|
|
||||||
// box-shadow. The layer with the box-shadow is rendered behind the popover
|
|
||||||
// content, while the other is rendered above of the popover content.
|
|
||||||
|
|
||||||
//-----------------------------------------------------------------------------
|
|
||||||
// Bottom
|
|
||||||
//-----------------------------------------------------------------------------
|
|
||||||
.#{$prefix}--popover--bottom {
|
|
||||||
bottom: 0;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, calc(100% + var(--cds-popover-offset)));
|
|
||||||
}
|
|
||||||
|
|
||||||
@include place-caret(bottom) {
|
|
||||||
top: 0;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%) rotate(45deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Bottom left
|
|
||||||
.#{$prefix}--popover--bottom-left {
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
transform: translateY(calc(100% + var(--cds-popover-offset)));
|
|
||||||
}
|
|
||||||
|
|
||||||
@include place-caret(bottom-left) {
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
transform: translate(var(--cds-popover-caret-offset), -50%) rotate(45deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Bottom right
|
|
||||||
.#{$prefix}--popover--bottom-right {
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
transform: translateY(calc(100% + var(--cds-popover-offset)));
|
|
||||||
}
|
|
||||||
|
|
||||||
@include place-caret(bottom-right) {
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
transform: translate(calc(-1 * var(--cds-popover-caret-offset)), -50%)
|
|
||||||
rotate(45deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Hover area
|
|
||||||
.#{$prefix}--popover--bottom.#{$prefix}--popover::before,
|
|
||||||
.#{$prefix}--popover--bottom-left.#{$prefix}--popover::before,
|
|
||||||
.#{$prefix}--popover--bottom-right.#{$prefix}--popover::before {
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
left: 0;
|
|
||||||
height: var(--cds-popover-offset);
|
|
||||||
transform: translateY(-100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
//-----------------------------------------------------------------------------
|
|
||||||
// TOP
|
|
||||||
//-----------------------------------------------------------------------------
|
|
||||||
.#{$prefix}--popover--top {
|
|
||||||
bottom: 100%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, calc(-1 * var(--cds-popover-offset)));
|
|
||||||
}
|
|
||||||
|
|
||||||
@include place-caret(top) {
|
|
||||||
bottom: 0;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, 50%) rotate(45deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Top left
|
|
||||||
.#{$prefix}--popover--top-left {
|
|
||||||
bottom: 100%;
|
|
||||||
left: 0;
|
|
||||||
transform: translateY(calc(-1 * var(--cds-popover-offset)));
|
|
||||||
}
|
|
||||||
|
|
||||||
@include place-caret(top-left) {
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
transform: translate(var(--cds-popover-caret-offset), 50%) rotate(45deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Top right
|
|
||||||
.#{$prefix}--popover--top-right {
|
|
||||||
right: 0;
|
|
||||||
bottom: 100%;
|
|
||||||
transform: translateY(calc(-1 * var(--cds-popover-offset)));
|
|
||||||
}
|
|
||||||
|
|
||||||
@include place-caret(top-right) {
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
transform: translate(calc(-1 * var(--cds-popover-caret-offset)), 50%)
|
|
||||||
rotate(45deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Hover area
|
|
||||||
.#{$prefix}--popover--top.#{$prefix}--popover::before,
|
|
||||||
.#{$prefix}--popover--top-left.#{$prefix}--popover::before,
|
|
||||||
.#{$prefix}--popover--top-right.#{$prefix}--popover::before {
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
height: var(--cds-popover-offset);
|
|
||||||
transform: translateY(100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
//-----------------------------------------------------------------------------
|
|
||||||
// Right
|
|
||||||
//-----------------------------------------------------------------------------
|
|
||||||
.#{$prefix}--popover--right {
|
|
||||||
top: 50%;
|
|
||||||
left: 100%;
|
|
||||||
transform: translate(var(--cds-popover-offset), -50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
@include place-caret(right) {
|
|
||||||
top: 50%;
|
|
||||||
left: 0;
|
|
||||||
transform: translate(-50%, -50%) rotate(45deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Right top
|
|
||||||
.#{$prefix}--popover--right-top {
|
|
||||||
top: 0;
|
|
||||||
left: 100%;
|
|
||||||
transform: translateX($popover-offset);
|
|
||||||
}
|
|
||||||
|
|
||||||
@include place-caret(right-top) {
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
transform: translate(-50%, var(--cds-popover-caret-offset)) rotate(45deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Right bottom
|
|
||||||
.#{$prefix}--popover--right-bottom {
|
|
||||||
bottom: 0;
|
|
||||||
left: 100%;
|
|
||||||
transform: translateX(var(--cds-popover-offset));
|
|
||||||
}
|
|
||||||
|
|
||||||
@include place-caret(right-bottom) {
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
transform: translate(-50%, calc(-1 * var(--cds-popover-caret-offset)))
|
|
||||||
rotate(45deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Hover area
|
|
||||||
.#{$prefix}--popover--right.#{$prefix}--popover::before,
|
|
||||||
.#{$prefix}--popover--right-top.#{$prefix}--popover::before,
|
|
||||||
.#{$prefix}--popover--right-bottom.#{$prefix}--popover::before {
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
width: var(--cds-popover-offset);
|
|
||||||
transform: translateX(-100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
//-----------------------------------------------------------------------------
|
|
||||||
// Left
|
|
||||||
//-----------------------------------------------------------------------------
|
|
||||||
.#{$prefix}--popover--left {
|
|
||||||
top: 50%;
|
|
||||||
right: 100%;
|
|
||||||
transform: translate(calc(-1 * var(--cds-popover-offset)), -50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
@include place-caret(left) {
|
|
||||||
top: 50%;
|
|
||||||
right: 0;
|
|
||||||
transform: translate(50%, -50%) rotate(45deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Left top
|
|
||||||
.#{$prefix}--popover--left-top {
|
|
||||||
top: 0;
|
|
||||||
right: 100%;
|
|
||||||
transform: translateX(calc(-1 * var(--cds-popover-offset)));
|
|
||||||
}
|
|
||||||
|
|
||||||
@include place-caret(left-top) {
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
transform: translate(50%, var(--cds-popover-caret-offset)) rotate(45deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Left bottom
|
|
||||||
.#{$prefix}--popover--left-bottom {
|
|
||||||
right: 100%;
|
|
||||||
bottom: 0;
|
|
||||||
transform: translateX(calc(-1 * var(--cds-popover-offset)));
|
|
||||||
}
|
|
||||||
|
|
||||||
@include place-caret(left-bottom) {
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
transform: translate(50%, calc(-1 * var(--cds-popover-caret-offset)))
|
|
||||||
rotate(45deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Hover area
|
|
||||||
.#{$prefix}--popover--left.#{$prefix}--popover::before,
|
|
||||||
.#{$prefix}--popover--left-top.#{$prefix}--popover::before,
|
|
||||||
.#{$prefix}--popover--left-bottom.#{$prefix}--popover::before {
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
width: var(--cds-popover-offset);
|
|
||||||
transform: translateX(100%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/// Helper for placing the caret inside a popover. The selectors here can get
|
|
||||||
/// distracting in the main stylesheet, but ultimately they target the ::before
|
|
||||||
/// and ::after pseudo-elements for the given direction. The @content block
|
|
||||||
/// passed in should appropriately position the caret for the given direction.
|
|
||||||
@mixin place-caret($direction) {
|
|
||||||
.#{$prefix}--popover--caret.#{$prefix}--popover--#{$direction}
|
|
||||||
.#{$prefix}--popover-contents::before,
|
|
||||||
.#{$prefix}--popover--caret.#{$prefix}--popover--#{$direction}
|
|
||||||
.#{$prefix}--popover-contents::after {
|
|
||||||
@content;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include exports('popover') {
|
|
||||||
@include popover;
|
|
||||||
}
|
|
||||||
File diff suppressed because one or more lines are too long
10
css/all.scss
10
css/all.scss
|
|
@ -22,7 +22,6 @@ $css--plex: true;
|
||||||
@import "carbon-components/src/components/tag/tag";
|
@import "carbon-components/src/components/tag/tag";
|
||||||
@import "carbon-components/src/components/notification/inline-notification";
|
@import "carbon-components/src/components/notification/inline-notification";
|
||||||
@import "carbon-components/src/components/notification/toast-notification";
|
@import "carbon-components/src/components/notification/toast-notification";
|
||||||
@import "./popover";
|
|
||||||
|
|
||||||
// The default theme is "white" (White)
|
// The default theme is "white" (White)
|
||||||
:root {
|
:root {
|
||||||
|
|
@ -41,15 +40,6 @@ $css--plex: true;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Set the <html> theme attribute to "g80" to use the Gray 80 theme
|
|
||||||
// <html theme="g80">
|
|
||||||
:root[theme="g80"] {
|
|
||||||
@include carbon--theme($carbon--theme--g80, true) {
|
|
||||||
@include emit-component-tokens($tag-colors);
|
|
||||||
@include emit-component-tokens($notification-colors);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Set the <html> theme attribute to "g90" to use the Gray 90 theme
|
// Set the <html> theme attribute to "g90" to use the Gray 90 theme
|
||||||
// <html theme="g90">
|
// <html theme="g90">
|
||||||
:root[theme="g90"] {
|
:root[theme="g90"] {
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
12
css/g10.scss
12
css/g10.scss
|
|
@ -1,9 +1,3 @@
|
||||||
// Use the "g10" (Gray 10) Carbon theme
|
|
||||||
@import "carbon-components/scss/globals/scss/vendor/@carbon/themes/scss";
|
|
||||||
|
|
||||||
$carbon--theme: $carbon--theme--g10;
|
|
||||||
@include carbon--theme();
|
|
||||||
|
|
||||||
$feature-flags: (
|
$feature-flags: (
|
||||||
ui-shell: true,
|
ui-shell: true,
|
||||||
grid-columns-16: true
|
grid-columns-16: true
|
||||||
|
|
@ -17,11 +11,15 @@ $css--reset: true;
|
||||||
$css--default-type: true;
|
$css--default-type: true;
|
||||||
$css--plex: true;
|
$css--plex: true;
|
||||||
|
|
||||||
|
// Use the "g10" (Gray 10) Carbon theme
|
||||||
|
@import "carbon-components/scss/globals/scss/vendor/@carbon/themes/scss";
|
||||||
@import "carbon-components/scss/globals/scss/component-tokens";
|
@import "carbon-components/scss/globals/scss/component-tokens";
|
||||||
@import "carbon-components/src/components/tag/tag";
|
@import "carbon-components/src/components/tag/tag";
|
||||||
@import "carbon-components/src/components/notification/inline-notification";
|
@import "carbon-components/src/components/notification/inline-notification";
|
||||||
@import "carbon-components/src/components/notification/toast-notification";
|
@import "carbon-components/src/components/notification/toast-notification";
|
||||||
@import "./popover";
|
|
||||||
|
$carbon--theme: $carbon--theme--g10;
|
||||||
|
@include carbon--theme();
|
||||||
|
|
||||||
@import "carbon-components/scss/globals/scss/_css--reset";
|
@import "carbon-components/scss/globals/scss/_css--reset";
|
||||||
@import "carbon-components/scss/globals/scss/_css--font-face";
|
@import "carbon-components/scss/globals/scss/_css--font-face";
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -1,9 +1,3 @@
|
||||||
// Use the "g100" (Gray 100) Carbon theme
|
|
||||||
@import "carbon-components/scss/globals/scss/vendor/@carbon/themes/scss";
|
|
||||||
|
|
||||||
$carbon--theme: $carbon--theme--g100;
|
|
||||||
@include carbon--theme();
|
|
||||||
|
|
||||||
$feature-flags: (
|
$feature-flags: (
|
||||||
ui-shell: true,
|
ui-shell: true,
|
||||||
grid-columns-16: true
|
grid-columns-16: true
|
||||||
|
|
@ -17,11 +11,15 @@ $css--reset: true;
|
||||||
$css--default-type: true;
|
$css--default-type: true;
|
||||||
$css--plex: true;
|
$css--plex: true;
|
||||||
|
|
||||||
|
// Use the "g100" (Gray 100) Carbon theme
|
||||||
|
@import "carbon-components/scss/globals/scss/vendor/@carbon/themes/scss";
|
||||||
@import "carbon-components/scss/globals/scss/component-tokens";
|
@import "carbon-components/scss/globals/scss/component-tokens";
|
||||||
@import "carbon-components/src/components/tag/tag";
|
@import "carbon-components/src/components/tag/tag";
|
||||||
@import "carbon-components/src/components/notification/inline-notification";
|
@import "carbon-components/src/components/notification/inline-notification";
|
||||||
@import "carbon-components/src/components/notification/toast-notification";
|
@import "carbon-components/src/components/notification/toast-notification";
|
||||||
@import "./popover";
|
|
||||||
|
$carbon--theme: $carbon--theme--g100;
|
||||||
|
@include carbon--theme();
|
||||||
|
|
||||||
@import "carbon-components/scss/globals/scss/_css--reset";
|
@import "carbon-components/scss/globals/scss/_css--reset";
|
||||||
@import "carbon-components/scss/globals/scss/_css--font-face";
|
@import "carbon-components/scss/globals/scss/_css--font-face";
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
34
css/g80.scss
34
css/g80.scss
|
|
@ -1,34 +0,0 @@
|
||||||
// Use the "g80" (Gray 80) Carbon theme
|
|
||||||
@import "carbon-components/scss/globals/scss/vendor/@carbon/themes/scss";
|
|
||||||
|
|
||||||
$carbon--theme: $carbon--theme--g80;
|
|
||||||
@include carbon--theme();
|
|
||||||
|
|
||||||
$feature-flags: (
|
|
||||||
ui-shell: true,
|
|
||||||
grid-columns-16: true
|
|
||||||
);
|
|
||||||
|
|
||||||
$css--font-face: true;
|
|
||||||
$css--helpers: true;
|
|
||||||
$css--body: true;
|
|
||||||
$css--use-layer: true;
|
|
||||||
$css--reset: true;
|
|
||||||
$css--default-type: true;
|
|
||||||
$css--plex: true;
|
|
||||||
|
|
||||||
@import "carbon-components/scss/globals/scss/component-tokens";
|
|
||||||
@import "carbon-components/src/components/tag/tag";
|
|
||||||
@import "carbon-components/src/components/notification/inline-notification";
|
|
||||||
@import "carbon-components/src/components/notification/toast-notification";
|
|
||||||
@import "./popover";
|
|
||||||
|
|
||||||
@import "carbon-components/scss/globals/scss/_css--reset";
|
|
||||||
@import "carbon-components/scss/globals/scss/_css--font-face";
|
|
||||||
@import "carbon-components/scss/globals/scss/_css--helpers";
|
|
||||||
@import "carbon-components/scss/globals/scss/_css--body";
|
|
||||||
@import "carbon-components/scss/globals/grid/grid";
|
|
||||||
|
|
||||||
// Import all component styles
|
|
||||||
@import "carbon-components/scss/globals/scss/styles";
|
|
||||||
|
|
||||||
File diff suppressed because one or more lines are too long
12
css/g90.scss
12
css/g90.scss
|
|
@ -1,9 +1,3 @@
|
||||||
// Use the "g90" (Gray 90) Carbon theme
|
|
||||||
@import "carbon-components/scss/globals/scss/vendor/@carbon/themes/scss";
|
|
||||||
|
|
||||||
$carbon--theme: $carbon--theme--g90;
|
|
||||||
@include carbon--theme();
|
|
||||||
|
|
||||||
$feature-flags: (
|
$feature-flags: (
|
||||||
ui-shell: true,
|
ui-shell: true,
|
||||||
grid-columns-16: true
|
grid-columns-16: true
|
||||||
|
|
@ -17,11 +11,15 @@ $css--reset: true;
|
||||||
$css--default-type: true;
|
$css--default-type: true;
|
||||||
$css--plex: true;
|
$css--plex: true;
|
||||||
|
|
||||||
|
// Use the "g90" (Gray 90) Carbon theme
|
||||||
|
@import "carbon-components/scss/globals/scss/vendor/@carbon/themes/scss";
|
||||||
@import "carbon-components/scss/globals/scss/component-tokens";
|
@import "carbon-components/scss/globals/scss/component-tokens";
|
||||||
@import "carbon-components/src/components/tag/tag";
|
@import "carbon-components/src/components/tag/tag";
|
||||||
@import "carbon-components/src/components/notification/inline-notification";
|
@import "carbon-components/src/components/notification/inline-notification";
|
||||||
@import "carbon-components/src/components/notification/toast-notification";
|
@import "carbon-components/src/components/notification/toast-notification";
|
||||||
@import "./popover";
|
|
||||||
|
$carbon--theme: $carbon--theme--g90;
|
||||||
|
@include carbon--theme();
|
||||||
|
|
||||||
@import "carbon-components/scss/globals/scss/_css--reset";
|
@import "carbon-components/scss/globals/scss/_css--reset";
|
||||||
@import "carbon-components/scss/globals/scss/_css--font-face";
|
@import "carbon-components/scss/globals/scss/_css--font-face";
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -1,9 +1,3 @@
|
||||||
// Use the "white" (White) Carbon theme
|
|
||||||
@import "carbon-components/scss/globals/scss/vendor/@carbon/themes/scss";
|
|
||||||
|
|
||||||
$carbon--theme: $carbon--theme--white;
|
|
||||||
@include carbon--theme();
|
|
||||||
|
|
||||||
$feature-flags: (
|
$feature-flags: (
|
||||||
ui-shell: true,
|
ui-shell: true,
|
||||||
grid-columns-16: true
|
grid-columns-16: true
|
||||||
|
|
@ -17,11 +11,15 @@ $css--reset: true;
|
||||||
$css--default-type: true;
|
$css--default-type: true;
|
||||||
$css--plex: true;
|
$css--plex: true;
|
||||||
|
|
||||||
|
// Use the "white" (White) Carbon theme
|
||||||
|
@import "carbon-components/scss/globals/scss/vendor/@carbon/themes/scss";
|
||||||
@import "carbon-components/scss/globals/scss/component-tokens";
|
@import "carbon-components/scss/globals/scss/component-tokens";
|
||||||
@import "carbon-components/src/components/tag/tag";
|
@import "carbon-components/src/components/tag/tag";
|
||||||
@import "carbon-components/src/components/notification/inline-notification";
|
@import "carbon-components/src/components/notification/inline-notification";
|
||||||
@import "carbon-components/src/components/notification/toast-notification";
|
@import "carbon-components/src/components/notification/toast-notification";
|
||||||
@import "./popover";
|
|
||||||
|
$carbon--theme: $carbon--theme--white;
|
||||||
|
@include carbon--theme();
|
||||||
|
|
||||||
@import "carbon-components/scss/globals/scss/_css--reset";
|
@import "carbon-components/scss/globals/scss/_css--reset";
|
||||||
@import "carbon-components/scss/globals/scss/_css--font-face";
|
@import "carbon-components/scss/globals/scss/_css--font-face";
|
||||||
|
|
|
||||||
1
docs/.gitignore
vendored
1
docs/.gitignore
vendored
|
|
@ -1,4 +1,3 @@
|
||||||
/node_modules
|
/node_modules
|
||||||
/dist
|
/dist
|
||||||
/.routify
|
/.routify
|
||||||
src/SEARCH_INDEX.json
|
|
||||||
|
|
@ -1,25 +1,10 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en" theme="white">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<link rel="icon" href="/favicon.ico" />
|
<link rel="icon" href="/favicon.ico" />
|
||||||
<link rel="canonical" href="https://svelte.carbondesignsystem.com/" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<meta name="description" content="Svelte implementation of the Carbon Design System" />
|
|
||||||
<title>Carbon Components Svelte</title>
|
<title>Carbon Components Svelte</title>
|
||||||
<script>
|
|
||||||
try {
|
|
||||||
const theme = localStorage.getItem("theme");
|
|
||||||
|
|
||||||
if (["white", "g10", "g80", "g90", "g100"].includes(theme)) {
|
|
||||||
document.documentElement.setAttribute("theme", theme);
|
|
||||||
document.documentElement.style.setProperty(
|
|
||||||
"color-scheme",
|
|
||||||
["white", "g10"].includes(theme) ? "light" : "dark"
|
|
||||||
);
|
|
||||||
}
|
|
||||||
} catch (e) {}
|
|
||||||
</script>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<script type="module" src="/src/index.js"></script>
|
<script type="module" src="/src/index.js"></script>
|
||||||
|
|
|
||||||
4002
docs/package-lock.json
generated
4002
docs/package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -1,31 +1,31 @@
|
||||||
{
|
{
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "npm run build:index-docs && run-p dev:*",
|
"dev": "run-p dev:*",
|
||||||
"dev:routify": "cross-env NODE_ENV=development routify run",
|
"dev:routify": "NODE_ENV=development routify run",
|
||||||
"dev:svite": "vite dev",
|
"dev:svite": "svite",
|
||||||
"build": "run-s build:*",
|
"build": "run-s build:*",
|
||||||
"build:index-docs": "node scripts/index-docs.js",
|
|
||||||
"build:routify": "routify run -b",
|
"build:routify": "routify run -b",
|
||||||
"build:svite": "vite build"
|
"build:svite": "svite build"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@sveltech/routify": "^1.9.10",
|
"@sveltech/routify": "^1.9.9",
|
||||||
"@sveltejs/vite-plugin-svelte": "^3.1.2",
|
"autoprefixer": "^10.2.3",
|
||||||
"carbon-components-svelte": "file:..",
|
"carbon-components": "10.32.0",
|
||||||
"carbon-icons-svelte": "^13.3.0",
|
"carbon-components-svelte": "../",
|
||||||
"clipboard-copy": "^4.0.1",
|
"mdsvex": "^0.8.8",
|
||||||
"cross-env": "^7.0.3",
|
|
||||||
"mdsvex": "^0.12.3",
|
|
||||||
"minisearch": "^7.1.0",
|
|
||||||
"npm-run-all": "^4.1.5",
|
"npm-run-all": "^4.1.5",
|
||||||
"prettier": "^2.8.8",
|
"postcss": "^8.2.4",
|
||||||
"prettier-plugin-svelte": "^2.10.1",
|
"prettier": "^2.1.2",
|
||||||
"prism-svelte": "^0.5.0",
|
"prettier-plugin-svelte": "^1.4.1",
|
||||||
"prismjs": "^1.30.0",
|
"prism-svelte": "^0.4.7",
|
||||||
"remark-slug": "^6.1.0",
|
"prismjs": "^1.21.0",
|
||||||
"svelte": "^4.2.19",
|
"remark-slug": "^6.0.0",
|
||||||
"vite": "^5.4.20"
|
"sass": "^1.32.5",
|
||||||
|
"svelte": "3.29.0",
|
||||||
|
"svelte-hmr": "0.11.1",
|
||||||
|
"svelte-preprocess": "^4.3.2",
|
||||||
|
"svite": "0.7.2"
|
||||||
},
|
},
|
||||||
"routify": {
|
"routify": {
|
||||||
"routifyDir": ".routify",
|
"routifyDir": ".routify",
|
||||||
|
|
@ -34,6 +34,5 @@
|
||||||
"svelte",
|
"svelte",
|
||||||
"svx"
|
"svx"
|
||||||
]
|
]
|
||||||
},
|
}
|
||||||
"type": "module"
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
1
docs/public/powered-by-vercel.svg
Normal file
1
docs/public/powered-by-vercel.svg
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<svg width="212" height="44" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="212" height="44" rx="8" fill="#000"/><path d="M60.438 15.227V26.5h1.406v-4.023h2.836c2.117 0 3.625-1.493 3.625-3.602 0-2.148-1.477-3.648-3.61-3.648h-4.257zm1.406 1.25h2.484c1.633 0 2.531.851 2.531 2.398 0 1.492-.93 2.352-2.53 2.352h-2.485v-4.75zm11.5 10.171c2.399 0 3.883-1.656 3.883-4.359 0-2.71-1.484-4.36-3.883-4.36-2.398 0-3.883 1.65-3.883 4.36 0 2.703 1.485 4.36 3.883 4.36zm0-1.21c-1.594 0-2.492-1.157-2.492-3.149 0-2 .898-3.148 2.492-3.148 1.594 0 2.492 1.148 2.492 3.148 0 1.992-.898 3.148-2.492 3.148zm15.954-7.36h-1.352l-1.656 6.735h-.125l-1.883-6.735h-1.29l-1.882 6.735h-.125l-1.656-6.735h-1.36l2.36 8.422h1.36l1.874-6.516h.125l1.883 6.516h1.367l2.36-8.422zm4.523 1.04c1.336 0 2.227.984 2.258 2.476h-4.64c.101-1.492 1.039-2.477 2.382-2.477zm2.219 5.202c-.352.742-1.086 1.14-2.172 1.14-1.43 0-2.36-1.054-2.43-2.718v-.062h6.055v-.516c0-2.617-1.383-4.234-3.656-4.234-2.313 0-3.797 1.718-3.797 4.367 0 2.664 1.46 4.351 3.797 4.351 1.844 0 3.156-.89 3.547-2.328H96.04zm3.242 2.18h1.344v-5.219c0-1.187.93-2.047 2.211-2.047.266 0 .75.047.86.078V17.97a5.77 5.77 0 00-.672-.04c-1.117 0-2.086.579-2.336 1.4h-.125v-1.25h-1.281V26.5zm8.899-7.383c1.336 0 2.227.985 2.258 2.477h-4.641c.102-1.492 1.04-2.477 2.383-2.477zm2.219 5.203c-.352.742-1.086 1.14-2.172 1.14-1.43 0-2.359-1.054-2.43-2.718v-.062h6.055v-.516c0-2.617-1.383-4.234-3.656-4.234-2.313 0-3.797 1.718-3.797 4.367 0 2.664 1.461 4.351 3.797 4.351 1.844 0 3.156-.89 3.547-2.328H110.4zm6.36 2.328c1.164 0 2.164-.554 2.695-1.492h.125V26.5h1.281V14.734h-1.343v4.672h-.118c-.476-.922-1.468-1.476-2.64-1.476-2.141 0-3.539 1.718-3.539 4.36 0 2.648 1.382 4.358 3.539 4.358zm.312-7.507c1.524 0 2.477 1.218 2.477 3.148 0 1.945-.946 3.148-2.477 3.148-1.539 0-2.461-1.18-2.461-3.148 0-1.96.93-3.148 2.461-3.148zm14.462 7.507c2.133 0 3.531-1.726 3.531-4.359 0-2.648-1.391-4.36-3.531-4.36-1.156 0-2.18.571-2.641 1.477h-.125v-4.672h-1.344V26.5h1.282v-1.344h.125c.531.938 1.531 1.492 2.703 1.492zm-.313-7.507c1.539 0 2.453 1.18 2.453 3.148 0 1.969-.914 3.148-2.453 3.148-1.531 0-2.484-1.203-2.484-3.148s.953-3.148 2.484-3.148zm6.04 10.406c1.492 0 2.164-.578 2.882-2.531l3.29-8.938h-1.43l-2.305 6.93h-.125l-2.312-6.93h-1.453l3.117 8.43-.157.5c-.351 1.015-.773 1.383-1.546 1.383-.188 0-.399-.008-.563-.04V29.5c.188.031.422.047.602.047zm17.391-3.047l3.898-11.273h-2.148l-2.813 8.921h-.132l-2.836-8.921h-2.227l3.938 11.273h2.32zm8.016-7.18c1.164 0 1.93.813 1.969 2.078h-4.024c.086-1.25.899-2.078 2.055-2.078zm1.984 4.828c-.281.633-.945.985-1.906.985-1.273 0-2.094-.89-2.141-2.313v-.101h5.969v-.625c0-2.696-1.461-4.313-3.898-4.313-2.477 0-4.016 1.727-4.016 4.477s1.516 4.414 4.031 4.414c2.016 0 3.446-.969 3.797-2.524h-1.836zm3.547 2.352h1.938v-4.938c0-1.195.875-1.976 2.133-1.976.328 0 .843.055.992.11v-1.798c-.18-.054-.524-.085-.805-.085-1.101 0-2.023.625-2.258 1.468h-.132v-1.328h-1.868V26.5zm13.501-5.672c-.203-1.797-1.532-3.047-3.727-3.047-2.57 0-4.078 1.649-4.078 4.422 0 2.813 1.516 4.469 4.086 4.469 2.164 0 3.508-1.203 3.719-2.992h-1.844c-.203.89-.875 1.367-1.883 1.367-1.32 0-2.117-1.047-2.117-2.844 0-1.773.789-2.797 2.117-2.797 1.063 0 1.703.594 1.883 1.422h1.844zm5.117-1.508c1.164 0 1.93.813 1.969 2.078h-4.024c.086-1.25.899-2.078 2.055-2.078zm1.985 4.828c-.282.633-.946.985-1.907.985-1.273 0-2.093-.89-2.14-2.313v-.101h5.968v-.625c0-2.696-1.461-4.313-3.898-4.313-2.477 0-4.016 1.727-4.016 4.477s1.516 4.414 4.032 4.414c2.015 0 3.445-.969 3.796-2.524h-1.835zm3.625 2.352h1.937V14.648h-1.937V26.5zM23.325 13l9.325 16H14l9.325-16z" fill="#fff"/><path stroke="#5E5E5E" d="M43.5 0v44"/></svg>
|
||||||
|
After Width: | Height: | Size: 3.5 KiB |
|
|
@ -1,45 +0,0 @@
|
||||||
// @ts-check
|
|
||||||
import fs from "node:fs";
|
|
||||||
import path from "node:path";
|
|
||||||
import githubSlugger from "github-slugger";
|
|
||||||
|
|
||||||
const { slug } = githubSlugger;
|
|
||||||
|
|
||||||
const COMPONENTS_PATH = "./src/pages/components";
|
|
||||||
const SEARCH_INDEX_PATH = "./src/SEARCH_INDEX.json";
|
|
||||||
const H2_DELMIMITER = "## ";
|
|
||||||
|
|
||||||
const files = fs.readdirSync(COMPONENTS_PATH);
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @typedef {Object} Document
|
|
||||||
* @property {string} id
|
|
||||||
* @property {string} text
|
|
||||||
* @property {string} description
|
|
||||||
* @property {string} href
|
|
||||||
*/
|
|
||||||
|
|
||||||
/** @type {Document[]} */
|
|
||||||
const documents = [];
|
|
||||||
|
|
||||||
for (const file of files) {
|
|
||||||
const [component_name] = file.split(".");
|
|
||||||
const file_path = path.join(COMPONENTS_PATH, file);
|
|
||||||
const file_content = fs.readFileSync(file_path, "utf8");
|
|
||||||
|
|
||||||
file_content.split("\n").forEach((line) => {
|
|
||||||
if (line.startsWith(H2_DELMIMITER)) {
|
|
||||||
const [, h2] = line.split(H2_DELMIMITER);
|
|
||||||
const hash = slug(h2);
|
|
||||||
|
|
||||||
documents.push({
|
|
||||||
id: component_name + hash,
|
|
||||||
text: component_name,
|
|
||||||
description: h2,
|
|
||||||
href: `/components/${component_name}#${hash}`,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
fs.writeFileSync(SEARCH_INDEX_PATH, JSON.stringify(documents, null, 2));
|
|
||||||
|
|
@ -3,4 +3,78 @@
|
||||||
import { routes } from "../.routify/routes";
|
import { routes } from "../.routify/routes";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Router {routes} />
|
<Router routes="{routes}" />
|
||||||
|
|
||||||
|
<style lang="scss" global>
|
||||||
|
// This is a recipe for dynamic, client-side theming
|
||||||
|
// All Carbon themes are included (White, Gray 10, Gray 90, Gray 100)
|
||||||
|
|
||||||
|
$feature-flags: (
|
||||||
|
// Custom CSS properties must be enabled to dynamically switch themes
|
||||||
|
enable-css-custom-properties: true,
|
||||||
|
ui-shell: true,
|
||||||
|
grid-columns-16: true
|
||||||
|
);
|
||||||
|
|
||||||
|
$css--font-face: true;
|
||||||
|
$css--helpers: true;
|
||||||
|
$css--body: true;
|
||||||
|
$css--use-layer: true;
|
||||||
|
$css--reset: true;
|
||||||
|
$css--default-type: true;
|
||||||
|
$css--plex: true;
|
||||||
|
|
||||||
|
// Use all Carbon themes
|
||||||
|
@import "carbon-components/scss/globals/scss/vendor/@carbon/themes/scss";
|
||||||
|
@import "carbon-components/scss/globals/scss/component-tokens";
|
||||||
|
@import "carbon-components/src/components/tag/tag";
|
||||||
|
@import "carbon-components/src/components/notification/inline-notification";
|
||||||
|
@import "carbon-components/src/components/notification/toast-notification";
|
||||||
|
|
||||||
|
// The default theme is "white" (White)
|
||||||
|
:root {
|
||||||
|
@include carbon--theme($carbon--theme--white, true) {
|
||||||
|
@include emit-component-tokens($tag-colors);
|
||||||
|
@include emit-component-tokens($notification-colors);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Set the <html> theme attribute to "g10" to use the Gray 10 theme
|
||||||
|
// <html theme="g10">
|
||||||
|
:root[theme="g10"] {
|
||||||
|
@include carbon--theme($carbon--theme--g10, true) {
|
||||||
|
@include emit-component-tokens($tag-colors);
|
||||||
|
@include emit-component-tokens($notification-colors);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Set the <html> theme attribute to "g90" to use the Gray 90 theme
|
||||||
|
// <html theme="g90">
|
||||||
|
:root[theme="g90"] {
|
||||||
|
@include carbon--theme($carbon--theme--g90, true) {
|
||||||
|
@include emit-component-tokens($tag-colors);
|
||||||
|
@include emit-component-tokens($notification-colors);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Set the <html> theme attribute to "g100" to use the Gray 100 theme
|
||||||
|
// <html theme="g100">
|
||||||
|
:root[theme="g100"] {
|
||||||
|
@include carbon--theme($carbon--theme--g100, true) {
|
||||||
|
@include emit-component-tokens($tag-colors);
|
||||||
|
@include emit-component-tokens($notification-colors);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Programmatically update the theme in JavaScript:
|
||||||
|
// document.documentElement.setAttribute("theme", "g90");
|
||||||
|
|
||||||
|
@import "carbon-components/scss/globals/scss/_css--reset";
|
||||||
|
@import "carbon-components/scss/globals/scss/_css--font-face";
|
||||||
|
@import "carbon-components/scss/globals/scss/_css--helpers";
|
||||||
|
@import "carbon-components/scss/globals/scss/_css--body";
|
||||||
|
@import "carbon-components/scss/globals/grid/grid";
|
||||||
|
|
||||||
|
// Import all component styles
|
||||||
|
@import "carbon-components/scss/globals/scss/styles";
|
||||||
|
</style>
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load diff
|
|
@ -4,29 +4,22 @@
|
||||||
slots: [],
|
slots: [],
|
||||||
events: [],
|
events: [],
|
||||||
rest_props: undefined,
|
rest_props: undefined,
|
||||||
typedefs: [],
|
|
||||||
};
|
};
|
||||||
|
|
||||||
import { onMount } from "svelte";
|
|
||||||
import {
|
import {
|
||||||
OutboundLink,
|
Link,
|
||||||
StructuredList,
|
StructuredList,
|
||||||
StructuredListHead,
|
StructuredListHead,
|
||||||
StructuredListRow,
|
StructuredListRow,
|
||||||
StructuredListCell,
|
StructuredListCell,
|
||||||
StructuredListBody,
|
StructuredListBody,
|
||||||
|
TooltipDefinition,
|
||||||
UnorderedList,
|
UnorderedList,
|
||||||
ListItem,
|
ListItem,
|
||||||
Tag,
|
Tag,
|
||||||
} from "carbon-components-svelte";
|
} from "carbon-components-svelte";
|
||||||
import InlineSnippet from "./InlineSnippet.svelte";
|
import InlineSnippet from "./InlineSnippet.svelte";
|
||||||
|
import Launch16 from "carbon-icons-svelte/lib/Launch16";
|
||||||
let AsyncPreviewTypeScript;
|
|
||||||
|
|
||||||
onMount(async () => {
|
|
||||||
AsyncPreviewTypeScript = (await import("./PreviewTypeScript.svelte"))
|
|
||||||
.default;
|
|
||||||
});
|
|
||||||
|
|
||||||
const mdn_api = "https://developer.mozilla.org/en-US/docs/Web/API/";
|
const mdn_api = "https://developer.mozilla.org/en-US/docs/Web/API/";
|
||||||
const typeMap = {
|
const typeMap = {
|
||||||
|
|
@ -37,103 +30,87 @@
|
||||||
Date: "JavaScript Date",
|
Date: "JavaScript Date",
|
||||||
};
|
};
|
||||||
|
|
||||||
$: source = `https://github.com/carbon-design-system/carbon-components-svelte/tree/master/${component.filePath}`;
|
$: source = `https://github.com/IBM/carbon-components-svelte/tree/master/${component.filePath}`;
|
||||||
$: forwarded_events = component.events.filter(
|
$: forwarded_events = component.events.filter(
|
||||||
(event) => event.type === "forwarded",
|
(event) => event.type === "forwarded"
|
||||||
);
|
);
|
||||||
$: dispatched_events = component.events.filter(
|
$: dispatched_events = component.events.filter(
|
||||||
(event) => event.type === "dispatched",
|
(event) => event.type === "dispatched"
|
||||||
);
|
);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<p style="margin-bottom: var(--cds-layout-02)">
|
<p style="margin-bottom: var(--cds-layout-02)">
|
||||||
Source code:
|
Component source code:
|
||||||
<OutboundLink size="lg" inline href={source}>
|
<Link inline size="lg" href="{source}" target="_blank">
|
||||||
{component.filePath}
|
{component.filePath}
|
||||||
</OutboundLink>
|
<Launch16 />
|
||||||
|
</Link>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<h2 id="props">Props</h2>
|
<h3 id="props">Props</h3>
|
||||||
|
|
||||||
{#if component.props.length > 0}
|
{#if component.props.length > 0}
|
||||||
<div class="overflow">
|
<div class="overflow">
|
||||||
<StructuredList flush condensed>
|
<StructuredList
|
||||||
|
style="margin-left: calc(-1 * var(--cds-spacing-05)); margin-right: calc(-1 * var(--cds-spacing-05))"
|
||||||
|
>
|
||||||
<StructuredListHead>
|
<StructuredListHead>
|
||||||
<StructuredListRow head>
|
<StructuredListRow head>
|
||||||
<StructuredListCell head>Prop name</StructuredListCell>
|
<StructuredListCell head>Prop name</StructuredListCell>
|
||||||
<StructuredListCell head>Type</StructuredListCell>
|
<StructuredListCell head>Type</StructuredListCell>
|
||||||
|
<StructuredListCell head noWrap>Default value</StructuredListCell>
|
||||||
<StructuredListCell head>Description</StructuredListCell>
|
<StructuredListCell head>Description</StructuredListCell>
|
||||||
</StructuredListRow>
|
</StructuredListRow>
|
||||||
</StructuredListHead>
|
</StructuredListHead>
|
||||||
<StructuredListBody>
|
<StructuredListBody>
|
||||||
{#each component.props.sort((a, b) => {
|
{#each component.props.sort((a, b) => {
|
||||||
// Sort props so required props are listed first, then reactive props.
|
if (a.reactive > b.reactive) return -1;
|
||||||
|
|
||||||
if (a.isRequired !== b.isRequired) {
|
|
||||||
return b.isRequired ? 1 : -1;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (a.reactive !== b.reactive) {
|
|
||||||
return b.reactive ? 1 : -1;
|
|
||||||
}
|
|
||||||
|
|
||||||
return 0;
|
|
||||||
}) as prop (prop.name)}
|
}) as prop (prop.name)}
|
||||||
<StructuredListRow>
|
<StructuredListRow>
|
||||||
<StructuredListCell noWrap>
|
<StructuredListCell noWrap>
|
||||||
<InlineSnippet code={prop.name} />
|
<InlineSnippet code="{prop.name}" />
|
||||||
{#if prop.reactive}
|
{#if prop.reactive}
|
||||||
<div
|
<div
|
||||||
style="white-space: nowrap; margin-top: var(--cds-spacing-03); margin-bottom: var(--cds-spacing-{prop.isRequired
|
style="white-space: nowrap; margin-top: var(--cds-spacing-03)"
|
||||||
? '01'
|
|
||||||
: '03'})"
|
|
||||||
>
|
>
|
||||||
<Tag style="margin-left: 0" size="sm" type="cyan">
|
<Tag type="cyan">Reactive</Tag>
|
||||||
Reactive
|
|
||||||
</Tag>
|
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
{#if prop.isRequired}
|
|
||||||
<Tag size="sm" type="magenta">Required</Tag>
|
|
||||||
{/if}
|
|
||||||
</StructuredListCell>
|
</StructuredListCell>
|
||||||
<StructuredListCell>
|
<StructuredListCell>
|
||||||
{#each (prop.type || "").split(" | ") as type, i (type)}
|
{#each prop.type.split(" | ") as type, i (type)}
|
||||||
<div
|
<div
|
||||||
class="cell"
|
class="cell"
|
||||||
style="z-index: {(prop.type || '').split(' | ').length - i}"
|
style="z-index: {prop.type.split(' | ').length - i}"
|
||||||
>
|
>
|
||||||
{#if type.startsWith("HTML")}
|
{#if type.startsWith("typeof")}
|
||||||
<OutboundLink
|
<TooltipDefinition
|
||||||
|
direction="top"
|
||||||
|
align="start"
|
||||||
|
tooltipText="{`From "carbon-icons-svelte"`}"
|
||||||
|
>
|
||||||
|
Carbon Svelte icon
|
||||||
|
</TooltipDefinition>
|
||||||
|
{:else if type.startsWith("HTML")}
|
||||||
|
<Link
|
||||||
href="{mdn_api}{type}"
|
href="{mdn_api}{type}"
|
||||||
|
target="_blank"
|
||||||
style="white-space: nowrap"
|
style="white-space: nowrap"
|
||||||
>
|
>
|
||||||
{type}
|
{type}
|
||||||
</OutboundLink>
|
<Launch16 />
|
||||||
|
</Link>
|
||||||
{:else if type in typeMap}
|
{:else if type in typeMap}
|
||||||
<div
|
<code>{typeMap[type]}</code>
|
||||||
style="display: inline-flex; max-width: 220px; word-break: break-word;"
|
{:else if type.startsWith("(")}
|
||||||
>
|
<code>{type}</code>
|
||||||
<svelte:component
|
|
||||||
this={AsyncPreviewTypeScript}
|
|
||||||
type="inline"
|
|
||||||
code={typeMap[type]}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{:else}
|
{:else}
|
||||||
<div
|
<InlineSnippet code="{type}" />
|
||||||
style="display: inline-flex; max-width: 220px; word-break: break-word;"
|
|
||||||
>
|
|
||||||
<svelte:component
|
|
||||||
this={AsyncPreviewTypeScript}
|
|
||||||
type="inline"
|
|
||||||
code={type}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
{/each}
|
{/each}
|
||||||
</StructuredListCell>
|
</StructuredListCell>
|
||||||
|
<StructuredListCell><code>{prop.value}</code></StructuredListCell>
|
||||||
<StructuredListCell>
|
<StructuredListCell>
|
||||||
{#if prop.description}
|
{#if prop.description}
|
||||||
{#each prop.description.split("\n") as line}
|
{#each prop.description.split("\n") as line}
|
||||||
|
|
@ -144,27 +121,9 @@
|
||||||
.replace(/`(.*?)`/g, "<code>$1</code>")}.
|
.replace(/`(.*?)`/g, "<code>$1</code>")}.
|
||||||
</div>
|
</div>
|
||||||
{/each}
|
{/each}
|
||||||
{/if}
|
|
||||||
<div
|
|
||||||
style:margin-top="var(--cds-layout-02)"
|
|
||||||
style:margin-bottom="var(--cds-spacing-03)"
|
|
||||||
>
|
|
||||||
<strong>Default value</strong>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style:margin-bottom="var(--cds-layout-01)"
|
|
||||||
style:max-width="85%"
|
|
||||||
>
|
|
||||||
{#if prop.value === undefined}
|
|
||||||
<em>undefined</em>
|
|
||||||
{:else}
|
{:else}
|
||||||
<svelte:component
|
<div class="description">No description available.</div>
|
||||||
this={AsyncPreviewTypeScript}
|
|
||||||
type={/\n/.test(prop.value) ? "multi" : "inline"}
|
|
||||||
code={prop.value}
|
|
||||||
/>
|
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
|
||||||
</StructuredListCell>
|
</StructuredListCell>
|
||||||
</StructuredListRow>
|
</StructuredListRow>
|
||||||
{/each}
|
{/each}
|
||||||
|
|
@ -174,51 +133,18 @@
|
||||||
{:else}
|
{:else}
|
||||||
<p class="my-layout-01-03">No props.</p>
|
<p class="my-layout-01-03">No props.</p>
|
||||||
{/if}
|
{/if}
|
||||||
|
<h3 id="slots">Slots</h3>
|
||||||
<h2 id="typedefs">Typedefs</h2>
|
|
||||||
|
|
||||||
{#if component.typedefs.length > 0}
|
|
||||||
<div class="my-layout-01-03">
|
|
||||||
<svelte:component
|
|
||||||
this={AsyncPreviewTypeScript}
|
|
||||||
code={component.typedefs.map((t) => t.ts).join("\n")}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{:else}
|
|
||||||
<p class="my-layout-01-03">No typedefs.</p>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
<h2 id="slots">Slots</h2>
|
|
||||||
{#if component.slots.length > 0}
|
{#if component.slots.length > 0}
|
||||||
<StructuredList class="my-layout-01-03">
|
<UnorderedList class="my-layout-01-03">
|
||||||
<StructuredListHead>
|
|
||||||
<StructuredListRow>
|
|
||||||
<StructuredListCell>Slot name</StructuredListCell>
|
|
||||||
<StructuredListCell>Slot detail</StructuredListCell>
|
|
||||||
</StructuredListRow>
|
|
||||||
</StructuredListHead>
|
|
||||||
<StructuredListBody>
|
|
||||||
{#each component.slots as slot (slot.name)}
|
{#each component.slots as slot (slot.name)}
|
||||||
<StructuredListRow>
|
<ListItem>{slot.default ? "default" : slot.name}</ListItem>
|
||||||
<StructuredListCell>
|
|
||||||
<strong>{slot.default ? "default" : slot.name}</strong>
|
|
||||||
</StructuredListCell>
|
|
||||||
<StructuredListCell>
|
|
||||||
<svelte:component
|
|
||||||
this={AsyncPreviewTypeScript}
|
|
||||||
type={/\n/.test(slot.slot_props) ? "multi" : "inline"}
|
|
||||||
code={slot.slot_props}
|
|
||||||
/>
|
|
||||||
</StructuredListCell>
|
|
||||||
</StructuredListRow>
|
|
||||||
{/each}
|
{/each}
|
||||||
</StructuredListBody>
|
</UnorderedList>
|
||||||
</StructuredList>
|
|
||||||
{:else}
|
{:else}
|
||||||
<p class="my-layout-01-03">No slots.</p>
|
<p class="my-layout-01-03">No slots.</p>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<h2 id="forwarded-events">Forwarded events</h2>
|
<h3 id="forwarded-events">Forwarded events</h3>
|
||||||
{#if forwarded_events.length > 0}
|
{#if forwarded_events.length > 0}
|
||||||
<UnorderedList class="my-layout-01-03">
|
<UnorderedList class="my-layout-01-03">
|
||||||
{#each forwarded_events as event (event.name)}
|
{#each forwarded_events as event (event.name)}
|
||||||
|
|
@ -229,45 +155,19 @@
|
||||||
<p class="my-layout-01-03">No forwarded events.</p>
|
<p class="my-layout-01-03">No forwarded events.</p>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<h2 id="dispatched-events">Dispatched events</h2>
|
<h3 id="dispatched-events">Dispatched events</h3>
|
||||||
|
|
||||||
{#if dispatched_events.length > 0}
|
{#if dispatched_events.length > 0}
|
||||||
{@const hasDescription = dispatched_events.find((el) => el.description)}
|
<UnorderedList class="my-layout-01-03">
|
||||||
<StructuredList flush>
|
|
||||||
<StructuredListHead>
|
|
||||||
<StructuredListRow>
|
|
||||||
<StructuredListCell>Event name</StructuredListCell>
|
|
||||||
<StructuredListCell>Event detail</StructuredListCell>
|
|
||||||
{#if hasDescription}
|
|
||||||
<StructuredListCell>Description</StructuredListCell>
|
|
||||||
{/if}
|
|
||||||
</StructuredListRow>
|
|
||||||
</StructuredListHead>
|
|
||||||
<StructuredListBody>
|
|
||||||
{#each dispatched_events as event (event.name)}
|
{#each dispatched_events as event (event.name)}
|
||||||
<StructuredListRow>
|
<ListItem>on:{event.name}</ListItem>
|
||||||
<StructuredListCell>
|
|
||||||
<strong>on:{event.name}</strong>
|
|
||||||
</StructuredListCell>
|
|
||||||
<StructuredListCell>
|
|
||||||
<svelte:component
|
|
||||||
this={AsyncPreviewTypeScript}
|
|
||||||
type={/\n/.test(event.detail) ? "multi" : "inline"}
|
|
||||||
code={event.detail}
|
|
||||||
/>
|
|
||||||
</StructuredListCell>
|
|
||||||
<StructuredListCell>
|
|
||||||
{event.description ?? ""}
|
|
||||||
</StructuredListCell>
|
|
||||||
</StructuredListRow>
|
|
||||||
{/each}
|
{/each}
|
||||||
</StructuredListBody>
|
</UnorderedList>
|
||||||
</StructuredList>
|
|
||||||
{:else}
|
{:else}
|
||||||
<p class="my-layout-01-03">No dispatched events.</p>
|
<p class="my-layout-01-03">No dispatched events.</p>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<h2 id="rest-props">$$restProps</h2>
|
<h3 id="rest-props">$$restProps</h3>
|
||||||
|
|
||||||
<div class="my-layout-01-03">
|
<div class="my-layout-01-03">
|
||||||
{#if component.rest_props}
|
{#if component.rest_props}
|
||||||
|
|
@ -285,7 +185,6 @@
|
||||||
<style>
|
<style>
|
||||||
.description {
|
.description {
|
||||||
margin-bottom: var(--cds-spacing-04);
|
margin-bottom: var(--cds-spacing-04);
|
||||||
width: 80%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.cell {
|
.cell {
|
||||||
|
|
@ -299,11 +198,7 @@
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.my-layout-01-03) {
|
:global(.my-layout-01-03),
|
||||||
margin-top: var(--cds-layout-01);
|
|
||||||
margin-bottom: var(--cds-layout-03);
|
|
||||||
}
|
|
||||||
|
|
||||||
:global(.overflow .bx--structured-list) {
|
:global(.overflow .bx--structured-list) {
|
||||||
margin-top: var(--cds-layout-01);
|
margin-top: var(--cds-layout-01);
|
||||||
margin-bottom: var(--cds-layout-04);
|
margin-bottom: var(--cds-layout-04);
|
||||||
|
|
@ -312,12 +207,4 @@
|
||||||
code {
|
code {
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(
|
|
||||||
.cell .bx--snippet--inline code,
|
|
||||||
.cell .bx--snippet--single pre,
|
|
||||||
.bx--snippet--inline code
|
|
||||||
) {
|
|
||||||
white-space: pre-wrap !important;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
28
docs/src/components/Footer.svelte
Normal file
28
docs/src/components/Footer.svelte
Normal file
|
|
@ -0,0 +1,28 @@
|
||||||
|
<script>
|
||||||
|
import { Content, Grid, Row, Column, Link } from "carbon-components-svelte";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<footer class="bx--content">
|
||||||
|
<Grid>
|
||||||
|
<Row>
|
||||||
|
<Column>
|
||||||
|
<Link
|
||||||
|
href="https://www.vercel.com?utm_source=carbon-components-svelte&utm_campaign=oss"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
height="36px"
|
||||||
|
src="/powered-by-vercel.svg"
|
||||||
|
alt="Deploys by Vercel"
|
||||||
|
/>
|
||||||
|
</Link>
|
||||||
|
</Column>
|
||||||
|
</Row>
|
||||||
|
</Grid>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
footer {
|
||||||
|
background: var(--cds-ui-01);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,16 +1,15 @@
|
||||||
<script>
|
<script>
|
||||||
export let code = "";
|
export let code = "";
|
||||||
|
|
||||||
import copy from "clipboard-copy";
|
|
||||||
import { CodeSnippet } from "carbon-components-svelte";
|
import { CodeSnippet } from "carbon-components-svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<CodeSnippet {code} type="inline" copy={(text) => copy(text)} />
|
<CodeSnippet code="{code}" type="inline" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
div {
|
div {
|
||||||
margin-bottom: var(--cds-spacing-03);
|
margin-bottom: var(--cds-spacing-04);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -4,9 +4,8 @@
|
||||||
export let src = "";
|
export let src = "";
|
||||||
export let framed = false;
|
export let framed = false;
|
||||||
|
|
||||||
import copy from "clipboard-copy";
|
|
||||||
import { CodeSnippet, Button } from "carbon-components-svelte";
|
import { CodeSnippet, Button } from "carbon-components-svelte";
|
||||||
import Launch from "carbon-icons-svelte/lib/Launch.svelte";
|
import Launch16 from "carbon-icons-svelte/lib/Launch16";
|
||||||
import { url } from "@sveltech/routify";
|
import { url } from "@sveltech/routify";
|
||||||
import { theme } from "../store";
|
import { theme } from "../store";
|
||||||
|
|
||||||
|
|
@ -26,8 +25,8 @@
|
||||||
kind="ghost"
|
kind="ghost"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
size="field"
|
size="field"
|
||||||
href={themedSrcUrl}
|
href="{themedSrcUrl}"
|
||||||
icon={Launch}
|
icon="{Launch16}"
|
||||||
>
|
>
|
||||||
Open in new tab
|
Open in new tab
|
||||||
</Button>
|
</Button>
|
||||||
|
|
@ -35,31 +34,111 @@
|
||||||
{/if}
|
{/if}
|
||||||
<div class="preview-viewer" class:framed>
|
<div class="preview-viewer" class:framed>
|
||||||
{#if framed}
|
{#if framed}
|
||||||
<iframe loading="lazy" title={src.split("/").pop()} src={themedSrcUrl}
|
<iframe title="{src.split('/').pop()}" src="{themedSrcUrl}"></iframe>
|
||||||
></iframe>
|
|
||||||
{:else}
|
{:else}
|
||||||
<slot />
|
<slot />
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
<div class="code-override">
|
<div class="code-override">
|
||||||
<CodeSnippet type="multi" code={codeRaw} copy={(text) => copy(text)}>
|
<CodeSnippet type="multi" code="{codeRaw}">
|
||||||
{@html code}
|
{@html code}
|
||||||
</CodeSnippet>
|
</CodeSnippet>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style global>
|
||||||
.preview {
|
.preview {
|
||||||
margin-bottom: var(--cds-layout-04);
|
margin-bottom: var(--cds-layout-04);
|
||||||
margin-left: -1rem;
|
margin-left: -1rem;
|
||||||
margin-right: -1rem;
|
margin-right: -1rem;
|
||||||
max-width: 80rem;
|
max-width: 56rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.code-override .bx--snippet {
|
||||||
|
max-width: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.code-override .bx--copy-btn,
|
||||||
|
.code-override .bx--snippet,
|
||||||
|
.code-override button.bx--btn.bx--snippet-btn--expand {
|
||||||
|
background-color: #262626;
|
||||||
|
color: #f4f4f4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.code-override .bx--copy-btn:hover,
|
||||||
|
.code-override button.bx--btn.bx--snippet-btn--expand:hover {
|
||||||
|
background-color: #393939;
|
||||||
|
}
|
||||||
|
|
||||||
|
.code-override .bx--snippet__icon {
|
||||||
|
fill: #f4f4f4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.code-override .bx--snippet-container pre {
|
||||||
|
font-size: var(--cds-code-02-font-size);
|
||||||
|
line-height: var(--cds-code-02-line-height);
|
||||||
|
letter-spacing: var(--cds-code-02-letter-spacing);
|
||||||
|
cursor: text;
|
||||||
|
}
|
||||||
|
|
||||||
|
.code-override .bx--snippet--multi .bx--snippet-container pre {
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.tag,
|
||||||
|
.token.operator {
|
||||||
|
color: #6ea6ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.attr-name {
|
||||||
|
color: #3ddbd9; /* teal 30 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.function {
|
||||||
|
color: #9ef0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.token.language-javascript,
|
||||||
|
.token.attr-value {
|
||||||
|
color: #d4bbff; /* purple 30 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.keyword {
|
||||||
|
color: #bb8eff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.punctuation {
|
||||||
|
color: #a8a8a8; /* gray 40 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.script .token.language-javascript {
|
||||||
|
color: #3ddbd9; /* teal 30 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.string {
|
||||||
|
color: #fa75a6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.boolean {
|
||||||
|
color: #bb8eff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.number {
|
||||||
|
color: #a7f0ba;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.comment {
|
||||||
|
color: #bebebe;
|
||||||
}
|
}
|
||||||
|
|
||||||
.code-override {
|
.code-override {
|
||||||
border: 1px solid #262626;
|
border: 1px solid #262626;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
html[theme="g90"] .code-override {
|
||||||
|
border: 1px solid var(--cds-ui-03);
|
||||||
|
}
|
||||||
|
|
||||||
.preview-viewer {
|
.preview-viewer {
|
||||||
border: 1px solid var(--cds-ui-03);
|
border: 1px solid var(--cds-ui-03);
|
||||||
border-bottom: 0;
|
border-bottom: 0;
|
||||||
|
|
@ -75,12 +154,6 @@
|
||||||
min-height: 20rem;
|
min-height: 20rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 1920px) {
|
|
||||||
.preview-viewer.framed {
|
|
||||||
min-height: 32rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.framed-header {
|
.framed-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
|
||||||
|
|
@ -1,29 +0,0 @@
|
||||||
<script>
|
|
||||||
export let code = "";
|
|
||||||
export let type = "multi";
|
|
||||||
|
|
||||||
import { CodeSnippet } from "carbon-components-svelte";
|
|
||||||
import { highlight } from "prismjs";
|
|
||||||
import "prismjs/components/prism-typescript";
|
|
||||||
import copy from "clipboard-copy";
|
|
||||||
|
|
||||||
$: highlightedCode = highlight(
|
|
||||||
code,
|
|
||||||
Prism.languages.typescript,
|
|
||||||
"typescript",
|
|
||||||
);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
{#if type === "multi"}
|
|
||||||
<div class="code-override">
|
|
||||||
<CodeSnippet type="multi" {code} {copy}>
|
|
||||||
{@html highlightedCode}
|
|
||||||
</CodeSnippet>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
{#if type === "inline"}
|
|
||||||
<CodeSnippet type="inline" class="code-override-inline" {code} {copy}>
|
|
||||||
{@html highlightedCode}
|
|
||||||
</CodeSnippet>
|
|
||||||
{/if}
|
|
||||||
24
docs/src/components/Theme.svelte
Normal file
24
docs/src/components/Theme.svelte
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
<script>
|
||||||
|
export let persist = false;
|
||||||
|
export let persistKey = "carbon-theme";
|
||||||
|
export const themes = ["white", "g10", "g90", "g100"];
|
||||||
|
|
||||||
|
import { onMount, afterUpdate } from "svelte";
|
||||||
|
import { theme } from "../store";
|
||||||
|
|
||||||
|
const isValidTheme = (value) => themes.includes(value);
|
||||||
|
|
||||||
|
onMount(() => {
|
||||||
|
const persisted_theme = localStorage.getItem(persistKey);
|
||||||
|
if (isValidTheme(persisted_theme)) theme.set(persisted_theme);
|
||||||
|
});
|
||||||
|
|
||||||
|
afterUpdate(() => {
|
||||||
|
if (isValidTheme($theme)) {
|
||||||
|
document.documentElement.setAttribute("theme", $theme);
|
||||||
|
if (persist) localStorage.setItem(persistKey, $theme);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<slot />
|
||||||
|
|
@ -6,8 +6,8 @@
|
||||||
export let borderBottom = false;
|
export let borderBottom = false;
|
||||||
|
|
||||||
import { AspectRatio, ClickableTile, Tile } from "carbon-components-svelte";
|
import { AspectRatio, ClickableTile, Tile } from "carbon-components-svelte";
|
||||||
import LogoGithub from "carbon-icons-svelte/lib/LogoGithub.svelte";
|
import LogoGithub32 from "carbon-icons-svelte/lib/LogoGithub32";
|
||||||
import Launch from "carbon-icons-svelte/lib/Launch.svelte";
|
import Launch20 from "carbon-icons-svelte/lib/Launch20";
|
||||||
|
|
||||||
$: tileComponent = href ? ClickableTile : Tile;
|
$: tileComponent = href ? ClickableTile : Tile;
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -15,8 +15,8 @@
|
||||||
<div class="card-wrapper" class:borderRight class:borderBottom>
|
<div class="card-wrapper" class:borderRight class:borderBottom>
|
||||||
<AspectRatio>
|
<AspectRatio>
|
||||||
<svelte:component
|
<svelte:component
|
||||||
this={tileComponent}
|
this="{tileComponent}"
|
||||||
{href}
|
href="{href}"
|
||||||
{...$$restProps}
|
{...$$restProps}
|
||||||
style="height: 100%;"
|
style="height: 100%;"
|
||||||
>
|
>
|
||||||
|
|
@ -29,11 +29,10 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="card-footer">
|
<div class="card-footer">
|
||||||
<svelte:component
|
<svelte:component
|
||||||
this={LogoGithub}
|
this="{LogoGithub32}"
|
||||||
size={32}
|
|
||||||
style="fill: var(--cds-icon-01)"
|
style="fill: var(--cds-icon-01)"
|
||||||
/>
|
/>
|
||||||
<Launch size={20} style="fill: var(--cds-icon-01)" />
|
<Launch20 style="fill: var(--cds-icon-01)" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</svelte:component>
|
</svelte:component>
|
||||||
|
|
|
||||||
|
|
@ -1,278 +0,0 @@
|
||||||
html[theme="g90"] .code-override {
|
|
||||||
border: 1px solid var(--cds-ui-03);
|
|
||||||
}
|
|
||||||
|
|
||||||
.prose > pre,
|
|
||||||
.code-override .bx--snippet {
|
|
||||||
/** Docs code snippet is always dark mode */
|
|
||||||
color-scheme: dark;
|
|
||||||
max-width: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.prose > pre {
|
|
||||||
padding: 1rem;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.prose > pre,
|
|
||||||
.code-override .bx--copy-btn,
|
|
||||||
.code-override .bx--snippet,
|
|
||||||
.code-override button.bx--btn.bx--snippet-btn--expand {
|
|
||||||
background-color: #262626;
|
|
||||||
color: #f4f4f4;
|
|
||||||
}
|
|
||||||
|
|
||||||
.code-override .bx--copy-btn:hover,
|
|
||||||
.code-override button.bx--btn.bx--snippet-btn--expand:hover {
|
|
||||||
background-color: #393939;
|
|
||||||
}
|
|
||||||
|
|
||||||
.code-override .bx--snippet__icon {
|
|
||||||
fill: #f4f4f4;
|
|
||||||
}
|
|
||||||
|
|
||||||
.prose > pre,
|
|
||||||
.code-override .bx--snippet-container pre {
|
|
||||||
font-size: var(--cds-code-02-font-size);
|
|
||||||
line-height: var(--cds-code-02-line-height);
|
|
||||||
letter-spacing: var(--cds-code-02-letter-spacing);
|
|
||||||
cursor: text;
|
|
||||||
}
|
|
||||||
|
|
||||||
.code-override .bx--snippet--multi .bx--snippet-container pre {
|
|
||||||
overflow-x: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Addig this to the layout grid fixes overstretching. */
|
|
||||||
.fix-overflow {
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.tag,
|
|
||||||
.token.operator {
|
|
||||||
color: #6ea6ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Override syntax highlighting for light theme inline code .*/
|
|
||||||
[theme="white"] .code-override-inline .token,
|
|
||||||
[theme="g10"] .code-override-inline .token {
|
|
||||||
color: var(--cds-text-01, #161616);
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Gray 80 is the "lighted" dark theme. Ensure the background is dark. */
|
|
||||||
[theme="g80"] .code-override-inline {
|
|
||||||
background-color: #262626;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.builtin,
|
|
||||||
.token.attr-name {
|
|
||||||
color: #3ddbd9; /* teal 30 */
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.function {
|
|
||||||
color: #9ef0f0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.token.language-javascript,
|
|
||||||
.token.attr-value {
|
|
||||||
color: #d4bbff; /* purple 30 */
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.keyword {
|
|
||||||
color: #bb8eff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.punctuation {
|
|
||||||
color: #a8a8a8; /* gray 40 */
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.script .token.language-javascript {
|
|
||||||
color: #3ddbd9; /* teal 30 */
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.string {
|
|
||||||
color: #fa75a6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.boolean {
|
|
||||||
color: #bb8eff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.number {
|
|
||||||
color: #a7f0ba;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.comment {
|
|
||||||
color: #bebebe;
|
|
||||||
}
|
|
||||||
|
|
||||||
.override-tabs a.bx--tabs__nav-link,
|
|
||||||
.override-tabs a.bx--tabs__nav-link:focus,
|
|
||||||
.override-tabs a.bx--tabs__nav-link:active {
|
|
||||||
width: auto !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
#select-theme {
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Main content needs to supersede z-index of SideNav but not that of the Header.
|
|
||||||
* UI Shell Header shares the same z-index.
|
|
||||||
*/
|
|
||||||
[aria-label="Navigation"] {
|
|
||||||
z-index: calc(8000 + 2);
|
|
||||||
}
|
|
||||||
|
|
||||||
[aria-label="Navigation"] ~ [data-components] {
|
|
||||||
z-index: calc(8000 + 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 65.98rem) {
|
|
||||||
[aria-label="Navigation"] ~ [data-components] {
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.prose > p > .bx--link {
|
|
||||||
font-size: inherit;
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
.prose .toc {
|
|
||||||
margin-bottom: var(--cds-layout-01);
|
|
||||||
}
|
|
||||||
|
|
||||||
.table {
|
|
||||||
position: sticky;
|
|
||||||
max-height: calc(100vh - 3rem);
|
|
||||||
top: 3rem;
|
|
||||||
margin-top: -3rem;
|
|
||||||
padding-top: var(--cds-spacing-05);
|
|
||||||
padding-bottom: var(--cds-spacing-05);
|
|
||||||
padding-left: var(--cds-spacing-08);
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-components] {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-components] .bx--grid {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 1056px) {
|
|
||||||
.table {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.preview-viewer > .bx--aspect-ratio,
|
|
||||||
.preview-viewer [data-outline] {
|
|
||||||
outline: 1px solid var(--cds-interactive-04);
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-outline] {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-outline] ~ [data-outline] {
|
|
||||||
margin-top: var(--cds-spacing-08);
|
|
||||||
}
|
|
||||||
|
|
||||||
#select-theme {
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.prose > p > .bx--link {
|
|
||||||
font-size: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
.prose .toc {
|
|
||||||
margin-bottom: var(--cds-layout-01);
|
|
||||||
}
|
|
||||||
|
|
||||||
.code-01 {
|
|
||||||
font-size: var(--cds-code-01-font-size);
|
|
||||||
font-weight: var(--cds-code-01-font-weight);
|
|
||||||
letter-spacing: var(--cds-code-01-letter-spacing);
|
|
||||||
line-height: var(--cds-code-01-line-height);
|
|
||||||
}
|
|
||||||
|
|
||||||
.body-short-01 {
|
|
||||||
font-size: var(--cds-body-short-01-font-size);
|
|
||||||
font-weight: var(--cds-body-short-01-font-weight);
|
|
||||||
letter-spacing: var(--cds-body-short-01-letter-spacing);
|
|
||||||
line-height: var(--cds-body-short-01-line-height);
|
|
||||||
}
|
|
||||||
|
|
||||||
.bx--col > h1 {
|
|
||||||
font-size: var(--cds-expressive-heading-05-font-size);
|
|
||||||
font-weight: var(--cds-expressive-heading-05-font-weight);
|
|
||||||
letter-spacing: var(--cds-expressive-heading-05-letter-spacing);
|
|
||||||
line-height: var(--cds-expressive-heading-05-line-height);
|
|
||||||
margin-bottom: var(--cds-layout-01);
|
|
||||||
}
|
|
||||||
|
|
||||||
.big-paragraph {
|
|
||||||
font-size: var(--cds-expressive-heading-03-font-size);
|
|
||||||
font-weight: var(--cds-expressive-heading-03-font-weight);
|
|
||||||
letter-spacing: var(--cds-expressive-heading-03-letter-spacing);
|
|
||||||
line-height: var(--cds-expressive-heading-03-line-height);
|
|
||||||
margin-top: var(--cds-layout-03);
|
|
||||||
margin-bottom: var(--cds-layout-06);
|
|
||||||
}
|
|
||||||
|
|
||||||
.big-link,
|
|
||||||
.bx--col > .big-paragraph > code {
|
|
||||||
font-size: var(--cds-expressive-heading-03-font-size);
|
|
||||||
font-weight: var(--cds-expressive-heading-03-font-weight);
|
|
||||||
letter-spacing: var(--cds-expressive-heading-03-letter-spacing);
|
|
||||||
line-height: var(--cds-expressive-heading-03-line-height);
|
|
||||||
}
|
|
||||||
|
|
||||||
.bx--col > p {
|
|
||||||
max-width: 44rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bx--col > p > code {
|
|
||||||
font-size: var(--cds-code-02-font-size);
|
|
||||||
font-weight: var(--cds-code-02-font-weight);
|
|
||||||
line-height: var(--cds-code-02-line-height);
|
|
||||||
letter-spacing: var(--cds-code-02-letter-spacing);
|
|
||||||
background-color: var(--cds-ui-03);
|
|
||||||
border-radius: 0.25rem;
|
|
||||||
padding: 0 var(--cds-spacing-02);
|
|
||||||
}
|
|
||||||
|
|
||||||
[class*="bx--col"] > h2,
|
|
||||||
.bx--tab-content > h2 {
|
|
||||||
font-size: var(--cds-expressive-heading-04-font-size);
|
|
||||||
font-weight: var(--cds-expressive-heading-04-font-weight);
|
|
||||||
letter-spacing: var(--cds-expressive-heading-04-letter-spacing);
|
|
||||||
line-height: var(--cds-expressive-heading-04-line-height);
|
|
||||||
padding-top: var(--cds-layout-03);
|
|
||||||
margin-bottom: var(--cds-layout-01);
|
|
||||||
}
|
|
||||||
|
|
||||||
.bx--col > h4 {
|
|
||||||
font-size: var(--cds-expressive-heading-02-font-size);
|
|
||||||
font-weight: var(--cds-expressive-heading-02-font-weight);
|
|
||||||
letter-spacing: var(--cds-expressive-heading-02-letter-spacing);
|
|
||||||
line-height: var(--cds-expressive-heading-02-line-height);
|
|
||||||
padding-top: var(--cds-layout-04);
|
|
||||||
margin-bottom: var(--cds-layout-01);
|
|
||||||
}
|
|
||||||
|
|
||||||
.bx--col > h2,
|
|
||||||
.bx--tab-content > h2,
|
|
||||||
.bx--col > h3,
|
|
||||||
.bx--col > h4 {
|
|
||||||
scroll-margin-top: 3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bx--col > p {
|
|
||||||
margin-bottom: var(--cds-layout-02);
|
|
||||||
}
|
|
||||||
|
|
@ -1,6 +1,4 @@
|
||||||
import App from "./App.svelte";
|
import App from "./App.svelte";
|
||||||
import "../../css/all.css";
|
|
||||||
import "./global.css";
|
|
||||||
|
|
||||||
const app = new App({ target: document.body });
|
const app = new App({ target: document.body });
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -13,7 +13,7 @@
|
||||||
Tab,
|
Tab,
|
||||||
TabContent,
|
TabContent,
|
||||||
} from "carbon-components-svelte";
|
} from "carbon-components-svelte";
|
||||||
import Code from "carbon-icons-svelte/lib/Code.svelte";
|
import Code16 from "carbon-icons-svelte/lib/Code16";
|
||||||
import { page, metatags } from "@sveltech/routify";
|
import { page, metatags } from "@sveltech/routify";
|
||||||
import { onMount } from "svelte";
|
import { onMount } from "svelte";
|
||||||
import { theme } from "../store";
|
import { theme } from "../store";
|
||||||
|
|
@ -22,6 +22,7 @@
|
||||||
|
|
||||||
export let component = $page.title;
|
export let component = $page.title;
|
||||||
export let components = [component];
|
export let components = [component];
|
||||||
|
export let source = "";
|
||||||
export let unreleased = false;
|
export let unreleased = false;
|
||||||
export let unstable = false;
|
export let unstable = false;
|
||||||
|
|
||||||
|
|
@ -29,52 +30,26 @@
|
||||||
|
|
||||||
// TODO: `find` is not supported in IE
|
// TODO: `find` is not supported in IE
|
||||||
$: api_components = components.map((i) =>
|
$: api_components = components.map((i) =>
|
||||||
COMPONENT_API.components.find((_) => _.moduleName === i),
|
COMPONENT_API.components.find((_) => _.moduleName === i)
|
||||||
);
|
);
|
||||||
$: multiple = api_components.length > 1;
|
$: multiple = api_components.length > 1;
|
||||||
|
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
const searchParams = new URLSearchParams(window.location.search);
|
const currentTheme = window.location.search.split("?theme=")[1];
|
||||||
const current_theme = searchParams.get("theme");
|
|
||||||
|
|
||||||
if (["white", "g10", "g80", "g90", "g100"].includes(current_theme)) {
|
if (["white", "g10", "g90", "g100"].includes(currentTheme)) {
|
||||||
theme.set(current_theme);
|
theme.set(currentTheme);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
function formatSourceURL(multiple) {
|
|
||||||
const filePath = api_components[0]?.filePath ?? "";
|
|
||||||
|
|
||||||
if (multiple) {
|
|
||||||
/**
|
|
||||||
* Link to folder for doc with multiple components.
|
|
||||||
* @example "src/Breadcrumb"
|
|
||||||
*/
|
|
||||||
return filePath.split("/").slice(0, -1).join("/");
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Else, link to the component source.
|
|
||||||
* @example "src/Tile/ClickableTile.svelte"
|
|
||||||
*/
|
|
||||||
return filePath;
|
|
||||||
}
|
|
||||||
|
|
||||||
// TODO: [refactor] read from package.json value
|
// TODO: [refactor] read from package.json value
|
||||||
$: sourceCode = `https://github.com/carbon-design-system/carbon-components-svelte/tree/master/${formatSourceURL(
|
$: sourceCode = `https://github.com/IBM/carbon-components-svelte/tree/master/src/${
|
||||||
multiple,
|
source || `${$page.title}/${$page.title}.svelte`
|
||||||
)}`;
|
}`;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<svelte:head>
|
|
||||||
<link
|
|
||||||
rel="canonical"
|
|
||||||
href="https://svelte.carbondesignsystem.com/components/{component}"
|
|
||||||
/>
|
|
||||||
</svelte:head>
|
|
||||||
|
|
||||||
<Content data-components>
|
<Content data-components>
|
||||||
<Grid class="fix-overflow">
|
<Grid>
|
||||||
<Row>
|
<Row>
|
||||||
<Column>
|
<Column>
|
||||||
<h1>{component}</h1>
|
<h1>{component}</h1>
|
||||||
|
|
@ -83,11 +58,10 @@
|
||||||
id="select-theme"
|
id="select-theme"
|
||||||
inline
|
inline
|
||||||
labelText="Theme"
|
labelText="Theme"
|
||||||
bind:selected={$theme}
|
bind:selected="{$theme}"
|
||||||
>
|
>
|
||||||
<SelectItem value="white" text="White" />
|
<SelectItem value="white" text="White" />
|
||||||
<SelectItem value="g10" text="Gray 10" />
|
<SelectItem value="g10" text="Gray 10" />
|
||||||
<SelectItem value="g80" text="Gray 80" />
|
|
||||||
<SelectItem value="g90" text="Gray 90" />
|
<SelectItem value="g90" text="Gray 90" />
|
||||||
<SelectItem value="g100" text="Gray 100" />
|
<SelectItem value="g100" text="Gray 100" />
|
||||||
</Select>
|
</Select>
|
||||||
|
|
@ -95,8 +69,8 @@
|
||||||
kind="ghost"
|
kind="ghost"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
size="field"
|
size="field"
|
||||||
href={sourceCode}
|
href="{sourceCode}"
|
||||||
icon={Code}
|
icon="{Code16}"
|
||||||
>
|
>
|
||||||
Source code
|
Source code
|
||||||
</Button>
|
</Button>
|
||||||
|
|
@ -125,18 +99,15 @@
|
||||||
<Row>
|
<Row>
|
||||||
<Column class="prose">
|
<Column class="prose">
|
||||||
<div class="toc mobile">
|
<div class="toc mobile">
|
||||||
<h5>Examples</h5>
|
<h5>Table of Contents</h5>
|
||||||
<slot name="aside" />
|
<slot name="aside" />
|
||||||
</div>
|
</div>
|
||||||
|
<h2 id="usage">Usage</h2>
|
||||||
<slot />
|
<slot />
|
||||||
<h2 id="component-api">Component API</h2>
|
<h2 id="component-api">Component API</h2>
|
||||||
<p>
|
<p>
|
||||||
API documentation is
|
API documentation is
|
||||||
<Link
|
<Link inline href="https://github.com/IBM/sveld" target="_blank">
|
||||||
inline
|
|
||||||
href="https://github.com/carbon-design-system/sveld"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
auto-generated by sveld.
|
auto-generated by sveld.
|
||||||
</Link>
|
</Link>
|
||||||
</p>
|
</p>
|
||||||
|
|
@ -144,36 +115,64 @@
|
||||||
</Row>
|
</Row>
|
||||||
|
|
||||||
<Row>
|
<Row>
|
||||||
<Column class="prose" noGutter={multiple}>
|
<Column class="prose" noGutter="{multiple}">
|
||||||
{#if multiple}
|
{#if multiple}
|
||||||
<Tabs class="override-tabs">
|
<Tabs class="override-tabs">
|
||||||
{#each api_components as component (component.moduleName)}
|
{#each api_components as component (component.moduleName)}
|
||||||
<Tab label={component.moduleName} />
|
<Tab label="{component.moduleName}" />
|
||||||
{/each}
|
{/each}
|
||||||
<div slot="content" style="padding-top: var(--cds-spacing-06)">
|
<div slot="content" style="padding-top: var(--cds-spacing-06)">
|
||||||
{#each api_components as component (component.moduleName)}
|
{#each api_components as component (component.moduleName)}
|
||||||
<TabContent>
|
<TabContent>
|
||||||
<ComponentApi {component} />
|
<ComponentApi component="{component}" />
|
||||||
</TabContent>
|
</TabContent>
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
</Tabs>
|
</Tabs>
|
||||||
{:else}
|
{:else}
|
||||||
<ComponentApi component={api_components[0]} />
|
<ComponentApi component="{api_components[0]}" />
|
||||||
{/if}
|
{/if}
|
||||||
</Column>
|
</Column>
|
||||||
</Row>
|
</Row>
|
||||||
</Grid>
|
</Grid>
|
||||||
|
|
||||||
<Column class="table" xlg={4} lg={5}>
|
<Column class="table" xlg="{4}" lg="{5}">
|
||||||
<div class="toc">
|
<div class="toc">
|
||||||
<h5>Examples</h5>
|
<h5>Table of Contents</h5>
|
||||||
<slot name="aside" />
|
<slot name="aside" />
|
||||||
</div>
|
</div>
|
||||||
</Column>
|
</Column>
|
||||||
</Content>
|
</Content>
|
||||||
|
|
||||||
<style>
|
<style global>
|
||||||
|
.override-tabs a.bx--tabs__nav-link,
|
||||||
|
.override-tabs a.bx--tabs__nav-link:focus,
|
||||||
|
.override-tabs a.bx--tabs__nav-link:active {
|
||||||
|
width: auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#select-theme {
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose > p > .bx--link {
|
||||||
|
font-size: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose .toc {
|
||||||
|
margin-bottom: var(--cds-layout-01);
|
||||||
|
}
|
||||||
|
|
||||||
|
.table {
|
||||||
|
position: sticky;
|
||||||
|
max-height: calc(100vh - 3rem);
|
||||||
|
top: 3rem;
|
||||||
|
padding-top: var(--cds-spacing-05);
|
||||||
|
padding-bottom: var(--cds-spacing-05);
|
||||||
|
padding-left: var(--cds-spacing-08);
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
.bar {
|
.bar {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
@ -181,8 +180,17 @@
|
||||||
border-bottom: 1px solid var(--cds-ui-03);
|
border-bottom: 1px solid var(--cds-ui-03);
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.toc h5) {
|
[data-components] {
|
||||||
margin-top: var(--cds-spacing-06);
|
z-index: 2;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-components] .bx--grid {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc h5 {
|
||||||
margin-bottom: var(--cds-spacing-03);
|
margin-bottom: var(--cds-spacing-03);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -191,9 +199,21 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 1056px) {
|
@media (max-width: 1056px) {
|
||||||
|
.table {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
.toc.mobile {
|
.toc.mobile {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: var(--cds-spacing-09);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.preview-viewer > .bx--aspect-ratio,
|
||||||
|
.preview-viewer [data-outline] {
|
||||||
|
outline: 1px solid var(--cds-interactive-04);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-outline] {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
124
docs/src/layouts/Recipe.svelte
Normal file
124
docs/src/layouts/Recipe.svelte
Normal file
|
|
@ -0,0 +1,124 @@
|
||||||
|
<script>
|
||||||
|
import {
|
||||||
|
Grid,
|
||||||
|
Row,
|
||||||
|
Column,
|
||||||
|
Content,
|
||||||
|
Select,
|
||||||
|
SelectItem,
|
||||||
|
} from "carbon-components-svelte";
|
||||||
|
import { page, metatags } from "@sveltech/routify";
|
||||||
|
import { onMount } from "svelte";
|
||||||
|
import { theme } from "../store";
|
||||||
|
|
||||||
|
export let component = $page.title;
|
||||||
|
|
||||||
|
metatags.title = $page.title;
|
||||||
|
|
||||||
|
onMount(() => {
|
||||||
|
const currentTheme = window.location.search.split("?theme=")[1];
|
||||||
|
|
||||||
|
if (["white", "g10", "g90", "g100"].includes(currentTheme)) {
|
||||||
|
theme.set(currentTheme);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Content data-components>
|
||||||
|
<Grid>
|
||||||
|
<Row>
|
||||||
|
<Column>
|
||||||
|
<h1>{component}</h1>
|
||||||
|
<div class="bar">
|
||||||
|
<Select
|
||||||
|
id="select-theme"
|
||||||
|
inline
|
||||||
|
labelText="Theme"
|
||||||
|
bind:selected="{$theme}"
|
||||||
|
>
|
||||||
|
<SelectItem value="white" text="White" />
|
||||||
|
<SelectItem value="g10" text="Gray 10" />
|
||||||
|
<SelectItem value="g90" text="Gray 90" />
|
||||||
|
<SelectItem value="g100" text="Gray 100" />
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
</Column>
|
||||||
|
</Row>
|
||||||
|
|
||||||
|
<Row>
|
||||||
|
<Column class="prose">
|
||||||
|
<div class="toc mobile">
|
||||||
|
<h5>Table of Contents</h5>
|
||||||
|
<slot name="aside" />
|
||||||
|
</div>
|
||||||
|
<slot />
|
||||||
|
</Column>
|
||||||
|
</Row>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
<Column class="table" xlg="{4}" lg="{5}">
|
||||||
|
<div class="toc">
|
||||||
|
<h5>Table of Contents</h5>
|
||||||
|
<slot name="aside" />
|
||||||
|
</div>
|
||||||
|
</Column>
|
||||||
|
</Content>
|
||||||
|
|
||||||
|
<style global>
|
||||||
|
#select-theme {
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose > p > .bx--link {
|
||||||
|
font-size: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose .toc {
|
||||||
|
margin-bottom: var(--cds-layout-01);
|
||||||
|
}
|
||||||
|
|
||||||
|
.table {
|
||||||
|
position: sticky;
|
||||||
|
max-height: calc(100vh - 3rem);
|
||||||
|
top: 3rem;
|
||||||
|
padding-top: var(--cds-spacing-05);
|
||||||
|
padding-bottom: var(--cds-spacing-05);
|
||||||
|
padding-left: var(--cds-spacing-08);
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bar {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: var(--cds-layout-02);
|
||||||
|
border-bottom: 1px solid var(--cds-ui-03);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-components] {
|
||||||
|
z-index: 2;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-components] .bx--grid {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc h5 {
|
||||||
|
margin-bottom: var(--cds-spacing-03);
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc.mobile {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1056px) {
|
||||||
|
.table {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc.mobile {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -12,7 +12,7 @@
|
||||||
<h1>404</h1>
|
<h1>404</h1>
|
||||||
<div>
|
<div>
|
||||||
Page not found.
|
Page not found.
|
||||||
<Link href={$url("/")}>Return home</Link>
|
<Link href="{$url('/')}">Return home</Link>
|
||||||
</div>
|
</div>
|
||||||
</Column>
|
</Column>
|
||||||
</Row>
|
</Row>
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,5 @@
|
||||||
<script>
|
<script>
|
||||||
import {
|
import { isActive, url, layout, beforeUrlChange } from "@sveltech/routify";
|
||||||
isActive,
|
|
||||||
url,
|
|
||||||
layout,
|
|
||||||
beforeUrlChange,
|
|
||||||
goto,
|
|
||||||
} from "@sveltech/routify";
|
|
||||||
import {
|
import {
|
||||||
Header,
|
Header,
|
||||||
HeaderUtilities,
|
HeaderUtilities,
|
||||||
|
|
@ -14,37 +8,19 @@
|
||||||
HeaderPanelLinks,
|
HeaderPanelLinks,
|
||||||
HeaderPanelLink,
|
HeaderPanelLink,
|
||||||
HeaderPanelDivider,
|
HeaderPanelDivider,
|
||||||
HeaderSearch,
|
|
||||||
SkipToContent,
|
SkipToContent,
|
||||||
SideNav,
|
SideNav,
|
||||||
SideNavItems,
|
SideNavItems,
|
||||||
|
SideNavMenu,
|
||||||
SideNavMenuItem,
|
SideNavMenuItem,
|
||||||
Theme,
|
|
||||||
Tag,
|
Tag,
|
||||||
} from "carbon-components-svelte";
|
} from "carbon-components-svelte";
|
||||||
import MiniSearch from "minisearch";
|
import LogoGithub20 from "carbon-icons-svelte/lib/LogoGithub20";
|
||||||
import LogoGithub from "carbon-icons-svelte/lib/LogoGithub.svelte";
|
import Theme from "../components/Theme.svelte";
|
||||||
import { theme } from "../store";
|
import Footer from "../components/Footer.svelte";
|
||||||
import SEARCH_INDEX from "../SEARCH_INDEX.json";
|
|
||||||
|
|
||||||
const miniSearch = new MiniSearch({
|
const deprecated = ["ToggleSmall", "Icon"];
|
||||||
fields: ["text", "description"],
|
const new_components = ["Popover", "ContextMenu"];
|
||||||
storeFields: ["text", "description", "href"],
|
|
||||||
searchOptions: {
|
|
||||||
prefix: true,
|
|
||||||
boost: { description: 2 },
|
|
||||||
fuzzy: 0.1,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
miniSearch.addAll(SEARCH_INDEX);
|
|
||||||
|
|
||||||
const deprecated = [];
|
|
||||||
const new_components = [];
|
|
||||||
|
|
||||||
let value = "";
|
|
||||||
let active = false;
|
|
||||||
$: results = miniSearch.search(value).slice(0, 10);
|
|
||||||
|
|
||||||
let isOpen = false;
|
let isOpen = false;
|
||||||
let isSideNavOpen = true;
|
let isSideNavOpen = true;
|
||||||
|
|
@ -52,8 +28,9 @@
|
||||||
|
|
||||||
$: isMobile = innerWidth < 1056;
|
$: isMobile = innerWidth < 1056;
|
||||||
$: components = $layout.children.filter(
|
$: components = $layout.children.filter(
|
||||||
(child) => child.title === "components",
|
(child) => child.title === "components"
|
||||||
)[0];
|
)[0];
|
||||||
|
$: recipes = $layout.children.filter((child) => child.title === "recipes")[0];
|
||||||
|
|
||||||
$beforeUrlChange(() => {
|
$beforeUrlChange(() => {
|
||||||
if (isMobile) isSideNavOpen = false;
|
if (isMobile) isSideNavOpen = false;
|
||||||
|
|
@ -64,115 +41,36 @@
|
||||||
<!-- routify:options bundle=true -->
|
<!-- routify:options bundle=true -->
|
||||||
<svelte:window bind:innerWidth />
|
<svelte:window bind:innerWidth />
|
||||||
|
|
||||||
<svelte:body
|
<Theme persist>
|
||||||
on:keydown={(e) => {
|
|
||||||
if (active) return;
|
|
||||||
if (
|
|
||||||
document.activeElement instanceof HTMLInputElement ||
|
|
||||||
document.activeElement instanceof HTMLTextAreaElement
|
|
||||||
) {
|
|
||||||
// Exit early if an inputtable element is already focused.
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const isCommandOrControl = e.metaKey || e.ctrlKey;
|
|
||||||
const isCmdK = isCommandOrControl && e.key.toLowerCase() === "k";
|
|
||||||
const isSlash = e.key === "/";
|
|
||||||
|
|
||||||
if (isCmdK || isSlash) {
|
|
||||||
e.preventDefault();
|
|
||||||
active = true;
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<svelte:head>
|
|
||||||
<!-- Tealium/GA Set up -->
|
|
||||||
<script type="text/javascript">
|
|
||||||
window._ibmAnalytics = {
|
|
||||||
settings: {
|
|
||||||
name: "CarbonSvelte",
|
|
||||||
isSpa: true,
|
|
||||||
tealiumProfileName: "ibm-web-app",
|
|
||||||
},
|
|
||||||
onLoad: [["ibmStats.pageview", []]],
|
|
||||||
};
|
|
||||||
digitalData = {
|
|
||||||
page: {
|
|
||||||
pageInfo: {
|
|
||||||
ibm: {
|
|
||||||
siteId: "IBM_" + _ibmAnalytics.settings.name,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
category: {
|
|
||||||
primaryCategory: "PC100",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<script
|
|
||||||
type="module"
|
|
||||||
defer
|
|
||||||
src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/footer.min.js"
|
|
||||||
></script>
|
|
||||||
<script
|
|
||||||
src="//1.www.s81c.com/common/stats/ibm-common.js"
|
|
||||||
type="text/javascript"
|
|
||||||
defer
|
|
||||||
></script>
|
|
||||||
</svelte:head>
|
|
||||||
|
|
||||||
<Theme
|
|
||||||
persist
|
|
||||||
bind:theme={$theme}
|
|
||||||
on:update={(e) => {
|
|
||||||
const theme = e.detail.theme;
|
|
||||||
document.documentElement.style.setProperty(
|
|
||||||
"color-scheme",
|
|
||||||
["white", "g10"].includes(theme) ? "light" : "dark",
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Header
|
<Header
|
||||||
aria-label="Navigation"
|
aria-label="Navigation"
|
||||||
href={$url("/")}
|
href="{$url('/')}"
|
||||||
expandedByDefault={true}
|
expandedByDefault="{true}"
|
||||||
bind:isSideNavOpen
|
bind:isSideNavOpen
|
||||||
>
|
>
|
||||||
<svelte:fragment slot="skip-to-content">
|
<div slot="skip-to-content">
|
||||||
<SkipToContent />
|
<SkipToContent />
|
||||||
</svelte:fragment>
|
</div>
|
||||||
|
|
||||||
<span slot="platform" class="platform-name" class:hidden={active}>
|
<span slot="platform" class="platform-name">
|
||||||
Carbon Components Svelte <code class="code-01"
|
Carbon Components Svelte
|
||||||
>v{process.env.VERSION || ""}</code
|
<code>v{process.env.VERSION || ""}</code>
|
||||||
>
|
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<HeaderUtilities>
|
<HeaderUtilities>
|
||||||
<HeaderSearch
|
|
||||||
bind:value
|
|
||||||
bind:active
|
|
||||||
placeholder="Search"
|
|
||||||
{results}
|
|
||||||
on:select={(e) => {
|
|
||||||
$goto(e.detail.selectedResult.href);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<HeaderActionLink
|
<HeaderActionLink
|
||||||
icon={LogoGithub}
|
icon="{LogoGithub20}"
|
||||||
href="https://github.com/carbon-design-system/carbon-components-svelte"
|
href="https://github.com/IBM/carbon-components-svelte"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
/>
|
/>
|
||||||
<HeaderAction transition={false} bind:isOpen>
|
<HeaderAction transition="{false}" bind:isOpen>
|
||||||
<HeaderPanelLinks>
|
<HeaderPanelLinks>
|
||||||
<HeaderPanelDivider>Carbon Svelte portfolio</HeaderPanelDivider>
|
<HeaderPanelDivider>Carbon Svelte portfolio</HeaderPanelDivider>
|
||||||
<HeaderPanelLink
|
<HeaderPanelLink href="https://github.com/IBM/carbon-icons-svelte">
|
||||||
href="https://github.com/carbon-design-system/carbon-icons-svelte"
|
|
||||||
>
|
|
||||||
Carbon Icons Svelte
|
Carbon Icons Svelte
|
||||||
</HeaderPanelLink>
|
</HeaderPanelLink>
|
||||||
<HeaderPanelLink
|
<HeaderPanelLink
|
||||||
href="https://github.com/carbon-design-system/carbon-pictograms-svelte"
|
href="https://github.com/IBM/carbon-pictograms-svelte"
|
||||||
>
|
>
|
||||||
Carbon Pictograms Svelte
|
Carbon Pictograms Svelte
|
||||||
</HeaderPanelLink>
|
</HeaderPanelLink>
|
||||||
|
|
@ -181,11 +79,6 @@
|
||||||
>
|
>
|
||||||
Carbon Charts Svelte
|
Carbon Charts Svelte
|
||||||
</HeaderPanelLink>
|
</HeaderPanelLink>
|
||||||
<HeaderPanelLink
|
|
||||||
href="https://github.com/carbon-design-system/carbon-preprocess-svelte"
|
|
||||||
>
|
|
||||||
Carbon Preprocess Svelte
|
|
||||||
</HeaderPanelLink>
|
|
||||||
<HeaderPanelDivider>Resources</HeaderPanelDivider>
|
<HeaderPanelDivider>Resources</HeaderPanelDivider>
|
||||||
<HeaderPanelLink href="https://www.carbondesignsystem.com/">
|
<HeaderPanelLink href="https://www.carbondesignsystem.com/">
|
||||||
Carbon Design System
|
Carbon Design System
|
||||||
|
|
@ -198,13 +91,17 @@
|
||||||
</HeaderUtilities>
|
</HeaderUtilities>
|
||||||
</Header>
|
</Header>
|
||||||
|
|
||||||
<SideNav bind:isOpen={isSideNavOpen}>
|
<SideNav bind:isOpen="{isSideNavOpen}">
|
||||||
<SideNavItems>
|
<SideNavItems>
|
||||||
{#each components.children.filter((child) => !deprecated.includes(child.title)) as child (child.path)}
|
<SideNavMenu
|
||||||
|
expanded="{$isActive($url('')) || $isActive($url('/components'))}"
|
||||||
|
text="Components"
|
||||||
|
>
|
||||||
|
{#each components.children as child, i (child.path)}
|
||||||
<SideNavMenuItem
|
<SideNavMenuItem
|
||||||
text={child.title}
|
text="{child.title}"
|
||||||
href={$url(child.path)}
|
href="{$url(child.path)}"
|
||||||
isSelected={$isActive($url(child.path))}
|
isSelected="{$isActive($url(child.path))}"
|
||||||
>
|
>
|
||||||
{child.title}
|
{child.title}
|
||||||
{#if deprecated.includes(child.title)}
|
{#if deprecated.includes(child.title)}
|
||||||
|
|
@ -227,16 +124,116 @@
|
||||||
{/if}
|
{/if}
|
||||||
</SideNavMenuItem>
|
</SideNavMenuItem>
|
||||||
{/each}
|
{/each}
|
||||||
|
</SideNavMenu>
|
||||||
|
<SideNavMenu expanded="{$isActive($url('/recipes'))}" text="Recipes">
|
||||||
|
{#each recipes.children as child, i (child.path)}
|
||||||
|
<SideNavMenuItem
|
||||||
|
href="{$url(child.path)}"
|
||||||
|
isSelected="{$isActive($url(child.path))}"
|
||||||
|
>
|
||||||
|
{child.title}
|
||||||
|
</SideNavMenuItem>
|
||||||
|
{/each}
|
||||||
|
</SideNavMenu>
|
||||||
</SideNavItems>
|
</SideNavItems>
|
||||||
</SideNav>
|
</SideNav>
|
||||||
<slot />
|
<slot />
|
||||||
|
<Footer />
|
||||||
</Theme>
|
</Theme>
|
||||||
|
|
||||||
<style>
|
<style global>
|
||||||
/** Hide logo to make space for search bar on narrower screens. */
|
.body-short-01 {
|
||||||
|
font-size: var(--cds-body-short-01-font-size);
|
||||||
|
font-weight: var(--cds-body-short-01-font-weight);
|
||||||
|
letter-spacing: var(--cds-body-short-01-letter-spacing);
|
||||||
|
line-height: var(--cds-body-short-01-line-height);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bx--col > h1 {
|
||||||
|
font-size: var(--cds-display-01-font-size);
|
||||||
|
font-weight: var(--cds-display-01-font-weight);
|
||||||
|
letter-spacing: var(--cds-display-01-letter-spacing);
|
||||||
|
line-height: var(--cds-display-01-line-height);
|
||||||
|
margin-bottom: var(--cds-layout-01);
|
||||||
|
}
|
||||||
|
|
||||||
|
.big-paragraph {
|
||||||
|
font-size: var(--cds-expressive-heading-03-font-size);
|
||||||
|
font-weight: var(--cds-expressive-heading-03-font-weight);
|
||||||
|
letter-spacing: var(--cds-expressive-heading-03-letter-spacing);
|
||||||
|
line-height: var(--cds-expressive-heading-03-line-height);
|
||||||
|
margin-top: var(--cds-layout-03);
|
||||||
|
margin-bottom: var(--cds-layout-06);
|
||||||
|
}
|
||||||
|
|
||||||
|
.big-link,
|
||||||
|
.bx--col > .big-paragraph > code {
|
||||||
|
font-size: var(--cds-expressive-heading-03-font-size);
|
||||||
|
font-weight: var(--cds-expressive-heading-03-font-weight);
|
||||||
|
letter-spacing: var(--cds-expressive-heading-03-letter-spacing);
|
||||||
|
line-height: var(--cds-expressive-heading-03-line-height);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bx--col > p {
|
||||||
|
max-width: 44rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bx--col > p > code {
|
||||||
|
font-size: var(--cds-code-02-font-size);
|
||||||
|
font-weight: var(--cds-code-02-font-weight);
|
||||||
|
line-height: var(--cds-code-02-line-height);
|
||||||
|
letter-spacing: var(--cds-code-02-letter-spacing);
|
||||||
|
background-color: var(--cds-ui-03);
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
padding: 0 var(--cds-spacing-02);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bx--col > h2 {
|
||||||
|
font-size: var(--cds-expressive-heading-05-font-size);
|
||||||
|
font-weight: var(--cds-expressive-heading-05-font-weight);
|
||||||
|
letter-spacing: var(--cds-expressive-heading-05-letter-spacing);
|
||||||
|
line-height: var(--cds-expressive-heading-05-line-height);
|
||||||
|
padding-top: var(--cds-layout-04);
|
||||||
|
margin-bottom: var(--cds-layout-01);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bx--col > h3 {
|
||||||
|
font-size: var(--cds-expressive-heading-04-font-size);
|
||||||
|
font-weight: var(--cds-expressive-heading-04-font-weight);
|
||||||
|
letter-spacing: var(--cds-expressive-heading-04-letter-spacing);
|
||||||
|
line-height: var(--cds-expressive-heading-04-line-height);
|
||||||
|
padding-top: var(--cds-layout-04);
|
||||||
|
margin-bottom: var(--cds-layout-01);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bx--col > h4 {
|
||||||
|
font-size: var(--cds-expressive-heading-02-font-size);
|
||||||
|
font-weight: var(--cds-expressive-heading-02-font-weight);
|
||||||
|
letter-spacing: var(--cds-expressive-heading-02-letter-spacing);
|
||||||
|
line-height: var(--cds-expressive-heading-02-line-height);
|
||||||
|
padding-top: var(--cds-layout-04);
|
||||||
|
margin-bottom: var(--cds-layout-01);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bx--col > p {
|
||||||
|
margin-bottom: var(--cds-layout-02);
|
||||||
|
}
|
||||||
|
|
||||||
|
main.bx--content {
|
||||||
|
background: none;
|
||||||
|
min-height: calc(100vh - 3rem - 3rem);
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: 1056px) {
|
@media (max-width: 1056px) {
|
||||||
.platform-name.hidden {
|
.bx--side-nav ~ .bx--content {
|
||||||
display: none;
|
margin-left: 0;
|
||||||
|
padding-left: 1rem;
|
||||||
|
padding-right: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bx--side-nav--expanded ~ .bx--content {
|
||||||
|
white-space: nowrap;
|
||||||
|
min-width: 28rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -245,9 +242,28 @@
|
||||||
align-items: baseline;
|
align-items: baseline;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.platform-name code {
|
||||||
|
margin-left: var(--cds-spacing-02);
|
||||||
|
font-size: var(--cds-code-01-font-size);
|
||||||
|
font-weight: var(--cds-code-01-font-weight);
|
||||||
|
letter-spacing: var(--cds-code-01-letter-spacing);
|
||||||
|
line-height: var(--cds-code-01-line-height);
|
||||||
|
color: #c6c6c6;
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: 580px) {
|
@media (max-width: 580px) {
|
||||||
.platform-name code {
|
.platform-name code {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1057px) {
|
||||||
|
.bx--side-nav__navigation {
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bx--side-nav__submenu[aria-expanded="true"] + .bx--side-nav__menu {
|
||||||
|
max-height: 124rem;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -10,14 +10,9 @@ components: ["Accordion", "AccordionItem", "AccordionSkeleton"]
|
||||||
import Preview from "../../components/Preview.svelte";
|
import Preview from "../../components/Preview.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
`Accordion` creates a vertically stacked list of expandable sections that show or hide content. It supports custom titles, different sizes, and various states including disabled and skeleton loading.
|
See the [ExpandableAccordion recipe](/recipes/ExpandableAccordion) for a toggleable accordion component.
|
||||||
|
|
||||||
## Default
|
### Default
|
||||||
|
|
||||||
Use the `Accordion` and `AccordionItem` components to compose a collapsible list of
|
|
||||||
items.
|
|
||||||
|
|
||||||
By default, the chevron icon is on the right side of the accordion item.
|
|
||||||
|
|
||||||
<Accordion>
|
<Accordion>
|
||||||
<AccordionItem title="Natural Language Classifier">
|
<AccordionItem title="Natural Language Classifier">
|
||||||
|
|
@ -32,11 +27,7 @@ By default, the chevron icon is on the right side of the accordion item.
|
||||||
</AccordionItem>
|
</AccordionItem>
|
||||||
</Accordion>
|
</Accordion>
|
||||||
|
|
||||||
## Left-aligned chevron
|
### Left-aligned chevron
|
||||||
|
|
||||||
The chevron icon can be aligned to the left side of the accordion item by setting
|
|
||||||
the `align` prop to "start". This provides an alternative visual style while
|
|
||||||
maintaining the same functionality.
|
|
||||||
|
|
||||||
<Accordion align="start">
|
<Accordion align="start">
|
||||||
<AccordionItem title="Natural Language Classifier">
|
<AccordionItem title="Natural Language Classifier">
|
||||||
|
|
@ -51,40 +42,34 @@ maintaining the same functionality.
|
||||||
</AccordionItem>
|
</AccordionItem>
|
||||||
</Accordion>
|
</Accordion>
|
||||||
|
|
||||||
## Custom title slot
|
### Custom title slot
|
||||||
|
|
||||||
Customize the title content by using the `title` slot instead of the `title` prop.
|
|
||||||
This allows for more complex title layouts with multiple elements.
|
|
||||||
|
|
||||||
<Accordion>
|
<Accordion>
|
||||||
<AccordionItem>
|
<AccordionItem>
|
||||||
<svelte:fragment slot="title">
|
<div slot="title">
|
||||||
<h5>Natural Language Classifier</h5>
|
<h5>Natural Language Classifier</h5>
|
||||||
<div>AI / Machine Learning</div>
|
<div>AI / Machine Learning</div>
|
||||||
</svelte:fragment>
|
</div>
|
||||||
<p>Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text.
|
<p>Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text.
|
||||||
</p>
|
</p>
|
||||||
</AccordionItem>
|
</AccordionItem>
|
||||||
<AccordionItem>
|
<AccordionItem>
|
||||||
<svelte:fragment slot="title">
|
<div slot="title">
|
||||||
<h5>Natural Language Understanding</h5>
|
<h5>Natural Language Understanding</h5>
|
||||||
<div>AI / Machine Learning</div>
|
<div>AI / Machine Learning</div>
|
||||||
</svelte:fragment>
|
</div>
|
||||||
<p>Analyze text to extract meta-data from content such as concepts, entities, emotion, relations, sentiment and more.</p>
|
<p>Analyze text to extract meta-data from content such as concepts, entities, emotion, relations, sentiment and more.</p>
|
||||||
</AccordionItem>
|
</AccordionItem>
|
||||||
<AccordionItem>
|
<AccordionItem>
|
||||||
<svelte:fragment slot="title">
|
<div slot="title">
|
||||||
<h5>Language Translator</h5>
|
<h5>Language Translator</h5>
|
||||||
<div>AI / Machine Learning</div>
|
<div>AI / Machine Learning</div>
|
||||||
</svelte:fragment>
|
</div>
|
||||||
<p>Translate text, documents, and websites from one language to another. Create industry or region-specific translations via the service's customization capability.</p>
|
<p>Translate text, documents, and websites from one language to another. Create industry or region-specific translations via the service's customization capability.</p>
|
||||||
</AccordionItem>
|
</AccordionItem>
|
||||||
</Accordion>
|
</Accordion>
|
||||||
|
|
||||||
## First item open
|
### First item open
|
||||||
|
|
||||||
Set the `open` prop on an `AccordionItem` to have it expanded by default when the
|
|
||||||
accordion is first rendered.
|
|
||||||
|
|
||||||
<Accordion>
|
<Accordion>
|
||||||
<AccordionItem open title="Natural Language Classifier">
|
<AccordionItem open title="Natural Language Classifier">
|
||||||
|
|
@ -99,19 +84,7 @@ accordion is first rendered.
|
||||||
</AccordionItem>
|
</AccordionItem>
|
||||||
</Accordion>
|
</Accordion>
|
||||||
|
|
||||||
## Programmatic example
|
### Extra-large size
|
||||||
|
|
||||||
This example demonstrates how to programmatically control the accordion items using
|
|
||||||
the `bind:open` directive. Expand and collapse items based on user
|
|
||||||
interactions or application state.
|
|
||||||
|
|
||||||
<FileSource src="/framed/Accordion/ExpandableAccordion" />
|
|
||||||
|
|
||||||
## Extra-large size
|
|
||||||
|
|
||||||
The accordion can be displayed in an extra-large size by setting the `size` prop to
|
|
||||||
"xl". This provides more visual emphasis and is suitable for prominent content
|
|
||||||
sections.
|
|
||||||
|
|
||||||
<Accordion size="xl">
|
<Accordion size="xl">
|
||||||
<AccordionItem title="Natural Language Classifier">
|
<AccordionItem title="Natural Language Classifier">
|
||||||
|
|
@ -126,11 +99,7 @@ sections.
|
||||||
</AccordionItem>
|
</AccordionItem>
|
||||||
</Accordion>
|
</Accordion>
|
||||||
|
|
||||||
## Small size
|
### Small size
|
||||||
|
|
||||||
For more compact layouts, set the `size` prop to "sm" to display the accordion in a
|
|
||||||
smaller size. This is useful when space is limited or when the accordion is used as
|
|
||||||
a secondary UI element.
|
|
||||||
|
|
||||||
<Accordion size="sm">
|
<Accordion size="sm">
|
||||||
<AccordionItem title="Natural Language Classifier">
|
<AccordionItem title="Natural Language Classifier">
|
||||||
|
|
@ -145,10 +114,7 @@ a secondary UI element.
|
||||||
</AccordionItem>
|
</AccordionItem>
|
||||||
</Accordion>
|
</Accordion>
|
||||||
|
|
||||||
## Disabled
|
### Disabled
|
||||||
|
|
||||||
Set the `disabled` prop on the `Accordion` component to disable all items at once.
|
|
||||||
This prevents users from expanding or collapsing any items in the accordion.
|
|
||||||
|
|
||||||
<Accordion disabled>
|
<Accordion disabled>
|
||||||
<AccordionItem title="Natural Language Classifier">
|
<AccordionItem title="Natural Language Classifier">
|
||||||
|
|
@ -163,11 +129,7 @@ This prevents users from expanding or collapsing any items in the accordion.
|
||||||
</AccordionItem>
|
</AccordionItem>
|
||||||
</Accordion>
|
</Accordion>
|
||||||
|
|
||||||
## Disabled (item)
|
### Disabled (item)
|
||||||
|
|
||||||
Individual accordion items can be disabled by setting the `disabled` prop on
|
|
||||||
specific `AccordionItem` components. This allows for more granular control over
|
|
||||||
which items are interactive.
|
|
||||||
|
|
||||||
<Accordion>
|
<Accordion>
|
||||||
<AccordionItem disabled title="Natural Language Classifier">
|
<AccordionItem disabled title="Natural Language Classifier">
|
||||||
|
|
@ -182,47 +144,27 @@ which items are interactive.
|
||||||
</AccordionItem>
|
</AccordionItem>
|
||||||
</Accordion>
|
</Accordion>
|
||||||
|
|
||||||
## Skeleton
|
### Skeleton
|
||||||
|
|
||||||
The skeleton state provides a loading placeholder for the accordion. It displays a
|
|
||||||
simplified version of the component while content is being loaded.
|
|
||||||
|
|
||||||
<Accordion skeleton />
|
<Accordion skeleton />
|
||||||
|
|
||||||
## Skeleton (left-aligned chevron)
|
### Skeleton (left-aligned chevron)
|
||||||
|
|
||||||
The skeleton state can be combined with the left-aligned chevron style by setting
|
|
||||||
both the `skeleton` and `align="start"` props.
|
|
||||||
|
|
||||||
<Accordion skeleton align="start" />
|
<Accordion skeleton align="start" />
|
||||||
|
|
||||||
## Skeleton (custom count)
|
### Skeleton (custom count)
|
||||||
|
|
||||||
By default, the skeleton state displays 4 items.
|
|
||||||
|
|
||||||
Specify the number of skeleton items to display using the `count` prop. This is
|
|
||||||
useful when you know the exact number of items that will be loaded.
|
|
||||||
|
|
||||||
<Accordion skeleton count={3} />
|
<Accordion skeleton count={3} />
|
||||||
|
|
||||||
## Skeleton (closed)
|
### Skeleton (closed)
|
||||||
|
|
||||||
By default, the first skeleton item is open. The skeleton state can be displayed
|
|
||||||
in a collapsed state by setting `open={false}`.
|
|
||||||
|
|
||||||
<Accordion skeleton open={false} />
|
<Accordion skeleton open={false} />
|
||||||
|
|
||||||
## Skeleton (extra-large)
|
### Skeleton (extra-large)
|
||||||
|
|
||||||
The skeleton state supports the extra-large size variant, maintaining visual
|
|
||||||
consistency with the active component states.
|
|
||||||
|
|
||||||
<Accordion skeleton size="xl" />
|
<Accordion skeleton size="xl" />
|
||||||
|
|
||||||
## Skeleton (small)
|
### Skeleton (small)
|
||||||
|
|
||||||
The skeleton state also supports the small size variant, providing a compact
|
|
||||||
loading placeholder for space-constrained layouts.
|
|
||||||
|
|
||||||
<Accordion skeleton size="sm" />
|
<Accordion skeleton size="sm" />
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -3,67 +3,53 @@
|
||||||
import Preview from "../../components/Preview.svelte";
|
import Preview from "../../components/Preview.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
The `AspectRatio` component maintains consistent proportions for content across different screen sizes. It's particularly useful for images, videos, and other media that need to preserve their aspect ratio when resizing.
|
The `AspectRatio` component is useful for constraining fluid content within an aspect ratio. To demo this, resize your browser for the examples below.
|
||||||
|
|
||||||
Supported aspect ratios include `"2x1"`, `"2x3"`, `"16x9"`, `"4x3"`, `"1x1"`, `"3x4"`, `"3x2"`, `"9x16"` and `"1x2"`.
|
Supported aspect ratios include `"2x1"`, `"16x9"`, `"4x3"`, `"1x1"`, `"3x4"`, `"9x16"` and `"1x2"`.
|
||||||
|
|
||||||
## Default
|
### Default (2x1)
|
||||||
|
|
||||||
Display a 2:1 aspect ratio container by default.
|
|
||||||
|
|
||||||
<AspectRatio>
|
<AspectRatio>
|
||||||
2x1
|
2x1
|
||||||
</AspectRatio>
|
</AspectRatio>
|
||||||
|
|
||||||
## Ratio 2x3
|
### Ratio 16x9
|
||||||
|
|
||||||
<AspectRatio ratio="2x3">
|
|
||||||
2x3
|
|
||||||
</AspectRatio>
|
|
||||||
|
|
||||||
## Ratio 16x9
|
|
||||||
|
|
||||||
<AspectRatio ratio="16x9">
|
<AspectRatio ratio="16x9">
|
||||||
16x9
|
16x9
|
||||||
</AspectRatio>
|
</AspectRatio>
|
||||||
|
|
||||||
## Ratio 4x3
|
### Ratio 4x3
|
||||||
|
|
||||||
<AspectRatio ratio="4x3">
|
<AspectRatio ratio="4x3">
|
||||||
4x3
|
4x3
|
||||||
</AspectRatio>
|
</AspectRatio>
|
||||||
|
|
||||||
## Ratio 1x1
|
### Ratio 1x1
|
||||||
|
|
||||||
<AspectRatio ratio="1x1">
|
<AspectRatio ratio="1x1">
|
||||||
1x1
|
1x1
|
||||||
</AspectRatio>
|
</AspectRatio>
|
||||||
|
|
||||||
## Ratio 3x4
|
### Ratio 3x4
|
||||||
|
|
||||||
<AspectRatio ratio="3x4">
|
<AspectRatio ratio="3x4">
|
||||||
3x4
|
3x4
|
||||||
</AspectRatio>
|
</AspectRatio>
|
||||||
|
|
||||||
## Ratio 3x2
|
### Ratio 9x16
|
||||||
|
|
||||||
<AspectRatio ratio="3x2">
|
|
||||||
3x2
|
|
||||||
</AspectRatio>
|
|
||||||
|
|
||||||
## Ratio 9x16
|
|
||||||
|
|
||||||
<AspectRatio ratio="9x16">
|
<AspectRatio ratio="9x16">
|
||||||
9x16
|
9x16
|
||||||
</AspectRatio>
|
</AspectRatio>
|
||||||
|
|
||||||
## Ratio 1x2
|
### Ratio 1x2
|
||||||
|
|
||||||
<AspectRatio ratio="1x2">
|
<AspectRatio ratio="1x2">
|
||||||
1x2
|
1x2
|
||||||
</AspectRatio>
|
</AspectRatio>
|
||||||
|
|
||||||
## Tile (16x9)
|
### Tile (16x9)
|
||||||
|
|
||||||
<AspectRatio ratio="16x9">
|
<AspectRatio ratio="16x9">
|
||||||
<Tile style="height: 100%">Content</Tile>
|
<Tile style="height: 100%">Content</Tile>
|
||||||
|
|
|
||||||
|
|
@ -12,11 +12,9 @@ components: ["Breadcrumb", "BreadcrumbItem"]
|
||||||
import Preview from "../../components/Preview.svelte";
|
import Preview from "../../components/Preview.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
`Breadcrumb` displays a hierarchical navigation trail that shows users their current location within an application. It supports current page indication, trailing slash customization, and overflow handling for long navigation paths.
|
See the [Breadcrumbs recipe](/recipes/Breadcrumbs) for a reusable breadcrumbs component.
|
||||||
|
|
||||||
## Default
|
### Default
|
||||||
|
|
||||||
Display a hierarchical navigation trail with slashes between items. Mark the current page with `isCurrentPage`.
|
|
||||||
|
|
||||||
<Breadcrumb>
|
<Breadcrumb>
|
||||||
<BreadcrumbItem href="/">Dashboard</BreadcrumbItem>
|
<BreadcrumbItem href="/">Dashboard</BreadcrumbItem>
|
||||||
|
|
@ -24,18 +22,14 @@ Display a hierarchical navigation trail with slashes between items. Mark the cur
|
||||||
<BreadcrumbItem href="/reports/2019" isCurrentPage>2019</BreadcrumbItem>
|
<BreadcrumbItem href="/reports/2019" isCurrentPage>2019</BreadcrumbItem>
|
||||||
</Breadcrumb>
|
</Breadcrumb>
|
||||||
|
|
||||||
## No trailing slash
|
### No trailing slash
|
||||||
|
|
||||||
Remove the trailing slash from the last breadcrumb item using `noTrailingSlash`.
|
|
||||||
|
|
||||||
<Breadcrumb noTrailingSlash>
|
<Breadcrumb noTrailingSlash>
|
||||||
<BreadcrumbItem href="/">Home</BreadcrumbItem>
|
<BreadcrumbItem href="/">Home</BreadcrumbItem>
|
||||||
<BreadcrumbItem href="/profile" isCurrentPage>Profile</BreadcrumbItem>
|
<BreadcrumbItem href="/profile" isCurrentPage>Profile</BreadcrumbItem>
|
||||||
</Breadcrumb>
|
</Breadcrumb>
|
||||||
|
|
||||||
## Overflow menu
|
### Overflow menu
|
||||||
|
|
||||||
Add an `OverflowMenu` to handle long breadcrumb trails. Use `OverflowMenuItem` components for menu options.
|
|
||||||
|
|
||||||
<Breadcrumb>
|
<Breadcrumb>
|
||||||
<BreadcrumbItem href="/">Home</BreadcrumbItem>
|
<BreadcrumbItem href="/">Home</BreadcrumbItem>
|
||||||
|
|
@ -49,12 +43,6 @@ Add an `OverflowMenu` to handle long breadcrumb trails. Use `OverflowMenuItem` c
|
||||||
<BreadcrumbItem href="/api/data/latest/usage" isCurrentPage>Usage</BreadcrumbItem>
|
<BreadcrumbItem href="/api/data/latest/usage" isCurrentPage>Usage</BreadcrumbItem>
|
||||||
</Breadcrumb>
|
</Breadcrumb>
|
||||||
|
|
||||||
## Breadcrumb trail
|
### Skeleton
|
||||||
|
|
||||||
<FileSource src="/framed/Breadcrumbs/Breadcrumbs" />
|
|
||||||
|
|
||||||
## Skeleton
|
|
||||||
|
|
||||||
Display a loading state with `skeleton` prop. Use `count` to specify the number of items.
|
|
||||||
|
|
||||||
<Breadcrumb noTrailingSlash skeleton count={3} />
|
<Breadcrumb noTrailingSlash skeleton count={3} />
|
||||||
|
|
@ -1,35 +0,0 @@
|
||||||
|
|
||||||
<script>
|
|
||||||
import {
|
|
||||||
UnorderedList, ListItem
|
|
||||||
} from "carbon-components-svelte";
|
|
||||||
import Preview from "../../components/Preview.svelte";
|
|
||||||
</script>
|
|
||||||
|
|
||||||
The Carbon Design System [grid implementation](https://carbondesignsystem.com/guidelines/2x-grid/implementation#responsive-options) defines five responsive breakpoints:
|
|
||||||
|
|
||||||
<UnorderedList svx-ignore style="margin-bottom: var(--cds-spacing-08)">
|
|
||||||
<ListItem><strong>Small</strong>: less than 672px</ListItem>
|
|
||||||
<ListItem><strong>Medium</strong>: 672 - 1056px</ListItem>
|
|
||||||
<ListItem><strong>Large</strong>: 1056 - 1312px</ListItem>
|
|
||||||
<ListItem><strong>X-Large</strong>: 1312 - 1584px</ListItem>
|
|
||||||
<ListItem><strong>Max</strong>: greater than 1584px</ListItem>
|
|
||||||
</UnorderedList>
|
|
||||||
|
|
||||||
This utility component uses the [Window.matchMedia API](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) to declaratively determine the current Carbon breakpoint size.
|
|
||||||
|
|
||||||
## Default
|
|
||||||
|
|
||||||
Bind to the `size` prop to determine the current breakpoint size. Possible values include: `"sm" | "md" | "lg" | "xlg" | "max"`.
|
|
||||||
|
|
||||||
The `"on:change"` event will fire when the size is initially determined and when a breakpoint change event occurs (e.g., the browser width is resized).
|
|
||||||
|
|
||||||
<FileSource src="/framed/Breakpoint/Breakpoint" />
|
|
||||||
|
|
||||||
## Store and Breakpoint Values
|
|
||||||
|
|
||||||
Use `breakpointObserver` as an alternative to the component to get the current size as a Svelte store. The store provides two additional functions that create derived stores returning a `boolean` indicating whether the size is smaller/larger than a certain breakpoint.
|
|
||||||
|
|
||||||
Access the `breakpoints` dictionary to map from `BreakpointSize` to `BreakpointValue`.
|
|
||||||
|
|
||||||
<FileSource src="/framed/Breakpoint/BreakpointObserver" />
|
|
||||||
|
|
@ -1,126 +1,84 @@
|
||||||
<script>
|
<script>
|
||||||
import { InlineNotification, Button } from "carbon-components-svelte";
|
import { Button } from "carbon-components-svelte";
|
||||||
import Add from "carbon-icons-svelte/lib/Add.svelte";
|
import Add16 from "carbon-icons-svelte/lib/Add16";
|
||||||
import TrashCan from "carbon-icons-svelte/lib/TrashCan.svelte";
|
import TrashCan16 from "carbon-icons-svelte/lib/TrashCan16";
|
||||||
import Login from "carbon-icons-svelte/lib/Login.svelte";
|
import TextBold16 from "carbon-icons-svelte/lib/TextBold16";
|
||||||
|
import TextItalic16 from "carbon-icons-svelte/lib/TextItalic16";
|
||||||
|
import TextUnderline16 from "carbon-icons-svelte/lib/TextUnderline16";
|
||||||
import Preview from "../../components/Preview.svelte";
|
import Preview from "../../components/Preview.svelte";
|
||||||
|
|
||||||
|
let index = 1;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
Buttons trigger actions in the interface. Use them to submit forms, navigate between pages, or perform specific tasks. Choose from different styles and sizes to match the importance and context of each action.
|
### Primary button
|
||||||
|
|
||||||
## Primary button
|
|
||||||
|
|
||||||
The default button style is primary. This should be used for primary actions.
|
|
||||||
|
|
||||||
<Button>Primary button</Button>
|
<Button>Primary button</Button>
|
||||||
|
|
||||||
## Secondary button
|
### Secondary button
|
||||||
|
|
||||||
Set `kind="secondary"` for secondary actions.
|
|
||||||
|
|
||||||
<Button kind="secondary">Secondary button</Button>
|
<Button kind="secondary">Secondary button</Button>
|
||||||
|
|
||||||
## Tertiary button
|
### Tertiary button
|
||||||
|
|
||||||
Set `kind="tertiary"` for tertiary actions.
|
|
||||||
|
|
||||||
<Button kind="tertiary">Tertiary button</Button>
|
<Button kind="tertiary">Tertiary button</Button>
|
||||||
|
|
||||||
## Ghost button
|
### Ghost button
|
||||||
|
|
||||||
Set `kind="ghost"` for ghost-style buttons.
|
|
||||||
|
|
||||||
<Button kind="ghost">Ghost button</Button>
|
<Button kind="ghost">Ghost button</Button>
|
||||||
|
|
||||||
## Danger button
|
### Danger button
|
||||||
|
|
||||||
Set `kind="danger"` for destructive actions.
|
|
||||||
|
|
||||||
<Button kind="danger">Danger button</Button>
|
<Button kind="danger">Danger button</Button>
|
||||||
|
|
||||||
## Danger tertiary button
|
### Danger tertiary button
|
||||||
|
|
||||||
Set `kind="danger-tertiary"` for less prominent destructive actions.
|
|
||||||
|
|
||||||
<Button kind="danger-tertiary">Danger tertiary button</Button>
|
<Button kind="danger-tertiary">Danger tertiary button</Button>
|
||||||
|
|
||||||
## Danger tertiary, icon-only button
|
### Danger tertiary, icon-only button
|
||||||
|
|
||||||
<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
|
**Note:** you must provide an `iconDescription` for the button tooltip.
|
||||||
<div class="body-short-01">
|
|
||||||
Provide an <strong>iconDescription</strong> for accessibility. This text will be used as the button's tooltip and screen reader label.
|
|
||||||
</div>
|
|
||||||
</InlineNotification>
|
|
||||||
|
|
||||||
<Button kind="danger-tertiary" iconDescription="Delete" icon={TrashCan} />
|
<Button kind="danger-tertiary"iconDescription="Delete" icon={TrashCan16} />
|
||||||
|
|
||||||
## Danger ghost button
|
### Danger ghost button
|
||||||
|
|
||||||
Set `kind="danger-ghost"` for ghost-style destructive actions.
|
|
||||||
|
|
||||||
<Button kind="danger-ghost">Danger ghost button</Button>
|
<Button kind="danger-ghost">Danger ghost button</Button>
|
||||||
|
|
||||||
## Button with icon
|
### Button with icon
|
||||||
|
|
||||||
Add an icon to the button using the `icon` prop.
|
<Button icon={Add16}>With icon</Button>
|
||||||
|
|
||||||
<Button icon={Add}>With icon</Button>
|
### Icon-only button
|
||||||
|
|
||||||
## Icon-only button
|
**Note:** you must provide an `iconDescription` for the button tooltip.
|
||||||
|
|
||||||
<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
|
<Button iconDescription="Tooltip text" icon={Add16} />
|
||||||
<div class="body-short-01">
|
|
||||||
Provide an <strong>iconDescription</strong> for accessibility. This text will be used as the button's tooltip and screen reader label.
|
|
||||||
</div>
|
|
||||||
</InlineNotification>
|
|
||||||
|
|
||||||
<Button iconDescription="Tooltip text" icon={Add} />
|
### Icon-only button (custom tooltip position)
|
||||||
|
|
||||||
## Icon-only, link button
|
The tooltip position and alignment can be controlled by `tooltipPosition` and `tooltipAlignment`.
|
||||||
|
|
||||||
Set `href` to create an icon-only link button.
|
<Button tooltipPosition="right" tooltipAlignment="end" iconDescription="Tooltip text" icon={Add16} />
|
||||||
|
|
||||||
<Button iconDescription="Login" icon={Login} href="#" />
|
### Selected icon-only, ghost button
|
||||||
|
|
||||||
## Icon-only button (custom tooltip position)
|
|
||||||
|
|
||||||
Control the tooltip position and alignment with `tooltipPosition` and `tooltipAlignment`.
|
|
||||||
|
|
||||||
<Button tooltipPosition="right" tooltipAlignment="end" iconDescription="Tooltip text" icon={Add} />
|
|
||||||
|
|
||||||
## Selected icon-only, ghost button
|
|
||||||
|
|
||||||
Set `isSelected` to `true` to enable the selected state for an icon-only, ghost button.
|
Set `isSelected` to `true` to enable the selected state for an icon-only, ghost button.
|
||||||
|
|
||||||
<FileSource src="/framed/Button/SelectedIconOnlyButton" />
|
<FileSource src="/framed/Button/SelectedIconOnlyButton" />
|
||||||
|
|
||||||
## Link button
|
### Link button
|
||||||
|
|
||||||
Set `href` to render an [anchor element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) instead of a `button` element.
|
If an `href` value is specified, the component will render an [anchor element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) with a "button" role.
|
||||||
|
|
||||||
<Button href="#">Link button</Button>
|
<Button href="#">Link button</Button>
|
||||||
|
|
||||||
## Link button with icon
|
### Custom element
|
||||||
|
|
||||||
Similarly, link buttons can have icons.
|
|
||||||
|
|
||||||
<Button href="#" icon={Add}>Link button with icon</Button>
|
|
||||||
|
|
||||||
## Custom element
|
|
||||||
|
|
||||||
By default, the `Button` will render either a `button` or `a` element.
|
|
||||||
|
|
||||||
To render a different element, set `as` to `true` and spread `let:props` to the element.
|
|
||||||
|
|
||||||
<Button as let:props>
|
<Button as let:props>
|
||||||
<p {...props}>Custom element</p>
|
<p {...props}>Custom element</p>
|
||||||
</Button>
|
</Button>
|
||||||
|
|
||||||
## Field size
|
### Field button
|
||||||
|
|
||||||
The default size is "default".
|
|
||||||
|
|
||||||
Set `size="field"` for field-sized buttons.
|
|
||||||
|
|
||||||
<Button size="field">Primary</Button>
|
<Button size="field">Primary</Button>
|
||||||
<Button size="field" kind="secondary">Secondary</Button>
|
<Button size="field" kind="secondary">Secondary</Button>
|
||||||
|
|
@ -128,9 +86,7 @@ Set `size="field"` for field-sized buttons.
|
||||||
<Button size="field" kind="ghost">Ghost</Button>
|
<Button size="field" kind="ghost">Ghost</Button>
|
||||||
<Button size="field" kind="danger">Danger</Button>
|
<Button size="field" kind="danger">Danger</Button>
|
||||||
|
|
||||||
## Small size
|
### Small button
|
||||||
|
|
||||||
Set `size="small"` for small buttons.
|
|
||||||
|
|
||||||
<Button size="small">Primary</Button>
|
<Button size="small">Primary</Button>
|
||||||
<Button size="small" kind="secondary">Secondary</Button>
|
<Button size="small" kind="secondary">Secondary</Button>
|
||||||
|
|
@ -138,73 +94,12 @@ Set `size="small"` for small buttons.
|
||||||
<Button size="small" kind="ghost">Ghost</Button>
|
<Button size="small" kind="ghost">Ghost</Button>
|
||||||
<Button size="small" kind="danger">Danger</Button>
|
<Button size="small" kind="danger">Danger</Button>
|
||||||
|
|
||||||
## Large size
|
### Disabled button
|
||||||
|
|
||||||
Set `size="lg"` for large buttons.
|
|
||||||
|
|
||||||
<Button size="lg">Primary</Button>
|
|
||||||
<Button size="lg" kind="secondary">Secondary</Button>
|
|
||||||
<Button size="lg" kind="tertiary">Tertiary</Button>
|
|
||||||
<Button size="lg" kind="ghost">Ghost</Button>
|
|
||||||
<Button size="lg" kind="danger">Danger</Button>
|
|
||||||
|
|
||||||
## Extra-large size
|
|
||||||
|
|
||||||
Set `size="xl"` for extra-large buttons.
|
|
||||||
|
|
||||||
<Button size="xl">Primary</Button>
|
|
||||||
<Button size="xl" kind="secondary">Secondary</Button>
|
|
||||||
<Button size="xl" kind="tertiary">Tertiary</Button>
|
|
||||||
<Button size="xl" kind="ghost">Ghost</Button>
|
|
||||||
<Button size="xl" kind="danger">Danger</Button>
|
|
||||||
|
|
||||||
## Disabled state
|
|
||||||
|
|
||||||
Set `disabled` to disable the button.
|
|
||||||
|
|
||||||
<Button disabled>Disabled button</Button>
|
<Button disabled>Disabled button</Button>
|
||||||
<Button disabled iconDescription="Tooltip text" icon={Add} />
|
|
||||||
|
|
||||||
## Expressive styles
|
### Skeleton
|
||||||
|
|
||||||
Set `expressive` to `true` to use Carbon's expressive typesetting.
|
|
||||||
|
|
||||||
<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
|
|
||||||
<div class="body-short-01">
|
|
||||||
Use expressive styles with default, "lg", or "xl" button sizes.
|
|
||||||
</div>
|
|
||||||
</InlineNotification>
|
|
||||||
|
|
||||||
<Button expressive size="xl">Primary</Button>
|
|
||||||
<Button expressive size="xl" kind="secondary">Secondary</Button>
|
|
||||||
<Button expressive size="xl" kind="tertiary">Tertiary</Button>
|
|
||||||
<Button expressive size="xl" kind="ghost">Ghost</Button>
|
|
||||||
<Button expressive size="xl" kind="danger">Danger</Button>
|
|
||||||
<br /><br />
|
|
||||||
<Button expressive size="lg">Primary</Button>
|
|
||||||
<Button expressive size="lg" kind="secondary">Secondary</Button>
|
|
||||||
<Button expressive size="lg" kind="tertiary">Tertiary</Button>
|
|
||||||
<Button expressive size="lg" kind="ghost">Ghost</Button>
|
|
||||||
<Button expressive size="lg" kind="danger">Danger</Button>
|
|
||||||
<br /><br />
|
|
||||||
<Button expressive>Primary</Button>
|
|
||||||
<Button expressive kind="secondary">Secondary</Button>
|
|
||||||
<Button expressive kind="tertiary">Tertiary</Button>
|
|
||||||
<Button expressive kind="ghost">Ghost</Button>
|
|
||||||
<Button expressive kind="danger">Danger</Button>
|
|
||||||
|
|
||||||
## Skeleton
|
|
||||||
|
|
||||||
Set `skeleton` to show a loading state.
|
|
||||||
|
|
||||||
<Button size="xl" skeleton />
|
|
||||||
<Button size="lg" skeleton />
|
|
||||||
<Button skeleton />
|
<Button skeleton />
|
||||||
<Button skeleton size="field" />
|
<Button skeleton size="field" />
|
||||||
<Button skeleton size="small" />
|
<Button skeleton size="small" />
|
||||||
|
|
||||||
## Programmatic focus
|
|
||||||
|
|
||||||
Bind to the `ref` prop to access the button element for programmatic focus.
|
|
||||||
|
|
||||||
<FileSource src="/framed/Button/ProgrammaticFocus" />
|
|
||||||
|
|
|
||||||
|
|
@ -1,25 +1,27 @@
|
||||||
|
---
|
||||||
|
source: Button/ButtonSet.svelte
|
||||||
|
---
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { Button, ButtonSet } from "carbon-components-svelte";
|
import { Button, ButtonSet } from "carbon-components-svelte";
|
||||||
import Login from "carbon-icons-svelte/lib/Login.svelte";
|
import Login16 from "carbon-icons-svelte/lib/Login16";
|
||||||
import Preview from "../../components/Preview.svelte";
|
import Preview from "../../components/Preview.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
Group related buttons together in a set. Use this component to create consistent spacing and alignment between multiple buttons.
|
### Default
|
||||||
|
|
||||||
## Default
|
Buttons in a button set are juxtaposed by default.
|
||||||
|
|
||||||
Place buttons side by side in a horizontal layout.
|
|
||||||
|
|
||||||
<ButtonSet>
|
<ButtonSet>
|
||||||
<Button kind="secondary">Cancel</Button>
|
<Button kind="secondary">Cancel</Button>
|
||||||
<Button>Submit</Button>
|
<Button>Submit</Button>
|
||||||
</ButtonSet>
|
</ButtonSet>
|
||||||
|
|
||||||
## Stacked
|
### Stacked
|
||||||
|
|
||||||
Set `stacked` to `true` to arrange buttons vertically.
|
Set `stacked` to `true` to use the stacked variant.
|
||||||
|
|
||||||
<ButtonSet stacked>
|
<ButtonSet stacked>
|
||||||
<Button icon={Login}>Log in</Button>
|
<Button icon={Login16}>Log in</Button>
|
||||||
<Button kind="ghost">Sign up</Button>
|
<Button kind="ghost">Sign up</Button>
|
||||||
</ButtonSet>
|
</ButtonSet>
|
||||||
|
|
@ -1,62 +1,28 @@
|
||||||
<script>
|
<script>
|
||||||
import { Checkbox, InlineNotification } from "carbon-components-svelte";
|
import { Checkbox } from "carbon-components-svelte";
|
||||||
import Preview from "../../components/Preview.svelte";
|
import Preview from "../../components/Preview.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
Checkboxes let users select one or more options from a list. Use them for multiple-choice questions, settings, or to confirm actions.
|
### Default (unchecked)
|
||||||
|
|
||||||
## Default
|
|
||||||
|
|
||||||
Create a checkbox with a label using `labelText`.
|
|
||||||
|
|
||||||
By default, the checkbox is unchecked.
|
|
||||||
|
|
||||||
<Checkbox labelText="Label text" />
|
<Checkbox labelText="Label text" />
|
||||||
|
|
||||||
## Checked
|
### Checked
|
||||||
|
|
||||||
Set `checked` to `true` to pre-select the checkbox.
|
|
||||||
|
|
||||||
<Checkbox labelText="Label text" checked />
|
<Checkbox labelText="Label text" checked />
|
||||||
|
|
||||||
## Indeterminate
|
### Indeterminate
|
||||||
|
|
||||||
Set `indeterminate` to `true` to show a mixed state, typically used in parent checkboxes with some children selected.
|
|
||||||
|
|
||||||
<Checkbox labelText="Label text" indeterminate />
|
<Checkbox labelText="Label text" indeterminate />
|
||||||
|
|
||||||
## Hidden label
|
### Hidden label
|
||||||
|
|
||||||
Set `hideLabel` to `true` to visually hide the label while keeping it accessible to screen readers.
|
|
||||||
|
|
||||||
<Checkbox labelText="Label text" hideLabel />
|
<Checkbox labelText="Label text" hideLabel />
|
||||||
|
|
||||||
## Disabled state
|
### Disabled
|
||||||
|
|
||||||
Set `disabled` to `true` to prevent user interaction.
|
|
||||||
|
|
||||||
<Checkbox labelText="Label text" disabled />
|
<Checkbox labelText="Label text" disabled />
|
||||||
|
|
||||||
## Reactive example (bind:checked)
|
### Skeleton
|
||||||
|
|
||||||
Use two-way binding with `bind:checked` to track the checkbox state.
|
|
||||||
|
|
||||||
<FileSource src="/framed/Checkbox/CheckboxReactive" />
|
|
||||||
|
|
||||||
## Reactive example (bind:group)
|
|
||||||
|
|
||||||
Bind an array of values using `group` to manage multiple checkboxes. This API is inspired by Svelte [group inputs](https://svelte.dev/tutorial/group-inputs).
|
|
||||||
|
|
||||||
<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
|
|
||||||
<div class="body-short-01">
|
|
||||||
When using <strong>bind:group</strong>, <strong>bind:checked</strong> only supports one-way binding.
|
|
||||||
</div>
|
|
||||||
</InlineNotification>
|
|
||||||
|
|
||||||
<FileSource src="/framed/Checkbox/MultipleCheckboxes" />
|
|
||||||
|
|
||||||
## Skeleton
|
|
||||||
|
|
||||||
Set `skeleton` to `true` to show a loading state.
|
|
||||||
|
|
||||||
<Checkbox skeleton />
|
<Checkbox skeleton />
|
||||||
|
|
@ -1,44 +1,16 @@
|
||||||
|
---
|
||||||
|
source: Tile/ClickableTile.svelte
|
||||||
|
---
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { ClickableTile } from "carbon-components-svelte";
|
import { ClickableTile } from "carbon-components-svelte";
|
||||||
import Preview from "../../components/Preview.svelte";
|
import Preview from "../../components/Preview.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
Clickable tiles create interactive content areas that link to other pages or trigger actions. Use them to group related content and provide clear navigation targets.
|
### Default
|
||||||
|
|
||||||
## Default
|
<ClickableTile href="https://www.carbondesignsystem.com/">Carbon Design System</ClickableTile>
|
||||||
|
|
||||||
Create a clickable tile with an `href` to link to another page.
|
### Light variant
|
||||||
|
|
||||||
<ClickableTile href="https://www.carbondesignsystem.com/">
|
<ClickableTile light href="https://www.carbondesignsystem.com/">Carbon Design System</ClickableTile>
|
||||||
Carbon Design System
|
|
||||||
</ClickableTile>
|
|
||||||
|
|
||||||
## Prevent default behavior
|
|
||||||
|
|
||||||
Handle the `click` event to override the default link behavior. Use `e.preventDefault()` to stop navigation.
|
|
||||||
|
|
||||||
<ClickableTile
|
|
||||||
href="/"
|
|
||||||
on:click={(e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
// custom behavior
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Carbon Design System
|
|
||||||
</ClickableTile>
|
|
||||||
|
|
||||||
## Light variant
|
|
||||||
|
|
||||||
Set `light` to `true` to use the light color scheme.
|
|
||||||
|
|
||||||
<ClickableTile light href="https://www.carbondesignsystem.com/">
|
|
||||||
Carbon Design System
|
|
||||||
</ClickableTile>
|
|
||||||
|
|
||||||
## Disabled state
|
|
||||||
|
|
||||||
Set `disabled` to `true` to prevent interaction.
|
|
||||||
|
|
||||||
<ClickableTile disabled href="https://www.carbondesignsystem.com/">
|
|
||||||
Carbon Design System
|
|
||||||
</ClickableTile>
|
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<script>
|
<script>
|
||||||
import { CodeSnippet } from "carbon-components-svelte";
|
import { CodeSnippet, InlineNotification, Link } from "carbon-components-svelte";
|
||||||
import Preview from "../../components/Preview.svelte";
|
import Preview from "../../components/Preview.svelte";
|
||||||
|
|
||||||
let code = `// helpers.js
|
let code = `// helpers.js
|
||||||
|
|
@ -27,124 +27,66 @@ let comment = `
|
||||||
`
|
`
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
Code snippets display and copy code examples. They support single-line, multi-line, and inline formats with customizable copy and expand functionality.
|
<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton>
|
||||||
|
<div class="body-short-01">As of version 0.32, the CodeSnippet will copy the provided `code` text when clicking the copy button.</div>
|
||||||
|
</InlineNotification>
|
||||||
|
|
||||||
This component uses the native, asynchronous [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText) to copy text.
|
### Default (single-line)
|
||||||
|
|
||||||
You can override the default copy functionality with your own implementation. See [Overriding copy functionality](#overriding-copy-functionality).
|
<CodeSnippet code="yarn add -D carbon-components-svelte" />
|
||||||
|
|
||||||
## Default
|
### Inline
|
||||||
|
|
||||||
Display a single-line code snippet by default.
|
|
||||||
|
|
||||||
<CodeSnippet code="npm i carbon-components-svelte" />
|
|
||||||
|
|
||||||
## Overriding copy functionality
|
|
||||||
|
|
||||||
Pass a custom function to the `copy` prop to override the default copy behavior.
|
|
||||||
|
|
||||||
In this example, we use the open source module [clipboard-copy](https://github.com/feross/clipboard-copy) to copy the text instead of the default Clipboard API.
|
|
||||||
|
|
||||||
<FileSource src="/framed/CodeSnippet/CodeSnippetOverride" />
|
|
||||||
|
|
||||||
## Preventing copy functionality
|
|
||||||
|
|
||||||
Pass a no-op function to the `copy` prop to disable copying.
|
|
||||||
|
|
||||||
<CodeSnippet code="npm i carbon-components-svelte" copy={() => {}} />
|
|
||||||
|
|
||||||
## Inline
|
|
||||||
|
|
||||||
Set `type="inline"` to display code inline with text.
|
|
||||||
|
|
||||||
<CodeSnippet type="inline" code="rm -rf node_modules/" />
|
<CodeSnippet type="inline" code="rm -rf node_modules/" />
|
||||||
|
|
||||||
## Multi-line
|
### Multi-line
|
||||||
|
|
||||||
Set `type="multi"` to display multiple lines of code with expand/collapse functionality.
|
|
||||||
|
|
||||||
<CodeSnippet type="multi" {code} />
|
<CodeSnippet type="multi" {code} />
|
||||||
|
|
||||||
## Expanded by default
|
### Custom copy feedback text
|
||||||
|
|
||||||
Set `expanded` to `true` to show the full multi-line code snippet.
|
Use the `feedback` prop to override the default copy button feedback text.
|
||||||
|
|
||||||
<CodeSnippet type="multi" {code} expanded />
|
|
||||||
|
|
||||||
## Reactive example
|
|
||||||
|
|
||||||
The multi-line code snippet dispatches "expand" and "collapse" events.
|
|
||||||
|
|
||||||
<FileSource src="/framed/CodeSnippet/CodeSnippetReactive" />
|
|
||||||
|
|
||||||
## Custom copy feedback text
|
|
||||||
|
|
||||||
Set `feedback` to customize the copy button feedback text.
|
|
||||||
|
|
||||||
<CodeSnippet type="multi" {code} feedback="Copied to clipboard" />
|
<CodeSnippet type="multi" {code} feedback="Copied to clipboard" />
|
||||||
|
|
||||||
## Hidden copy button
|
### Hidden copy button
|
||||||
|
|
||||||
Set `hideCopyButton` to `true` to hide the copy button.
|
|
||||||
|
|
||||||
<CodeSnippet type="multi" {code} hideCopyButton />
|
<CodeSnippet type="multi" {code} hideCopyButton />
|
||||||
|
|
||||||
## Hidden show more button
|
### Disabled
|
||||||
|
|
||||||
Set `showMoreLess` to `false` to hide the expand/collapse button on multi-line snippets.
|
The `disabled` prop applies only to the `"single"` and `"multi"` code snippet types.
|
||||||
|
|
||||||
<CodeSnippet type="multi" {code} showMoreLess={false} />
|
<CodeSnippet disabled code="yarn add -D carbon-components-svelte" />
|
||||||
|
|
||||||
## Hidden copy, show more buttons
|
|
||||||
|
|
||||||
Hide both the copy and expand/collapse buttons.
|
|
||||||
|
|
||||||
<CodeSnippet type="multi" {code} hideCopyButton showMoreLess={false} />
|
|
||||||
|
|
||||||
## Custom show more/less text
|
|
||||||
|
|
||||||
Set `showMoreText` and `showLessText` to customize the expand/collapse button text.
|
|
||||||
|
|
||||||
<CodeSnippet type="multi" {code} showMoreText="Expand" showLessText="Collapse" />
|
|
||||||
|
|
||||||
## Disabled
|
|
||||||
|
|
||||||
Set `disabled` to `true` to disable interaction. This only applies to `"single"` and `"multi"` types.
|
|
||||||
|
|
||||||
<CodeSnippet disabled code="npm i carbon-components-svelte" />
|
|
||||||
<br />
|
<br />
|
||||||
<CodeSnippet disabled type="multi" code="{comment}" />
|
<CodeSnippet disabled type="multi" code="{comment}" />
|
||||||
|
|
||||||
## Wrapped text
|
### Wrapped text
|
||||||
|
|
||||||
By default, the code snippet preserves text formatting and does not wrap text.
|
`wrapText` only applies to the `"multi"` type.
|
||||||
|
|
||||||
Set `wrapText` to `true` to wrap long lines in multi-line snippets.
|
|
||||||
|
|
||||||
<CodeSnippet wrapText type="multi" code="{comment}" />
|
<CodeSnippet wrapText type="multi" code="{comment}" />
|
||||||
|
|
||||||
## Dynamic multi-line code
|
### Dynamic multi-line code
|
||||||
|
|
||||||
Use the `code` prop instead of the default slot for dynamically updated code.
|
For dynamically updated code, you must use the `code` prop instead of the default slot.
|
||||||
|
|
||||||
<FileSource src="/framed/CodeSnippet/DynamicCodeSnippet" />
|
<FileSource src="/framed/CodeSnippet/DynamicCodeSnippet" />
|
||||||
|
|
||||||
## Hidden multi-line code
|
### Hidden multi-line code
|
||||||
|
|
||||||
The "Show more" button relies on the element's computed height. For hidden content, the button won't appear because the height is `0`.
|
There may be cases where your code snippet is hidden in the DOM. The logic to render the "Show more" button relies on the element's computed height. For hidden content, the button will not appear because the computed height is `0`.
|
||||||
|
|
||||||
Re-render the component to fix this issue.
|
The recommended workaround is to re-render the component. See the example below.
|
||||||
|
|
||||||
<FileSource src="/framed/CodeSnippet/HiddenCodeSnippet" />
|
<FileSource src="/framed/CodeSnippet/HiddenCodeSnippet" />
|
||||||
|
|
||||||
## Skeleton
|
### Skeleton
|
||||||
|
|
||||||
Set `skeleton` to `true` to show a loading state. Defaults to `"single"` type.
|
The default skeleton type is `"single"`.
|
||||||
|
|
||||||
<CodeSnippet skeleton />
|
<CodeSnippet skeleton />
|
||||||
|
|
||||||
## Skeleton (multi-line)
|
### Skeleton (multi-line)
|
||||||
|
|
||||||
Set `type="multi"` with `skeleton` to show a multi-line loading state.
|
|
||||||
|
|
||||||
<CodeSnippet type="multi" skeleton />
|
<CodeSnippet type="multi" skeleton />
|
||||||
|
|
@ -1,19 +1,9 @@
|
||||||
<script>
|
<script>
|
||||||
import { ComboBox, InlineNotification } from "carbon-components-svelte";
|
import { ComboBox } from "carbon-components-svelte";
|
||||||
import Preview from "../../components/Preview.svelte";
|
import Preview from "../../components/Preview.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
`ComboBox` combines a text input with a dropdown menu to let users select from predefined options or enter custom values. It supports filtering, custom item rendering, and various states.
|
### Default
|
||||||
|
|
||||||
`ComboBox` is keyed for performance reasons.
|
|
||||||
|
|
||||||
<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
|
|
||||||
<div class="body-short-01">Every <code>items</code> object must have a unique "id" property.</div>
|
|
||||||
</InlineNotification>
|
|
||||||
|
|
||||||
## Default
|
|
||||||
|
|
||||||
Create a combobox with a title and placeholder text. Each item requires a unique `id` and `text`.
|
|
||||||
|
|
||||||
<ComboBox titleText="Contact" placeholder="Select contact method"
|
<ComboBox titleText="Contact" placeholder="Select contact method"
|
||||||
items={[
|
items={[
|
||||||
|
|
@ -22,70 +12,27 @@ items={[
|
||||||
{id: "2", text: "Fax"}
|
{id: "2", text: "Fax"}
|
||||||
]} />
|
]} />
|
||||||
|
|
||||||
## Custom slot
|
### Selected index
|
||||||
|
|
||||||
Override the default slot to customize how each item displays. Access the item and index through the `let:` directive.
|
|
||||||
|
|
||||||
<FileSource src="/framed/ComboBox/ComboBoxSlot" />
|
|
||||||
|
|
||||||
## Hidden label
|
|
||||||
|
|
||||||
Set `hideLabel` to `true` to visually hide the label while keeping it accessible to screen readers.
|
|
||||||
|
|
||||||
<ComboBox hideLabel titleText="Hidden Label" placeholder="Select contact method"
|
|
||||||
items={[
|
|
||||||
{id: "0", text: "Slack"},
|
|
||||||
{id: "1", text: "Email"},
|
|
||||||
{id: "2", text: "Fax"}
|
|
||||||
]} />
|
|
||||||
|
|
||||||
## Initial selected id
|
|
||||||
|
|
||||||
Set `selectedId` to pre-select an item when the combobox loads.
|
|
||||||
|
|
||||||
<ComboBox titleText="Contact" placeholder="Select contact method"
|
<ComboBox titleText="Contact" placeholder="Select contact method"
|
||||||
selectedId="1"
|
selectedIndex={1}
|
||||||
items={[
|
items={[
|
||||||
{id: "0", text: "Slack"},
|
{id: "0", text: "Slack"},
|
||||||
{id: "1", text: "Email"},
|
{id: "1", text: "Email"},
|
||||||
{id: "2", text: "Fax"}
|
{id: "2", text: "Fax"}
|
||||||
]} />
|
]} />
|
||||||
|
|
||||||
## Reactive example
|
### Multiple combo boxes
|
||||||
|
|
||||||
See how the combobox responds to user input and selection changes.
|
|
||||||
|
|
||||||
<FileSource src="/framed/ComboBox/ReactiveComboBox" />
|
|
||||||
|
|
||||||
## Clear selection
|
|
||||||
|
|
||||||
Use `bind:this` to access the component instance and call `ComboBox.clear()` to programmatically clear the selection.
|
|
||||||
|
|
||||||
Set `focus: false` in the method options to prevent re-focusing the input.
|
|
||||||
|
|
||||||
<FileSource src="/framed/ComboBox/ComboBoxClear" />
|
|
||||||
|
|
||||||
## Multiple combo boxes
|
|
||||||
|
|
||||||
See how to manage multiple comboboxes in a form.
|
|
||||||
|
|
||||||
<FileSource src="/framed/ComboBox/MultipleComboBox" />
|
<FileSource src="/framed/ComboBox/MultipleComboBox" />
|
||||||
|
|
||||||
## Filterable
|
### Filterable
|
||||||
|
|
||||||
Enable filtering to let users search through the options.
|
|
||||||
|
|
||||||
<FileSource src="/framed/ComboBox/FilterableComboBox" />
|
<FileSource src="/framed/ComboBox/FilterableComboBox" />
|
||||||
|
|
||||||
## Filterable with custom label
|
### Top direction
|
||||||
|
|
||||||
Set `itemToString` to customize how items display in the filterable combobox.
|
Set `direction` to `"top"` for the combobox dropdown menu to appear above the input.
|
||||||
|
|
||||||
<FileSource src="/framed/ComboBox/FilterableComboBoxCustomLabel" />
|
|
||||||
|
|
||||||
## Top direction
|
|
||||||
|
|
||||||
Set `direction` to `"top"` to make the dropdown menu appear above the input.
|
|
||||||
|
|
||||||
<ComboBox direction="top" titleText="Contact" placeholder="Select contact method"
|
<ComboBox direction="top" titleText="Contact" placeholder="Select contact method"
|
||||||
items={[
|
items={[
|
||||||
|
|
@ -94,9 +41,7 @@ items={[
|
||||||
{id: "2", text: "Fax"}
|
{id: "2", text: "Fax"}
|
||||||
]} />
|
]} />
|
||||||
|
|
||||||
## Light variant
|
### Light variant
|
||||||
|
|
||||||
Set `light` to `true` to use the light color scheme.
|
|
||||||
|
|
||||||
<ComboBox light titleText="Contact" placeholder="Select contact method"
|
<ComboBox light titleText="Contact" placeholder="Select contact method"
|
||||||
items={[
|
items={[
|
||||||
|
|
@ -105,9 +50,7 @@ items={[
|
||||||
{id: "2", text: "Fax"}
|
{id: "2", text: "Fax"}
|
||||||
]} />
|
]} />
|
||||||
|
|
||||||
## Extra-large size
|
### Extra-large size
|
||||||
|
|
||||||
Set `size` to `"xl"` for an extra-large combobox.
|
|
||||||
|
|
||||||
<ComboBox titleText="Contact" placeholder="Select contact method"
|
<ComboBox titleText="Contact" placeholder="Select contact method"
|
||||||
size="xl"
|
size="xl"
|
||||||
|
|
@ -117,9 +60,7 @@ items={[
|
||||||
{id: "2", text: "Fax"}
|
{id: "2", text: "Fax"}
|
||||||
]} />
|
]} />
|
||||||
|
|
||||||
## Small size
|
### Small size
|
||||||
|
|
||||||
Set `size` to `"sm"` for a small combobox.
|
|
||||||
|
|
||||||
<ComboBox titleText="Contact" placeholder="Select contact method"
|
<ComboBox titleText="Contact" placeholder="Select contact method"
|
||||||
size="sm"
|
size="sm"
|
||||||
|
|
@ -129,9 +70,7 @@ items={[
|
||||||
{id: "2", text: "Fax"}
|
{id: "2", text: "Fax"}
|
||||||
]} />
|
]} />
|
||||||
|
|
||||||
## Invalid state
|
### Invalid state
|
||||||
|
|
||||||
Set `invalid` to `true` and provide `invalidText` to show an error message.
|
|
||||||
|
|
||||||
<ComboBox invalid invalidText="Secondary contact method must be different from the primary contact" titleText="Contact" placeholder="Select contact method"
|
<ComboBox invalid invalidText="Secondary contact method must be different from the primary contact" titleText="Contact" placeholder="Select contact method"
|
||||||
items={[
|
items={[
|
||||||
|
|
@ -140,9 +79,7 @@ items={[
|
||||||
{id: "2", text: "Fax"}
|
{id: "2", text: "Fax"}
|
||||||
]} />
|
]} />
|
||||||
|
|
||||||
## Warning state
|
### Warning state
|
||||||
|
|
||||||
Set `warn` to `true` and provide `warnText` to show a warning message.
|
|
||||||
|
|
||||||
<ComboBox warn warnText="This contact method is not associated with your account" titleText="Contact" placeholder="Select contact method"
|
<ComboBox warn warnText="This contact method is not associated with your account" titleText="Contact" placeholder="Select contact method"
|
||||||
items={[
|
items={[
|
||||||
|
|
@ -151,9 +88,7 @@ items={[
|
||||||
{id: "2", text: "Fax"}
|
{id: "2", text: "Fax"}
|
||||||
]} />
|
]} />
|
||||||
|
|
||||||
## Disabled state
|
### Disabled
|
||||||
|
|
||||||
Set `disabled` to `true` to prevent interaction with the combobox.
|
|
||||||
|
|
||||||
<ComboBox disabled titleText="Contact" placeholder="Select contact method"
|
<ComboBox disabled titleText="Contact" placeholder="Select contact method"
|
||||||
items={[
|
items={[
|
||||||
|
|
@ -161,17 +96,3 @@ items={[
|
||||||
{id: "1", text: "Email"},
|
{id: "1", text: "Email"},
|
||||||
{id: "2", text: "Fax"}
|
{id: "2", text: "Fax"}
|
||||||
]} />
|
]} />
|
||||||
|
|
||||||
## Disabled items
|
|
||||||
|
|
||||||
Set `disabled: true` in an item object to disable specific options.
|
|
||||||
|
|
||||||
<ComboBox
|
|
||||||
titleText="Contact"
|
|
||||||
placeholder="Select contact method"
|
|
||||||
items={[
|
|
||||||
{ id: "0", text: "Slack" },
|
|
||||||
{ id: "1", text: "Email", disabled: true },
|
|
||||||
{ id: "2", text: "Fax" },
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
|
|
@ -6,16 +6,6 @@ components: ["ComposedModal", "ModalHeader", "ModalBody", "ModalFooter"]
|
||||||
import Preview from "../../components/Preview.svelte";
|
import Preview from "../../components/Preview.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
`ComposedModal` lets you build custom modals by combining `ModalHeader`, `ModalBody`, and `ModalFooter` components. Use it to create focused interactions that require user attention or input.
|
### Composed modal
|
||||||
|
|
||||||
## Composed modal
|
|
||||||
|
|
||||||
Create a modal with a header, body, and footer. Each section can be customized independently.
|
|
||||||
|
|
||||||
<FileSource src="/framed/Modal/ComposedModal" />
|
<FileSource src="/framed/Modal/ComposedModal" />
|
||||||
|
|
||||||
## Multiple secondary buttons
|
|
||||||
|
|
||||||
Set `secondaryButtons` in `ModalFooter` to create a 3-button modal. This prop replaces `secondaryButtonText` and takes a tuple of two button configurations.
|
|
||||||
|
|
||||||
<FileSource src="/framed/Modal/3ButtonComposedModal" />
|
|
||||||
|
|
@ -4,25 +4,19 @@ components: ["ContentSwitcher", "Switch"]
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { ContentSwitcher, Switch } from "carbon-components-svelte";
|
import { ContentSwitcher, Switch } from "carbon-components-svelte";
|
||||||
import Bullhorn from "carbon-icons-svelte/lib/Bullhorn.svelte";
|
import Bullhorn16 from "carbon-icons-svelte/lib/Bullhorn16";
|
||||||
import Analytics from "carbon-icons-svelte/lib/Analytics.svelte";
|
import Analytics16 from "carbon-icons-svelte/lib/Analytics16";
|
||||||
import Preview from "../../components/Preview.svelte";
|
import Preview from "../../components/Preview.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
`ContentSwitcher` lets users switch between different views or sections of content. Use it to organize related content into distinct categories or states.
|
### Default
|
||||||
|
|
||||||
## Default
|
|
||||||
|
|
||||||
Create a content switcher with `Switch` components. Each switch needs a `text` prop.
|
|
||||||
|
|
||||||
<ContentSwitcher>
|
<ContentSwitcher>
|
||||||
<Switch text="Latest news" />
|
<Switch text="Latest news" />
|
||||||
<Switch text="Trending" />
|
<Switch text="Trending" />
|
||||||
</ContentSwitcher>
|
</ContentSwitcher>
|
||||||
|
|
||||||
## Initial selected index
|
### Initial selected index
|
||||||
|
|
||||||
Set `selectedIndex` to pre-select a switch when the content switcher loads.
|
|
||||||
|
|
||||||
<ContentSwitcher selectedIndex={1}>
|
<ContentSwitcher selectedIndex={1}>
|
||||||
<Switch text="Latest news" />
|
<Switch text="Latest news" />
|
||||||
|
|
@ -30,52 +24,40 @@ Set `selectedIndex` to pre-select a switch when the content switcher loads.
|
||||||
<Switch text="Recommended" />
|
<Switch text="Recommended" />
|
||||||
</ContentSwitcher>
|
</ContentSwitcher>
|
||||||
|
|
||||||
## Reactive example
|
### Reactive example
|
||||||
|
|
||||||
This example demonstrates how to programmatically control the content switcher using
|
|
||||||
the `bind:selectedIndex` directive. Update the selected index based on user
|
|
||||||
interactions or application state.
|
|
||||||
|
|
||||||
<FileSource src="/framed/ContentSwitcher/ContentSwitcherReactive" />
|
<FileSource src="/framed/ContentSwitcher/ContentSwitcherReactive" />
|
||||||
|
|
||||||
## Custom switch slot
|
### Custom switch slot
|
||||||
|
|
||||||
Override the default slot in `Switch` to customize how each option displays.
|
|
||||||
|
|
||||||
<ContentSwitcher>
|
<ContentSwitcher>
|
||||||
<Switch>
|
<Switch>
|
||||||
<div style="display: flex; align-items: center;">
|
<div style="display: flex; align-items: center;">
|
||||||
<Bullhorn style="margin-right: 0.5rem;" /> Latest news
|
<Bullhorn16 style="margin-right: 0.5rem;" /> Latest news
|
||||||
</div>
|
</div>
|
||||||
</Switch>
|
</Switch>
|
||||||
<Switch>
|
<Switch>
|
||||||
<div style="display: flex; align-items: center;">
|
<div style="display: flex; align-items: center;">
|
||||||
<Analytics style="margin-right: 0.5rem;" /> Trending
|
<Analytics16 style="margin-right: 0.5rem;" /> Trending
|
||||||
</div>
|
</div>
|
||||||
</Switch>
|
</Switch>
|
||||||
</ContentSwitcher>
|
</ContentSwitcher>
|
||||||
|
|
||||||
## Extra-large size
|
### Extra-large size
|
||||||
|
|
||||||
Set `size` to `"xl"` for an extra-large content switcher.
|
|
||||||
|
|
||||||
<ContentSwitcher size="xl">
|
<ContentSwitcher size="xl">
|
||||||
<Switch text="All" />
|
<Switch text="All" />
|
||||||
<Switch text="Archived" />
|
<Switch text="Archived" />
|
||||||
</ContentSwitcher>
|
</ContentSwitcher>
|
||||||
|
|
||||||
## Small size
|
### Small size
|
||||||
|
|
||||||
Set `size` to `"sm"` for a small content switcher.
|
|
||||||
|
|
||||||
<ContentSwitcher size="sm">
|
<ContentSwitcher size="sm">
|
||||||
<Switch text="All" />
|
<Switch text="All" />
|
||||||
<Switch text="Archived" />
|
<Switch text="Archived" />
|
||||||
</ContentSwitcher>
|
</ContentSwitcher>
|
||||||
|
|
||||||
## Disabled
|
### Disabled
|
||||||
|
|
||||||
Set `disabled` to `true` on individual switches to prevent interaction.
|
|
||||||
|
|
||||||
<ContentSwitcher>
|
<ContentSwitcher>
|
||||||
<Switch disabled text="All" />
|
<Switch disabled text="All" />
|
||||||
|
|
|
||||||
|
|
@ -6,32 +6,12 @@ components: ["ContextMenu", "ContextMenuGroup", "ContextMenuRadioGroup", "Contex
|
||||||
import Preview from "../../components/Preview.svelte";
|
import Preview from "../../components/Preview.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
`ContextMenu` displays a menu when users right-click. Use it to provide quick access to contextual actions or options.
|
|
||||||
|
|
||||||
In the examples, right click anywhere within the iframe.
|
In the examples, right click anywhere within the iframe.
|
||||||
|
|
||||||
## Default
|
### Default
|
||||||
|
|
||||||
The context menu appears when right-clicking anywhere in the window. Use `ContextMenuOption` for menu items and `ContextMenuDivider` for visual separation.
|
|
||||||
|
|
||||||
<FileSource src="/framed/ContextMenu/ContextMenu" />
|
<FileSource src="/framed/ContextMenu/ContextMenu" />
|
||||||
|
|
||||||
## Custom target
|
### Radio groups
|
||||||
|
|
||||||
By default, the context menu will trigger when right clicking anywhere in the `window`.
|
|
||||||
|
|
||||||
Set `target` to specify which element triggers the context menu.
|
|
||||||
|
|
||||||
<FileSource src="/framed/ContextMenu/ContextMenuTarget" />
|
|
||||||
|
|
||||||
## Multiple targets
|
|
||||||
|
|
||||||
Set `target` to an array of elements to trigger the context menu from multiple sources.
|
|
||||||
|
|
||||||
<FileSource src="/framed/ContextMenu/ContextMenuTargets" />
|
|
||||||
|
|
||||||
## Radio groups
|
|
||||||
|
|
||||||
Use `ContextMenuGroup` and `ContextMenuRadioGroup` to organize related options and create radio button selections.
|
|
||||||
|
|
||||||
<FileSource src="/framed/ContextMenu/ContextMenuGroups" />
|
<FileSource src="/framed/ContextMenu/ContextMenuGroups" />
|
||||||
|
|
@ -1,34 +1,16 @@
|
||||||
<script>
|
<script>
|
||||||
import { CopyButton } from "carbon-components-svelte";
|
import { CopyButton, InlineNotification, Link } from "carbon-components-svelte";
|
||||||
import Preview from "../../components/Preview.svelte";
|
import Preview from "../../components/Preview.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
`CopyButton` lets users copy text to their clipboard with a single click. Use it to provide quick access to code snippets, links, or other text content.
|
<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton>
|
||||||
|
<div class="body-short-01">As of version 0.32, this component will copy the provided `code` text when clicking the button.</div>
|
||||||
|
</InlineNotification>
|
||||||
|
|
||||||
This component uses the native [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText) to copy text. Override the default copy functionality with your own implementation. See [Overriding copy functionality](#overriding-copy-functionality).
|
### Default
|
||||||
|
|
||||||
## Default
|
|
||||||
|
|
||||||
Create a copy button with the `text` prop to specify what to copy.
|
|
||||||
|
|
||||||
<CopyButton text="Carbon svelte" />
|
<CopyButton text="Carbon svelte" />
|
||||||
|
|
||||||
## Custom feedback text
|
### Custom feedback text
|
||||||
|
|
||||||
Set `feedback` to customize the message shown after copying.
|
|
||||||
|
|
||||||
<CopyButton text="Carbon svelte" feedback="Copied to clipboard" />
|
<CopyButton text="Carbon svelte" feedback="Copied to clipboard" />
|
||||||
|
|
||||||
## Overriding copy functionality
|
|
||||||
|
|
||||||
Pass a custom function to the `copy` prop to override the default copy behavior.
|
|
||||||
|
|
||||||
This example uses the NPM package [clipboard-copy](https://github.com/feross/clipboard-copy) to copy the text instead of the default Clipboard API.
|
|
||||||
|
|
||||||
<FileSource src="/framed/CopyButton/CopyButtonOverride" />
|
|
||||||
|
|
||||||
## Preventing copy functionality
|
|
||||||
|
|
||||||
Pass a no-op function to the `copy` prop to disable copying.
|
|
||||||
|
|
||||||
<CopyButton text="This text should not be copied" copy={() => {}} />
|
|
||||||
|
|
|
||||||
|
|
@ -1,27 +1,16 @@
|
||||||
---
|
---
|
||||||
components: ["DataTable", "Pagination","Toolbar", "ToolbarContent", "ToolbarSearch", "ToolbarMenu", "ToolbarMenuItem", "ToolbarBatchActions"]
|
components: ["DataTable", "Toolbar", "ToolbarContent", "ToolbarSearch", "ToolbarMenu", "ToolbarMenuItem", "ToolbarBatchActions"]
|
||||||
---
|
---
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { InlineNotification, DataTable, DataTableSkeleton, Pagination, Toolbar, ToolbarContent, ToolbarSearch, ToolbarMenu, ToolbarMenuItem, Button, Link } from "carbon-components-svelte";
|
import { DataTable, DataTableSkeleton, Toolbar, ToolbarContent, ToolbarSearch, ToolbarMenu, ToolbarMenuItem, Button, Link } from "carbon-components-svelte";
|
||||||
import Launch from "carbon-icons-svelte/lib/Launch.svelte";
|
import Launch16 from "carbon-icons-svelte/lib/Launch16";
|
||||||
import Preview from "../../components/Preview.svelte";
|
import Preview from "../../components/Preview.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
`DataTable` displays structured data in a tabular format. Use it to present large datasets with features like sorting, filtering, pagination, and row selection.
|
### Default
|
||||||
|
|
||||||
<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
|
The `DataTable` is keyed for both rendering and sorting. You must define a "key" value per object in the `headers` property and an "id" value in `rows`.
|
||||||
<div class="body-short-01">
|
|
||||||
This component is keyed for performance.
|
|
||||||
|
|
||||||
Every <strong>headers</strong> object must have a unique "key" property.
|
|
||||||
<div class="body-short-01">Every <strong>rows</strong> object must have a unique "id" property.</div>
|
|
||||||
</div>
|
|
||||||
</InlineNotification>
|
|
||||||
|
|
||||||
## Default
|
|
||||||
|
|
||||||
Create a basic table by providing `headers` and `rows` data. Match the `key` in headers with the corresponding property in rows.
|
|
||||||
|
|
||||||
<DataTable
|
<DataTable
|
||||||
headers="{[
|
headers="{[
|
||||||
|
|
@ -76,9 +65,11 @@ Create a basic table by providing `headers` and `rows` data. Match the `key` in
|
||||||
]}"
|
]}"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
## Slotted cells
|
### Slotted cells
|
||||||
|
|
||||||
Use the `"cell"` slot to customize cell content. Access row and cell data through `let:row` and `let:cell` directives. Use `"cell-header"` slot for header cells.
|
Use the `"cell"` slot to control the display value per table cell. Individual row and cell data are provided through the `let:row` and `let:cell` directives.
|
||||||
|
|
||||||
|
The slot name for the table header cells is `"cell-header"`.
|
||||||
|
|
||||||
<DataTable
|
<DataTable
|
||||||
headers="{[
|
headers="{[
|
||||||
|
|
@ -132,25 +123,23 @@ Use the `"cell"` slot to customize cell content. Access row and cell data throug
|
||||||
},
|
},
|
||||||
]}"
|
]}"
|
||||||
>
|
>
|
||||||
<svelte:fragment slot="cell-header" let:header>
|
<span slot="cell-header" let:header>
|
||||||
{#if header.key === 'port'}
|
{#if header.key === 'port'}
|
||||||
{header.value} (network)
|
{header.value} (network)
|
||||||
{:else}
|
{:else}
|
||||||
{header.value}
|
{header.value}
|
||||||
{/if}
|
{/if}
|
||||||
</svelte:fragment>
|
</span>
|
||||||
<svelte:fragment slot="cell" let:row let:cell>
|
<span slot="cell" let:row let:cell>
|
||||||
{#if cell.key === 'rule' && cell.value === 'Round robin'}
|
{#if cell.key === 'rule' && cell.value === 'Round robin'}
|
||||||
<Link icon={Launch} href="https://en.wikipedia.org/wiki/Round-robin_DNS" target="_blank">{cell.value}</Link>
|
<Link inline href="https://en.wikipedia.org/wiki/Round-robin_DNS" target="_blank">{cell.value} <Launch16 /></Link>
|
||||||
{:else}
|
{:else}
|
||||||
{cell.value}
|
{cell.value}
|
||||||
{/if}
|
{/if}
|
||||||
</svelte:fragment>
|
</span>
|
||||||
</DataTable>
|
</DataTable>
|
||||||
|
|
||||||
## With title, description
|
### With title, description
|
||||||
|
|
||||||
Add a title and description to provide context for the table data.
|
|
||||||
|
|
||||||
<DataTable title="Load balancers" description="Your organization's active load balancers."
|
<DataTable title="Load balancers" description="Your organization's active load balancers."
|
||||||
headers="{[
|
headers="{[
|
||||||
|
|
@ -205,160 +194,7 @@ Add a title and description to provide context for the table data.
|
||||||
]}"
|
]}"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
## Slottable title, description
|
### With toolbar
|
||||||
|
|
||||||
Use slots to customize the title and description content.
|
|
||||||
|
|
||||||
<DataTable
|
|
||||||
headers="{[
|
|
||||||
{ key: "name", value: "Name" },
|
|
||||||
{ key: "protocol", value: "Protocol" },
|
|
||||||
{ key: "port", value: "Port" },
|
|
||||||
{ key: "rule", value: "Rule" }
|
|
||||||
]}"
|
|
||||||
rows="{[
|
|
||||||
{
|
|
||||||
id: "a",
|
|
||||||
name: "Load Balancer 3",
|
|
||||||
protocol: "HTTP",
|
|
||||||
port: 3000,
|
|
||||||
rule: "Round robin"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "b",
|
|
||||||
name: "Load Balancer 1",
|
|
||||||
protocol: "HTTP",
|
|
||||||
port: 443,
|
|
||||||
rule: "Round robin"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "c",
|
|
||||||
name: "Load Balancer 2",
|
|
||||||
protocol: "HTTP",
|
|
||||||
port: 80,
|
|
||||||
rule: "DNS delegation"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "d",
|
|
||||||
name: "Load Balancer 6",
|
|
||||||
protocol: "HTTP",
|
|
||||||
port: 3000,
|
|
||||||
rule: "Round robin"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "e",
|
|
||||||
name: "Load Balancer 4",
|
|
||||||
protocol: "HTTP",
|
|
||||||
port: 443,
|
|
||||||
rule: "Round robin"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "f",
|
|
||||||
name: "Load Balancer 5",
|
|
||||||
protocol: "HTTP",
|
|
||||||
port: 80,
|
|
||||||
rule: "DNS delegation"
|
|
||||||
},
|
|
||||||
]}"
|
|
||||||
>
|
|
||||||
<strong slot="title">Load balancers</strong>
|
|
||||||
<span slot="description" style="font-size: 1rem">
|
|
||||||
Your organization's active load balancers.
|
|
||||||
</span>
|
|
||||||
</DataTable>
|
|
||||||
|
|
||||||
## Static width
|
|
||||||
|
|
||||||
Set `useStaticWidth` to `true` to render the table with an auto width instead of 100%.
|
|
||||||
|
|
||||||
<DataTable useStaticWidth
|
|
||||||
title="Load balancers" description="Your organization's active load balancers."
|
|
||||||
headers="{[
|
|
||||||
{ key: "name", value: "Name" },
|
|
||||||
{ key: "protocol", value: "Protocol" },
|
|
||||||
{ key: "port", value: "Port" },
|
|
||||||
{ key: "rule", value: "Rule" }
|
|
||||||
]}"
|
|
||||||
rows="{[
|
|
||||||
{
|
|
||||||
id: "a",
|
|
||||||
name: "Load Balancer 3",
|
|
||||||
protocol: "HTTP",
|
|
||||||
port: 3000,
|
|
||||||
rule: "Round robin"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "b",
|
|
||||||
name: "Load Balancer 1",
|
|
||||||
protocol: "HTTP",
|
|
||||||
port: 443,
|
|
||||||
rule: "Round robin"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "c",
|
|
||||||
name: "Load Balancer 2",
|
|
||||||
protocol: "HTTP",
|
|
||||||
port: 80,
|
|
||||||
rule: "DNS delegation"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "d",
|
|
||||||
name: "Load Balancer 6",
|
|
||||||
protocol: "HTTP",
|
|
||||||
port: 3000,
|
|
||||||
rule: "Round robin"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "e",
|
|
||||||
name: "Load Balancer 4",
|
|
||||||
protocol: "HTTP",
|
|
||||||
port: 443,
|
|
||||||
rule: "Round robin"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "f",
|
|
||||||
name: "Load Balancer 5",
|
|
||||||
protocol: "HTTP",
|
|
||||||
port: 80,
|
|
||||||
rule: "DNS delegation"
|
|
||||||
},
|
|
||||||
]}"
|
|
||||||
/>
|
|
||||||
|
|
||||||
## Custom column widths
|
|
||||||
|
|
||||||
Specify `width` or `minWidth` in the `headers` object to set column dimensions. This applies a fixed table layout.
|
|
||||||
|
|
||||||
<InlineNotification svx-ignore lowContrast kind="warning" title="Note:" hideCloseButton>
|
|
||||||
<div class="body-short-01">Custom column widths do not work with a <a class="bx--link" href="#sticky-header">sticky header</a>.</div>
|
|
||||||
</InlineNotification>
|
|
||||||
|
|
||||||
<FileSource src="/framed/DataTable/DataTableHeaderWidth" />
|
|
||||||
|
|
||||||
## Sticky header
|
|
||||||
|
|
||||||
Set `stickyHeader` to `true` to fix the header in place. This adds a maximum height to force scrolling.
|
|
||||||
|
|
||||||
<DataTable
|
|
||||||
stickyHeader
|
|
||||||
headers={[
|
|
||||||
{ key: "name", value: "Name" },
|
|
||||||
{ key: "protocol", value: "Protocol" },
|
|
||||||
{ key: "port", value: "Port" },
|
|
||||||
{ key: "rule", value: "Rule" },
|
|
||||||
]}
|
|
||||||
rows={Array.from({ length: 20 }).map((_, i) => ({
|
|
||||||
id: i,
|
|
||||||
name: "Load Balancer " + (i + 1),
|
|
||||||
protocol: "HTTP",
|
|
||||||
port: i % 3 ? (i % 2 ? 3000 : 80) : 443,
|
|
||||||
rule: i % 3 ? "Round robin" : "DNS delegation",
|
|
||||||
}))}
|
|
||||||
/>
|
|
||||||
|
|
||||||
## With toolbar
|
|
||||||
|
|
||||||
Add a toolbar with search, menu, and actions above the table.
|
|
||||||
|
|
||||||
<DataTable title="Load balancers" description="Your organization's active load balancers."
|
<DataTable title="Load balancers" description="Your organization's active load balancers."
|
||||||
headers="{[
|
headers="{[
|
||||||
|
|
@ -417,19 +253,15 @@ Add a toolbar with search, menu, and actions above the table.
|
||||||
<ToolbarSearch />
|
<ToolbarSearch />
|
||||||
<ToolbarMenu>
|
<ToolbarMenu>
|
||||||
<ToolbarMenuItem primaryFocus>Restart all</ToolbarMenuItem>
|
<ToolbarMenuItem primaryFocus>Restart all</ToolbarMenuItem>
|
||||||
<ToolbarMenuItem href="https://cloud.ibm.com/docs/loadbalancer-service">
|
<ToolbarMenuItem href="https://cloud.ibm.com/docs/loadbalancer-service">API documentation</ToolbarMenuItem>
|
||||||
API documentation
|
<ToolbarMenuItem danger>Stop all</ToolbarMenuItem>
|
||||||
</ToolbarMenuItem>
|
|
||||||
<ToolbarMenuItem hasDivider danger>Stop all</ToolbarMenuItem>
|
|
||||||
</ToolbarMenu>
|
</ToolbarMenu>
|
||||||
<Button>Create balancer</Button>
|
<Button>Create balancer</Button>
|
||||||
</ToolbarContent>
|
</ToolbarContent>
|
||||||
</Toolbar>
|
</Toolbar>
|
||||||
</DataTable>
|
</DataTable>
|
||||||
|
|
||||||
## With toolbar (small size)
|
### With toolbar (small size)
|
||||||
|
|
||||||
Use `size="short"` to create a more compact table with a small toolbar.
|
|
||||||
|
|
||||||
<DataTable size="short" title="Load balancers" description="Your organization's active load balancers."
|
<DataTable size="short" title="Load balancers" description="Your organization's active load balancers."
|
||||||
headers="{[
|
headers="{[
|
||||||
|
|
@ -489,30 +321,14 @@ Use `size="short"` to create a more compact table with a small toolbar.
|
||||||
<ToolbarMenu>
|
<ToolbarMenu>
|
||||||
<ToolbarMenuItem primaryFocus>Restart all</ToolbarMenuItem>
|
<ToolbarMenuItem primaryFocus>Restart all</ToolbarMenuItem>
|
||||||
<ToolbarMenuItem href="https://cloud.ibm.com/docs/loadbalancer-service">API documentation</ToolbarMenuItem>
|
<ToolbarMenuItem href="https://cloud.ibm.com/docs/loadbalancer-service">API documentation</ToolbarMenuItem>
|
||||||
<ToolbarMenuItem hasDivider danger>Stop all</ToolbarMenuItem>
|
<ToolbarMenuItem danger>Stop all</ToolbarMenuItem>
|
||||||
</ToolbarMenu>
|
</ToolbarMenu>
|
||||||
<Button>Create balancer</Button>
|
<Button>Create balancer</Button>
|
||||||
</ToolbarContent>
|
</ToolbarContent>
|
||||||
</Toolbar>
|
</Toolbar>
|
||||||
</DataTable>
|
</DataTable>
|
||||||
|
|
||||||
## Filterable
|
### Zebra stripes
|
||||||
|
|
||||||
Set `shouldFilterRows` to `true` to enable client-side filtering. The default filter performs string comparisons on cell values.
|
|
||||||
|
|
||||||
For pagination with filtering, bind to `filteredRowIds` and pass its length to `Pagination`'s `totalItems`.
|
|
||||||
|
|
||||||
<FileSource src="/framed/DataTable/DataTableFilterable" />
|
|
||||||
|
|
||||||
## Filterable (custom)
|
|
||||||
|
|
||||||
Pass a function to `shouldFilterRows` to implement custom filtering logic.
|
|
||||||
|
|
||||||
<FileSource src="/framed/DataTable/DataTableFilterCustom" />
|
|
||||||
|
|
||||||
## Zebra stripes
|
|
||||||
|
|
||||||
Set `zebra` to `true` to add alternating row colors.
|
|
||||||
|
|
||||||
<DataTable zebra
|
<DataTable zebra
|
||||||
headers="{[
|
headers="{[
|
||||||
|
|
@ -567,9 +383,7 @@ Set `zebra` to `true` to add alternating row colors.
|
||||||
]}"
|
]}"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
## Tall rows
|
### Tall rows
|
||||||
|
|
||||||
Set `size="tall"` for increased row height.
|
|
||||||
|
|
||||||
<DataTable size="tall"
|
<DataTable size="tall"
|
||||||
headers="{[
|
headers="{[
|
||||||
|
|
@ -624,66 +438,7 @@ Set `size="tall"` for increased row height.
|
||||||
]}"
|
]}"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
## Medium rows
|
### Short rows
|
||||||
|
|
||||||
Set `size="medium"` for standard row height.
|
|
||||||
|
|
||||||
<DataTable size="medium"
|
|
||||||
headers="{[
|
|
||||||
{ key: "name", value: "Name" },
|
|
||||||
{ key: "protocol", value: "Protocol" },
|
|
||||||
{ key: "port", value: "Port" },
|
|
||||||
{ key: "rule", value: "Rule" }
|
|
||||||
]}"
|
|
||||||
rows="{[
|
|
||||||
{
|
|
||||||
id: "a",
|
|
||||||
name: "Load Balancer 3",
|
|
||||||
protocol: "HTTP",
|
|
||||||
port: 3000,
|
|
||||||
rule: "Round robin"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "b",
|
|
||||||
name: "Load Balancer 1",
|
|
||||||
protocol: "HTTP",
|
|
||||||
port: 443,
|
|
||||||
rule: "Round robin"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "c",
|
|
||||||
name: "Load Balancer 2",
|
|
||||||
protocol: "HTTP",
|
|
||||||
port: 80,
|
|
||||||
rule: "DNS delegation"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "d",
|
|
||||||
name: "Load Balancer 6",
|
|
||||||
protocol: "HTTP",
|
|
||||||
port: 3000,
|
|
||||||
rule: "Round robin"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "e",
|
|
||||||
name: "Load Balancer 4",
|
|
||||||
protocol: "HTTP",
|
|
||||||
port: 443,
|
|
||||||
rule: "Round robin"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "f",
|
|
||||||
name: "Load Balancer 5",
|
|
||||||
protocol: "HTTP",
|
|
||||||
port: 80,
|
|
||||||
rule: "DNS delegation"
|
|
||||||
},
|
|
||||||
]}"
|
|
||||||
/>
|
|
||||||
|
|
||||||
## Short rows
|
|
||||||
|
|
||||||
Set `size="short"` for compact row height.
|
|
||||||
|
|
||||||
<DataTable size="short"
|
<DataTable size="short"
|
||||||
headers="{[
|
headers="{[
|
||||||
|
|
@ -738,9 +493,7 @@ Set `size="short"` for compact row height.
|
||||||
]}"
|
]}"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
## Compact rows
|
### Compact rows
|
||||||
|
|
||||||
Set `size="compact"` for minimal row height.
|
|
||||||
|
|
||||||
<DataTable size="compact"
|
<DataTable size="compact"
|
||||||
headers="{[
|
headers="{[
|
||||||
|
|
@ -795,9 +548,13 @@ Set `size="compact"` for minimal row height.
|
||||||
]}"
|
]}"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
## Sortable
|
### Sortable
|
||||||
|
|
||||||
Set `sortable` to `true` to enable column sorting. Disable sorting on specific columns by setting `sort: false` in the header object.
|
Set `sortable` to `true` to enable table column sorting.
|
||||||
|
|
||||||
|
To disable sorting on a specific column, set `sort` to `false` in the header object passed to the `headers` prop.
|
||||||
|
|
||||||
|
In the example below, the "Protocol" column is not sortable.
|
||||||
|
|
||||||
<DataTable sortable
|
<DataTable sortable
|
||||||
headers="{[
|
headers="{[
|
||||||
|
|
@ -852,15 +609,7 @@ Set `sortable` to `true` to enable column sorting. Disable sorting on specific c
|
||||||
]}"
|
]}"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
## Sortable with pagination
|
### Sortable with custom display and sort methods
|
||||||
|
|
||||||
Bind to `pageSize` and `page` props of `Pagination` and pass them to `DataTable`.
|
|
||||||
|
|
||||||
<FileSource src="/framed/DataTable/DataTablePagination" />
|
|
||||||
|
|
||||||
## Sortable with custom display and sort methods
|
|
||||||
|
|
||||||
Use `display` and `sort` functions in header objects to customize cell rendering and sorting.
|
|
||||||
|
|
||||||
<DataTable sortable title="Load balancers" description="Your organization's active load balancers."
|
<DataTable sortable title="Load balancers" description="Your organization's active load balancers."
|
||||||
headers="{[
|
headers="{[
|
||||||
|
|
@ -927,144 +676,33 @@ Use `display` and `sort` functions in header objects to customize cell rendering
|
||||||
]}"
|
]}"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
## Sortable with nested object values
|
### Empty column with overflow menu
|
||||||
|
|
||||||
Access nested object properties using dot notation in the header key.
|
Some use cases require an empty column in the table body without a corresponding table header.
|
||||||
|
|
||||||
<DataTable sortable title="Load balancers" description="Your organization's active load balancers."
|
For an object in the `headers` array, set `empty` to `true` to render an empty column.
|
||||||
headers="{[
|
|
||||||
{ key: "name", value: "Name" },
|
|
||||||
{ key: "network.protocol", value: "Protocol" },
|
|
||||||
{ key: "network.port", value: "Port" },
|
|
||||||
{ key: "cost", value: "Cost", display: (cost) => cost + " €" },
|
|
||||||
{
|
|
||||||
key: "expireDate",
|
|
||||||
value: "Expire date",
|
|
||||||
display: (date) => new Date(date).toLocaleString(),
|
|
||||||
sort: (a, b) => new Date(a) - new Date(b),
|
|
||||||
},
|
|
||||||
]}"
|
|
||||||
rows="{[
|
|
||||||
{
|
|
||||||
id: "a",
|
|
||||||
name: "Load Balancer 3",
|
|
||||||
network: {
|
|
||||||
protocol: "HTTP",
|
|
||||||
port: 3000,
|
|
||||||
},
|
|
||||||
cost: 100,
|
|
||||||
expireDate: "2020-10-21",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "b",
|
|
||||||
name: "Load Balancer 1",
|
|
||||||
network: {
|
|
||||||
protocol: "HTTP",
|
|
||||||
port: 443,
|
|
||||||
},
|
|
||||||
cost: 200,
|
|
||||||
expireDate: "2020-09-10",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "c",
|
|
||||||
name: "Load Balancer 2",
|
|
||||||
network: {
|
|
||||||
protocol: "HTTP",
|
|
||||||
port: 80,
|
|
||||||
},
|
|
||||||
cost: 150,
|
|
||||||
expireDate: "2020-11-24",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "d",
|
|
||||||
name: "Load Balancer 6",
|
|
||||||
network: {
|
|
||||||
protocol: "HTTP",
|
|
||||||
port: 3000,
|
|
||||||
},
|
|
||||||
cost: 250,
|
|
||||||
expireDate: "2020-12-01",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "e",
|
|
||||||
name: "Load Balancer 4",
|
|
||||||
network: {
|
|
||||||
protocol: "HTTP",
|
|
||||||
port: 443,
|
|
||||||
},
|
|
||||||
cost: 550,
|
|
||||||
expireDate: "2021-03-21",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "f",
|
|
||||||
name: "Load Balancer 5",
|
|
||||||
network: {
|
|
||||||
protocol: "HTTP",
|
|
||||||
port: 80,
|
|
||||||
},
|
|
||||||
cost: 400,
|
|
||||||
expireDate: "2020-11-14",
|
|
||||||
},
|
|
||||||
]}"
|
|
||||||
/>
|
|
||||||
|
|
||||||
## Programmatic sorting
|
In the following example, each row in the sortable data table has an overflow menu. There isn't a separate, useless table header column for the overflow menu.
|
||||||
|
|
||||||
Use `sortKey` and `sortDirection` props to control sorting programmatically. Set `sortKey` to a valid header key and `sortDirection` to "none", "ascending", or "descending".
|
|
||||||
|
|
||||||
<FileSource src="/framed/DataTable/DataTableProgrammaticSorting" />
|
|
||||||
|
|
||||||
## Empty column with overflow menu
|
|
||||||
|
|
||||||
Set `empty: true` in a header object to create an empty column. Use this for overflow menus without a header.
|
|
||||||
|
|
||||||
<FileSource src="/framed/DataTable/DataTableAppendColumns" />
|
<FileSource src="/framed/DataTable/DataTableAppendColumns" />
|
||||||
|
|
||||||
## Selectable rows (checkbox)
|
### Selectable
|
||||||
|
|
||||||
Set `selectable` to `true` for multi-select functionality. Bind to `selectedRowIds` to track selections. Use `inputName` to customize checkbox names.
|
|
||||||
|
|
||||||
<FileSource src="/framed/DataTable/SelectableDataTable" />
|
<FileSource src="/framed/DataTable/SelectableDataTable" />
|
||||||
|
|
||||||
## Batch selection
|
### Initial selected rows
|
||||||
|
|
||||||
Set `batchSelection` to `true` to add a checkbox for selecting all rows. The checkbox shows an indeterminate state when some rows are selected.
|
|
||||||
|
|
||||||
<FileSource src="/framed/DataTable/DataTableBatchSelection" />
|
<FileSource src="/framed/DataTable/DataTableBatchSelection" />
|
||||||
|
|
||||||
## Batch selection with initial selected rows
|
### Selectable with batch actions
|
||||||
|
|
||||||
Use `selectedRowIds` to specify initially selected rows.
|
|
||||||
|
|
||||||
<FileSource src="/framed/DataTable/DataTableBatchSelectionInitial" />
|
|
||||||
|
|
||||||
## Batch selection with batch actions toolbar
|
|
||||||
|
|
||||||
Add a toolbar for batch actions when rows are selected.
|
|
||||||
|
|
||||||
<FileSource src="/framed/DataTable/DataTableBatchSelectionToolbar" />
|
<FileSource src="/framed/DataTable/DataTableBatchSelectionToolbar" />
|
||||||
|
|
||||||
## Batch selection with controlled toolbar
|
### Selectable (radio)
|
||||||
|
|
||||||
Control the batch actions toolbar with the `active` prop. Prevent default cancel behavior in the `on:cancel` event.
|
|
||||||
|
|
||||||
<FileSource src="/framed/DataTable/DataTableBatchSelectionToolbarControlled" />
|
|
||||||
|
|
||||||
## Selectable rows (radio)
|
|
||||||
|
|
||||||
Set `radio` to `true` for single-row selection. Bind to `selectedRowIds` to track the selected row. Use `inputName` to customize radio button names.
|
|
||||||
|
|
||||||
<FileSource src="/framed/DataTable/RadioSelectableDataTable" />
|
<FileSource src="/framed/DataTable/RadioSelectableDataTable" />
|
||||||
|
|
||||||
## Non-selectable rows
|
### Expandable
|
||||||
|
|
||||||
Use `nonSelectableRowIds` to prevent selection of specific rows.
|
|
||||||
|
|
||||||
<FileSource src="/framed/DataTable/DataTableNonSelectableRows" />
|
|
||||||
|
|
||||||
## Expandable rows
|
|
||||||
|
|
||||||
Set `expandable` to `true` to make rows expandable. Use the `expanded-row` slot to customize expanded content.
|
|
||||||
|
|
||||||
<DataTable expandable
|
<DataTable expandable
|
||||||
headers="{[
|
headers="{[
|
||||||
|
|
@ -1118,26 +756,14 @@ Set `expandable` to `true` to make rows expandable. Use the `expanded-row` slot
|
||||||
},
|
},
|
||||||
]}"
|
]}"
|
||||||
>
|
>
|
||||||
<svelte:fragment slot="expanded-row" let:row>
|
<div slot="expanded-row" let:row>
|
||||||
<pre>{JSON.stringify(row, null, 2)}</pre>
|
<pre>
|
||||||
</svelte:fragment>
|
{JSON.stringify(row, null, 2)}
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
</DataTable>
|
</DataTable>
|
||||||
|
|
||||||
## Non-expandable rows
|
### Expandable (compact size)
|
||||||
|
|
||||||
Use `nonExpandableRowIds` to prevent expansion of specific rows.
|
|
||||||
|
|
||||||
<FileSource src="/framed/DataTable/DataTableNonExpandableRows" />
|
|
||||||
|
|
||||||
## Expandable (zebra styles)
|
|
||||||
|
|
||||||
Combine expandable rows with zebra striping.
|
|
||||||
|
|
||||||
<FileSource src="/framed/DataTable/DataTableExpandableZebra" />
|
|
||||||
|
|
||||||
## Expandable (compact size)
|
|
||||||
|
|
||||||
Set `size="compact"` for expandable rows with minimal height.
|
|
||||||
|
|
||||||
<DataTable size="compact" expandable
|
<DataTable size="compact" expandable
|
||||||
headers="{[
|
headers="{[
|
||||||
|
|
@ -1191,14 +817,14 @@ Set `size="compact"` for expandable rows with minimal height.
|
||||||
},
|
},
|
||||||
]}"
|
]}"
|
||||||
>
|
>
|
||||||
<svelte:fragment slot="expanded-row" let:row>
|
<div slot="expanded-row" let:row>
|
||||||
<pre>{JSON.stringify(row, null, 2)}</pre>
|
<pre>
|
||||||
</svelte:fragment>
|
{JSON.stringify(row, null, 2)}
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
</DataTable>
|
</DataTable>
|
||||||
|
|
||||||
## Expandable (short size)
|
### Expandable (short size)
|
||||||
|
|
||||||
Set `size="short"` for expandable rows with compact height.
|
|
||||||
|
|
||||||
<DataTable size="short" expandable
|
<DataTable size="short" expandable
|
||||||
headers="{[
|
headers="{[
|
||||||
|
|
@ -1252,14 +878,14 @@ Set `size="short"` for expandable rows with compact height.
|
||||||
},
|
},
|
||||||
]}"
|
]}"
|
||||||
>
|
>
|
||||||
<svelte:fragment slot="expanded-row" let:row>
|
<div slot="expanded-row" let:row>
|
||||||
<pre>{JSON.stringify(row, null, 2)}</pre>
|
<pre>
|
||||||
</svelte:fragment>
|
{JSON.stringify(row, null, 2)}
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
</DataTable>
|
</DataTable>
|
||||||
|
|
||||||
## Expandable (tall size)
|
### Expandable (tall size)
|
||||||
|
|
||||||
Set `size="tall"` for expandable rows with increased height.
|
|
||||||
|
|
||||||
<DataTable size="tall" expandable
|
<DataTable size="tall" expandable
|
||||||
headers="{[
|
headers="{[
|
||||||
|
|
@ -1313,14 +939,14 @@ Set `size="tall"` for expandable rows with increased height.
|
||||||
},
|
},
|
||||||
]}"
|
]}"
|
||||||
>
|
>
|
||||||
<svelte:fragment slot="expanded-row" let:row>
|
<div slot="expanded-row" let:row>
|
||||||
<pre>{JSON.stringify(row, null, 2)}</pre>
|
<pre>
|
||||||
</svelte:fragment>
|
{JSON.stringify(row, null, 2)}
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
</DataTable>
|
</DataTable>
|
||||||
|
|
||||||
## Batch expansion
|
### Batch expansion
|
||||||
|
|
||||||
Set `batchExpansion` to `true` to expand and collapse all rows at once.
|
|
||||||
|
|
||||||
<DataTable batchExpansion
|
<DataTable batchExpansion
|
||||||
headers="{[
|
headers="{[
|
||||||
|
|
@ -1374,61 +1000,45 @@ Set `batchExpansion` to `true` to expand and collapse all rows at once.
|
||||||
},
|
},
|
||||||
]}"
|
]}"
|
||||||
>
|
>
|
||||||
<svelte:fragment slot="expanded-row" let:row>
|
<div slot="expanded-row" let:row>
|
||||||
<pre>{JSON.stringify(row, null, 2)}</pre>
|
<pre>
|
||||||
</svelte:fragment>
|
{JSON.stringify(row, null, 2)}
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
</DataTable>
|
</DataTable>
|
||||||
|
|
||||||
## Expandable and selectable rows
|
### Skeleton
|
||||||
|
|
||||||
Combine `batchExpansion` and `batchSelection` for tables with both expandable and selectable rows.
|
|
||||||
|
|
||||||
<FileSource src="/framed/DataTable/DataTableExpandableSelectable" />
|
|
||||||
|
|
||||||
## Skeleton
|
|
||||||
|
|
||||||
Use `DataTableSkeleton` to show a loading state.
|
|
||||||
|
|
||||||
<DataTableSkeleton />
|
<DataTableSkeleton />
|
||||||
|
|
||||||
## Skeleton with headers, row count
|
### Skeleton with headers, row count
|
||||||
|
|
||||||
Specify headers and row count for the skeleton.
|
|
||||||
|
|
||||||
<DataTableSkeleton headers={["Name", "Protocol", "Port", "Rule"]} rows={10} />
|
<DataTableSkeleton headers={["Name", "Protocol", "Port", "Rule"]} rows={10} />
|
||||||
|
|
||||||
## Skeleton with object headers
|
### Skeleton with object headers
|
||||||
|
|
||||||
Pass header objects to customize the skeleton.
|
`headers` can also be an array of objects. The type is the same as the `headers` prop type used in `DataTable`.
|
||||||
|
|
||||||
<DataTableSkeleton headers={[{ value: "Name" }, {value: "Protocol"}, {value:"Port"}, { value: "Rule"}]} rows={10} />
|
<DataTableSkeleton headers={[{ value: "Name" }, {value: "Protocol"}, {value:"Port"}, { value: "Rule"}]} rows={10} />
|
||||||
|
|
||||||
## Skeleton with empty header
|
### Skeleton with empty header
|
||||||
|
|
||||||
Add an empty header column with `empty: true`.
|
Pass an object with `"empty"` set to `true` to render an empty table header column.
|
||||||
|
|
||||||
<DataTableSkeleton headers={[{ value: "Name" }, {value: "Protocol"}, {value:"Port"}, { value: "Rule"}, { empty: true }]} rows={10} />
|
<DataTableSkeleton headers={[{ value: "Name" }, {value: "Protocol"}, {value:"Port"}, { value: "Rule"}, { empty: true }]} rows={10} />
|
||||||
|
|
||||||
## Skeleton without header, toolbar
|
### Skeleton without header, toolbar
|
||||||
|
|
||||||
Hide the header and toolbar in the skeleton.
|
|
||||||
|
|
||||||
<DataTableSkeleton showHeader={false} showToolbar={false} />
|
<DataTableSkeleton showHeader={false} showToolbar={false} />
|
||||||
|
|
||||||
## Skeleton (tall size)
|
### Skeleton (tall size)
|
||||||
|
|
||||||
Set `size="tall"` for a taller skeleton.
|
|
||||||
|
|
||||||
<DataTableSkeleton showHeader={false} showToolbar={false} size="tall" />
|
<DataTableSkeleton showHeader={false} showToolbar={false} size="tall" />
|
||||||
|
|
||||||
## Skeleton (short size)
|
### Skeleton (short size)
|
||||||
|
|
||||||
Set `size="short"` for a shorter skeleton.
|
|
||||||
|
|
||||||
<DataTableSkeleton showHeader={false} showToolbar={false} size="short" />
|
<DataTableSkeleton showHeader={false} showToolbar={false} size="short" />
|
||||||
|
|
||||||
## Skeleton (compact size)
|
### Skeleton (compact size)
|
||||||
|
|
||||||
Set `size="compact"` for a minimal skeleton.
|
|
||||||
|
|
||||||
<DataTableSkeleton showHeader={false} showToolbar={false} size="compact" />
|
<DataTableSkeleton showHeader={false} showToolbar={false} size="compact" />
|
||||||
|
|
@ -3,112 +3,64 @@ components: ["DatePicker", "DatePickerInput", "DatePickerSkeleton"]
|
||||||
---
|
---
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { DatePicker, DatePickerSkeleton, DatePickerInput, InlineNotification } from "carbon-components-svelte";
|
import { DatePicker, DatePickerSkeleton, DatePickerInput } from "carbon-components-svelte";
|
||||||
import Preview from "../../components/Preview.svelte";
|
import Preview from "../../components/Preview.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
`DatePicker` lets users select a date or date range using a calendar interface. It uses the [flatpickr](https://github.com/flatpickr/flatpickr) library for its calendar implementation.
|
### Default (simple)
|
||||||
|
|
||||||
<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
|
|
||||||
<div class="body-short-01">
|
|
||||||
If using Rollup, specify <strong>inlineDynamicImports: true</strong> in your <strong>rollup.config.js</strong>.
|
|
||||||
</div>
|
|
||||||
</InlineNotification>
|
|
||||||
|
|
||||||
## Single
|
|
||||||
|
|
||||||
Set `datePickerType` to `"single"` for single date selection.
|
|
||||||
|
|
||||||
<FileSource src="/framed/DatePicker/DatePickerSingle" />
|
|
||||||
|
|
||||||
## Range
|
|
||||||
|
|
||||||
Set `datePickerType` to `"range"` to enable date range selection.
|
|
||||||
|
|
||||||
<FileSource src="/framed/DatePicker/DatePickerRange" />
|
|
||||||
|
|
||||||
## DatePicker in a modal
|
|
||||||
|
|
||||||
The calendar is positioned inside the wrapper by default (`flatpickrProps.static: true`). This ensures proper positioning within a [Modal](/components/Modal).
|
|
||||||
|
|
||||||
Set `flatpickrProps.static` to `false` to position the calendar outside the wrapper.
|
|
||||||
|
|
||||||
<FileSource src="/framed/DatePicker/DatePickerModal" />
|
|
||||||
|
|
||||||
## Simple
|
|
||||||
|
|
||||||
Create a simple date picker without a dropdown calendar.
|
|
||||||
|
|
||||||
<DatePicker>
|
<DatePicker>
|
||||||
<DatePickerInput labelText="Date of birth" placeholder="mm/dd/yyyy" />
|
<DatePickerInput labelText="Date of birth" placeholder="mm/dd/yyyy" />
|
||||||
</DatePicker>
|
</DatePicker>
|
||||||
|
|
||||||
## With helper text
|
### Hidden label
|
||||||
|
|
||||||
Add helper text to provide additional context or formatting instructions.
|
|
||||||
|
|
||||||
<DatePicker>
|
|
||||||
<DatePickerInput labelText="Date of birth" helperText="Example: 01/12/1990" placeholder="mm/dd/yyyy" />
|
|
||||||
</DatePicker>
|
|
||||||
|
|
||||||
## Hidden label
|
|
||||||
|
|
||||||
Hide the label while maintaining accessibility.
|
|
||||||
|
|
||||||
<DatePicker>
|
<DatePicker>
|
||||||
<DatePickerInput hideLabel labelText="Date of birth" placeholder="mm/dd/yyyy" />
|
<DatePickerInput hideLabel labelText="Date of birth" placeholder="mm/dd/yyyy" />
|
||||||
</DatePicker>
|
</DatePicker>
|
||||||
|
|
||||||
## Light variant
|
### Light variant
|
||||||
|
|
||||||
Use the light variant for light backgrounds.
|
|
||||||
|
|
||||||
<DatePicker light>
|
<DatePicker light>
|
||||||
<DatePickerInput labelText="Date of birth" placeholder="mm/dd/yyyy" />
|
<DatePickerInput labelText="Date of birth" placeholder="mm/dd/yyyy" />
|
||||||
</DatePicker>
|
</DatePicker>
|
||||||
|
|
||||||
## Extra-large size
|
### Extra-large size
|
||||||
|
|
||||||
Use the extra-large size for more prominent date pickers.
|
|
||||||
|
|
||||||
<DatePicker>
|
<DatePicker>
|
||||||
<DatePickerInput size="xl" labelText="Date of birth" placeholder="mm/dd/yyyy" />
|
<DatePickerInput size="xl" labelText="Date of birth" placeholder="mm/dd/yyyy" />
|
||||||
</DatePicker>
|
</DatePicker>
|
||||||
|
|
||||||
## Small size
|
### Small size
|
||||||
|
|
||||||
Use the small size for compact date pickers.
|
|
||||||
|
|
||||||
<DatePicker>
|
<DatePicker>
|
||||||
<DatePickerInput size="sm" labelText="Date of birth" placeholder="mm/dd/yyyy" />
|
<DatePickerInput size="sm" labelText="Date of birth" placeholder="mm/dd/yyyy" />
|
||||||
</DatePicker>
|
</DatePicker>
|
||||||
|
|
||||||
## Invalid state
|
### Invalid state
|
||||||
|
|
||||||
Show an invalid state when the input value is not valid.
|
|
||||||
|
|
||||||
<DatePicker>
|
<DatePicker>
|
||||||
<DatePickerInput invalid invalidText="Invalid date" labelText="Date of birth" placeholder="mm/dd/yyyy" />
|
<DatePickerInput invalid invalidText="Invalid date" labelText="Date of birth" placeholder="mm/dd/yyyy" />
|
||||||
</DatePicker>
|
</DatePicker>
|
||||||
|
|
||||||
## Warning state
|
### Warning state
|
||||||
|
|
||||||
Show a warning state to indicate potential issues with the input.
|
|
||||||
|
|
||||||
<DatePicker>
|
<DatePicker>
|
||||||
<DatePickerInput warn warnText="This info will not be stored" labelText="Date of birth" placeholder="mm/dd/yyyy" />
|
<DatePickerInput warn warnText="This info will not be stored" labelText="Date of birth" placeholder="mm/dd/yyyy" />
|
||||||
</DatePicker>
|
</DatePicker>
|
||||||
|
|
||||||
## Disabled state
|
### Disabled state
|
||||||
|
|
||||||
Disable the date picker to prevent user interaction.
|
|
||||||
|
|
||||||
<DatePicker>
|
<DatePicker>
|
||||||
<DatePickerInput disabled labelText="Date of birth" placeholder="mm/dd/yyyy" />
|
<DatePickerInput disabled labelText="Date of birth" placeholder="mm/dd/yyyy" />
|
||||||
</DatePicker>
|
</DatePicker>
|
||||||
|
|
||||||
## Skeleton
|
### Single
|
||||||
|
|
||||||
Show a loading state with the skeleton component.
|
<DatePicker datePickerType="single">
|
||||||
|
<DatePickerInput labelText="Schedule a meeting" placeholder="mm/dd/yyyy" />
|
||||||
|
</DatePicker>
|
||||||
|
|
||||||
|
### Skeleton
|
||||||
|
|
||||||
<DatePickerSkeleton />
|
<DatePickerSkeleton />
|
||||||
|
|
@ -3,152 +3,86 @@ components: ["Dropdown", "DropdownSkeleton"]
|
||||||
---
|
---
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { Dropdown, DropdownSkeleton, InlineNotification } from "carbon-components-svelte";
|
import { Dropdown, DropdownSkeleton } from "carbon-components-svelte";
|
||||||
import Preview from "../../components/Preview.svelte";
|
import Preview from "../../components/Preview.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
The `Dropdown` component provides a select input with a dropdown menu. It supports
|
### Default
|
||||||
various states, sizes, and customization options. Each item in the dropdown must
|
|
||||||
have a unique `id` property for proper functionality.
|
|
||||||
|
|
||||||
<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
|
<Dropdown titleText="Contact" selectedIndex={0} items="{[{id: "0", text: "Slack"},
|
||||||
<div class="body-short-01">Every <code>items</code> object must have a unique "id" property.</div>
|
|
||||||
</InlineNotification>
|
|
||||||
|
|
||||||
## Default
|
|
||||||
|
|
||||||
Use the `Dropdown` component to create a select input with a dropdown menu. Each item
|
|
||||||
must have a unique `id` property.
|
|
||||||
|
|
||||||
<Dropdown titleText="Contact" selectedId="0" items="{[{id: "0", text: "Slack"},
|
|
||||||
{id: "1", text: "Email"},
|
{id: "1", text: "Email"},
|
||||||
{id: "2", text: "Fax"}]}" />
|
{id: "2", text: "Fax"}]}" />
|
||||||
|
|
||||||
## Custom slot
|
### Hidden label
|
||||||
|
|
||||||
Override the default slot to customize the display of each item. Access the item and
|
<Dropdown hideLabel titleText="Contact" selectedIndex={0} items="{[{id: "0", text: "Slack"},
|
||||||
index through the `let:` directive.
|
|
||||||
|
|
||||||
<FileSource src="/framed/Dropdown/DropdownSlot" />
|
|
||||||
|
|
||||||
## Hidden label
|
|
||||||
|
|
||||||
Hide the label while maintaining accessibility by setting the `hideLabel` prop to
|
|
||||||
`true`. The label will still be available to screen readers.
|
|
||||||
|
|
||||||
<Dropdown hideLabel titleText="Contact" selectedId="0" items="{[{id: "0", text: "Slack"},
|
|
||||||
{id: "1", text: "Email"},
|
{id: "1", text: "Email"},
|
||||||
{id: "2", text: "Fax"}]}" />
|
{id: "2", text: "Fax"}]}" />
|
||||||
|
|
||||||
## Format item display text
|
### Format item display text
|
||||||
|
|
||||||
Format the display text of items using the `itemToString` prop. This function
|
Use the `itemToString` prop to format the display of individual items.
|
||||||
receives the item object and returns the formatted string.
|
|
||||||
|
|
||||||
<Dropdown itemToString={item => {
|
<Dropdown itemToString={item => {
|
||||||
return item.text + ' (' + item.id +')'
|
return item.text + ' (' + item.id +')'
|
||||||
}} titleText="Contact" selectedId="0" items="{[{id: "0", text: "Slack"},
|
}} titleText="Contact" selectedIndex={0} items="{[{id: "0", text: "Slack"},
|
||||||
{id: "1", text: "Email"},
|
{id: "1", text: "Email"},
|
||||||
{id: "2", text: "Fax"}]}" />
|
{id: "2", text: "Fax"}]}" />
|
||||||
|
|
||||||
## Multiple dropdowns
|
### Multiple dropdowns
|
||||||
|
|
||||||
Create multiple dropdowns that work together. This example demonstrates how to
|
|
||||||
manage the state of multiple dropdowns.
|
|
||||||
|
|
||||||
<FileSource src="/framed/Dropdown/MultipleDropdown" />
|
<FileSource src="/framed/Dropdown/MultipleDropdown" />
|
||||||
|
|
||||||
## Top direction
|
### Top direction
|
||||||
|
|
||||||
Display the dropdown menu above the input by setting the `direction` prop to
|
Set `direction` to `"top"` for the dropdown menu to appear above the input.
|
||||||
`"top"`. This is useful when there's limited space below the input.
|
|
||||||
|
|
||||||
<Dropdown direction="top" titleText="Contact" selectedId="0" items="{[{id: "0", text: "Slack"},
|
<Dropdown direction="top" titleText="Contact" selectedIndex={0} items="{[{id: "0", text: "Slack"},
|
||||||
{id: "1", text: "Email"},
|
{id: "1", text: "Email"},
|
||||||
{id: "2", text: "Fax"}]}" />
|
{id: "2", text: "Fax"}]}" />
|
||||||
|
|
||||||
## Light variant
|
### Light variant
|
||||||
|
|
||||||
Use the light variant for dropdowns on dark backgrounds by setting the `light` prop
|
<Dropdown light titleText="Contact" selectedIndex={0} items="{[{id: "0", text: "Slack"},
|
||||||
to `true`.
|
|
||||||
|
|
||||||
<Dropdown light titleText="Contact" selectedId="0" items="{[{id: "0", text: "Slack"},
|
|
||||||
{id: "1", text: "Email"},
|
{id: "1", text: "Email"},
|
||||||
{id: "2", text: "Fax"}]}" />
|
{id: "2", text: "Fax"}]}" />
|
||||||
|
|
||||||
## Inline variant
|
### Inline type
|
||||||
|
|
||||||
Display the dropdown inline with other content by setting the `type` prop to
|
<Dropdown type="inline" titleText="Contact" selectedIndex={0} items="{[{id: "0", text: "Slack"},
|
||||||
`"inline"`. This variant removes the background and border.
|
|
||||||
|
|
||||||
<Dropdown type="inline" titleText="Contact" selectedId="0" items="{[{id: "0", text: "Slack"},
|
|
||||||
{id: "1", text: "Email"},
|
{id: "1", text: "Email"},
|
||||||
{id: "2", text: "Fax"}]}" />
|
{id: "2", text: "Fax"}]}" />
|
||||||
|
|
||||||
## Extra-large size
|
### Extra-large size
|
||||||
|
|
||||||
Increase the size of the dropdown by setting the `size` prop to `"xl"`. This
|
<Dropdown size="xl" titleText="Contact" selectedIndex={0} items="{[{id: "0", text: "Slack"},
|
||||||
provides more visual emphasis for important selections.
|
|
||||||
|
|
||||||
<Dropdown size="xl" titleText="Contact" selectedId="0" items="{[{id: "0", text: "Slack"},
|
|
||||||
{id: "1", text: "Email"},
|
{id: "1", text: "Email"},
|
||||||
{id: "2", text: "Fax"}]}" />
|
{id: "2", text: "Fax"}]}" />
|
||||||
|
|
||||||
## Small size
|
### Small size
|
||||||
|
|
||||||
Decrease the size of the dropdown by setting the `size` prop to `"sm"`. This is
|
<Dropdown size="sm" titleText="Contact" selectedIndex={0} items="{[{id: "0", text: "Slack"},
|
||||||
useful for compact layouts or secondary selections.
|
|
||||||
|
|
||||||
<Dropdown size="sm" titleText="Contact" selectedId="0" items="{[{id: "0", text: "Slack"},
|
|
||||||
{id: "1", text: "Email"},
|
{id: "1", text: "Email"},
|
||||||
{id: "2", text: "Fax"}]}" />
|
{id: "2", text: "Fax"}]}" />
|
||||||
|
|
||||||
## Invalid state
|
### Invalid state
|
||||||
|
|
||||||
Indicate an invalid selection by setting the `invalid` prop to `true`. Provide
|
<Dropdown invalid invalidText="Secondary contact method must be different from the primary contact" titleText="Contact" selectedIndex={0} items="{[{id: "0", text: "Slack"},
|
||||||
feedback to users with the `invalidText` prop.
|
|
||||||
|
|
||||||
<Dropdown invalid invalidText="Secondary contact method must be different from the primary contact" titleText="Contact" selectedId="0" items="{[{id: "0", text: "Slack"},
|
|
||||||
{id: "1", text: "Email"},
|
{id: "1", text: "Email"},
|
||||||
{id: "2", text: "Fax"}]}" />
|
{id: "2", text: "Fax"}]}" />
|
||||||
|
|
||||||
## Warning state
|
### Warning state
|
||||||
|
|
||||||
Indicate a warning state by setting the `warn` prop to `true`. Provide additional
|
<Dropdown warn warnText="This contact method is not associated with your account" titleText="Contact" selectedIndex={0} items="{[{id: "0", text: "Slack"},
|
||||||
context with the `warnText` prop.
|
|
||||||
|
|
||||||
<Dropdown warn warnText="This contact method is not associated with your account" titleText="Contact" selectedId="0" items="{[{id: "0", text: "Slack"},
|
|
||||||
{id: "1", text: "Email"},
|
{id: "1", text: "Email"},
|
||||||
{id: "2", text: "Fax"}]}" />
|
{id: "2", text: "Fax"}]}" />
|
||||||
|
|
||||||
## Disabled state
|
### Disabled state
|
||||||
|
|
||||||
Disable the entire dropdown by setting the `disabled` prop to `true`. This prevents
|
<Dropdown disabled titleText="Contact" selectedIndex={0} items="{[{id: "0", text: "Slack"},
|
||||||
user interaction with the component.
|
|
||||||
|
|
||||||
<Dropdown disabled titleText="Contact" selectedId="0" items="{[{id: "0", text: "Slack"},
|
|
||||||
{id: "1", text: "Email"},
|
{id: "1", text: "Email"},
|
||||||
{id: "2", text: "Fax"}]}" />
|
{id: "2", text: "Fax"}]}" />
|
||||||
|
|
||||||
## Disabled items
|
### Skeleton
|
||||||
|
|
||||||
Disable specific items in the dropdown by setting the `disabled` property to
|
|
||||||
`true` in the item object. This allows for more granular control over available
|
|
||||||
selections.
|
|
||||||
|
|
||||||
<Dropdown
|
|
||||||
selectedId="0"
|
|
||||||
titleText="Contact"
|
|
||||||
items={[
|
|
||||||
{ id: "0", text: "Slack" },
|
|
||||||
{ id: "1", text: "Email", disabled: true },
|
|
||||||
{ id: "2", text: "Fax" },
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
|
|
||||||
## Skeleton
|
|
||||||
|
|
||||||
Display a loading state using the `DropdownSkeleton` component. This provides
|
|
||||||
visual feedback while the dropdown content is being loaded.
|
|
||||||
|
|
||||||
<DropdownSkeleton />
|
<DropdownSkeleton />
|
||||||
|
|
@ -1,94 +1,36 @@
|
||||||
|
---
|
||||||
|
source: Tile/ExpandableTile.svelte
|
||||||
|
---
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { ExpandableTile, Button } from "carbon-components-svelte";
|
import { ExpandableTile } from "carbon-components-svelte";
|
||||||
import Preview from "../../components/Preview.svelte";
|
import Preview from "../../components/Preview.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
The `ExpandableTile` component creates a collapsible content container that can
|
### Default (unexpanded)
|
||||||
show and hide content with a smooth animation. It's ideal for managing content
|
|
||||||
overflow and progressive disclosure of information. The component automatically
|
|
||||||
measures content height using a resize observer.
|
|
||||||
|
|
||||||
## Default
|
|
||||||
|
|
||||||
Create an expandable tile that shows and hides content. The component uses a
|
|
||||||
[resize observer](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)
|
|
||||||
to determine the height of the above-the-fold content.
|
|
||||||
|
|
||||||
By default, the tile is collapsed. Use the `above` and `below` slots to define the
|
|
||||||
content that appears before and after expansion.
|
|
||||||
|
|
||||||
<ExpandableTile>
|
|
||||||
<div slot="above">
|
|
||||||
<div>
|
|
||||||
Above the fold content here
|
|
||||||
</div>
|
|
||||||
<br />
|
|
||||||
<br />
|
|
||||||
<div>
|
|
||||||
More above the fold content
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div slot="below">Below the fold content here</div>
|
|
||||||
</ExpandableTile>
|
|
||||||
|
|
||||||
## Custom tile heights
|
|
||||||
|
|
||||||
Set custom heights for the tile content using CSS. This is useful when you need to
|
|
||||||
control the exact dimensions of the visible and hidden content.
|
|
||||||
|
|
||||||
<ExpandableTile>
|
<ExpandableTile>
|
||||||
<div slot="above" style="height: 10rem">Above the fold content here</div>
|
<div slot="above" style="height: 10rem">Above the fold content here</div>
|
||||||
<div slot="below" style="height: 10rem">Below the fold content here</div>
|
<div slot="below" style="height: 10rem">Below the fold content here</div>
|
||||||
</ExpandableTile>
|
</ExpandableTile>
|
||||||
|
|
||||||
## Expanded
|
### Expanded
|
||||||
|
|
||||||
Display the tile in its expanded state by default by setting the `expanded` prop to
|
|
||||||
`true`.
|
|
||||||
|
|
||||||
<ExpandableTile expanded>
|
<ExpandableTile expanded>
|
||||||
<div slot="above">Above the fold content here</div>
|
<div slot="above" style="height: 10rem">Above the fold content here</div>
|
||||||
<div slot="below">Below the fold content here</div>
|
<div slot="below" style="height: 10rem">Below the fold content here</div>
|
||||||
</ExpandableTile>
|
</ExpandableTile>
|
||||||
|
|
||||||
## Light variant
|
### Light variant
|
||||||
|
|
||||||
Use the light variant for expandable tiles on dark backgrounds by setting the
|
|
||||||
`light` prop to `true`.
|
|
||||||
|
|
||||||
<ExpandableTile light>
|
<ExpandableTile light>
|
||||||
<div slot="above">Above the fold content here</div>
|
<div slot="above" style="height: 10rem">Above the fold content here</div>
|
||||||
<div slot="below">Below the fold content here</div>
|
<div slot="below" style="height: 10rem">Below the fold content here</div>
|
||||||
</ExpandableTile>
|
</ExpandableTile>
|
||||||
|
|
||||||
## With icon labels
|
### With icon labels
|
||||||
|
|
||||||
Customize the expand/collapse button labels using the `tileExpandedLabel` and
|
|
||||||
`tileCollapsedLabel` props.
|
|
||||||
|
|
||||||
<ExpandableTile tileExpandedLabel="View less" tileCollapsedLabel="View more">
|
<ExpandableTile tileExpandedLabel="View less" tileCollapsedLabel="View more">
|
||||||
<div slot="above">Above the fold content here</div>
|
<div slot="above" style="height: 10rem">Above the fold content here</div>
|
||||||
<div slot="below">Below the fold content here</div>
|
<div slot="below" style="height: 10rem">Below the fold content here</div>
|
||||||
</ExpandableTile>
|
|
||||||
|
|
||||||
## With interactive content
|
|
||||||
|
|
||||||
Handle interactive content within the tile by preventing event propagation. This
|
|
||||||
ensures that clicks on interactive elements don't trigger the tile's expand/collapse
|
|
||||||
behavior.
|
|
||||||
|
|
||||||
<ExpandableTile tileExpandedLabel="View less" tileCollapsedLabel="View more">
|
|
||||||
<div slot="above">
|
|
||||||
<a href="/" on:click|preventDefault|stopPropagation={() => console.log("Hello world")}>
|
|
||||||
Native element
|
|
||||||
</a>
|
|
||||||
<br /><br />
|
|
||||||
<Button on:click={e => {
|
|
||||||
e.stopPropagation();
|
|
||||||
console.log("Hello world");
|
|
||||||
}}>
|
|
||||||
Svelte component
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
<div slot="below">Below the fold content here</div>
|
|
||||||
</ExpandableTile>
|
</ExpandableTile>
|
||||||
|
|
@ -3,142 +3,34 @@ components: ["FileUploaderButton", "FileUploader", "FileUploaderDropContainer",
|
||||||
---
|
---
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { FileUploaderButton, FileUploader, FileUploaderDropContainer, FileUploaderItem, FileUploaderSkeleton, UnorderedList, ListItem } from "carbon-components-svelte";
|
import { FileUploaderButton, FileUploader, FileUploaderDropContainer, FileUploaderItem, FileUploaderSkeleton } from "carbon-components-svelte";
|
||||||
import Preview from "../../components/Preview.svelte";
|
import Preview from "../../components/Preview.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
The `FileUploader` components provide a complete solution for file uploads, including
|
### File uploader (button-only)
|
||||||
a button trigger, drag-and-drop container, and file list display. The components
|
|
||||||
support various states, file validation, and customization options.
|
|
||||||
|
|
||||||
## File uploader (button-only)
|
<FileUploaderButton labelText="Add files" />
|
||||||
|
|
||||||
Create a simple file upload button using `FileUploaderButton`. By default, it
|
### File uploader
|
||||||
accepts a single file. Set `multiple` to `true` to allow multiple file selection.
|
|
||||||
|
|
||||||
<FileUploaderButton labelText="Add file" />
|
|
||||||
|
|
||||||
## Multiple files
|
|
||||||
|
|
||||||
Enable multiple file selection by setting the `multiple` prop to `true`. This
|
|
||||||
allows users to select multiple files at once.
|
|
||||||
|
|
||||||
<FileUploaderButton multiple labelText="Add files" />
|
|
||||||
|
|
||||||
## Custom button kind, size
|
|
||||||
|
|
||||||
Customize the button appearance using the `kind` and `size` props. The default is
|
|
||||||
a small primary button.
|
|
||||||
|
|
||||||
<FileUploaderButton kind="secondary" size="field" />
|
|
||||||
<FileUploaderButton kind="tertiary" size="default" />
|
|
||||||
<FileUploaderButton kind="danger" size="lg" />
|
|
||||||
<FileUploaderButton kind="danger-tertiary" size="xl" />
|
|
||||||
|
|
||||||
## File uploader
|
|
||||||
|
|
||||||
The `FileUploader` component combines a button trigger with a list of uploaded
|
|
||||||
files. It supports file type restrictions, multiple file selection, and various
|
|
||||||
upload states.
|
|
||||||
|
|
||||||
This example accepts multiple JPEG files and displays them in a completed state.
|
|
||||||
|
|
||||||
<FileUploader multiple labelTitle="Upload files" buttonLabel="Add files" labelDescription="Only JPEG files are accepted." accept="{['.jpg', '.jpeg']}" status="complete" />
|
<FileUploader multiple labelTitle="Upload files" buttonLabel="Add files" labelDescription="Only JPEG files are accepted." accept="{['.jpg', '.jpeg']}" status="complete" />
|
||||||
|
|
||||||
## Clear files
|
### Item (uploading)
|
||||||
|
|
||||||
Remove uploaded files from the `FileUploader` component in two ways:
|
|
||||||
|
|
||||||
<UnorderedList svx-ignore style="margin-bottom: var(--cds-spacing-08)">
|
|
||||||
<ListItem>programmatically using the <strong>clearFiles</strong> accessor</ListItem>
|
|
||||||
<ListItem>two-way binding by setting <strong>files</strong> to <strong>[]</strong></ListItem>
|
|
||||||
</UnorderedList>
|
|
||||||
|
|
||||||
<FileSource src="/framed/FileUploader/FileUploaderClearFiles" />
|
|
||||||
|
|
||||||
## File uploader (disabled state)
|
|
||||||
|
|
||||||
Disable the file uploader by setting the `disabled` prop to `true`. This prevents
|
|
||||||
user interaction with the component.
|
|
||||||
|
|
||||||
<FileUploader disabled multiple labelTitle="Upload files" buttonLabel="Add files" labelDescription="Only JPEG files are accepted." accept="{['.jpg', '.jpeg']}" status="complete" />
|
|
||||||
|
|
||||||
## Item (uploading)
|
|
||||||
|
|
||||||
Display a file upload in progress using the `uploading` status. This shows a
|
|
||||||
loading indicator and the file name.
|
|
||||||
|
|
||||||
<FileUploaderItem name="README.md" status="uploading" />
|
<FileUploaderItem name="README.md" status="uploading" />
|
||||||
|
|
||||||
## Item (complete)
|
### Item (complete)
|
||||||
|
|
||||||
Show a successfully uploaded file using the `complete` status. This displays a
|
|
||||||
checkmark icon next to the file name.
|
|
||||||
|
|
||||||
<FileUploaderItem name="README.md" status="complete" />
|
<FileUploaderItem name="README.md" status="complete" />
|
||||||
|
|
||||||
## Item (edit)
|
### Item (invalid)
|
||||||
|
|
||||||
Enable file deletion by setting the status to `"edit"`. Clicking the close icon
|
<FileUploaderItem invalid name="README.md" status="edit" />
|
||||||
dispatches a `delete` event with the item's ID.
|
|
||||||
|
|
||||||
<FileUploaderItem id="readme" name="README.md" status="edit" on:delete={(e) => {
|
### Drop container
|
||||||
console.log(e.detail); // "readme"
|
|
||||||
}} />
|
|
||||||
|
|
||||||
## Item (edit status, invalid state)
|
<FileUploaderDropContainer labelText="Drag and drop files here or click to upload" multiple />
|
||||||
|
|
||||||
Mark a file as invalid while keeping it editable. This shows an error icon and
|
### Skeleton
|
||||||
allows the user to remove the file.
|
|
||||||
|
|
||||||
<FileUploaderItem invalid id="readme" name="README.md" status="edit" on:delete />
|
|
||||||
|
|
||||||
## Item (edit status, invalid state with subject, body)
|
|
||||||
|
|
||||||
Provide detailed error messages for invalid files using the `errorSubject` and
|
|
||||||
`errorBody` props. This helps users understand and resolve upload issues.
|
|
||||||
|
|
||||||
<FileUploaderItem
|
|
||||||
invalid
|
|
||||||
id="readme"
|
|
||||||
name="README.md"
|
|
||||||
errorSubject="File size exceeds 500kb limit"
|
|
||||||
errorBody="Please select a new file."
|
|
||||||
status="edit"
|
|
||||||
on:delete
|
|
||||||
/>
|
|
||||||
|
|
||||||
## Item sizes
|
|
||||||
|
|
||||||
Customize the size of file uploader items using the `size` prop. The default size
|
|
||||||
is "default".
|
|
||||||
|
|
||||||
<FileUploaderItem size="default" name="README.md" status="uploading" />
|
|
||||||
<FileUploaderItem size="field" name="README.md" status="uploading" />
|
|
||||||
<FileUploaderItem size="small" name="README.md" status="uploading" />
|
|
||||||
|
|
||||||
## Drop container
|
|
||||||
|
|
||||||
Use `FileUploaderDropContainer` for drag-and-drop file uploads. It supports file
|
|
||||||
validation and multiple file selection.
|
|
||||||
|
|
||||||
This example accepts files smaller than 1 kB and logs the selected files to the
|
|
||||||
console.
|
|
||||||
|
|
||||||
<FileUploaderDropContainer
|
|
||||||
multiple
|
|
||||||
labelText="Drag and drop files here or click to upload"
|
|
||||||
validateFiles={files => {
|
|
||||||
return files.filter(file => file.size < 1_024)
|
|
||||||
}}
|
|
||||||
on:change={e=> {
|
|
||||||
console.log("files", e.detail)
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
|
|
||||||
## Skeleton
|
|
||||||
|
|
||||||
Display a loading state using the `FileUploaderSkeleton` component. This provides
|
|
||||||
visual feedback while the file uploader content is being loaded.
|
|
||||||
|
|
||||||
<FileUploaderSkeleton />
|
<FileUploaderSkeleton />
|
||||||
|
|
@ -1,24 +1,15 @@
|
||||||
<script>
|
<script>
|
||||||
import {
|
import { FluidForm, FormGroup, TextInput, PasswordInput, Button,} from "carbon-components-svelte";
|
||||||
FluidForm,
|
|
||||||
TextInput,
|
|
||||||
PasswordInput,
|
|
||||||
} from "carbon-components-svelte";
|
|
||||||
import Preview from "../../components/Preview.svelte";
|
import Preview from "../../components/Preview.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
The `FluidForm` component provides a fluid-width form layout that adapts to its
|
### Fluid form
|
||||||
container. It's designed for full-width form layouts and works with most Carbon
|
|
||||||
input components. Note that inline input variants cannot be used within a
|
|
||||||
`FluidForm`.
|
|
||||||
|
|
||||||
## Fluid form
|
|
||||||
|
|
||||||
Create a fluid-width form layout using the `FluidForm` component. This example
|
|
||||||
shows a basic login form with required fields.
|
|
||||||
|
|
||||||
<FluidForm>
|
<FluidForm>
|
||||||
<TextInput labelText="User name" placeholder="Enter user name..." required />
|
<TextInput
|
||||||
|
labelText="User name"
|
||||||
|
placeholder="Enter user name..."
|
||||||
|
required />
|
||||||
<PasswordInput
|
<PasswordInput
|
||||||
required
|
required
|
||||||
type="password"
|
type="password"
|
||||||
|
|
@ -26,11 +17,3 @@ shows a basic login form with required fields.
|
||||||
placeholder="Enter password..."
|
placeholder="Enter password..."
|
||||||
/>
|
/>
|
||||||
</FluidForm>
|
</FluidForm>
|
||||||
|
|
||||||
## Invalid state
|
|
||||||
|
|
||||||
Handle form validation and display error states using the `invalid` and
|
|
||||||
`invalidText` props on form inputs. This example demonstrates how to show
|
|
||||||
validation errors in a fluid form.
|
|
||||||
|
|
||||||
<FileSource src="/framed/FluidForm/FluidFormInvalid" />
|
|
||||||
|
|
@ -14,14 +14,7 @@ components: ["Form", "FormGroup"]
|
||||||
import Preview from "../../components/Preview.svelte";
|
import Preview from "../../components/Preview.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
The `Form` component provides a structured way to collect user input. It works with
|
### Form
|
||||||
various form controls like checkboxes, radio buttons, and select menus. The
|
|
||||||
`FormGroup` component helps organize related form controls with a legend.
|
|
||||||
|
|
||||||
## Form
|
|
||||||
|
|
||||||
Create a form with grouped controls using `Form` and `FormGroup`. This example
|
|
||||||
shows a form with checkboxes, radio buttons, and a select menu.
|
|
||||||
|
|
||||||
<Form on:submit>
|
<Form on:submit>
|
||||||
<FormGroup legendText="Checkboxes">
|
<FormGroup legendText="Checkboxes">
|
||||||
|
|
@ -53,7 +46,7 @@ shows a form with checkboxes, radio buttons, and a select menu.
|
||||||
</RadioButtonGroup>
|
</RadioButtonGroup>
|
||||||
</FormGroup>
|
</FormGroup>
|
||||||
<FormGroup>
|
<FormGroup>
|
||||||
<Select id="select-1" labelText="Select menu">
|
<Select id="select-1" labelText="Select menu" value="placeholder-item">
|
||||||
<SelectItem
|
<SelectItem
|
||||||
disabled
|
disabled
|
||||||
hidden
|
hidden
|
||||||
|
|
@ -67,17 +60,3 @@ shows a form with checkboxes, radio buttons, and a select menu.
|
||||||
</FormGroup>
|
</FormGroup>
|
||||||
<Button type="submit">Submit</Button>
|
<Button type="submit">Submit</Button>
|
||||||
</Form>
|
</Form>
|
||||||
|
|
||||||
## Prevent default behavior
|
|
||||||
|
|
||||||
Handle form submission by preventing the default browser behavior. Use
|
|
||||||
`e.preventDefault()` to stop the native form submission and handle the event
|
|
||||||
programmatically.
|
|
||||||
|
|
||||||
<Form on:submit={e => {
|
|
||||||
e.preventDefault();
|
|
||||||
console.log("submit", e);
|
|
||||||
}}>
|
|
||||||
<Checkbox id="checkbox-0" labelText="Checkbox Label" checked />
|
|
||||||
<Button type="submit">Submit</Button>
|
|
||||||
</Form>
|
|
||||||
|
|
|
||||||
|
|
@ -6,62 +6,34 @@ components: ["Grid", "Row", "Column"]
|
||||||
import Preview from "../../components/Preview.svelte";
|
import Preview from "../../components/Preview.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
The `Grid` system provides a responsive, 12-column layout structure. Use `Row` and
|
### Default
|
||||||
`Column` components to create flexible layouts that adapt to different screen
|
|
||||||
sizes. The grid supports various spacing options and column configurations.
|
|
||||||
|
|
||||||
## Default
|
|
||||||
|
|
||||||
Create a basic grid layout with equal-width columns. This example demonstrates the
|
|
||||||
default grid behavior.
|
|
||||||
|
|
||||||
<FileSource src="/framed/Grid/Grid" />
|
<FileSource src="/framed/Grid/Grid" />
|
||||||
|
|
||||||
## Full width
|
### Full width
|
||||||
|
|
||||||
Use the full-width grid variant for layouts that span the entire viewport width.
|
|
||||||
This removes the default max-width constraint.
|
|
||||||
|
|
||||||
<FileSource src="/framed/Grid/FullWidthGrid" />
|
<FileSource src="/framed/Grid/FullWidthGrid" />
|
||||||
|
|
||||||
## Narrow
|
### Narrow
|
||||||
|
|
||||||
Create a more compact grid layout using the narrow variant. This reduces the
|
|
||||||
spacing between columns.
|
|
||||||
|
|
||||||
<FileSource src="/framed/Grid/NarrowGrid" />
|
<FileSource src="/framed/Grid/NarrowGrid" />
|
||||||
|
|
||||||
## Condensed
|
### Condensed
|
||||||
|
|
||||||
Use the condensed variant for even tighter spacing between columns. This is ideal
|
|
||||||
for dense data displays.
|
|
||||||
|
|
||||||
<FileSource src="/framed/Grid/CondensedGrid" />
|
<FileSource src="/framed/Grid/CondensedGrid" />
|
||||||
|
|
||||||
## Responsive
|
### Responsive
|
||||||
|
|
||||||
Build responsive layouts by specifying different column widths for different
|
|
||||||
breakpoints. The grid automatically adjusts based on screen size.
|
|
||||||
|
|
||||||
<FileSource src="/framed/Grid/ResponsiveGrid" />
|
<FileSource src="/framed/Grid/ResponsiveGrid" />
|
||||||
|
|
||||||
## Offset columns
|
### Offset columns
|
||||||
|
|
||||||
Create space between columns using the offset feature. This allows for more
|
|
||||||
flexible layouts without empty columns.
|
|
||||||
|
|
||||||
<FileSource src="/framed/Grid/OffsetColumns" />
|
<FileSource src="/framed/Grid/OffsetColumns" />
|
||||||
|
|
||||||
## Aspect ratio columns
|
### Aspect ratio columns
|
||||||
|
|
||||||
Maintain consistent column heights using aspect ratio columns. This ensures
|
|
||||||
content alignment across different column widths.
|
|
||||||
|
|
||||||
<FileSource src="/framed/Grid/AspectRatioColumns" />
|
<FileSource src="/framed/Grid/AspectRatioColumns" />
|
||||||
|
|
||||||
## Padded columns
|
### Padded columns
|
||||||
|
|
||||||
Add padding to columns using the padded variant. This creates more breathing room
|
|
||||||
between content.
|
|
||||||
|
|
||||||
<FileSource src="/framed/Grid/PaddedGrid" />
|
<FileSource src="/framed/Grid/PaddedGrid" />
|
||||||
|
|
|
||||||
28
docs/src/pages/components/Icon.svx
Normal file
28
docs/src/pages/components/Icon.svx
Normal file
|
|
@ -0,0 +1,28 @@
|
||||||
|
<script>
|
||||||
|
import { Icon, InlineNotification, OutboundLink } from "carbon-components-svelte";
|
||||||
|
import Add16 from "carbon-icons-svelte/lib/Add16";
|
||||||
|
import Add20 from "carbon-icons-svelte/lib/Add20";
|
||||||
|
import Add24 from "carbon-icons-svelte/lib/Add24";
|
||||||
|
import Add32 from "carbon-icons-svelte/lib/Add32";
|
||||||
|
import Preview from "../../components/Preview.svelte";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<InlineNotification svx-ignore title="Deprecation warning" kind="warning" hideCloseButton>
|
||||||
|
<div>
|
||||||
|
This component will be removed in the next major release. Use icons from <OutboundLink href="https://github.com/IBM/carbon-icons-svelte">carbon-icons-svelte</OutboundLink> instead.
|
||||||
|
</div>
|
||||||
|
</InlineNotification>
|
||||||
|
|
||||||
|
### Default
|
||||||
|
|
||||||
|
<Icon render={Add16} />
|
||||||
|
<Icon render={Add20} />
|
||||||
|
<Icon render={Add24} />
|
||||||
|
<Icon render={Add32} />
|
||||||
|
|
||||||
|
### Skeleton
|
||||||
|
|
||||||
|
<Icon skeleton render={Add16} />
|
||||||
|
<Icon skeleton size={20} render={Add20} />
|
||||||
|
<Icon skeleton size={24} render={Add24} />
|
||||||
|
<Icon skeleton size={32} render={Add32} />
|
||||||
|
|
@ -5,60 +5,42 @@
|
||||||
let key = 0;
|
let key = 0;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
The `ImageLoader` component provides a robust way to load images with built-in
|
This utility component uses the [Image API](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image) to programmatically load an image with slottable loading and error states.
|
||||||
loading and error states. It uses the [Image API](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image)
|
|
||||||
to handle image loading programmatically. The component supports aspect ratios,
|
|
||||||
fade-in animations, and custom loading/error states.
|
|
||||||
|
|
||||||
## Default
|
### Default
|
||||||
|
|
||||||
Load an image with the default configuration. The component handles the loading
|
|
||||||
process automatically.
|
|
||||||
|
|
||||||
<ImageLoader src="https://upload.wikimedia.org/wikipedia/commons/5/51/IBM_logo.svg" />
|
<ImageLoader src="https://upload.wikimedia.org/wikipedia/commons/5/51/IBM_logo.svg" />
|
||||||
|
|
||||||
## Slots
|
### Slots
|
||||||
|
|
||||||
Customize the loading and error states using named slots. This example shows how
|
Use the "loading" and "error" named slots to render an element when the image is loading or has an error.
|
||||||
to display a loading indicator and error message.
|
|
||||||
|
|
||||||
<ImageLoader src="https://upload.wikimedia.org/wikipedia/commons/5/51/IBM_logo.svg">
|
<ImageLoader src="https://upload.wikimedia.org/wikipedia/commons/5/51/IBM_logo.svg">
|
||||||
<svelte:fragment slot="loading">
|
<div slot="loading">
|
||||||
<InlineLoading />
|
<InlineLoading />
|
||||||
</svelte:fragment>
|
</div>
|
||||||
<svelte:fragment slot="error">
|
<div slot="error">
|
||||||
An error occurred.
|
An error occurred.
|
||||||
</svelte:fragment>
|
</div>
|
||||||
</ImageLoader>
|
</ImageLoader>
|
||||||
|
|
||||||
## With aspect ratio
|
### With aspect ratio
|
||||||
|
|
||||||
Maintain consistent image dimensions using aspect ratios. The component uses
|
If `ratio` is set, this component uses the [AspectRatio](/components/AspectRatio) to constrain the image.
|
||||||
[AspectRatio](/components/AspectRatio) to constrain the image.
|
|
||||||
|
|
||||||
Supported aspect ratios include `"2x1"`, `"2x3"`, `"16x9"`, `"4x3"`, `"1x1"`,
|
Supported aspect ratios include `"2x1"`, `"16x9"`, `"4x3"`, `"1x1"`, `"3x4"`, `"9x16"` and `"1x2"`.
|
||||||
`"3x4"`, `"3x2"`, `"9x16"` and `"1x2"`.
|
|
||||||
|
|
||||||
<ImageLoader ratio="16x9" src="https://upload.wikimedia.org/wikipedia/commons/5/51/IBM_logo.svg" />
|
<ImageLoader ratio="16x9" src="https://upload.wikimedia.org/wikipedia/commons/5/51/IBM_logo.svg" />
|
||||||
|
|
||||||
## Fade in
|
### Fade in
|
||||||
|
|
||||||
Enable a smooth fade-in animation when the image loads successfully. This provides
|
Set `fadeIn` to `true` to fade in the image if successfully loaded.
|
||||||
a better user experience for image loading.
|
|
||||||
|
|
||||||
<Button kind="ghost" on:click="{() => { key++;}}">Reload image</Button>
|
<Button kind="ghost" on:click="{() => { key++;}}">Reload image</Button>
|
||||||
{#key key}<ImageLoader fadeIn ratio="16x9" src="https://upload.wikimedia.org/wikipedia/commons/5/51/IBM_logo.svg" />{/key}
|
{#key key}<ImageLoader fadeIn ratio="16x9" src="https://upload.wikimedia.org/wikipedia/commons/5/51/IBM_logo.svg" />{/key}
|
||||||
|
|
||||||
## Programmatic usage
|
### Programmatic usage
|
||||||
|
|
||||||
Control image loading programmatically using component references. This example
|
In this example, a component reference is obtained to programmatically trigger the `loadImage` method.
|
||||||
demonstrates how to trigger image loading manually.
|
|
||||||
|
|
||||||
<FileSource src="/framed/ImageLoader/ProgrammaticImageLoader" />
|
<FileSource src="/framed/ImageLoader/ProgrammaticImageLoader" />
|
||||||
|
|
||||||
## Dynamic image source
|
|
||||||
|
|
||||||
Update the image source dynamically using the same `ImageLoader` instance. This
|
|
||||||
allows for smooth transitions between different images.
|
|
||||||
|
|
||||||
<FileSource src="/framed/ImageLoader/DynamicImageLoader" />
|
|
||||||
|
|
|
||||||
|
|
@ -1,44 +1,23 @@
|
||||||
---
|
|
||||||
components: ["InlineLoading"]
|
|
||||||
---
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { InlineLoading, UnorderedList, ListItem } from "carbon-components-svelte";
|
import { InlineLoading } from "carbon-components-svelte";
|
||||||
import Preview from "../../components/Preview.svelte";
|
import Preview from "../../components/Preview.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
The `InlineLoading` component provides a compact loading indicator that can be embedded within content. It's ideal for showing progress during inline operations like form submissions or data updates.
|
### Default
|
||||||
|
|
||||||
## Default
|
|
||||||
|
|
||||||
Display a basic loading indicator with the default configuration.
|
|
||||||
|
|
||||||
<InlineLoading />
|
<InlineLoading />
|
||||||
|
|
||||||
## With description
|
### With description
|
||||||
|
|
||||||
Add a descriptive text to provide context about the loading operation.
|
|
||||||
|
|
||||||
<InlineLoading description="Loading metrics..." />
|
<InlineLoading description="Loading metrics..." />
|
||||||
|
|
||||||
## Status states
|
### Status states
|
||||||
|
|
||||||
The component supports different status states to indicate progress:
|
|
||||||
|
|
||||||
<UnorderedList svx-ignore style="margin-bottom: var(--cds-spacing-08)">
|
|
||||||
<ListItem><strong>active</strong>: Shows an animated loading indicator</ListItem>
|
|
||||||
<ListItem><strong>inactive</strong>: Displays a static state</ListItem>
|
|
||||||
<ListItem><strong>finished</strong>: Shows a success state</ListItem>
|
|
||||||
<ListItem><strong>error</strong>: Displays an error state</ListItem>
|
|
||||||
</UnorderedList>
|
|
||||||
|
|
||||||
<InlineLoading status="active" description="Submitting..." />
|
<InlineLoading status="active" description="Submitting..." />
|
||||||
<InlineLoading status="inactive" description="Cancelling..." />
|
<InlineLoading status="inactive" description="Cancelling..." />
|
||||||
<InlineLoading status="finished" description="Success" />
|
<InlineLoading status="finished" description="Success" />
|
||||||
<InlineLoading status="error" description="An error occurred" />
|
<InlineLoading status="error" description="An error occurred" />
|
||||||
|
|
||||||
## UX example
|
### UX example
|
||||||
|
|
||||||
See how to integrate the loading indicator in a real-world scenario.
|
|
||||||
|
|
||||||
<FileSource src="/framed/InlineLoading/InlineLoadingUx" />
|
<FileSource src="/framed/InlineLoading/InlineLoadingUx" />
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
---
|
---
|
||||||
components: ["InlineNotification", "NotificationActionButton"]
|
source: Notification/InlineNotification.svelte
|
||||||
---
|
---
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -7,65 +7,23 @@ components: ["InlineNotification", "NotificationActionButton"]
|
||||||
import Preview from "../../components/Preview.svelte";
|
import Preview from "../../components/Preview.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
The `InlineNotification` component displays contextual messages inline with content. It supports various types of notifications (error, warning, success, info) and can include actions. Use it to provide feedback or important information to users.
|
### Default (error)
|
||||||
|
|
||||||
See [detailed usage](https://carbondesignsystem.com/components/notification/usage).
|
|
||||||
See also: [ToastNotification](ToastNotification)
|
|
||||||
|
|
||||||
## Default
|
|
||||||
|
|
||||||
Display a basic error notification with title and subtitle by default.
|
|
||||||
|
|
||||||
<InlineNotification title="Error:" subtitle="An internal server error occurred." />
|
<InlineNotification title="Error:" subtitle="An internal server error occurred." />
|
||||||
|
|
||||||
## Prevent default close behavior
|
### Hidden close button
|
||||||
|
|
||||||
The component is controlled, allowing you to prevent the default close behavior using `e.preventDefault()`.
|
|
||||||
|
|
||||||
<InlineNotification title="Error" subtitle="An internal server error occurred." on:close={(e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
// custom close logic (e.g., transitions)
|
|
||||||
}} />
|
|
||||||
|
|
||||||
## Slottable title and subtitle
|
|
||||||
|
|
||||||
Customize the notification content using slots for more flexibility.
|
|
||||||
|
|
||||||
<InlineNotification>
|
|
||||||
<strong slot="title">Error: </strong>
|
|
||||||
<strong slot="subtitle">An internal server error occurred.</strong>
|
|
||||||
</InlineNotification>
|
|
||||||
|
|
||||||
## Accessible icon descriptions
|
|
||||||
|
|
||||||
Make notifications more accessible by providing custom descriptions for icons.
|
|
||||||
|
|
||||||
<InlineNotification
|
|
||||||
title="错误"
|
|
||||||
subtitle="发生内部服务器错误"
|
|
||||||
statusIconDescription="错误图标"
|
|
||||||
closeButtonDescription="关闭通知"
|
|
||||||
/>
|
|
||||||
|
|
||||||
## Hidden close button
|
|
||||||
|
|
||||||
Create a persistent notification by hiding the close button.
|
|
||||||
|
|
||||||
<InlineNotification hideCloseButton kind="warning" title="Scheduled maintenance:" subtitle="Maintenance will last 2-4 hours." />
|
<InlineNotification hideCloseButton kind="warning" title="Scheduled maintenance:" subtitle="Maintenance will last 2-4 hours." />
|
||||||
|
|
||||||
## With actions
|
### With actions
|
||||||
|
|
||||||
Add interactive elements to notifications using the actions slot.
|
|
||||||
|
|
||||||
<InlineNotification kind="warning" title="Scheduled maintenance:" subtitle="Maintenance will last 2-4 hours.">
|
<InlineNotification kind="warning" title="Scheduled maintenance:" subtitle="Maintenance will last 2-4 hours.">
|
||||||
<svelte:fragment slot="actions">
|
<div slot="actions">
|
||||||
<NotificationActionButton>Learn more</NotificationActionButton>
|
<NotificationActionButton>Learn more</NotificationActionButton>
|
||||||
</svelte:fragment>
|
</div>
|
||||||
</InlineNotification>
|
</InlineNotification>
|
||||||
|
|
||||||
## Notification variants
|
### Notification variants
|
||||||
|
|
||||||
The component supports different notification types:
|
|
||||||
|
|
||||||
<InlineNotification kind="error" title="Error:" subtitle="An internal server error occurred." />
|
<InlineNotification kind="error" title="Error:" subtitle="An internal server error occurred." />
|
||||||
<InlineNotification kind="info" title="New updates:" subtitle="Restart to get the latest updates." />
|
<InlineNotification kind="info" title="New updates:" subtitle="Restart to get the latest updates." />
|
||||||
|
|
@ -74,9 +32,7 @@ The component supports different notification types:
|
||||||
<InlineNotification kind="warning" title="Scheduled maintenance:" subtitle="Maintenance will last 2-4 hours." />
|
<InlineNotification kind="warning" title="Scheduled maintenance:" subtitle="Maintenance will last 2-4 hours." />
|
||||||
<InlineNotification kind="warning-alt" title="Scheduled maintenance:" subtitle="Maintenance will last 2-4 hours." />
|
<InlineNotification kind="warning-alt" title="Scheduled maintenance:" subtitle="Maintenance will last 2-4 hours." />
|
||||||
|
|
||||||
## Low contrast
|
### Low contrast
|
||||||
|
|
||||||
Use low contrast variants for less prominent notifications.
|
|
||||||
|
|
||||||
<InlineNotification lowContrast kind="error" title="Error:" subtitle="An internal server error occurred." />
|
<InlineNotification lowContrast kind="error" title="Error:" subtitle="An internal server error occurred." />
|
||||||
<InlineNotification lowContrast kind="info" title="New updates:" subtitle="Restart to get the latest updates." />
|
<InlineNotification lowContrast kind="info" title="New updates:" subtitle="Restart to get the latest updates." />
|
||||||
|
|
|
||||||
|
|
@ -4,86 +4,46 @@ components: ["Link", "OutboundLink"]
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { Link, OutboundLink } from "carbon-components-svelte";
|
import { Link, OutboundLink } from "carbon-components-svelte";
|
||||||
import Carbon from "carbon-icons-svelte/lib/Carbon.svelte"
|
|
||||||
import Preview from "../../components/Preview.svelte";
|
import Preview from "../../components/Preview.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
The `Link` component provides styled hyperlinks with various customization options. It supports different sizes, states, and can include icons. The `OutboundLink` variant automatically handles external links with proper security attributes.
|
### Default
|
||||||
|
|
||||||
## Default
|
<Link href="https://www.carbondesignsystem.com/">Carbon Design System</Link>
|
||||||
|
|
||||||
Create a basic link with the default styling.
|
### Target _blank
|
||||||
|
|
||||||
<Link href="https://www.carbondesignsystem.com/">
|
If setting `target` to `"_blank"`, the `Link` component will automatically set `rel="noopener noreferrer"` to guard against [potential cross-origin security exploits](https://web.dev/external-anchors-use-rel-noopener/).
|
||||||
Carbon Design System
|
|
||||||
</Link>
|
|
||||||
|
|
||||||
## Target _blank
|
You can override the `rel` attribute with a custom value.
|
||||||
|
|
||||||
For external links, the component automatically adds security attributes. You can override the `rel` attribute if needed.
|
<Link href="https://www.carbondesignsystem.com/" target="_blank">Carbon Design System</Link>
|
||||||
|
|
||||||
<Link href="https://www.carbondesignsystem.com/" target="_blank">
|
### Outbound link
|
||||||
Carbon Design System
|
|
||||||
</Link>
|
|
||||||
|
|
||||||
## Outbound link
|
An alternative to manually setting `target` to `"_blank"` is to use the `OutboundLink`.
|
||||||
|
|
||||||
Use `OutboundLink` as a convenient alternative for external links.
|
<OutboundLink href="https://www.carbondesignsystem.com/">Carbon Design System</OutboundLink>
|
||||||
|
|
||||||
<OutboundLink href="https://www.carbondesignsystem.com/">
|
### Inline variant
|
||||||
Carbon Design System
|
|
||||||
</OutboundLink>
|
|
||||||
|
|
||||||
## Inline variant
|
|
||||||
|
|
||||||
Create links that flow naturally with surrounding text.
|
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
Visit the
|
Visit the
|
||||||
<Link inline href="https://www.carbondesignsystem.com/">
|
<Link inline href="https://www.carbondesignsystem.com/">Carbon Design System</Link>.
|
||||||
Carbon Design System
|
|
||||||
</Link>.
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
## Link with icon
|
### Large size
|
||||||
|
|
||||||
Add icons to links for better visual context. Note that `inline` must be `false` when using icons.
|
<Link size="lg" href="https://www.carbondesignsystem.com/">Carbon Design System</Link>
|
||||||
|
|
||||||
<div>
|
### Small size
|
||||||
Visit the
|
|
||||||
<Link href="https://www.carbondesignsystem.com/" icon={Carbon}>
|
|
||||||
Carbon Design System
|
|
||||||
</Link>.
|
|
||||||
</div>
|
|
||||||
|
|
||||||
## Size variants
|
<Link size="sm" href="https://www.carbondesignsystem.com/">Carbon Design System</Link>
|
||||||
|
|
||||||
The component supports different sizes to match your design needs:
|
### Disabled
|
||||||
|
|
||||||
<Link size="lg" href="https://www.carbondesignsystem.com/">
|
<Link disabled href="https://www.carbondesignsystem.com/">Carbon Design System</Link>
|
||||||
Large link
|
|
||||||
</Link>
|
|
||||||
<br />
|
|
||||||
<Link href="https://www.carbondesignsystem.com/">
|
|
||||||
Default link
|
|
||||||
</Link>
|
|
||||||
<br />
|
|
||||||
<Link size="sm" href="https://www.carbondesignsystem.com/">
|
|
||||||
Small link
|
|
||||||
</Link>
|
|
||||||
|
|
||||||
## Disabled state
|
### Visited styles
|
||||||
|
|
||||||
Disabled links render as plain text while maintaining accessibility.
|
<Link visited href="https://www.carbondesignsystem.com/">Carbon Design System</Link>
|
||||||
|
|
||||||
<Link disabled href="https://www.carbondesignsystem.com/">
|
|
||||||
Disabled link
|
|
||||||
</Link>
|
|
||||||
|
|
||||||
## Visited styles
|
|
||||||
|
|
||||||
Show visited state styling for links.
|
|
||||||
|
|
||||||
<Link visited href="https://www.carbondesignsystem.com/">
|
|
||||||
Visited link
|
|
||||||
</Link>
|
|
||||||
|
|
@ -1,28 +1,16 @@
|
||||||
---
|
|
||||||
components: ["Loading"]
|
|
||||||
---
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { Loading } from "carbon-components-svelte";
|
import { Loading } from "carbon-components-svelte";
|
||||||
import Preview from "../../components/Preview.svelte";
|
import Preview from "../../components/Preview.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
The `Loading` component provides a full-screen or inline loading indicator. It's ideal for showing progress during page loads or data fetching operations.
|
### Default (with overlay)
|
||||||
|
|
||||||
## Default
|
|
||||||
|
|
||||||
Display a loading indicator with a semi-transparent overlay that covers the entire viewport.
|
|
||||||
|
|
||||||
<FileSource src="/framed/Loading/Loading" />
|
<FileSource src="/framed/Loading/Loading" />
|
||||||
|
|
||||||
## No overlay
|
### No overlay
|
||||||
|
|
||||||
Show a loading indicator without the overlay, allowing interaction with the underlying content.
|
|
||||||
|
|
||||||
<Loading withOverlay={false} />
|
<Loading withOverlay={false} />
|
||||||
|
|
||||||
## Small size
|
### Small size
|
||||||
|
|
||||||
Display a more compact loading indicator.
|
|
||||||
|
|
||||||
<Loading withOverlay={false} small />
|
<Loading withOverlay={false} small />
|
||||||
|
|
@ -1,26 +1,9 @@
|
||||||
---
|
|
||||||
components: ["LocalStorage"]
|
|
||||||
---
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Preview from "../../components/Preview.svelte";
|
import Preview from "../../components/Preview.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
The `LocalStorage` component provides a reactive wrapper around the [Window.localStorage API](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage). It's useful for persisting user preferences and application state across page reloads.
|
This utility component wraps the [Window.localStorage API](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) and is useful for persisting ephemeral data (e.g., color theme) at the browser level.
|
||||||
|
|
||||||
## Reactive example
|
### Reactive example
|
||||||
|
|
||||||
See how the component maintains state across page reloads. Toggle the switch and refresh the page to see the persisted state.
|
|
||||||
|
|
||||||
<FileSource src="/framed/LocalStorage/LocalStorage" />
|
<FileSource src="/framed/LocalStorage/LocalStorage" />
|
||||||
|
|
||||||
## Clear item, clear all
|
|
||||||
|
|
||||||
The component provides methods to manage stored data:
|
|
||||||
|
|
||||||
- `clearItem`: Remove a specific key-value pair
|
|
||||||
- `clearAll`: Remove all stored data
|
|
||||||
|
|
||||||
Use `bind:this` to access these methods. In this example, try toggling the switch, refreshing the page, then clearing the storage.
|
|
||||||
|
|
||||||
<FileSource src="/framed/LocalStorage/LocalStorageClear" />
|
|
||||||
|
|
@ -2,78 +2,33 @@
|
||||||
import Preview from "../../components/Preview.svelte";
|
import Preview from "../../components/Preview.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
The `Modal` component provides a focused dialog for user interactions, confirmations, or data entry. It supports various sizes, states, and customization options to create accessible and user-friendly modal experiences.
|
### Default (transactional)
|
||||||
|
|
||||||
## Default
|
|
||||||
|
|
||||||
Display a modal dialog with a header, content area, and footer by default.
|
|
||||||
|
|
||||||
Create a basic modal dialog with primary and secondary actions. This variant is ideal for confirming user actions or gathering input.
|
|
||||||
|
|
||||||
<FileSource src="/framed/Modal/Modal" />
|
<FileSource src="/framed/Modal/Modal" />
|
||||||
|
|
||||||
## Custom focus
|
### Danger modal
|
||||||
|
|
||||||
Control which element receives focus when the modal opens. Use `selectorPrimaryFocus` to specify the target element using CSS selectors.
|
|
||||||
|
|
||||||
<FileSource src="/framed/Modal/ModalCustomFocus" />
|
|
||||||
|
|
||||||
## Danger modal
|
|
||||||
|
|
||||||
Display critical actions or destructive operations with the danger variant. This style emphasizes the severity of the action.
|
|
||||||
|
|
||||||
<FileSource src="/framed/Modal/DangerModal" />
|
<FileSource src="/framed/Modal/DangerModal" />
|
||||||
|
|
||||||
## Passive modal
|
### Passive modal
|
||||||
|
|
||||||
Create a non-interactive modal for displaying information. This variant lacks action buttons and focuses on content presentation.
|
|
||||||
|
|
||||||
<FileSource src="/framed/Modal/PassiveModal" />
|
<FileSource src="/framed/Modal/PassiveModal" />
|
||||||
|
|
||||||
## Has scrolling content
|
### Extra-small size
|
||||||
|
|
||||||
Enable vertical scrolling for modals with lengthy content. This ensures all content remains accessible while maintaining a reasonable modal height.
|
|
||||||
|
|
||||||
<FileSource src="/framed/Modal/ModalScrollingContent" />
|
|
||||||
|
|
||||||
## Multiple modals
|
|
||||||
|
|
||||||
Stack multiple modals for complex workflows. Each modal maintains its own state and focus management.
|
|
||||||
|
|
||||||
<FileSource src="/framed/Modal/ModalMultiple" />
|
|
||||||
|
|
||||||
## Multiple secondary buttons
|
|
||||||
|
|
||||||
Add up to two secondary actions using the `secondaryButtons` prop. This provides more flexibility than the single `secondaryButtonText` option.
|
|
||||||
|
|
||||||
<FileSource src="/framed/Modal/3ButtonModal" />
|
|
||||||
|
|
||||||
## Extra-small size
|
|
||||||
|
|
||||||
Use the extra-small size for compact notifications by setting `size` to `"xs"`. This is ideal for simple confirmations.
|
|
||||||
|
|
||||||
<FileSource src="/framed/Modal/ModalExtraSmall" />
|
<FileSource src="/framed/Modal/ModalExtraSmall" />
|
||||||
|
|
||||||
## Small size
|
### Small size
|
||||||
|
|
||||||
Use the small size for simple confirmations by setting `size` to `"sm"`. This provides a more focused dialog.
|
|
||||||
|
|
||||||
<FileSource src="/framed/Modal/ModalSmall" />
|
<FileSource src="/framed/Modal/ModalSmall" />
|
||||||
|
|
||||||
## Large size
|
### Large size
|
||||||
|
|
||||||
Use the large size for complex content by setting `size` to `"lg"`. This provides more space for detailed information.
|
|
||||||
|
|
||||||
<FileSource src="/framed/Modal/ModalLarge" />
|
<FileSource src="/framed/Modal/ModalLarge" />
|
||||||
|
|
||||||
## Prevent close on outside click
|
### Prevent close on outside click
|
||||||
|
|
||||||
Disable closing the modal when clicking outside by setting `preventCloseOnClickOutside` to `true`. This is useful for transactional modals where explicit user action is required.
|
`preventCloseOnClickOutside` prevents the modal from being closed when clicking outside of an open modal. This prop is intended to be used for transactional modals.
|
||||||
|
|
||||||
<FileSource src="/framed/Modal/ModalPreventOutsideClick" />
|
<FileSource src="/framed/Modal/ModalPreventOutsideClick" />
|
||||||
|
|
||||||
## Button with icon
|
|
||||||
|
|
||||||
Enhance modal buttons with icons for better visual context and clarity. This example shows how to add icons to modal actions.
|
|
||||||
|
|
||||||
<FileSource src="/framed/Modal/ModalButtonWithIcon" />
|
|
||||||
|
|
|
||||||
|
|
@ -1,17 +1,11 @@
|
||||||
<script>
|
<script>
|
||||||
import { MultiSelect, InlineNotification } from "carbon-components-svelte";
|
import { MultiSelect } from "carbon-components-svelte";
|
||||||
import Preview from "../../components/Preview.svelte";
|
import Preview from "../../components/Preview.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
The `MultiSelect` component provides a dropdown interface for selecting multiple options using checkboxes. It supports filtering, custom formatting, and various states. Each item must have a unique `id` property for proper functionality.
|
### Default
|
||||||
|
|
||||||
<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
|
By default, items will be ordered alphabetically based on the `item.text` value. To prevent this, see [#no-alphabetical-ordering](#no-alphabetical-ordering).
|
||||||
<div class="body-short-01">Every <code>items</code> object must have a unique "id" property.</div>
|
|
||||||
</InlineNotification>
|
|
||||||
|
|
||||||
## Default
|
|
||||||
|
|
||||||
Create a basic multi-select dropdown with three contact methods. By default, items are ordered alphabetically.
|
|
||||||
|
|
||||||
<MultiSelect titleText="Contact" label="Select contact methods..."
|
<MultiSelect titleText="Contact" label="Select contact methods..."
|
||||||
items="{[{id: "0", text: "Slack"},
|
items="{[{id: "0", text: "Slack"},
|
||||||
|
|
@ -19,9 +13,44 @@ Create a basic multi-select dropdown with three contact methods. By default, ite
|
||||||
{id: "2", text: "Fax"}]}"
|
{id: "2", text: "Fax"}]}"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
## Format item display text
|
### No alphabetical ordering
|
||||||
|
|
||||||
Format the display text of items using the `itemToString` prop. This example appends the item ID in parentheses.
|
To prevent alphabetical item ordering, pass an empty function to the `sortItem` prop.
|
||||||
|
|
||||||
|
<MultiSelect titleText="Contact" label="Select contact methods..."
|
||||||
|
items="{[{id: "0", text: "Slack"},
|
||||||
|
{id: "1", text: "Email"},
|
||||||
|
{id: "2", text: "Fax"}]}"
|
||||||
|
sortItem="{() => {}}"
|
||||||
|
/>
|
||||||
|
|
||||||
|
### Filterable
|
||||||
|
|
||||||
|
`$$restProps` are spread to the underlying input element.
|
||||||
|
|
||||||
|
<MultiSelect spellcheck="false" filterable titleText="Contact" placeholder="Filter contact methods..."
|
||||||
|
items="{[{id: "0", text: "Slack"},
|
||||||
|
{id: "1", text: "Email"},
|
||||||
|
{id: "2", text: "Fax"}]}"
|
||||||
|
/>
|
||||||
|
|
||||||
|
### Initial selected items
|
||||||
|
|
||||||
|
To select (or bind) items, pass an array of item ids to `selectedIds`.
|
||||||
|
|
||||||
|
<MultiSelect selectedIds="{["0", "1"]}" titleText="Contact" label="Select contact methods..."
|
||||||
|
items="{[{id: "0", text: "Slack"},
|
||||||
|
{id: "1", text: "Email"},
|
||||||
|
{id: "2", text: "Fax"}]}"
|
||||||
|
/>
|
||||||
|
|
||||||
|
### Multiple multi-select dropdowns
|
||||||
|
|
||||||
|
<FileSource src="/framed/MultiSelect/MultipleMultiSelect" />
|
||||||
|
|
||||||
|
### Format item display text
|
||||||
|
|
||||||
|
Use the `itemToString` prop to format the display of individual items.
|
||||||
|
|
||||||
<MultiSelect itemToString={item => {
|
<MultiSelect itemToString={item => {
|
||||||
return item.text + ' (' + item.id +')'
|
return item.text + ' (' + item.id +')'
|
||||||
|
|
@ -32,83 +61,9 @@ Format the display text of items using the `itemToString` prop. This example app
|
||||||
sortItem="{() => {}}"
|
sortItem="{() => {}}"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
## Custom slot
|
### Top direction
|
||||||
|
|
||||||
Override the default slot to customize item rendering. This example shows how to access and use the item and index values.
|
Set `direction` to `"top"` for the dropdown menu to appear above the input.
|
||||||
|
|
||||||
<FileSource src="/framed/MultiSelect/MultiSelectSlot" />
|
|
||||||
|
|
||||||
## No alphabetical ordering
|
|
||||||
|
|
||||||
Prevent automatic alphabetical ordering by passing a no-op function to `sortItem`. This maintains the original order of items.
|
|
||||||
|
|
||||||
<MultiSelect titleText="Contact" label="Select contact methods..."
|
|
||||||
items="{[{id: "0", text: "Slack"},
|
|
||||||
{id: "1", text: "Email"},
|
|
||||||
{id: "2", text: "Fax"}]}"
|
|
||||||
sortItem="{() => {}}"
|
|
||||||
/>
|
|
||||||
|
|
||||||
## Filterable
|
|
||||||
|
|
||||||
Enable filtering by setting `filterable` to `true`. This example includes a placeholder text for the filter input.
|
|
||||||
|
|
||||||
<MultiSelect spellcheck="false" filterable titleText="Contact" placeholder="Filter contact methods..."
|
|
||||||
items="{[{id: "0", text: "Slack"},
|
|
||||||
{id: "1", text: "Email"},
|
|
||||||
{id: "2", text: "Fax"}]}"
|
|
||||||
/>
|
|
||||||
|
|
||||||
## Initial selected items
|
|
||||||
|
|
||||||
Pre-select items by passing an array of item IDs to `selectedIds`. This example pre-selects Slack and Email.
|
|
||||||
|
|
||||||
<MultiSelect selectedIds="{["0", "1"]}" titleText="Contact" label="Select contact methods..."
|
|
||||||
items="{[{id: "0", text: "Slack"},
|
|
||||||
{id: "1", text: "Email"},
|
|
||||||
{id: "2", text: "Fax"}]}"
|
|
||||||
/>
|
|
||||||
|
|
||||||
## Multiple multi-select dropdowns
|
|
||||||
|
|
||||||
This example demonstrates how to manage multiple dropdowns in a form with coordinated state.
|
|
||||||
|
|
||||||
<FileSource src="/framed/MultiSelect/MultipleMultiSelect" />
|
|
||||||
|
|
||||||
## Format checkbox values
|
|
||||||
|
|
||||||
Customize checkbox attributes using the `itemToInput` prop. This example sets a consistent name for all checkboxes.
|
|
||||||
|
|
||||||
Use the `itemToInput` prop to customize the user-selectable checkbox values.
|
|
||||||
This will also override the underlying hidden inputs used for form submission.
|
|
||||||
|
|
||||||
```js
|
|
||||||
itemToInput={(item) => {
|
|
||||||
return {
|
|
||||||
name: `Contact_${item.id}`,
|
|
||||||
value: item.id
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
```
|
|
||||||
|
|
||||||
The above function sets the `name` attribute to
|
|
||||||
`Contact_0` (respective to each item's `id`) for every hidden input that
|
|
||||||
renders, along with each respective item's `id` set to the `value` attribute.
|
|
||||||
|
|
||||||
<MultiSelect
|
|
||||||
itemToInput={(item) => ({name: 'contact', value: item.id})}
|
|
||||||
titleText="Contact"
|
|
||||||
label="Select contact methods..."
|
|
||||||
items="{[
|
|
||||||
{id: "0", text: "Slack"},
|
|
||||||
{id: "1", text: "Email"},
|
|
||||||
{id: "2", text: "Fax"}
|
|
||||||
]}"
|
|
||||||
/>
|
|
||||||
|
|
||||||
## Top direction
|
|
||||||
|
|
||||||
Display the dropdown menu above the input by setting `direction` to `"top"`. This is useful when space below is limited.
|
|
||||||
|
|
||||||
<MultiSelect direction="top" titleText="Contact" label="Select contact methods..."
|
<MultiSelect direction="top" titleText="Contact" label="Select contact methods..."
|
||||||
items="{[{id: "0", text: "Slack"},
|
items="{[{id: "0", text: "Slack"},
|
||||||
|
|
@ -116,19 +71,7 @@ Display the dropdown menu above the input by setting `direction` to `"top"`. Thi
|
||||||
{id: "2", text: "Fax"}]}"
|
{id: "2", text: "Fax"}]}"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
## Hidden label
|
### Light variant
|
||||||
|
|
||||||
Hide the label visually while maintaining accessibility by setting `hideLabel` to `true`. The label is still available to screen readers.
|
|
||||||
|
|
||||||
<MultiSelect titleText="Contact" label="Select contact methods..." hideLabel
|
|
||||||
items="{[{id: "0", text: "Slack"},
|
|
||||||
{id: "1", text: "Email"},
|
|
||||||
{id: "2", text: "Fax"}]}"
|
|
||||||
/>
|
|
||||||
|
|
||||||
## Light variant
|
|
||||||
|
|
||||||
Use the light variant for dark backgrounds by setting `light` to `true`. This provides better contrast in dark themes.
|
|
||||||
|
|
||||||
<MultiSelect light titleText="Contact" label="Select contact methods..."
|
<MultiSelect light titleText="Contact" label="Select contact methods..."
|
||||||
items="{[{id: "0", text: "Slack"},
|
items="{[{id: "0", text: "Slack"},
|
||||||
|
|
@ -136,9 +79,7 @@ Use the light variant for dark backgrounds by setting `light` to `true`. This pr
|
||||||
{id: "2", text: "Fax"}]}"
|
{id: "2", text: "Fax"}]}"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
## Inline variant
|
### Inline type
|
||||||
|
|
||||||
Display the dropdown inline with other content by setting `type` to `"inline"`. This removes the background and border.
|
|
||||||
|
|
||||||
<MultiSelect type="inline" titleText="Contact" label="Select contact methods..."
|
<MultiSelect type="inline" titleText="Contact" label="Select contact methods..."
|
||||||
items="{[{id: "0", text: "Slack"},
|
items="{[{id: "0", text: "Slack"},
|
||||||
|
|
@ -146,9 +87,7 @@ Display the dropdown inline with other content by setting `type` to `"inline"`.
|
||||||
{id: "2", text: "Fax"}]}"
|
{id: "2", text: "Fax"}]}"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
## Extra-large size
|
### Extra-large size
|
||||||
|
|
||||||
Use the extra-large size for prominent selections by setting `size` to `"xl"`. This provides more visual emphasis.
|
|
||||||
|
|
||||||
<MultiSelect size="xl" titleText="Contact" label="Select contact methods..."
|
<MultiSelect size="xl" titleText="Contact" label="Select contact methods..."
|
||||||
items="{[{id: "0", text: "Slack"},
|
items="{[{id: "0", text: "Slack"},
|
||||||
|
|
@ -156,9 +95,7 @@ Use the extra-large size for prominent selections by setting `size` to `"xl"`. T
|
||||||
{id: "2", text: "Fax"}]}"
|
{id: "2", text: "Fax"}]}"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
## Small size
|
### Small size
|
||||||
|
|
||||||
Use the small size for compact layouts by setting `size` to `"sm"`. This is ideal for secondary selections.
|
|
||||||
|
|
||||||
<MultiSelect size="sm" titleText="Contact" label="Select contact methods..."
|
<MultiSelect size="sm" titleText="Contact" label="Select contact methods..."
|
||||||
items="{[{id: "0", text: "Slack"},
|
items="{[{id: "0", text: "Slack"},
|
||||||
|
|
@ -166,9 +103,9 @@ Use the small size for compact layouts by setting `size` to `"sm"`. This is idea
|
||||||
{id: "2", text: "Fax"}]}"
|
{id: "2", text: "Fax"}]}"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
## Invalid state
|
|
||||||
|
|
||||||
Indicate an invalid selection by setting `invalid` to `true`. This example shows a required field error.
|
|
||||||
|
### Invalid state
|
||||||
|
|
||||||
<MultiSelect invalid invalidText="A contact method is required" titleText="Contact" label="Select contact methods..."
|
<MultiSelect invalid invalidText="A contact method is required" titleText="Contact" label="Select contact methods..."
|
||||||
items="{[{id: "0", text: "Slack"},
|
items="{[{id: "0", text: "Slack"},
|
||||||
|
|
@ -176,9 +113,7 @@ Indicate an invalid selection by setting `invalid` to `true`. This example shows
|
||||||
{id: "2", text: "Fax"}]}"
|
{id: "2", text: "Fax"}]}"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
## Warning state
|
### Warning state
|
||||||
|
|
||||||
Indicate a warning state by setting `warn` to `true`. This example shows a warning about unassociated accounts.
|
|
||||||
|
|
||||||
<MultiSelect warn warnText="One or more contact methods are not associated with your account" titleText="Contact" label="Select contact methods..."
|
<MultiSelect warn warnText="One or more contact methods are not associated with your account" titleText="Contact" label="Select contact methods..."
|
||||||
items="{[{id: "0", text: "Slack"},
|
items="{[{id: "0", text: "Slack"},
|
||||||
|
|
@ -186,26 +121,10 @@ Indicate a warning state by setting `warn` to `true`. This example shows a warni
|
||||||
{id: "2", text: "Fax"}]}"
|
{id: "2", text: "Fax"}]}"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
## Disabled state
|
### Disabled state
|
||||||
|
|
||||||
Disable the entire dropdown by setting `disabled` to `true`. This prevents all user interaction.
|
|
||||||
|
|
||||||
<MultiSelect disabled titleText="Contact" label="Select contact methods..."
|
<MultiSelect disabled titleText="Contact" label="Select contact methods..."
|
||||||
items="{[{id: "0", text: "Slack"},
|
items="{[{id: "0", text: "Slack"},
|
||||||
{id: "1", text: "Email"},
|
{id: "1", text: "Email"},
|
||||||
{id: "2", text: "Fax"}]}"
|
{id: "2", text: "Fax"}]}"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
## Disabled items
|
|
||||||
|
|
||||||
Disable specific items using the `disabled` property in the `items` prop. This example disables the Email option.
|
|
||||||
|
|
||||||
<MultiSelect
|
|
||||||
titleText="Contact"
|
|
||||||
label="Select contact methods..."
|
|
||||||
items={[
|
|
||||||
{ id: "0", text: "Slack" },
|
|
||||||
{ id: "1", text: "Email", disabled: true },
|
|
||||||
{ id: "2", text: "Fax" },
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
|
|
|
||||||
|
|
@ -7,100 +7,50 @@ components: ["NumberInput", "NumberInputSkeleton"]
|
||||||
import Preview from "../../components/Preview.svelte";
|
import Preview from "../../components/Preview.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
The `NumberInput` component provides a controlled input for numerical values. It supports validation, step values, and various states to ensure accurate data entry.
|
### Default
|
||||||
|
|
||||||
## Default
|
<NumberInput label="Clusters" />
|
||||||
|
|
||||||
Create a basic number input with increment and decrement controls. The input accepts numerical values and provides visual feedback.
|
### With helper text
|
||||||
|
|
||||||
<NumberInput label="Clusters" value={0} />
|
<NumberInput label="Clusters" helperText="Clusters provisioned in your region" />
|
||||||
|
|
||||||
## No value
|
### Minimum and maximum values
|
||||||
|
|
||||||
Allow empty values by setting both `allowEmpty` to `true` and `value` to `null`. The `allowEmpty` prop enables the empty state, while `value={null}` represents no value.
|
|
||||||
|
|
||||||
<FileSource src="/framed/NumberInput/NumberInputEmpty" />
|
|
||||||
|
|
||||||
## Helper text
|
|
||||||
|
|
||||||
Add descriptive text below the input using the `helperText` prop. This helps users understand the expected input.
|
|
||||||
|
|
||||||
<NumberInput label="Clusters" value={0} helperText="Clusters provisioned in your region" />
|
|
||||||
|
|
||||||
## Minimum and maximum values
|
|
||||||
|
|
||||||
Constrain input values using `min` and `max` props. This example limits values between 4 and 20.
|
|
||||||
|
|
||||||
<NumberInput min="{4}" max="{20}" value="{4}" invalidText="Number must be between 4 and 20." helperText="Clusters provisioned in your region" label="Clusters (4 min, 20 max)" />
|
<NumberInput min="{4}" max="{20}" value="{4}" invalidText="Number must be between 4 and 20." helperText="Clusters provisioned in your region" label="Clusters (4 min, 20 max)" />
|
||||||
|
|
||||||
## Step value
|
### Hidden label
|
||||||
|
|
||||||
Control the increment/decrement step size using the `step` prop. This example uses a step of 0.1.
|
<NumberInput hideLabel label="Clusters" />
|
||||||
|
|
||||||
<NumberInput value="{1}" helperText="Step of 0.1" step={0.1} label="Clusters" />
|
### Light variant
|
||||||
|
|
||||||
## Hidden label
|
<NumberInput light label="Clusters" />
|
||||||
|
|
||||||
Hide the label visually while maintaining accessibility by setting `hideLabel` to `true`. The label is still available to screen readers.
|
### Extra-large size
|
||||||
|
|
||||||
<NumberInput hideLabel label="Clusters" value={0} />
|
<NumberInput size="xl" label="Clusters" />
|
||||||
|
|
||||||
## Extra-large size
|
### Small size
|
||||||
|
|
||||||
Use the extra-large size for prominent inputs by setting `size` to `"xl"`. This provides more visual emphasis.
|
<NumberInput size="sm" label="Clusters" />
|
||||||
|
|
||||||
<NumberInput size="xl" label="Clusters" value={0} />
|
### Invalid state
|
||||||
|
|
||||||
## Small size
|
<NumberInput invalid invalidText="Invalid value" label="Clusters" />
|
||||||
|
|
||||||
Use the small size for compact layouts by setting `size` to `"sm"`. This is ideal for secondary inputs.
|
### Warning state
|
||||||
|
|
||||||
<NumberInput size="sm" label="Clusters" value={0} />
|
<NumberInput warn warnText="A high number may impact initial rollout" label="Clusters" value="25" />
|
||||||
|
|
||||||
## Light variant
|
### Disabled state
|
||||||
|
|
||||||
Use the light variant for dark backgrounds by setting `light` to `true`. This provides better contrast in dark themes.
|
<NumberInput disabled label="Clusters" />
|
||||||
|
|
||||||
<NumberInput light label="Clusters" value={0} />
|
### Skeleton
|
||||||
|
|
||||||
## Invalid state
|
|
||||||
|
|
||||||
Indicate an invalid value by setting `invalid` to `true`. This example shows a validation error.
|
|
||||||
|
|
||||||
<NumberInput invalid invalidText="Invalid value" label="Clusters" value={0} />
|
|
||||||
|
|
||||||
## Warning state
|
|
||||||
|
|
||||||
Indicate a warning state by setting `warn` to `true`. This example shows a warning about the input value.
|
|
||||||
|
|
||||||
<NumberInput warn warnText="A high number may impact initial rollout" label="Clusters" value={25} />
|
|
||||||
|
|
||||||
## Disabled state
|
|
||||||
|
|
||||||
Disable the input by setting `disabled` to `true`. This prevents all user interaction.
|
|
||||||
|
|
||||||
<NumberInput disabled label="Clusters" value={0} />
|
|
||||||
|
|
||||||
## Read-only state
|
|
||||||
|
|
||||||
Make the input read-only by setting `readonly` to `true`. This allows viewing but prevents editing.
|
|
||||||
|
|
||||||
<NumberInput readonly label="Clusters" value={0} />
|
|
||||||
|
|
||||||
## Hidden steppers
|
|
||||||
|
|
||||||
Hide the increment/decrement controls by setting `hideSteppers` to `true`. This provides a simpler input interface.
|
|
||||||
|
|
||||||
<NumberInput hideSteppers label="Clusters" value={0} />
|
|
||||||
|
|
||||||
## Skeleton
|
|
||||||
|
|
||||||
Show a loading state using the `NumberInputSkeleton` component. This is useful while data is being fetched.
|
|
||||||
|
|
||||||
<NumberInputSkeleton />
|
<NumberInputSkeleton />
|
||||||
|
|
||||||
## Skeleton without label
|
### Skeleton without label
|
||||||
|
|
||||||
Show a loading state without a label by setting `hideLabel` to `true`. This maintains layout consistency.
|
|
||||||
|
|
||||||
<NumberInputSkeleton hideLabel />
|
<NumberInputSkeleton hideLabel />
|
||||||
|
|
@ -3,21 +3,11 @@ components: ["OrderedList", "ListItem"]
|
||||||
---
|
---
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { InlineNotification, OrderedList, ListItem, Link } from "carbon-components-svelte";
|
import { OrderedList, ListItem, Link } from "carbon-components-svelte";
|
||||||
import Preview from "../../components/Preview.svelte";
|
import Preview from "../../components/Preview.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
`OrderedList` provides a structured way to display numbered lists of items. It supports nested lists, native browser styles, and expressive typography for enhanced visual hierarchy.
|
### Default
|
||||||
|
|
||||||
<InlineNotification svx-ignore lowContrast title="Tip:" kind="info" hideCloseButton>
|
|
||||||
<div class="body-short-01">
|
|
||||||
Consider using the <Link href="/components/RecursiveList#ordered">RecursiveList</Link> component for rendering tree structured data.
|
|
||||||
</div>
|
|
||||||
</InlineNotification>
|
|
||||||
|
|
||||||
## Default
|
|
||||||
|
|
||||||
Create a basic ordered list by wrapping `ListItem` components within `OrderedList`.
|
|
||||||
|
|
||||||
<OrderedList>
|
<OrderedList>
|
||||||
<ListItem>Ordered list item</ListItem>
|
<ListItem>Ordered list item</ListItem>
|
||||||
|
|
@ -25,9 +15,7 @@ Create a basic ordered list by wrapping `ListItem` components within `OrderedLis
|
||||||
<ListItem>Ordered list item</ListItem>
|
<ListItem>Ordered list item</ListItem>
|
||||||
</OrderedList>
|
</OrderedList>
|
||||||
|
|
||||||
## With links
|
### With links
|
||||||
|
|
||||||
Add interactive elements like `Link` components within list items.
|
|
||||||
|
|
||||||
<OrderedList>
|
<OrderedList>
|
||||||
<ListItem>
|
<ListItem>
|
||||||
|
|
@ -41,9 +29,7 @@ Add interactive elements like `Link` components within list items.
|
||||||
</ListItem>
|
</ListItem>
|
||||||
</OrderedList>
|
</OrderedList>
|
||||||
|
|
||||||
## Nested
|
### Nested
|
||||||
|
|
||||||
Set the `nested` prop to `true` to create hierarchical lists with proper indentation and numbering.
|
|
||||||
|
|
||||||
<OrderedList>
|
<OrderedList>
|
||||||
<ListItem>
|
<ListItem>
|
||||||
|
|
@ -63,9 +49,9 @@ Set the `nested` prop to `true` to create hierarchical lists with proper indenta
|
||||||
<ListItem>Ordered list level 1</ListItem>
|
<ListItem>Ordered list level 1</ListItem>
|
||||||
</OrderedList>
|
</OrderedList>
|
||||||
|
|
||||||
## Native list styles
|
### Native list styles
|
||||||
|
|
||||||
Enable native browser list styles by setting the `native` prop to `true`. This is useful for large lists where the list number may overlap with the list item text.
|
Use the `native` attribute to enable default browser list styles. This is useful for large lists (i.e., 1000 or more items) where the list number may overlap with the list item text.
|
||||||
|
|
||||||
<OrderedList native>
|
<OrderedList native>
|
||||||
<ListItem>
|
<ListItem>
|
||||||
|
|
@ -84,13 +70,3 @@ Enable native browser list styles by setting the `native` prop to `true`. This i
|
||||||
<ListItem>Ordered list level 1</ListItem>
|
<ListItem>Ordered list level 1</ListItem>
|
||||||
<ListItem>Ordered list level 1</ListItem>
|
<ListItem>Ordered list level 1</ListItem>
|
||||||
</OrderedList>
|
</OrderedList>
|
||||||
|
|
||||||
## Expressive styles
|
|
||||||
|
|
||||||
Use Carbon's expressive typesetting by setting the `expressive` prop to `true`.
|
|
||||||
|
|
||||||
<OrderedList expressive>
|
|
||||||
<ListItem><Link size="lg" href="#">Ordered list item</Link></ListItem>
|
|
||||||
<ListItem>Ordered list item</ListItem>
|
|
||||||
<ListItem>Ordered list item</ListItem>
|
|
||||||
</OrderedList>
|
|
||||||
|
|
@ -4,15 +4,11 @@ components: ["OverflowMenu", "OverflowMenuItem"]
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { OverflowMenu, OverflowMenuItem } from "carbon-components-svelte";
|
import { OverflowMenu, OverflowMenuItem } from "carbon-components-svelte";
|
||||||
import Add from "carbon-icons-svelte/lib/Add.svelte";
|
import Add16 from "carbon-icons-svelte/lib/Add16";
|
||||||
import Preview from "../../components/Preview.svelte";
|
import Preview from "../../components/Preview.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
`OverflowMenu` provides a compact way to display a list of actions or options. It renders as a button that opens a dropdown menu when clicked, making it ideal for secondary actions or overflow content.
|
### Default
|
||||||
|
|
||||||
## Default
|
|
||||||
|
|
||||||
Create a basic overflow menu by wrapping `OverflowMenuItem` components within `OverflowMenu`.
|
|
||||||
|
|
||||||
<OverflowMenu>
|
<OverflowMenu>
|
||||||
<OverflowMenuItem text="Manage credentials" />
|
<OverflowMenuItem text="Manage credentials" />
|
||||||
|
|
@ -20,19 +16,15 @@ Create a basic overflow menu by wrapping `OverflowMenuItem` components within `O
|
||||||
<OverflowMenuItem danger text="Delete service" />
|
<OverflowMenuItem danger text="Delete service" />
|
||||||
</OverflowMenu>
|
</OverflowMenu>
|
||||||
|
|
||||||
## Flipped
|
### Flipped
|
||||||
|
|
||||||
Set `flipped` to `true` to position the menu to the left of the button.
|
<OverflowMenu open flipped>
|
||||||
|
|
||||||
<OverflowMenu flipped>
|
|
||||||
<OverflowMenuItem text="Manage credentials" />
|
<OverflowMenuItem text="Manage credentials" />
|
||||||
<OverflowMenuItem href="https://cloud.ibm.com/docs/api-gateway/" text="API documentation" />
|
<OverflowMenuItem href="https://cloud.ibm.com/docs/api-gateway/" text="API documentation" />
|
||||||
<OverflowMenuItem danger text="Delete service" />
|
<OverflowMenuItem danger text="Delete service" />
|
||||||
</OverflowMenu>
|
</OverflowMenu>
|
||||||
|
|
||||||
## Menu direction
|
### Menu direction top
|
||||||
|
|
||||||
Set `direction` to `"top"` to position the menu above the button.
|
|
||||||
|
|
||||||
<OverflowMenu flipped direction="top">
|
<OverflowMenu flipped direction="top">
|
||||||
<OverflowMenuItem text="Manage credentials" />
|
<OverflowMenuItem text="Manage credentials" />
|
||||||
|
|
@ -40,9 +32,7 @@ Set `direction` to `"top"` to position the menu above the button.
|
||||||
<OverflowMenuItem danger text="Delete service" />
|
<OverflowMenuItem danger text="Delete service" />
|
||||||
</OverflowMenu>
|
</OverflowMenu>
|
||||||
|
|
||||||
## Light variant
|
### Light variant
|
||||||
|
|
||||||
Enable the light variant by setting `light` to `true`.
|
|
||||||
|
|
||||||
<OverflowMenu light>
|
<OverflowMenu light>
|
||||||
<OverflowMenuItem text="Manage credentials" />
|
<OverflowMenuItem text="Manage credentials" />
|
||||||
|
|
@ -50,9 +40,7 @@ Enable the light variant by setting `light` to `true`.
|
||||||
<OverflowMenuItem danger text="Delete service" />
|
<OverflowMenuItem danger text="Delete service" />
|
||||||
</OverflowMenu>
|
</OverflowMenu>
|
||||||
|
|
||||||
## Extra-large size
|
### Extra-large size
|
||||||
|
|
||||||
Set `size` to `"xl"` for an extra-large overflow menu.
|
|
||||||
|
|
||||||
<OverflowMenu size="xl">
|
<OverflowMenu size="xl">
|
||||||
<OverflowMenuItem text="Manage credentials" />
|
<OverflowMenuItem text="Manage credentials" />
|
||||||
|
|
@ -60,9 +48,7 @@ Set `size` to `"xl"` for an extra-large overflow menu.
|
||||||
<OverflowMenuItem danger text="Delete service" />
|
<OverflowMenuItem danger text="Delete service" />
|
||||||
</OverflowMenu>
|
</OverflowMenu>
|
||||||
|
|
||||||
## Small size
|
### Small size
|
||||||
|
|
||||||
Set `size` to `"sm"` for a small overflow menu.
|
|
||||||
|
|
||||||
<OverflowMenu size="sm">
|
<OverflowMenu size="sm">
|
||||||
<OverflowMenuItem text="Manage credentials" />
|
<OverflowMenuItem text="Manage credentials" />
|
||||||
|
|
@ -70,9 +56,9 @@ Set `size` to `"sm"` for a small overflow menu.
|
||||||
<OverflowMenuItem danger text="Delete service" />
|
<OverflowMenuItem danger text="Delete service" />
|
||||||
</OverflowMenu>
|
</OverflowMenu>
|
||||||
|
|
||||||
## Custom primary focus
|
### Custom primary focus
|
||||||
|
|
||||||
Set `primaryFocus` to `true` on a menu item to focus it when opening the dropdown.
|
By default, the first overflow menu item is focused when opening the dropdown.
|
||||||
|
|
||||||
<OverflowMenu>
|
<OverflowMenu>
|
||||||
<OverflowMenuItem text="Manage credentials" />
|
<OverflowMenuItem text="Manage credentials" />
|
||||||
|
|
@ -80,19 +66,15 @@ Set `primaryFocus` to `true` on a menu item to focus it when opening the dropdow
|
||||||
<OverflowMenuItem primaryFocus danger text="Delete service" />
|
<OverflowMenuItem primaryFocus danger text="Delete service" />
|
||||||
</OverflowMenu>
|
</OverflowMenu>
|
||||||
|
|
||||||
## Custom trigger icon
|
### Custom trigger icon
|
||||||
|
|
||||||
Replace the default vertical overflow menu icon with a custom icon.
|
<OverflowMenu icon={Add16}>
|
||||||
|
|
||||||
<OverflowMenu icon={Add}>
|
|
||||||
<OverflowMenuItem text="Manage credentials" />
|
<OverflowMenuItem text="Manage credentials" />
|
||||||
<OverflowMenuItem href="https://cloud.ibm.com/docs/api-gateway/" text="API documentation" />
|
<OverflowMenuItem href="https://cloud.ibm.com/docs/api-gateway/" text="API documentation" />
|
||||||
<OverflowMenuItem danger text="Delete service" />
|
<OverflowMenuItem danger text="Delete service" />
|
||||||
</OverflowMenu>
|
</OverflowMenu>
|
||||||
|
|
||||||
## Custom trigger slot
|
### Custom trigger slot
|
||||||
|
|
||||||
Use the `menu` slot to customize the trigger button content.
|
|
||||||
|
|
||||||
<OverflowMenu style="width: auto;">
|
<OverflowMenu style="width: auto;">
|
||||||
<div slot="menu" style="padding: 1rem; color: red;">Custom trigger</div>
|
<div slot="menu" style="padding: 1rem; color: red;">Custom trigger</div>
|
||||||
|
|
@ -100,20 +82,3 @@ Use the `menu` slot to customize the trigger button content.
|
||||||
<OverflowMenuItem href="https://cloud.ibm.com/docs/api-gateway/" text="API documentation" />
|
<OverflowMenuItem href="https://cloud.ibm.com/docs/api-gateway/" text="API documentation" />
|
||||||
<OverflowMenuItem danger text="Delete service" />
|
<OverflowMenuItem danger text="Delete service" />
|
||||||
</OverflowMenu>
|
</OverflowMenu>
|
||||||
|
|
||||||
## Disabled items
|
|
||||||
|
|
||||||
Set `disabled` to `true` to disable menu items. Use `hasDivider` to add visual separation between items.
|
|
||||||
|
|
||||||
<OverflowMenu>
|
|
||||||
<OverflowMenuItem text="Create key" />
|
|
||||||
<OverflowMenuItem text="Import key" />
|
|
||||||
<OverflowMenuItem text="Revoke key" disabled />
|
|
||||||
<OverflowMenuItem text="Duplicate key" disabled />
|
|
||||||
<OverflowMenuItem
|
|
||||||
hasDivider
|
|
||||||
href="https://cloud.ibm.com/docs/api-gateway/"
|
|
||||||
text="API documentation"
|
|
||||||
/>
|
|
||||||
<OverflowMenuItem hasDivider danger text="Delete service" />
|
|
||||||
</OverflowMenu>
|
|
||||||
|
|
@ -7,52 +7,26 @@ components: ["Pagination", "PaginationSkeleton"]
|
||||||
import Preview from "../../components/Preview.svelte";
|
import Preview from "../../components/Preview.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
`Pagination` provides navigation controls for large data sets. It displays the current page, total items, and allows users to change page size and navigate between pages.
|
### Default
|
||||||
|
|
||||||
## Default
|
<Pagination totalItems={102} pageSizes="{[10, 15, 20]}" />
|
||||||
|
|
||||||
Create a basic pagination component with default page size options.
|
### Current page
|
||||||
|
|
||||||
<Pagination totalItems={102} pageSizes={[10, 15, 20]} />
|
|
||||||
|
|
||||||
## Current page
|
|
||||||
|
|
||||||
Set the current page using the `page` prop.
|
|
||||||
|
|
||||||
<Pagination totalItems={102} page={4} />
|
<Pagination totalItems={102} page={4} />
|
||||||
|
|
||||||
## Custom page sizes
|
### Custom page sizes
|
||||||
|
|
||||||
Specify custom page sizes and set a default page size.
|
<Pagination totalItems={102} pageSizes="{[16, 36, 99]}" pageSize="{36}" />
|
||||||
|
|
||||||
<Pagination totalItems={102} pageSizes={[16, 36, 99]} pageSize={36} />
|
### Hidden page input
|
||||||
|
|
||||||
## Unknown pages
|
|
||||||
|
|
||||||
Set `pagesUnknown` to `true` when the total number of pages is unknown. This renders the item range text without factoring in the total number of pages.
|
|
||||||
|
|
||||||
<Pagination pagesUnknown />
|
|
||||||
|
|
||||||
## Page window
|
|
||||||
|
|
||||||
The number of native select items rendered is derived from `totalItems`. For large datasets, this can impact performance. Use `pageWindow` to control the number of rendered items.
|
|
||||||
|
|
||||||
<Pagination totalItems={100_000} pageSizes={[10, 15, 20]} />
|
|
||||||
|
|
||||||
## Hidden page input
|
|
||||||
|
|
||||||
Disable the page input by setting `pageInputDisabled` to `true`.
|
|
||||||
|
|
||||||
<Pagination totalItems={102} pageInputDisabled />
|
<Pagination totalItems={102} pageInputDisabled />
|
||||||
|
|
||||||
## Hidden page size
|
### Hidden page size
|
||||||
|
|
||||||
Disable the page size selector by setting `pageSizeInputDisabled` to `true`.
|
|
||||||
|
|
||||||
<Pagination totalItems={102} pageSizeInputDisabled />
|
<Pagination totalItems={102} pageSizeInputDisabled />
|
||||||
|
|
||||||
## Skeleton
|
### Skeleton
|
||||||
|
|
||||||
Use `PaginationSkeleton` to show a loading state.
|
|
||||||
|
|
||||||
<PaginationSkeleton />
|
<PaginationSkeleton />
|
||||||
|
|
|
||||||
|
|
@ -3,49 +3,10 @@
|
||||||
import Preview from "../../components/Preview.svelte";
|
import Preview from "../../components/Preview.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
`PaginationNav` provides a compact navigation interface for paginated content. It displays page numbers and navigation buttons, with support for overflow menus when there are many pages.
|
### Default
|
||||||
|
|
||||||
## Default
|
|
||||||
|
|
||||||
Create a basic pagination navigation with default settings.
|
|
||||||
|
|
||||||
<PaginationNav />
|
<PaginationNav />
|
||||||
|
|
||||||
## Reactive example
|
### Loopable
|
||||||
|
|
||||||
Use the `page` prop to bind to the current page number.
|
|
||||||
|
|
||||||
<FileSource src="/framed/PaginationNav/PaginationNavReactive" />
|
|
||||||
|
|
||||||
## Total pages
|
|
||||||
|
|
||||||
Specify the total number of pages using the `total` prop.
|
|
||||||
|
|
||||||
<PaginationNav total={3} />
|
|
||||||
|
|
||||||
## Loop navigation
|
|
||||||
|
|
||||||
Set `loop` to `true` to enable circular navigation between pages.
|
|
||||||
|
|
||||||
<PaginationNav total={3} loop />
|
<PaginationNav total={3} loop />
|
||||||
|
|
||||||
## Visible pages
|
|
||||||
|
|
||||||
Control the number of visible page numbers with the `shown` prop.
|
|
||||||
|
|
||||||
<PaginationNav total={100} shown={5} />
|
|
||||||
|
|
||||||
## Custom button text
|
|
||||||
|
|
||||||
Customize the navigation button text using `forwardText` and `backwardText`.
|
|
||||||
|
|
||||||
<PaginationNav
|
|
||||||
forwardText="Next"
|
|
||||||
backwardText="Previous"
|
|
||||||
/>
|
|
||||||
|
|
||||||
## Tooltip position
|
|
||||||
|
|
||||||
Set the tooltip position relative to the navigation buttons using `tooltipPosition`.
|
|
||||||
|
|
||||||
<PaginationNav tooltipPosition="outside" total={3} loop />
|
|
||||||
|
|
@ -3,76 +3,42 @@
|
||||||
import Preview from "../../components/Preview.svelte";
|
import Preview from "../../components/Preview.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
`PasswordInput` provides a secure text input field with a visibility toggle for password entry. It includes features for validation, warnings, and accessibility.
|
### Default
|
||||||
|
|
||||||
## Default
|
|
||||||
|
|
||||||
Create a basic password input with a label and placeholder.
|
|
||||||
|
|
||||||
<PasswordInput labelText="Password" placeholder="Enter password..." />
|
<PasswordInput labelText="Password" placeholder="Enter password..." />
|
||||||
|
|
||||||
## Custom tooltip alignment
|
### Custom tooltip alignment
|
||||||
|
|
||||||
Customize the tooltip alignment and position of the visibility toggle through the `tooltipAlignment` and `tooltipPosition` props.
|
Customize the tooltip alignment and position of the visibility toggle through the `tooltipAlignment` and `tooltipPosition` props.
|
||||||
|
|
||||||
<PasswordInput tooltipAlignment="start" tooltipPosition="left" labelText="Password" placeholder="Enter password..." />
|
<PasswordInput tooltipAlignment="start" tooltipPosition="left" labelText="Password" placeholder="Enter password..." />
|
||||||
|
|
||||||
## Password is visible
|
### Password is visible
|
||||||
|
|
||||||
Set prop `type` to `"text"` to toggle password visibility.
|
Set prop `type` to `"text"` to toggle password visibility.
|
||||||
|
|
||||||
<PasswordInput labelText="Password" type="text" placeholder="Enter password..." value="as_lta0890sdfpo__!9901" />
|
<PasswordInput labelText="Password" type="text" placeholder="Enter password..." value="as_lta0890sdfpo__!9901" />
|
||||||
|
|
||||||
## Hidden label
|
### Hidden label
|
||||||
|
|
||||||
Visually hide the label while maintaining accessibility.
|
|
||||||
|
|
||||||
<PasswordInput hideLabel labelText="Password" placeholder="Enter password..." />
|
<PasswordInput hideLabel labelText="Password" placeholder="Enter password..." />
|
||||||
|
|
||||||
## Light variant
|
### Light variant
|
||||||
|
|
||||||
Enable the light variant for use on dark backgrounds.
|
|
||||||
|
|
||||||
<PasswordInput light labelText="Password" placeholder="Enter password..." />
|
<PasswordInput light labelText="Password" placeholder="Enter password..." />
|
||||||
|
|
||||||
## Inline
|
### Extra-large size
|
||||||
|
|
||||||
Display the input with an inline label layout.
|
|
||||||
|
|
||||||
<PasswordInput inline labelText="Password" placeholder="Enter password..." />
|
|
||||||
|
|
||||||
## Extra-large size
|
|
||||||
|
|
||||||
Use the extra-large size variant for increased visibility.
|
|
||||||
|
|
||||||
<PasswordInput size="xl" labelText="Password" placeholder="Enter password..." />
|
<PasswordInput size="xl" labelText="Password" placeholder="Enter password..." />
|
||||||
|
|
||||||
## Small size
|
### Small size
|
||||||
|
|
||||||
Use the small size variant for compact layouts.
|
|
||||||
|
|
||||||
<PasswordInput size="sm" labelText="Password" placeholder="Enter password..." />
|
<PasswordInput size="sm" labelText="Password" placeholder="Enter password..." />
|
||||||
|
|
||||||
## Invalid state
|
### Invalid state
|
||||||
|
|
||||||
Display an error message when the input is invalid.
|
|
||||||
|
|
||||||
<PasswordInput invalid invalidText="Incorrect user name or password." labelText="Password" placeholder="Enter password..." />
|
<PasswordInput invalid invalidText="Incorrect user name or password." labelText="Password" placeholder="Enter password..." />
|
||||||
|
|
||||||
## Warning state
|
### Disabled state
|
||||||
|
|
||||||
Show a warning message for non-critical issues.
|
|
||||||
|
|
||||||
<PasswordInput warn warnText="Password has been reset." labelText="Password" placeholder="Enter password..." />
|
|
||||||
|
|
||||||
## Disabled state
|
|
||||||
|
|
||||||
Disable the input to prevent user interaction.
|
|
||||||
|
|
||||||
<PasswordInput disabled labelText="Password" placeholder="Enter password..." />
|
<PasswordInput disabled labelText="Password" placeholder="Enter password..." />
|
||||||
|
|
||||||
## With helper text
|
|
||||||
|
|
||||||
Add helper text to provide additional context or instructions.
|
|
||||||
|
|
||||||
<PasswordInput helperText="Your password should be hard to guess" labelText="Password" placeholder="Enter password..." />
|
|
||||||
|
|
|
||||||
|
|
@ -3,11 +3,9 @@
|
||||||
import Preview from "../../components/Preview.svelte";
|
import Preview from "../../components/Preview.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
`Popover` provides a floating container that displays content relative to a trigger element. It supports various alignments, caret indicators, and visual variants.
|
### Default
|
||||||
|
|
||||||
## Default
|
By default, the position of the popover component is absolute.
|
||||||
|
|
||||||
Create a basic popover with absolute positioning.
|
|
||||||
|
|
||||||
<div data-outline>
|
<div data-outline>
|
||||||
Parent
|
Parent
|
||||||
|
|
@ -16,9 +14,9 @@ Create a basic popover with absolute positioning.
|
||||||
</Popover>
|
</Popover>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
## Relative position
|
### Relative position
|
||||||
|
|
||||||
Set `relative` to `true` to position the popover relative to its parent element.
|
Set `relative` to `true` to use a relative position.
|
||||||
|
|
||||||
<div data-outline>
|
<div data-outline>
|
||||||
Parent
|
Parent
|
||||||
|
|
@ -27,9 +25,9 @@ Set `relative` to `true` to position the popover relative to its parent element.
|
||||||
</Popover>
|
</Popover>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
## Close on outside click
|
### Close on outside click
|
||||||
|
|
||||||
Enable automatic closing when clicking outside the popover using `closeOnOutsideClick`.
|
Set `closeOnOutsideClick` to set `open` to `false` when clicking outside of the popover.
|
||||||
|
|
||||||
<div data-outline>
|
<div data-outline>
|
||||||
Parent
|
Parent
|
||||||
|
|
@ -38,82 +36,7 @@ Enable automatic closing when clicking outside the popover using `closeOnOutside
|
||||||
</Popover>
|
</Popover>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
## Popover alignment
|
### With caret
|
||||||
|
|
||||||
Customize the popover alignment using the `align` prop. Valid values include: `"top" | "top-left" | "top-right" | "bottom" | "bottom-left" | "bottom-right" | "left" | "left-bottom" | "left-top" | "right" | "right-bottom" | "right-top"`.
|
|
||||||
|
|
||||||
The default `align` value is `"top"`.
|
|
||||||
|
|
||||||
<div data-outline>
|
|
||||||
Parent
|
|
||||||
<Popover open align="top-left">
|
|
||||||
<div style="padding: var(--cds-spacing-05)">top-left</div>
|
|
||||||
</Popover>
|
|
||||||
</div>
|
|
||||||
<div data-outline>
|
|
||||||
Parent
|
|
||||||
<Popover open align="top-right">
|
|
||||||
<div style="padding: var(--cds-spacing-05)">top-right</div>
|
|
||||||
</Popover>
|
|
||||||
</div>
|
|
||||||
<div data-outline>
|
|
||||||
Parent
|
|
||||||
<Popover open align="bottom">
|
|
||||||
<div style="padding: var(--cds-spacing-05)">bottom</div>
|
|
||||||
</Popover>
|
|
||||||
</div>
|
|
||||||
<div data-outline>
|
|
||||||
Parent
|
|
||||||
<Popover open align="bottom-left">
|
|
||||||
<div style="padding: var(--cds-spacing-05)">bottom-left</div>
|
|
||||||
</Popover>
|
|
||||||
</div>
|
|
||||||
<div data-outline>
|
|
||||||
Parent
|
|
||||||
<Popover open align="bottom-right">
|
|
||||||
<div style="padding: var(--cds-spacing-05)">bottom-right</div>
|
|
||||||
</Popover>
|
|
||||||
</div>
|
|
||||||
<div data-outline>
|
|
||||||
Parent
|
|
||||||
<Popover open align="left">
|
|
||||||
<div style="padding: var(--cds-spacing-05)">left</div>
|
|
||||||
</Popover>
|
|
||||||
</div>
|
|
||||||
<div data-outline>
|
|
||||||
Parent
|
|
||||||
<Popover open align="left-bottom">
|
|
||||||
<div style="padding: var(--cds-spacing-05)">left-bottom</div>
|
|
||||||
</Popover>
|
|
||||||
</div>
|
|
||||||
<div data-outline>
|
|
||||||
Parent
|
|
||||||
<Popover open align="left-right">
|
|
||||||
<div style="padding: var(--cds-spacing-05)">left-right</div>
|
|
||||||
</Popover>
|
|
||||||
</div>
|
|
||||||
<div data-outline>
|
|
||||||
Parent
|
|
||||||
<Popover open align="right">
|
|
||||||
<div style="padding: var(--cds-spacing-05)">right</div>
|
|
||||||
</Popover>
|
|
||||||
</div>
|
|
||||||
<div data-outline>
|
|
||||||
Parent
|
|
||||||
<Popover open align="right-bottom">
|
|
||||||
<div style="padding: var(--cds-spacing-05)">right-bottom</div>
|
|
||||||
</Popover>
|
|
||||||
</div>
|
|
||||||
<div data-outline>
|
|
||||||
Parent
|
|
||||||
<Popover open align="right-top">
|
|
||||||
<div style="padding: var(--cds-spacing-05)">right-top</div>
|
|
||||||
</Popover>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
## With caret
|
|
||||||
|
|
||||||
Add a caret indicator to the popover using the `caret` prop.
|
|
||||||
|
|
||||||
<div data-outline>
|
<div data-outline>
|
||||||
Parent
|
Parent
|
||||||
|
|
@ -122,9 +45,11 @@ Add a caret indicator to the popover using the `caret` prop.
|
||||||
</Popover>
|
</Popover>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
## Custom caret alignment
|
### Custom caret alignment
|
||||||
|
|
||||||
By default, the caret is aligned "top". Possible `align` values include `"top"`, `"top-left"`, `"top-right"`, `"bottom"`, `"bottom-left"`, `"bottom-right"`, `"left"`, `"left-bottom"`, `"left-top"`, `"right"`, `"right-bottom"` or `"right-top"`.
|
By default, the caret is aligned "top".
|
||||||
|
|
||||||
|
Possible `align` values include `"top"`, `"top-left"`, `"top-right"`, `"bottom"`, `"bottom-left"`, `"bottom-right"`, `"left"`, `"left-bottom"`, `"left-top"`, `"right"`, `"right-bottom"` or `"right-top"`.
|
||||||
|
|
||||||
<div data-outline>
|
<div data-outline>
|
||||||
Parent
|
Parent
|
||||||
|
|
@ -133,9 +58,7 @@ By default, the caret is aligned "top". Possible `align` values include `"top"`,
|
||||||
</Popover>
|
</Popover>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
## Light variant
|
### Light variant
|
||||||
|
|
||||||
Enable the light variant for use on dark backgrounds.
|
|
||||||
|
|
||||||
<div data-outline>
|
<div data-outline>
|
||||||
Parent
|
Parent
|
||||||
|
|
@ -144,9 +67,7 @@ Enable the light variant for use on dark backgrounds.
|
||||||
</Popover>
|
</Popover>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
## High contrast variant
|
### High contrast variant
|
||||||
|
|
||||||
Enable the high contrast variant for improved visibility.
|
|
||||||
|
|
||||||
<div data-outline>
|
<div data-outline>
|
||||||
Parent
|
Parent
|
||||||
|
|
@ -154,9 +75,3 @@ Enable the high contrast variant for improved visibility.
|
||||||
<div style="padding: var(--cds-spacing-05)">Content</div>
|
<div style="padding: var(--cds-spacing-05)">Content</div>
|
||||||
</Popover>
|
</Popover>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
## External element
|
|
||||||
|
|
||||||
Use the `open` prop to manage state with an external element, like a button.
|
|
||||||
|
|
||||||
<FileSource src="/framed/Popover/WithButton" />
|
|
||||||
|
|
@ -1,72 +0,0 @@
|
||||||
<script>
|
|
||||||
import { ProgressBar } from "carbon-components-svelte";
|
|
||||||
import Preview from "../../components/Preview.svelte";
|
|
||||||
</script>
|
|
||||||
|
|
||||||
`ProgressBar` provides a visual indicator of progress for operations such as file uploads or data processing. It supports determinate and indeterminate states, various sizes, and status indicators.
|
|
||||||
|
|
||||||
## Default
|
|
||||||
|
|
||||||
Create an indeterminate progress bar that continuously animates.
|
|
||||||
|
|
||||||
<ProgressBar helperText="Loading..." />
|
|
||||||
|
|
||||||
## Small size
|
|
||||||
|
|
||||||
Use the small size variant for compact layouts.
|
|
||||||
|
|
||||||
<ProgressBar size="sm" helperText="Loading..." />
|
|
||||||
|
|
||||||
## Percentage
|
|
||||||
|
|
||||||
Display progress as a percentage using the `value` prop.
|
|
||||||
|
|
||||||
<ProgressBar value={40} labelText="Upload status" helperText="40 MB of 100 MB" />
|
|
||||||
|
|
||||||
## Finished status
|
|
||||||
|
|
||||||
Show completion status with a checkmark icon.
|
|
||||||
|
|
||||||
<ProgressBar value={100} status="finished" labelText="Upload file" helperText="Upload complete" />
|
|
||||||
|
|
||||||
## Error status
|
|
||||||
|
|
||||||
Indicate errors with an error icon and red styling.
|
|
||||||
|
|
||||||
<ProgressBar value={0} status="error" labelText="Upload file" helperText="Invalid file format" />
|
|
||||||
|
|
||||||
## Custom max value
|
|
||||||
|
|
||||||
Set a custom maximum value for the progress bar.
|
|
||||||
|
|
||||||
<ProgressBar value={40} max={200} labelText="Upload status" helperText="40 MB of 200 MB" />
|
|
||||||
|
|
||||||
## Hidden label
|
|
||||||
|
|
||||||
Visually hide the label while maintaining accessibility.
|
|
||||||
|
|
||||||
<ProgressBar hideLabel value={40} labelText="Upload status" helperText="40 MB of 100 MB" />
|
|
||||||
|
|
||||||
## Inline variant
|
|
||||||
|
|
||||||
Use the inline variant to display progress without helper text.
|
|
||||||
|
|
||||||
<ProgressBar kind="inline" value={40} labelText="Upload status" helperText="40 MB of 100 MB" />
|
|
||||||
|
|
||||||
## Indented variant
|
|
||||||
|
|
||||||
Use the indented variant for a more compact layout.
|
|
||||||
|
|
||||||
<ProgressBar kind="indented" value={40} labelText="Upload status" helperText="40 MB of 100 MB" />
|
|
||||||
|
|
||||||
## Indented status variant
|
|
||||||
|
|
||||||
Combine the indented variant with status indicators.
|
|
||||||
|
|
||||||
<ProgressBar kind="indented" status="finished" value={40} labelText="Upload file" helperText="Upload complete" />
|
|
||||||
|
|
||||||
## UX example
|
|
||||||
|
|
||||||
Demonstrate a complete upload flow with start and end states.
|
|
||||||
|
|
||||||
<FileSource src="/framed/ProgressBar/ProgressBarUx" />
|
|
||||||
|
|
@ -7,11 +7,7 @@ components: ["ProgressIndicator", "ProgressStep", "ProgressIndicatorSkeleton"]
|
||||||
import Preview from "../../components/Preview.svelte";
|
import Preview from "../../components/Preview.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
`ProgressIndicator` provides a visual representation of progress through a sequence of steps. It supports horizontal and vertical layouts, step completion states, and interactive navigation.
|
### Default (horizontal)
|
||||||
|
|
||||||
## Default
|
|
||||||
|
|
||||||
Create a horizontal progress indicator with four steps.
|
|
||||||
|
|
||||||
<ProgressIndicator currentIndex={2}>
|
<ProgressIndicator currentIndex={2}>
|
||||||
<ProgressStep complete
|
<ProgressStep complete
|
||||||
|
|
@ -32,9 +28,11 @@ Create a horizontal progress indicator with four steps.
|
||||||
/>
|
/>
|
||||||
</ProgressIndicator>
|
</ProgressIndicator>
|
||||||
|
|
||||||
## Prevent change on click
|
### Prevent change on click
|
||||||
|
|
||||||
Disable automatic step selection when clicking completed steps.
|
By default, clicking any step that is complete will update the current step index.
|
||||||
|
|
||||||
|
Set `preventChangeOnClick` to `true` to prevent this behavior.
|
||||||
|
|
||||||
<ProgressIndicator preventChangeOnClick currentIndex={2}>
|
<ProgressIndicator preventChangeOnClick currentIndex={2}>
|
||||||
<ProgressStep complete
|
<ProgressStep complete
|
||||||
|
|
@ -55,15 +53,13 @@ Disable automatic step selection when clicking completed steps.
|
||||||
/>
|
/>
|
||||||
</ProgressIndicator>
|
</ProgressIndicator>
|
||||||
|
|
||||||
## Programmatic usage
|
### Programmatic usage
|
||||||
|
|
||||||
Update the current step programmatically while maintaining step completion rules.
|
When programmatically updating the `currentIndex`, keep in mind that only completed steps should be selectable.
|
||||||
|
|
||||||
<FileSource src="/framed/ProgressIndicator/ProgrammaticProgressIndicator" />
|
<FileSource src="/framed/ProgressIndicator/ProgrammaticProgressIndicator" />
|
||||||
|
|
||||||
## Invalid step
|
### Invalid step
|
||||||
|
|
||||||
Mark a step as invalid to indicate an error state.
|
|
||||||
|
|
||||||
<ProgressIndicator>
|
<ProgressIndicator>
|
||||||
<ProgressStep complete
|
<ProgressStep complete
|
||||||
|
|
@ -80,9 +76,7 @@ Mark a step as invalid to indicate an error state.
|
||||||
/>
|
/>
|
||||||
</ProgressIndicator>
|
</ProgressIndicator>
|
||||||
|
|
||||||
## Disabled steps
|
### Disabled steps
|
||||||
|
|
||||||
Disable specific steps to prevent user interaction.
|
|
||||||
|
|
||||||
<ProgressIndicator>
|
<ProgressIndicator>
|
||||||
<ProgressStep complete
|
<ProgressStep complete
|
||||||
|
|
@ -99,9 +93,7 @@ Disable specific steps to prevent user interaction.
|
||||||
/>
|
/>
|
||||||
</ProgressIndicator>
|
</ProgressIndicator>
|
||||||
|
|
||||||
## Spaced-equally
|
### Spaced-equally
|
||||||
|
|
||||||
Distribute steps evenly across the available space.
|
|
||||||
|
|
||||||
<ProgressIndicator spaceEqually>
|
<ProgressIndicator spaceEqually>
|
||||||
<ProgressStep
|
<ProgressStep
|
||||||
|
|
@ -118,9 +110,7 @@ Distribute steps evenly across the available space.
|
||||||
/>
|
/>
|
||||||
</ProgressIndicator>
|
</ProgressIndicator>
|
||||||
|
|
||||||
## Vertical
|
### Vertical
|
||||||
|
|
||||||
Display steps in a vertical layout.
|
|
||||||
|
|
||||||
<ProgressIndicator vertical>
|
<ProgressIndicator vertical>
|
||||||
<ProgressStep
|
<ProgressStep
|
||||||
|
|
@ -137,14 +127,12 @@ Display steps in a vertical layout.
|
||||||
/>
|
/>
|
||||||
</ProgressIndicator>
|
</ProgressIndicator>
|
||||||
|
|
||||||
## Skeleton
|
### Skeleton
|
||||||
|
|
||||||
Show a loading state with the specified number of steps.
|
Use the `count` prop to specify the number of progress steps to render.
|
||||||
|
|
||||||
<ProgressIndicatorSkeleton />
|
<ProgressIndicatorSkeleton />
|
||||||
|
|
||||||
## Skeleton (vertical)
|
### Skeleton (vertical)
|
||||||
|
|
||||||
Show a vertical loading state with the specified number of steps.
|
|
||||||
|
|
||||||
<ProgressIndicatorSkeleton vertical />
|
<ProgressIndicatorSkeleton vertical />
|
||||||
|
|
@ -7,37 +7,31 @@ components: ["RadioButtonGroup", "RadioButton", "RadioButtonSkeleton"]
|
||||||
import Preview from "../../components/Preview.svelte";
|
import Preview from "../../components/Preview.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
`RadioButton` provides a selection control that allows users to choose a single option from a set. It supports both individual and grouped usage, with options for horizontal and vertical layouts.
|
### Default
|
||||||
|
|
||||||
## Default
|
<RadioButtonGroup selected="standard">
|
||||||
|
|
||||||
Create a group of radio buttons with a shared name and legend.
|
|
||||||
|
|
||||||
<RadioButtonGroup legendText="Storage tier (disk)" name="plan" selected="standard">
|
|
||||||
<RadioButton labelText="Free (1 GB)" value="free" />
|
<RadioButton labelText="Free (1 GB)" value="free" />
|
||||||
<RadioButton labelText="Standard (10 GB)" value="standard" />
|
<RadioButton labelText="Standard (10 GB)" value="standard" />
|
||||||
<RadioButton labelText="Pro (128 GB)" value="pro" />
|
<RadioButton labelText="Pro (128 GB)" value="pro" />
|
||||||
</RadioButtonGroup>
|
</RadioButtonGroup>
|
||||||
|
|
||||||
## Hidden legend
|
### With legend text
|
||||||
|
|
||||||
Visually hide the legend while maintaining accessibility.
|
<RadioButtonGroup legendText="Storage tier (disk)" selected="standard">
|
||||||
|
|
||||||
<RadioButtonGroup hideLegend legendText="Storage tier (disk)" name="plan-legend" selected="standard">
|
|
||||||
<RadioButton labelText="Free (1 GB)" value="free" />
|
<RadioButton labelText="Free (1 GB)" value="free" />
|
||||||
<RadioButton labelText="Standard (10 GB)" value="standard" />
|
<RadioButton labelText="Standard (10 GB)" value="standard" />
|
||||||
<RadioButton labelText="Pro (128 GB)" value="pro" />
|
<RadioButton labelText="Pro (128 GB)" value="pro" />
|
||||||
</RadioButtonGroup>
|
</RadioButtonGroup>
|
||||||
|
|
||||||
## Legend text slot
|
### Legend text slot
|
||||||
|
|
||||||
Customize the legend text with additional content.
|
Use the named "legendText" slot to customize the legend text.
|
||||||
|
|
||||||
<RadioButtonGroup name="plan-legend-slot" selected="standard">
|
<RadioButtonGroup selected="standard">
|
||||||
<div slot="legendText" style:display="flex">
|
<div slot="legendText" style="display: flex">
|
||||||
Storage tier (disk)
|
Storage tier (disk)
|
||||||
<Tooltip>
|
<Tooltip tooltipBodyId="tooltip-body">
|
||||||
<p>
|
<p id="tooltip-body">
|
||||||
Storage tiers may vary based on geolocation.
|
Storage tiers may vary based on geolocation.
|
||||||
</p>
|
</p>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
|
|
@ -47,45 +41,37 @@ Customize the legend text with additional content.
|
||||||
<RadioButton labelText="Pro (128 GB)" value="pro" />
|
<RadioButton labelText="Pro (128 GB)" value="pro" />
|
||||||
</RadioButtonGroup>
|
</RadioButtonGroup>
|
||||||
|
|
||||||
## Reactive example
|
### Programmatic usage
|
||||||
|
|
||||||
Bind and update the selected value programmatically.
|
Bind the selected value using the `selected` prop.
|
||||||
|
|
||||||
<FileSource src="/framed/RadioButton/RadioButtonReactive" />
|
<FileSource src="/framed/RadioButton/ProgrammaticRadioButton" />
|
||||||
|
|
||||||
## Left-aligned label text
|
### Left-aligned label text
|
||||||
|
|
||||||
Position labels to the left of the radio buttons.
|
<RadioButtonGroup labelPosition="left" legendText="Storage tier (disk)" selected="standard">
|
||||||
|
|
||||||
<RadioButtonGroup labelPosition="left" legendText="Storage tier (disk)" name="plan-left-aligned" selected="standard">
|
|
||||||
<RadioButton labelText="Free (1 GB)" value="free" />
|
<RadioButton labelText="Free (1 GB)" value="free" />
|
||||||
<RadioButton labelText="Standard (10 GB)" value="standard" />
|
<RadioButton labelText="Standard (10 GB)" value="standard" />
|
||||||
<RadioButton labelText="Pro (128 GB)" value="pro" />
|
<RadioButton labelText="Pro (128 GB)" value="pro" />
|
||||||
</RadioButtonGroup>
|
</RadioButtonGroup>
|
||||||
|
|
||||||
## Disabled buttons
|
### Disabled buttons
|
||||||
|
|
||||||
Disable specific radio buttons to prevent selection.
|
<RadioButtonGroup labelPosition="left" legendText="Storage tier (disk)" selected="standard">
|
||||||
|
|
||||||
<RadioButtonGroup labelPosition="left" legendText="Storage tier (disk)" name="plan-disabled" selected="standard">
|
|
||||||
<RadioButton disabled labelText="Free (1 GB)" value="free" />
|
<RadioButton disabled labelText="Free (1 GB)" value="free" />
|
||||||
<RadioButton labelText="Standard (10 GB)" value="standard" />
|
<RadioButton labelText="Standard (10 GB)" value="standard" />
|
||||||
<RadioButton disabled labelText="Pro (128 GB)" value="pro" />
|
<RadioButton disabled labelText="Pro (128 GB)" value="pro" />
|
||||||
</RadioButtonGroup>
|
</RadioButtonGroup>
|
||||||
|
|
||||||
## Vertical orientation
|
### Vertical orientation
|
||||||
|
|
||||||
Display radio buttons in a vertical layout.
|
<RadioButtonGroup orientation="vertical" legendText="Storage tier (disk)" selected="standard">
|
||||||
|
|
||||||
<RadioButtonGroup orientation="vertical" legendText="Storage tier (disk)" name="plan-vertical" selected="standard">
|
|
||||||
<RadioButton labelText="Free (1 GB)" value="free" />
|
<RadioButton labelText="Free (1 GB)" value="free" />
|
||||||
<RadioButton labelText="Standard (10 GB)" value="standard" />
|
<RadioButton labelText="Standard (10 GB)" value="standard" />
|
||||||
<RadioButton labelText="Pro (128 GB)" value="pro" />
|
<RadioButton labelText="Pro (128 GB)" value="pro" />
|
||||||
</RadioButtonGroup>
|
</RadioButtonGroup>
|
||||||
|
|
||||||
## Skeleton
|
### Skeleton
|
||||||
|
|
||||||
Show a loading state for horizontal radio buttons.
|
|
||||||
|
|
||||||
<RadioButtonGroup legendText="Storage tier (disk)">
|
<RadioButtonGroup legendText="Storage tier (disk)">
|
||||||
<RadioButtonSkeleton />
|
<RadioButtonSkeleton />
|
||||||
|
|
@ -93,9 +79,7 @@ Show a loading state for horizontal radio buttons.
|
||||||
<RadioButtonSkeleton />
|
<RadioButtonSkeleton />
|
||||||
</RadioButtonGroup>
|
</RadioButtonGroup>
|
||||||
|
|
||||||
## Skeleton (vertical)
|
### Skeleton (vertical)
|
||||||
|
|
||||||
Show a loading state for vertical radio buttons.
|
|
||||||
|
|
||||||
<RadioButtonGroup orientation="vertical" legendText="Storage tier (disk)">
|
<RadioButtonGroup orientation="vertical" legendText="Storage tier (disk)">
|
||||||
<RadioButtonSkeleton />
|
<RadioButtonSkeleton />
|
||||||
|
|
|
||||||
|
|
@ -7,64 +7,44 @@ components: ["TileGroup", "RadioTile"]
|
||||||
import Preview from "../../components/Preview.svelte";
|
import Preview from "../../components/Preview.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
`RadioTile` provides a selectable tile interface for choosing a single option from a set. It supports both individual and grouped usage, with options for light and disabled states.
|
### Default
|
||||||
|
|
||||||
## Default
|
<TileGroup legend="Service pricing tiers">
|
||||||
|
<RadioTile value="0" checked>
|
||||||
Create a group of radio tiles with a shared name and legend.
|
|
||||||
|
|
||||||
<TileGroup legend="Service pricing tiers" name="plan" selected="standard">
|
|
||||||
<RadioTile value="lite">
|
|
||||||
Lite plan
|
Lite plan
|
||||||
</RadioTile>
|
</RadioTile>
|
||||||
<RadioTile value="standard">
|
<RadioTile value="1">
|
||||||
Standard plan
|
Standard plan
|
||||||
</RadioTile>
|
</RadioTile>
|
||||||
<RadioTile value="plus">
|
<RadioTile value="2">
|
||||||
Plus plan
|
Plus plan
|
||||||
</RadioTile>
|
</RadioTile>
|
||||||
</TileGroup>
|
</TileGroup>
|
||||||
|
|
||||||
## Reactive (one-way binding)
|
### Light variant
|
||||||
|
|
||||||
Update the selected value using the `select` event.
|
<TileGroup legend="Service pricing tiers">
|
||||||
|
<RadioTile light value="0" checked>
|
||||||
<FileSource src="/framed/RadioTile/RadioTileReactiveOneWay" />
|
|
||||||
|
|
||||||
## Reactive (two-way binding)
|
|
||||||
|
|
||||||
Bind to the `selected` prop for simpler state management.
|
|
||||||
|
|
||||||
<FileSource src="/framed/RadioTile/RadioTileReactive" />
|
|
||||||
|
|
||||||
## Light variant
|
|
||||||
|
|
||||||
Use the light variant for light backgrounds.
|
|
||||||
|
|
||||||
<TileGroup legend="Service pricing tiers" name="plan-light" selected="standard">
|
|
||||||
<RadioTile light value="lite">
|
|
||||||
Lite plan
|
Lite plan
|
||||||
</RadioTile>
|
</RadioTile>
|
||||||
<RadioTile light value="standard">
|
<RadioTile light value="1">
|
||||||
Standard plan
|
Standard plan
|
||||||
</RadioTile>
|
</RadioTile>
|
||||||
<RadioTile light value="plus">
|
<RadioTile light value="2">
|
||||||
Plus plan
|
Plus plan
|
||||||
</RadioTile>
|
</RadioTile>
|
||||||
</TileGroup>
|
</TileGroup>
|
||||||
|
|
||||||
## Disabled state
|
### Disabled state
|
||||||
|
|
||||||
Disable specific tiles to prevent selection.
|
<TileGroup legend="Service pricing tiers">
|
||||||
|
<RadioTile value="0" checked>
|
||||||
<TileGroup legend="Service pricing tiers" name="plan-disabled" selected="standard">
|
|
||||||
<RadioTile value="lite" disabled>
|
|
||||||
Lite plan
|
Lite plan
|
||||||
</RadioTile>
|
</RadioTile>
|
||||||
<RadioTile value="standard">
|
<RadioTile value="1" disabled>
|
||||||
Standard plan
|
Standard plan
|
||||||
</RadioTile>
|
</RadioTile>
|
||||||
<RadioTile value="plus" disabled>
|
<RadioTile value="2" disabled>
|
||||||
Plus plan
|
Plus plan
|
||||||
</RadioTile>
|
</RadioTile>
|
||||||
</TileGroup>
|
</TileGroup>
|
||||||
|
|
@ -1,42 +0,0 @@
|
||||||
<script>
|
|
||||||
import { InlineNotification, RecursiveList, Link } from "carbon-components-svelte";
|
|
||||||
import Preview from "../../components/Preview.svelte";
|
|
||||||
</script>
|
|
||||||
|
|
||||||
`RecursiveList` provides a flexible way to render hierarchical data structures using either unordered or ordered lists. It supports nested nodes, links, and HTML content, making it ideal for displaying complex data hierarchies.
|
|
||||||
|
|
||||||
<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
|
|
||||||
<div class="body-short-01">
|
|
||||||
In version 0.86.0, the <strong>children</strong> prop was renamed to <strong>nodes</strong> for <Link target="_blank" href="https://svelte.dev/docs/svelte/v5-migration-guide#The-children-prop-is-reserved">Svelte 5 compatibility</Link>.
|
|
||||||
</div>
|
|
||||||
</InlineNotification>
|
|
||||||
|
|
||||||
<InlineNotification svx-ignore lowContrast title="Warning:" kind="warning" hideCloseButton>
|
|
||||||
<div class="body-short-01">
|
|
||||||
HTML content provided via the <code>html</code> prop is not sanitized.
|
|
||||||
</div>
|
|
||||||
</InlineNotification>
|
|
||||||
|
|
||||||
## Default
|
|
||||||
|
|
||||||
Create a hierarchical list using the `nodes` prop. Each node can contain text, links, HTML content, and nested nodes.
|
|
||||||
|
|
||||||
<FileSource src="/framed/RecursiveList/RecursiveList" />
|
|
||||||
|
|
||||||
## Ordered
|
|
||||||
|
|
||||||
Set `type` to `"ordered"` to use numbered lists with proper indentation.
|
|
||||||
|
|
||||||
<FileSource src="/framed/RecursiveList/RecursiveListOrdered" />
|
|
||||||
|
|
||||||
## Ordered (native styles)
|
|
||||||
|
|
||||||
Set `type` to `"ordered-native"` to use browser-native numbering styles.
|
|
||||||
|
|
||||||
<FileSource src="/framed/RecursiveList/RecursiveListOrderedNative" />
|
|
||||||
|
|
||||||
## Flat data structure
|
|
||||||
|
|
||||||
Convert flat data structures to hierarchical arrays using the `toHierarchy` utility function.
|
|
||||||
|
|
||||||
<FileSource src="/framed/RecursiveList/RecursiveListFlatArray" />
|
|
||||||
|
|
@ -1,81 +1,52 @@
|
||||||
<script>
|
<script>
|
||||||
import Query from "carbon-icons-svelte/lib/Query.svelte";
|
|
||||||
import { Search } from "carbon-components-svelte";
|
import { Search } from "carbon-components-svelte";
|
||||||
import Preview from "../../components/Preview.svelte";
|
import Preview from "../../components/Preview.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
`Search` provides a flexible search input component with support for expandable variants, different sizes, and custom icons. It includes built-in functionality for clearing input and handling keyboard events.
|
### Default
|
||||||
|
|
||||||
## Default
|
The `Search` component size is extra-large by default. There are [large](#large-size) and [small](#small-size) size variants.
|
||||||
|
|
||||||
The search component is extra-large by default. Use the `size` prop to choose between [large](#large-size) and [small](#small-size) variants.
|
|
||||||
|
|
||||||
<Search />
|
<Search />
|
||||||
|
|
||||||
## Default value
|
### Default value
|
||||||
|
|
||||||
Set an initial value using the `value` prop.
|
|
||||||
|
|
||||||
<Search placeholder="Search catalog..." value="Cloud functions" />
|
<Search placeholder="Search catalog..." value="Cloud functions" />
|
||||||
|
|
||||||
## Reactive example
|
### Reactive example
|
||||||
|
|
||||||
Bind to the `value` prop for reactive updates.
|
|
||||||
|
|
||||||
<FileSource src="/framed/Search/SearchReactive" />
|
<FileSource src="/framed/Search/SearchReactive" />
|
||||||
|
|
||||||
## Clear event
|
### on:clear
|
||||||
|
|
||||||
The `clear` event is dispatched when clicking the clear button or pressing the Escape key.
|
The "clear" event is dispatched when clicking the "X" button in the search input element.
|
||||||
|
|
||||||
<Search value="Cloud functions" on:clear={() => console.log('clear')}/>
|
<Search value="Cloud functions" on:clear={() => console.log('clear')}/>
|
||||||
|
|
||||||
## Expandable variant
|
### Light variant
|
||||||
|
|
||||||
Enable the expandable variant to show a compact search icon that expands on focus.
|
|
||||||
|
|
||||||
<FileSource src="/framed/Search/SearchExpandableReactive" />
|
|
||||||
|
|
||||||
## Light variant
|
|
||||||
|
|
||||||
Use the light variant for light backgrounds.
|
|
||||||
|
|
||||||
<Search light />
|
<Search light />
|
||||||
|
|
||||||
## Large size
|
### Large size
|
||||||
|
|
||||||
Set `size` to `"lg"` for a large search input.
|
|
||||||
|
|
||||||
<Search size="lg" />
|
<Search size="lg" />
|
||||||
|
|
||||||
## Small size
|
### Small size
|
||||||
|
|
||||||
Set `size` to `"sm"` for a small search input.
|
|
||||||
|
|
||||||
<Search size="sm" />
|
<Search size="sm" />
|
||||||
|
|
||||||
## Disabled state
|
### Disabled
|
||||||
|
|
||||||
Disable the search input using the `disabled` prop.
|
|
||||||
|
|
||||||
<Search disabled />
|
<Search disabled />
|
||||||
|
|
||||||
## Custom icon
|
### Skeleton
|
||||||
|
|
||||||
Replace the default search icon with a custom one.
|
|
||||||
|
|
||||||
<Search icon={Query} />
|
|
||||||
|
|
||||||
## Skeleton
|
|
||||||
|
|
||||||
Display a loading state using the skeleton variant.
|
|
||||||
|
|
||||||
<Search skeleton />
|
<Search skeleton />
|
||||||
|
|
||||||
## Skeleton (large)
|
### Skeleton (large)
|
||||||
|
|
||||||
<Search size="lg" skeleton />
|
<Search size="lg" skeleton />
|
||||||
|
|
||||||
## Skeleton (small)
|
### Skeleton (small)
|
||||||
|
|
||||||
<Search size="sm" skeleton />
|
<Search size="sm" skeleton />
|
||||||
|
|
@ -7,77 +7,34 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
|
||||||
import Preview from "../../components/Preview.svelte";
|
import Preview from "../../components/Preview.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
`Select` provides a dropdown menu for selecting a single option from a list. It supports various states, sizes, and includes built-in validation and helper text.
|
### Default
|
||||||
|
|
||||||
## Default
|
<Select labelText="Carbon theme" selected="g10" >
|
||||||
|
|
||||||
Create a basic select menu with `SelectItem` components. The first item's value is used as the default if `selected` is not set.
|
|
||||||
|
|
||||||
<Select labelText="Carbon theme" on:change={e => console.log("value", e.target.value)}>
|
|
||||||
<SelectItem value="white" />
|
|
||||||
<SelectItem value="g10" />
|
|
||||||
<SelectItem value="g80" />
|
|
||||||
<SelectItem value="g90" />
|
|
||||||
<SelectItem value="g100" />
|
|
||||||
</Select>
|
|
||||||
|
|
||||||
## Custom item text
|
|
||||||
|
|
||||||
Use the `text` prop to customize the display text of each option.
|
|
||||||
|
|
||||||
<Select labelText="Carbon theme" on:change={e => console.log("value", e.target.value)}>
|
|
||||||
<SelectItem value="white" text="White" />
|
<SelectItem value="white" text="White" />
|
||||||
<SelectItem value="g10" text="Gray 10" />
|
<SelectItem value="g10" text="Gray 10" />
|
||||||
<SelectItem value="g80" text="Gray 80" />
|
|
||||||
<SelectItem value="g90" text="Gray 90" />
|
<SelectItem value="g90" text="Gray 90" />
|
||||||
<SelectItem value="g100" text="Gray 100" />
|
<SelectItem value="g100" text="Gray 100" />
|
||||||
</Select>
|
</Select>
|
||||||
|
|
||||||
## Initial selected value
|
### Helper text
|
||||||
|
|
||||||
Set the initial selection using the `selected` prop.
|
<Select helperText="Carbon offers 4 themes (2 light, 2 dark)" labelText="Carbon theme" selected="g10" >
|
||||||
|
|
||||||
<Select labelText="Carbon theme" selected="g10" on:change={e => console.log("value", e.target.value)}>
|
|
||||||
<SelectItem value="white" text="White" />
|
<SelectItem value="white" text="White" />
|
||||||
<SelectItem value="g10" text="Gray 10" />
|
<SelectItem value="g10" text="Gray 10" />
|
||||||
<SelectItem value="g80" text="Gray 80" />
|
|
||||||
<SelectItem value="g90" text="Gray 90" />
|
<SelectItem value="g90" text="Gray 90" />
|
||||||
<SelectItem value="g100" text="Gray 100" />
|
<SelectItem value="g100" text="Gray 100" />
|
||||||
</Select>
|
</Select>
|
||||||
|
|
||||||
## Reactive example
|
### Hidden label
|
||||||
|
|
||||||
The `selected` prop supports two-way binding for reactive updates.
|
|
||||||
|
|
||||||
<FileSource src="/framed/Select/SelectReactive" />
|
|
||||||
|
|
||||||
## Helper text
|
|
||||||
|
|
||||||
Add descriptive text below the select menu.
|
|
||||||
|
|
||||||
<Select helperText="Carbon offers 4 themes (2 light, 3 dark)" labelText="Carbon theme" selected="g10" >
|
|
||||||
<SelectItem value="white" text="White" />
|
|
||||||
<SelectItem value="g10" text="Gray 10" />
|
|
||||||
<SelectItem value="g80" text="Gray 80" />
|
|
||||||
<SelectItem value="g90" text="Gray 90" />
|
|
||||||
<SelectItem value="g100" text="Gray 100" />
|
|
||||||
</Select>
|
|
||||||
|
|
||||||
## Hidden label
|
|
||||||
|
|
||||||
Visually hide the label while maintaining accessibility.
|
|
||||||
|
|
||||||
<Select hideLabel labelText="Carbon theme" selected="g10" >
|
<Select hideLabel labelText="Carbon theme" selected="g10" >
|
||||||
<SelectItem value="white" text="White" />
|
<SelectItem value="white" text="White" />
|
||||||
<SelectItem value="g10" text="Gray 10" />
|
<SelectItem value="g10" text="Gray 10" />
|
||||||
<SelectItem value="g80" text="Gray 80" />
|
|
||||||
<SelectItem value="g90" text="Gray 90" />
|
<SelectItem value="g90" text="Gray 90" />
|
||||||
<SelectItem value="g100" text="Gray 100" />
|
<SelectItem value="g100" text="Gray 100" />
|
||||||
</Select>
|
</Select>
|
||||||
|
|
||||||
## Item groups
|
### Item groups
|
||||||
|
|
||||||
Group related options using `SelectItemGroup` components.
|
|
||||||
|
|
||||||
<Select labelText="Carbon theme" selected="0">
|
<Select labelText="Carbon theme" selected="0">
|
||||||
<SelectItem value="0" text="Select a theme" disabled hidden />
|
<SelectItem value="0" text="Select a theme" disabled hidden />
|
||||||
|
|
@ -86,102 +43,78 @@ Group related options using `SelectItemGroup` components.
|
||||||
<SelectItem value="g10" text="Gray 10" />
|
<SelectItem value="g10" text="Gray 10" />
|
||||||
</SelectItemGroup>
|
</SelectItemGroup>
|
||||||
<SelectItemGroup label="Dark theme">
|
<SelectItemGroup label="Dark theme">
|
||||||
<SelectItem value="g80" text="Gray 80" />
|
|
||||||
<SelectItem value="g90" text="Gray 90" />
|
<SelectItem value="g90" text="Gray 90" />
|
||||||
<SelectItem value="g100" text="Gray 100" />
|
<SelectItem value="g100" text="Gray 100" />
|
||||||
</SelectItemGroup>
|
</SelectItemGroup>
|
||||||
</Select>
|
</Select>
|
||||||
|
|
||||||
## Small size
|
### Light variant
|
||||||
|
|
||||||
Use the small size variant for compact layouts.
|
|
||||||
|
|
||||||
<Select size="sm" labelText="Carbon theme" selected="g10" >
|
|
||||||
<SelectItem value="white" text="White" />
|
|
||||||
<SelectItem value="g10" text="Gray 10" />
|
|
||||||
<SelectItem value="g80" text="Gray 80" />
|
|
||||||
<SelectItem value="g90" text="Gray 90" />
|
|
||||||
<SelectItem value="g100" text="Gray 100" />
|
|
||||||
</Select>
|
|
||||||
|
|
||||||
## Extra-large size
|
|
||||||
|
|
||||||
Use the extra-large size variant for prominent selections.
|
|
||||||
|
|
||||||
<Select size="xl" labelText="Carbon theme" selected="g10" >
|
|
||||||
<SelectItem value="white" text="White" />
|
|
||||||
<SelectItem value="g10" text="Gray 10" />
|
|
||||||
<SelectItem value="g80" text="Gray 80" />
|
|
||||||
<SelectItem value="g90" text="Gray 90" />
|
|
||||||
<SelectItem value="g100" text="Gray 100" />
|
|
||||||
</Select>
|
|
||||||
|
|
||||||
## Inline variant
|
|
||||||
|
|
||||||
Use the inline variant for horizontal layouts.
|
|
||||||
|
|
||||||
<Select inline labelText="Carbon theme" selected="g10" >
|
|
||||||
<SelectItem value="white" text="White" />
|
|
||||||
<SelectItem value="g10" text="Gray 10" />
|
|
||||||
<SelectItem value="g80" text="Gray 80" />
|
|
||||||
<SelectItem value="g90" text="Gray 90" />
|
|
||||||
<SelectItem value="g100" text="Gray 100" />
|
|
||||||
</Select>
|
|
||||||
|
|
||||||
## Light variant
|
|
||||||
|
|
||||||
Use the light variant for light backgrounds.
|
|
||||||
|
|
||||||
<Select light labelText="Carbon theme" selected="g10" >
|
<Select light labelText="Carbon theme" selected="g10" >
|
||||||
<SelectItem value="white" text="White" />
|
<SelectItem value="white" text="White" />
|
||||||
<SelectItem value="g10" text="Gray 10" />
|
<SelectItem value="g10" text="Gray 10" />
|
||||||
<SelectItem value="g80" text="Gray 80" />
|
|
||||||
<SelectItem value="g90" text="Gray 90" />
|
<SelectItem value="g90" text="Gray 90" />
|
||||||
<SelectItem value="g100" text="Gray 100" />
|
<SelectItem value="g100" text="Gray 100" />
|
||||||
</Select>
|
</Select>
|
||||||
|
|
||||||
## Invalid state
|
### Inline type
|
||||||
|
|
||||||
Show validation errors using the invalid state.
|
<Select inline labelText="Carbon theme" selected="g10" >
|
||||||
|
<SelectItem value="white" text="White" />
|
||||||
|
<SelectItem value="g10" text="Gray 10" />
|
||||||
|
<SelectItem value="g90" text="Gray 90" />
|
||||||
|
<SelectItem value="g100" text="Gray 100" />
|
||||||
|
</Select>
|
||||||
|
|
||||||
|
### Extra-large size
|
||||||
|
|
||||||
|
<Select size="xl" labelText="Carbon theme" selected="g10" >
|
||||||
|
<SelectItem value="white" text="White" />
|
||||||
|
<SelectItem value="g10" text="Gray 10" />
|
||||||
|
<SelectItem value="g90" text="Gray 90" />
|
||||||
|
<SelectItem value="g100" text="Gray 100" />
|
||||||
|
</Select>
|
||||||
|
|
||||||
|
### Small size
|
||||||
|
|
||||||
|
<Select size="sm" labelText="Carbon theme" selected="g10" >
|
||||||
|
<SelectItem value="white" text="White" />
|
||||||
|
<SelectItem value="g10" text="Gray 10" />
|
||||||
|
<SelectItem value="g90" text="Gray 90" />
|
||||||
|
<SelectItem value="g100" text="Gray 100" />
|
||||||
|
</Select>
|
||||||
|
|
||||||
|
### Invalid state
|
||||||
|
|
||||||
<Select invalid invalidText="Theme must be a dark variant" labelText="Carbon theme" selected="g10" >
|
<Select invalid invalidText="Theme must be a dark variant" labelText="Carbon theme" selected="g10" >
|
||||||
<SelectItem value="white" text="White" />
|
<SelectItem value="white" text="White" />
|
||||||
<SelectItem value="g10" text="Gray 10" />
|
<SelectItem value="g10" text="Gray 10" />
|
||||||
<SelectItem value="g80" text="Gray 80" />
|
|
||||||
<SelectItem value="g90" text="Gray 90" />
|
<SelectItem value="g90" text="Gray 90" />
|
||||||
<SelectItem value="g100" text="Gray 100" />
|
<SelectItem value="g100" text="Gray 100" />
|
||||||
</Select>
|
</Select>
|
||||||
|
|
||||||
## Warning state
|
### Warning state
|
||||||
|
|
||||||
Show warnings using the warning state.
|
|
||||||
|
|
||||||
<Select warn warnText="The selected theme will not be persisted" labelText="Carbon theme" selected="g10" >
|
<Select warn warnText="The selected theme will not be persisted" labelText="Carbon theme" selected="g10" >
|
||||||
<SelectItem value="white" text="White" />
|
<SelectItem value="white" text="White" />
|
||||||
<SelectItem value="g10" text="Gray 10" />
|
<SelectItem value="g10" text="Gray 10" />
|
||||||
<SelectItem value="g80" text="Gray 80" />
|
|
||||||
<SelectItem value="g90" text="Gray 90" />
|
<SelectItem value="g90" text="Gray 90" />
|
||||||
<SelectItem value="g100" text="Gray 100" />
|
<SelectItem value="g100" text="Gray 100" />
|
||||||
</Select>
|
</Select>
|
||||||
|
|
||||||
## Disabled state
|
### Disabled state
|
||||||
|
|
||||||
Disable the select menu to prevent interaction.
|
|
||||||
|
|
||||||
<Select disabled labelText="Carbon theme" selected="g10" >
|
<Select disabled labelText="Carbon theme" selected="g10" >
|
||||||
<SelectItem value="white" text="White" />
|
<SelectItem value="white" text="White" />
|
||||||
<SelectItem value="g10" text="Gray 10" />
|
<SelectItem value="g10" text="Gray 10" />
|
||||||
<SelectItem value="g80" text="Gray 80" />
|
|
||||||
<SelectItem value="g90" text="Gray 90" />
|
<SelectItem value="g90" text="Gray 90" />
|
||||||
<SelectItem value="g100" text="Gray 100" />
|
<SelectItem value="g100" text="Gray 100" />
|
||||||
</Select>
|
</Select>
|
||||||
|
|
||||||
## Skeleton
|
### Skeleton
|
||||||
|
|
||||||
Display a loading state using the skeleton variant.
|
|
||||||
|
|
||||||
<SelectSkeleton />
|
<SelectSkeleton />
|
||||||
|
|
||||||
## Skeleton (hidden label)
|
### Skeleton (hidden label)
|
||||||
|
|
||||||
<SelectSkeleton hideLabel />
|
<SelectSkeleton hideLabel />
|
||||||
|
|
@ -7,11 +7,7 @@ components: ["SelectableTile"]
|
||||||
import Preview from "../../components/Preview.svelte";
|
import Preview from "../../components/Preview.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
`SelectableTile` provides a tile-based selection interface that allows users to select multiple options. It supports various states and includes built-in keyboard navigation and accessibility features.
|
### Multi-selectable tiles
|
||||||
|
|
||||||
## Multi-selectable tiles
|
|
||||||
|
|
||||||
Group multiple selectable tiles together for multi-selection scenarios.
|
|
||||||
|
|
||||||
<div role="group" aria-label="selectable tiles">
|
<div role="group" aria-label="selectable tiles">
|
||||||
<SelectableTile selected>
|
<SelectableTile selected>
|
||||||
|
|
@ -25,9 +21,7 @@ Group multiple selectable tiles together for multi-selection scenarios.
|
||||||
</SelectableTile>
|
</SelectableTile>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
## Light variant
|
### Light variant
|
||||||
|
|
||||||
Use the light variant for light backgrounds.
|
|
||||||
|
|
||||||
<div role="group" aria-label="selectable tiles">
|
<div role="group" aria-label="selectable tiles">
|
||||||
<SelectableTile light selected>
|
<SelectableTile light selected>
|
||||||
|
|
@ -41,9 +35,7 @@ Use the light variant for light backgrounds.
|
||||||
</SelectableTile>
|
</SelectableTile>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
## Disabled state
|
### Disabled state
|
||||||
|
|
||||||
Disable tiles to prevent interaction.
|
|
||||||
|
|
||||||
<div role="group" aria-label="selectable tiles">
|
<div role="group" aria-label="selectable tiles">
|
||||||
<SelectableTile selected>
|
<SelectableTile selected>
|
||||||
|
|
|
||||||
|
|
@ -3,16 +3,10 @@
|
||||||
import Preview from "../../components/Preview.svelte";
|
import Preview from "../../components/Preview.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
`SkeletonPlaceholder` provides a loading state placeholder that can be used to indicate content is being loaded. It supports custom sizing and forwards mouse events for interactive loading states.
|
### Default
|
||||||
|
|
||||||
## Default
|
|
||||||
|
|
||||||
Create a basic skeleton placeholder with default styling.
|
|
||||||
|
|
||||||
<SkeletonPlaceholder />
|
<SkeletonPlaceholder />
|
||||||
|
|
||||||
## Custom size
|
### Custom size
|
||||||
|
|
||||||
Specify custom dimensions using the `style` prop.
|
|
||||||
|
|
||||||
<SkeletonPlaceholder style="height: 12rem; width: 12rem;" />
|
<SkeletonPlaceholder style="height: 12rem; width: 12rem;" />
|
||||||
|
|
|
||||||
|
|
@ -3,34 +3,26 @@
|
||||||
import Preview from "../../components/Preview.svelte";
|
import Preview from "../../components/Preview.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
`SkeletonText` provides a loading state for text content with support for different sizes and line counts. It's commonly used to indicate that text content is being loaded.
|
### Default
|
||||||
|
|
||||||
## Default
|
|
||||||
|
|
||||||
Create a basic skeleton text with default styling.
|
|
||||||
|
|
||||||
<SkeletonText />
|
<SkeletonText />
|
||||||
|
|
||||||
## Heading variant
|
### Heading variant
|
||||||
|
|
||||||
Use the heading variant for larger text placeholders.
|
|
||||||
|
|
||||||
<SkeletonText heading />
|
<SkeletonText heading />
|
||||||
|
|
||||||
## Paragraph variant
|
### Heading variant
|
||||||
|
|
||||||
Use the paragraph variant for multi-line text placeholders.
|
<SkeletonText heading />
|
||||||
|
|
||||||
|
### Paragraph variant
|
||||||
|
|
||||||
<SkeletonText paragraph />
|
<SkeletonText paragraph />
|
||||||
|
|
||||||
## Paragraph with custom line count
|
### Paragraph with custom line count
|
||||||
|
|
||||||
Specify the number of lines to render using the `lines` prop.
|
|
||||||
|
|
||||||
<SkeletonText paragraph lines={8} />
|
<SkeletonText paragraph lines={8} />
|
||||||
|
|
||||||
## Paragraph with max width
|
### Paragraph with max width
|
||||||
|
|
||||||
Set a custom width for the text placeholder using the `width` prop.
|
|
||||||
|
|
||||||
<SkeletonText paragraph width="50%" />
|
<SkeletonText paragraph width="50%" />
|
||||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue