mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 10:21:05 +00:00
Compare commits
No commits in common. "master" and "v0.85.4" have entirely different histories.
889 changed files with 11335 additions and 31587 deletions
61
.github/workflows/checks.yml
vendored
61
.github/workflows/checks.yml
vendored
|
|
@ -1,60 +1,31 @@
|
||||||
on:
|
on:
|
||||||
pull_request:
|
pull_request:
|
||||||
paths-ignore:
|
|
||||||
- "**.md"
|
|
||||||
- "docs/**"
|
|
||||||
- "examples/**"
|
|
||||||
push:
|
push:
|
||||||
branches: [master]
|
branches: [master]
|
||||||
paths-ignore:
|
|
||||||
- "**.md"
|
|
||||||
- "docs/**"
|
|
||||||
- "examples/**"
|
|
||||||
|
|
||||||
permissions:
|
|
||||||
contents: read
|
|
||||||
|
|
||||||
jobs:
|
jobs:
|
||||||
lint:
|
|
||||||
runs-on: macos-15-xlarge
|
|
||||||
steps:
|
|
||||||
- uses: actions/checkout@v4
|
|
||||||
- uses: actions/setup-node@v4
|
|
||||||
with:
|
|
||||||
node-version: "22.x"
|
|
||||||
cache: "npm"
|
|
||||||
- run: npm ci
|
|
||||||
- run: npm run lint
|
|
||||||
|
|
||||||
test:
|
test:
|
||||||
runs-on: macos-15-xlarge
|
runs-on: ubuntu-latest
|
||||||
steps:
|
steps:
|
||||||
- uses: actions/checkout@v4
|
- uses: actions/checkout@v4
|
||||||
- uses: actions/setup-node@v4
|
- uses: actions/cache@v4
|
||||||
|
id: npm-cache
|
||||||
with:
|
with:
|
||||||
node-version: "22.x"
|
path: "**/node_modules"
|
||||||
cache: "npm"
|
key: ${{ runner.os }}-modules-${{ hashFiles('**/package-lock.json') }}
|
||||||
- run: npm ci
|
|
||||||
- run: npm run test
|
|
||||||
|
|
||||||
types:
|
- name: Install dependencies
|
||||||
runs-on: macos-15-xlarge
|
run: npm install
|
||||||
steps:
|
|
||||||
- uses: actions/checkout@v4
|
- name: Build the codebase
|
||||||
- uses: actions/setup-node@v4
|
run: npm run build:lib
|
||||||
with:
|
|
||||||
node-version: "22.x"
|
- name: Test types
|
||||||
cache: "npm"
|
run: npm run test:types
|
||||||
- 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
|
- name: Trigger deploy
|
||||||
|
if: github.ref == 'refs/heads/master'
|
||||||
env:
|
env:
|
||||||
deploy_url: ${{ secrets.RENDER_DEPLOY_HOOK_URL }}
|
deploy_url: ${{ secrets.RENDER_DEPLOY_HOOK_URL }}
|
||||||
run: curl -f "$deploy_url"
|
run: |
|
||||||
|
curl "$deploy_url"
|
||||||
|
|
|
||||||
10
.github/workflows/release.yml
vendored
10
.github/workflows/release.yml
vendored
|
|
@ -5,7 +5,7 @@ on:
|
||||||
|
|
||||||
jobs:
|
jobs:
|
||||||
release:
|
release:
|
||||||
runs-on: macos-latest-xlarge
|
runs-on: ubuntu-latest
|
||||||
permissions:
|
permissions:
|
||||||
contents: read
|
contents: read
|
||||||
id-token: write
|
id-token: write
|
||||||
|
|
@ -13,17 +13,17 @@ jobs:
|
||||||
- uses: actions/checkout@v4
|
- uses: actions/checkout@v4
|
||||||
- uses: actions/setup-node@v4
|
- uses: actions/setup-node@v4
|
||||||
with:
|
with:
|
||||||
node-version: "22.x"
|
node-version: "20.x"
|
||||||
registry-url: "https://registry.npmjs.org"
|
registry-url: "https://registry.npmjs.org"
|
||||||
|
|
||||||
- name: Install dependencies
|
- name: Install dependencies
|
||||||
run: npm install
|
run: npm install
|
||||||
|
|
||||||
- name: Build docs
|
- name: Build docs and library
|
||||||
run: npm run build:docs
|
run: npm run build:docs & npm run build:lib
|
||||||
|
|
||||||
- name: Prune package.json
|
- name: Prune package.json
|
||||||
run: npx culls --preserve=svelte
|
run: node scripts/build-package.js
|
||||||
|
|
||||||
- name: Publish package (stable)
|
- name: Publish package (stable)
|
||||||
if: ${{ ! contains(github.ref, '-next') }}
|
if: ${{ ! contains(github.ref, '-next') }}
|
||||||
|
|
|
||||||
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -1,3 +1,4 @@
|
||||||
|
lib
|
||||||
node_modules
|
node_modules
|
||||||
.DS_Store
|
.DS_Store
|
||||||
.vscode
|
.vscode
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,4 @@
|
||||||
|
/lib
|
||||||
/css
|
/css
|
||||||
/types
|
/types
|
||||||
.svelte-kit
|
.svelte-kit
|
||||||
|
|
@ -6,4 +7,3 @@ dist
|
||||||
client
|
client
|
||||||
build
|
build
|
||||||
*.svx
|
*.svx
|
||||||
COMPONENT_API.json
|
|
||||||
188
CHANGELOG.md
188
CHANGELOG.md
|
|
@ -2,194 +2,6 @@
|
||||||
|
|
||||||
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
|
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
|
||||||
|
|
||||||
### [0.89.7](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.89.6...v0.89.7) (2025-09-05)
|
|
||||||
|
|
||||||
### Bug Fixes
|
|
||||||
|
|
||||||
- **combo-box:** address accessibility issues ([#2186](https://github.com/carbon-design-system/carbon-components-svelte/issues/2186)) ([2fc884c](https://github.com/carbon-design-system/carbon-components-svelte/commit/2fc884cacabfffcf7779d6ef9ba01dece0bf5d86)), closes [#2172](https://github.com/carbon-design-system/carbon-components-svelte/issues/2172)
|
|
||||||
- **data-table:** handle dynamic `headers` gracefully ([#2195](https://github.com/carbon-design-system/carbon-components-svelte/issues/2195)) ([6d0d3b1](https://github.com/carbon-design-system/carbon-components-svelte/commit/6d0d3b108bb4595d878fda20736c40b9656d14d7)), closes [#2193](https://github.com/carbon-design-system/carbon-components-svelte/issues/2193)
|
|
||||||
- **overflow-menu:** avoid dynamic style injection for performance ([#2198](https://github.com/carbon-design-system/carbon-components-svelte/issues/2198)) ([14edf41](https://github.com/carbon-design-system/carbon-components-svelte/commit/14edf41e57fea1ddbb2cf24c37e79475849bdea1)), closes [#2197](https://github.com/carbon-design-system/carbon-components-svelte/issues/2197)
|
|
||||||
- **pagination:** `on:change` dispatches with correct value ([#2194](https://github.com/carbon-design-system/carbon-components-svelte/issues/2194)) ([44a6cc0](https://github.com/carbon-design-system/carbon-components-svelte/commit/44a6cc0dfcbd3cdad1b442a760c9f604e58d56e6))
|
|
||||||
|
|
||||||
### [0.89.6](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.89.5...v0.89.6) (2025-08-16)
|
|
||||||
|
|
||||||
### Bug Fixes
|
|
||||||
|
|
||||||
- **toggle:** avoid dispatching `toggle` event on state change ([#2184](https://github.com/carbon-design-system/carbon-components-svelte/issues/2184)) ([0df727b](https://github.com/carbon-design-system/carbon-components-svelte/commit/0df727b704d6cc577681dc682269a6e224ddbb6e))
|
|
||||||
|
|
||||||
### [0.89.5](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.89.4...v0.89.5) (2025-08-05)
|
|
||||||
|
|
||||||
### Bug Fixes
|
|
||||||
|
|
||||||
- **checkbox:** prevent infinite effect loop when binding to same object ([#2178](https://github.com/carbon-design-system/carbon-components-svelte/issues/2178)) ([c7ad1eb](https://github.com/carbon-design-system/carbon-components-svelte/commit/c7ad1ebdd3764235f460abd95cdb7d1d389983d9)), closes [#2177](https://github.com/carbon-design-system/carbon-components-svelte/issues/2177)
|
|
||||||
|
|
||||||
### [0.89.4](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.89.3...v0.89.4) (2025-06-10)
|
|
||||||
|
|
||||||
### Bug Fixes
|
|
||||||
|
|
||||||
- **multi-select:** forward `on:input` for filterable variant ([#2170](https://github.com/carbon-design-system/carbon-components-svelte/issues/2170)) ([aecc4e8](https://github.com/carbon-design-system/carbon-components-svelte/commit/aecc4e8eec6571515233ec76ca06218814a279a7))
|
|
||||||
|
|
||||||
### [0.89.3](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.89.2...v0.89.3) (2025-06-07)
|
|
||||||
|
|
||||||
### Bug Fixes
|
|
||||||
|
|
||||||
- **combo-box:** "Escape" key clears input value ([#2169](https://github.com/carbon-design-system/carbon-components-svelte/issues/2169)) ([632320a](https://github.com/carbon-design-system/carbon-components-svelte/commit/632320ae3b8d9c602add0f4f7c708fc643cb7ffc)), closes [#2167](https://github.com/carbon-design-system/carbon-components-svelte/issues/2167)
|
|
||||||
- **combo-box:** clear button supports "Space" key ([#2168](https://github.com/carbon-design-system/carbon-components-svelte/issues/2168)) ([95c06a8](https://github.com/carbon-design-system/carbon-components-svelte/commit/95c06a83b3afcbb76acfc0a5efe2f178d333ff19)), closes [#2166](https://github.com/carbon-design-system/carbon-components-svelte/issues/2166)
|
|
||||||
|
|
||||||
### [0.89.2](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.89.1...v0.89.2) (2025-04-28)
|
|
||||||
|
|
||||||
### Bug Fixes
|
|
||||||
|
|
||||||
- **composed-modal:** ignore a11y warning in Svelte 5 ([#2159](https://github.com/carbon-design-system/carbon-components-svelte/issues/2159)) ([024d774](https://github.com/carbon-design-system/carbon-components-svelte/commit/024d77493c93e7823e4781a1a60aaf350d289d52))
|
|
||||||
- **pagination:** use `toLocaleString` for default text formatting ([#2161](https://github.com/carbon-design-system/carbon-components-svelte/issues/2161)) ([cdf5659](https://github.com/carbon-design-system/carbon-components-svelte/commit/cdf5659fa0177da77dc8ea1ccffdec54b746954b))
|
|
||||||
- **pagination:** window `totalItems` for performance ([#2160](https://github.com/carbon-design-system/carbon-components-svelte/issues/2160)) ([ed3928b](https://github.com/carbon-design-system/carbon-components-svelte/commit/ed3928bb01ecca2fa63f551938dbee1c1829a978)), closes [#2156](https://github.com/carbon-design-system/carbon-components-svelte/issues/2156)
|
|
||||||
- **to-hierarchy:** revert to previous implementation ([96d37cc](https://github.com/carbon-design-system/carbon-components-svelte/commit/96d37cc490f28830264c35c84447ee4526256314))
|
|
||||||
|
|
||||||
### [0.89.1](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.89.0...v0.89.1) (2025-04-21)
|
|
||||||
|
|
||||||
### Bug Fixes
|
|
||||||
|
|
||||||
- **toolbar-search:** re-filter rows if `DataTable` rows change ([#2154](https://github.com/carbon-design-system/carbon-components-svelte/issues/2154)) ([f09c2e2](https://github.com/carbon-design-system/carbon-components-svelte/commit/f09c2e2c311c15f633db8dc45930d8e58a4b362d)), closes [#2143](https://github.com/carbon-design-system/carbon-components-svelte/issues/2143)
|
|
||||||
|
|
||||||
### [0.89.0](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.88.4...v0.89.0) (2025-04-18)
|
|
||||||
|
|
||||||
### Features
|
|
||||||
|
|
||||||
- **combo-box:** add `hideLabel` prop ([#2153](https://github.com/carbon-design-system/carbon-components-svelte/issues/2153)) ([436dea4](https://github.com/carbon-design-system/carbon-components-svelte/commit/436dea47e8da35753a257c9b2bd6f33338e95ba5))
|
|
||||||
|
|
||||||
### Bug Fixes
|
|
||||||
|
|
||||||
- **select:** falsy item `text` should fallback to `value` ([#2152](https://github.com/carbon-design-system/carbon-components-svelte/issues/2152)) ([61ea8dd](https://github.com/carbon-design-system/carbon-components-svelte/commit/61ea8dd82c2f9863dfe5f8a882e73624b994d9e5))
|
|
||||||
|
|
||||||
### [0.88.4](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.88.3...v0.88.4) (2025-03-24)
|
|
||||||
|
|
||||||
### Bug Fixes
|
|
||||||
|
|
||||||
- **list-box-selection:** fix `aria-label` for clear button ([#2134](https://github.com/carbon-design-system/carbon-components-svelte/issues/2134)) ([dd1338f](https://github.com/carbon-design-system/carbon-components-svelte/commit/dd1338ffc47926a13e231d4a0f724e923f2219e2))
|
|
||||||
- **list-box:** correct button/description translations based on selection count ([#2139](https://github.com/carbon-design-system/carbon-components-svelte/issues/2139)) ([1a5f2d8](https://github.com/carbon-design-system/carbon-components-svelte/commit/1a5f2d8e67734bfda20272ae6a77d13b3837416d))
|
|
||||||
- **list-box:** set `aria-disabled` if `disabled` ([#2125](https://github.com/carbon-design-system/carbon-components-svelte/issues/2125)) ([#2138](https://github.com/carbon-design-system/carbon-components-svelte/issues/2138)) ([9b61af0](https://github.com/carbon-design-system/carbon-components-svelte/commit/9b61af0306b422acf1e7cdde278e517740f667c5)), closes [#2130](https://github.com/carbon-design-system/carbon-components-svelte/issues/2130)
|
|
||||||
- **radio-button:** forward `focus`, `blur` events ([#2135](https://github.com/carbon-design-system/carbon-components-svelte/issues/2135)) ([1462e30](https://github.com/carbon-design-system/carbon-components-svelte/commit/1462e300d69f0cd7ee5476dfe3a7ea892ac8f4ad)), closes [#2131](https://github.com/carbon-design-system/carbon-components-svelte/issues/2131)
|
|
||||||
- **radio-tile:** allow standalone `RadioTile` usage ([#2136](https://github.com/carbon-design-system/carbon-components-svelte/issues/2136)) ([ca9beeb](https://github.com/carbon-design-system/carbon-components-svelte/commit/ca9beebaeac7eaed8079c010a86a78926b00147f))
|
|
||||||
- **text-area:** allow visually hidden label ([#2137](https://github.com/carbon-design-system/carbon-components-svelte/issues/2137)) ([43511e0](https://github.com/carbon-design-system/carbon-components-svelte/commit/43511e09ecf312c1b8e9339856b9d7d0785036de))
|
|
||||||
|
|
||||||
### [0.88.3](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.88.2...v0.88.3) (2025-03-19)
|
|
||||||
|
|
||||||
### Bug Fixes
|
|
||||||
|
|
||||||
- Revert **list-box:** use `aria-disabled` instead of invalid `disabled` attribute ([#2125](https://github.com/carbon-design-system/carbon-components-svelte/issues/2125)) ([e1b3ef2](https://github.com/carbon-design-system/carbon-components-svelte/commit/e1b3ef22c9ee09474bacadbb0b22b41326566bab))
|
|
||||||
|
|
||||||
### [0.88.2](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.88.1...v0.88.2) (2025-03-19)
|
|
||||||
|
|
||||||
### Bug Fixes
|
|
||||||
|
|
||||||
- **combo-box:** fix typing when refocusing input ([9e3d830](https://github.com/carbon-design-system/carbon-components-svelte/commit/9e3d83031e69889472c4e84be256ea242854cf81))
|
|
||||||
- **list-box:** use `aria-disabled` instead of invalid `disabled` attribute ([#2125](https://github.com/carbon-design-system/carbon-components-svelte/issues/2125)) ([e1b3ef2](https://github.com/carbon-design-system/carbon-components-svelte/commit/e1b3ef22c9ee09474bacadbb0b22b41326566bab))
|
|
||||||
- **multi-select:** fix keyboard navigation for disabled items ([#2129](https://github.com/carbon-design-system/carbon-components-svelte/issues/2129)) ([e7939ff](https://github.com/carbon-design-system/carbon-components-svelte/commit/e7939ff0e21c3430c9eea74c503b7c35f6823445)), closes [#2128](https://github.com/carbon-design-system/carbon-components-svelte/issues/2128)
|
|
||||||
- **notification:** remove invalid `kind` prop from markup ([#2126](https://github.com/carbon-design-system/carbon-components-svelte/issues/2126)) ([e85d7ef](https://github.com/carbon-design-system/carbon-components-svelte/commit/e85d7efc5ed15f5236d074fd7981ae527d9e5ab5))
|
|
||||||
- **theme:** remove invalid `themes` prop from markup ([#2127](https://github.com/carbon-design-system/carbon-components-svelte/issues/2127)) ([5987b61](https://github.com/carbon-design-system/carbon-components-svelte/commit/5987b61a5522fff09468bddd586eed4a537edcc8))
|
|
||||||
|
|
||||||
### [0.88.1](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.88.0...v0.88.1) (2025-03-12)
|
|
||||||
|
|
||||||
### Bug Fixes
|
|
||||||
|
|
||||||
- **select:** falsy item `text` should not override `value` ([#2118](https://github.com/carbon-design-system/carbon-components-svelte/issues/2118)) ([663b79a](https://github.com/carbon-design-system/carbon-components-svelte/commit/663b79ad054d14a91a8bf700feb62dcf50976eb8)), closes [#2117](https://github.com/carbon-design-system/carbon-components-svelte/issues/2117)
|
|
||||||
- **ui-shell:** `HeaderAction` uses dark color scheme ([#2119](https://github.com/carbon-design-system/carbon-components-svelte/issues/2119)) ([7ff93ad](https://github.com/carbon-design-system/carbon-components-svelte/commit/7ff93ad2dac489859d5b4a83c1e359a6507718b4))
|
|
||||||
|
|
||||||
### [0.88.0](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.87.7...v0.88.0) (2025-03-09)
|
|
||||||
|
|
||||||
### Features
|
|
||||||
|
|
||||||
- **data-table:** allow custom `inputName` for radio/checkbox ([#2087](https://github.com/carbon-design-system/carbon-components-svelte/issues/2087)) ([7481b9a](https://github.com/carbon-design-system/carbon-components-svelte/commit/7481b9a995dfbc8c2fbaeaae143c8372cf5fce66)), closes [#2085](https://github.com/carbon-design-system/carbon-components-svelte/issues/2085)
|
|
||||||
- **ui-shell:** `HeaderAction` supports tooltip ([#2111](https://github.com/carbon-design-system/carbon-components-svelte/issues/2111)) ([24b9cbc](https://github.com/carbon-design-system/carbon-components-svelte/commit/24b9cbc9c343537e5e74799ef8289bd29396cf04)), closes [#2110](https://github.com/carbon-design-system/carbon-components-svelte/issues/2110)
|
|
||||||
|
|
||||||
### [0.87.7](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.87.6...v0.87.7) (2025-03-07)
|
|
||||||
|
|
||||||
### Bug Fixes
|
|
||||||
|
|
||||||
- **select:** avoid infinite update loop in Svelte 5 ([#2108](https://github.com/carbon-design-system/carbon-components-svelte/issues/2108)) ([9b4bfa6](https://github.com/carbon-design-system/carbon-components-svelte/commit/9b4bfa6f86e23155516db156cbe1c980f3c699e8)), closes [#2107](https://github.com/carbon-design-system/carbon-components-svelte/issues/2107)
|
|
||||||
|
|
||||||
### [0.87.6](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.87.5...v0.87.6) (2025-02-24)
|
|
||||||
|
|
||||||
### Bug Fixes
|
|
||||||
|
|
||||||
- **overflow-menu:** add `aria-controls` to trigger button ([#2100](https://github.com/carbon-design-system/carbon-components-svelte/issues/2100)) ([b7297d4](https://github.com/carbon-design-system/carbon-components-svelte/commit/b7297d452a7813c02f3c89280787292b1c46acec))
|
|
||||||
|
|
||||||
### [0.87.5](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.87.4...v0.87.5) (2025-02-04)
|
|
||||||
|
|
||||||
### Bug Fixes
|
|
||||||
|
|
||||||
- **tag:** allow `on:close` to work with Svelte 5 ([#2097](https://github.com/carbon-design-system/carbon-components-svelte/issues/2097)) ([6e65ef3](https://github.com/carbon-design-system/carbon-components-svelte/commit/6e65ef39e7ff9a3c0ee25b7945a62584e9b7441e)), closes [#2096](https://github.com/carbon-design-system/carbon-components-svelte/issues/2096)
|
|
||||||
|
|
||||||
### [0.87.4](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.87.3...v0.87.4) (2025-02-02)
|
|
||||||
|
|
||||||
### Bug Fixes
|
|
||||||
|
|
||||||
- **types:** loosen `icon` prop type to `any` ([#2095](https://github.com/carbon-design-system/carbon-components-svelte/issues/2095)) ([6bf72d4](https://github.com/carbon-design-system/carbon-components-svelte/commit/6bf72d46024ad2ce03651f28fc1a2a95ec03385d))
|
|
||||||
|
|
||||||
### [0.87.3](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.87.2...v0.87.3) (2025-01-30)
|
|
||||||
|
|
||||||
### Bug Fixes
|
|
||||||
|
|
||||||
- **overflow-menu:** support Svelte 5 ([88f4304](https://github.com/carbon-design-system/carbon-components-svelte/commit/88f4304d5a7c9b38b3cabda677233bef48fb9e3a)), closes [#2092](https://github.com/carbon-design-system/carbon-components-svelte/issues/2092)
|
|
||||||
|
|
||||||
### [0.87.2](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.87.1...v0.87.2) (2025-01-22)
|
|
||||||
|
|
||||||
### Bug Fixes
|
|
||||||
|
|
||||||
- **text-area:** counter supports null `value` ([#2089](https://github.com/carbon-design-system/carbon-components-svelte/issues/2089)) ([76eec84](https://github.com/carbon-design-system/carbon-components-svelte/commit/76eec84c5458d07d61d057d9ff06938e244dbb2c))
|
|
||||||
|
|
||||||
### [0.87.1](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.87.0...v0.87.1) (2025-01-19)
|
|
||||||
|
|
||||||
### Bug Fixes
|
|
||||||
|
|
||||||
- **data-table:** improve `expandable` accessibility ([#2086](https://github.com/carbon-design-system/carbon-components-svelte/issues/2086)) ([e874ac1](https://github.com/carbon-design-system/carbon-components-svelte/commit/e874ac19d778a00c0bba9be65d10be7e6c9104dd))
|
|
||||||
- **data-table:** prefix internal ID for radio button, checkbox ([#2082](https://github.com/carbon-design-system/carbon-components-svelte/issues/2082)) ([dd6cbac](https://github.com/carbon-design-system/carbon-components-svelte/commit/dd6cbac3ee1728dbcba5cd1d8faa43941e2a198e)), closes [#2081](https://github.com/carbon-design-system/carbon-components-svelte/issues/2081)
|
|
||||||
- **dropdown:** avoid manual field `blur` ([c194c80](https://github.com/carbon-design-system/carbon-components-svelte/commit/c194c80e29ab36935af71adb9e166e9a16b70910)), closes [#2083](https://github.com/carbon-design-system/carbon-components-svelte/issues/2083)
|
|
||||||
- **multi-select:** avoid manual field `blur` ([fb6719b](https://github.com/carbon-design-system/carbon-components-svelte/commit/fb6719b1aee35aa45004d82e3b923b4ad45dff5d)), closes [#2083](https://github.com/carbon-design-system/carbon-components-svelte/issues/2083)
|
|
||||||
|
|
||||||
### [0.87.0](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.86.2...v0.87.0) (2024-12-09)
|
|
||||||
|
|
||||||
### Features
|
|
||||||
|
|
||||||
- add `toHierarchy` utility to normalize flat data into `nodes` for `TreeView`, `RecursiveList` ([#2072](https://github.com/carbon-design-system/carbon-components-svelte/issues/2072)) ([48afd18](https://github.com/carbon-design-system/carbon-components-svelte/commit/48afd18e5e01c2839024b8ddb31038267bcedeb8))
|
|
||||||
|
|
||||||
### Bug Fixes
|
|
||||||
|
|
||||||
- **tooltip-icon:** `button` should have explicit `type` ([#2071](https://github.com/carbon-design-system/carbon-components-svelte/issues/2071)) ([18c964e](https://github.com/carbon-design-system/carbon-components-svelte/commit/18c964e579a3762b8022751bf0ed5313b78b22ba))
|
|
||||||
|
|
||||||
### [0.86.2](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.86.1...v0.86.2) (2024-11-30)
|
|
||||||
|
|
||||||
### Bug Fixes
|
|
||||||
|
|
||||||
- **multi-select:** fix sorting behavior ([c3a390f](https://github.com/carbon-design-system/carbon-components-svelte/commit/c3a390f3fef072c6b736e33a85a2ae772df12e52)), closes [#2066](https://github.com/carbon-design-system/carbon-components-svelte/issues/2066)
|
|
||||||
|
|
||||||
## [0.86.1](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.86.0...v0.86.1) (2024-11-22)
|
|
||||||
|
|
||||||
### Bug Fixes
|
|
||||||
|
|
||||||
- **tree-view:** do not flatten original `nodes` ([#2056](https://github.com/carbon-design-system/carbon-components-svelte/issues/2056)) ([e488c88](https://github.com/carbon-design-system/carbon-components-svelte/commit/e488c8837146432330ebbf2f9182a8a69eab6b70))
|
|
||||||
|
|
||||||
## [0.86.0](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.85.4...v0.86.0) (2024-11-20)
|
|
||||||
|
|
||||||
### ⚠ BREAKING CHANGES
|
|
||||||
|
|
||||||
- **package:** set `type="module"` in `package.json`
|
|
||||||
- **package:** remove bundled ESM/UMD support
|
|
||||||
- **treeview:** rename `children` prop to `nodes` for Svelte 5 compatibility
|
|
||||||
- **recursive-list:** rename `children` prop to `nodes` for Svelte 5 compatibility
|
|
||||||
- **types:** use type alias instead of interface for exported component props ([6fbd8ae](https://github.com/carbon-design-system/carbon-components-svelte/commit/6fbd8ae6a90eabde74fb5481c980716eba477c31))
|
|
||||||
|
|
||||||
### Features
|
|
||||||
|
|
||||||
- **data-table:** support TypeScript generics ([#1954](https://github.com/carbon-design-system/carbon-components-svelte/issues/1954)) ([dd43224](https://github.com/carbon-design-system/carbon-components-svelte/commit/dd43224119905c3a26a2369f836338c18fcbafba))
|
|
||||||
|
|
||||||
### Bug Fixes
|
|
||||||
|
|
||||||
- **data-table:** (Svelte 5 compatibility) handle `ToolbarSearch` filtering in `DataTable` ([#2037](https://github.com/carbon-design-system/carbon-components-svelte/issues/2037)) ([3192824](https://github.com/carbon-design-system/carbon-components-svelte/commit/3192824322faef7c0c012eb246bb6ef9da7f78dc))
|
|
||||||
- **multi-select:** (Svelte 5 compatibility) avoid cyclic dependency ([#2034](https://github.com/carbon-design-system/carbon-components-svelte/issues/2034)) ([1acd713](https://github.com/carbon-design-system/carbon-components-svelte/commit/1acd7135372eeabf002dacc80e39162989427140))
|
|
||||||
- **toolbar-menu:** (Svelte 5 compatibility) remove redundant menu offset ([#2047](https://github.com/carbon-design-system/carbon-components-svelte/issues/2047)) ([7e17394](https://github.com/carbon-design-system/carbon-components-svelte/commit/7e173943ac783756521c4957a1c24b5288ab45b7)), closes [#2040](https://github.com/carbon-design-system/carbon-components-svelte/issues/2040)
|
|
||||||
- **checkbox:** (Svelte 5 compatibility) bind `indeterminate` ([#2044](https://github.com/carbon-design-system/carbon-components-svelte/issues/2044)) ([9d5e7e3](https://github.com/carbon-design-system/carbon-components-svelte/commit/9d5e7e31efb2d439b18ba0bf350b712377e160a7)), closes [#2039](https://github.com/carbon-design-system/carbon-components-svelte/issues/2039)
|
|
||||||
|
|
||||||
### [0.85.4](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.85.3...v0.85.4) (2024-11-09)
|
### [0.85.4](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.85.3...v0.85.4) (2024-11-09)
|
||||||
|
|
||||||
### Bug Fixes
|
### Bug Fixes
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
# Component Index
|
# Component Index
|
||||||
|
|
||||||
> 165 components exported from carbon-components-svelte@0.89.7.
|
> 165 components exported from carbon-components-svelte@0.85.4.
|
||||||
|
|
||||||
## Components
|
## Components
|
||||||
|
|
||||||
|
|
@ -379,7 +379,7 @@ export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584;
|
||||||
| size | No | <code>let</code> | No | <code>"default" | "field" | "small" | "lg" | "xl"</code> | <code>"default"</code> | Specify the size of button |
|
| size | No | <code>let</code> | No | <code>"default" | "field" | "small" | "lg" | "xl"</code> | <code>"default"</code> | Specify the size of button |
|
||||||
| expressive | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use Carbon's expressive typesetting |
|
| expressive | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use Carbon's expressive typesetting |
|
||||||
| isSelected | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the selected state for an icon-only, ghost button |
|
| isSelected | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the selected state for an icon-only, ghost button |
|
||||||
| icon | No | <code>let</code> | No | <code>any</code> | <code>undefined</code> | Specify the icon to render<br />Alternatively, use the named slot "icon" (e.g., `<Icon slot="icon" size="{20}" />`) |
|
| icon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render<br />Alternatively, use the named slot "icon" (e.g., `<Icon slot="icon" size="{20}" />`) |
|
||||||
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the ARIA label for the button icon |
|
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the ARIA label for the button icon |
|
||||||
| tooltipAlignment | No | <code>let</code> | No | <code>"start" | "center" | "end"</code> | <code>"center"</code> | Set the alignment of the tooltip relative to the icon.<br />Only applies to icon-only buttons |
|
| tooltipAlignment | No | <code>let</code> | No | <code>"start" | "center" | "end"</code> | <code>"center"</code> | Set the alignment of the tooltip relative to the icon.<br />Only applies to icon-only buttons |
|
||||||
| tooltipPosition | No | <code>let</code> | No | <code>"top" | "right" | "bottom" | "left"</code> | <code>"bottom"</code> | Set the position of the tooltip relative to the icon |
|
| tooltipPosition | No | <code>let</code> | No | <code>"top" | "right" | "bottom" | "left"</code> | <code>"bottom"</code> | Set the position of the tooltip relative to the icon |
|
||||||
|
|
@ -458,10 +458,10 @@ None.
|
||||||
| :------------ | :------- | :--------------- | :------- | ----------------------------------------- | ------------------------------------------------ | ------------------------------------------------- |
|
| :------------ | :------- | :--------------- | :------- | ----------------------------------------- | ------------------------------------------------ | ------------------------------------------------- |
|
||||||
| ref | No | <code>let</code> | Yes | <code>null | HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
|
| ref | No | <code>let</code> | Yes | <code>null | HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
|
||||||
| title | No | <code>let</code> | Yes | <code>string</code> | <code>undefined</code> | Specify the title attribute for the label element |
|
| title | No | <code>let</code> | Yes | <code>string</code> | <code>undefined</code> | Specify the title attribute for the label element |
|
||||||
| indeterminate | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Specify whether the checkbox is indeterminate |
|
|
||||||
| group | No | <code>let</code> | Yes | <code>ReadonlyArray<any></code> | <code>undefined</code> | Specify the bound group |
|
| group | No | <code>let</code> | Yes | <code>ReadonlyArray<any></code> | <code>undefined</code> | Specify the bound group |
|
||||||
| checked | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Specify whether the checkbox is checked |
|
| checked | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Specify whether the checkbox is checked |
|
||||||
| value | No | <code>let</code> | No | <code>any</code> | <code>""</code> | Specify the value of the checkbox |
|
| value | No | <code>let</code> | No | <code>any</code> | <code>""</code> | Specify the value of the checkbox |
|
||||||
|
| indeterminate | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Specify whether the checkbox is indeterminate |
|
||||||
| skeleton | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state |
|
| skeleton | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state |
|
||||||
| required | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to mark the field as required |
|
| required | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to mark the field as required |
|
||||||
| readonly | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the checkbox to be read-only |
|
| readonly | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the checkbox to be read-only |
|
||||||
|
|
@ -671,7 +671,6 @@ export interface ComboBoxItem {
|
||||||
| size | No | <code>let</code> | No | <code>"sm" | "xl"</code> | <code>undefined</code> | Set the size of the combobox |
|
| size | No | <code>let</code> | No | <code>"sm" | "xl"</code> | <code>undefined</code> | Set the size of the combobox |
|
||||||
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the combobox |
|
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the combobox |
|
||||||
| titleText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the title text of the combobox |
|
| titleText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the title text of the combobox |
|
||||||
| hideLabel | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text |
|
|
||||||
| placeholder | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the placeholder text |
|
| placeholder | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the placeholder text |
|
||||||
| helperText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the helper text |
|
| helperText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the helper text |
|
||||||
| invalidText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the invalid state text |
|
| invalidText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the invalid state text |
|
||||||
|
|
@ -848,27 +847,27 @@ None.
|
||||||
|
|
||||||
### Props
|
### Props
|
||||||
|
|
||||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||||
| :----------- | :------- | :--------------- | :------- | -------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------- |
|
| :----------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------- |
|
||||||
| ref | No | <code>let</code> | Yes | <code>null | HTMLLIElement</code> | <code>null</code> | Obtain a reference to the list item HTML element |
|
| ref | No | <code>let</code> | Yes | <code>null | HTMLLIElement</code> | <code>null</code> | Obtain a reference to the list item HTML element |
|
||||||
| selectable | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to enable the selectable variant<br />Automatically set to `true` if `selected` is `true` |
|
| selectable | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to enable the selectable variant<br />Automatically set to `true` if `selected` is `true` |
|
||||||
| selected | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to use the selected variant |
|
| selected | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to use the selected variant |
|
||||||
| icon | No | <code>let</code> | Yes | <code>any</code> | <code>undefined</code> | Specify the icon to render<br />Icon is rendered to the left of the label text |
|
| icon | No | <code>let</code> | Yes | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render<br />Icon is rendered to the left of the label text |
|
||||||
| indented | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to indent the label |
|
| indented | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to indent the label |
|
||||||
| kind | No | <code>let</code> | No | <code>"default" | "danger"</code> | <code>"default"</code> | Specify the kind of option |
|
| kind | No | <code>let</code> | No | <code>"default" | "danger"</code> | <code>"default"</code> | Specify the kind of option |
|
||||||
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the disabled state |
|
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the disabled state |
|
||||||
| labelText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text.<br />Alternatively, use the "labelText" slot (e.g., `<span slot="labelText">...</span>`) |
|
| labelText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text.<br />Alternatively, use the "labelText" slot (e.g., `<span slot="labelText">...</span>`) |
|
||||||
| shortcutText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the shortcut text.<br />Alternatively, use the "shortcutText" slot (e.g., `<span slot="shortcutText">...</span>`) |
|
| shortcutText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the shortcut text.<br />Alternatively, use the "shortcutText" slot (e.g., `<span slot="shortcutText">...</span>`) |
|
||||||
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Specify the id<br />It's recommended to provide an id as a value to bind to within a selectable/radio menu group |
|
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Specify the id<br />It's recommended to provide an id as a value to bind to within a selectable/radio menu group |
|
||||||
|
|
||||||
### Slots
|
### Slots
|
||||||
|
|
||||||
| Slot name | Default | Props | Fallback |
|
| Slot name | Default | Props | Fallback |
|
||||||
| :----------- | :------ | :---- | :-------------------------------------------------- |
|
| :----------- | :------ | :---- | :---------------------------------------------------- |
|
||||||
| -- | Yes | -- | -- |
|
| -- | Yes | -- | -- |
|
||||||
| icon | No | -- | <code><svelte:component this={icon} /></code> |
|
| icon | No | -- | <code><svelte:component this="{icon}" /></code> |
|
||||||
| labelText | No | -- | <code>{labelText}</code> |
|
| labelText | No | -- | <code>{labelText}</code> |
|
||||||
| shortcutText | No | -- | <code>{shortcutText}</code> |
|
| shortcutText | No | -- | <code>{shortcutText}</code> |
|
||||||
|
|
||||||
### Events
|
### Events
|
||||||
|
|
||||||
|
|
@ -927,34 +926,31 @@ None.
|
||||||
### Types
|
### Types
|
||||||
|
|
||||||
```ts
|
```ts
|
||||||
export type DataTableKey<Row = DataTableRow> =
|
export type DataTableKey = string;
|
||||||
import("./DataTableTypes.d.ts").PropertyPath<Row>;
|
|
||||||
|
|
||||||
export type DataTableValue = any;
|
export type DataTableValue = any;
|
||||||
|
|
||||||
export interface DataTableEmptyHeader<Row = DataTableRow> {
|
export interface DataTableEmptyHeader {
|
||||||
key: DataTableKey<Row> | (string & {});
|
key: DataTableKey;
|
||||||
empty: boolean;
|
empty: boolean;
|
||||||
display?: (item: DataTableValue, row: Row) => DataTableValue;
|
display?: (item: DataTableValue, row: DataTableRow) => DataTableValue;
|
||||||
sort?: false | ((a: DataTableValue, b: DataTableValue) => number);
|
sort?: false | ((a: DataTableValue, b: DataTableValue) => number);
|
||||||
columnMenu?: boolean;
|
columnMenu?: boolean;
|
||||||
width?: string;
|
width?: string;
|
||||||
minWidth?: string;
|
minWidth?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface DataTableNonEmptyHeader<Row = DataTableRow> {
|
export interface DataTableNonEmptyHeader {
|
||||||
key: DataTableKey<Row>;
|
key: DataTableKey;
|
||||||
value: DataTableValue;
|
value: DataTableValue;
|
||||||
display?: (item: DataTableValue, row: Row) => DataTableValue;
|
display?: (item: DataTableValue, row: DataTableRow) => DataTableValue;
|
||||||
sort?: false | ((a: DataTableValue, b: DataTableValue) => number);
|
sort?: false | ((a: DataTableValue, b: DataTableValue) => number);
|
||||||
columnMenu?: boolean;
|
columnMenu?: boolean;
|
||||||
width?: string;
|
width?: string;
|
||||||
minWidth?: string;
|
minWidth?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export type DataTableHeader<Row = DataTableRow> =
|
export type DataTableHeader = DataTableNonEmptyHeader | DataTableEmptyHeader;
|
||||||
| DataTableNonEmptyHeader<Row>
|
|
||||||
| DataTableEmptyHeader<Row>;
|
|
||||||
|
|
||||||
export interface DataTableRow {
|
export interface DataTableRow {
|
||||||
id: any;
|
id: any;
|
||||||
|
|
@ -963,8 +959,8 @@ export interface DataTableRow {
|
||||||
|
|
||||||
export type DataTableRowId = any;
|
export type DataTableRowId = any;
|
||||||
|
|
||||||
export interface DataTableCell<Row = DataTableRow> {
|
export interface DataTableCell {
|
||||||
key: DataTableKey<Row> | (string & {});
|
key: DataTableKey;
|
||||||
value: DataTableValue;
|
value: DataTableValue;
|
||||||
display?: (item: DataTableValue, row: DataTableRow) => DataTableValue;
|
display?: (item: DataTableValue, row: DataTableRow) => DataTableValue;
|
||||||
}
|
}
|
||||||
|
|
@ -972,57 +968,56 @@ export interface DataTableCell<Row = DataTableRow> {
|
||||||
|
|
||||||
### Props
|
### Props
|
||||||
|
|
||||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||||
| :------------------ | :------- | :--------------- | :------- | ------------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
| :------------------ | :------- | :--------------- | :------- | ------------------------------------------------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------- |
|
||||||
| selectedRowIds | No | <code>let</code> | Yes | <code>ReadonlyArray<DataTableRowId></code> | <code>[]</code> | Specify the row ids to be selected |
|
| selectedRowIds | No | <code>let</code> | Yes | <code>ReadonlyArray<DataTableRowId></code> | <code>[]</code> | Specify the row ids to be selected |
|
||||||
| selectable | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` for the selectable variant<br />Automatically set to `true` if `radio` or `batchSelection` are `true` |
|
| selectable | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` for the selectable variant<br />Automatically set to `true` if `radio` or `batchSelection` are `true` |
|
||||||
| expandedRowIds | No | <code>let</code> | Yes | <code>ReadonlyArray<DataTableRowId></code> | <code>[]</code> | Specify the row ids to be expanded |
|
| expandedRowIds | No | <code>let</code> | Yes | <code>ReadonlyArray<DataTableRowId></code> | <code>[]</code> | Specify the row ids to be expanded |
|
||||||
| expandable | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` for the expandable variant<br />Automatically set to `true` if `batchExpansion` is `true` |
|
| expandable | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` for the expandable variant<br />Automatically set to `true` if `batchExpansion` is `true` |
|
||||||
| sortDirection | No | <code>let</code> | Yes | <code>"none" | "ascending" | "descending"</code> | <code>"none"</code> | Specify the sort direction |
|
| sortDirection | No | <code>let</code> | Yes | <code>"none" | "ascending" | "descending"</code> | <code>"none"</code> | Specify the sort direction |
|
||||||
| sortKey | No | <code>let</code> | Yes | <code>DataTableKey<Row></code> | <code>null</code> | Specify the header key to sort by |
|
| sortKey | No | <code>let</code> | Yes | <code>DataTableKey</code> | <code>null</code> | Specify the header key to sort by |
|
||||||
| headers | No | <code>let</code> | No | <code>ReadonlyArray<DataTableHeader<Row>></code> | <code>[]</code> | Specify the data table headers |
|
| headers | No | <code>let</code> | No | <code>ReadonlyArray<DataTableHeader></code> | <code>[]</code> | Specify the data table headers |
|
||||||
| rows | No | <code>let</code> | No | <code>ReadonlyArray<Row></code> | <code>[]</code> | Specify the rows the data table should render<br />keys defined in `headers` are used for the row ids |
|
| rows | No | <code>let</code> | No | <code>ReadonlyArray<DataTableRow></code> | <code>[]</code> | Specify the rows the data table should render<br />keys defined in `headers` are used for the row ids |
|
||||||
| size | No | <code>let</code> | No | <code>"compact" | "short" | "medium" | "tall"</code> | <code>undefined</code> | Set the size of the data table |
|
| size | No | <code>let</code> | No | <code>"compact" | "short" | "medium" | "tall"</code> | <code>undefined</code> | Set the size of the data table |
|
||||||
| title | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the title of the data table |
|
| title | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the title of the data table |
|
||||||
| description | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the description of the data table |
|
| description | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the description of the data table |
|
||||||
| inputName | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Specify a name attribute for the input elements<br />in a selectable data table (radio or checkbox).<br />When the table is inside a form, this name will<br />be included in the form data on submit. |
|
| zebra | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use zebra styles |
|
||||||
| zebra | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use zebra styles |
|
| sortable | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the sortable variant |
|
||||||
| sortable | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the sortable variant |
|
| batchExpansion | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable batch expansion |
|
||||||
| batchExpansion | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable batch expansion |
|
| nonExpandableRowIds | No | <code>let</code> | No | <code>ReadonlyArray<DataTableRowId></code> | <code>[]</code> | Specify the ids for rows that should not be expandable |
|
||||||
| nonExpandableRowIds | No | <code>let</code> | No | <code>ReadonlyArray<DataTableRowId></code> | <code>[]</code> | Specify the ids for rows that should not be expandable |
|
| radio | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the radio selection variant |
|
||||||
| radio | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the radio selection variant |
|
| batchSelection | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable batch selection |
|
||||||
| batchSelection | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable batch selection |
|
| nonSelectableRowIds | No | <code>let</code> | No | <code>ReadonlyArray<DataTableRowId></code> | <code>[]</code> | Specify the ids of rows that should not be selectable |
|
||||||
| nonSelectableRowIds | No | <code>let</code> | No | <code>ReadonlyArray<DataTableRowId></code> | <code>[]</code> | Specify the ids of rows that should not be selectable |
|
| stickyHeader | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable a sticky header |
|
||||||
| stickyHeader | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable a sticky header |
|
| useStaticWidth | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use static width |
|
||||||
| useStaticWidth | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use static width |
|
| pageSize | No | <code>let</code> | No | <code>number</code> | <code>0</code> | Specify the number of items to display in a page |
|
||||||
| pageSize | No | <code>let</code> | No | <code>number</code> | <code>0</code> | Specify the number of items to display in a page |
|
| page | No | <code>let</code> | No | <code>number</code> | <code>0</code> | Set to `number` to set current page |
|
||||||
| page | No | <code>let</code> | No | <code>number</code> | <code>0</code> | Set to `number` to set current page |
|
|
||||||
|
|
||||||
### Slots
|
### Slots
|
||||||
|
|
||||||
| Slot name | Default | Props | Fallback |
|
| Slot name | Default | Props | Fallback |
|
||||||
| :----------- | :------ | :----------------------------------------------------------------------------------------- | :----------------------------------------------------------------------- |
|
| :----------- | :------ | :--------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------- |
|
||||||
| -- | Yes | -- | -- |
|
| -- | Yes | -- | -- |
|
||||||
| cell | No | <code>{ row: Row; cell: DataTableCell<Row>; rowIndex: number; cellIndex: number; } </code> | <code>{cell.display ? cell.display(cell.value, row) : cell.value}</code> |
|
| cell | No | <code>{ row: DataTableRow; cell: DataTableCell; rowIndex: number; cellIndex: number; } </code> | <code>{cell.display ? cell.display(cell.value, row) : cell.value}</code> |
|
||||||
| cell-header | No | <code>{ header: DataTableNonEmptyHeader; } </code> | <code>{header.value}</code> |
|
| cell-header | No | <code>{ header: DataTableNonEmptyHeader; } </code> | <code>{header.value}</code> |
|
||||||
| description | No | -- | <code>{description}</code> |
|
| description | No | -- | <code>{description}</code> |
|
||||||
| expanded-row | No | <code>{ row: Row; } </code> | -- |
|
| expanded-row | No | <code>{ row: DataTableRow; } </code> | -- |
|
||||||
| title | No | -- | <code>{title}</code> |
|
| title | No | -- | <code>{title}</code> |
|
||||||
|
|
||||||
### Events
|
### Events
|
||||||
|
|
||||||
| Event name | Type | Detail |
|
| Event name | Type | Detail |
|
||||||
| :------------------- | :--------- | :----------------------------------------------------------------------------------------------------------- |
|
| :------------------- | :--------- | :------------------------------------------------------------------------------------------------------ |
|
||||||
| click | dispatched | <code>{ header?: DataTableHeader<Row>; row?: Row; cell?: DataTableCell<Row>; }</code> |
|
| click | dispatched | <code>{ header?: DataTableHeader; row?: DataTableRow; cell?: DataTableCell; }</code> |
|
||||||
| click:header--expand | dispatched | <code>{ expanded: boolean; }</code> |
|
| click:header--expand | dispatched | <code>{ expanded: boolean; }</code> |
|
||||||
| click:header | dispatched | <code>{ header: DataTableHeader<Row>; sortDirection?: "ascending" | "descending" | "none" }</code> |
|
| click:header | dispatched | <code>{ header: DataTableHeader; sortDirection?: "ascending" | "descending" | "none" }</code> |
|
||||||
| click:header--select | dispatched | <code>{ indeterminate: boolean; selected: boolean; }</code> |
|
| click:header--select | dispatched | <code>{ indeterminate: boolean; selected: boolean; }</code> |
|
||||||
| click:row | dispatched | <code>Row</code> |
|
| click:row | dispatched | <code>DataTableRow</code> |
|
||||||
| mouseenter:row | dispatched | <code>Row</code> |
|
| mouseenter:row | dispatched | <code>DataTableRow</code> |
|
||||||
| mouseleave:row | dispatched | <code>Row</code> |
|
| mouseleave:row | dispatched | <code>DataTableRow</code> |
|
||||||
| click:row--expand | dispatched | <code>{ expanded: boolean; row: Row; }</code> |
|
| click:row--expand | dispatched | <code>{ expanded: boolean; row: DataTableRow; }</code> |
|
||||||
| click:row--select | dispatched | <code>{ selected: boolean; row: Row; }</code> |
|
| click:row--select | dispatched | <code>{ selected: boolean; row: DataTableRow; }</code> |
|
||||||
| click:cell | dispatched | <code>DataTableCell<Row></code> |
|
| click:cell | dispatched | <code>DataTableCell</code> |
|
||||||
|
|
||||||
## `DataTableSkeleton`
|
## `DataTableSkeleton`
|
||||||
|
|
||||||
|
|
@ -1584,19 +1579,19 @@ None.
|
||||||
|
|
||||||
### Props
|
### Props
|
||||||
|
|
||||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||||
| :---------------------- | :------- | :--------------- | :------- | ------------------------------------------ | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
| :---------------------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||||
| ref | No | <code>let</code> | Yes | <code>null | HTMLAnchorElement</code> | <code>null</code> | Obtain a reference to the HTML anchor element |
|
| ref | No | <code>let</code> | Yes | <code>null | HTMLAnchorElement</code> | <code>null</code> | Obtain a reference to the HTML anchor element |
|
||||||
| isSideNavOpen | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the side nav |
|
| isSideNavOpen | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the side nav |
|
||||||
| expandedByDefault | No | <code>let</code> | No | <code>boolean</code> | <code>true</code> | Set to `false` to hide the side nav by default |
|
| expandedByDefault | No | <code>let</code> | No | <code>boolean</code> | <code>true</code> | Set to `false` to hide the side nav by default |
|
||||||
| uiShellAriaLabel | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the ARIA label for the header |
|
| uiShellAriaLabel | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the ARIA label for the header |
|
||||||
| href | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the `href` attribute |
|
| href | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the `href` attribute |
|
||||||
| company | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the company name.<br /><br />Alternatively, use the named slot "company" (e.g., `<span slot="company">...</span>`) |
|
| company | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the company name.<br /><br />Alternatively, use the named slot "company" (e.g., `<span slot="company">...</span>`) |
|
||||||
| platformName | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the platform name.<br />Alternatively, use the named slot "platform" (e.g., `<span slot="platform">...</span>`) |
|
| platformName | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the platform name.<br />Alternatively, use the named slot "platform" (e.g., `<span slot="platform">...</span>`) |
|
||||||
| persistentHamburgerMenu | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to persist the hamburger menu |
|
| persistentHamburgerMenu | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to persist the hamburger menu |
|
||||||
| expansionBreakpoint | No | <code>let</code> | No | <code>number</code> | <code>1056</code> | The window width (px) at which the SideNav is expanded and the hamburger menu is hidden.<br />1056 represents the "large" breakpoint in pixels from the Carbon Design System:<br />- small: 320<br />- medium: 672<br />- large: 1056<br />- x-large: 1312<br />- max: 1584 |
|
| expansionBreakpoint | No | <code>let</code> | No | <code>number</code> | <code>1056</code> | The window width (px) at which the SideNav is expanded and the hamburger menu is hidden.<br />1056 represents the "large" breakpoint in pixels from the Carbon Design System:<br />- small: 320<br />- medium: 672<br />- large: 1056<br />- x-large: 1312<br />- max: 1584 |
|
||||||
| iconMenu | No | <code>let</code> | No | <code>any</code> | <code>undefined</code> | Specify the icon to render for the closed state.<br />Defaults to `<Menu size={20} />` |
|
| iconMenu | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render for the closed state.<br />Defaults to `<Menu size={20} />` |
|
||||||
| iconClose | No | <code>let</code> | No | <code>any</code> | <code>undefined</code> | Specify the icon to render for the opened state.<br />Defaults to `<Close size={20} />` |
|
| iconClose | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render for the opened state.<br />Defaults to `<Close size={20} />` |
|
||||||
|
|
||||||
### Slots
|
### Slots
|
||||||
|
|
||||||
|
|
@ -1617,26 +1612,24 @@ None.
|
||||||
|
|
||||||
### Props
|
### Props
|
||||||
|
|
||||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||||
| :------------------------- | :------- | :--------------- | :------- | ----------------------------------------------------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------- |
|
| :------------------------- | :------- | :--------------- | :------- | ----------------------------------------------------------------- | ------------------------------ | ---------------------------------------------------------------------------------------------------------------- |
|
||||||
| ref | No | <code>let</code> | Yes | <code>null | HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the button HTML element |
|
| ref | No | <code>let</code> | Yes | <code>null | HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the button HTML element |
|
||||||
| isOpen | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the panel |
|
| isOpen | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the panel |
|
||||||
| icon | No | <code>let</code> | No | <code>any</code> | <code>undefined</code> | Specify the icon to render when the action panel is closed.<br />Defaults to `<Switcher size={20} />` |
|
| icon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render when the action panel is closed.<br />Defaults to `<Switcher size={20} />` |
|
||||||
| closeIcon | No | <code>let</code> | No | <code>any</code> | <code>undefined</code> | Specify the icon to render when the action panel is open.<br />Defaults to `<Close size={20} />` |
|
| closeIcon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render when the action panel is open.<br />Defaults to `<Close size={20} />` |
|
||||||
| text | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the text displayed next to the icon.<br />Alternatively, use the named slot "text" (e.g., `<div slot="text">...</div>`) |
|
| text | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the text.<br />Alternatively, use the named slot "text" (e.g., `<div slot="text">...</div>`) |
|
||||||
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify an icon tooltip. The tooltip will not be displayed<br />if either the `text` prop or a named slot="text" is used |
|
| transition | No | <code>let</code> | No | <code>false | import("svelte/transition").SlideParams</code> | <code>{ duration: 200 }</code> | Customize the panel transition (i.e., `transition:slide`).<br />Set to `false` to disable the transition |
|
||||||
| tooltipAlignment | No | <code>let</code> | No | <code>"start" | "center" | "end"</code> | <code>"center"</code> | Set the alignment of the tooltip relative to the icon.<br />Only applies when `iconDescription` is provided |
|
| preventCloseOnClickOutside | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to prevent the panel from closing when clicking outside |
|
||||||
| transition | No | <code>let</code> | No | <code>false | import("svelte/transition").SlideParams</code> | <code>{ duration: 200 }</code> | Customize the panel transition (i.e., `transition:slide`).<br />Set to `false` to disable the transition |
|
|
||||||
| preventCloseOnClickOutside | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to prevent the panel from closing when clicking outside |
|
|
||||||
|
|
||||||
### Slots
|
### Slots
|
||||||
|
|
||||||
| Slot name | Default | Props | Fallback |
|
| Slot name | Default | Props | Fallback |
|
||||||
| :-------- | :------ | :---- | :------------------------------------------------------------------------------------------------- |
|
| :-------- | :------ | :---- | :--------------------------------------------------------------------------------------------------- |
|
||||||
| -- | Yes | -- | -- |
|
| -- | Yes | -- | -- |
|
||||||
| closeIcon | No | -- | <code><svelte:component this={closeIcon} size={20} /></code> |
|
| closeIcon | No | -- | <code><svelte:component this="{closeIcon}" size="{20}" /></code> |
|
||||||
| icon | No | -- | <code><svelte:component this={icon} size={20} /></code> |
|
| icon | No | -- | <code><svelte:component this="{icon}" size="{20}" /></code> |
|
||||||
| text | No | -- | <code>{#if text}<span class:bx--header\_\_action-text={true}>{text}</span>{/if}</code> |
|
| text | No | -- | <code>{#if text}<span class:bx--header\_\_action-text="{true}">{text}</span>{/if}</code> |
|
||||||
|
|
||||||
### Events
|
### Events
|
||||||
|
|
||||||
|
|
@ -1650,18 +1643,18 @@ None.
|
||||||
|
|
||||||
### Props
|
### Props
|
||||||
|
|
||||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||||
| :----------- | :------- | :--------------- | :------- | ------------------------------------------ | ---------------------- | --------------------------------------------- |
|
| :----------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ---------------------- | --------------------------------------------- |
|
||||||
| ref | No | <code>let</code> | Yes | <code>null | HTMLAnchorElement</code> | <code>null</code> | Obtain a reference to the HTML anchor element |
|
| ref | No | <code>let</code> | Yes | <code>null | HTMLAnchorElement</code> | <code>null</code> | Obtain a reference to the HTML anchor element |
|
||||||
| linkIsActive | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the active state |
|
| linkIsActive | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the active state |
|
||||||
| href | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the `href` attribute |
|
| href | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the `href` attribute |
|
||||||
| icon | No | <code>let</code> | No | <code>any</code> | <code>undefined</code> | Specify the icon to render |
|
| icon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render |
|
||||||
|
|
||||||
### Slots
|
### Slots
|
||||||
|
|
||||||
| Slot name | Default | Props | Fallback |
|
| Slot name | Default | Props | Fallback |
|
||||||
| :-------- | :------ | :---- | :------------------------------------------------------------ |
|
| :-------- | :------ | :---- | :---------------------------------------------------------------- |
|
||||||
| icon | No | -- | <code><svelte:component this={icon} size={20} /></code> |
|
| icon | No | -- | <code><svelte:component this="{icon}" size="{20}" /></code> |
|
||||||
|
|
||||||
### Events
|
### Events
|
||||||
|
|
||||||
|
|
@ -1673,11 +1666,11 @@ None.
|
||||||
|
|
||||||
### Props
|
### Props
|
||||||
|
|
||||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||||
| :-------- | :------- | :--------------- | :------- | ------------------------------ | ---------------------- | --------------------------------------------- |
|
| :-------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ---------------------- | --------------------------------------------- |
|
||||||
| ref | No | <code>let</code> | Yes | <code>HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the HTML button element |
|
| ref | No | <code>let</code> | Yes | <code>HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the HTML button element |
|
||||||
| isActive | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the active variant |
|
| isActive | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the active variant |
|
||||||
| icon | No | <code>let</code> | No | <code>any</code> | <code>undefined</code> | Specify the icon to render |
|
| icon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render |
|
||||||
|
|
||||||
### Slots
|
### Slots
|
||||||
|
|
||||||
|
|
@ -1842,9 +1835,9 @@ export interface HeaderSearchResult {
|
||||||
|
|
||||||
### Slots
|
### Slots
|
||||||
|
|
||||||
| Slot name | Default | Props | Fallback |
|
| Slot name | Default | Props | Fallback |
|
||||||
| :-------- | :------ | :---------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
| :-------- | :------ | :---------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||||
| -- | Yes | <code>{ result: HeaderSearchResult; index: number } </code> | <code>{result.text}<br /> {#if result.description}<span<br /> class:bx--header-search-menu-description={true}<br /> >– {result.description}</span<br /> >{/if}</code> |
|
| -- | Yes | <code>{ result: HeaderSearchResult; index: number } </code> | <code>{result.text}<br /> {#if result.description}<span<br /> class:bx--header-search-menu-description="{true}"<br /> >– {result.description}</span<br /> >{/if}</code> |
|
||||||
|
|
||||||
### Events
|
### Events
|
||||||
|
|
||||||
|
|
@ -1970,22 +1963,22 @@ None.
|
||||||
|
|
||||||
### Props
|
### Props
|
||||||
|
|
||||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||||
| :-------- | :------- | :--------------- | :------- | ------------------------------------------ | ---------------------- | -------------------------------------------------------- |
|
| :-------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ---------------------- | -------------------------------------------------------- |
|
||||||
| ref | No | <code>let</code> | Yes | <code>null | HTMLAnchorElement</code> | <code>null</code> | Obtain a reference to the top-level HTML element |
|
| ref | No | <code>let</code> | Yes | <code>null | HTMLAnchorElement</code> | <code>null</code> | Obtain a reference to the top-level HTML element |
|
||||||
| size | No | <code>let</code> | No | <code>"sm" | "lg"</code> | <code>undefined</code> | Specify the size of the link |
|
| size | No | <code>let</code> | No | <code>"sm" | "lg"</code> | <code>undefined</code> | Specify the size of the link |
|
||||||
| href | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the href value |
|
| href | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the href value |
|
||||||
| inline | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the inline variant |
|
| inline | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the inline variant |
|
||||||
| icon | No | <code>let</code> | No | <code>any</code> | <code>undefined</code> | Specify the icon to render<br />`inline` must be `false` |
|
| icon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render<br />`inline` must be `false` |
|
||||||
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the checkbox |
|
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the checkbox |
|
||||||
| visited | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to allow visited styles |
|
| visited | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to allow visited styles |
|
||||||
|
|
||||||
### Slots
|
### Slots
|
||||||
|
|
||||||
| Slot name | Default | Props | Fallback |
|
| Slot name | Default | Props | Fallback |
|
||||||
| :-------- | :------ | :---- | :-------------------------------------------------- |
|
| :-------- | :------ | :---- | :---------------------------------------------------- |
|
||||||
| -- | Yes | -- | -- |
|
| -- | Yes | -- | -- |
|
||||||
| icon | No | -- | <code><svelte:component this={icon} /></code> |
|
| icon | No | -- | <code><svelte:component this="{icon}" /></code> |
|
||||||
|
|
||||||
### Events
|
### Events
|
||||||
|
|
||||||
|
|
@ -2228,29 +2221,29 @@ None.
|
||||||
|
|
||||||
### Props
|
### Props
|
||||||
|
|
||||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||||
| :------------------------- | :------- | :--------------- | :------- | --------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------- |
|
| :------------------------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------- |
|
||||||
| ref | No | <code>let</code> | Yes | <code>null | HTMLDivElement</code> | <code>null</code> | Obtain a reference to the top-level HTML element |
|
| ref | No | <code>let</code> | Yes | <code>null | HTMLDivElement</code> | <code>null</code> | Obtain a reference to the top-level HTML element |
|
||||||
| open | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the modal |
|
| open | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the modal |
|
||||||
| size | No | <code>let</code> | No | <code>"xs" | "sm" | "lg"</code> | <code>undefined</code> | Set the size of the modal |
|
| size | No | <code>let</code> | No | <code>"xs" | "sm" | "lg"</code> | <code>undefined</code> | Set the size of the modal |
|
||||||
| danger | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the danger variant |
|
| danger | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the danger variant |
|
||||||
| alert | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable alert mode |
|
| alert | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable alert mode |
|
||||||
| passiveModal | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the passive variant |
|
| passiveModal | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the passive variant |
|
||||||
| modalHeading | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the modal heading |
|
| modalHeading | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the modal heading |
|
||||||
| modalLabel | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the modal label |
|
| modalLabel | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the modal label |
|
||||||
| modalAriaLabel | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the ARIA label for the modal |
|
| modalAriaLabel | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the ARIA label for the modal |
|
||||||
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>"Close the modal"</code> | Specify the ARIA label for the close icon |
|
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>"Close the modal"</code> | Specify the ARIA label for the close icon |
|
||||||
| hasForm | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` if the modal contains form elements |
|
| hasForm | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` if the modal contains form elements |
|
||||||
| hasScrollingContent | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` if the modal contains scrolling content |
|
| hasScrollingContent | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` if the modal contains scrolling content |
|
||||||
| primaryButtonText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the primary button text |
|
| primaryButtonText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the primary button text |
|
||||||
| primaryButtonDisabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the primary button |
|
| primaryButtonDisabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the primary button |
|
||||||
| primaryButtonIcon | No | <code>let</code> | No | <code>any</code> | <code>undefined</code> | Specify the primary button icon |
|
| primaryButtonIcon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the primary button icon |
|
||||||
| shouldSubmitOnEnter | No | <code>let</code> | No | <code>boolean</code> | <code>true</code> | Set to `true` for the "submit" and "click:button--primary" events<br />to be dispatched when pressing "Enter" |
|
| shouldSubmitOnEnter | No | <code>let</code> | No | <code>boolean</code> | <code>true</code> | Set to `true` for the "submit" and "click:button--primary" events<br />to be dispatched when pressing "Enter" |
|
||||||
| secondaryButtonText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the secondary button text |
|
| secondaryButtonText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the secondary button text |
|
||||||
| secondaryButtons | No | <code>let</code> | No | <code>[{ text: string; }, { text: string; }]</code> | <code>[]</code> | 2-tuple prop to render two secondary buttons for a 3 button modal<br />supersedes `secondaryButtonText` |
|
| secondaryButtons | No | <code>let</code> | No | <code>[{ text: string; }, { text: string; }]</code> | <code>[]</code> | 2-tuple prop to render two secondary buttons for a 3 button modal<br />supersedes `secondaryButtonText` |
|
||||||
| selectorPrimaryFocus | No | <code>let</code> | No | <code>string</code> | <code>"[data-modal-primary-focus]"</code> | Specify a selector to be focused when opening the modal |
|
| selectorPrimaryFocus | No | <code>let</code> | No | <code>string</code> | <code>"[data-modal-primary-focus]"</code> | Specify a selector to be focused when opening the modal |
|
||||||
| preventCloseOnClickOutside | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to prevent the modal from closing when clicking outside |
|
| preventCloseOnClickOutside | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to prevent the modal from closing when clicking outside |
|
||||||
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the top-level element |
|
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the top-level element |
|
||||||
|
|
||||||
### Slots
|
### Slots
|
||||||
|
|
||||||
|
|
@ -2299,16 +2292,16 @@ None.
|
||||||
|
|
||||||
### Props
|
### Props
|
||||||
|
|
||||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||||
| :-------------------- | :------- | :--------------- | :------- | --------------------------------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------- |
|
| :-------------------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------- |
|
||||||
| primaryButtonText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the primary button text |
|
| primaryButtonText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the primary button text |
|
||||||
| primaryButtonIcon | No | <code>let</code> | No | <code>any</code> | <code>undefined</code> | Specify the primary button icon |
|
| primaryButtonIcon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the primary button icon |
|
||||||
| primaryButtonDisabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the primary button |
|
| primaryButtonDisabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the primary button |
|
||||||
| primaryClass | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a class for the primary button |
|
| primaryClass | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a class for the primary button |
|
||||||
| secondaryButtonText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the secondary button text |
|
| secondaryButtonText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the secondary button text |
|
||||||
| secondaryButtons | No | <code>let</code> | No | <code>[{ text: string; }, { text: string; }]</code> | <code>[]</code> | 2-tuple prop to render two secondary buttons for a 3 button modal<br />supersedes `secondaryButtonText` |
|
| secondaryButtons | No | <code>let</code> | No | <code>[{ text: string; }, { text: string; }]</code> | <code>[]</code> | 2-tuple prop to render two secondary buttons for a 3 button modal<br />supersedes `secondaryButtonText` |
|
||||||
| secondaryClass | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a class for the secondary button |
|
| secondaryClass | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a class for the secondary button |
|
||||||
| danger | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the danger variant |
|
| danger | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the danger variant |
|
||||||
|
|
||||||
### Slots
|
### Slots
|
||||||
|
|
||||||
|
|
@ -2376,7 +2369,7 @@ export interface MultiSelectItem {
|
||||||
| open | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the dropdown |
|
| open | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the dropdown |
|
||||||
| value | No | <code>let</code> | Yes | <code>string</code> | <code>""</code> | Specify the multiselect value |
|
| value | No | <code>let</code> | Yes | <code>string</code> | <code>""</code> | Specify the multiselect value |
|
||||||
| selectedIds | No | <code>let</code> | Yes | <code>ReadonlyArray<MultiSelectItemId></code> | <code>[]</code> | Set the selected ids |
|
| selectedIds | No | <code>let</code> | Yes | <code>ReadonlyArray<MultiSelectItemId></code> | <code>[]</code> | Set the selected ids |
|
||||||
| items | No | <code>let</code> | No | <code>ReadonlyArray<MultiSelectItem></code> | <code>[]</code> | Set the multiselect items |
|
| items | No | <code>let</code> | Yes | <code>ReadonlyArray<MultiSelectItem></code> | <code>[]</code> | Set the multiselect items |
|
||||||
| itemToString | No | <code>let</code> | No | <code>(item: MultiSelectItem) => any</code> | <code>(item) => item.text || item.id</code> | Override the display of a multiselect item |
|
| itemToString | No | <code>let</code> | No | <code>(item: MultiSelectItem) => any</code> | <code>(item) => item.text || item.id</code> | Override the display of a multiselect item |
|
||||||
| itemToInput | No | <code>let</code> | No | <code>(item: MultiSelectItem) => { name?: string; labelText?: any; title?: string; value?: string }</code> | <code>(item) => {}</code> | Override the item name, title, labelText, or value passed to the user-selectable checkbox input as well as the hidden inputs. |
|
| itemToInput | No | <code>let</code> | No | <code>(item: MultiSelectItem) => { name?: string; labelText?: any; title?: string; value?: string }</code> | <code>(item) => {}</code> | Override the item name, title, labelText, or value passed to the user-selectable checkbox input as well as the hidden inputs. |
|
||||||
| size | No | <code>let</code> | No | <code>"sm" | "lg" | "xl"</code> | <code>undefined</code> | Set the size of the combobox |
|
| size | No | <code>let</code> | No | <code>"sm" | "lg" | "xl"</code> | <code>undefined</code> | Set the size of the combobox |
|
||||||
|
|
@ -2419,7 +2412,6 @@ export interface MultiSelectItem {
|
||||||
| clear | dispatched | <code>null</code> |
|
| clear | dispatched | <code>null</code> |
|
||||||
| blur | dispatched | <code>FocusEvent | CustomEvent<FocusEvent></code> |
|
| blur | dispatched | <code>FocusEvent | CustomEvent<FocusEvent></code> |
|
||||||
| keydown | forwarded | -- |
|
| keydown | forwarded | -- |
|
||||||
| input | forwarded | -- |
|
|
||||||
| keyup | forwarded | -- |
|
| keyup | forwarded | -- |
|
||||||
| focus | forwarded | -- |
|
| focus | forwarded | -- |
|
||||||
| paste | forwarded | -- |
|
| paste | forwarded | -- |
|
||||||
|
|
@ -2449,12 +2441,12 @@ None.
|
||||||
|
|
||||||
### Props
|
### Props
|
||||||
|
|
||||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||||
| :--------------- | :------- | :--------------- | :------- | ------------------------------------ | ------------------------- | ----------------------------------- |
|
| :--------------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ------------------------- | ----------------------------------- |
|
||||||
| notificationType | No | <code>let</code> | No | <code>"toast" | "inline"</code> | <code>"toast"</code> | Set the type of notification |
|
| notificationType | No | <code>let</code> | No | <code>"toast" | "inline"</code> | <code>"toast"</code> | Set the type of notification |
|
||||||
| icon | No | <code>let</code> | No | <code>any</code> | <code>undefined</code> | Specify the icon to render |
|
| icon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render |
|
||||||
| title | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the title of the icon |
|
| title | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the title of the icon |
|
||||||
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>"Close icon"</code> | Specify the ARIA label for the icon |
|
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>"Close icon"</code> | Specify the ARIA label for the icon |
|
||||||
|
|
||||||
### Slots
|
### Slots
|
||||||
|
|
||||||
|
|
@ -2616,27 +2608,27 @@ None.
|
||||||
|
|
||||||
### Props
|
### Props
|
||||||
|
|
||||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||||
| :--------------- | :------- | :--------------- | :------- | ------------------------------------------ | ------------------------------------------------ | ----------------------------------------------------------------------------- |
|
| :--------------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------------------- |
|
||||||
| menuRef | No | <code>let</code> | Yes | <code>null | HTMLUListElement</code> | <code>null</code> | Obtain a reference to the overflow menu element |
|
| menuRef | No | <code>let</code> | Yes | <code>null | HTMLUListElement</code> | <code>null</code> | Obtain a reference to the overflow menu element |
|
||||||
| buttonRef | No | <code>let</code> | Yes | <code>null | HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the trigger button element |
|
| buttonRef | No | <code>let</code> | Yes | <code>null | HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the trigger button element |
|
||||||
| icon | No | <code>let</code> | Yes | <code>any</code> | <code>undefined</code> | Specify the icon to render.<br />Defaults to `<OverflowMenuVertical />` |
|
| icon | No | <code>let</code> | Yes | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render.<br />Defaults to `<OverflowMenuVertical />` |
|
||||||
| open | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the menu |
|
| open | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the menu |
|
||||||
| size | No | <code>let</code> | No | <code>"sm" | "xl"</code> | <code>undefined</code> | Specify the size of the overflow menu |
|
| size | No | <code>let</code> | No | <code>"sm" | "xl"</code> | <code>undefined</code> | Specify the size of the overflow menu |
|
||||||
| direction | No | <code>let</code> | No | <code>"top" | "bottom"</code> | <code>"bottom"</code> | Specify the direction of the overflow menu relative to the button |
|
| direction | No | <code>let</code> | No | <code>"top" | "bottom"</code> | <code>"bottom"</code> | Specify the direction of the overflow menu relative to the button |
|
||||||
| light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
|
| light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
|
||||||
| flipped | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to flip the menu relative to the button |
|
| flipped | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to flip the menu relative to the button |
|
||||||
| menuOptionsClass | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the menu options class |
|
| menuOptionsClass | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the menu options class |
|
||||||
| iconClass | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the icon class |
|
| iconClass | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the icon class |
|
||||||
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>"Open and close list of options"</code> | Specify the ARIA label for the icon |
|
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>"Open and close list of options"</code> | Specify the ARIA label for the icon |
|
||||||
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the button element |
|
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the button element |
|
||||||
|
|
||||||
### Slots
|
### Slots
|
||||||
|
|
||||||
| Slot name | Default | Props | Fallback |
|
| Slot name | Default | Props | Fallback |
|
||||||
| :-------- | :------ | :---- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
| :-------- | :------ | :---- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||||
| -- | Yes | -- | -- |
|
| -- | Yes | -- | -- |
|
||||||
| menu | No | -- | <code><svelte:component<br /> this={icon}<br /> aria-label={iconDescription}<br /> title={iconDescription}<br /> class="bx--overflow-menu\_\_icon {iconClass}"<br /> /></code> |
|
| menu | No | -- | <code><svelte:component<br /> this="{icon}"<br /> aria-label="{iconDescription}"<br /> title="{iconDescription}"<br /> class="bx--overflow-menu\_\_icon {iconClass}"<br /> /></code> |
|
||||||
|
|
||||||
### Events
|
### Events
|
||||||
|
|
||||||
|
|
@ -2667,9 +2659,9 @@ None.
|
||||||
|
|
||||||
### Slots
|
### Slots
|
||||||
|
|
||||||
| Slot name | Default | Props | Fallback |
|
| Slot name | Default | Props | Fallback |
|
||||||
| :-------- | :------ | :---- | :---------------------------------------------------------------------------------------------------------------- |
|
| :-------- | :------ | :---- | :------------------------------------------------------------------------------------------------------------------ |
|
||||||
| -- | Yes | -- | <code><div class:bx--overflow-menu-options\_\_option-content={true}><br /> {text}<br /> </div></code> |
|
| -- | Yes | -- | <code><div class:bx--overflow-menu-options\_\_option-content="{true}"><br /> {text}<br /> </div></code> |
|
||||||
|
|
||||||
### Events
|
### Events
|
||||||
|
|
||||||
|
|
@ -2682,25 +2674,24 @@ None.
|
||||||
|
|
||||||
### Props
|
### Props
|
||||||
|
|
||||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||||
| :-------------------- | :------- | :--------------- | :------- | ---------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
| :-------------------- | :------- | :--------------- | :------- | ---------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | ------------------------------------------------ |
|
||||||
| pageSize | No | <code>let</code> | Yes | <code>number</code> | <code>10</code> | Specify the number of items to display in a page |
|
| pageSize | No | <code>let</code> | Yes | <code>number</code> | <code>10</code> | Specify the number of items to display in a page |
|
||||||
| page | No | <code>let</code> | Yes | <code>number</code> | <code>1</code> | Specify the current page index |
|
| page | No | <code>let</code> | Yes | <code>number</code> | <code>1</code> | Specify the current page index |
|
||||||
| totalItems | No | <code>let</code> | No | <code>number</code> | <code>0</code> | Specify the total number of items |
|
| totalItems | No | <code>let</code> | No | <code>number</code> | <code>0</code> | Specify the total number of items |
|
||||||
| pageWindow | No | <code>let</code> | No | <code>number</code> | <code>1000</code> | If `totalItems` is a large number, it can affect the<br />rendering performance of this component since its value<br />is used to calculate the number of pages in the native<br />select dropdown. This value creates a small window of<br />pages rendered around the current page. By default,<br />a maximum of 1000 select items are rendered. |
|
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the pagination |
|
||||||
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the pagination |
|
| forwardText | No | <code>let</code> | No | <code>string</code> | <code>"Next page"</code> | Specify the forward button text |
|
||||||
| forwardText | No | <code>let</code> | No | <code>string</code> | <code>"Next page"</code> | Specify the forward button text |
|
| backwardText | No | <code>let</code> | No | <code>string</code> | <code>"Previous page"</code> | Specify the backward button text |
|
||||||
| backwardText | No | <code>let</code> | No | <code>string</code> | <code>"Previous page"</code> | Specify the backward button text |
|
| itemsPerPageText | No | <code>let</code> | No | <code>string</code> | <code>"Items per page:"</code> | Specify the items per page text |
|
||||||
| itemsPerPageText | No | <code>let</code> | No | <code>string</code> | <code>"Items per page:"</code> | Specify the items per page text |
|
| itemText | No | <code>let</code> | No | <code>(min: number, max: number) => string</code> | <code>(min, max) => \`${min}–${max} item${max === 1 ? "" : "s"}\`</code> | Override the item text |
|
||||||
| itemText | No | <code>let</code> | No | <code>(min: number, max: number) => string</code> | <code>(min, max) => \`${min.toLocaleString()}–${max.toLocaleString()} item${max === 1 ? "" : "s"}\`</code> | Override the item text |
|
| itemRangeText | No | <code>let</code> | No | <code>(min: number, max: number, total: number) => string</code> | <code>(min, max, total) => \`${min}–${max} of ${total} item${max === 1 ? "" : "s"}\`</code> | Override the item range text |
|
||||||
| itemRangeText | No | <code>let</code> | No | <code>(min: number, max: number, total: number) => string</code> | <code>(min, max, total) => \`${min.toLocaleString()}–${max.toLocaleString()} of ${total.toLocaleString()} item${max === 1 ? "" : "s"}\`</code> | Override the item range text |
|
| pageInputDisabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the page input |
|
||||||
| pageInputDisabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the page input |
|
| pageSizeInputDisabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the page size input |
|
||||||
| pageSizeInputDisabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the page size input |
|
| pageSizes | No | <code>let</code> | No | <code>ReadonlyArray<number></code> | <code>[10]</code> | Specify the available page sizes |
|
||||||
| pageSizes | No | <code>let</code> | No | <code>ReadonlyArray<number></code> | <code>[10]</code> | Specify the available page sizes |
|
| pagesUnknown | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` if the number of pages is unknown |
|
||||||
| pagesUnknown | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` if the number of pages is unknown |
|
| pageText | No | <code>let</code> | No | <code>(page: number) => string</code> | <code>(page) => \`page ${page}\`</code> | Override the page text |
|
||||||
| pageText | No | <code>let</code> | No | <code>(page: number) => string</code> | <code>(page) => \`page ${page.toLocaleString()}\`</code> | Override the page text |
|
| pageRangeText | No | <code>let</code> | No | <code>(current: number, total: number) => string</code> | <code>(current, total) => \`of ${total} page${total === 1 ? "" : "s"}\`</code> | Override the page range text |
|
||||||
| pageRangeText | No | <code>let</code> | No | <code>(current: number, total: number) => string</code> | <code>(current, total) => \`of ${total.toLocaleString()} page${total === 1 ? "" : "s"}\`</code> | Override the page range text |
|
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the top-level element |
|
||||||
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the top-level element |
|
|
||||||
|
|
||||||
### Slots
|
### Slots
|
||||||
|
|
||||||
|
|
@ -2928,9 +2919,9 @@ None.
|
||||||
|
|
||||||
### Slots
|
### Slots
|
||||||
|
|
||||||
| Slot name | Default | Props | Fallback |
|
| Slot name | Default | Props | Fallback |
|
||||||
| :-------- | :------ | :------------------------------------------------------- | :---------------------------------------------------------------------- |
|
| :-------- | :------ | :------------------------------------------------------- | :------------------------------------------------------------------------ |
|
||||||
| -- | Yes | <code>{ props: { class: "bx--progress-label" } } </code> | <code><p class:bx--progress-label={true}>{label}</p></code> |
|
| -- | Yes | <code>{ props: { class: 'bx--progress-label' } } </code> | <code><p class:bx--progress-label="{true}">{label}</p></code> |
|
||||||
|
|
||||||
### Events
|
### Events
|
||||||
|
|
||||||
|
|
@ -2969,8 +2960,6 @@ None.
|
||||||
|
|
||||||
| Event name | Type | Detail |
|
| Event name | Type | Detail |
|
||||||
| :--------- | :-------- | :----- |
|
| :--------- | :-------- | :----- |
|
||||||
| focus | forwarded | -- |
|
|
||||||
| blur | forwarded | -- |
|
|
||||||
| change | forwarded | -- |
|
| change | forwarded | -- |
|
||||||
|
|
||||||
## `RadioButtonGroup`
|
## `RadioButtonGroup`
|
||||||
|
|
@ -3072,10 +3061,10 @@ export interface RecursiveListNode {
|
||||||
|
|
||||||
### Props
|
### Props
|
||||||
|
|
||||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||||
| :-------- | :------- | :--------------- | :------- | ------------------------------------------------------------------------ | ------------------------ | ---------------------------------- |
|
| :-------- | :------- | :--------------- | :------- | --------------------------------------------------------------------------- | ------------------------ | ---------------------------------- |
|
||||||
| nodes | No | <code>let</code> | No | <code>Array<RecursiveListNode & { nodes?: RecursiveListNode[]; }></code> | <code>[]</code> | Specify the nodes to render |
|
| children | No | <code>let</code> | No | <code>Array<RecursiveListNode & { children?: RecursiveListNode[]; }></code> | <code>[]</code> | Specify the children to render |
|
||||||
| type | No | <code>let</code> | No | <code>"unordered" | "ordered" | "ordered-native"</code> | <code>"unordered"</code> | Specify the type of list to render |
|
| type | No | <code>let</code> | No | <code>"unordered" | "ordered" | "ordered-native"</code> | <code>"unordered"</code> | Specify the type of list to render |
|
||||||
|
|
||||||
### Slots
|
### Slots
|
||||||
|
|
||||||
|
|
@ -3113,24 +3102,24 @@ None.
|
||||||
|
|
||||||
### Props
|
### Props
|
||||||
|
|
||||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||||
| :------------------- | :------- | :--------------- | :------- | ----------------------------------------- | ------------------------------------------------ | --------------------------------------------------------------- |
|
| :------------------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ------------------------------------------------ | --------------------------------------------------------------- |
|
||||||
| ref | No | <code>let</code> | Yes | <code>null | HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
|
| ref | No | <code>let</code> | Yes | <code>null | HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
|
||||||
| expanded | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true to expand the search input |
|
| expanded | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true to expand the search input |
|
||||||
| value | No | <code>let</code> | Yes | <code>any</code> | <code>""</code> | Specify the value of the search input |
|
| value | No | <code>let</code> | Yes | <code>any</code> | <code>""</code> | Specify the value of the search input |
|
||||||
| size | No | <code>let</code> | No | <code>"sm" | "lg" | "xl"</code> | <code>"xl"</code> | Specify the size of the search input |
|
| size | No | <code>let</code> | No | <code>"sm" | "lg" | "xl"</code> | <code>"xl"</code> | Specify the size of the search input |
|
||||||
| searchClass | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the class name passed to the outer div element |
|
| searchClass | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the class name passed to the outer div element |
|
||||||
| skeleton | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state |
|
| skeleton | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state |
|
||||||
| light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
|
| light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
|
||||||
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the search input |
|
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the search input |
|
||||||
| expandable | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the expandable variant |
|
| expandable | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the expandable variant |
|
||||||
| placeholder | No | <code>let</code> | No | <code>string</code> | <code>"Search..."</code> | Specify the `placeholder` attribute of the search input |
|
| placeholder | No | <code>let</code> | No | <code>string</code> | <code>"Search..."</code> | Specify the `placeholder` attribute of the search input |
|
||||||
| autocomplete | No | <code>let</code> | No | <code>"on" | "off"</code> | <code>"off"</code> | Specify the `autocomplete` attribute |
|
| autocomplete | No | <code>let</code> | No | <code>"on" | "off"</code> | <code>"off"</code> | Specify the `autocomplete` attribute |
|
||||||
| autofocus | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to auto focus the search element |
|
| autofocus | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to auto focus the search element |
|
||||||
| closeButtonLabelText | No | <code>let</code> | No | <code>string</code> | <code>"Clear search input"</code> | Specify the close button label text |
|
| closeButtonLabelText | No | <code>let</code> | No | <code>string</code> | <code>"Clear search input"</code> | Specify the close button label text |
|
||||||
| labelText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |
|
| labelText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |
|
||||||
| icon | No | <code>let</code> | No | <code>any</code> | <code>undefined</code> | Specify the icon to render.<br />Defaults to `<Search />` |
|
| icon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render.<br />Defaults to `<Search />` |
|
||||||
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element |
|
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element |
|
||||||
|
|
||||||
### Slots
|
### Slots
|
||||||
|
|
||||||
|
|
@ -3223,14 +3212,14 @@ None.
|
||||||
|
|
||||||
### Props
|
### Props
|
||||||
|
|
||||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||||
| :-------- | :------- | :--------------- | :------- | --------------------------------- | ---------------------- | ---------------------------------------------------------------------------------- |
|
| :-------- | :------- | :--------------- | :------- | --------------------------------- | ---------------------- | ----------------------------------------- |
|
||||||
| value | No | <code>let</code> | No | <code>string | number</code> | <code>""</code> | Specify the option value |
|
| value | No | <code>let</code> | No | <code>string | number</code> | <code>""</code> | Specify the option value |
|
||||||
| text | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the option text<br />If not specified, the value will be used as the text. |
|
| text | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the option text |
|
||||||
| hidden | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the option |
|
| hidden | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the option |
|
||||||
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the option |
|
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the option |
|
||||||
| class | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the class of the `option` element |
|
| class | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the class of the `option` element |
|
||||||
| style | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the style of the `option` element |
|
| style | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the style of the `option` element |
|
||||||
|
|
||||||
### Slots
|
### Slots
|
||||||
|
|
||||||
|
|
@ -3375,20 +3364,20 @@ None.
|
||||||
|
|
||||||
### Props
|
### Props
|
||||||
|
|
||||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||||
| :--------- | :------- | :--------------- | :------- | ------------------------------------------ | ---------------------- | --------------------------------------------- |
|
| :--------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ---------------------- | --------------------------------------------- |
|
||||||
| ref | No | <code>let</code> | Yes | <code>null | HTMLAnchorElement</code> | <code>null</code> | Obtain a reference to the HTML anchor element |
|
| ref | No | <code>let</code> | Yes | <code>null | HTMLAnchorElement</code> | <code>null</code> | Obtain a reference to the HTML anchor element |
|
||||||
| isSelected | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to select the current link |
|
| isSelected | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to select the current link |
|
||||||
| href | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the `href` attribute |
|
| href | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the `href` attribute |
|
||||||
| text | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the text |
|
| text | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the text |
|
||||||
| icon | No | <code>let</code> | No | <code>any</code> | <code>undefined</code> | Specify the icon to render |
|
| icon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render |
|
||||||
|
|
||||||
### Slots
|
### Slots
|
||||||
|
|
||||||
| Slot name | Default | Props | Fallback |
|
| Slot name | Default | Props | Fallback |
|
||||||
| :-------- | :------ | :---- | :-------------------------------------------------- |
|
| :-------- | :------ | :---- | :---------------------------------------------------- |
|
||||||
| -- | Yes | -- | <code>{text}</code> |
|
| -- | Yes | -- | <code>{text}</code> |
|
||||||
| icon | No | -- | <code><svelte:component this={icon} /></code> |
|
| icon | No | -- | <code><svelte:component this="{icon}" /></code> |
|
||||||
|
|
||||||
### Events
|
### Events
|
||||||
|
|
||||||
|
|
@ -3400,19 +3389,19 @@ None.
|
||||||
|
|
||||||
### Props
|
### Props
|
||||||
|
|
||||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||||
| :-------- | :------- | :--------------- | :------- | ------------------------------------------ | ---------------------- | --------------------------------------------- |
|
| :-------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ---------------------- | --------------------------------------------- |
|
||||||
| ref | No | <code>let</code> | Yes | <code>null | HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the HTML button element |
|
| ref | No | <code>let</code> | Yes | <code>null | HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the HTML button element |
|
||||||
| expanded | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to toggle the expanded state |
|
| expanded | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to toggle the expanded state |
|
||||||
| text | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the text |
|
| text | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the text |
|
||||||
| icon | No | <code>let</code> | No | <code>any</code> | <code>undefined</code> | Specify the icon to render |
|
| icon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render |
|
||||||
|
|
||||||
### Slots
|
### Slots
|
||||||
|
|
||||||
| Slot name | Default | Props | Fallback |
|
| Slot name | Default | Props | Fallback |
|
||||||
| :-------- | :------ | :---- | :-------------------------------------------------- |
|
| :-------- | :------ | :---- | :---------------------------------------------------- |
|
||||||
| -- | Yes | -- | -- |
|
| -- | Yes | -- | -- |
|
||||||
| icon | No | -- | <code><svelte:component this={icon} /></code> |
|
| icon | No | -- | <code><svelte:component this="{icon}" /></code> |
|
||||||
|
|
||||||
### Events
|
### Events
|
||||||
|
|
||||||
|
|
@ -4019,15 +4008,15 @@ None.
|
||||||
| interactive | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to render a `button` element instead of a `div` |
|
| interactive | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to render a `button` element instead of a `div` |
|
||||||
| skeleton | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state |
|
| skeleton | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state |
|
||||||
| title | No | <code>let</code> | No | <code>string</code> | <code>"Clear filter"</code> | Set the title for the close button in a filterable tag |
|
| title | No | <code>let</code> | No | <code>string</code> | <code>"Clear filter"</code> | Set the title for the close button in a filterable tag |
|
||||||
| icon | No | <code>let</code> | No | <code>any</code> | <code>undefined</code> | Specify the icon to render |
|
| icon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render |
|
||||||
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the filterable tag |
|
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the filterable tag |
|
||||||
|
|
||||||
### Slots
|
### Slots
|
||||||
|
|
||||||
| Slot name | Default | Props | Fallback |
|
| Slot name | Default | Props | Fallback |
|
||||||
| :-------- | :------ | :----------------------------------------------------- | :-------------------------------------------------- |
|
| :-------- | :------ | :----------------------------------------------------- | :---------------------------------------------------- |
|
||||||
| -- | Yes | <code>{ props: { class: "bx--tag\_\_label" } } </code> | -- |
|
| -- | Yes | <code>{ props: { class: 'bx--tag\_\_label' } } </code> | -- |
|
||||||
| icon | No | -- | <code><svelte:component this={icon} /></code> |
|
| icon | No | -- | <code><svelte:component this="{icon}" /></code> |
|
||||||
|
|
||||||
### Events
|
### Events
|
||||||
|
|
||||||
|
|
@ -4583,7 +4572,7 @@ None.
|
||||||
| align | No | <code>let</code> | No | <code>"start" | "center" | "end"</code> | <code>"center"</code> | Set the alignment of the tooltip relative to the icon |
|
| align | No | <code>let</code> | No | <code>"start" | "center" | "end"</code> | <code>"center"</code> | Set the alignment of the tooltip relative to the icon |
|
||||||
| direction | No | <code>let</code> | No | <code>"top" | "right" | "bottom" | "left"</code> | <code>"bottom"</code> | Set the direction of the tooltip relative to the button |
|
| direction | No | <code>let</code> | No | <code>"top" | "right" | "bottom" | "left"</code> | <code>"bottom"</code> | Set the direction of the tooltip relative to the button |
|
||||||
| hideIcon | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the tooltip icon |
|
| hideIcon | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the tooltip icon |
|
||||||
| icon | No | <code>let</code> | No | <code>any</code> | <code>undefined</code> | Specify the icon to render for the tooltip button.<br />Default to `<Information />` |
|
| icon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render for the tooltip button.<br />Default to `<Information />` |
|
||||||
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the ARIA label for the tooltip button |
|
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the ARIA label for the tooltip button |
|
||||||
| iconName | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the icon name attribute |
|
| iconName | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the icon name attribute |
|
||||||
| tabindex | No | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Set the button tabindex |
|
| tabindex | No | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Set the button tabindex |
|
||||||
|
|
@ -4593,11 +4582,11 @@ None.
|
||||||
|
|
||||||
### Slots
|
### Slots
|
||||||
|
|
||||||
| Slot name | Default | Props | Fallback |
|
| Slot name | Default | Props | Fallback |
|
||||||
| :---------- | :------ | :---- | :------------------------------------------------------------------ |
|
| :---------- | :------ | :---- | :---------------------------------------------------------------------- |
|
||||||
| -- | Yes | -- | -- |
|
| -- | Yes | -- | -- |
|
||||||
| icon | No | -- | <code><svelte:component this={icon} name={iconName} /></code> |
|
| icon | No | -- | <code><svelte:component this="{icon}" name="{iconName}" /></code> |
|
||||||
| triggerText | No | -- | <code>{triggerText}</code> |
|
| triggerText | No | -- | <code>{triggerText}</code> |
|
||||||
|
|
||||||
### Events
|
### Events
|
||||||
|
|
||||||
|
|
@ -4666,7 +4655,7 @@ None.
|
||||||
| :---------- | :------- | :--------------- | :------- | --------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------ |
|
| :---------- | :------- | :--------------- | :------- | --------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------ |
|
||||||
| ref | No | <code>let</code> | Yes | <code>null | HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the button HTML element |
|
| ref | No | <code>let</code> | Yes | <code>null | HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the button HTML element |
|
||||||
| tooltipText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the tooltip text.<br />Alternatively, use the "tooltipText" slot |
|
| tooltipText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the tooltip text.<br />Alternatively, use the "tooltipText" slot |
|
||||||
| icon | No | <code>let</code> | No | <code>any</code> | <code>undefined</code> | Specify the icon to render |
|
| icon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render |
|
||||||
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the tooltip icon |
|
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the tooltip icon |
|
||||||
| align | No | <code>let</code> | No | <code>"start" | "center" | "end"</code> | <code>"center"</code> | Set the alignment of the tooltip relative to the icon |
|
| align | No | <code>let</code> | No | <code>"start" | "center" | "end"</code> | <code>"center"</code> | Set the alignment of the tooltip relative to the icon |
|
||||||
| direction | No | <code>let</code> | No | <code>"top" | "right" | "bottom" | "left"</code> | <code>"bottom"</code> | Set the direction of the tooltip relative to the icon |
|
| direction | No | <code>let</code> | No | <code>"top" | "right" | "bottom" | "left"</code> | <code>"bottom"</code> | Set the direction of the tooltip relative to the icon |
|
||||||
|
|
@ -4674,10 +4663,10 @@ None.
|
||||||
|
|
||||||
### Slots
|
### Slots
|
||||||
|
|
||||||
| Slot name | Default | Props | Fallback |
|
| Slot name | Default | Props | Fallback |
|
||||||
| :---------- | :------ | :---- | :-------------------------------------------------- |
|
| :---------- | :------ | :---- | :---------------------------------------------------- |
|
||||||
| -- | Yes | -- | <code><svelte:component this={icon} /></code> |
|
| -- | Yes | -- | <code><svelte:component this="{icon}" /></code> |
|
||||||
| tooltipText | No | -- | <code>{tooltipText}</code> |
|
| tooltipText | No | -- | <code>{tooltipText}</code> |
|
||||||
|
|
||||||
### Events
|
### Events
|
||||||
|
|
||||||
|
|
@ -4699,28 +4688,28 @@ export type TreeNodeId = string | number;
|
||||||
export interface TreeNode {
|
export interface TreeNode {
|
||||||
id: TreeNodeId;
|
id: TreeNodeId;
|
||||||
text: any;
|
text: any;
|
||||||
icon?: any;
|
icon?: typeof import("svelte").SvelteComponent<any>;
|
||||||
disabled?: boolean;
|
disabled?: boolean;
|
||||||
nodes?: TreeNode[];
|
children?: TreeNode[];
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
### Props
|
### Props
|
||||||
|
|
||||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||||
| :------------ | :------- | :-------------------- | :------- | ------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
|
| :------------ | :------- | :-------------------- | :------- | ------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
|
||||||
| expandedIds | No | <code>let</code> | Yes | <code>ReadonlyArray<TreeNodeId></code> | <code>[]</code> | Set the node ids to be expanded |
|
| expandedIds | No | <code>let</code> | Yes | <code>ReadonlyArray<TreeNodeId></code> | <code>[]</code> | Set the node ids to be expanded |
|
||||||
| selectedIds | No | <code>let</code> | Yes | <code>ReadonlyArray<TreeNodeId></code> | <code>[]</code> | Set the node ids to be selected |
|
| selectedIds | No | <code>let</code> | Yes | <code>ReadonlyArray<TreeNodeId></code> | <code>[]</code> | Set the node ids to be selected |
|
||||||
| activeId | No | <code>let</code> | Yes | <code>TreeNodeId</code> | <code>""</code> | Set the current active node id<br />Only one node can be active |
|
| activeId | No | <code>let</code> | Yes | <code>TreeNodeId</code> | <code>""</code> | Set the current active node id<br />Only one node can be active |
|
||||||
| nodes | No | <code>let</code> | No | <code>Array<TreeNode></code> | <code>[]</code> | Provide an array of nodes to render |
|
| children | No | <code>let</code> | No | <code>Array<TreeNode></code> | <code>[]</code> | Provide an array of children nodes to render |
|
||||||
| size | No | <code>let</code> | No | <code>"default" | "compact"</code> | <code>"default"</code> | Specify the TreeView size |
|
| size | No | <code>let</code> | No | <code>"default" | "compact"</code> | <code>"default"</code> | Specify the TreeView size |
|
||||||
| labelText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |
|
| labelText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |
|
||||||
| hideLabel | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text |
|
| hideLabel | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text |
|
||||||
| expandAll | No | <code>function</code> | No | <code>() => void</code> | <code>() => { expandedIds = [...nodeIds]; }</code> | Programmatically expand all nodes |
|
| expandAll | No | <code>function</code> | No | <code>() => void</code> | <code>() => { expandedIds = [...nodeIds]; }</code> | Programmatically expand all nodes |
|
||||||
| collapseAll | No | <code>function</code> | No | <code>() => void</code> | <code>() => { expandedIds = []; }</code> | Programmatically collapse all nodes |
|
| collapseAll | No | <code>function</code> | No | <code>() => void</code> | <code>() => { expandedIds = []; }</code> | Programmatically collapse all nodes |
|
||||||
| expandNodes | No | <code>function</code> | No | <code>(filterId?: (node: TreeNode) => boolean) => void</code> | <code>() => { expandedIds = flattenedNodes .filter( (node) => filterNode(node) || node.nodes?.some((child) => filterNode(child) && child.nodes), ) .map((node) => node.id); }</code> | Programmatically expand a subset of nodes.<br />Expands all nodes if no argument is provided |
|
| expandNodes | No | <code>function</code> | No | <code>(filterId?: (node: TreeNode) => boolean) => void</code> | <code>() => { expandedIds = nodes .filter( (node) => filterNode(node) || node.children?.some((child) => filterNode(child) && child.children) ) .map((node) => node.id); }</code> | Programmatically expand a subset of nodes.<br />Expands all nodes if no argument is provided |
|
||||||
| collapseNodes | No | <code>function</code> | No | <code>(filterId?: (node: TreeNode) => boolean) => void</code> | <code>() => { expandedIds = flattenedNodes .filter((node) => expandedIds.includes(node.id) && !filterNode(node)) .map((node) => node.id); }</code> | Programmatically collapse a subset of nodes.<br />Collapses all nodes if no argument is provided |
|
| collapseNodes | No | <code>function</code> | No | <code>(filterId?: (node: TreeNode) => boolean) => void</code> | <code>() => { expandedIds = nodes .filter((node) => expandedIds.includes(node.id) && !filterNode(node)) .map((node) => node.id); }</code> | Programmatically collapse a subset of nodes.<br />Collapses all nodes if no argument is provided |
|
||||||
| showNode | No | <code>function</code> | No | <code>(id: TreeNodeId) => void</code> | <code>() => { for (const child of nodes) { const nodes = findNodeById(child, id); if (nodes) { const ids = nodes.map((node) => node.id); const nodeIds = new Set(ids); expandNodes((node) => nodeIds.has(node.id)); const lastId = ids[ids.length - 1]; activeId = lastId; selectedIds = [lastId]; tick().then(() => { ref?.querySelector(\`[id="${lastId}"]\`)?.focus(); }); break; } } }</code> | Programmatically show a node by `id`.<br />The matching node will be expanded, selected, and focused |
|
| showNode | No | <code>function</code> | No | <code>(id: TreeNodeId) => void</code> | <code>() => { for (const child of children) { const nodes = findNodeById(child, id); if (nodes) { const ids = nodes.map((node) => node.id); const nodeIds = new Set(ids); expandNodes((node) => nodeIds.has(node.id)); const lastId = ids[ids.length - 1]; activeId = lastId; selectedIds = [lastId]; tick().then(() => { ref?.querySelector(\`[id="${lastId}"]\`)?.focus(); }); // Break out of the loop if the node is found. break; } } }</code> | Programmatically show a node by `id`.<br />The matching node will be expanded, selected, and focused |
|
||||||
|
|
||||||
### Slots
|
### Slots
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -13,9 +13,9 @@ 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/carbon-design-system/carbon-icons-svelte)**: 2,400+ 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/carbon-design-system/carbon-pictograms-svelte)**: 1,100+ 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)**: 20+ charts, powered by d3
|
||||||
- **[Carbon Preprocess Svelte](https://github.com/carbon-design-system/carbon-preprocess-svelte)**: Collection of Svelte preprocessors for Carbon
|
- **[Carbon Preprocess Svelte](https://github.com/carbon-design-system/carbon-preprocess-svelte)**: Collection of Svelte preprocessors for Carbon
|
||||||
|
|
||||||
## [Documentation](https://svelte.carbondesignsystem.com)
|
## [Documentation](https://svelte.carbondesignsystem.com)
|
||||||
|
|
@ -105,7 +105,7 @@ import "carbon-components-svelte/css/all.css";
|
||||||
Update the theme by setting the `theme` attribute on the `html` element. The default `theme` is `"white"`.
|
Update the theme by setting the `theme` attribute on the `html` element. The default `theme` is `"white"`.
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html lang="en" theme="g10">
|
<html lang="en" theme="g10">
|
||||||
<body>
|
<body>
|
||||||
...
|
...
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,6 @@
|
||||||
<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" />
|
<meta name="description" content="Svelte implementation of the Carbon Design System" />
|
||||||
<title>Carbon Components Svelte</title>
|
<title>Carbon Components Svelte</title>
|
||||||
|
|
@ -20,6 +19,40 @@
|
||||||
}
|
}
|
||||||
} catch (e) {}
|
} catch (e) {}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<!-- 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"
|
||||||
|
async
|
||||||
|
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"
|
||||||
|
async
|
||||||
|
></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<script type="module" src="/src/index.js"></script>
|
<script type="module" src="/src/index.js"></script>
|
||||||
|
|
|
||||||
208
docs/package-lock.json
generated
208
docs/package-lock.json
generated
|
|
@ -8,7 +8,7 @@
|
||||||
"@sveltech/routify": "^1.9.10",
|
"@sveltech/routify": "^1.9.10",
|
||||||
"@sveltejs/vite-plugin-svelte": "^3.1.2",
|
"@sveltejs/vite-plugin-svelte": "^3.1.2",
|
||||||
"carbon-components-svelte": "file:..",
|
"carbon-components-svelte": "file:..",
|
||||||
"carbon-icons-svelte": "^13.3.0",
|
"carbon-icons-svelte": "^12.13.0",
|
||||||
"clipboard-copy": "^4.0.1",
|
"clipboard-copy": "^4.0.1",
|
||||||
"cross-env": "^7.0.3",
|
"cross-env": "^7.0.3",
|
||||||
"mdsvex": "^0.12.3",
|
"mdsvex": "^0.12.3",
|
||||||
|
|
@ -17,15 +17,14 @@
|
||||||
"prettier": "^2.8.8",
|
"prettier": "^2.8.8",
|
||||||
"prettier-plugin-svelte": "^2.10.1",
|
"prettier-plugin-svelte": "^2.10.1",
|
||||||
"prism-svelte": "^0.5.0",
|
"prism-svelte": "^0.5.0",
|
||||||
"prismjs": "^1.30.0",
|
"prismjs": "^1.29.0",
|
||||||
"remark-slug": "^6.1.0",
|
"remark-slug": "^6.1.0",
|
||||||
"svelte": "^4.2.19",
|
"svelte": "^4.2.19",
|
||||||
"vite": "^5.4.19"
|
"vite": "^5.4.9"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"..": {
|
"..": {
|
||||||
"name": "carbon-components-svelte",
|
"version": "0.85.3",
|
||||||
"version": "0.89.4",
|
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"hasInstallScript": true,
|
"hasInstallScript": true,
|
||||||
"license": "Apache-2.0",
|
"license": "Apache-2.0",
|
||||||
|
|
@ -34,27 +33,23 @@
|
||||||
"flatpickr": "4.6.9"
|
"flatpickr": "4.6.9"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@sveltejs/vite-plugin-svelte": "^3.1.2",
|
"@rollup/plugin-commonjs": "^21.0.3",
|
||||||
"@testing-library/jest-dom": "^6.6.3",
|
"@rollup/plugin-node-resolve": "^13.3.0",
|
||||||
"@testing-library/svelte": "^5.2.8",
|
"autoprefixer": "^10.4.8",
|
||||||
"@testing-library/user-event": "^14.6.1",
|
|
||||||
"autoprefixer": "^10.4.21",
|
|
||||||
"carbon-components": "10.58.12",
|
"carbon-components": "10.58.12",
|
||||||
"carbon-icons-svelte": "^13.4.0",
|
"carbon-icons-svelte": "^12.1.0",
|
||||||
"carbon-preprocess-svelte": "^0.11.11",
|
"postcss": "^8.4.16",
|
||||||
"culls": "^0.1.1",
|
"prettier": "^2.7.1",
|
||||||
"jsdom": "^26.1.0",
|
"prettier-plugin-svelte": "^2.7.0",
|
||||||
"postcss": "^8.5.5",
|
"rollup": "^2.78.1",
|
||||||
"prettier": "^3.5.3",
|
"rollup-plugin-svelte": "^7.1.0",
|
||||||
"prettier-plugin-svelte": "^3.4.0",
|
"rollup-plugin-terser": "^7.0.2",
|
||||||
"sass": "^1.49.11",
|
"sass": "^1.49.11",
|
||||||
"standard-version": "^9.5.0",
|
"standard-version": "^9.5.0",
|
||||||
"sveld": "^0.22.1",
|
"sveld": "^0.20.3",
|
||||||
"svelte": "^4.2.20",
|
"svelte": "^4.2.10",
|
||||||
"svelte-check": "^4.2.1",
|
"svelte-check": "^3.8.6",
|
||||||
"tinyglobby": "^0.2.14",
|
"typescript": "^5.6.3"
|
||||||
"typescript": "^5.8.3",
|
|
||||||
"vitest": "^3.2.3"
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@ampproject/remapping": {
|
"node_modules/@ampproject/remapping": {
|
||||||
|
|
@ -1035,28 +1030,14 @@
|
||||||
"url": "https://github.com/sponsors/ljharb"
|
"url": "https://github.com/sponsors/ljharb"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/call-bind-apply-helpers": {
|
|
||||||
"version": "1.0.2",
|
|
||||||
"resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
|
|
||||||
"integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
|
|
||||||
"dev": true,
|
|
||||||
"license": "MIT",
|
|
||||||
"dependencies": {
|
|
||||||
"es-errors": "^1.3.0",
|
|
||||||
"function-bind": "^1.1.2"
|
|
||||||
},
|
|
||||||
"engines": {
|
|
||||||
"node": ">= 0.4"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/carbon-components-svelte": {
|
"node_modules/carbon-components-svelte": {
|
||||||
"resolved": "..",
|
"resolved": "..",
|
||||||
"link": true
|
"link": true
|
||||||
},
|
},
|
||||||
"node_modules/carbon-icons-svelte": {
|
"node_modules/carbon-icons-svelte": {
|
||||||
"version": "13.3.0",
|
"version": "12.13.0",
|
||||||
"resolved": "https://registry.npmjs.org/carbon-icons-svelte/-/carbon-icons-svelte-13.3.0.tgz",
|
"resolved": "https://registry.npmjs.org/carbon-icons-svelte/-/carbon-icons-svelte-12.13.0.tgz",
|
||||||
"integrity": "sha512-pwOVRMYyct0KyzLPCwB7BdeO50lo3I3FclasSPgJiADm49YjYClewHnBsQOM2luu2JCLTdBnadtbVvWSpv+k+Q==",
|
"integrity": "sha512-Tkp5Aa34GgAIQ5XSpD0JIKZTqiTUgtIt43SZxXuSDYvQjQ+HQVKNgYiDZ3oAA5etdcGT4O8+vDsVdGeL90Eezg==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"node_modules/chalk": {
|
"node_modules/chalk": {
|
||||||
|
|
@ -1190,9 +1171,9 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/cross-spawn": {
|
"node_modules/cross-spawn": {
|
||||||
"version": "7.0.6",
|
"version": "7.0.3",
|
||||||
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
|
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
|
||||||
"integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
|
"integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"path-key": "^3.1.0",
|
"path-key": "^3.1.0",
|
||||||
|
|
@ -1411,21 +1392,6 @@
|
||||||
"node": ">=10"
|
"node": ">=10"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/dunder-proto": {
|
|
||||||
"version": "1.0.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
|
|
||||||
"integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
|
|
||||||
"dev": true,
|
|
||||||
"license": "MIT",
|
|
||||||
"dependencies": {
|
|
||||||
"call-bind-apply-helpers": "^1.0.1",
|
|
||||||
"es-errors": "^1.3.0",
|
|
||||||
"gopd": "^1.2.0"
|
|
||||||
},
|
|
||||||
"engines": {
|
|
||||||
"node": ">= 0.4"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/error-ex": {
|
"node_modules/error-ex": {
|
||||||
"version": "1.3.2",
|
"version": "1.3.2",
|
||||||
"resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
|
"resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
|
||||||
|
|
@ -1496,11 +1462,13 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/es-define-property": {
|
"node_modules/es-define-property": {
|
||||||
"version": "1.0.1",
|
"version": "1.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz",
|
||||||
"integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
|
"integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"dependencies": {
|
||||||
|
"get-intrinsic": "^1.2.4"
|
||||||
|
},
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">= 0.4"
|
"node": ">= 0.4"
|
||||||
}
|
}
|
||||||
|
|
@ -1515,11 +1483,10 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/es-object-atoms": {
|
"node_modules/es-object-atoms": {
|
||||||
"version": "1.1.1",
|
"version": "1.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
|
"resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.0.0.tgz",
|
||||||
"integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
|
"integrity": "sha512-MZ4iQ6JwHOBQjahnjwaC1ZtIBH+2ohjamzAO3oaHcXYup7qxjF2fixyH+Q71voWHeOkI2q/TnJao/KfXYIZWbw==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"es-errors": "^1.3.0"
|
"es-errors": "^1.3.0"
|
||||||
},
|
},
|
||||||
|
|
@ -1528,16 +1495,14 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/es-set-tostringtag": {
|
"node_modules/es-set-tostringtag": {
|
||||||
"version": "2.1.0",
|
"version": "2.0.3",
|
||||||
"resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.3.tgz",
|
||||||
"integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
|
"integrity": "sha512-3T8uNMC3OQTHkFUsFq8r/BwAXLHvU/9O9mE0fBc/MY5iq/8H7ncvO947LmYA6ldWw9Uh8Yhf25zu6n7nML5QWQ==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"es-errors": "^1.3.0",
|
"get-intrinsic": "^1.2.4",
|
||||||
"get-intrinsic": "^1.2.6",
|
|
||||||
"has-tostringtag": "^1.0.2",
|
"has-tostringtag": "^1.0.2",
|
||||||
"hasown": "^2.0.2"
|
"hasown": "^2.0.1"
|
||||||
},
|
},
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">= 0.4"
|
"node": ">= 0.4"
|
||||||
|
|
@ -1684,17 +1649,14 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/form-data": {
|
"node_modules/form-data": {
|
||||||
"version": "3.0.4",
|
"version": "3.0.2",
|
||||||
"resolved": "https://registry.npmjs.org/form-data/-/form-data-3.0.4.tgz",
|
"resolved": "https://registry.npmjs.org/form-data/-/form-data-3.0.2.tgz",
|
||||||
"integrity": "sha512-f0cRzm6dkyVYV3nPoooP8XlccPQukegwhAnpoLcXy+X+A8KfpGOoXwDr9FLZd3wzgLaBGQBE3lY93Zm/i1JvIQ==",
|
"integrity": "sha512-sJe+TQb2vIaIyO783qN6BlMYWMw3WBOHA1Ay2qxsnjuafEOQFJ2JakedOQirT6D5XPRxDvS7AHYyem9fTpb4LQ==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"asynckit": "^0.4.0",
|
"asynckit": "^0.4.0",
|
||||||
"combined-stream": "^1.0.8",
|
"combined-stream": "^1.0.8",
|
||||||
"es-set-tostringtag": "^2.1.0",
|
"mime-types": "^2.1.12"
|
||||||
"hasown": "^2.0.2",
|
|
||||||
"mime-types": "^2.1.35"
|
|
||||||
},
|
},
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">= 6"
|
"node": ">= 6"
|
||||||
|
|
@ -1766,22 +1728,16 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/get-intrinsic": {
|
"node_modules/get-intrinsic": {
|
||||||
"version": "1.3.0",
|
"version": "1.2.4",
|
||||||
"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
|
"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
|
||||||
"integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
|
"integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"call-bind-apply-helpers": "^1.0.2",
|
|
||||||
"es-define-property": "^1.0.1",
|
|
||||||
"es-errors": "^1.3.0",
|
"es-errors": "^1.3.0",
|
||||||
"es-object-atoms": "^1.1.1",
|
|
||||||
"function-bind": "^1.1.2",
|
"function-bind": "^1.1.2",
|
||||||
"get-proto": "^1.0.1",
|
"has-proto": "^1.0.1",
|
||||||
"gopd": "^1.2.0",
|
"has-symbols": "^1.0.3",
|
||||||
"has-symbols": "^1.1.0",
|
"hasown": "^2.0.0"
|
||||||
"hasown": "^2.0.2",
|
|
||||||
"math-intrinsics": "^1.1.0"
|
|
||||||
},
|
},
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">= 0.4"
|
"node": ">= 0.4"
|
||||||
|
|
@ -1790,20 +1746,6 @@
|
||||||
"url": "https://github.com/sponsors/ljharb"
|
"url": "https://github.com/sponsors/ljharb"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/get-proto": {
|
|
||||||
"version": "1.0.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
|
|
||||||
"integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
|
|
||||||
"dev": true,
|
|
||||||
"license": "MIT",
|
|
||||||
"dependencies": {
|
|
||||||
"dunder-proto": "^1.0.1",
|
|
||||||
"es-object-atoms": "^1.0.0"
|
|
||||||
},
|
|
||||||
"engines": {
|
|
||||||
"node": ">= 0.4"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/get-symbol-description": {
|
"node_modules/get-symbol-description": {
|
||||||
"version": "1.0.2",
|
"version": "1.0.2",
|
||||||
"resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.2.tgz",
|
||||||
|
|
@ -1844,13 +1786,12 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/gopd": {
|
"node_modules/gopd": {
|
||||||
"version": "1.2.0",
|
"version": "1.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
|
"resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
|
||||||
"integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
|
"integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"dependencies": {
|
||||||
"engines": {
|
"get-intrinsic": "^1.1.3"
|
||||||
"node": ">= 0.4"
|
|
||||||
},
|
},
|
||||||
"funding": {
|
"funding": {
|
||||||
"url": "https://github.com/sponsors/ljharb"
|
"url": "https://github.com/sponsors/ljharb"
|
||||||
|
|
@ -1905,11 +1846,10 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/has-symbols": {
|
"node_modules/has-symbols": {
|
||||||
"version": "1.1.0",
|
"version": "1.0.3",
|
||||||
"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
|
||||||
"integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
|
"integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">= 0.4"
|
"node": ">= 0.4"
|
||||||
},
|
},
|
||||||
|
|
@ -2472,16 +2412,6 @@
|
||||||
"@jridgewell/sourcemap-codec": "^1.5.0"
|
"@jridgewell/sourcemap-codec": "^1.5.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/math-intrinsics": {
|
|
||||||
"version": "1.1.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
|
|
||||||
"integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
|
|
||||||
"dev": true,
|
|
||||||
"license": "MIT",
|
|
||||||
"engines": {
|
|
||||||
"node": ">= 0.4"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/mdast-util-to-string": {
|
"node_modules/mdast-util-to-string": {
|
||||||
"version": "1.1.0",
|
"version": "1.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-1.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-1.1.0.tgz",
|
||||||
|
|
@ -2574,9 +2504,9 @@
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"node_modules/nanoid": {
|
"node_modules/nanoid": {
|
||||||
"version": "3.3.8",
|
"version": "3.3.7",
|
||||||
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz",
|
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
|
||||||
"integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==",
|
"integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"funding": [
|
"funding": [
|
||||||
{
|
{
|
||||||
|
|
@ -2729,9 +2659,9 @@
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"node_modules/npm-run-all/node_modules/cross-spawn": {
|
"node_modules/npm-run-all/node_modules/cross-spawn": {
|
||||||
"version": "6.0.6",
|
"version": "6.0.5",
|
||||||
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.6.tgz",
|
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
|
||||||
"integrity": "sha512-VqCUuhcd1iB+dsv8gxPttb5iZh/D0iubSP21g36KXdEuf6I5JiioesUVjpCdHV9MZRUfVFlvwtIUyPfxo5trtw==",
|
"integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"nice-try": "^1.0.4",
|
"nice-try": "^1.0.4",
|
||||||
|
|
@ -3026,11 +2956,10 @@
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"node_modules/prismjs": {
|
"node_modules/prismjs": {
|
||||||
"version": "1.30.0",
|
"version": "1.29.0",
|
||||||
"resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.30.0.tgz",
|
"resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz",
|
||||||
"integrity": "sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==",
|
"integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=6"
|
"node": ">=6"
|
||||||
}
|
}
|
||||||
|
|
@ -3774,11 +3703,10 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/vite": {
|
"node_modules/vite": {
|
||||||
"version": "5.4.19",
|
"version": "5.4.9",
|
||||||
"resolved": "https://registry.npmjs.org/vite/-/vite-5.4.19.tgz",
|
"resolved": "https://registry.npmjs.org/vite/-/vite-5.4.9.tgz",
|
||||||
"integrity": "sha512-qO3aKv3HoQC8QKiNSTuUM1l9o/XX3+c+VTgLHbJWHZGeTPVAg2XwazI9UWzoxjIJCGCV2zU60uqMzjeLZuULqA==",
|
"integrity": "sha512-20OVpJHh0PAM0oSOELa5GaZNWeDjcAvQjGXy2Uyr+Tp+/D2/Hdz6NLgpJLsarPTA2QJ6v8mX2P1ZfbsSKvdMkg==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"esbuild": "^0.21.3",
|
"esbuild": "^0.21.3",
|
||||||
"postcss": "^8.4.43",
|
"postcss": "^8.4.43",
|
||||||
|
|
|
||||||
|
|
@ -13,7 +13,7 @@
|
||||||
"@sveltech/routify": "^1.9.10",
|
"@sveltech/routify": "^1.9.10",
|
||||||
"@sveltejs/vite-plugin-svelte": "^3.1.2",
|
"@sveltejs/vite-plugin-svelte": "^3.1.2",
|
||||||
"carbon-components-svelte": "file:..",
|
"carbon-components-svelte": "file:..",
|
||||||
"carbon-icons-svelte": "^13.3.0",
|
"carbon-icons-svelte": "^12.13.0",
|
||||||
"clipboard-copy": "^4.0.1",
|
"clipboard-copy": "^4.0.1",
|
||||||
"cross-env": "^7.0.3",
|
"cross-env": "^7.0.3",
|
||||||
"mdsvex": "^0.12.3",
|
"mdsvex": "^0.12.3",
|
||||||
|
|
@ -22,10 +22,10 @@
|
||||||
"prettier": "^2.8.8",
|
"prettier": "^2.8.8",
|
||||||
"prettier-plugin-svelte": "^2.10.1",
|
"prettier-plugin-svelte": "^2.10.1",
|
||||||
"prism-svelte": "^0.5.0",
|
"prism-svelte": "^0.5.0",
|
||||||
"prismjs": "^1.30.0",
|
"prismjs": "^1.29.0",
|
||||||
"remark-slug": "^6.1.0",
|
"remark-slug": "^6.1.0",
|
||||||
"svelte": "^4.2.19",
|
"svelte": "^4.2.19",
|
||||||
"vite": "^5.4.19"
|
"vite": "^5.4.9"
|
||||||
},
|
},
|
||||||
"routify": {
|
"routify": {
|
||||||
"routifyDir": ".routify",
|
"routifyDir": ".routify",
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
// @ts-check
|
// @ts-check
|
||||||
import fs from "node:fs";
|
import fs from "fs";
|
||||||
import path from "node:path";
|
import path from "path";
|
||||||
import githubSlugger from "github-slugger";
|
import githubSlugger from "github-slugger";
|
||||||
|
|
||||||
const { slug } = githubSlugger;
|
const { slug } = githubSlugger;
|
||||||
|
|
|
||||||
|
|
@ -3,4 +3,4 @@
|
||||||
import { routes } from "../.routify/routes";
|
import { routes } from "../.routify/routes";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Router {routes} />
|
<Router routes="{routes}" />
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load diff
|
|
@ -7,7 +7,6 @@
|
||||||
typedefs: [],
|
typedefs: [],
|
||||||
};
|
};
|
||||||
|
|
||||||
import { onMount } from "svelte";
|
|
||||||
import {
|
import {
|
||||||
OutboundLink,
|
OutboundLink,
|
||||||
StructuredList,
|
StructuredList,
|
||||||
|
|
@ -18,16 +17,10 @@
|
||||||
UnorderedList,
|
UnorderedList,
|
||||||
ListItem,
|
ListItem,
|
||||||
Tag,
|
Tag,
|
||||||
|
CodeSnippet,
|
||||||
} from "carbon-components-svelte";
|
} from "carbon-components-svelte";
|
||||||
import InlineSnippet from "./InlineSnippet.svelte";
|
import InlineSnippet from "./InlineSnippet.svelte";
|
||||||
|
|
||||||
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 = {
|
||||||
string: "string",
|
string: "string",
|
||||||
|
|
@ -39,16 +32,16 @@
|
||||||
|
|
||||||
$: source = `https://github.com/carbon-design-system/carbon-components-svelte/tree/master/${component.filePath}`;
|
$: source = `https://github.com/carbon-design-system/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:
|
Source code:
|
||||||
<OutboundLink size="lg" inline href={source}>
|
<OutboundLink size="lg" inline href="{source}">
|
||||||
{component.filePath}
|
{component.filePath}
|
||||||
</OutboundLink>
|
</OutboundLink>
|
||||||
</p>
|
</p>
|
||||||
|
|
@ -62,26 +55,17 @@
|
||||||
<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); margin-bottom: var(--cds-spacing-{prop.isRequired
|
||||||
|
|
@ -111,29 +95,18 @@
|
||||||
{type}
|
{type}
|
||||||
</OutboundLink>
|
</OutboundLink>
|
||||||
{:else if type in typeMap}
|
{:else if type in typeMap}
|
||||||
<div
|
<code class="code-01">{typeMap[type]}</code>
|
||||||
style="display: inline-flex; max-width: 220px; word-break: break-word;"
|
{:else if type.startsWith("(")}
|
||||||
>
|
<code class="code-01">{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 class="code-01">{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 +117,9 @@
|
||||||
.replace(/`(.*?)`/g, "<code>$1</code>")}.
|
.replace(/`(.*?)`/g, "<code>$1</code>")}.
|
||||||
</div>
|
</div>
|
||||||
{/each}
|
{/each}
|
||||||
|
{:else}
|
||||||
|
<div class="description">No description available.</div>
|
||||||
{/if}
|
{/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}
|
|
||||||
<svelte:component
|
|
||||||
this={AsyncPreviewTypeScript}
|
|
||||||
type={/\n/.test(prop.value) ? "multi" : "inline"}
|
|
||||||
code={prop.value}
|
|
||||||
/>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
</StructuredListCell>
|
</StructuredListCell>
|
||||||
</StructuredListRow>
|
</StructuredListRow>
|
||||||
{/each}
|
{/each}
|
||||||
|
|
@ -178,42 +133,23 @@
|
||||||
<h2 id="typedefs">Typedefs</h2>
|
<h2 id="typedefs">Typedefs</h2>
|
||||||
|
|
||||||
{#if component.typedefs.length > 0}
|
{#if component.typedefs.length > 0}
|
||||||
<div class="my-layout-01-03">
|
<CodeSnippet
|
||||||
<svelte:component
|
style="margin-top: var(--cds-spacing-08)"
|
||||||
this={AsyncPreviewTypeScript}
|
class="my-layout-01-03"
|
||||||
code={component.typedefs.map((t) => t.ts).join("\n")}
|
type="multi"
|
||||||
/>
|
code="{component.typedefs.map((t) => t.ts).join(';\n\n')};"
|
||||||
</div>
|
/>
|
||||||
{:else}
|
{:else}
|
||||||
<p class="my-layout-01-03">No typedefs.</p>
|
<p class="my-layout-01-03">No typedefs.</p>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<h2 id="slots">Slots</h2>
|
<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>
|
{#each component.slots as slot (slot.name)}
|
||||||
<StructuredListRow>
|
<ListItem>{slot.default ? "default" : slot.name}</ListItem>
|
||||||
<StructuredListCell>Slot name</StructuredListCell>
|
{/each}
|
||||||
<StructuredListCell>Slot detail</StructuredListCell>
|
</UnorderedList>
|
||||||
</StructuredListRow>
|
|
||||||
</StructuredListHead>
|
|
||||||
<StructuredListBody>
|
|
||||||
{#each component.slots as slot (slot.name)}
|
|
||||||
<StructuredListRow>
|
|
||||||
<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}
|
|
||||||
</StructuredListBody>
|
|
||||||
</StructuredList>
|
|
||||||
{:else}
|
{:else}
|
||||||
<p class="my-layout-01-03">No slots.</p>
|
<p class="my-layout-01-03">No slots.</p>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
@ -237,7 +173,7 @@
|
||||||
<StructuredListHead>
|
<StructuredListHead>
|
||||||
<StructuredListRow>
|
<StructuredListRow>
|
||||||
<StructuredListCell>Event name</StructuredListCell>
|
<StructuredListCell>Event name</StructuredListCell>
|
||||||
<StructuredListCell>Event detail</StructuredListCell>
|
<StructuredListCell><code>event.detail</code> type</StructuredListCell>
|
||||||
{#if hasDescription}
|
{#if hasDescription}
|
||||||
<StructuredListCell>Description</StructuredListCell>
|
<StructuredListCell>Description</StructuredListCell>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
@ -250,11 +186,7 @@
|
||||||
<strong>on:{event.name}</strong>
|
<strong>on:{event.name}</strong>
|
||||||
</StructuredListCell>
|
</StructuredListCell>
|
||||||
<StructuredListCell>
|
<StructuredListCell>
|
||||||
<svelte:component
|
<code>{event.detail}</code>
|
||||||
this={AsyncPreviewTypeScript}
|
|
||||||
type={/\n/.test(event.detail) ? "multi" : "inline"}
|
|
||||||
code={event.detail}
|
|
||||||
/>
|
|
||||||
</StructuredListCell>
|
</StructuredListCell>
|
||||||
<StructuredListCell>
|
<StructuredListCell>
|
||||||
{event.description ?? ""}
|
{event.description ?? ""}
|
||||||
|
|
@ -285,7 +217,6 @@
|
||||||
<style>
|
<style>
|
||||||
.description {
|
.description {
|
||||||
margin-bottom: var(--cds-spacing-04);
|
margin-bottom: var(--cds-spacing-04);
|
||||||
width: 80%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.cell {
|
.cell {
|
||||||
|
|
@ -313,11 +244,7 @@
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(
|
:global(.cell .bx--snippet--inline code, .bx--snippet--single pre) {
|
||||||
.cell .bx--snippet--inline code,
|
|
||||||
.cell .bx--snippet--single pre,
|
|
||||||
.bx--snippet--inline code
|
|
||||||
) {
|
|
||||||
white-space: pre-wrap !important;
|
white-space: pre-wrap !important;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<CodeSnippet {code} type="inline" copy={(text) => copy(text)} />
|
<CodeSnippet code="{code}" type="inline" copy="{(text) => copy(text)}" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|
|
||||||
|
|
@ -26,8 +26,8 @@
|
||||||
kind="ghost"
|
kind="ghost"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
size="field"
|
size="field"
|
||||||
href={themedSrcUrl}
|
href="{themedSrcUrl}"
|
||||||
icon={Launch}
|
icon="{Launch}"
|
||||||
>
|
>
|
||||||
Open in new tab
|
Open in new tab
|
||||||
</Button>
|
</Button>
|
||||||
|
|
@ -35,14 +35,13 @@
|
||||||
{/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}" copy="{(text) => copy(text)}">
|
||||||
{@html code}
|
{@html code}
|
||||||
</CodeSnippet>
|
</CodeSnippet>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -53,7 +52,7 @@
|
||||||
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: 66rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.code-override {
|
.code-override {
|
||||||
|
|
@ -75,12 +74,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}
|
|
||||||
|
|
@ -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,11 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="card-footer">
|
<div class="card-footer">
|
||||||
<svelte:component
|
<svelte:component
|
||||||
this={LogoGithub}
|
this="{LogoGithub}"
|
||||||
size={32}
|
size="{32}"
|
||||||
style="fill: var(--cds-icon-01)"
|
style="fill: var(--cds-icon-01)"
|
||||||
/>
|
/>
|
||||||
<Launch size={20} style="fill: var(--cds-icon-01)" />
|
<Launch size="{20}" style="fill: var(--cds-icon-01)" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</svelte:component>
|
</svelte:component>
|
||||||
|
|
|
||||||
|
|
@ -2,19 +2,12 @@ html[theme="g90"] .code-override {
|
||||||
border: 1px solid var(--cds-ui-03);
|
border: 1px solid var(--cds-ui-03);
|
||||||
}
|
}
|
||||||
|
|
||||||
.prose > pre,
|
|
||||||
.code-override .bx--snippet {
|
.code-override .bx--snippet {
|
||||||
/** Docs code snippet is always dark mode */
|
/** Docs code snippet is always dark mode */
|
||||||
color-scheme: dark;
|
color-scheme: dark;
|
||||||
max-width: none;
|
max-width: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.prose > pre {
|
|
||||||
padding: 1rem;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.prose > pre,
|
|
||||||
.code-override .bx--copy-btn,
|
.code-override .bx--copy-btn,
|
||||||
.code-override .bx--snippet,
|
.code-override .bx--snippet,
|
||||||
.code-override button.bx--btn.bx--snippet-btn--expand {
|
.code-override button.bx--btn.bx--snippet-btn--expand {
|
||||||
|
|
@ -31,7 +24,6 @@ html[theme="g90"] .code-override {
|
||||||
fill: #f4f4f4;
|
fill: #f4f4f4;
|
||||||
}
|
}
|
||||||
|
|
||||||
.prose > pre,
|
|
||||||
.code-override .bx--snippet-container pre {
|
.code-override .bx--snippet-container pre {
|
||||||
font-size: var(--cds-code-02-font-size);
|
font-size: var(--cds-code-02-font-size);
|
||||||
line-height: var(--cds-code-02-line-height);
|
line-height: var(--cds-code-02-line-height);
|
||||||
|
|
@ -53,18 +45,6 @@ html[theme="g90"] .code-override {
|
||||||
color: #6ea6ff;
|
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 {
|
.token.attr-name {
|
||||||
color: #3ddbd9; /* teal 30 */
|
color: #3ddbd9; /* teal 30 */
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -29,7 +29,7 @@
|
||||||
|
|
||||||
// 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;
|
||||||
|
|
||||||
|
|
@ -62,7 +62,7 @@
|
||||||
|
|
||||||
// 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/carbon-design-system/carbon-components-svelte/tree/master/${formatSourceURL(
|
||||||
multiple,
|
multiple
|
||||||
)}`;
|
)}`;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
@ -83,7 +83,7 @@
|
||||||
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" />
|
||||||
|
|
@ -95,8 +95,8 @@
|
||||||
kind="ghost"
|
kind="ghost"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
size="field"
|
size="field"
|
||||||
href={sourceCode}
|
href="{sourceCode}"
|
||||||
icon={Code}
|
icon="{Code}"
|
||||||
>
|
>
|
||||||
Source code
|
Source code
|
||||||
</Button>
|
</Button>
|
||||||
|
|
@ -144,28 +144,28 @@
|
||||||
</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>Examples</h5>
|
||||||
<slot name="aside" />
|
<slot name="aside" />
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -52,7 +52,7 @@
|
||||||
|
|
||||||
$: isMobile = innerWidth < 1056;
|
$: isMobile = innerWidth < 1056;
|
||||||
$: components = $layout.children.filter(
|
$: components = $layout.children.filter(
|
||||||
(child) => child.title === "components",
|
(child) => child.title === "components"
|
||||||
)[0];
|
)[0];
|
||||||
|
|
||||||
$beforeUrlChange(() => {
|
$beforeUrlChange(() => {
|
||||||
|
|
@ -65,7 +65,7 @@
|
||||||
<svelte:window bind:innerWidth />
|
<svelte:window bind:innerWidth />
|
||||||
|
|
||||||
<svelte:body
|
<svelte:body
|
||||||
on:keydown={(e) => {
|
on:keydown="{(e) => {
|
||||||
if (active) return;
|
if (active) return;
|
||||||
if (
|
if (
|
||||||
document.activeElement instanceof HTMLInputElement ||
|
document.activeElement instanceof HTMLInputElement ||
|
||||||
|
|
@ -76,74 +76,37 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
const isCommandOrControl = e.metaKey || e.ctrlKey;
|
const isCommandOrControl = e.metaKey || e.ctrlKey;
|
||||||
const isCmdK = isCommandOrControl && e.key.toLowerCase() === "k";
|
const isCmdK = isCommandOrControl && e.key.toLowerCase() === 'k';
|
||||||
const isSlash = e.key === "/";
|
const isSlash = e.key === '/';
|
||||||
|
|
||||||
if (isCmdK || isSlash) {
|
if (isCmdK || isSlash) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
active = true;
|
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
|
<Theme
|
||||||
persist
|
persist
|
||||||
bind:theme={$theme}
|
bind:theme="{$theme}"
|
||||||
on:update={(e) => {
|
on:update="{(e) => {
|
||||||
const theme = e.detail.theme;
|
const theme = e.detail.theme;
|
||||||
document.documentElement.style.setProperty(
|
document.documentElement.style.setProperty(
|
||||||
"color-scheme",
|
'color-scheme',
|
||||||
["white", "g10"].includes(theme) ? "light" : "dark",
|
['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">
|
<svelte:fragment slot="skip-to-content">
|
||||||
<SkipToContent />
|
<SkipToContent />
|
||||||
</svelte:fragment>
|
</svelte:fragment>
|
||||||
|
|
||||||
<span slot="platform" class="platform-name" class:hidden={active}>
|
<span slot="platform" class="platform-name" class:hidden="{active}">
|
||||||
Carbon Components Svelte <code class="code-01"
|
Carbon Components Svelte <code class="code-01"
|
||||||
>v{process.env.VERSION || ""}</code
|
>v{process.env.VERSION || ""}</code
|
||||||
>
|
>
|
||||||
|
|
@ -153,17 +116,17 @@
|
||||||
bind:value
|
bind:value
|
||||||
bind:active
|
bind:active
|
||||||
placeholder="Search"
|
placeholder="Search"
|
||||||
{results}
|
results="{results}"
|
||||||
on:select={(e) => {
|
on:select="{(e) => {
|
||||||
$goto(e.detail.selectedResult.href);
|
$goto(e.detail.selectedResult.href);
|
||||||
}}
|
}}"
|
||||||
/>
|
/>
|
||||||
<HeaderActionLink
|
<HeaderActionLink
|
||||||
icon={LogoGithub}
|
icon="{LogoGithub}"
|
||||||
href="https://github.com/carbon-design-system/carbon-components-svelte"
|
href="https://github.com/carbon-design-system/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
|
||||||
|
|
@ -198,13 +161,13 @@
|
||||||
</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)}
|
{#each components.children.filter((child) => !deprecated.includes(child.title)) as child (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)}
|
||||||
|
|
|
||||||
|
|
@ -10,15 +10,8 @@ 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.
|
|
||||||
|
|
||||||
## 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">
|
||||||
<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.
|
||||||
|
|
@ -34,10 +27,6 @@ By default, the chevron icon is on the right side of the accordion item.
|
||||||
|
|
||||||
## 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">
|
||||||
<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.
|
||||||
|
|
@ -53,9 +42,6 @@ maintaining the same functionality.
|
||||||
|
|
||||||
## 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">
|
<svelte:fragment slot="title">
|
||||||
|
|
@ -83,9 +69,6 @@ This allows for more complex title layouts with multiple elements.
|
||||||
|
|
||||||
## 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">
|
||||||
<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.
|
||||||
|
|
@ -101,18 +84,12 @@ accordion is first rendered.
|
||||||
|
|
||||||
## Programmatic example
|
## Programmatic example
|
||||||
|
|
||||||
This example demonstrates how to programmatically control the accordion items using
|
This example demonstrates how a list of items can be programmatically expanded and collapsed.
|
||||||
the `bind:open` directive. Expand and collapse items based on user
|
|
||||||
interactions or application state.
|
|
||||||
|
|
||||||
<FileSource src="/framed/Accordion/ExpandableAccordion" />
|
<FileSource src="/framed/Accordion/ExpandableAccordion" />
|
||||||
|
|
||||||
## Extra-large size
|
## 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">
|
||||||
<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.
|
||||||
|
|
@ -128,10 +105,6 @@ sections.
|
||||||
|
|
||||||
## 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">
|
||||||
<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.
|
||||||
|
|
@ -147,9 +120,6 @@ a secondary UI element.
|
||||||
|
|
||||||
## 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">
|
||||||
<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.
|
||||||
|
|
@ -165,10 +135,6 @@ This prevents users from expanding or collapsing any items in the 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">
|
||||||
<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.
|
||||||
|
|
@ -184,45 +150,25 @@ which items are interactive.
|
||||||
|
|
||||||
## 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,13 +3,11 @@
|
||||||
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"`, `"2x3"`, `"16x9"`, `"4x3"`, `"1x1"`, `"3x4"`, `"3x2"`, `"9x16"` and `"1x2"`.
|
||||||
|
|
||||||
## Default
|
## Default (2x1)
|
||||||
|
|
||||||
Display a 2:1 aspect ratio container by default.
|
|
||||||
|
|
||||||
<AspectRatio>
|
<AspectRatio>
|
||||||
2x1
|
2x1
|
||||||
|
|
|
||||||
|
|
@ -12,12 +12,8 @@ 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.
|
|
||||||
|
|
||||||
## 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>
|
||||||
<BreadcrumbItem href="/reports">Annual reports</BreadcrumbItem>
|
<BreadcrumbItem href="/reports">Annual reports</BreadcrumbItem>
|
||||||
|
|
@ -26,8 +22,6 @@ Display a hierarchical navigation trail with slashes between items. Mark the cur
|
||||||
|
|
||||||
## 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>
|
||||||
|
|
@ -35,8 +29,6 @@ Remove the trailing slash from the last breadcrumb item using `noTrailingSlash`.
|
||||||
|
|
||||||
## 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>
|
||||||
<BreadcrumbItem href="/api">API documentation</BreadcrumbItem>
|
<BreadcrumbItem href="/api">API documentation</BreadcrumbItem>
|
||||||
|
|
@ -55,6 +47,4 @@ Add an `OverflowMenu` to handle long breadcrumb trails. Use `OverflowMenuItem` c
|
||||||
|
|
||||||
## Skeleton
|
## 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,12 +1,12 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import {
|
import {
|
||||||
UnorderedList, ListItem
|
Breakpoint, UnorderedList, ListItem
|
||||||
} from "carbon-components-svelte";
|
} from "carbon-components-svelte";
|
||||||
import Preview from "../../components/Preview.svelte";
|
import Preview from "../../components/Preview.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
The Carbon Design System [grid implementation](https://carbondesignsystem.com/guidelines/2x-grid/implementation#responsive-options) defines five responsive breakpoints:
|
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)">
|
<UnorderedList svx-ignore style="margin-bottom: var(--cds-spacing-08)">
|
||||||
<ListItem><strong>Small</strong>: less than 672px</ListItem>
|
<ListItem><strong>Small</strong>: less than 672px</ListItem>
|
||||||
|
|
@ -28,8 +28,8 @@ The `"on:change"` event will fire when the size is initially determined and when
|
||||||
|
|
||||||
## Store and Breakpoint Values
|
## 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.
|
As an alternative to the component, `breakpointObserver` can be used to get the current size as a Svelte store. The store has two additional functions which create derived stores that return a `boolean` indicating whether the size is smaller/larger than a certain breakpoint.
|
||||||
|
|
||||||
Access the `breakpoints` dictionary to map from `BreakpointSize` to `BreakpointValue`.
|
There also exists a `breakpoints` dictionary mapping from `BreakpointSize` to `BreakpointValue`.
|
||||||
|
|
||||||
<FileSource src="/framed/Breakpoint/BreakpointObserver" />
|
<FileSource src="/framed/Breakpoint/BreakpointObserver" />
|
||||||
|
|
|
||||||
|
|
@ -4,73 +4,57 @@
|
||||||
import TrashCan from "carbon-icons-svelte/lib/TrashCan.svelte";
|
import TrashCan from "carbon-icons-svelte/lib/TrashCan.svelte";
|
||||||
import Login from "carbon-icons-svelte/lib/Login.svelte";
|
import Login from "carbon-icons-svelte/lib/Login.svelte";
|
||||||
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>
|
<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
|
||||||
<div class="body-short-01">
|
<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.
|
You must provide an <strong>iconDescription</strong> for the button tooltip.
|
||||||
</div>
|
</div>
|
||||||
</InlineNotification>
|
</InlineNotification>
|
||||||
|
|
||||||
<Button kind="danger-tertiary" iconDescription="Delete" icon={TrashCan} />
|
<Button kind="danger-tertiary"iconDescription="Delete" icon={TrashCan} />
|
||||||
|
|
||||||
## 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={Add}>With icon</Button>
|
<Button icon={Add}>With icon</Button>
|
||||||
|
|
||||||
## Icon-only button
|
## Icon-only button
|
||||||
|
|
||||||
<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
|
<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
|
||||||
<div class="body-short-01">
|
<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.
|
You must provide an <strong>iconDescription</strong> for the button tooltip.
|
||||||
</div>
|
</div>
|
||||||
</InlineNotification>
|
</InlineNotification>
|
||||||
|
|
||||||
|
|
@ -78,13 +62,11 @@ Add an icon to the button using the `icon` prop.
|
||||||
|
|
||||||
## Icon-only, link button
|
## Icon-only, link button
|
||||||
|
|
||||||
Set `href` to create an icon-only link button.
|
|
||||||
|
|
||||||
<Button iconDescription="Login" icon={Login} href="#" />
|
<Button iconDescription="Login" icon={Login} href="#" />
|
||||||
|
|
||||||
## Icon-only button (custom tooltip position)
|
## Icon-only button (custom tooltip position)
|
||||||
|
|
||||||
Control the tooltip position and alignment with `tooltipPosition` and `tooltipAlignment`.
|
The tooltip position and alignment can be controlled by `tooltipPosition` and `tooltipAlignment`.
|
||||||
|
|
||||||
<Button tooltipPosition="right" tooltipAlignment="end" iconDescription="Tooltip text" icon={Add} />
|
<Button tooltipPosition="right" tooltipAlignment="end" iconDescription="Tooltip text" icon={Add} />
|
||||||
|
|
||||||
|
|
@ -96,21 +78,19 @@ Set `isSelected` to `true` to enable the selected state for an icon-only, ghost
|
||||||
|
|
||||||
## 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) instead of a `button` element.
|
||||||
|
|
||||||
<Button href="#">Link button</Button>
|
<Button href="#">Link button</Button>
|
||||||
|
|
||||||
## Link button with icon
|
## Link button with icon
|
||||||
|
|
||||||
Similarly, link buttons can have icons.
|
|
||||||
|
|
||||||
<Button href="#" icon={Add}>Link button with icon</Button>
|
<Button href="#" icon={Add}>Link button with icon</Button>
|
||||||
|
|
||||||
## Custom element
|
## Custom element
|
||||||
|
|
||||||
By default, the `Button` will render either a `button` or `a` 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.
|
If you need 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>
|
||||||
|
|
@ -118,10 +98,6 @@ To render a different element, set `as` to `true` and spread `let:props` to the
|
||||||
|
|
||||||
## Field size
|
## Field size
|
||||||
|
|
||||||
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>
|
||||||
<Button size="field" kind="tertiary">Tertiary</Button>
|
<Button size="field" kind="tertiary">Tertiary</Button>
|
||||||
|
|
@ -130,8 +106,6 @@ Set `size="field"` for field-sized buttons.
|
||||||
|
|
||||||
## Small size
|
## Small size
|
||||||
|
|
||||||
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>
|
||||||
<Button size="small" kind="tertiary">Tertiary</Button>
|
<Button size="small" kind="tertiary">Tertiary</Button>
|
||||||
|
|
@ -140,8 +114,6 @@ Set `size="small"` for small buttons.
|
||||||
|
|
||||||
## Large size
|
## Large size
|
||||||
|
|
||||||
Set `size="lg"` for large buttons.
|
|
||||||
|
|
||||||
<Button size="lg">Primary</Button>
|
<Button size="lg">Primary</Button>
|
||||||
<Button size="lg" kind="secondary">Secondary</Button>
|
<Button size="lg" kind="secondary">Secondary</Button>
|
||||||
<Button size="lg" kind="tertiary">Tertiary</Button>
|
<Button size="lg" kind="tertiary">Tertiary</Button>
|
||||||
|
|
@ -150,8 +122,6 @@ Set `size="lg"` for large buttons.
|
||||||
|
|
||||||
## Extra-large size
|
## Extra-large size
|
||||||
|
|
||||||
Set `size="xl"` for extra-large buttons.
|
|
||||||
|
|
||||||
<Button size="xl">Primary</Button>
|
<Button size="xl">Primary</Button>
|
||||||
<Button size="xl" kind="secondary">Secondary</Button>
|
<Button size="xl" kind="secondary">Secondary</Button>
|
||||||
<Button size="xl" kind="tertiary">Tertiary</Button>
|
<Button size="xl" kind="tertiary">Tertiary</Button>
|
||||||
|
|
@ -160,8 +130,6 @@ Set `size="xl"` for extra-large buttons.
|
||||||
|
|
||||||
## Disabled state
|
## 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} />
|
<Button disabled iconDescription="Tooltip text" icon={Add} />
|
||||||
|
|
||||||
|
|
@ -171,7 +139,7 @@ Set `expressive` to `true` to use Carbon's expressive typesetting.
|
||||||
|
|
||||||
<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
|
<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
|
||||||
<div class="body-short-01">
|
<div class="body-short-01">
|
||||||
Use expressive styles with default, "lg", or "xl" button sizes.
|
Expressive styles only work with the default, "lg", and "xl" button sizes.
|
||||||
</div>
|
</div>
|
||||||
</InlineNotification>
|
</InlineNotification>
|
||||||
|
|
||||||
|
|
@ -195,8 +163,6 @@ Set `expressive` to `true` to use Carbon's expressive typesetting.
|
||||||
|
|
||||||
## Skeleton
|
## Skeleton
|
||||||
|
|
||||||
Set `skeleton` to show a loading state.
|
|
||||||
|
|
||||||
<Button size="xl" skeleton />
|
<Button size="xl" skeleton />
|
||||||
<Button size="lg" skeleton />
|
<Button size="lg" skeleton />
|
||||||
<Button skeleton />
|
<Button skeleton />
|
||||||
|
|
@ -205,6 +171,8 @@ Set `skeleton` to show a loading state.
|
||||||
|
|
||||||
## Programmatic focus
|
## Programmatic focus
|
||||||
|
|
||||||
Bind to the `ref` prop to access the button element for programmatic focus.
|
Bind to the `ref` prop to access a reference to the underlying button element.
|
||||||
|
|
||||||
|
You can use this reference to programmatically focus the button.
|
||||||
|
|
||||||
<FileSource src="/framed/Button/ProgrammaticFocus" />
|
<FileSource src="/framed/Button/ProgrammaticFocus" />
|
||||||
|
|
|
||||||
|
|
@ -4,11 +4,9 @@
|
||||||
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
|
||||||
|
|
||||||
Place buttons side by side in a horizontal layout.
|
Buttons in a button set are juxtaposed by default.
|
||||||
|
|
||||||
<ButtonSet>
|
<ButtonSet>
|
||||||
<Button kind="secondary">Cancel</Button>
|
<Button kind="secondary">Cancel</Button>
|
||||||
|
|
@ -17,7 +15,7 @@ Place buttons side by side in a horizontal layout.
|
||||||
|
|
||||||
## 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={Login}>Log in</Button>
|
||||||
|
|
|
||||||
|
|
@ -3,53 +3,39 @@
|
||||||
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)
|
## Reactive example (bind:checked)
|
||||||
|
|
||||||
Use two-way binding with `bind:checked` to track the checkbox state.
|
The `checked` prop supports two-way binding.
|
||||||
|
|
||||||
<FileSource src="/framed/Checkbox/CheckboxReactive" />
|
<FileSource src="/framed/Checkbox/CheckboxReactive" />
|
||||||
|
|
||||||
## Reactive example (bind:group)
|
## 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).
|
An alternative to `checked` is binding an array of values using `group`. This API in inspired by Svelte [group inputs](https://svelte.dev/tutorial/group-inputs).
|
||||||
|
|
||||||
<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
|
<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
|
||||||
<div class="body-short-01">
|
<div class="body-short-01">
|
||||||
When using <strong>bind:group</strong>, <strong>bind:checked</strong> only supports one-way binding.
|
If using <strong>bind:group</strong>, <strong>bind:checked</strong> will only support one-way binding.
|
||||||
</div>
|
</div>
|
||||||
</InlineNotification>
|
</InlineNotification>
|
||||||
|
|
||||||
|
|
@ -57,6 +43,4 @@ Bind an array of values using `group` to manage multiple checkboxes. This API is
|
||||||
|
|
||||||
## Skeleton
|
## Skeleton
|
||||||
|
|
||||||
Set `skeleton` to `true` to show a loading state.
|
|
||||||
|
|
||||||
<Checkbox skeleton />
|
<Checkbox skeleton />
|
||||||
|
|
|
||||||
|
|
@ -3,19 +3,15 @@
|
||||||
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
|
||||||
|
|
||||||
Create a clickable tile with an `href` to link to another page.
|
|
||||||
|
|
||||||
<ClickableTile href="https://www.carbondesignsystem.com/">
|
<ClickableTile href="https://www.carbondesignsystem.com/">
|
||||||
Carbon Design System
|
Carbon Design System
|
||||||
</ClickableTile>
|
</ClickableTile>
|
||||||
|
|
||||||
## Prevent default behavior
|
## Prevent default behavior
|
||||||
|
|
||||||
Handle the `click` event to override the default link behavior. Use `e.preventDefault()` to stop navigation.
|
Use the forwarded `click` event and invoke `e.preventDefault()` to prevent the native link behavior.
|
||||||
|
|
||||||
<ClickableTile
|
<ClickableTile
|
||||||
href="/"
|
href="/"
|
||||||
|
|
@ -29,16 +25,12 @@ Handle the `click` event to override the default link behavior. Use `e.preventDe
|
||||||
|
|
||||||
## Light variant
|
## Light variant
|
||||||
|
|
||||||
Set `light` to `true` to use the light color scheme.
|
|
||||||
|
|
||||||
<ClickableTile light href="https://www.carbondesignsystem.com/">
|
<ClickableTile light href="https://www.carbondesignsystem.com/">
|
||||||
Carbon Design System
|
Carbon Design System
|
||||||
</ClickableTile>
|
</ClickableTile>
|
||||||
|
|
||||||
## Disabled state
|
## Disabled state
|
||||||
|
|
||||||
Set `disabled` to `true` to prevent interaction.
|
|
||||||
|
|
||||||
<ClickableTile disabled href="https://www.carbondesignsystem.com/">
|
<ClickableTile disabled href="https://www.carbondesignsystem.com/">
|
||||||
Carbon Design System
|
Carbon Design System
|
||||||
</ClickableTile>
|
</ClickableTile>
|
||||||
|
|
|
||||||
|
|
@ -27,21 +27,20 @@ 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.
|
|
||||||
|
|
||||||
This component uses the native, asynchronous [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText) to copy text.
|
This component uses the native, asynchronous [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText) to copy text.
|
||||||
|
|
||||||
|
Please note that the `clipboard.writeText` API is not supported in [IE 11 nor Safari iOS version 13.3 or lower](https://caniuse.com/mdn-api_clipboard_writetext).
|
||||||
|
|
||||||
You can override the default copy functionality with your own implementation. See [Overriding copy functionality](#overriding-copy-functionality).
|
You can override the default copy functionality with your own implementation. See [Overriding copy functionality](#overriding-copy-functionality).
|
||||||
|
|
||||||
## Default
|
|
||||||
|
|
||||||
Display a single-line code snippet by default.
|
## Default (single-line)
|
||||||
|
|
||||||
<CodeSnippet code="npm i carbon-components-svelte" />
|
<CodeSnippet code="npm i carbon-components-svelte" />
|
||||||
|
|
||||||
## Overriding copy functionality
|
## Overriding copy functionality
|
||||||
|
|
||||||
Pass a custom function to the `copy` prop to override the default copy behavior.
|
To override the default copy behavior, pass a custom function to the `copy` prop.
|
||||||
|
|
||||||
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.
|
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.
|
||||||
|
|
||||||
|
|
@ -49,37 +48,33 @@ In this example, we use the open source module [clipboard-copy](https://github.c
|
||||||
|
|
||||||
## Preventing copy functionality
|
## Preventing copy functionality
|
||||||
|
|
||||||
Pass a no-op function to the `copy` prop to disable copying.
|
To prevent text from being copied entirely, pass a no-op function to the `copy` prop.
|
||||||
|
|
||||||
<CodeSnippet code="npm i carbon-components-svelte" copy={() => {}} />
|
<CodeSnippet code="npm i carbon-components-svelte" copy={() => {}} />
|
||||||
|
|
||||||
## Inline
|
## 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
|
## Expanded by default
|
||||||
|
|
||||||
Set `expanded` to `true` to show the full multi-line code snippet.
|
Use the `expanded` prop to control whether the multi-line code snippet is expanded or not.
|
||||||
|
|
||||||
<CodeSnippet type="multi" {code} expanded />
|
<CodeSnippet type="multi" {code} expanded />
|
||||||
|
|
||||||
## Reactive example
|
## Reactive example
|
||||||
|
|
||||||
The multi-line code snippet dispatches "expand" and "collapse" events.
|
The multi-line code snippet also dispatches "expand" and "collapse" events.
|
||||||
|
|
||||||
<FileSource src="/framed/CodeSnippet/CodeSnippetReactive" />
|
<FileSource src="/framed/CodeSnippet/CodeSnippetReactive" />
|
||||||
|
|
||||||
## Custom copy feedback text
|
## Custom copy feedback text
|
||||||
|
|
||||||
Set `feedback` to customize the copy button feedback text.
|
Use the `feedback` prop to override the default copy button feedback text.
|
||||||
|
|
||||||
<CodeSnippet type="multi" {code} feedback="Copied to clipboard" />
|
<CodeSnippet type="multi" {code} feedback="Copied to clipboard" />
|
||||||
|
|
||||||
|
|
@ -91,25 +86,23 @@ Set `hideCopyButton` to `true` to hide the copy button.
|
||||||
|
|
||||||
## Hidden show more button
|
## Hidden show more button
|
||||||
|
|
||||||
Set `showMoreLess` to `false` to hide the expand/collapse button on multi-line snippets.
|
Only multi-line code snippets have a "Show more" button by default. Set `showMoreLess` to `false` to hide it.
|
||||||
|
|
||||||
<CodeSnippet type="multi" {code} showMoreLess={false} />
|
<CodeSnippet type="multi" {code} showMoreLess={false} />
|
||||||
|
|
||||||
## Hidden copy, show more buttons
|
## Hidden copy, show more buttons
|
||||||
|
|
||||||
Hide both the copy and expand/collapse buttons.
|
|
||||||
|
|
||||||
<CodeSnippet type="multi" {code} hideCopyButton showMoreLess={false} />
|
<CodeSnippet type="multi" {code} hideCopyButton showMoreLess={false} />
|
||||||
|
|
||||||
## Custom show more/less text
|
## Custom show more/less text
|
||||||
|
|
||||||
Set `showMoreText` and `showLessText` to customize the expand/collapse button text.
|
Use the `showMoreText` and `showLessText` props to override the default "Show more" and "Show less" button text.
|
||||||
|
|
||||||
<CodeSnippet type="multi" {code} showMoreText="Expand" showLessText="Collapse" />
|
<CodeSnippet type="multi" {code} showMoreText="Expand" showLessText="Collapse" />
|
||||||
|
|
||||||
## Disabled
|
## Disabled
|
||||||
|
|
||||||
Set `disabled` to `true` to disable interaction. This only applies to `"single"` and `"multi"` types.
|
The `disabled` prop applies only to the `"single"` and `"multi"` code snippet types.
|
||||||
|
|
||||||
<CodeSnippet disabled code="npm i carbon-components-svelte" />
|
<CodeSnippet disabled code="npm i carbon-components-svelte" />
|
||||||
<br />
|
<br />
|
||||||
|
|
@ -117,34 +110,30 @@ Set `disabled` to `true` to disable interaction. This only applies to `"single"`
|
||||||
|
|
||||||
## 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 />
|
||||||
|
|
@ -3,8 +3,6 @@
|
||||||
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.
|
|
||||||
|
|
||||||
`ComboBox` is keyed for performance reasons.
|
`ComboBox` is keyed for performance reasons.
|
||||||
|
|
||||||
<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
|
<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
|
||||||
|
|
@ -13,8 +11,6 @@
|
||||||
|
|
||||||
## Default
|
## 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={[
|
||||||
{id: "0", text: "Slack"},
|
{id: "0", text: "Slack"},
|
||||||
|
|
@ -24,25 +20,12 @@ items={[
|
||||||
|
|
||||||
## Custom slot
|
## Custom slot
|
||||||
|
|
||||||
Override the default slot to customize how each item displays. Access the item and index through the `let:` directive.
|
Override the default slot to customize the display of each item. Access the item and index through the `let:` directive.
|
||||||
|
|
||||||
<FileSource src="/framed/ComboBox/ComboBoxSlot" />
|
<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
|
## 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"
|
selectedId="1"
|
||||||
items={[
|
items={[
|
||||||
|
|
@ -53,39 +36,33 @@ items={[
|
||||||
|
|
||||||
## Reactive example
|
## Reactive example
|
||||||
|
|
||||||
See how the combobox responds to user input and selection changes.
|
|
||||||
|
|
||||||
<FileSource src="/framed/ComboBox/ReactiveComboBox" />
|
<FileSource src="/framed/ComboBox/ReactiveComboBox" />
|
||||||
|
|
||||||
## Clear selection
|
## Clear selection
|
||||||
|
|
||||||
Use `bind:this` to access the component instance and call `ComboBox.clear()` to programmatically clear the selection.
|
To programmatically clear the selection, access the component instance using the [bind:this](https://svelte.dev/docs#bind_element) directive and invoke the `ComboBox.clear()` accessor.
|
||||||
|
|
||||||
Set `focus: false` in the method options to prevent re-focusing the input.
|
Specify `focus: false` in the method options to avoid re-focusing the input.
|
||||||
|
|
||||||
<FileSource src="/framed/ComboBox/ComboBoxClear" />
|
<FileSource src="/framed/ComboBox/ComboBoxClear" />
|
||||||
|
|
||||||
## Multiple combo boxes
|
## 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
|
## Filterable with custom label
|
||||||
|
|
||||||
Set `itemToString` to customize how items display in the filterable combobox.
|
Combine a custom label `itemToString` with the filterable option (e.g., internationalization).
|
||||||
|
|
||||||
<FileSource src="/framed/ComboBox/FilterableComboBoxCustomLabel" />
|
<FileSource src="/framed/ComboBox/FilterableComboBoxCustomLabel" />
|
||||||
|
|
||||||
## Top direction
|
## Top direction
|
||||||
|
|
||||||
Set `direction` to `"top"` to make the dropdown menu appear above the input.
|
Set `direction` to `"top"` for the combobox dropdown menu to appear above the input.
|
||||||
|
|
||||||
<ComboBox direction="top" titleText="Contact" placeholder="Select contact method"
|
<ComboBox direction="top" titleText="Contact" placeholder="Select contact method"
|
||||||
items={[
|
items={[
|
||||||
|
|
@ -96,8 +73,6 @@ items={[
|
||||||
|
|
||||||
## 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={[
|
||||||
{id: "0", text: "Slack"},
|
{id: "0", text: "Slack"},
|
||||||
|
|
@ -107,8 +82,6 @@ items={[
|
||||||
|
|
||||||
## 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"
|
||||||
items={[
|
items={[
|
||||||
|
|
@ -119,8 +92,6 @@ items={[
|
||||||
|
|
||||||
## 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"
|
||||||
items={[
|
items={[
|
||||||
|
|
@ -131,8 +102,6 @@ items={[
|
||||||
|
|
||||||
## 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={[
|
||||||
{id: "0", text: "Slack"},
|
{id: "0", text: "Slack"},
|
||||||
|
|
@ -142,8 +111,6 @@ items={[
|
||||||
|
|
||||||
## 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={[
|
||||||
{id: "0", text: "Slack"},
|
{id: "0", text: "Slack"},
|
||||||
|
|
@ -153,8 +120,6 @@ items={[
|
||||||
|
|
||||||
## Disabled state
|
## Disabled state
|
||||||
|
|
||||||
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={[
|
||||||
{id: "0", text: "Slack"},
|
{id: "0", text: "Slack"},
|
||||||
|
|
@ -164,7 +129,7 @@ items={[
|
||||||
|
|
||||||
## Disabled items
|
## Disabled items
|
||||||
|
|
||||||
Set `disabled: true` in an item object to disable specific options.
|
Use the `disabled` property in the `items` prop to disable specific items.
|
||||||
|
|
||||||
<ComboBox
|
<ComboBox
|
||||||
titleText="Contact"
|
titleText="Contact"
|
||||||
|
|
|
||||||
|
|
@ -6,16 +6,12 @@ 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
|
## 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.
|
Use the `secondaryButtons` prop in `ModalFooter` to render two secondary buttons for a "3-button modal". The prop is a 2-tuple type that supersedes `secondaryButtonText`.
|
||||||
|
|
||||||
<FileSource src="/framed/Modal/3ButtonComposedModal" />
|
<FileSource src="/framed/Modal/3ButtonComposedModal" />
|
||||||
|
|
@ -9,12 +9,8 @@ components: ["ContentSwitcher", "Switch"]
|
||||||
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" />
|
||||||
|
|
@ -22,8 +18,6 @@ Create a content switcher with `Switch` components. Each switch needs a `text` p
|
||||||
|
|
||||||
## 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" />
|
||||||
<Switch text="Trending" />
|
<Switch text="Trending" />
|
||||||
|
|
@ -32,16 +26,10 @@ Set `selectedIndex` to pre-select a switch when the content switcher loads.
|
||||||
|
|
||||||
## 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;">
|
||||||
|
|
@ -57,8 +45,6 @@ Override the default slot in `Switch` to customize how each option displays.
|
||||||
|
|
||||||
## 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" />
|
||||||
|
|
@ -66,8 +52,6 @@ Set `size` to `"xl"` for an extra-large content switcher.
|
||||||
|
|
||||||
## 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" />
|
||||||
|
|
@ -75,8 +59,6 @@ Set `size` to `"sm"` for a small content switcher.
|
||||||
|
|
||||||
## Disabled
|
## Disabled
|
||||||
|
|
||||||
Set `disabled` to `true` on individual switches to prevent interaction.
|
|
||||||
|
|
||||||
<ContentSwitcher>
|
<ContentSwitcher>
|
||||||
<Switch disabled text="All" />
|
<Switch disabled text="All" />
|
||||||
<Switch disabled text="Archived" />
|
<Switch disabled text="Archived" />
|
||||||
|
|
|
||||||
|
|
@ -6,32 +6,26 @@ 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.
|
By default, the context menu will trigger when right clicking anywhere in the `window`.
|
||||||
|
|
||||||
<FileSource src="/framed/ContextMenu/ContextMenu" />
|
<FileSource src="/framed/ContextMenu/ContextMenu" />
|
||||||
|
|
||||||
## Custom target
|
## Custom target
|
||||||
|
|
||||||
By default, the context menu will trigger when right clicking anywhere in the `window`.
|
Specify a custom `HTMLElement` using the `target` prop.
|
||||||
|
|
||||||
Set `target` to specify which element triggers the context menu.
|
|
||||||
|
|
||||||
<FileSource src="/framed/ContextMenu/ContextMenuTarget" />
|
<FileSource src="/framed/ContextMenu/ContextMenuTarget" />
|
||||||
|
|
||||||
## Multiple targets
|
## Multiple targets
|
||||||
|
|
||||||
Set `target` to an array of elements to trigger the context menu from multiple sources.
|
The `target` prop also accepts an array of elements.
|
||||||
|
|
||||||
<FileSource src="/framed/ContextMenu/ContextMenuTargets" />
|
<FileSource src="/framed/ContextMenu/ContextMenuTargets" />
|
||||||
|
|
||||||
## Radio groups
|
## 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" />
|
||||||
|
|
@ -3,32 +3,30 @@
|
||||||
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.
|
This component uses the native, asynchronous [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText) to copy text.
|
||||||
|
|
||||||
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).
|
Please note that the `clipboard.writeText` API is not supported in [IE 11 nor Safari iOS version 13.3 or lower](https://caniuse.com/mdn-api_clipboard_writetext).
|
||||||
|
|
||||||
|
You can 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
|
## Overriding copy functionality
|
||||||
|
|
||||||
Pass a custom function to the `copy` prop to override the default copy behavior.
|
To override the default copy behavior, pass a custom function to the `copy` prop.
|
||||||
|
|
||||||
This example uses the NPM package [clipboard-copy](https://github.com/feross/clipboard-copy) to copy the text instead of the default Clipboard API.
|
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/CopyButton/CopyButtonOverride" />
|
<FileSource src="/framed/CopyButton/CopyButtonOverride" />
|
||||||
|
|
||||||
## Preventing copy functionality
|
## Preventing copy functionality
|
||||||
|
|
||||||
Pass a no-op function to the `copy` prop to disable copying.
|
To prevent text from being copied entirely, pass a no-op function to the `copy` prop.
|
||||||
|
|
||||||
<CopyButton text="This text should not be copied" copy={() => {}} />
|
<CopyButton text="This text should not be copied" copy={() => {}} />
|
||||||
|
|
@ -8,20 +8,21 @@ components: ["DataTable", "Pagination","Toolbar", "ToolbarContent", "ToolbarSear
|
||||||
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.
|
`DataTable` is keyed for performance reasons.
|
||||||
|
|
||||||
<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
|
<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
|
||||||
<div class="body-short-01">
|
<div class="body-short-01">Every <code>headers</code> object must have a unique "key" property.</div>
|
||||||
This component is keyed for performance.
|
</InlineNotification>
|
||||||
|
|
||||||
Every <strong>headers</strong> object must have a unique "key" property.
|
<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
|
||||||
<div class="body-short-01">Every <strong>rows</strong> object must have a unique "id" property.</div>
|
<div class="body-short-01">Every <code>rows</code> object must have a unique "id" property.</div>
|
||||||
</div>
|
|
||||||
</InlineNotification>
|
</InlineNotification>
|
||||||
|
|
||||||
## Default
|
## Default
|
||||||
|
|
||||||
Create a basic table by providing `headers` and `rows` data. Match the `key` in headers with the corresponding property in rows.
|
The key value in `headers` corresponds to the key value defined in `rows`.
|
||||||
|
|
||||||
|
For example, the header key `"name"` will use the value of `rows[index].name`.
|
||||||
|
|
||||||
<DataTable
|
<DataTable
|
||||||
headers="{[
|
headers="{[
|
||||||
|
|
@ -78,7 +79,9 @@ 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="{[
|
||||||
|
|
@ -150,8 +153,6 @@ Use the `"cell"` slot to customize cell content. Access row and cell data throug
|
||||||
|
|
||||||
## 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="{[
|
||||||
{ key: "name", value: "Name" },
|
{ key: "name", value: "Name" },
|
||||||
|
|
@ -207,7 +208,7 @@ Add a title and description to provide context for the table data.
|
||||||
|
|
||||||
## Slottable title, description
|
## Slottable title, description
|
||||||
|
|
||||||
Use slots to customize the title and description content.
|
The `title` and `description` props are slottable.
|
||||||
|
|
||||||
<DataTable
|
<DataTable
|
||||||
headers="{[
|
headers="{[
|
||||||
|
|
@ -269,7 +270,7 @@ Use slots to customize the title and description content.
|
||||||
|
|
||||||
## Static width
|
## Static width
|
||||||
|
|
||||||
Set `useStaticWidth` to `true` to render the table with an auto width instead of 100%.
|
Set `useStaticWidth` to `true` to render the table with a width of "auto" instead of "100%".
|
||||||
|
|
||||||
<DataTable useStaticWidth
|
<DataTable useStaticWidth
|
||||||
title="Load balancers" description="Your organization's active load balancers."
|
title="Load balancers" description="Your organization's active load balancers."
|
||||||
|
|
@ -327,7 +328,9 @@ title="Load balancers" description="Your organization's active load balancers."
|
||||||
|
|
||||||
## Custom column widths
|
## Custom column widths
|
||||||
|
|
||||||
Specify `width` or `minWidth` in the `headers` object to set column dimensions. This applies a fixed table layout.
|
Specify a `width` or `minWidth` property in the `headers` object to customize the width of each column.
|
||||||
|
|
||||||
|
A [table-layout: fixed](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout#values) rule will be applied to the `table` element when using custom widths.
|
||||||
|
|
||||||
<InlineNotification svx-ignore lowContrast kind="warning" title="Note:" hideCloseButton>
|
<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>
|
<div class="body-short-01">Custom column widths do not work with a <a class="bx--link" href="#sticky-header">sticky header</a>.</div>
|
||||||
|
|
@ -337,7 +340,9 @@ Specify `width` or `minWidth` in the `headers` object to set column dimensions.
|
||||||
|
|
||||||
## Sticky header
|
## Sticky header
|
||||||
|
|
||||||
Set `stickyHeader` to `true` to fix the header in place. This adds a maximum height to force scrolling.
|
Set `stickyHeader` to `true` for the header to be fixed in place.
|
||||||
|
|
||||||
|
A maximum height will applied to the datatable to force a scrollbar.
|
||||||
|
|
||||||
<DataTable
|
<DataTable
|
||||||
stickyHeader
|
stickyHeader
|
||||||
|
|
@ -358,8 +363,6 @@ Set `stickyHeader` to `true` to fix the header in place. This adds a maximum hei
|
||||||
|
|
||||||
## With toolbar
|
## 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="{[
|
||||||
{ key: "name", value: "Name" },
|
{ key: "name", value: "Name" },
|
||||||
|
|
@ -429,8 +432,6 @@ Add a toolbar with search, menu, and actions above the table.
|
||||||
|
|
||||||
## 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="{[
|
||||||
{ key: "name", value: "Name" },
|
{ key: "name", value: "Name" },
|
||||||
|
|
@ -498,22 +499,24 @@ Use `size="short"` to create a more compact table with a small toolbar.
|
||||||
|
|
||||||
## Filterable
|
## Filterable
|
||||||
|
|
||||||
Set `shouldFilterRows` to `true` to enable client-side filtering. The default filter performs string comparisons on cell values.
|
By default, `ToolbarSearch` will not filter `DataTable` rows.
|
||||||
|
|
||||||
For pagination with filtering, bind to `filteredRowIds` and pass its length to `Pagination`'s `totalItems`.
|
Set `shouldFilterRows` to `true` to enable client-side filtering. The default filtering performs a basic string comparison on cell values that are of a string or a number type.
|
||||||
|
|
||||||
|
To use filtering with pagination, bind to the `filteredRowIds` prop and pass its length to `totalItems` in `Pagination`.
|
||||||
|
|
||||||
|
Note that in-memory filtering is not optimal for large data sets, where you might consider using server-side search.
|
||||||
|
|
||||||
<FileSource src="/framed/DataTable/DataTableFilterable" />
|
<FileSource src="/framed/DataTable/DataTableFilterable" />
|
||||||
|
|
||||||
## Filterable (custom)
|
## Filterable (custom)
|
||||||
|
|
||||||
Pass a function to `shouldFilterRows` to implement custom filtering logic.
|
`shouldFilterRows` also accepts a function and passes it the current row and search value. It expects the function to return a boolean.
|
||||||
|
|
||||||
<FileSource src="/framed/DataTable/DataTableFilterCustom" />
|
<FileSource src="/framed/DataTable/DataTableFilterCustom" />
|
||||||
|
|
||||||
## Zebra stripes
|
## Zebra stripes
|
||||||
|
|
||||||
Set `zebra` to `true` to add alternating row colors.
|
|
||||||
|
|
||||||
<DataTable zebra
|
<DataTable zebra
|
||||||
headers="{[
|
headers="{[
|
||||||
{ key: "name", value: "Name" },
|
{ key: "name", value: "Name" },
|
||||||
|
|
@ -569,8 +572,6 @@ 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="{[
|
||||||
{ key: "name", value: "Name" },
|
{ key: "name", value: "Name" },
|
||||||
|
|
@ -626,8 +627,6 @@ Set `size="tall"` for increased row height.
|
||||||
|
|
||||||
## Medium rows
|
## Medium rows
|
||||||
|
|
||||||
Set `size="medium"` for standard row height.
|
|
||||||
|
|
||||||
<DataTable size="medium"
|
<DataTable size="medium"
|
||||||
headers="{[
|
headers="{[
|
||||||
{ key: "name", value: "Name" },
|
{ key: "name", value: "Name" },
|
||||||
|
|
@ -683,8 +682,6 @@ Set `size="medium"` for standard row height.
|
||||||
|
|
||||||
## Short rows
|
## Short rows
|
||||||
|
|
||||||
Set `size="short"` for compact row height.
|
|
||||||
|
|
||||||
<DataTable size="short"
|
<DataTable size="short"
|
||||||
headers="{[
|
headers="{[
|
||||||
{ key: "name", value: "Name" },
|
{ key: "name", value: "Name" },
|
||||||
|
|
@ -740,8 +737,6 @@ 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="{[
|
||||||
{ key: "name", value: "Name" },
|
{ key: "name", value: "Name" },
|
||||||
|
|
@ -797,7 +792,11 @@ 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="{[
|
||||||
|
|
@ -854,14 +853,12 @@ Set `sortable` to `true` to enable column sorting. Disable sorting on specific c
|
||||||
|
|
||||||
## Sortable with pagination
|
## Sortable with pagination
|
||||||
|
|
||||||
Bind to `pageSize` and `page` props of `Pagination` and pass them to `DataTable`.
|
For pagination, bind to the `pageSize` and `page` props of `Pagination` and pass their values to `DataTable`.
|
||||||
|
|
||||||
<FileSource src="/framed/DataTable/DataTablePagination" />
|
<FileSource src="/framed/DataTable/DataTablePagination" />
|
||||||
|
|
||||||
## Sortable with custom display and sort methods
|
## 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="{[
|
||||||
{ key: "name", value: "Name" },
|
{ key: "name", value: "Name" },
|
||||||
|
|
@ -929,8 +926,6 @@ Use `display` and `sort` functions in header objects to customize cell rendering
|
||||||
|
|
||||||
## Sortable with nested object values
|
## Sortable with nested object values
|
||||||
|
|
||||||
Access nested object properties using dot notation in the header key.
|
|
||||||
|
|
||||||
<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="{[
|
||||||
{ key: "name", value: "Name" },
|
{ key: "name", value: "Name" },
|
||||||
|
|
@ -1010,61 +1005,71 @@ Access nested object properties using dot notation in the header key.
|
||||||
|
|
||||||
## Programmatic sorting
|
## Programmatic sorting
|
||||||
|
|
||||||
Use `sortKey` and `sortDirection` props to control sorting programmatically. Set `sortKey` to a valid header key and `sortDirection` to "none", "ascending", or "descending".
|
Use the reactive `sortKey` and `sortDirection` props for programmatic sorting.
|
||||||
|
|
||||||
|
By default, the table is not sorted by a specific key. The `sortKey` value must be a valid `key` specified in the `headers` object.
|
||||||
|
|
||||||
|
Possible values for `sortDirection` include `"none"` or `"ascending"` or `"descending"`.
|
||||||
|
|
||||||
|
Setting `sortKey` to `null` and `sortDirection` to `"none"` should reset the table rows to their initial order.
|
||||||
|
|
||||||
<FileSource src="/framed/DataTable/DataTableProgrammaticSorting" />
|
<FileSource src="/framed/DataTable/DataTableProgrammaticSorting" />
|
||||||
|
|
||||||
## Empty column with overflow menu
|
## 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.
|
Some use cases require an empty column in the table body without a corresponding table header.
|
||||||
|
|
||||||
|
For an object in the `headers` array, set `empty` to `true` to render an empty column.
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
<FileSource src="/framed/DataTable/DataTableAppendColumns" />
|
<FileSource src="/framed/DataTable/DataTableAppendColumns" />
|
||||||
|
|
||||||
## Selectable rows (checkbox)
|
## Selectable rows (checkbox)
|
||||||
|
|
||||||
Set `selectable` to `true` for multi-select functionality. Bind to `selectedRowIds` to track selections. Use `inputName` to customize checkbox names.
|
Set `selectable` to `true` for rows to be multi-selectable.
|
||||||
|
|
||||||
<FileSource src="/framed/DataTable/SelectableDataTable" />
|
<FileSource src="/framed/DataTable/SelectableDataTable" />
|
||||||
|
|
||||||
## Batch selection
|
## Batch selection
|
||||||
|
|
||||||
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
|
## Batch selection with initial selected rows
|
||||||
|
|
||||||
Use `selectedRowIds` to specify initially selected rows.
|
Use the `selectedRowIds` prop to specify which rows should be selected.
|
||||||
|
|
||||||
<FileSource src="/framed/DataTable/DataTableBatchSelectionInitial" />
|
<FileSource src="/framed/DataTable/DataTableBatchSelectionInitial" />
|
||||||
|
|
||||||
## Batch selection with batch actions toolbar
|
## 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
|
## Batch selection with controlled toolbar
|
||||||
|
|
||||||
Control the batch actions toolbar with the `active` prop. Prevent default cancel behavior in the `on:cancel` event.
|
By default, `ToolbarBatchActions` is activated if one or more rows is selected. Clicking "Cancel" will deactivate it.
|
||||||
|
|
||||||
|
Use the `active` prop to control the toolbar. Note that it will still activate if one or more rows are selected.
|
||||||
|
|
||||||
|
You can also prevent the default "Cancel" behavior in the dispatched `on:cancel` event.
|
||||||
|
|
||||||
<FileSource src="/framed/DataTable/DataTableBatchSelectionToolbarControlled" />
|
<FileSource src="/framed/DataTable/DataTableBatchSelectionToolbarControlled" />
|
||||||
|
|
||||||
## Selectable rows (radio)
|
## 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.
|
Set `radio` to `true` for only one row to be selected at a time.
|
||||||
|
|
||||||
<FileSource src="/framed/DataTable/RadioSelectableDataTable" />
|
<FileSource src="/framed/DataTable/RadioSelectableDataTable" />
|
||||||
|
|
||||||
## Non-selectable rows
|
## Non-selectable rows
|
||||||
|
|
||||||
Use `nonSelectableRowIds` to prevent selection of specific rows.
|
Use `nonSelectableRowIds` to specify the ids for rows that should not be selectable.
|
||||||
|
|
||||||
<FileSource src="/framed/DataTable/DataTableNonSelectableRows" />
|
<FileSource src="/framed/DataTable/DataTableNonSelectableRows" />
|
||||||
|
|
||||||
## Expandable rows
|
## Expandable rows
|
||||||
|
|
||||||
Set `expandable` to `true` to make rows expandable. Use the `expanded-row` slot to customize expanded content.
|
Set `expandable` to `true` for rows to be expandable.
|
||||||
|
|
||||||
<DataTable expandable
|
<DataTable expandable
|
||||||
headers="{[
|
headers="{[
|
||||||
|
|
@ -1125,20 +1130,16 @@ Set `expandable` to `true` to make rows expandable. Use the `expanded-row` slot
|
||||||
|
|
||||||
## Non-expandable rows
|
## Non-expandable rows
|
||||||
|
|
||||||
Use `nonExpandableRowIds` to prevent expansion of specific rows.
|
Use `nonExpandableRowIds` to specify the ids for rows that should not be expandable.
|
||||||
|
|
||||||
<FileSource src="/framed/DataTable/DataTableNonExpandableRows" />
|
<FileSource src="/framed/DataTable/DataTableNonExpandableRows" />
|
||||||
|
|
||||||
## Expandable (zebra styles)
|
## Expandable (zebra styles)
|
||||||
|
|
||||||
Combine expandable rows with zebra striping.
|
|
||||||
|
|
||||||
<FileSource src="/framed/DataTable/DataTableExpandableZebra" />
|
<FileSource src="/framed/DataTable/DataTableExpandableZebra" />
|
||||||
|
|
||||||
## Expandable (compact size)
|
## Expandable (compact size)
|
||||||
|
|
||||||
Set `size="compact"` for expandable rows with minimal height.
|
|
||||||
|
|
||||||
<DataTable size="compact" expandable
|
<DataTable size="compact" expandable
|
||||||
headers="{[
|
headers="{[
|
||||||
{ key: "name", value: "Name" },
|
{ key: "name", value: "Name" },
|
||||||
|
|
@ -1198,8 +1199,6 @@ Set `size="compact"` for expandable rows with minimal height.
|
||||||
|
|
||||||
## 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="{[
|
||||||
{ key: "name", value: "Name" },
|
{ key: "name", value: "Name" },
|
||||||
|
|
@ -1259,8 +1258,6 @@ Set `size="short"` for expandable rows with compact height.
|
||||||
|
|
||||||
## 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="{[
|
||||||
{ key: "name", value: "Name" },
|
{ key: "name", value: "Name" },
|
||||||
|
|
@ -1320,7 +1317,7 @@ Set `size="tall"` for expandable rows with increased height.
|
||||||
|
|
||||||
## Batch expansion
|
## Batch expansion
|
||||||
|
|
||||||
Set `batchExpansion` to `true` to expand and collapse all rows at once.
|
Set `batchExpansion` to `true` for the ability to expand and collapse all rows at once.
|
||||||
|
|
||||||
<DataTable batchExpansion
|
<DataTable batchExpansion
|
||||||
headers="{[
|
headers="{[
|
||||||
|
|
@ -1381,54 +1378,42 @@ Set `batchExpansion` to `true` to expand and collapse all rows at once.
|
||||||
|
|
||||||
## Expandable and selectable rows
|
## Expandable and selectable rows
|
||||||
|
|
||||||
Combine `batchExpansion` and `batchSelection` for tables with both expandable and selectable rows.
|
The `batchExpansion` and `batchSelection` props can be used together.
|
||||||
|
|
||||||
<FileSource src="/framed/DataTable/DataTableExpandableSelectable" />
|
<FileSource src="/framed/DataTable/DataTableExpandableSelectable" />
|
||||||
|
|
||||||
## Skeleton
|
## 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" />
|
||||||
|
|
@ -7,7 +7,11 @@ components: ["DatePicker", "DatePickerInput", "DatePickerSkeleton"]
|
||||||
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.
|
Carbon uses the zero dependency [flatpickr](https://github.com/flatpickr/flatpickr) library for its underlying calendar implementation.
|
||||||
|
|
||||||
|
Set `datePickerType` to `"single"` or `"range"` for the calendar functionality.
|
||||||
|
|
||||||
|
Specify [flatpickr options](https://flatpickr.js.org/options/) through the `flatpickrProps` prop.
|
||||||
|
|
||||||
<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
|
<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
|
||||||
<div class="body-short-01">
|
<div class="body-short-01">
|
||||||
|
|
@ -17,27 +21,25 @@ components: ["DatePicker", "DatePickerInput", "DatePickerSkeleton"]
|
||||||
|
|
||||||
## Single
|
## Single
|
||||||
|
|
||||||
Set `datePickerType` to `"single"` for single date selection.
|
By default, the `flatpickr` option `static` is set to `true` so that the calendar is positioned inside the wrapper and next to the input element. This is required for the calendar position to work inside a [Modal](/components/Modal).
|
||||||
|
|
||||||
|
Set `flatpickrProps.static` to `false` to opt out of this behavior.
|
||||||
|
|
||||||
<FileSource src="/framed/DatePicker/DatePickerSingle" />
|
<FileSource src="/framed/DatePicker/DatePickerSingle" />
|
||||||
|
|
||||||
## Range
|
## Range
|
||||||
|
|
||||||
Set `datePickerType` to `"range"` to enable date range selection.
|
Set `datePickerType` to `"range"` for the range variant.
|
||||||
|
|
||||||
<FileSource src="/framed/DatePicker/DatePickerRange" />
|
<FileSource src="/framed/DatePicker/DatePickerRange" />
|
||||||
|
|
||||||
## DatePicker in a modal
|
## 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" />
|
<FileSource src="/framed/DatePicker/DatePickerModal" />
|
||||||
|
|
||||||
## Simple
|
## Simple
|
||||||
|
|
||||||
Create a simple date picker without a dropdown calendar.
|
By default, the "simple" date picker does not have a dropdown calendar.
|
||||||
|
|
||||||
<DatePicker>
|
<DatePicker>
|
||||||
<DatePickerInput labelText="Date of birth" placeholder="mm/dd/yyyy" />
|
<DatePickerInput labelText="Date of birth" placeholder="mm/dd/yyyy" />
|
||||||
|
|
@ -45,70 +47,52 @@ Create a simple date picker without a dropdown calendar.
|
||||||
|
|
||||||
## With helper text
|
## With helper text
|
||||||
|
|
||||||
Add helper text to provide additional context or formatting instructions.
|
|
||||||
|
|
||||||
<DatePicker>
|
<DatePicker>
|
||||||
<DatePickerInput labelText="Date of birth" helperText="Example: 01/12/1990" placeholder="mm/dd/yyyy" />
|
<DatePickerInput labelText="Date of birth" helperText="Example: 01/12/1990" placeholder="mm/dd/yyyy" />
|
||||||
</DatePicker>
|
</DatePicker>
|
||||||
|
|
||||||
## Hidden label
|
## 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
|
## Skeleton
|
||||||
|
|
||||||
Show a loading state with the skeleton component.
|
|
||||||
|
|
||||||
<DatePickerSkeleton />
|
<DatePickerSkeleton />
|
||||||
|
|
|
||||||
|
|
@ -7,9 +7,7 @@ components: ["Dropdown", "DropdownSkeleton"]
|
||||||
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
|
`Dropdown` is keyed for performance reasons.
|
||||||
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>
|
<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>
|
<div class="body-short-01">Every <code>items</code> object must have a unique "id" property.</div>
|
||||||
|
|
@ -17,33 +15,25 @@ have a unique `id` property for proper functionality.
|
||||||
|
|
||||||
## Default
|
## 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"},
|
<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
|
## Custom slot
|
||||||
|
|
||||||
Override the default slot to customize the display of each item. Access the item and
|
Override the default slot to customize the display of each item. Access the item and index through the `let:` directive.
|
||||||
index through the `let:` directive.
|
|
||||||
|
|
||||||
<FileSource src="/framed/Dropdown/DropdownSlot" />
|
<FileSource src="/framed/Dropdown/DropdownSlot" />
|
||||||
|
|
||||||
## Hidden label
|
## 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"},
|
<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 +')'
|
||||||
|
|
@ -53,15 +43,11 @@ receives the item object and returns the formatted string.
|
||||||
|
|
||||||
## 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" selectedId="0" items="{[{id: "0", text: "Slack"},
|
||||||
{id: "1", text: "Email"},
|
{id: "1", text: "Email"},
|
||||||
|
|
@ -69,72 +55,49 @@ Display the dropdown menu above the input by setting the `direction` prop to
|
||||||
|
|
||||||
## Light variant
|
## Light variant
|
||||||
|
|
||||||
Use the light variant for dropdowns on dark backgrounds by setting the `light` prop
|
|
||||||
to `true`.
|
|
||||||
|
|
||||||
<Dropdown light titleText="Contact" selectedId="0" items="{[{id: "0", text: "Slack"},
|
<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 variant
|
||||||
|
|
||||||
Display the dropdown inline with other content by setting the `type` prop to
|
|
||||||
`"inline"`. This variant removes the background and border.
|
|
||||||
|
|
||||||
<Dropdown type="inline" titleText="Contact" selectedId="0" items="{[{id: "0", text: "Slack"},
|
<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
|
|
||||||
provides more visual emphasis for important selections.
|
|
||||||
|
|
||||||
<Dropdown size="xl" titleText="Contact" selectedId="0" items="{[{id: "0", text: "Slack"},
|
<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
|
|
||||||
useful for compact layouts or secondary selections.
|
|
||||||
|
|
||||||
<Dropdown size="sm" titleText="Contact" selectedId="0" items="{[{id: "0", text: "Slack"},
|
<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
|
|
||||||
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"},
|
<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
|
|
||||||
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"},
|
<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
|
|
||||||
user interaction with the component.
|
|
||||||
|
|
||||||
<Dropdown disabled titleText="Contact" selectedId="0" items="{[{id: "0", text: "Slack"},
|
<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
|
## Disabled items
|
||||||
|
|
||||||
Disable specific items in the dropdown by setting the `disabled` property to
|
Use the `disabled` property in the `items` prop to disable specific items.
|
||||||
`true` in the item object. This allows for more granular control over available
|
|
||||||
selections.
|
|
||||||
|
|
||||||
<Dropdown
|
<Dropdown
|
||||||
selectedId="0"
|
selectedId="0"
|
||||||
|
|
@ -148,7 +111,4 @@ selections.
|
||||||
|
|
||||||
## Skeleton
|
## Skeleton
|
||||||
|
|
||||||
Display a loading state using the `DropdownSkeleton` component. This provides
|
|
||||||
visual feedback while the dropdown content is being loaded.
|
|
||||||
|
|
||||||
<DropdownSkeleton />
|
<DropdownSkeleton />
|
||||||
|
|
@ -3,19 +3,11 @@
|
||||||
import Preview from "../../components/Preview.svelte";
|
import Preview from "../../components/Preview.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
The `ExpandableTile` component creates a collapsible content container that can
|
|
||||||
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
|
## Default
|
||||||
|
|
||||||
Create an expandable tile that shows and hides content. The component uses a
|
This 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.
|
||||||
[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
|
It's unexpanded by default.
|
||||||
content that appears before and after expansion.
|
|
||||||
|
|
||||||
<ExpandableTile>
|
<ExpandableTile>
|
||||||
<div slot="above">
|
<div slot="above">
|
||||||
|
|
@ -33,8 +25,7 @@ content that appears before and after expansion.
|
||||||
|
|
||||||
## Custom tile heights
|
## Custom tile heights
|
||||||
|
|
||||||
Set custom heights for the tile content using CSS. This is useful when you need to
|
Set a custom height for the tiles on the "above" and "below" slots.
|
||||||
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>
|
||||||
|
|
@ -43,9 +34,6 @@ control the exact dimensions of the visible and hidden content.
|
||||||
|
|
||||||
## 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">Above the fold content here</div>
|
||||||
<div slot="below">Below the fold content here</div>
|
<div slot="below">Below the fold content here</div>
|
||||||
|
|
@ -53,9 +41,6 @@ Display the tile in its expanded state by default by setting the `expanded` prop
|
||||||
|
|
||||||
## 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">Above the fold content here</div>
|
||||||
<div slot="below">Below the fold content here</div>
|
<div slot="below">Below the fold content here</div>
|
||||||
|
|
@ -63,9 +48,6 @@ Use the light variant for expandable tiles on dark backgrounds by setting the
|
||||||
|
|
||||||
## 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">Above the fold content here</div>
|
||||||
<div slot="below">Below the fold content here</div>
|
<div slot="below">Below the fold content here</div>
|
||||||
|
|
@ -73,9 +55,7 @@ Customize the expand/collapse button labels using the `tileExpandedLabel` and
|
||||||
|
|
||||||
## With interactive content
|
## With interactive content
|
||||||
|
|
||||||
Handle interactive content within the tile by preventing event propagation. This
|
For tiles containing interactive content, use `stopPropagation` to prevent the tile from toggling.
|
||||||
ensures that clicks on interactive elements don't trigger the tile's expand/collapse
|
|
||||||
behavior.
|
|
||||||
|
|
||||||
<ExpandableTile tileExpandedLabel="View less" tileCollapsedLabel="View more">
|
<ExpandableTile tileExpandedLabel="View less" tileCollapsedLabel="View more">
|
||||||
<div slot="above">
|
<div slot="above">
|
||||||
|
|
|
||||||
|
|
@ -7,28 +7,23 @@ components: ["FileUploaderButton", "FileUploader", "FileUploaderDropContainer",
|
||||||
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
|
|
||||||
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)
|
## File uploader (button-only)
|
||||||
|
|
||||||
Create a simple file upload button using `FileUploaderButton`. By default, it
|
By default, the file uploader only accepts one file.
|
||||||
accepts a single file. Set `multiple` to `true` to allow multiple file selection.
|
|
||||||
|
Set `multiple` to `true` for multiple files to be accepted.
|
||||||
|
|
||||||
<FileUploaderButton labelText="Add file" />
|
<FileUploaderButton labelText="Add file" />
|
||||||
|
|
||||||
## Multiple files
|
## 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" />
|
<FileUploaderButton multiple labelText="Add files" />
|
||||||
|
|
||||||
## Custom button kind, size
|
## Custom button kind, size
|
||||||
|
|
||||||
Customize the button appearance using the `kind` and `size` props. The default is
|
By default, the `primary` small button kind is used.
|
||||||
a small primary button.
|
|
||||||
|
Use the `kind` and `size` props to customize the button.
|
||||||
|
|
||||||
<FileUploaderButton kind="secondary" size="field" />
|
<FileUploaderButton kind="secondary" size="field" />
|
||||||
<FileUploaderButton kind="tertiary" size="default" />
|
<FileUploaderButton kind="tertiary" size="default" />
|
||||||
|
|
@ -37,17 +32,17 @@ a small primary button.
|
||||||
|
|
||||||
## File uploader
|
## File uploader
|
||||||
|
|
||||||
The `FileUploader` component combines a button trigger with a list of uploaded
|
The `FileUploader` wraps `FileUploaderButton` and lists out uploaded files.
|
||||||
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.
|
The example below accepts multiple files with an extension of `.jpg` or `.jpeg`. It sets the status to `"complete"`; by default, the status is `"loading"`.
|
||||||
|
|
||||||
|
See the [item examples below](#item-uploading) for different statuses.
|
||||||
|
|
||||||
<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
|
## Clear files
|
||||||
|
|
||||||
Remove uploaded files from the `FileUploader` component in two ways:
|
There are two ways to clear files in `FileUploader`:
|
||||||
|
|
||||||
<UnorderedList svx-ignore style="margin-bottom: var(--cds-spacing-08)">
|
<UnorderedList svx-ignore style="margin-bottom: var(--cds-spacing-08)">
|
||||||
<ListItem>programmatically using the <strong>clearFiles</strong> accessor</ListItem>
|
<ListItem>programmatically using the <strong>clearFiles</strong> accessor</ListItem>
|
||||||
|
|
@ -58,29 +53,21 @@ Remove uploaded files from the `FileUploader` component in two ways:
|
||||||
|
|
||||||
## File uploader (disabled state)
|
## 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" />
|
<FileUploader disabled multiple labelTitle="Upload files" buttonLabel="Add files" labelDescription="Only JPEG files are accepted." accept="{['.jpg', '.jpeg']}" status="complete" />
|
||||||
|
|
||||||
## Item (uploading)
|
## 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 (edit)
|
||||||
|
|
||||||
Enable file deletion by setting the status to `"edit"`. Clicking the close icon
|
If the `status` is `"edit"`, clicking the close icon will dispatch a `delete` event.
|
||||||
dispatches a `delete` event with the item's ID.
|
|
||||||
|
The event detail contains the item `id`.
|
||||||
|
|
||||||
<FileUploaderItem id="readme" name="README.md" status="edit" on:delete={(e) => {
|
<FileUploaderItem id="readme" name="README.md" status="edit" on:delete={(e) => {
|
||||||
console.log(e.detail); // "readme"
|
console.log(e.detail); // "readme"
|
||||||
|
|
@ -88,15 +75,13 @@ dispatches a `delete` event with the item's ID.
|
||||||
|
|
||||||
## Item (edit status, invalid state)
|
## Item (edit status, invalid state)
|
||||||
|
|
||||||
Mark a file as invalid while keeping it editable. This shows an error icon and
|
An item can also have an edit status with an invalid state.
|
||||||
allows the user to remove the file.
|
|
||||||
|
|
||||||
<FileUploaderItem invalid id="readme" name="README.md" status="edit" on:delete />
|
<FileUploaderItem invalid id="readme" name="README.md" status="edit" on:delete />
|
||||||
|
|
||||||
## Item (edit status, invalid state with subject, body)
|
## Item (edit status, invalid state with subject, body)
|
||||||
|
|
||||||
Provide detailed error messages for invalid files using the `errorSubject` and
|
Use the `errorSubject` and `errorBody` props to customize the error message.
|
||||||
`errorBody` props. This helps users understand and resolve upload issues.
|
|
||||||
|
|
||||||
<FileUploaderItem
|
<FileUploaderItem
|
||||||
invalid
|
invalid
|
||||||
|
|
@ -110,8 +95,7 @@ Provide detailed error messages for invalid files using the `errorSubject` and
|
||||||
|
|
||||||
## Item sizes
|
## Item sizes
|
||||||
|
|
||||||
Customize the size of file uploader items using the `size` prop. The default size
|
The default `FileUploaderItem` size is "default".
|
||||||
is "default".
|
|
||||||
|
|
||||||
<FileUploaderItem size="default" name="README.md" status="uploading" />
|
<FileUploaderItem size="default" name="README.md" status="uploading" />
|
||||||
<FileUploaderItem size="field" name="README.md" status="uploading" />
|
<FileUploaderItem size="field" name="README.md" status="uploading" />
|
||||||
|
|
@ -119,11 +103,11 @@ is "default".
|
||||||
|
|
||||||
## Drop container
|
## Drop container
|
||||||
|
|
||||||
Use `FileUploaderDropContainer` for drag-and-drop file uploads. It supports file
|
The `FileUploaderDropContainer` accepts files through click and drop events.
|
||||||
validation and multiple file selection.
|
|
||||||
|
|
||||||
This example accepts files smaller than 1 kB and logs the selected files to the
|
Use the `validateFiles` prop to filter out files before they are set.
|
||||||
console.
|
|
||||||
|
The following example accepts files smaller than 1 kB.
|
||||||
|
|
||||||
<FileUploaderDropContainer
|
<FileUploaderDropContainer
|
||||||
multiple
|
multiple
|
||||||
|
|
@ -138,7 +122,4 @@ console.
|
||||||
|
|
||||||
## Skeleton
|
## Skeleton
|
||||||
|
|
||||||
Display a loading state using the `FileUploaderSkeleton` component. This provides
|
|
||||||
visual feedback while the file uploader content is being loaded.
|
|
||||||
|
|
||||||
<FileUploaderSkeleton />
|
<FileUploaderSkeleton />
|
||||||
|
|
@ -7,15 +7,9 @@
|
||||||
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
|
|
||||||
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
|
## Fluid form
|
||||||
|
|
||||||
Create a fluid-width form layout using the `FluidForm` component. This example
|
Note that the `inline` input variants cannot be used within a `FluidForm`.
|
||||||
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 />
|
||||||
|
|
@ -29,8 +23,4 @@ shows a basic login form with required fields.
|
||||||
|
|
||||||
## Invalid state
|
## 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" />
|
<FileSource src="/framed/FluidForm/FluidFormInvalid" />
|
||||||
|
|
@ -14,15 +14,8 @@ 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
|
|
||||||
various form controls like checkboxes, radio buttons, and select menus. The
|
|
||||||
`FormGroup` component helps organize related form controls with a legend.
|
|
||||||
|
|
||||||
## Form
|
## 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">
|
||||||
<Checkbox id="checkbox-0" labelText="Checkbox Label" checked />
|
<Checkbox id="checkbox-0" labelText="Checkbox Label" checked />
|
||||||
|
|
@ -70,9 +63,7 @@ shows a form with checkboxes, radio buttons, and a select menu.
|
||||||
|
|
||||||
## Prevent default behavior
|
## Prevent default behavior
|
||||||
|
|
||||||
Handle form submission by preventing the default browser behavior. Use
|
The forwarded `submit` event is not modified. Use `e.preventDefault()` to prevent the native form submission behavior.
|
||||||
`e.preventDefault()` to stop the native form submission and handle the event
|
|
||||||
programmatically.
|
|
||||||
|
|
||||||
<Form on:submit={e => {
|
<Form on:submit={e => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
|
||||||
|
|
@ -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
|
|
||||||
`Column` components to create flexible layouts that adapt to different screen
|
|
||||||
sizes. The grid supports various spacing options and column configurations.
|
|
||||||
|
|
||||||
## Default
|
## 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" />
|
||||||
|
|
|
||||||
|
|
@ -5,22 +5,15 @@
|
||||||
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">
|
<svelte:fragment slot="loading">
|
||||||
|
|
@ -33,32 +26,27 @@ to display a loading indicator and error message.
|
||||||
|
|
||||||
## 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"`, `"2x3"`, `"16x9"`, `"4x3"`, `"1x1"`, `"3x4"`, `"3x2"`, `"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
|
## Dynamic image source
|
||||||
|
|
||||||
Update the image source dynamically using the same `ImageLoader` instance. This
|
The same `ImageLoader` instance can be used to load different images.
|
||||||
allows for smooth transitions between different images.
|
|
||||||
|
|
||||||
<FileSource src="/framed/ImageLoader/DynamicImageLoader" />
|
<FileSource src="/framed/ImageLoader/DynamicImageLoader" />
|
||||||
|
|
|
||||||
|
|
@ -1,37 +1,18 @@
|
||||||
---
|
|
||||||
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" />
|
||||||
|
|
@ -39,6 +20,4 @@ The component supports different status states to indicate progress:
|
||||||
|
|
||||||
## 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" />
|
||||||
|
|
@ -7,29 +7,26 @@ 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.
|
Notification that appears inline.
|
||||||
|
|
||||||
See [detailed usage](https://carbondesignsystem.com/components/notification/usage).
|
See [detailed
|
||||||
|
usage](https://carbondesignsystem.com/components/notification/usage).
|
||||||
See also: [ToastNotification](ToastNotification)
|
See also: [ToastNotification](ToastNotification)
|
||||||
|
|
||||||
## Default
|
## Default (error)
|
||||||
|
|
||||||
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
|
## Prevent default close behavior
|
||||||
|
|
||||||
The component is controlled, allowing you to prevent the default close behavior using `e.preventDefault()`.
|
`InlineNotification` is a controlled component. Prevent the default close behavior using the `e.preventDefault()` method in the dispatched `on:close` event.
|
||||||
|
|
||||||
<InlineNotification title="Error" subtitle="An internal server error occurred." on:close={(e) => {
|
<InlineNotification title="Error" subtitle="An internal server error occurred." on:close={(e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
// custom close logic (e.g., transitions)
|
// custom close logic (e.g., transitions)
|
||||||
}} />
|
}} />
|
||||||
|
|
||||||
## Slottable title and subtitle
|
## Slottable title, subtitle
|
||||||
|
|
||||||
Customize the notification content using slots for more flexibility.
|
|
||||||
|
|
||||||
<InlineNotification>
|
<InlineNotification>
|
||||||
<strong slot="title">Error: </strong>
|
<strong slot="title">Error: </strong>
|
||||||
|
|
@ -38,7 +35,9 @@ Customize the notification content using slots for more flexibility.
|
||||||
|
|
||||||
## Accessible icon descriptions
|
## Accessible icon descriptions
|
||||||
|
|
||||||
Make notifications more accessible by providing custom descriptions for icons.
|
The status icon and close button icon descriptions appear on cursor hover and are read
|
||||||
|
by assistive technology. Default descriptions are provided in English and can be
|
||||||
|
overridden via `statusIconDescription` and `closeButtonDescription`.
|
||||||
|
|
||||||
<InlineNotification
|
<InlineNotification
|
||||||
title="错误"
|
title="错误"
|
||||||
|
|
@ -49,14 +48,10 @@ Make notifications more accessible by providing custom descriptions for icons.
|
||||||
|
|
||||||
## Hidden close button
|
## 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">
|
<svelte:fragment slot="actions">
|
||||||
<NotificationActionButton>Learn more</NotificationActionButton>
|
<NotificationActionButton>Learn more</NotificationActionButton>
|
||||||
|
|
@ -65,8 +60,6 @@ Add interactive elements to notifications using the actions slot.
|
||||||
|
|
||||||
## 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." />
|
||||||
<InlineNotification kind="info-square" title="New updates:" subtitle="Restart to get the latest updates." />
|
<InlineNotification kind="info-square" title="New updates:" subtitle="Restart to get the latest updates." />
|
||||||
|
|
@ -76,8 +69,6 @@ The component supports different notification types:
|
||||||
|
|
||||||
## 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." />
|
||||||
<InlineNotification lowContrast kind="info-square" title="New updates:" subtitle="Restart to get the latest updates." />
|
<InlineNotification lowContrast kind="info-square" title="New updates:" subtitle="Restart to get the latest updates." />
|
||||||
|
|
|
||||||
|
|
@ -8,19 +8,17 @@ components: ["Link", "OutboundLink"]
|
||||||
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
|
||||||
|
|
||||||
Create a basic link with the default styling.
|
|
||||||
|
|
||||||
<Link href="https://www.carbondesignsystem.com/">
|
<Link href="https://www.carbondesignsystem.com/">
|
||||||
Carbon Design System
|
Carbon Design System
|
||||||
</Link>
|
</Link>
|
||||||
|
|
||||||
## Target _blank
|
## Target _blank
|
||||||
|
|
||||||
For external links, the component automatically adds security attributes. You can override the `rel` attribute if needed.
|
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/).
|
||||||
|
|
||||||
|
You can override the `rel` attribute with a custom value.
|
||||||
|
|
||||||
<Link href="https://www.carbondesignsystem.com/" target="_blank">
|
<Link href="https://www.carbondesignsystem.com/" target="_blank">
|
||||||
Carbon Design System
|
Carbon Design System
|
||||||
|
|
@ -28,7 +26,7 @@ For external links, the component automatically adds security attributes. You ca
|
||||||
|
|
||||||
## Outbound link
|
## Outbound link
|
||||||
|
|
||||||
Use `OutboundLink` as a convenient alternative for external links.
|
An alternative to manually setting `target` to `"_blank"` is to use the `OutboundLink`.
|
||||||
|
|
||||||
<OutboundLink href="https://www.carbondesignsystem.com/">
|
<OutboundLink href="https://www.carbondesignsystem.com/">
|
||||||
Carbon Design System
|
Carbon Design System
|
||||||
|
|
@ -36,8 +34,6 @@ Use `OutboundLink` as a convenient alternative for external links.
|
||||||
|
|
||||||
## Inline variant
|
## 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/">
|
||||||
|
|
@ -47,7 +43,7 @@ Create links that flow naturally with surrounding text.
|
||||||
|
|
||||||
## Link with icon
|
## Link with icon
|
||||||
|
|
||||||
Add icons to links for better visual context. Note that `inline` must be `false` when using icons.
|
Note that `inline` must be `false` when rendering a link with an icon.
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
Visit the
|
Visit the
|
||||||
|
|
@ -56,34 +52,28 @@ Add icons to links for better visual context. Note that `inline` must be `false`
|
||||||
</Link>.
|
</Link>.
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
## Size variants
|
## Large size
|
||||||
|
|
||||||
The component supports different sizes to match your design needs:
|
|
||||||
|
|
||||||
<Link size="lg" href="https://www.carbondesignsystem.com/">
|
<Link size="lg" href="https://www.carbondesignsystem.com/">
|
||||||
Large link
|
Carbon Design System
|
||||||
</Link>
|
</Link>
|
||||||
<br />
|
|
||||||
<Link href="https://www.carbondesignsystem.com/">
|
## Small size
|
||||||
Default link
|
|
||||||
</Link>
|
|
||||||
<br />
|
|
||||||
<Link size="sm" href="https://www.carbondesignsystem.com/">
|
<Link size="sm" href="https://www.carbondesignsystem.com/">
|
||||||
Small link
|
Carbon Design System
|
||||||
</Link>
|
</Link>
|
||||||
|
|
||||||
## Disabled state
|
## Disabled
|
||||||
|
|
||||||
Disabled links render as plain text while maintaining accessibility.
|
A `disabled` link will render a `p` tag instead of an anchor element.
|
||||||
|
|
||||||
<Link disabled href="https://www.carbondesignsystem.com/">
|
<Link disabled href="https://www.carbondesignsystem.com/">
|
||||||
Disabled link
|
Carbon Design System
|
||||||
</Link>
|
</Link>
|
||||||
|
|
||||||
## Visited styles
|
## Visited styles
|
||||||
|
|
||||||
Show visited state styling for links.
|
|
||||||
|
|
||||||
<Link visited href="https://www.carbondesignsystem.com/">
|
<Link visited href="https://www.carbondesignsystem.com/">
|
||||||
Visited link
|
Carbon Design System
|
||||||
</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,23 @@
|
||||||
---
|
|
||||||
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.
|
In the example below, toggle the switch and reload the page. The updated theme should be persisted locally.
|
||||||
|
|
||||||
<FileSource src="/framed/LocalStorage/LocalStorage" />
|
<FileSource src="/framed/LocalStorage/LocalStorage" />
|
||||||
|
|
||||||
## Clear item, clear all
|
## Clear item, clear all
|
||||||
|
|
||||||
The component provides methods to manage stored data:
|
Use the `bind:this` directive to access the `clearItem` and `clearAll` methods.
|
||||||
|
|
||||||
- `clearItem`: Remove a specific key-value pair
|
Invoking `clearItem` will remove the persisted key value from the browser's local storage.
|
||||||
- `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.
|
Invoking `clearAll` will remove all key values.
|
||||||
|
|
||||||
|
In the following example, toggle the switch and reload the page. Then, click the "Clear storage" button. Refresh the page; the theme should be reset to the untoggled state.
|
||||||
|
|
||||||
<FileSource src="/framed/LocalStorage/LocalStorageClear" />
|
<FileSource src="/framed/LocalStorage/LocalStorageClear" />
|
||||||
|
|
@ -2,78 +2,60 @@
|
||||||
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
|
## Custom focus
|
||||||
|
|
||||||
Control which element receives focus when the modal opens. Use `selectorPrimaryFocus` to specify the target element using CSS selectors.
|
By default, the modal close button will be focused when opened.
|
||||||
|
|
||||||
|
Use the `selectorPrimaryFocus` to specify the element that should be focused when the modal is opened (e.g., `#id`, `.class`, `[data-attribute]`).
|
||||||
|
|
||||||
<FileSource src="/framed/Modal/ModalCustomFocus" />
|
<FileSource src="/framed/Modal/ModalCustomFocus" />
|
||||||
|
|
||||||
## Danger modal
|
## 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
|
## Has scrolling content
|
||||||
|
|
||||||
Enable vertical scrolling for modals with lengthy content. This ensures all content remains accessible while maintaining a reasonable modal height.
|
Setting `hasScrollingContent` to `true` increases the vertical space within the modal.
|
||||||
|
|
||||||
<FileSource src="/framed/Modal/ModalScrollingContent" />
|
<FileSource src="/framed/Modal/ModalScrollingContent" />
|
||||||
|
|
||||||
## Multiple modals
|
## Multiple modals
|
||||||
|
|
||||||
Stack multiple modals for complex workflows. Each modal maintains its own state and focus management.
|
|
||||||
|
|
||||||
<FileSource src="/framed/Modal/ModalMultiple" />
|
<FileSource src="/framed/Modal/ModalMultiple" />
|
||||||
|
|
||||||
## Multiple secondary buttons
|
## Multiple secondary buttons
|
||||||
|
|
||||||
Add up to two secondary actions using the `secondaryButtons` prop. This provides more flexibility than the single `secondaryButtonText` option.
|
Use the `secondaryButtons` prop to render two secondary buttons. The prop is a 2-tuple type that supersedes `secondaryButtonText`.
|
||||||
|
|
||||||
<FileSource src="/framed/Modal/3ButtonModal" />
|
<FileSource src="/framed/Modal/3ButtonModal" />
|
||||||
|
|
||||||
## Extra-small size
|
## 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
|
## 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" />
|
<FileSource src="/framed/Modal/ModalButtonWithIcon" />
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
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.
|
`MultiSelect` is keyed for performance reasons.
|
||||||
|
|
||||||
<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
|
<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>
|
<div class="body-short-01">Every <code>items</code> object must have a unique "id" property.</div>
|
||||||
|
|
@ -11,7 +11,12 @@ The `MultiSelect` component provides a dropdown interface for selecting multiple
|
||||||
|
|
||||||
## Default
|
## Default
|
||||||
|
|
||||||
Create a basic multi-select dropdown with three contact methods. By default, items are ordered alphabetically.
|
By default, items will be ordered alphabetically based on the `item.text` value.
|
||||||
|
To prevent this, see [#no-alphabetical-ordering](#no-alphabetical-ordering).
|
||||||
|
|
||||||
|
MultiSelect provides interactivity for a list of checkbox inputs. Those
|
||||||
|
checkboxes will remain rendered in the DOM and are submittable within forms.
|
||||||
|
Checkbox attributes can be adjusted via the `itemToInput` prop.
|
||||||
|
|
||||||
<MultiSelect titleText="Contact" label="Select contact methods..."
|
<MultiSelect titleText="Contact" label="Select contact methods..."
|
||||||
items="{[{id: "0", text: "Slack"},
|
items="{[{id: "0", text: "Slack"},
|
||||||
|
|
@ -21,7 +26,7 @@ Create a basic multi-select dropdown with three contact methods. By default, ite
|
||||||
|
|
||||||
## Format item display text
|
## Format item display text
|
||||||
|
|
||||||
Format the display text of items using the `itemToString` prop. This example appends the item ID in parentheses.
|
Use the `itemToString` prop to format the display of individual items without modifying the underlying value.
|
||||||
|
|
||||||
<MultiSelect itemToString={item => {
|
<MultiSelect itemToString={item => {
|
||||||
return item.text + ' (' + item.id +')'
|
return item.text + ' (' + item.id +')'
|
||||||
|
|
@ -34,13 +39,15 @@ Format the display text of items using the `itemToString` prop. This example app
|
||||||
|
|
||||||
## Custom slot
|
## Custom slot
|
||||||
|
|
||||||
Override the default slot to customize item rendering. This example shows how to access and use the item and index values.
|
For even more customization, use the default slot.
|
||||||
|
|
||||||
|
Access the `item` and `index` values through the `let:` directive.
|
||||||
|
|
||||||
<FileSource src="/framed/MultiSelect/MultiSelectSlot" />
|
<FileSource src="/framed/MultiSelect/MultiSelectSlot" />
|
||||||
|
|
||||||
## No alphabetical ordering
|
## No alphabetical ordering
|
||||||
|
|
||||||
Prevent automatic alphabetical ordering by passing a no-op function to `sortItem`. This maintains the original order of items.
|
To prevent alphabetical item ordering, pass a noop function to the `sortItem` prop.
|
||||||
|
|
||||||
<MultiSelect titleText="Contact" label="Select contact methods..."
|
<MultiSelect titleText="Contact" label="Select contact methods..."
|
||||||
items="{[{id: "0", text: "Slack"},
|
items="{[{id: "0", text: "Slack"},
|
||||||
|
|
@ -51,7 +58,9 @@ Prevent automatic alphabetical ordering by passing a no-op function to `sortItem
|
||||||
|
|
||||||
## Filterable
|
## Filterable
|
||||||
|
|
||||||
Enable filtering by setting `filterable` to `true`. This example includes a placeholder text for the filter input.
|
Set `filterable` to `true` to enable filtering.
|
||||||
|
|
||||||
|
`$$restProps` are spread to the underlying input element.
|
||||||
|
|
||||||
<MultiSelect spellcheck="false" filterable titleText="Contact" placeholder="Filter contact methods..."
|
<MultiSelect spellcheck="false" filterable titleText="Contact" placeholder="Filter contact methods..."
|
||||||
items="{[{id: "0", text: "Slack"},
|
items="{[{id: "0", text: "Slack"},
|
||||||
|
|
@ -61,7 +70,7 @@ Enable filtering by setting `filterable` to `true`. This example includes a plac
|
||||||
|
|
||||||
## Initial selected items
|
## Initial selected items
|
||||||
|
|
||||||
Pre-select items by passing an array of item IDs to `selectedIds`. This example pre-selects Slack and Email.
|
To select (or bind) items, pass an array of item ids to `selectedIds`.
|
||||||
|
|
||||||
<MultiSelect selectedIds="{["0", "1"]}" titleText="Contact" label="Select contact methods..."
|
<MultiSelect selectedIds="{["0", "1"]}" titleText="Contact" label="Select contact methods..."
|
||||||
items="{[{id: "0", text: "Slack"},
|
items="{[{id: "0", text: "Slack"},
|
||||||
|
|
@ -71,24 +80,19 @@ Pre-select items by passing an array of item IDs to `selectedIds`. This example
|
||||||
|
|
||||||
## Multiple multi-select dropdowns
|
## Multiple multi-select dropdowns
|
||||||
|
|
||||||
This example demonstrates how to manage multiple dropdowns in a form with coordinated state.
|
|
||||||
|
|
||||||
<FileSource src="/framed/MultiSelect/MultipleMultiSelect" />
|
<FileSource src="/framed/MultiSelect/MultipleMultiSelect" />
|
||||||
|
|
||||||
## Format checkbox values
|
## 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.
|
Use the `itemToInput` prop to customize the user-selectable checkbox values.
|
||||||
This will also override the underlying hidden inputs used for form submission.
|
This will also override the underlying hidden inputs used for form submission.
|
||||||
|
|
||||||
|
For example:
|
||||||
|
|
||||||
```js
|
```js
|
||||||
itemToInput={(item) => {
|
(item) => ({name: `Contact_${item.id}`], value: item.id})
|
||||||
return {
|
|
||||||
name: `Contact_${item.id}`,
|
|
||||||
value: item.id
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
```
|
```
|
||||||
|
|
||||||
The above function sets the `name` attribute to
|
The above function sets the `name` attribute to
|
||||||
|
|
@ -108,7 +112,7 @@ renders, along with each respective item's `id` set to the `value` attribute.
|
||||||
|
|
||||||
## Top direction
|
## Top direction
|
||||||
|
|
||||||
Display the dropdown menu above the input by setting `direction` to `"top"`. This is useful when space below is limited.
|
Set `direction` to `"top"` for the dropdown menu to appear above the input.
|
||||||
|
|
||||||
<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"},
|
||||||
|
|
@ -118,7 +122,9 @@ Display the dropdown menu above the input by setting `direction` to `"top"`. Thi
|
||||||
|
|
||||||
## Hidden label
|
## Hidden label
|
||||||
|
|
||||||
Hide the label visually while maintaining accessibility by setting `hideLabel` to `true`. The label is still available to screen readers.
|
Set `hideLabel` to `true` to visually hide the label.
|
||||||
|
|
||||||
|
Note that you should still specify a `label` for accessibility.
|
||||||
|
|
||||||
<MultiSelect titleText="Contact" label="Select contact methods..." hideLabel
|
<MultiSelect titleText="Contact" label="Select contact methods..." hideLabel
|
||||||
items="{[{id: "0", text: "Slack"},
|
items="{[{id: "0", text: "Slack"},
|
||||||
|
|
@ -128,8 +134,6 @@ Hide the label visually while maintaining accessibility by setting `hideLabel` t
|
||||||
|
|
||||||
## Light variant
|
## 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"},
|
||||||
{id: "1", text: "Email"},
|
{id: "1", text: "Email"},
|
||||||
|
|
@ -138,8 +142,6 @@ Use the light variant for dark backgrounds by setting `light` to `true`. This pr
|
||||||
|
|
||||||
## Inline variant
|
## Inline variant
|
||||||
|
|
||||||
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"},
|
||||||
{id: "1", text: "Email"},
|
{id: "1", text: "Email"},
|
||||||
|
|
@ -148,8 +150,6 @@ Display the dropdown inline with other content by setting `type` to `"inline"`.
|
||||||
|
|
||||||
## 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"},
|
||||||
{id: "1", text: "Email"},
|
{id: "1", text: "Email"},
|
||||||
|
|
@ -158,8 +158,6 @@ Use the extra-large size for prominent selections by setting `size` to `"xl"`. T
|
||||||
|
|
||||||
## 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"},
|
||||||
{id: "1", text: "Email"},
|
{id: "1", text: "Email"},
|
||||||
|
|
@ -168,8 +166,6 @@ Use the small size for compact layouts by setting `size` to `"sm"`. This is idea
|
||||||
|
|
||||||
## Invalid state
|
## Invalid state
|
||||||
|
|
||||||
Indicate an invalid selection by setting `invalid` to `true`. This example shows a required field error.
|
|
||||||
|
|
||||||
<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"},
|
||||||
{id: "1", text: "Email"},
|
{id: "1", text: "Email"},
|
||||||
|
|
@ -178,8 +174,6 @@ Indicate an invalid selection by setting `invalid` to `true`. This example shows
|
||||||
|
|
||||||
## 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"},
|
||||||
{id: "1", text: "Email"},
|
{id: "1", text: "Email"},
|
||||||
|
|
@ -188,8 +182,6 @@ Indicate a warning state by setting `warn` to `true`. This example shows a warni
|
||||||
|
|
||||||
## 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"},
|
||||||
|
|
@ -198,7 +190,7 @@ Disable the entire dropdown by setting `disabled` to `true`. This prevents all u
|
||||||
|
|
||||||
## Disabled items
|
## Disabled items
|
||||||
|
|
||||||
Disable specific items using the `disabled` property in the `items` prop. This example disables the Email option.
|
Use the `disabled` property in the `items` prop to disable specific items.
|
||||||
|
|
||||||
<MultiSelect
|
<MultiSelect
|
||||||
titleText="Contact"
|
titleText="Contact"
|
||||||
|
|
|
||||||
|
|
@ -7,100 +7,74 @@ 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
|
||||||
|
|
||||||
Create a basic number input with increment and decrement controls. The input accepts numerical values and provides visual feedback.
|
This component requires a numerical value for `value`.
|
||||||
|
|
||||||
|
See [#no-value](#no-value) to allow for an empty value.
|
||||||
|
|
||||||
<NumberInput label="Clusters" value={0} />
|
<NumberInput label="Clusters" value={0} />
|
||||||
|
|
||||||
## No value
|
## With helper text
|
||||||
|
|
||||||
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" />
|
<NumberInput label="Clusters" value={0} helperText="Clusters provisioned in your region" />
|
||||||
|
|
||||||
## Minimum and maximum values
|
## 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
|
## With step value
|
||||||
|
|
||||||
Control the increment/decrement step size using the `step` prop. This example uses a step of 0.1.
|
|
||||||
|
|
||||||
<NumberInput value="{1}" helperText="Step of 0.1" step={0.1} label="Clusters" />
|
<NumberInput value="{1}" helperText="Step of 0.1" step={0.1} label="Clusters" />
|
||||||
|
|
||||||
## Hidden label
|
## No value
|
||||||
|
|
||||||
Hide the label visually while maintaining accessibility by setting `hideLabel` to `true`. The label is still available to screen readers.
|
Set `allowEmpty` to `true` to allow for no value.
|
||||||
|
|
||||||
|
Set `value` to `null` to denote "no value."
|
||||||
|
|
||||||
|
<FileSource src="/framed/NumberInput/NumberInputEmpty" />
|
||||||
|
|
||||||
|
## Hidden label
|
||||||
|
|
||||||
<NumberInput hideLabel label="Clusters" value={0} />
|
<NumberInput hideLabel label="Clusters" value={0} />
|
||||||
|
|
||||||
## Extra-large size
|
## Hidden steppers
|
||||||
|
|
||||||
Use the extra-large size for prominent inputs by setting `size` to `"xl"`. This provides more visual emphasis.
|
<NumberInput hideSteppers label="Clusters" value={0} />
|
||||||
|
|
||||||
|
## Light variant
|
||||||
|
|
||||||
|
<NumberInput light label="Clusters" value={0} />
|
||||||
|
|
||||||
|
## Read-only variant
|
||||||
|
|
||||||
|
<NumberInput readonly label="Clusters" value={0} />
|
||||||
|
|
||||||
|
## Extra-large size
|
||||||
|
|
||||||
<NumberInput size="xl" label="Clusters" value={0} />
|
<NumberInput size="xl" label="Clusters" value={0} />
|
||||||
|
|
||||||
## Small size
|
## Small size
|
||||||
|
|
||||||
Use the small size for compact layouts by setting `size` to `"sm"`. This is ideal for secondary inputs.
|
|
||||||
|
|
||||||
<NumberInput size="sm" label="Clusters" value={0} />
|
<NumberInput size="sm" label="Clusters" value={0} />
|
||||||
|
|
||||||
## Light variant
|
|
||||||
|
|
||||||
Use the light variant for dark backgrounds by setting `light` to `true`. This provides better contrast in dark themes.
|
|
||||||
|
|
||||||
<NumberInput light label="Clusters" value={0} />
|
|
||||||
|
|
||||||
## Invalid state
|
## 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} />
|
<NumberInput invalid invalidText="Invalid value" label="Clusters" value={0} />
|
||||||
|
|
||||||
## Warning state
|
## 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} />
|
<NumberInput warn warnText="A high number may impact initial rollout" label="Clusters" value={25} />
|
||||||
|
|
||||||
## Disabled state
|
## Disabled state
|
||||||
|
|
||||||
Disable the input by setting `disabled` to `true`. This prevents all user interaction.
|
|
||||||
|
|
||||||
<NumberInput disabled label="Clusters" value={0} />
|
<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
|
## 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 />
|
||||||
|
|
@ -7,18 +7,14 @@ components: ["OrderedList", "ListItem"]
|
||||||
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.
|
|
||||||
|
|
||||||
<InlineNotification svx-ignore lowContrast title="Tip:" kind="info" hideCloseButton>
|
<InlineNotification svx-ignore lowContrast title="Tip:" kind="info" hideCloseButton>
|
||||||
<div class="body-short-01">
|
<div class="body-short-01">
|
||||||
Consider using the <Link href="/components/RecursiveList#ordered">RecursiveList</Link> component for rendering tree structured data.
|
Consider using the <Link href="/components/RecursiveList#ordered">RecursiveList</Link> component for rendering tree structured data.
|
||||||
</div>
|
</div>
|
||||||
</InlineNotification>
|
</InlineNotification>
|
||||||
|
|
||||||
## Default
|
## Default
|
||||||
|
|
||||||
Create a basic ordered list by wrapping `ListItem` components within `OrderedList`.
|
|
||||||
|
|
||||||
<OrderedList>
|
<OrderedList>
|
||||||
<ListItem>Ordered list item</ListItem>
|
<ListItem>Ordered list item</ListItem>
|
||||||
<ListItem>Ordered list item</ListItem>
|
<ListItem>Ordered list item</ListItem>
|
||||||
|
|
@ -27,8 +23,6 @@ Create a basic ordered list by wrapping `ListItem` components within `OrderedLis
|
||||||
|
|
||||||
## With links
|
## With links
|
||||||
|
|
||||||
Add interactive elements like `Link` components within list items.
|
|
||||||
|
|
||||||
<OrderedList>
|
<OrderedList>
|
||||||
<ListItem>
|
<ListItem>
|
||||||
<Link href="#">Ordered list item</Link>
|
<Link href="#">Ordered list item</Link>
|
||||||
|
|
@ -43,8 +37,6 @@ Add interactive elements like `Link` components within list items.
|
||||||
|
|
||||||
## Nested
|
## Nested
|
||||||
|
|
||||||
Set the `nested` prop to `true` to create hierarchical lists with proper indentation and numbering.
|
|
||||||
|
|
||||||
<OrderedList>
|
<OrderedList>
|
||||||
<ListItem>
|
<ListItem>
|
||||||
Ordered list level 1
|
Ordered list level 1
|
||||||
|
|
@ -65,7 +57,7 @@ Set the `nested` prop to `true` to create hierarchical lists with proper indenta
|
||||||
|
|
||||||
## 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>
|
||||||
|
|
@ -87,7 +79,7 @@ Enable native browser list styles by setting the `native` prop to `true`. This i
|
||||||
|
|
||||||
## Expressive styles
|
## Expressive styles
|
||||||
|
|
||||||
Use Carbon's expressive typesetting by setting the `expressive` prop to `true`.
|
Set `expressive` to `true` to use Carbon's expressive typesetting.
|
||||||
|
|
||||||
<OrderedList expressive>
|
<OrderedList expressive>
|
||||||
<ListItem><Link size="lg" href="#">Ordered list item</Link></ListItem>
|
<ListItem><Link size="lg" href="#">Ordered list item</Link></ListItem>
|
||||||
|
|
|
||||||
|
|
@ -8,12 +8,8 @@ components: ["OverflowMenu", "OverflowMenuItem"]
|
||||||
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" />
|
||||||
<OverflowMenuItem href="https://cloud.ibm.com/docs/api-gateway/" text="API documentation" />
|
<OverflowMenuItem href="https://cloud.ibm.com/docs/api-gateway/" text="API documentation" />
|
||||||
|
|
@ -22,7 +18,7 @@ Create a basic overflow menu by wrapping `OverflowMenuItem` components within `O
|
||||||
|
|
||||||
## Flipped
|
## Flipped
|
||||||
|
|
||||||
Set `flipped` to `true` to position the menu to the left of the button.
|
Set `flipped` to `true` for the menu to be positioned to the left of the button.
|
||||||
|
|
||||||
<OverflowMenu flipped>
|
<OverflowMenu flipped>
|
||||||
<OverflowMenuItem text="Manage credentials" />
|
<OverflowMenuItem text="Manage credentials" />
|
||||||
|
|
@ -30,9 +26,7 @@ Set `flipped` to `true` to position the menu to the left of the button.
|
||||||
<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" />
|
||||||
|
|
@ -42,8 +36,6 @@ Set `direction` to `"top"` to position the menu above the button.
|
||||||
|
|
||||||
## 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" />
|
||||||
<OverflowMenuItem href="https://cloud.ibm.com/docs/api-gateway/" text="API documentation" />
|
<OverflowMenuItem href="https://cloud.ibm.com/docs/api-gateway/" text="API documentation" />
|
||||||
|
|
@ -52,8 +44,6 @@ Enable the light variant by setting `light` to `true`.
|
||||||
|
|
||||||
## 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" />
|
||||||
<OverflowMenuItem href="https://cloud.ibm.com/docs/api-gateway/" text="API documentation" />
|
<OverflowMenuItem href="https://cloud.ibm.com/docs/api-gateway/" text="API documentation" />
|
||||||
|
|
@ -62,8 +52,6 @@ Set `size` to `"xl"` for an extra-large overflow menu.
|
||||||
|
|
||||||
## 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" />
|
||||||
<OverflowMenuItem href="https://cloud.ibm.com/docs/api-gateway/" text="API documentation" />
|
<OverflowMenuItem href="https://cloud.ibm.com/docs/api-gateway/" text="API documentation" />
|
||||||
|
|
@ -72,7 +60,7 @@ Set `size` to `"sm"` for a small overflow menu.
|
||||||
|
|
||||||
## 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" />
|
||||||
|
|
@ -82,8 +70,6 @@ Set `primaryFocus` to `true` on a menu item to focus it when opening the dropdow
|
||||||
|
|
||||||
## Custom trigger icon
|
## Custom trigger icon
|
||||||
|
|
||||||
Replace the default vertical overflow menu icon with a custom icon.
|
|
||||||
|
|
||||||
<OverflowMenu icon={Add}>
|
<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" />
|
||||||
|
|
@ -92,8 +78,6 @@ Replace the default vertical overflow menu icon with a custom icon.
|
||||||
|
|
||||||
## 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>
|
||||||
<OverflowMenuItem text="Manage credentials" />
|
<OverflowMenuItem text="Manage credentials" />
|
||||||
|
|
@ -103,7 +87,7 @@ Use the `menu` slot to customize the trigger button content.
|
||||||
|
|
||||||
## Disabled items
|
## Disabled items
|
||||||
|
|
||||||
Set `disabled` to `true` to disable menu items. Use `hasDivider` to add visual separation between items.
|
Disable menu items by setting `disabled` to `true`.
|
||||||
|
|
||||||
<OverflowMenu>
|
<OverflowMenu>
|
||||||
<OverflowMenuItem text="Create key" />
|
<OverflowMenuItem text="Create key" />
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
|
||||||
Create a basic pagination component with default page size options.
|
<Pagination totalItems={102} pageSizes="{[10, 15, 20]}" />
|
||||||
|
|
||||||
<Pagination totalItems={102} pageSizes={[10, 15, 20]} />
|
|
||||||
|
|
||||||
## Current page
|
## 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} />
|
|
||||||
|
|
||||||
## 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
|
## 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,11 +3,9 @@
|
||||||
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` renders `10` items and does not loop by default.
|
||||||
|
|
||||||
<PaginationNav />
|
<PaginationNav />
|
||||||
|
|
||||||
|
|
@ -17,35 +15,37 @@ Use the `page` prop to bind to the current page number.
|
||||||
|
|
||||||
<FileSource src="/framed/PaginationNav/PaginationNavReactive" />
|
<FileSource src="/framed/PaginationNav/PaginationNavReactive" />
|
||||||
|
|
||||||
## Total pages
|
## Total
|
||||||
|
|
||||||
Specify the total number of pages using the `total` prop.
|
Use the `total` prop to specify the number of pages.
|
||||||
|
|
||||||
<PaginationNav total={3} />
|
<PaginationNav total={3} />
|
||||||
|
|
||||||
## Loop navigation
|
## Loopable
|
||||||
|
|
||||||
Set `loop` to `true` to enable circular navigation between pages.
|
Set `loop` to `true` for navigation to be looped.
|
||||||
|
|
||||||
<PaginationNav total={3} loop />
|
<PaginationNav total={3} loop />
|
||||||
|
|
||||||
## Visible pages
|
## Shown
|
||||||
|
|
||||||
Control the number of visible page numbers with the `shown` prop.
|
If `total` is greater than `10`, the number of items shown will be truncated to `10`.
|
||||||
|
|
||||||
<PaginationNav total={100} shown={5} />
|
Use `shown` to override the number of items shown.
|
||||||
|
|
||||||
|
<PaginationNav total={100} shown={5} />
|
||||||
|
|
||||||
## Custom button text
|
## Custom button text
|
||||||
|
|
||||||
Customize the navigation button text using `forwardText` and `backwardText`.
|
Use the `forwardText` and `backwardText` props to customize the button text.
|
||||||
|
|
||||||
<PaginationNav
|
<PaginationNav
|
||||||
forwardText="Next"
|
forwardText="Next"
|
||||||
backwardText="Previous"
|
backwardText="Previous"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
## Tooltip position
|
## Tooltip Position
|
||||||
|
|
||||||
Set the tooltip position relative to the navigation buttons using `tooltipPosition`.
|
Use the `tooltipPosition` prop to change the alignment of the tooltip.
|
||||||
|
|
||||||
<PaginationNav tooltipPosition="outside" total={3} loop />
|
<PaginationNav tooltipPosition="outside" total={3} loop />
|
||||||
|
|
@ -3,12 +3,8 @@
|
||||||
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
|
||||||
|
|
@ -25,54 +21,36 @@ Set prop `type` to `"text"` to toggle password visibility.
|
||||||
|
|
||||||
## 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
|
## Inline
|
||||||
|
|
||||||
Display the input with an inline label layout.
|
|
||||||
|
|
||||||
<PasswordInput inline labelText="Password" placeholder="Enter password..." />
|
<PasswordInput inline labelText="Password" placeholder="Enter password..." />
|
||||||
|
|
||||||
## Extra-large size
|
## 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
|
## Warning state
|
||||||
|
|
||||||
Show a warning message for non-critical issues.
|
|
||||||
|
|
||||||
<PasswordInput warn warnText="Password has been reset." labelText="Password" placeholder="Enter password..." />
|
<PasswordInput warn warnText="Password has been reset." labelText="Password" placeholder="Enter password..." />
|
||||||
|
|
||||||
## Disabled state
|
## 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
|
## 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..." />
|
<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
|
||||||
|
|
||||||
Create a basic popover with absolute positioning.
|
By default, the position of the popover component is absolute.
|
||||||
|
|
||||||
<div data-outline>
|
<div data-outline>
|
||||||
Parent
|
Parent
|
||||||
|
|
@ -18,7 +16,7 @@ Create a basic popover with absolute positioning.
|
||||||
|
|
||||||
## 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
|
||||||
|
|
@ -29,7 +27,7 @@ Set `relative` to `true` to position the popover relative to its parent element.
|
||||||
|
|
||||||
## 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
|
||||||
|
|
@ -113,8 +111,6 @@ The default `align` value is `"top"`.
|
||||||
|
|
||||||
## With caret
|
## With caret
|
||||||
|
|
||||||
Add a caret indicator to the popover using the `caret` prop.
|
|
||||||
|
|
||||||
<div data-outline>
|
<div data-outline>
|
||||||
Parent
|
Parent
|
||||||
<Popover caret open>
|
<Popover caret open>
|
||||||
|
|
@ -124,7 +120,9 @@ Add a caret indicator to the popover using the `caret` prop.
|
||||||
|
|
||||||
## 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
|
||||||
|
|
@ -135,8 +133,6 @@ By default, the caret is aligned "top". Possible `align` values include `"top"`,
|
||||||
|
|
||||||
## Light variant
|
## Light variant
|
||||||
|
|
||||||
Enable the light variant for use on dark backgrounds.
|
|
||||||
|
|
||||||
<div data-outline>
|
<div data-outline>
|
||||||
Parent
|
Parent
|
||||||
<Popover light open>
|
<Popover light open>
|
||||||
|
|
@ -146,8 +142,6 @@ Enable the light variant for use on dark backgrounds.
|
||||||
|
|
||||||
## High contrast variant
|
## High contrast variant
|
||||||
|
|
||||||
Enable the high contrast variant for improved visibility.
|
|
||||||
|
|
||||||
<div data-outline>
|
<div data-outline>
|
||||||
Parent
|
Parent
|
||||||
<Popover highContrast open>
|
<Popover highContrast open>
|
||||||
|
|
|
||||||
|
|
@ -3,70 +3,66 @@
|
||||||
import Preview from "../../components/Preview.svelte";
|
import Preview from "../../components/Preview.svelte";
|
||||||
</script>
|
</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
|
## Default
|
||||||
|
|
||||||
Create an indeterminate progress bar that continuously animates.
|
Without a specified `value` prop, the progress bar is indeterminate.
|
||||||
|
|
||||||
<ProgressBar helperText="Loading..." />
|
<ProgressBar helperText="Loading..." />
|
||||||
|
|
||||||
## Small size
|
## Small size
|
||||||
|
|
||||||
Use the small size variant for compact layouts.
|
Specify `size="sm"` to use the small variant.
|
||||||
|
|
||||||
<ProgressBar size="sm" helperText="Loading..." />
|
<ProgressBar size="sm" helperText="Loading..." />
|
||||||
|
|
||||||
## Percentage
|
## Percentage
|
||||||
|
|
||||||
Display progress as a percentage using the `value` prop.
|
Specify a `value` for the progress bar to be determinate.
|
||||||
|
|
||||||
<ProgressBar value={40} labelText="Upload status" helperText="40 MB of 100 MB" />
|
<ProgressBar value={40} labelText="Upload status" helperText="40 MB of 100 MB" />
|
||||||
|
|
||||||
## Finished status
|
## Finished status
|
||||||
|
|
||||||
Show completion status with a checkmark icon.
|
Specify `status="finished"` for the progress bar.
|
||||||
|
|
||||||
<ProgressBar value={100} status="finished" labelText="Upload file" helperText="Upload complete" />
|
<ProgressBar value={100} status="finished" labelText="Upload file" helperText="Upload complete" />
|
||||||
|
|
||||||
## Error status
|
## Error status
|
||||||
|
|
||||||
Indicate errors with an error icon and red styling.
|
Specify `status="error"` for the progress bar.
|
||||||
|
|
||||||
<ProgressBar value={0} status="error" labelText="Upload file" helperText="Invalid file format" />
|
<ProgressBar value={0} status="error" labelText="Upload file" helperText="Invalid file format" />
|
||||||
|
|
||||||
## Custom max value
|
## Custom max value
|
||||||
|
|
||||||
Set a custom maximum value for the progress bar.
|
The default `max` value is `100`.
|
||||||
|
|
||||||
<ProgressBar value={40} max={200} labelText="Upload status" helperText="40 MB of 200 MB" />
|
<ProgressBar value={40} max={200} labelText="Upload status" helperText="40 MB of 200 MB" />
|
||||||
|
|
||||||
## Hidden label
|
## Hidden label
|
||||||
|
|
||||||
Visually hide the label while maintaining accessibility.
|
It's recommended that you provide a `labelText` for accessibility.
|
||||||
|
|
||||||
|
Use `hideLabel` to visually hide the label text.
|
||||||
|
|
||||||
<ProgressBar hideLabel value={40} labelText="Upload status" helperText="40 MB of 100 MB" />
|
<ProgressBar hideLabel value={40} labelText="Upload status" helperText="40 MB of 100 MB" />
|
||||||
|
|
||||||
## Inline variant
|
## Inline variant
|
||||||
|
|
||||||
Use the inline variant to display progress without helper text.
|
The inline variant visually hides the `helperText`.
|
||||||
|
|
||||||
<ProgressBar kind="inline" value={40} labelText="Upload status" helperText="40 MB of 100 MB" />
|
<ProgressBar kind="inline" value={40} labelText="Upload status" helperText="40 MB of 100 MB" />
|
||||||
|
|
||||||
## Indented variant
|
## 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" />
|
<ProgressBar kind="indented" value={40} labelText="Upload status" helperText="40 MB of 100 MB" />
|
||||||
|
|
||||||
## Indented status variant
|
## Indented status variant
|
||||||
|
|
||||||
Combine the indented variant with status indicators.
|
|
||||||
|
|
||||||
<ProgressBar kind="indented" status="finished" value={40} labelText="Upload file" helperText="Upload complete" />
|
<ProgressBar kind="indented" status="finished" value={40} labelText="Upload file" helperText="Upload complete" />
|
||||||
|
|
||||||
## UX example
|
## UX example
|
||||||
|
|
||||||
Demonstrate a complete upload flow with start and end states.
|
This example shows how to animate the progress bar from 0 to 100% with start and end states.
|
||||||
|
|
||||||
<FileSource src="/framed/ProgressBar/ProgressBarUx" />
|
<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
|
||||||
|
|
@ -34,7 +30,9 @@ Create a horizontal progress indicator with four steps.
|
||||||
|
|
||||||
## 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
|
||||||
|
|
@ -57,14 +55,12 @@ Disable automatic step selection when clicking completed steps.
|
||||||
|
|
||||||
## 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
|
||||||
label="Step 1"
|
label="Step 1"
|
||||||
|
|
@ -82,8 +78,6 @@ Mark a step as invalid to indicate an error state.
|
||||||
|
|
||||||
## Disabled steps
|
## Disabled steps
|
||||||
|
|
||||||
Disable specific steps to prevent user interaction.
|
|
||||||
|
|
||||||
<ProgressIndicator>
|
<ProgressIndicator>
|
||||||
<ProgressStep complete
|
<ProgressStep complete
|
||||||
label="Step 1"
|
label="Step 1"
|
||||||
|
|
@ -101,8 +95,6 @@ Disable specific steps to prevent user interaction.
|
||||||
|
|
||||||
## Spaced-equally
|
## Spaced-equally
|
||||||
|
|
||||||
Distribute steps evenly across the available space.
|
|
||||||
|
|
||||||
<ProgressIndicator spaceEqually>
|
<ProgressIndicator spaceEqually>
|
||||||
<ProgressStep
|
<ProgressStep
|
||||||
label="Really long label"
|
label="Really long label"
|
||||||
|
|
@ -120,8 +112,6 @@ Distribute steps evenly across the available space.
|
||||||
|
|
||||||
## Vertical
|
## Vertical
|
||||||
|
|
||||||
Display steps in a vertical layout.
|
|
||||||
|
|
||||||
<ProgressIndicator vertical>
|
<ProgressIndicator vertical>
|
||||||
<ProgressStep
|
<ProgressStep
|
||||||
label="Really long label"
|
label="Really long label"
|
||||||
|
|
@ -139,12 +129,10 @@ Display steps in a vertical layout.
|
||||||
|
|
||||||
## 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,11 +7,9 @@ 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
|
||||||
|
|
||||||
Create a group of radio buttons with a shared name and legend.
|
The `name` prop set on `RadioButtonGroup` is passed to the individual `RadioButton` inputs.
|
||||||
|
|
||||||
<RadioButtonGroup legendText="Storage tier (disk)" name="plan" selected="standard">
|
<RadioButtonGroup legendText="Storage tier (disk)" name="plan" selected="standard">
|
||||||
<RadioButton labelText="Free (1 GB)" value="free" />
|
<RadioButton labelText="Free (1 GB)" value="free" />
|
||||||
|
|
@ -21,7 +19,9 @@ Create a group of radio buttons with a shared name and legend.
|
||||||
|
|
||||||
## Hidden legend
|
## Hidden legend
|
||||||
|
|
||||||
Visually hide the legend while maintaining accessibility.
|
It's recommended that you provide a legend for accessibility.
|
||||||
|
|
||||||
|
Use `hideLegend` to visually hide the legend text.
|
||||||
|
|
||||||
<RadioButtonGroup hideLegend legendText="Storage tier (disk)" name="plan-legend" 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" />
|
||||||
|
|
@ -31,7 +31,7 @@ Visually hide the legend while maintaining accessibility.
|
||||||
|
|
||||||
## 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 name="plan-legend-slot" selected="standard">
|
||||||
<div slot="legendText" style:display="flex">
|
<div slot="legendText" style:display="flex">
|
||||||
|
|
@ -49,14 +49,12 @@ Customize the legend text with additional content.
|
||||||
|
|
||||||
## Reactive example
|
## Reactive example
|
||||||
|
|
||||||
Bind and update the selected value programmatically.
|
Use the `selected` prop to bind and update the selected value.
|
||||||
|
|
||||||
<FileSource src="/framed/RadioButton/RadioButtonReactive" />
|
<FileSource src="/framed/RadioButton/RadioButtonReactive" />
|
||||||
|
|
||||||
## Left-aligned label text
|
## Left-aligned label text
|
||||||
|
|
||||||
Position labels to the left of the radio buttons.
|
|
||||||
|
|
||||||
<RadioButtonGroup labelPosition="left" legendText="Storage tier (disk)" name="plan-left-aligned" 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" />
|
||||||
|
|
@ -65,8 +63,6 @@ Position labels to the left of the radio buttons.
|
||||||
|
|
||||||
## Disabled buttons
|
## Disabled buttons
|
||||||
|
|
||||||
Disable specific radio buttons to prevent selection.
|
|
||||||
|
|
||||||
<RadioButtonGroup labelPosition="left" legendText="Storage tier (disk)" name="plan-disabled" 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" />
|
||||||
|
|
@ -75,8 +71,6 @@ Disable specific radio buttons to prevent selection.
|
||||||
|
|
||||||
## Vertical orientation
|
## Vertical orientation
|
||||||
|
|
||||||
Display radio buttons in a vertical layout.
|
|
||||||
|
|
||||||
<RadioButtonGroup orientation="vertical" legendText="Storage tier (disk)" name="plan-vertical" 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" />
|
||||||
|
|
@ -85,8 +79,6 @@ Display radio buttons in a vertical layout.
|
||||||
|
|
||||||
## Skeleton
|
## Skeleton
|
||||||
|
|
||||||
Show a loading state for horizontal radio buttons.
|
|
||||||
|
|
||||||
<RadioButtonGroup legendText="Storage tier (disk)">
|
<RadioButtonGroup legendText="Storage tier (disk)">
|
||||||
<RadioButtonSkeleton />
|
<RadioButtonSkeleton />
|
||||||
<RadioButtonSkeleton />
|
<RadioButtonSkeleton />
|
||||||
|
|
@ -95,8 +87,6 @@ Show a loading state for horizontal radio buttons.
|
||||||
|
|
||||||
## 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 />
|
||||||
<RadioButtonSkeleton />
|
<RadioButtonSkeleton />
|
||||||
|
|
|
||||||
|
|
@ -7,12 +7,8 @@ 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
|
||||||
|
|
||||||
Create a group of radio tiles with a shared name and legend.
|
|
||||||
|
|
||||||
<TileGroup legend="Service pricing tiers" name="plan" selected="standard">
|
<TileGroup legend="Service pricing tiers" name="plan" selected="standard">
|
||||||
<RadioTile value="lite">
|
<RadioTile value="lite">
|
||||||
Lite plan
|
Lite plan
|
||||||
|
|
@ -27,20 +23,16 @@ Create a group of radio tiles with a shared name and legend.
|
||||||
|
|
||||||
## Reactive (one-way binding)
|
## Reactive (one-way binding)
|
||||||
|
|
||||||
Update the selected value using the `select` event.
|
|
||||||
|
|
||||||
<FileSource src="/framed/RadioTile/RadioTileReactiveOneWay" />
|
<FileSource src="/framed/RadioTile/RadioTileReactiveOneWay" />
|
||||||
|
|
||||||
## Reactive (two-way binding)
|
## Reactive (two-way binding)
|
||||||
|
|
||||||
Bind to the `selected` prop for simpler state management.
|
Binding to the `selected` prop is a more concise approach to managing state.
|
||||||
|
|
||||||
<FileSource src="/framed/RadioTile/RadioTileReactive" />
|
<FileSource src="/framed/RadioTile/RadioTileReactive" />
|
||||||
|
|
||||||
## Light variant
|
## Light variant
|
||||||
|
|
||||||
Use the light variant for light backgrounds.
|
|
||||||
|
|
||||||
<TileGroup legend="Service pricing tiers" name="plan-light" selected="standard">
|
<TileGroup legend="Service pricing tiers" name="plan-light" selected="standard">
|
||||||
<RadioTile light value="lite">
|
<RadioTile light value="lite">
|
||||||
Lite plan
|
Lite plan
|
||||||
|
|
@ -55,8 +47,6 @@ Use the light variant for light backgrounds.
|
||||||
|
|
||||||
## Disabled state
|
## Disabled state
|
||||||
|
|
||||||
Disable specific tiles to prevent selection.
|
|
||||||
|
|
||||||
<TileGroup legend="Service pricing tiers" name="plan-disabled" selected="standard">
|
<TileGroup legend="Service pricing tiers" name="plan-disabled" selected="standard">
|
||||||
<RadioTile value="lite" disabled>
|
<RadioTile value="lite" disabled>
|
||||||
Lite plan
|
Lite plan
|
||||||
|
|
|
||||||
|
|
@ -1,15 +1,11 @@
|
||||||
<script>
|
<script>
|
||||||
import { InlineNotification, RecursiveList, Link } from "carbon-components-svelte";
|
import { InlineNotification, RecursiveList } from "carbon-components-svelte";
|
||||||
import Preview from "../../components/Preview.svelte";
|
import Preview from "../../components/Preview.svelte";
|
||||||
</script>
|
</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.
|
This component uses the [svelte:self API](https://svelte.dev/docs#svelte_self) to render the [UnorderedList](/components/UnorderedList) and [OrderedList](/components/OrderedList) components with tree structured data.
|
||||||
|
|
||||||
<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
|
A child node can render text, a link, HTML content, and other children.
|
||||||
<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>
|
<InlineNotification svx-ignore lowContrast title="Warning:" kind="warning" hideCloseButton>
|
||||||
<div class="body-short-01">
|
<div class="body-short-01">
|
||||||
|
|
@ -17,26 +13,22 @@
|
||||||
</div>
|
</div>
|
||||||
</InlineNotification>
|
</InlineNotification>
|
||||||
|
|
||||||
## Default
|
## Unordered
|
||||||
|
|
||||||
Create a hierarchical list using the `nodes` prop. Each node can contain text, links, HTML content, and nested nodes.
|
The `children` prop accepts an array of child nodes.
|
||||||
|
|
||||||
|
By default, the list type is unordered.
|
||||||
|
|
||||||
<FileSource src="/framed/RecursiveList/RecursiveList" />
|
<FileSource src="/framed/RecursiveList/RecursiveList" />
|
||||||
|
|
||||||
## Ordered
|
## Ordered
|
||||||
|
|
||||||
Set `type` to `"ordered"` to use numbered lists with proper indentation.
|
Set `type` to `"ordered"` to use the ordered list variant.
|
||||||
|
|
||||||
<FileSource src="/framed/RecursiveList/RecursiveListOrdered" />
|
<FileSource src="/framed/RecursiveList/RecursiveListOrdered" />
|
||||||
|
|
||||||
## Ordered (native styles)
|
## Ordered (native styles)
|
||||||
|
|
||||||
Set `type` to `"ordered-native"` to use browser-native numbering styles.
|
Set `type` to `"ordered-native"` to use the native styles for an ordered list.
|
||||||
|
|
||||||
<FileSource src="/framed/RecursiveList/RecursiveListOrderedNative" />
|
<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" />
|
|
||||||
|
|
|
||||||
|
|
@ -4,72 +4,54 @@
|
||||||
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 is extra-large by default. Use the `size` prop to choose between [large](#large-size) and [small](#small-size) variants.
|
The `Search` component size is extra-large by default. There are [large](#large-size) and [small](#small-size) 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 or when pressing the "Escape" key.
|
||||||
|
|
||||||
<Search value="Cloud functions" on:clear={() => console.log('clear')}/>
|
<Search value="Cloud functions" on:clear={() => console.log('clear')}/>
|
||||||
|
|
||||||
## Expandable variant
|
## Expandable variant
|
||||||
|
|
||||||
Enable the expandable variant to show a compact search icon that expands on focus.
|
Set `expandable` to `true` to use the expandable variant.
|
||||||
|
|
||||||
<FileSource src="/framed/Search/SearchExpandableReactive" />
|
<FileSource src="/framed/Search/SearchExpandableReactive" />
|
||||||
|
|
||||||
## Light variant
|
## 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 state
|
||||||
|
|
||||||
Disable the search input using the `disabled` prop.
|
|
||||||
|
|
||||||
<Search disabled />
|
<Search disabled />
|
||||||
|
|
||||||
## Custom icon
|
## Custom search icon
|
||||||
|
|
||||||
Replace the default search icon with a custom one.
|
|
||||||
|
|
||||||
<Search icon={Query} />
|
<Search icon={Query} />
|
||||||
|
|
||||||
## Skeleton
|
## Skeleton
|
||||||
|
|
||||||
Display a loading state using the skeleton variant.
|
|
||||||
|
|
||||||
<Search skeleton />
|
<Search skeleton />
|
||||||
|
|
||||||
## Skeleton (large)
|
## Skeleton (large)
|
||||||
|
|
|
||||||
|
|
@ -7,11 +7,9 @@ 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
|
||||||
|
|
||||||
Create a basic select menu with `SelectItem` components. The first item's value is used as the default if `selected` is not set.
|
If the `selected` prop is not set, the value of the first `SelectItem` will be used as the default value.
|
||||||
|
|
||||||
<Select labelText="Carbon theme" on:change={e => console.log("value", e.target.value)}>
|
<Select labelText="Carbon theme" on:change={e => console.log("value", e.target.value)}>
|
||||||
<SelectItem value="white" />
|
<SelectItem value="white" />
|
||||||
|
|
@ -23,7 +21,7 @@ Create a basic select menu with `SelectItem` components. The first item's value
|
||||||
|
|
||||||
## Custom item text
|
## Custom item text
|
||||||
|
|
||||||
Use the `text` prop to customize the display text of each option.
|
Use the `text` prop on `SelectItem` to customize the display value.
|
||||||
|
|
||||||
<Select labelText="Carbon theme" on:change={e => console.log("value", e.target.value)}>
|
<Select labelText="Carbon theme" on:change={e => console.log("value", e.target.value)}>
|
||||||
<SelectItem value="white" text="White" />
|
<SelectItem value="white" text="White" />
|
||||||
|
|
@ -35,7 +33,7 @@ Use the `text` prop to customize the display text of each option.
|
||||||
|
|
||||||
## Initial selected value
|
## Initial selected value
|
||||||
|
|
||||||
Set the initial selection using the `selected` prop.
|
Use the `selected` prop to specify an initial value.
|
||||||
|
|
||||||
<Select labelText="Carbon theme" selected="g10" on:change={e => console.log("value", e.target.value)}>
|
<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" />
|
||||||
|
|
@ -47,14 +45,12 @@ Set the initial selection using the `selected` prop.
|
||||||
|
|
||||||
## Reactive example
|
## Reactive example
|
||||||
|
|
||||||
The `selected` prop supports two-way binding for reactive updates.
|
The `selected` prop is reactive and supports two-way binding.
|
||||||
|
|
||||||
<FileSource src="/framed/Select/SelectReactive" />
|
<FileSource src="/framed/Select/SelectReactive" />
|
||||||
|
|
||||||
## Helper text
|
## Helper text
|
||||||
|
|
||||||
Add descriptive text below the select menu.
|
|
||||||
|
|
||||||
<Select helperText="Carbon offers 4 themes (2 light, 3 dark)" labelText="Carbon theme" selected="g10" >
|
<Select helperText="Carbon offers 4 themes (2 light, 3 dark)" 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" />
|
||||||
|
|
@ -65,8 +61,6 @@ Add descriptive text below the select menu.
|
||||||
|
|
||||||
## Hidden label
|
## 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" />
|
||||||
|
|
@ -77,8 +71,6 @@ Visually hide the label while maintaining accessibility.
|
||||||
|
|
||||||
## 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 />
|
||||||
<SelectItemGroup label="Light theme">
|
<SelectItemGroup label="Light theme">
|
||||||
|
|
@ -92,46 +84,8 @@ Group related options using `SelectItemGroup` components.
|
||||||
</SelectItemGroup>
|
</SelectItemGroup>
|
||||||
</Select>
|
</Select>
|
||||||
|
|
||||||
## Small size
|
|
||||||
|
|
||||||
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
|
## 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" />
|
||||||
|
|
@ -140,9 +94,37 @@ Use the light variant for light backgrounds.
|
||||||
<SelectItem value="g100" text="Gray 100" />
|
<SelectItem value="g100" text="Gray 100" />
|
||||||
</Select>
|
</Select>
|
||||||
|
|
||||||
## Invalid state
|
## Inline variant
|
||||||
|
|
||||||
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="g80" text="Gray 80" />
|
||||||
|
<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="g80" text="Gray 80" />
|
||||||
|
<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="g80" text="Gray 80" />
|
||||||
|
<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" />
|
||||||
|
|
@ -154,8 +136,6 @@ Show validation errors using the invalid state.
|
||||||
|
|
||||||
## 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" />
|
||||||
|
|
@ -166,8 +146,6 @@ Show warnings using the warning state.
|
||||||
|
|
||||||
## 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" />
|
||||||
|
|
@ -178,8 +156,6 @@ Disable the select menu to prevent interaction.
|
||||||
|
|
||||||
## Skeleton
|
## Skeleton
|
||||||
|
|
||||||
Display a loading state using the skeleton variant.
|
|
||||||
|
|
||||||
<SelectSkeleton />
|
<SelectSkeleton />
|
||||||
|
|
||||||
## Skeleton (hidden label)
|
## Skeleton (hidden label)
|
||||||
|
|
|
||||||
|
|
@ -7,12 +7,8 @@ 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>
|
||||||
Multi-select Tile
|
Multi-select Tile
|
||||||
|
|
@ -27,8 +23,6 @@ Group multiple selectable tiles together for multi-selection scenarios.
|
||||||
|
|
||||||
## 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>
|
||||||
Multi-select Tile
|
Multi-select Tile
|
||||||
|
|
@ -43,8 +37,6 @@ Use the light variant for light backgrounds.
|
||||||
|
|
||||||
## 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>
|
||||||
Multi-select Tile
|
Multi-select Tile
|
||||||
|
|
|
||||||
|
|
@ -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,22 @@
|
||||||
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
|
## Paragraph variant
|
||||||
|
|
||||||
Use the paragraph variant for multi-line text placeholders.
|
|
||||||
|
|
||||||
<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%" />
|
||||||
|
|
@ -7,12 +7,8 @@ components: ["Slider", "SliderSkeleton"]
|
||||||
import Preview from "../../components/Preview.svelte";
|
import Preview from "../../components/Preview.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
`Slider` provides a visual way to select a value from a range. It supports keyboard navigation, custom ranges, step values, and various states.
|
|
||||||
|
|
||||||
## Default
|
## Default
|
||||||
|
|
||||||
Create a basic slider with a label and default range (0-100).
|
|
||||||
|
|
||||||
<Slider labelText="Instances" value={0} />
|
<Slider labelText="Instances" value={0} />
|
||||||
|
|
||||||
## Full width
|
## Full width
|
||||||
|
|
@ -23,54 +19,36 @@ Set `fullWidth` to `true` for the slider to span the full width of its containin
|
||||||
|
|
||||||
## Hidden label
|
## Hidden label
|
||||||
|
|
||||||
Visually hide the label while maintaining accessibility.
|
|
||||||
|
|
||||||
<Slider labelText="Instances" hideLabel value={0} />
|
<Slider labelText="Instances" hideLabel value={0} />
|
||||||
|
|
||||||
## Hidden text input
|
## Hidden text input
|
||||||
|
|
||||||
Hide the text input while keeping the slider functionality.
|
|
||||||
|
|
||||||
<Slider labelText="Instances" hideTextInput value={0} />
|
<Slider labelText="Instances" hideTextInput value={0} />
|
||||||
|
|
||||||
## Custom minimum, maximum values
|
## Custom minimum, maximum values
|
||||||
|
|
||||||
Set custom range values and labels.
|
|
||||||
|
|
||||||
<Slider labelText="Runtime memory (MB)" min={10} max={990} maxLabel="990 MB" value={100} />
|
<Slider labelText="Runtime memory (MB)" min={10} max={990} maxLabel="990 MB" value={100} />
|
||||||
|
|
||||||
## Custom step value
|
## Custom step value
|
||||||
|
|
||||||
Specify the step value for more precise control.
|
|
||||||
|
|
||||||
<Slider labelText="Runtime memory (MB)" min={10} max={990} maxLabel="990 MB" value={100} step={10} />
|
<Slider labelText="Runtime memory (MB)" min={10} max={990} maxLabel="990 MB" value={100} step={10} />
|
||||||
|
|
||||||
## Light variant
|
## Light variant
|
||||||
|
|
||||||
Use the light variant for light backgrounds.
|
<Slider light labelText="Runtime memory (MB)" min={10} max={990} maxLabel="990 MB" value={100} step={10} />
|
||||||
|
|
||||||
<Slider light labelText="Runtime memory (MB)" min={10} max={990} maxLabel="990 MB" value={100} step={10} />
|
|
||||||
|
|
||||||
## Invalid state
|
## Invalid state
|
||||||
|
|
||||||
Indicate an invalid state with the `invalid` prop.
|
<Slider invalid labelText="Runtime memory (MB)" min={10} max={990} maxLabel="990 MB" value={100} step={10} />
|
||||||
|
|
||||||
<Slider invalid labelText="Runtime memory (MB)" min={10} max={990} maxLabel="990 MB" value={100} step={10} />
|
|
||||||
|
|
||||||
## Disabled state
|
## Disabled state
|
||||||
|
|
||||||
Disable the slider to prevent interaction.
|
<Slider disabled labelText="Runtime memory (MB)" min={10} max={990} maxLabel="990 MB" value={100} step={10} />
|
||||||
|
|
||||||
<Slider disabled labelText="Runtime memory (MB)" min={10} max={990} maxLabel="990 MB" value={100} step={10} />
|
|
||||||
|
|
||||||
## Skeleton
|
## Skeleton
|
||||||
|
|
||||||
Show a loading state with the skeleton variant.
|
|
||||||
|
|
||||||
<SliderSkeleton />
|
<SliderSkeleton />
|
||||||
|
|
||||||
## Skeleton (hidden label)
|
## Skeleton (hidden label)
|
||||||
|
|
||||||
Show a loading state without a label.
|
|
||||||
|
|
||||||
<SliderSkeleton hideLabel />
|
<SliderSkeleton hideLabel />
|
||||||
|
|
@ -3,16 +3,12 @@ components: ["StructuredList", "StructuredListSkeleton", "StructuredListBody", "
|
||||||
---
|
---
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { StructuredList, StructuredListSkeleton, StructuredListBody, StructuredListHead, StructuredListCell, StructuredListRow, StructuredListInput } from "carbon-components-svelte";
|
import { StructuredList, StructuredListSkeleton, StructuredListBody, StructuredListHead, StructuredListCell ,StructuredListRow, StructuredListInput } from "carbon-components-svelte";
|
||||||
import CheckmarkFilled from "carbon-icons-svelte/lib/CheckmarkFilled.svelte";
|
import CheckmarkFilled from "carbon-icons-svelte/lib/CheckmarkFilled.svelte";
|
||||||
import Preview from "../../components/Preview.svelte";
|
import Preview from "../../components/Preview.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
`StructuredList` provides a semantic way to display tabular data with support for selection, keyboard navigation, and various layout options.
|
## Default (read-only)
|
||||||
|
|
||||||
## Default
|
|
||||||
|
|
||||||
Display a basic structured list with headers and rows by default.
|
|
||||||
|
|
||||||
<StructuredList>
|
<StructuredList>
|
||||||
<StructuredListHead>
|
<StructuredListHead>
|
||||||
|
|
@ -24,27 +20,40 @@ Display a basic structured list with headers and rows by default.
|
||||||
</StructuredListHead>
|
</StructuredListHead>
|
||||||
<StructuredListBody>
|
<StructuredListBody>
|
||||||
<StructuredListRow>
|
<StructuredListRow>
|
||||||
|
<StructuredListCell noWrap>Row 1</StructuredListCell>
|
||||||
<StructuredListCell>Row 1</StructuredListCell>
|
<StructuredListCell>Row 1</StructuredListCell>
|
||||||
<StructuredListCell>Row 1</StructuredListCell>
|
<StructuredListCell>
|
||||||
<StructuredListCell>Row 1</StructuredListCell>
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
|
||||||
|
magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
|
||||||
|
sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
|
||||||
|
vulputate nisl a porttitor interdum.
|
||||||
|
</StructuredListCell>
|
||||||
</StructuredListRow>
|
</StructuredListRow>
|
||||||
<StructuredListRow>
|
<StructuredListRow>
|
||||||
|
<StructuredListCell noWrap>Row 2</StructuredListCell>
|
||||||
<StructuredListCell>Row 2</StructuredListCell>
|
<StructuredListCell>Row 2</StructuredListCell>
|
||||||
<StructuredListCell>Row 2</StructuredListCell>
|
<StructuredListCell>
|
||||||
<StructuredListCell>Row 2</StructuredListCell>
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
|
||||||
|
magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
|
||||||
|
sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
|
||||||
|
vulputate nisl a porttitor interdum.
|
||||||
|
</StructuredListCell>
|
||||||
</StructuredListRow>
|
</StructuredListRow>
|
||||||
<StructuredListRow>
|
<StructuredListRow>
|
||||||
|
<StructuredListCell noWrap>Row 3</StructuredListCell>
|
||||||
<StructuredListCell>Row 3</StructuredListCell>
|
<StructuredListCell>Row 3</StructuredListCell>
|
||||||
<StructuredListCell>Row 3</StructuredListCell>
|
<StructuredListCell>
|
||||||
<StructuredListCell>Row 3</StructuredListCell>
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
|
||||||
|
magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
|
||||||
|
sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
|
||||||
|
vulputate nisl a porttitor interdum.
|
||||||
|
</StructuredListCell>
|
||||||
</StructuredListRow>
|
</StructuredListRow>
|
||||||
</StructuredListBody>
|
</StructuredListBody>
|
||||||
</StructuredList>
|
</StructuredList>
|
||||||
|
|
||||||
## Condensed variant
|
## Condensed variant
|
||||||
|
|
||||||
Use the condensed variant for more compact rows.
|
|
||||||
|
|
||||||
<StructuredList condensed>
|
<StructuredList condensed>
|
||||||
<StructuredListHead>
|
<StructuredListHead>
|
||||||
<StructuredListRow head>
|
<StructuredListRow head>
|
||||||
|
|
@ -55,26 +64,39 @@ Use the condensed variant for more compact rows.
|
||||||
</StructuredListHead>
|
</StructuredListHead>
|
||||||
<StructuredListBody>
|
<StructuredListBody>
|
||||||
<StructuredListRow>
|
<StructuredListRow>
|
||||||
|
<StructuredListCell noWrap>Row 1</StructuredListCell>
|
||||||
<StructuredListCell>Row 1</StructuredListCell>
|
<StructuredListCell>Row 1</StructuredListCell>
|
||||||
<StructuredListCell>Row 1</StructuredListCell>
|
<StructuredListCell>
|
||||||
<StructuredListCell>Row 1</StructuredListCell>
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
|
||||||
|
magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
|
||||||
|
sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
|
||||||
|
vulputate nisl a porttitor interdum.
|
||||||
|
</StructuredListCell>
|
||||||
</StructuredListRow>
|
</StructuredListRow>
|
||||||
<StructuredListRow>
|
<StructuredListRow>
|
||||||
|
<StructuredListCell noWrap>Row 2</StructuredListCell>
|
||||||
<StructuredListCell>Row 2</StructuredListCell>
|
<StructuredListCell>Row 2</StructuredListCell>
|
||||||
<StructuredListCell>Row 2</StructuredListCell>
|
<StructuredListCell>
|
||||||
<StructuredListCell>Row 2</StructuredListCell>
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
|
||||||
|
magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
|
||||||
|
sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
|
||||||
|
vulputate nisl a porttitor interdum.
|
||||||
|
</StructuredListCell>
|
||||||
</StructuredListRow>
|
</StructuredListRow>
|
||||||
<StructuredListRow>
|
<StructuredListRow>
|
||||||
|
<StructuredListCell noWrap>Row 3</StructuredListCell>
|
||||||
<StructuredListCell>Row 3</StructuredListCell>
|
<StructuredListCell>Row 3</StructuredListCell>
|
||||||
<StructuredListCell>Row 3</StructuredListCell>
|
<StructuredListCell>
|
||||||
<StructuredListCell>Row 3</StructuredListCell>
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
|
||||||
|
magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
|
||||||
|
sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
|
||||||
|
vulputate nisl a porttitor interdum.
|
||||||
|
</StructuredListCell>
|
||||||
</StructuredListRow>
|
</StructuredListRow>
|
||||||
</StructuredListBody>
|
</StructuredListBody>
|
||||||
</StructuredList>
|
</StructuredList>
|
||||||
|
|
||||||
## Flush variant
|
## Flush
|
||||||
|
|
||||||
Use the flush variant to remove padding from the list.
|
|
||||||
|
|
||||||
<StructuredList flush>
|
<StructuredList flush>
|
||||||
<StructuredListHead>
|
<StructuredListHead>
|
||||||
|
|
@ -120,8 +142,6 @@ Use the flush variant to remove padding from the list.
|
||||||
|
|
||||||
## Selectable rows
|
## Selectable rows
|
||||||
|
|
||||||
Enable row selection with the `selection` prop and `StructuredListInput` components.
|
|
||||||
|
|
||||||
<StructuredList selection selected="row-1-value">
|
<StructuredList selection selected="row-1-value">
|
||||||
<StructuredListHead>
|
<StructuredListHead>
|
||||||
<StructuredListRow head>
|
<StructuredListRow head>
|
||||||
|
|
@ -162,6 +182,4 @@ Enable row selection with the `selection` prop and `StructuredListInput` compone
|
||||||
|
|
||||||
## Skeleton
|
## Skeleton
|
||||||
|
|
||||||
Show a loading state with the skeleton variant.
|
|
||||||
|
|
||||||
<StructuredListSkeleton rows={3} />
|
<StructuredListSkeleton rows={3} />
|
||||||
|
|
@ -7,12 +7,8 @@ components: ["Tabs", "Tab", "TabContent", "TabsSkeleton"]
|
||||||
import Preview from "../../components/Preview.svelte";
|
import Preview from "../../components/Preview.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
`Tabs` provides a way to organize content into separate views that can be switched between. It supports keyboard navigation, disabled states, and various layout options.
|
|
||||||
|
|
||||||
## Default
|
## Default
|
||||||
|
|
||||||
Create a basic tab interface with labels and content.
|
|
||||||
|
|
||||||
<Tabs>
|
<Tabs>
|
||||||
<Tab label="Tab label 1" />
|
<Tab label="Tab label 1" />
|
||||||
<Tab label="Tab label 2" />
|
<Tab label="Tab label 2" />
|
||||||
|
|
@ -26,7 +22,9 @@ Create a basic tab interface with labels and content.
|
||||||
|
|
||||||
## Auto width
|
## Auto width
|
||||||
|
|
||||||
By default, each tab has a fixed width of `10rem`. Set `autoWidth` to `true` for tabs to automatically adjust their width based on content.
|
By default, the width of each tab is set to `10rem`.
|
||||||
|
|
||||||
|
Set `autoWidth` to `true` for tabs to have an automatically set width.
|
||||||
|
|
||||||
<Tabs autoWidth>
|
<Tabs autoWidth>
|
||||||
<Tab label="Tab label 1" />
|
<Tab label="Tab label 1" />
|
||||||
|
|
@ -41,13 +39,13 @@ By default, each tab has a fixed width of `10rem`. Set `autoWidth` to `true` for
|
||||||
|
|
||||||
## Reactive example
|
## Reactive example
|
||||||
|
|
||||||
Use `bind:selected` to create a two-way binding with the selected tab index. This allows you to programmatically control the selected tab and react to tab changes.
|
|
||||||
|
|
||||||
<FileSource src="/framed/Tabs/TabsReactive" />
|
<FileSource src="/framed/Tabs/TabsReactive" />
|
||||||
|
|
||||||
## Disabled tabs
|
## Disabled tabs
|
||||||
|
|
||||||
Set `disabled` to `true` on a `Tab` component to prevent interaction. Keyboard navigation will skip disabled tabs.
|
Setting `disabled` to `true` on the `Tab` component will prevent it from being clickable.
|
||||||
|
|
||||||
|
Using keyboard navigation (left and right arrow keys) will skip to the next non-disabled tab.
|
||||||
|
|
||||||
<Tabs>
|
<Tabs>
|
||||||
<Tab label="Tab label 1" />
|
<Tab label="Tab label 1" />
|
||||||
|
|
@ -64,8 +62,6 @@ Set `disabled` to `true` on a `Tab` component to prevent interaction. Keyboard n
|
||||||
|
|
||||||
## Container type
|
## Container type
|
||||||
|
|
||||||
Use the container type for a more prominent tab interface.
|
|
||||||
|
|
||||||
<Tabs type="container">
|
<Tabs type="container">
|
||||||
<Tab label="Tab label 1" />
|
<Tab label="Tab label 1" />
|
||||||
<Tab label="Tab label 2" />
|
<Tab label="Tab label 2" />
|
||||||
|
|
@ -79,12 +75,8 @@ Use the container type for a more prominent tab interface.
|
||||||
|
|
||||||
## Skeleton (default)
|
## Skeleton (default)
|
||||||
|
|
||||||
Show a loading state with the default skeleton variant.
|
|
||||||
|
|
||||||
<TabsSkeleton count={3} />
|
<TabsSkeleton count={3} />
|
||||||
|
|
||||||
## Skeleton (container)
|
## Skeleton (container)
|
||||||
|
|
||||||
Show a loading state with the container skeleton variant.
|
|
||||||
|
|
||||||
<TabsSkeleton type="container" count={3} />
|
<TabsSkeleton type="container" count={3} />
|
||||||
|
|
@ -1,31 +1,19 @@
|
||||||
---
|
|
||||||
components: ["Tag", "TagSkeleton"]
|
|
||||||
---
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { Tag, TooltipDefinition } from "carbon-components-svelte";
|
import { Tag, TooltipDefinition } from "carbon-components-svelte";
|
||||||
import IbmCloud from "carbon-icons-svelte/lib/IbmCloud.svelte";
|
import IbmCloud from "carbon-icons-svelte/lib/IbmCloud.svelte";
|
||||||
import Preview from "../../components/Preview.svelte";
|
import Preview from "../../components/Preview.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
`Tag` provides a way to categorize content with a keyword or label. It supports various styles, sizes, and interactive states, including filterable and interactive variants.
|
|
||||||
|
|
||||||
## Default
|
## Default
|
||||||
|
|
||||||
Create a basic tag with text content.
|
|
||||||
|
|
||||||
<Tag>IBM Cloud</Tag>
|
<Tag>IBM Cloud</Tag>
|
||||||
|
|
||||||
## Small size
|
## Small size
|
||||||
|
|
||||||
Use the small size variant for more compact layouts.
|
|
||||||
|
|
||||||
<Tag size="sm">IBM Cloud</Tag>
|
<Tag size="sm">IBM Cloud</Tag>
|
||||||
|
|
||||||
## Tag types
|
## Tag types
|
||||||
|
|
||||||
Choose from a variety of color types to match your design system.
|
|
||||||
|
|
||||||
<Tag type="red">red</Tag>
|
<Tag type="red">red</Tag>
|
||||||
<Tag type="magenta">magenta</Tag>
|
<Tag type="magenta">magenta</Tag>
|
||||||
<Tag type="purple">purple</Tag>
|
<Tag type="purple">purple</Tag>
|
||||||
|
|
@ -41,45 +29,37 @@ Choose from a variety of color types to match your design system.
|
||||||
|
|
||||||
## Filterable
|
## Filterable
|
||||||
|
|
||||||
Create a filterable tag with a close button that dispatches a `close` event when clicked.
|
|
||||||
|
|
||||||
<Tag filter on:close>carbon-components</Tag>
|
<Tag filter on:close>carbon-components</Tag>
|
||||||
|
|
||||||
## Filterable (disabled)
|
## Filterable (disabled)
|
||||||
|
|
||||||
Disable a filterable tag to prevent interaction.
|
|
||||||
|
|
||||||
<Tag filter disabled on:close>carbon-components</Tag>
|
<Tag filter disabled on:close>carbon-components</Tag>
|
||||||
|
|
||||||
## Filterable (small)
|
## Filterable (small)
|
||||||
|
|
||||||
Combine the filterable variant with the small size.
|
|
||||||
|
|
||||||
<Tag size="sm" filter on:close>carbon-components</Tag>
|
<Tag size="sm" filter on:close>carbon-components</Tag>
|
||||||
|
|
||||||
## Custom icon
|
## Custom icon
|
||||||
|
|
||||||
Add a custom icon to the tag. Note: custom icons cannot be used with the filterable variant.
|
Note: rendering a custom icon cannot be used with the filterable variant.
|
||||||
|
|
||||||
<Tag icon={IbmCloud}>IBM Cloud</Tag>
|
<Tag icon={IbmCloud}>IBM Cloud</Tag>
|
||||||
|
|
||||||
## Interactive variant
|
## Interactive variant
|
||||||
|
|
||||||
Set `interactive` to `true` to render a `button` element instead of a `div`. This is useful for clickable tags.
|
Set `interactive` to `true` to render a `button` element instead of a `div`.
|
||||||
|
|
||||||
<Tag interactive>Machine learning</Tag>
|
<Tag interactive>Machine learning</Tag>
|
||||||
|
|
||||||
## Disabled
|
## Disabled
|
||||||
|
|
||||||
Both filterable and interactive tag variants support a disabled state.
|
The filterable and interactive tag variants have a disabled state.
|
||||||
|
|
||||||
<Tag filter disabled>Machine learning</Tag>
|
<Tag filter disabled>Machine learning</Tag>
|
||||||
<Tag interactive disabled>Machine learning</Tag>
|
<Tag interactive disabled>Machine learning</Tag>
|
||||||
|
|
||||||
## Tooltip in a tag
|
## Tooltip in a tag
|
||||||
|
|
||||||
Embed a tooltip within a tag to provide additional context.
|
|
||||||
|
|
||||||
<Tag>
|
<Tag>
|
||||||
<TooltipDefinition tooltipText="IBM Corporate Headquarters is based in Armonk, New York.">
|
<TooltipDefinition tooltipText="IBM Corporate Headquarters is based in Armonk, New York.">
|
||||||
Armonk
|
Armonk
|
||||||
|
|
@ -88,12 +68,8 @@ Embed a tooltip within a tag to provide additional context.
|
||||||
|
|
||||||
## Skeleton
|
## Skeleton
|
||||||
|
|
||||||
Show a loading state with the default skeleton variant.
|
|
||||||
|
|
||||||
<Tag skeleton />
|
<Tag skeleton />
|
||||||
|
|
||||||
## Skeleton (small)
|
## Skeleton (small)
|
||||||
|
|
||||||
Show a loading state with the small skeleton variant.
|
|
||||||
|
|
||||||
<Tag size="sm" skeleton />
|
<Tag size="sm" skeleton />
|
||||||
|
|
@ -7,64 +7,46 @@ components: ["TextArea", "TextAreaSkeleton"]
|
||||||
import Preview from "../../components/Preview.svelte";
|
import Preview from "../../components/Preview.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
`TextArea` provides a multi-line text input field with support for various states, character counting, and accessibility features. It's ideal for longer text input like descriptions, comments, or messages.
|
|
||||||
|
|
||||||
## Default
|
## Default
|
||||||
|
|
||||||
Create a basic textarea with a label and placeholder text.
|
|
||||||
|
|
||||||
<TextArea labelText="App description" placeholder="Enter a description..." />
|
<TextArea labelText="App description" placeholder="Enter a description..." />
|
||||||
|
|
||||||
## Maximum character count
|
## Maximum character count
|
||||||
|
|
||||||
Specify the max character count using the `maxCount` prop. A character counter will be displayed to the right of the label. You can also use the native `maxlength` attribute if you prefer not to show a counter.
|
Specify the max character count using the `maxCount` prop. A character counter will be displayed to the right of the label.
|
||||||
|
|
||||||
|
You can always use the native `maxlength` attribute if you'd prefer that a counter not be shown.
|
||||||
|
|
||||||
<TextArea labelText="App description" placeholder="Enter a description..." maxCount={100} />
|
<TextArea labelText="App description" placeholder="Enter a description..." maxCount={100} />
|
||||||
|
|
||||||
## With helper text
|
## With helper text
|
||||||
|
|
||||||
Add helper text below the textarea to provide additional context or instructions.
|
|
||||||
|
|
||||||
<TextArea labelText="App description" helperText="A rich description helps us better recommend related products and services" placeholder="Enter a description..." />
|
<TextArea labelText="App description" helperText="A rich description helps us better recommend related products and services" placeholder="Enter a description..." />
|
||||||
|
|
||||||
## Hidden label
|
## Hidden label
|
||||||
|
|
||||||
Visually hide the label while maintaining accessibility by setting `hideLabel` to `true`.
|
|
||||||
|
|
||||||
<TextArea hideLabel labelText="App description" placeholder="Enter a description..." />
|
<TextArea hideLabel labelText="App description" placeholder="Enter a description..." />
|
||||||
|
|
||||||
## Light variant
|
## Light variant
|
||||||
|
|
||||||
Use the light variant for light-themed backgrounds by setting `light` to `true`.
|
|
||||||
|
|
||||||
<TextArea light labelText="App description" placeholder="Enter a description..." />
|
<TextArea light labelText="App description" placeholder="Enter a description..." />
|
||||||
|
|
||||||
## Custom rows
|
## Custom rows
|
||||||
|
|
||||||
Adjust the number of visible rows using the `rows` prop. The default is 4 rows.
|
|
||||||
|
|
||||||
<TextArea rows={10} labelText="App description" placeholder="Enter a description..." />
|
<TextArea rows={10} labelText="App description" placeholder="Enter a description..." />
|
||||||
|
|
||||||
## Invalid state
|
## Invalid state
|
||||||
|
|
||||||
Indicate an invalid state with an error message by setting `invalid` to `true` and providing `invalidText`.
|
|
||||||
|
|
||||||
<TextArea invalid invalidText="Only plain text characters are allowed" labelText="App description" placeholder="Enter a description..." />
|
<TextArea invalid invalidText="Only plain text characters are allowed" labelText="App description" placeholder="Enter a description..." />
|
||||||
|
|
||||||
## Disabled state
|
## Disabled state
|
||||||
|
|
||||||
Disable the textarea to prevent user interaction by setting `disabled` to `true`.
|
|
||||||
|
|
||||||
<TextArea disabled labelText="App description" placeholder="Enter a description..." />
|
<TextArea disabled labelText="App description" placeholder="Enter a description..." />
|
||||||
|
|
||||||
## Skeleton
|
## Skeleton
|
||||||
|
|
||||||
Show a loading state with the default skeleton variant.
|
|
||||||
|
|
||||||
<TextAreaSkeleton />
|
<TextAreaSkeleton />
|
||||||
|
|
||||||
## Skeleton without label
|
## Skeleton without label
|
||||||
|
|
||||||
Show a loading state without a label by setting `hideLabel` to `true`.
|
|
||||||
|
|
||||||
<TextAreaSkeleton hideLabel />
|
<TextAreaSkeleton hideLabel />
|
||||||
|
|
@ -7,82 +7,54 @@ components: ["TextInput", "TextInputSkeleton"]
|
||||||
import Preview from "../../components/Preview.svelte";
|
import Preview from "../../components/Preview.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
`TextInput` provides a single-line text input field with support for various states, sizes, and accessibility features. It's ideal for short text input like usernames, search terms, or form fields.
|
|
||||||
|
|
||||||
## Default
|
## Default
|
||||||
|
|
||||||
Create a basic text input with a label and placeholder text.
|
|
||||||
|
|
||||||
<TextInput labelText="User name" placeholder="Enter user name..." />
|
<TextInput labelText="User name" placeholder="Enter user name..." />
|
||||||
|
|
||||||
## With helper text
|
## With helper text
|
||||||
|
|
||||||
Add helper text below the input to provide additional context or instructions.
|
|
||||||
|
|
||||||
<TextInput labelText="User name" helperText="Your user name is associated with your email" placeholder="Enter user name..." />
|
<TextInput labelText="User name" helperText="Your user name is associated with your email" placeholder="Enter user name..." />
|
||||||
|
|
||||||
## Hidden label
|
## Hidden label
|
||||||
|
|
||||||
Visually hide the label while maintaining accessibility by setting `hideLabel` to `true`.
|
|
||||||
|
|
||||||
<TextInput hideLabel labelText="User name" placeholder="Enter user name..." />
|
<TextInput hideLabel labelText="User name" placeholder="Enter user name..." />
|
||||||
|
|
||||||
## Light variant
|
## Light variant
|
||||||
|
|
||||||
Use the light variant for light-themed backgrounds by setting `light` to `true`.
|
|
||||||
|
|
||||||
<TextInput light labelText="User name" placeholder="Enter user name..." />
|
<TextInput light labelText="User name" placeholder="Enter user name..." />
|
||||||
|
|
||||||
## Inline variant
|
## Inline variant
|
||||||
|
|
||||||
Use the inline variant to display the label and input on the same line by setting `inline` to `true`.
|
|
||||||
|
|
||||||
<TextInput inline labelText="User name" placeholder="Enter user name..." />
|
<TextInput inline labelText="User name" placeholder="Enter user name..." />
|
||||||
|
|
||||||
## Read-only variant
|
## Read-only variant
|
||||||
|
|
||||||
Display a non-editable value by setting `readonly` to `true`.
|
|
||||||
|
|
||||||
<TextInput readonly labelText="User name" value="IBM" />
|
<TextInput readonly labelText="User name" value="IBM" />
|
||||||
|
|
||||||
## Extra-large size
|
## Extra-large size
|
||||||
|
|
||||||
Use the extra-large size for more prominent inputs by setting `size` to `"xl"`.
|
|
||||||
|
|
||||||
<TextInput size="xl" labelText="User name" placeholder="Enter user name..." />
|
<TextInput size="xl" labelText="User name" placeholder="Enter user name..." />
|
||||||
|
|
||||||
## Small size
|
## Small size
|
||||||
|
|
||||||
Use the small size for more compact inputs by setting `size` to `"sm"`.
|
|
||||||
|
|
||||||
<TextInput size="sm" labelText="User name" placeholder="Enter user name..." />
|
<TextInput size="sm" labelText="User name" placeholder="Enter user name..." />
|
||||||
|
|
||||||
## Invalid state
|
## Invalid state
|
||||||
|
|
||||||
Indicate an invalid state with an error message by setting `invalid` to `true` and providing `invalidText`.
|
|
||||||
|
|
||||||
<TextInput invalid invalidText="User name is already taken. Please try another." labelText="User name" placeholder="Enter user name..." />
|
<TextInput invalid invalidText="User name is already taken. Please try another." labelText="User name" placeholder="Enter user name..." />
|
||||||
|
|
||||||
## Warning state
|
## Warning state
|
||||||
|
|
||||||
Indicate a warning state with a message by setting `warn` to `true` and providing `warnText`.
|
|
||||||
|
|
||||||
<TextInput warn warnText="Your user name is different from your log in ID." labelText="User name" placeholder="Enter user name..." />
|
<TextInput warn warnText="Your user name is different from your log in ID." labelText="User name" placeholder="Enter user name..." />
|
||||||
|
|
||||||
## Disabled state
|
## Disabled state
|
||||||
|
|
||||||
Disable the input to prevent user interaction by setting `disabled` to `true`.
|
|
||||||
|
|
||||||
<TextInput disabled labelText="User name" placeholder="Enter user name..." />
|
<TextInput disabled labelText="User name" placeholder="Enter user name..." />
|
||||||
|
|
||||||
## Skeleton
|
## Skeleton
|
||||||
|
|
||||||
Show a loading state with the default skeleton variant.
|
|
||||||
|
|
||||||
<TextInputSkeleton />
|
<TextInputSkeleton />
|
||||||
|
|
||||||
## Skeleton without label
|
## Skeleton without label
|
||||||
|
|
||||||
Show a loading state without a label by setting `hideLabel` to `true`.
|
|
||||||
|
|
||||||
<TextInputSkeleton hideLabel />
|
<TextInputSkeleton hideLabel />
|
||||||
|
|
@ -1,7 +1,3 @@
|
||||||
---
|
|
||||||
components: ["Theme"]
|
|
||||||
---
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { InlineNotification, CodeSnippet } from "carbon-components-svelte";
|
import { InlineNotification, CodeSnippet } from "carbon-components-svelte";
|
||||||
import Preview from "../../components/Preview.svelte";
|
import Preview from "../../components/Preview.svelte";
|
||||||
|
|
@ -9,7 +5,7 @@ components: ["Theme"]
|
||||||
let code = `import "carbon-components-svelte/css/all.css";`;
|
let code = `import "carbon-components-svelte/css/all.css";`;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
The `Theme` component provides dynamic client-side theming using CSS variables. It supports five Carbon themes: white, g10, g80, g90, and g100, and allows for custom theme token overrides. The component can persist theme preferences using [window.localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) and provides built-in toggle and select controls for theme switching.
|
The `Theme` component can dyanmically update the Carbon theme on the client-side. It can persist the theme locally using [window.localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage).
|
||||||
|
|
||||||
<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
|
<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
|
||||||
<div class="body-short-01">You must use the "all.css" StyleSheet with the <code>Theme</code> component.</div>
|
<div class="body-short-01">You must use the "all.css" StyleSheet with the <code>Theme</code> component.</div>
|
||||||
|
|
@ -21,42 +17,40 @@ The `all.css` StyleSheet uses [CSS variables](https://developer.mozilla.org/en-U
|
||||||
|
|
||||||
## Default
|
## Default
|
||||||
|
|
||||||
Create a basic theme component that can be controlled programmatically.
|
|
||||||
|
|
||||||
<FileSource src="/framed/Theme/Theme" />
|
<FileSource src="/framed/Theme/Theme" />
|
||||||
|
|
||||||
## Persist locally
|
## Persist locally
|
||||||
|
|
||||||
Set `persist` to `true` to save the theme preference in [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage). Use `persistKey` to specify a custom storage key.
|
Set `persist` to `true` to persist the theme locally using the [Window.localStorage API](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage).
|
||||||
|
|
||||||
<FileSource src="/framed/Theme/ThemePersist" />
|
<FileSource src="/framed/Theme/ThemePersist" />
|
||||||
|
|
||||||
## Custom theme
|
## Custom theme
|
||||||
|
|
||||||
Override default Carbon theme tokens by providing custom key-value pairs in the `tokens` prop. Refer to the [Carbon website](https://carbondesignsystem.com/guidelines/themes/overview#customizing-a-theme) for guidance on customizing themes.
|
Define keys and values in the `tokens` prop that override default Carbon theme tokens. Refer to the [Carbon website](https://carbondesignsystem.com/guidelines/themes/overview#customizing-a-theme) for guidance on customizing a theme using token values.
|
||||||
|
|
||||||
<FileSource src="/framed/Theme/ThemeTokens" />
|
<FileSource src="/framed/Theme/ThemeTokens" />
|
||||||
|
|
||||||
## Theme toggle
|
## Theme toggle
|
||||||
|
|
||||||
Set `render` to `"toggle"` to display a toggle switch for switching between two themes. By default, it toggles between "white" and "g100" themes.
|
Set `render` to `"toggle"` to render a toggle switch to control the theme.
|
||||||
|
|
||||||
<FileSource src="/framed/Theme/ThemeToggle" />
|
<FileSource src="/framed/Theme/ThemeToggle" />
|
||||||
|
|
||||||
## Theme toggle (custom)
|
## Theme toggle (custom)
|
||||||
|
|
||||||
Customize the toggle appearance and behavior using the `toggle` prop. You can specify custom themes, labels, and other toggle properties.
|
Customize the toggle using the `toggle` prop.
|
||||||
|
|
||||||
<FileSource src="/framed/Theme/ThemeToggleCustom" />
|
<FileSource src="/framed/Theme/ThemeToggleCustom" />
|
||||||
|
|
||||||
## Theme select
|
## Theme select
|
||||||
|
|
||||||
Set `render` to `"select"` to display a dropdown menu for selecting from all available themes.
|
Set `render` to `"select"` to render a select dropdown to control the theme.
|
||||||
|
|
||||||
<FileSource src="/framed/Theme/ThemeSelect" />
|
<FileSource src="/framed/Theme/ThemeSelect" />
|
||||||
|
|
||||||
## Theme select (custom)
|
## Theme select (custom)
|
||||||
|
|
||||||
Customize the select dropdown using the `select` prop. You can specify which themes to include, customize labels, and adjust other select properties.
|
Customize the select using the `select` prop.
|
||||||
|
|
||||||
<FileSource src="/framed/Theme/ThemeSelectCustom" />
|
<FileSource src="/framed/Theme/ThemeSelectCustom" />
|
||||||
|
|
@ -3,16 +3,10 @@
|
||||||
import Preview from "../../components/Preview.svelte";
|
import Preview from "../../components/Preview.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
`Tile` provides a container for displaying content in a structured, card-like format. It supports light and dark variants and can be used to create consistent, visually distinct content sections.
|
|
||||||
|
|
||||||
## Default
|
## Default
|
||||||
|
|
||||||
Create a basic tile container for your content.
|
|
||||||
|
|
||||||
<Tile>Content</Tile>
|
<Tile>Content</Tile>
|
||||||
|
|
||||||
## Light variant
|
## Light variant
|
||||||
|
|
||||||
Use the light variant for light-themed backgrounds by setting `light` to `true`.
|
|
||||||
|
|
||||||
<Tile light>Content</Tile>
|
<Tile light>Content</Tile>
|
||||||
|
|
@ -7,8 +7,6 @@ components: ["TimePicker", "TimePickerSelect", "SelectItem"]
|
||||||
import Preview from "../../components/Preview.svelte";
|
import Preview from "../../components/Preview.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
`TimePicker` provides a time input field with optional period (AM/PM) and timezone selectors. It supports various sizes, states, and themes to match your application's design system.
|
|
||||||
|
|
||||||
## Default
|
## Default
|
||||||
|
|
||||||
<TimePicker labelText="Cron job" placeholder="hh:mm">
|
<TimePicker labelText="Cron job" placeholder="hh:mm">
|
||||||
|
|
@ -24,8 +22,6 @@ components: ["TimePicker", "TimePickerSelect", "SelectItem"]
|
||||||
|
|
||||||
## Light variant
|
## Light variant
|
||||||
|
|
||||||
Use the light variant for light-themed backgrounds by setting `light` to `true`.
|
|
||||||
|
|
||||||
<TimePicker light labelText="Cron job" placeholder="hh:mm">
|
<TimePicker light labelText="Cron job" placeholder="hh:mm">
|
||||||
<TimePickerSelect value="pm">
|
<TimePickerSelect value="pm">
|
||||||
<SelectItem value="am" text="AM" />
|
<SelectItem value="am" text="AM" />
|
||||||
|
|
@ -39,8 +35,6 @@ Use the light variant for light-themed backgrounds by setting `light` to `true`.
|
||||||
|
|
||||||
## Extra-large size
|
## Extra-large size
|
||||||
|
|
||||||
Use the extra-large size for more prominent time pickers by setting `size` to `"xl"`.
|
|
||||||
|
|
||||||
<TimePicker size="xl" labelText="Cron job" placeholder="hh:mm">
|
<TimePicker size="xl" labelText="Cron job" placeholder="hh:mm">
|
||||||
<TimePickerSelect value="pm">
|
<TimePickerSelect value="pm">
|
||||||
<SelectItem value="am" text="AM" />
|
<SelectItem value="am" text="AM" />
|
||||||
|
|
@ -54,8 +48,6 @@ Use the extra-large size for more prominent time pickers by setting `size` to `"
|
||||||
|
|
||||||
## Small size
|
## Small size
|
||||||
|
|
||||||
Use the small size for more compact time pickers by setting `size` to `"sm"`.
|
|
||||||
|
|
||||||
<TimePicker size="sm" labelText="Cron job" placeholder="hh:mm">
|
<TimePicker size="sm" labelText="Cron job" placeholder="hh:mm">
|
||||||
<TimePickerSelect value="pm">
|
<TimePickerSelect value="pm">
|
||||||
<SelectItem value="am" text="AM" />
|
<SelectItem value="am" text="AM" />
|
||||||
|
|
@ -69,8 +61,6 @@ Use the small size for more compact time pickers by setting `size` to `"sm"`.
|
||||||
|
|
||||||
## Invalid state
|
## Invalid state
|
||||||
|
|
||||||
Indicate an invalid state with an error message by setting `invalid` to `true` and providing `invalidText`.
|
|
||||||
|
|
||||||
<TimePicker invalid invalidText="A valid value is required" labelText="Cron job" placeholder="hh:mm">
|
<TimePicker invalid invalidText="A valid value is required" labelText="Cron job" placeholder="hh:mm">
|
||||||
<TimePickerSelect value="pm">
|
<TimePickerSelect value="pm">
|
||||||
<SelectItem value="am" text="AM" />
|
<SelectItem value="am" text="AM" />
|
||||||
|
|
@ -82,9 +72,8 @@ Indicate an invalid state with an error message by setting `invalid` to `true` a
|
||||||
</TimePickerSelect>
|
</TimePickerSelect>
|
||||||
</TimePicker>
|
</TimePicker>
|
||||||
|
|
||||||
## Disabled state
|
|
||||||
|
|
||||||
Disable the time picker to prevent user interaction by setting `disabled` to `true`.
|
## Disabled state
|
||||||
|
|
||||||
<TimePicker labelText="Cron job" placeholder="hh:mm" disabled>
|
<TimePicker labelText="Cron job" placeholder="hh:mm" disabled>
|
||||||
<TimePickerSelect value="pm" disabled>
|
<TimePickerSelect value="pm" disabled>
|
||||||
|
|
|
||||||
|
|
@ -1,32 +1,30 @@
|
||||||
---
|
|
||||||
components: ["ToastNotification"]
|
|
||||||
---
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { ToastNotification } from "carbon-components-svelte";
|
import { ToastNotification } from "carbon-components-svelte";
|
||||||
import Preview from "../../components/Preview.svelte";
|
import Preview from "../../components/Preview.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
`ToastNotification` displays non-modal, time-based messages that appear at the top of the screen and automatically disappear. It supports various notification types, custom content, and accessibility features.
|
Toasts are non-modal, time-based window elements used to display short messages;
|
||||||
|
they usually appear at the top of the screen and disappear after a few seconds.
|
||||||
|
|
||||||
See [detailed usage](https://carbondesignsystem.com/components/notification/usage).
|
See [detailed
|
||||||
|
usage](https://carbondesignsystem.com/components/notification/usage).
|
||||||
See also: [InlineNotification](InlineNotification)
|
See also: [InlineNotification](InlineNotification)
|
||||||
|
|
||||||
## Default
|
## Default (error)
|
||||||
|
|
||||||
Display a basic error notification with title, subtitle, and timestamp by default.
|
|
||||||
|
|
||||||
<ToastNotification title="Error" subtitle="An internal server error occurred." caption="{new Date().toLocaleString()}" />
|
<ToastNotification title="Error" subtitle="An internal server error occurred." caption="{new Date().toLocaleString()}" />
|
||||||
|
|
||||||
## Autoclose
|
## Autoclose
|
||||||
|
|
||||||
|
By default, `ToastNotification` does not automatically close.
|
||||||
|
|
||||||
Specify the `timeout` prop to automatically close the notification after a specified duration (in milliseconds).
|
Specify the `timeout` prop to automatically close the notification after a specified duration (in milliseconds).
|
||||||
|
|
||||||
<FileSource src="/framed/ToastNotification/ToastNotificationTimeout" />
|
<FileSource src="/framed/ToastNotification/ToastNotificationTimeout" />
|
||||||
|
|
||||||
## Prevent default close behavior
|
## Prevent default close behavior
|
||||||
|
|
||||||
Prevent the default close behavior using `e.preventDefault()` in the `on:close` event handler.
|
`ToastNotification` is a controlled component. Prevent the default close behavior using the `e.preventDefault()` method in the dispatched `on:close` event.
|
||||||
|
|
||||||
<ToastNotification title="Error" subtitle="An internal server error occurred." caption="{new Date().toLocaleString()}" on:close={(e) => {
|
<ToastNotification title="Error" subtitle="An internal server error occurred." caption="{new Date().toLocaleString()}" on:close={(e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
@ -35,14 +33,12 @@ Prevent the default close behavior using `e.preventDefault()` in the `on:close`
|
||||||
|
|
||||||
## Full width
|
## Full width
|
||||||
|
|
||||||
Set `fullWidth` to `true` for the notification to span the full width of its container.
|
Set `fullWidth` to `true` for the notification to span the full width of its containing element.
|
||||||
|
|
||||||
<ToastNotification fullWidth title="Error" subtitle="An internal server error occurred." caption="{new Date().toLocaleString()}" />
|
<ToastNotification fullWidth title="Error" subtitle="An internal server error occurred." caption="{new Date().toLocaleString()}" />
|
||||||
|
|
||||||
## Slottable title, subtitle, caption
|
## Slottable title, subtitle, caption
|
||||||
|
|
||||||
Customize the notification content using slots for more flexibility.
|
|
||||||
|
|
||||||
<ToastNotification>
|
<ToastNotification>
|
||||||
<strong slot="title">Error: </strong>
|
<strong slot="title">Error: </strong>
|
||||||
<strong slot="subtitle">An internal server error occurred.</strong>
|
<strong slot="subtitle">An internal server error occurred.</strong>
|
||||||
|
|
@ -51,7 +47,9 @@ Customize the notification content using slots for more flexibility.
|
||||||
|
|
||||||
## Accessible icon descriptions
|
## Accessible icon descriptions
|
||||||
|
|
||||||
Provide custom descriptions for icons to improve accessibility.
|
The status icon and close button icon descriptions appear on cursor hover and are read
|
||||||
|
by assistive technology. Default descriptions are provided in English and can be
|
||||||
|
overridden via `statusIconDescription` and `closeButtonDescription`.
|
||||||
|
|
||||||
<ToastNotification
|
<ToastNotification
|
||||||
title="错误"
|
title="错误"
|
||||||
|
|
@ -62,14 +60,10 @@ Provide custom descriptions for icons to improve accessibility.
|
||||||
|
|
||||||
## Hidden close button
|
## Hidden close button
|
||||||
|
|
||||||
Create a persistent notification by hiding the close button.
|
|
||||||
|
|
||||||
<ToastNotification hideCloseButton kind="warning" title="Scheduled maintenance" subtitle="Maintenance will last 2-4 hours." caption="{new Date().toLocaleString()}" />
|
<ToastNotification hideCloseButton kind="warning" title="Scheduled maintenance" subtitle="Maintenance will last 2-4 hours." caption="{new Date().toLocaleString()}" />
|
||||||
|
|
||||||
## Notification variants
|
## Notification variants
|
||||||
|
|
||||||
The component supports different notification types:
|
|
||||||
|
|
||||||
<ToastNotification kind="error" title="Error" subtitle="An internal server error occurred." caption="{new Date().toLocaleString()}" />
|
<ToastNotification kind="error" title="Error" subtitle="An internal server error occurred." caption="{new Date().toLocaleString()}" />
|
||||||
<ToastNotification kind="info" title="New updates" subtitle="Restart to get the latest updates." caption="{new Date().toLocaleString()}" />
|
<ToastNotification kind="info" title="New updates" subtitle="Restart to get the latest updates." caption="{new Date().toLocaleString()}" />
|
||||||
<ToastNotification kind="info-square" title="New updates" subtitle="Restart to get the latest updates." caption="{new Date().toLocaleString()}" />
|
<ToastNotification kind="info-square" title="New updates" subtitle="Restart to get the latest updates." caption="{new Date().toLocaleString()}" />
|
||||||
|
|
@ -79,8 +73,6 @@ The component supports different notification types:
|
||||||
|
|
||||||
## Low contrast
|
## Low contrast
|
||||||
|
|
||||||
Use low contrast variants for less prominent notifications.
|
|
||||||
|
|
||||||
<ToastNotification lowContrast kind="error" title="Error" subtitle="An internal server error occurred." caption="{new Date().toLocaleString()}" />
|
<ToastNotification lowContrast kind="error" title="Error" subtitle="An internal server error occurred." caption="{new Date().toLocaleString()}" />
|
||||||
<ToastNotification lowContrast kind="info" title="New updates" subtitle="Restart to get the latest updates." caption="{new Date().toLocaleString()}" />
|
<ToastNotification lowContrast kind="info" title="New updates" subtitle="Restart to get the latest updates." caption="{new Date().toLocaleString()}" />
|
||||||
<ToastNotification lowContrast kind="info-square" title="New updates" subtitle="Restart to get the latest updates." caption="{new Date().toLocaleString()}" />
|
<ToastNotification lowContrast kind="info-square" title="New updates" subtitle="Restart to get the latest updates." caption="{new Date().toLocaleString()}" />
|
||||||
|
|
|
||||||
|
|
@ -7,73 +7,53 @@ components: ["Toggle", "ToggleSkeleton"]
|
||||||
import Preview from "../../components/Preview.svelte";
|
import Preview from "../../components/Preview.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
`Toggle` provides a switch-like control that allows users to turn options on or off. It supports custom labels, different sizes, and various states to match your application's needs.
|
## Default (untoggled)
|
||||||
|
|
||||||
## Default
|
|
||||||
|
|
||||||
Display a basic toggle in its untoggled state by default.
|
|
||||||
|
|
||||||
<Toggle labelText="Push notifications" />
|
<Toggle labelText="Push notifications" />
|
||||||
|
|
||||||
## Toggled
|
## Toggled
|
||||||
|
|
||||||
Set `toggled` to `true` to display the toggle in its on state.
|
|
||||||
|
|
||||||
<Toggle labelText="Push notifications" toggled />
|
<Toggle labelText="Push notifications" toggled />
|
||||||
|
|
||||||
## Reactive example
|
## Reactive example
|
||||||
|
|
||||||
Use two-way binding to control the toggle state programmatically.
|
|
||||||
|
|
||||||
<FileSource src="/framed/Toggle/ToggleReactive" />
|
<FileSource src="/framed/Toggle/ToggleReactive" />
|
||||||
|
|
||||||
## on:toggle event
|
## on:toggle event
|
||||||
|
|
||||||
Listen for toggle state changes using the `on:toggle` event.
|
|
||||||
|
|
||||||
<Toggle labelText="Push notifications" on:toggle={e => console.log(e.detail)} />
|
<Toggle labelText="Push notifications" on:toggle={e => console.log(e.detail)} />
|
||||||
|
|
||||||
## Hidden label text
|
## Hidden label text
|
||||||
|
|
||||||
Set `hideLabel` to `true` to visually hide the label while maintaining accessibility.
|
Set `hideLabel` to `true` to visually hide the label text. It's recommended to still specify `labelText` for screen reader accessibility.
|
||||||
|
|
||||||
<Toggle labelText="Push notifications" hideLabel />
|
<Toggle labelText="Push notifications" hideLabel />
|
||||||
|
|
||||||
## Custom labels
|
## Custom labels
|
||||||
|
|
||||||
Customize the toggle labels using `labelA` and `labelB` props.
|
|
||||||
|
|
||||||
<Toggle labelText="Push notifications" labelA="No" labelB="Yes" />
|
<Toggle labelText="Push notifications" labelA="No" labelB="Yes" />
|
||||||
|
|
||||||
## Slottable labels
|
## Slottable labels
|
||||||
|
|
||||||
Use slots to customize the toggle labels with additional styling or content.
|
An alternative to the "labelA" and "labelB" props is to use the corresponding named slots.
|
||||||
|
|
||||||
<Toggle labelText="Push notifications">
|
<Toggle labelText="Push notifications">
|
||||||
<span slot="labelA" style="color: red">No</span>
|
<span slot="labelA" style="color: red">No</span>
|
||||||
<span slot="labelB" style="color: green">Yes</span>
|
<span slot="labelB" style="color: green">Yes</span>
|
||||||
</Toggle>
|
</Toggle>
|
||||||
|
|
||||||
## Disabled state
|
## Disabled
|
||||||
|
|
||||||
Set `disabled` to `true` to prevent user interaction.
|
|
||||||
|
|
||||||
<Toggle labelText="Push notifications" disabled />
|
<Toggle labelText="Push notifications" disabled />
|
||||||
|
|
||||||
## Small size
|
## Small size
|
||||||
|
|
||||||
Use the small size variant by setting `size` to `"sm"`.
|
|
||||||
|
|
||||||
<Toggle size="sm" labelText="Push notifications" />
|
<Toggle size="sm" labelText="Push notifications" />
|
||||||
|
|
||||||
## Skeleton
|
## Skeleton
|
||||||
|
|
||||||
Display a loading state using the skeleton component.
|
|
||||||
|
|
||||||
<ToggleSkeleton />
|
<ToggleSkeleton />
|
||||||
|
|
||||||
## Skeleton (small)
|
## Skeleton (small)
|
||||||
|
|
||||||
Use the small size variant for the skeleton component.
|
|
||||||
|
|
||||||
<ToggleSkeleton size="sm" />
|
<ToggleSkeleton size="sm" />
|
||||||
|
|
@ -8,11 +8,9 @@ components: ["Tooltip", "TooltipFooter"]
|
||||||
import Preview from "../../components/Preview.svelte";
|
import Preview from "../../components/Preview.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
`Tooltip` displays contextual information when users hover over or focus on an element. It supports various directions, alignments, and interactive content to provide additional context or guidance.
|
|
||||||
|
|
||||||
## Default
|
## Default
|
||||||
|
|
||||||
Display a tooltip triggered by the default information icon.
|
By default, the tooltip is triggered by an information icon.
|
||||||
|
|
||||||
<Tooltip>
|
<Tooltip>
|
||||||
<p>
|
<p>
|
||||||
|
|
@ -22,8 +20,6 @@ Display a tooltip triggered by the default information icon.
|
||||||
|
|
||||||
## With trigger text
|
## With trigger text
|
||||||
|
|
||||||
Use custom trigger text instead of the default icon.
|
|
||||||
|
|
||||||
<Tooltip triggerText="Resource list">
|
<Tooltip triggerText="Resource list">
|
||||||
<p>
|
<p>
|
||||||
Resources are provisioned based on your account's organization.
|
Resources are provisioned based on your account's organization.
|
||||||
|
|
@ -32,14 +28,10 @@ Use custom trigger text instead of the default icon.
|
||||||
|
|
||||||
## Reactive example
|
## Reactive example
|
||||||
|
|
||||||
Control the tooltip state programmatically.
|
|
||||||
|
|
||||||
<FileSource src="/framed/Tooltip/TooltipReactive" />
|
<FileSource src="/framed/Tooltip/TooltipReactive" />
|
||||||
|
|
||||||
## Directions
|
## Directions
|
||||||
|
|
||||||
Position the tooltip in different directions using the `direction` prop.
|
|
||||||
|
|
||||||
<Tooltip triggerText="Top" direction="top"><p>Top</p></Tooltip>
|
<Tooltip triggerText="Top" direction="top"><p>Top</p></Tooltip>
|
||||||
<Tooltip triggerText="Right" direction="right"><p>Right</p></Tooltip>
|
<Tooltip triggerText="Right" direction="right"><p>Right</p></Tooltip>
|
||||||
<Tooltip triggerText="Bottom" direction="bottom"><p>Bottom</p></Tooltip>
|
<Tooltip triggerText="Bottom" direction="bottom"><p>Bottom</p></Tooltip>
|
||||||
|
|
@ -47,16 +39,12 @@ Position the tooltip in different directions using the `direction` prop.
|
||||||
|
|
||||||
## Alignment
|
## Alignment
|
||||||
|
|
||||||
Align the tooltip content using the `align` prop.
|
|
||||||
|
|
||||||
<Tooltip triggerText="Start" align="start"><p>Start</p></Tooltip>
|
<Tooltip triggerText="Start" align="start"><p>Start</p></Tooltip>
|
||||||
<Tooltip triggerText="End" align="end"><p>End</p></Tooltip>
|
<Tooltip triggerText="End" align="end"><p>End</p></Tooltip>
|
||||||
<Tooltip triggerText="Center" align="center"><p>Center</p></Tooltip>
|
<Tooltip triggerText="Center" align="center"><p>Center</p></Tooltip>
|
||||||
|
|
||||||
## Interactive
|
## Interactive
|
||||||
|
|
||||||
Add interactive elements like links and buttons using `TooltipFooter`.
|
|
||||||
|
|
||||||
<Tooltip triggerText="Resource list">
|
<Tooltip triggerText="Resource list">
|
||||||
<p>
|
<p>
|
||||||
Resources are provisioned based on your account's organization.
|
Resources are provisioned based on your account's organization.
|
||||||
|
|
@ -64,13 +52,11 @@ Add interactive elements like links and buttons using `TooltipFooter`.
|
||||||
<TooltipFooter selectorPrimaryFocus="#d">
|
<TooltipFooter selectorPrimaryFocus="#d">
|
||||||
<Link href="/">Learn more</Link>
|
<Link href="/">Learn more</Link>
|
||||||
<Button id="d" size="small">Manage</Button>
|
<Button id="d" size="small">Manage</Button>
|
||||||
</TooltipFooter>
|
</TooltipFooter>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
|
|
||||||
## Custom icon (component)
|
## Custom icon (component)
|
||||||
|
|
||||||
Use a custom icon component with the `icon` prop.
|
|
||||||
|
|
||||||
<Tooltip triggerText="Resource list" icon={Catalog}>
|
<Tooltip triggerText="Resource list" icon={Catalog}>
|
||||||
<p>
|
<p>
|
||||||
Resources are provisioned based on your account's organization.
|
Resources are provisioned based on your account's organization.
|
||||||
|
|
@ -79,8 +65,6 @@ Use a custom icon component with the `icon` prop.
|
||||||
|
|
||||||
## Custom icon (slot)
|
## Custom icon (slot)
|
||||||
|
|
||||||
Customize the icon using the `icon` slot for more flexibility.
|
|
||||||
|
|
||||||
<Tooltip triggerText="Resource list">
|
<Tooltip triggerText="Resource list">
|
||||||
<div slot="icon" style="width: 1rem; height: 1rem; outline: 1px solid red;"></div>
|
<div slot="icon" style="width: 1rem; height: 1rem; outline: 1px solid red;"></div>
|
||||||
<p>
|
<p>
|
||||||
|
|
@ -90,8 +74,6 @@ Customize the icon using the `icon` slot for more flexibility.
|
||||||
|
|
||||||
## Hidden icon
|
## Hidden icon
|
||||||
|
|
||||||
Hide the icon while keeping the tooltip functionality using `hideIcon`.
|
|
||||||
|
|
||||||
<Tooltip hideIcon triggerText="Resource list">
|
<Tooltip hideIcon triggerText="Resource list">
|
||||||
<p>
|
<p>
|
||||||
Resources are provisioned based on your account's organization.
|
Resources are provisioned based on your account's organization.
|
||||||
|
|
|
||||||
|
|
@ -3,19 +3,17 @@
|
||||||
import Preview from "../../components/Preview.svelte";
|
import Preview from "../../components/Preview.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
`TooltipDefinition` provides inline definitions for terms or concepts. It displays a tooltip when users hover over or focus on the defined term, making it ideal for providing additional context without cluttering the interface.
|
|
||||||
|
|
||||||
## Default
|
## Default
|
||||||
|
|
||||||
Display a basic definition tooltip with the default bottom-center alignment.
|
|
||||||
|
|
||||||
<TooltipDefinition tooltipText="IBM Corporate Headquarters is based in Armonk, New York.">
|
<TooltipDefinition tooltipText="IBM Corporate Headquarters is based in Armonk, New York.">
|
||||||
Armonk
|
Armonk
|
||||||
</TooltipDefinition>
|
</TooltipDefinition>
|
||||||
|
|
||||||
## Custom tooltip direction and alignment
|
## Custom tooltip direction and alignment
|
||||||
|
|
||||||
Customize the tooltip position using the `direction` and `align` props. The default direction is `"bottom"` and alignment is `"center"`.
|
Customize the tooltip menu direction and alignment through the `direction` and `align` props.
|
||||||
|
|
||||||
|
By default, `direction` is `"bottom"` and `align` is `"center"`.
|
||||||
|
|
||||||
<TooltipDefinition direction="top" align="start" tooltipText="IBM Corporate Headquarters is based in Armonk, New York.">
|
<TooltipDefinition direction="top" align="start" tooltipText="IBM Corporate Headquarters is based in Armonk, New York.">
|
||||||
Armonk
|
Armonk
|
||||||
|
|
@ -23,8 +21,6 @@ Customize the tooltip position using the `direction` and `align` props. The defa
|
||||||
|
|
||||||
## Custom tooltip slot
|
## Custom tooltip slot
|
||||||
|
|
||||||
Use the `tooltip` slot to customize the tooltip content with additional styling or structure.
|
|
||||||
|
|
||||||
<TooltipDefinition>
|
<TooltipDefinition>
|
||||||
Armonk
|
Armonk
|
||||||
<span slot="tooltip" style="color: red">
|
<span slot="tooltip" style="color: red">
|
||||||
|
|
|
||||||
|
|
@ -5,18 +5,12 @@
|
||||||
import Preview from "../../components/Preview.svelte";
|
import Preview from "../../components/Preview.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
`TooltipIcon` displays contextual information when users hover over or focus on an icon. It's ideal for providing additional context about icons or actions in your interface.
|
## Default ("bottom" direction, "center" aligned)
|
||||||
|
|
||||||
## Default
|
|
||||||
|
|
||||||
Display a tooltip with the default bottom-center alignment.
|
|
||||||
|
|
||||||
<TooltipIcon tooltipText="Carbon is an open source design system by IBM." icon={Carbon} />
|
<TooltipIcon tooltipText="Carbon is an open source design system by IBM." icon={Carbon} />
|
||||||
|
|
||||||
## Directions
|
## Directions
|
||||||
|
|
||||||
Position the tooltip in different directions and alignments using the `direction` and `align` props.
|
|
||||||
|
|
||||||
<TooltipIcon tooltipText="Top start" direction="top" align="start" icon={Filter} />
|
<TooltipIcon tooltipText="Top start" direction="top" align="start" icon={Filter} />
|
||||||
<TooltipIcon tooltipText="Right end" direction="right" align="end" icon={Filter} />
|
<TooltipIcon tooltipText="Right end" direction="right" align="end" icon={Filter} />
|
||||||
<TooltipIcon tooltipText="Bottom start" direction="bottom" align="start" icon={Filter} />
|
<TooltipIcon tooltipText="Bottom start" direction="bottom" align="start" icon={Filter} />
|
||||||
|
|
@ -24,14 +18,12 @@ Position the tooltip in different directions and alignments using the `direction
|
||||||
|
|
||||||
## Custom tooltip text
|
## Custom tooltip text
|
||||||
|
|
||||||
Use the `tooltipText` slot to customize the tooltip content with additional styling.
|
Use the "text" slot to customize the tooltip text.
|
||||||
|
|
||||||
<TooltipIcon icon={Carbon}>
|
<TooltipIcon icon={Carbon}>
|
||||||
<span slot="tooltipText" style="color: red">Carbon is an open source design system by IBM.</span>
|
<span slot="tooltipText" style="color: red">Carbon is an open source design system by IBM.</span>
|
||||||
</TooltipIcon>
|
</TooltipIcon>
|
||||||
|
|
||||||
## Disabled state
|
## Disabled
|
||||||
|
|
||||||
Set `disabled` to `true` to prevent user interaction with the tooltip.
|
|
||||||
|
|
||||||
<TooltipIcon disabled tooltipText="Carbon is an open source design system by IBM." icon={Carbon} />
|
<TooltipIcon disabled tooltipText="Carbon is an open source design system by IBM." icon={Carbon} />
|
||||||
|
|
@ -1,19 +1,15 @@
|
||||||
<script>
|
<script>
|
||||||
import { InlineNotification, UnorderedList, ListItem, Link } from "carbon-components-svelte";
|
import { InlineNotification, UnorderedList, ListItem } from "carbon-components-svelte";
|
||||||
import Preview from "../../components/Preview.svelte";
|
import Preview from "../../components/Preview.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
`TreeView` displays hierarchical data in a collapsible tree structure. It supports node selection, expansion, icons, and programmatic control of the tree state.
|
|
||||||
|
|
||||||
## Default
|
## Default
|
||||||
|
|
||||||
Create a basic tree view using the `nodes` prop. Each node requires an `id` and `text`, with optional properties for `disabled`, `icon`, and child `nodes`.
|
The `children` prop accepts an array of child nodes. Each node should contain `id` and `text` properties.
|
||||||
|
|
||||||
<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
|
Optional properties include `disabled`, `icon`, and `children`.
|
||||||
<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>.
|
A parent node contains `children` while a leaf node does not.
|
||||||
</div>
|
|
||||||
</InlineNotification>
|
|
||||||
|
|
||||||
<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
|
<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
|
||||||
<div class="body-short-01">Every node must have a unique id.</div>
|
<div class="body-short-01">Every node must have a unique id.</div>
|
||||||
|
|
@ -23,13 +19,15 @@ Create a basic tree view using the `nodes` prop. Each node requires an `id` and
|
||||||
|
|
||||||
## Slottable node
|
## Slottable node
|
||||||
|
|
||||||
Customize node rendering using the default slot with the `let:node` directive. The node object provides:
|
By default, each item renders the value of `node.text`. Use the data from `let:node` directive to override the default slot.
|
||||||
|
|
||||||
|
The destructured `let:node` contains the following properties:
|
||||||
|
|
||||||
<UnorderedList svx-ignore style="margin-bottom: var(--cds-spacing-08)">
|
<UnorderedList svx-ignore style="margin-bottom: var(--cds-spacing-08)">
|
||||||
<ListItem><strong>id</strong>: the node id</ListItem>
|
<ListItem><strong>id</strong>: the node id</ListItem>
|
||||||
<ListItem><strong>text</strong>: the node text</ListItem>
|
<ListItem><strong>text</strong>: the node text</ListItem>
|
||||||
<ListItem><strong>expanded</strong>: true if the node is expanded</ListItem>
|
<ListItem><strong>expanded</strong>: true if the node is expanded</ListItem>
|
||||||
<ListItem><strong>leaf</strong>: true if the node does not have child nodes</ListItem>
|
<ListItem><strong>leaf</strong>: true if the node does not have children</ListItem>
|
||||||
<ListItem><strong>disabled</strong>: true if the node is disabled</ListItem>
|
<ListItem><strong>disabled</strong>: true if the node is disabled</ListItem>
|
||||||
<ListItem><strong>selected</strong>: true if the node is selected</ListItem>
|
<ListItem><strong>selected</strong>: true if the node is selected</ListItem>
|
||||||
</UnorderedList>
|
</UnorderedList>
|
||||||
|
|
@ -38,66 +36,68 @@ Customize node rendering using the default slot with the `let:node` directive. T
|
||||||
|
|
||||||
## Initial active node
|
## Initial active node
|
||||||
|
|
||||||
Set the initial active node using the `activeId` prop.
|
The active node can be set through `activeId`.
|
||||||
|
|
||||||
<FileSource src="/framed/TreeView/TreeViewActive" />
|
<FileSource src="/framed/TreeView/TreeViewActive" />
|
||||||
|
|
||||||
## Compact size
|
## Compact size
|
||||||
|
|
||||||
Use the compact variant by setting `size` to `"compact"`.
|
Set `size` to `"compact"` to use the compact variant.
|
||||||
|
|
||||||
<FileSource src="/framed/TreeView/TreeViewCompact" />
|
<FileSource src="/framed/TreeView/TreeViewCompact" />
|
||||||
|
|
||||||
## With icons
|
## With icons
|
||||||
|
|
||||||
Add icons to nodes by defining an `icon` property with a Carbon Svelte icon component.
|
To render a node with an icon, define an `icon` property with a Carbon Svelte icon as its value.
|
||||||
|
|
||||||
<FileSource src="/framed/TreeView/TreeViewIcons" />
|
<FileSource src="/framed/TreeView/TreeViewIcons" />
|
||||||
|
|
||||||
## Initial expanded nodes
|
## Initial expanded nodes
|
||||||
|
|
||||||
Set initially expanded nodes using the `expandedIds` prop.
|
Expanded nodes can be set using `expandedIds`.
|
||||||
|
|
||||||
<FileSource src="/framed/TreeView/TreeViewExpanded" />
|
<FileSource src="/framed/TreeView/TreeViewExpanded" />
|
||||||
|
|
||||||
## Initial multiple selected nodes
|
## Initial multiple selected nodes
|
||||||
|
|
||||||
Set multiple initially selected nodes using the `selectedIds` prop.
|
Initial multiple selected nodes can be set using `selectedIds`.
|
||||||
|
|
||||||
<FileSource src="/framed/TreeView/TreeViewMultiselect" />
|
<FileSource src="/framed/TreeView/TreeViewMultiselect" />
|
||||||
|
|
||||||
## Expand all nodes
|
## Expand all nodes
|
||||||
|
|
||||||
Programmatically expand all nodes using the `TreeView.expandAll()` method.
|
To programmatically expand all nodes, access the component instance using the [bind:this](https://svelte.dev/docs#bind_element) directive and invoke the `TreeView.expandAll()` accessor.
|
||||||
|
|
||||||
<FileSource src="/framed/TreeView/TreeViewExpandAll" />
|
<FileSource src="/framed/TreeView/TreeViewExpandAll" />
|
||||||
|
|
||||||
## Collapse all nodes
|
## Collapse all nodes
|
||||||
|
|
||||||
Programmatically collapse all nodes using the `TreeView.collapseAll()` method.
|
Similarly, invoke `TreeView.collapseAll()` to collapse all nodes.
|
||||||
|
|
||||||
<FileSource src="/framed/TreeView/TreeViewCollapseAll" />
|
<FileSource src="/framed/TreeView/TreeViewCollapseAll" />
|
||||||
|
|
||||||
## Expand a subset of nodes
|
## Expand a subset of nodes
|
||||||
|
|
||||||
Use `TreeView.expandNodes` to expand specific nodes based on a condition.
|
Use the `TreeView.expandNodes` method to expand only a subset of nodes.
|
||||||
|
|
||||||
|
The method accepts an argument that takes a node and returns a boolean.
|
||||||
|
|
||||||
|
If no argument is provided, all nodes will be expanded.
|
||||||
|
|
||||||
<FileSource src="/framed/TreeView/TreeViewExpandNodes" />
|
<FileSource src="/framed/TreeView/TreeViewExpandNodes" />
|
||||||
|
|
||||||
## Collapse a subset of nodes
|
## Collapse a subset of nodes
|
||||||
|
|
||||||
Use `TreeView.collapseNodes` to collapse specific nodes based on a condition.
|
Use the `TreeView.collapseNodes` method to collapse a subset of nodes.
|
||||||
|
|
||||||
|
If no argument is provided, all nodes will be collapsed.
|
||||||
|
|
||||||
<FileSource src="/framed/TreeView/TreeViewCollapseNodes" />
|
<FileSource src="/framed/TreeView/TreeViewCollapseNodes" />
|
||||||
|
|
||||||
## Show a specific node
|
## Show a specific node
|
||||||
|
|
||||||
Use `TreeView.showNode` to expand, select, and focus a specific node.
|
Use the `TreeView.showNode` method to show a specific node.
|
||||||
|
|
||||||
|
If a matching node is found, it will be expanded, selected, and focused.
|
||||||
|
|
||||||
<FileSource src="/framed/TreeView/TreeViewShowNode" />
|
<FileSource src="/framed/TreeView/TreeViewShowNode" />
|
||||||
|
|
||||||
## Flat data structure
|
|
||||||
|
|
||||||
Convert flat data to a hierarchical structure using the `toHierarchy` utility.
|
|
||||||
|
|
||||||
<FileSource src="/framed/TreeView/TreeViewFlatArray" />
|
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,14 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { Truncate, truncate } from "carbon-components-svelte";
|
import { Truncate, truncate } from "carbon-components-svelte";
|
||||||
import Preview from "../../components/Preview.svelte";
|
import Preview from "../../components/Preview.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
`Truncate` provides text truncation functionality for single-line content. It implements Carbon's text truncation CSS classes and can be used as either a component or an action.
|
This utility component wraps the `.bx--text-truncate--*` CSS selectors from [carbon-components](https://github.com/carbon-design-system/carbon/blob/master/packages/components/src/globals/scss/_helper-classes.scss#L11) for single-line text truncation.
|
||||||
|
|
||||||
## Default
|
## Default
|
||||||
|
|
||||||
Display truncated text using the default component. Text is wrapped in a paragraph element and truncated at the end of the line.
|
By default, text will be clamped at the end of the line. Text is wrapped with a paragraph (`p`) element. Use the [truncate action](#usetruncate) to truncate text in other elements.
|
||||||
|
|
||||||
<Truncate>
|
<Truncate>
|
||||||
Carbon Components Svelte is a Svelte component library that implements the Carbon Design System, an open source design system by IBM.
|
Carbon Components Svelte is a Svelte component library that implements the Carbon Design System, an open source design system by IBM.
|
||||||
|
|
@ -15,7 +16,7 @@ Display truncated text using the default component. Text is wrapped in a paragra
|
||||||
|
|
||||||
## Clamp front
|
## Clamp front
|
||||||
|
|
||||||
Truncate text from the beginning by setting `clamp` to `"front"`.
|
Set `clamp` to `"front"` to clamp the text from the front.
|
||||||
|
|
||||||
<Truncate clamp="front">
|
<Truncate clamp="front">
|
||||||
Carbon Components Svelte is a Svelte component library that implements the Carbon Design System, an open source design system by IBM.
|
Carbon Components Svelte is a Svelte component library that implements the Carbon Design System, an open source design system by IBM.
|
||||||
|
|
@ -23,7 +24,7 @@ Truncate text from the beginning by setting `clamp` to `"front"`.
|
||||||
|
|
||||||
## use:truncate
|
## use:truncate
|
||||||
|
|
||||||
Apply truncation to any HTML element using the `truncate` action.
|
The `truncate` action can be used on plain HTML elements.
|
||||||
|
|
||||||
<h4 use:truncate>
|
<h4 use:truncate>
|
||||||
Carbon Components Svelte is a Svelte component library that implements the Carbon Design System, an open source design system by IBM.
|
Carbon Components Svelte is a Svelte component library that implements the Carbon Design System, an open source design system by IBM.
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,5 @@
|
||||||
|
|
||||||
|
|
||||||
---
|
---
|
||||||
components: ["Header",
|
components: ["Header",
|
||||||
"HeaderAction",
|
"HeaderAction",
|
||||||
|
|
@ -25,8 +27,6 @@ components: ["Header",
|
||||||
import Preview from "../../components/Preview.svelte";
|
import Preview from "../../components/Preview.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
`UIShell` provides a collection of components for building application shells and navigation structures. It includes header, side navigation, and content components that work together to create a cohesive user interface.
|
|
||||||
|
|
||||||
<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
|
<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
|
||||||
<div class="body-short-01">
|
<div class="body-short-01">
|
||||||
Currently, the UI Shell is not themable and only supports dark mode.
|
Currently, the UI Shell is not themable and only supports dark mode.
|
||||||
|
|
@ -37,8 +37,6 @@ Open the following examples in a new tab to experience them in full.
|
||||||
|
|
||||||
## Header
|
## Header
|
||||||
|
|
||||||
Create a basic header with the `Header` component.
|
|
||||||
|
|
||||||
<FileSource src="/framed/UIShell/Header" />
|
<FileSource src="/framed/UIShell/Header" />
|
||||||
|
|
||||||
## Header with side navigation
|
## Header with side navigation
|
||||||
|
|
@ -61,30 +59,14 @@ You can disable the `transition` by setting it to `false`.
|
||||||
|
|
||||||
<FileSource src="/framed/UIShell/HeaderSwitcher" />
|
<FileSource src="/framed/UIShell/HeaderSwitcher" />
|
||||||
|
|
||||||
## Header with multiple switchers
|
|
||||||
|
|
||||||
Multiple switchers can be used, and the switcher button can be customized. For example, display a tooltip using `iconDescription`.
|
|
||||||
|
|
||||||
Control the tooltip alignment using `tooltipAlignment`.
|
|
||||||
|
|
||||||
Note that providing `text` overrides the tooltip.
|
|
||||||
|
|
||||||
<FileSource src="/framed/UIShell/HeaderMultipleSwitcher" />
|
|
||||||
|
|
||||||
## Header with global search
|
## Header with global search
|
||||||
|
|
||||||
Add a global search component to the header.
|
|
||||||
|
|
||||||
<FileSource src="/framed/UIShell/HeaderSearch" />
|
<FileSource src="/framed/UIShell/HeaderSearch" />
|
||||||
|
|
||||||
## Header with utilities
|
## Header with utilities
|
||||||
|
|
||||||
Include utility components in the header using `HeaderUtilities`.
|
|
||||||
|
|
||||||
<FileSource src="/framed/UIShell/HeaderUtilities" />
|
<FileSource src="/framed/UIShell/HeaderUtilities" />
|
||||||
|
|
||||||
## Header with persisted hamburger menu
|
## Header with persisted hamburger menu
|
||||||
|
|
||||||
Create a header with a persistent hamburger menu state.
|
|
||||||
|
|
||||||
<FileSource src="/framed/UIShell/PersistedHamburgerMenu" />
|
<FileSource src="/framed/UIShell/PersistedHamburgerMenu" />
|
||||||
|
|
@ -7,8 +7,6 @@ components: ["UnorderedList", "ListItem"]
|
||||||
import Preview from "../../components/Preview.svelte";
|
import Preview from "../../components/Preview.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
`UnorderedList` provides a styled unordered list component that supports nested lists, links, and expressive typography. It's ideal for displaying bulleted content in your interface.
|
|
||||||
|
|
||||||
<InlineNotification svx-ignore lowContrast title="Tip:" kind="info" hideCloseButton>
|
<InlineNotification svx-ignore lowContrast title="Tip:" kind="info" hideCloseButton>
|
||||||
<div class="body-short-01">
|
<div class="body-short-01">
|
||||||
Consider using the <Link href="/components/RecursiveList#unordered">RecursiveList</Link> component for rendering tree structured data.
|
Consider using the <Link href="/components/RecursiveList#unordered">RecursiveList</Link> component for rendering tree structured data.
|
||||||
|
|
@ -17,8 +15,6 @@ components: ["UnorderedList", "ListItem"]
|
||||||
|
|
||||||
## Default
|
## Default
|
||||||
|
|
||||||
Create a basic unordered list with `ListItem` components.
|
|
||||||
|
|
||||||
<UnorderedList>
|
<UnorderedList>
|
||||||
<ListItem>Unordered list item</ListItem>
|
<ListItem>Unordered list item</ListItem>
|
||||||
<ListItem>Unordered list item</ListItem>
|
<ListItem>Unordered list item</ListItem>
|
||||||
|
|
@ -27,8 +23,6 @@ Create a basic unordered list with `ListItem` components.
|
||||||
|
|
||||||
## With links
|
## With links
|
||||||
|
|
||||||
Add links to list items by wrapping them in `Link` components.
|
|
||||||
|
|
||||||
<UnorderedList>
|
<UnorderedList>
|
||||||
<ListItem>
|
<ListItem>
|
||||||
<Link href="#">Unordered list item</Link>
|
<Link href="#">Unordered list item</Link>
|
||||||
|
|
@ -43,8 +37,6 @@ Add links to list items by wrapping them in `Link` components.
|
||||||
|
|
||||||
## Nested
|
## Nested
|
||||||
|
|
||||||
Create nested lists by setting `nested` to `true` on child `UnorderedList` components.
|
|
||||||
|
|
||||||
<UnorderedList>
|
<UnorderedList>
|
||||||
<ListItem>
|
<ListItem>
|
||||||
Unordered list level 1
|
Unordered list level 1
|
||||||
|
|
@ -65,7 +57,7 @@ Create nested lists by setting `nested` to `true` on child `UnorderedList` compo
|
||||||
|
|
||||||
## Expressive styles
|
## Expressive styles
|
||||||
|
|
||||||
Use Carbon's expressive typesetting by setting `expressive` to `true`.
|
Set `expressive` to `true` to use Carbon's expressive typesetting.
|
||||||
|
|
||||||
<UnorderedList expressive>
|
<UnorderedList expressive>
|
||||||
<ListItem><Link size="lg" href="#">Unordered list item</Link></ListItem>
|
<ListItem><Link size="lg" href="#">Unordered list item</Link></ListItem>
|
||||||
|
|
|
||||||
|
|
@ -22,14 +22,14 @@
|
||||||
let open = false;
|
let open = false;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Button kind="ghost" size="field" on:click={() => (open = !open)}>
|
<Button kind="ghost" size="field" on:click="{() => (open = !open)}">
|
||||||
{open ? "Collapse" : "Expand"}
|
{open ? "Collapse" : "Expand"}
|
||||||
all
|
all
|
||||||
</Button>
|
</Button>
|
||||||
|
|
||||||
<Accordion>
|
<Accordion>
|
||||||
{#each items as item}
|
{#each items as item}
|
||||||
<AccordionItem title={item.title} {open}>
|
<AccordionItem title="{item.title}" open="{open}">
|
||||||
<p>{item.description}</p>
|
<p>{item.description}</p>
|
||||||
</AccordionItem>
|
</AccordionItem>
|
||||||
{/each}
|
{/each}
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,7 @@
|
||||||
|
|
||||||
<Breadcrumb>
|
<Breadcrumb>
|
||||||
{#each items as item, i}
|
{#each items as item, i}
|
||||||
<BreadcrumbItem href={item.href} isCurrentPage={i === items.length - 1}>
|
<BreadcrumbItem href="{item.href}" isCurrentPage="{i === items.length - 1}">
|
||||||
{item.text}
|
{item.text}
|
||||||
</BreadcrumbItem>
|
</BreadcrumbItem>
|
||||||
{/each}
|
{/each}
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@
|
||||||
let events = [];
|
let events = [];
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Breakpoint bind:size on:change={(e) => (events = [...events, e.detail])} />
|
<Breakpoint bind:size on:change="{(e) => (events = [...events, e.detail])}" />
|
||||||
|
|
||||||
<p>Resize the width of your browser.</p>
|
<p>Resize the width of your browser.</p>
|
||||||
<h6>Breakpoint size</h6>
|
<h6>Breakpoint size</h6>
|
||||||
|
|
|
||||||
|
|
@ -7,9 +7,9 @@
|
||||||
<Button bind:ref>Primary button</Button>
|
<Button bind:ref>Primary button</Button>
|
||||||
<Button
|
<Button
|
||||||
kind="ghost"
|
kind="ghost"
|
||||||
on:click={() => {
|
on:click="{() => {
|
||||||
ref?.focus();
|
ref?.focus();
|
||||||
}}
|
}}"
|
||||||
>
|
>
|
||||||
Click to focus the Primary button
|
Click to focus the Primary button
|
||||||
</Button>
|
</Button>
|
||||||
|
|
|
||||||
|
|
@ -8,23 +8,23 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Button
|
<Button
|
||||||
isSelected={index === 0}
|
isSelected="{index === 0}"
|
||||||
kind="ghost"
|
kind="ghost"
|
||||||
iconDescription="Bold"
|
iconDescription="Bold"
|
||||||
icon={TextBold}
|
icon="{TextBold}"
|
||||||
on:click={() => (index = 0)}
|
on:click="{() => (index = 0)}"
|
||||||
/>
|
/>
|
||||||
<Button
|
<Button
|
||||||
isSelected={index === 1}
|
isSelected="{index === 1}"
|
||||||
kind="ghost"
|
kind="ghost"
|
||||||
iconDescription="Italicize"
|
iconDescription="Italicize"
|
||||||
icon={TextItalic}
|
icon="{TextItalic}"
|
||||||
on:click={() => (index = 1)}
|
on:click="{() => (index = 1)}"
|
||||||
/>
|
/>
|
||||||
<Button
|
<Button
|
||||||
isSelected={index === 2}
|
isSelected="{index === 2}"
|
||||||
kind="ghost"
|
kind="ghost"
|
||||||
iconDescription="Underline"
|
iconDescription="Underline"
|
||||||
icon={TextUnderline}
|
icon="{TextUnderline}"
|
||||||
on:click={() => (index = 2)}
|
on:click="{() => (index = 2)}"
|
||||||
/>
|
/>
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,7 @@
|
||||||
<Checkbox labelText="Label text" bind:checked />
|
<Checkbox labelText="Label text" bind:checked />
|
||||||
|
|
||||||
<div style="margin: var(--cds-layout-01) 0">
|
<div style="margin: var(--cds-layout-01) 0">
|
||||||
<Button on:click={() => (checked = !checked)}>Toggle</Button>
|
<Button on:click="{() => (checked = !checked)}">Toggle</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<strong>checked:</strong>
|
<strong>checked:</strong>
|
||||||
|
|
|
||||||
|
|
@ -6,11 +6,11 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#each values as value}
|
{#each values as value}
|
||||||
<Checkbox bind:group labelText={value} {value} />
|
<Checkbox bind:group labelText="{value}" value="{value}" />
|
||||||
{/each}
|
{/each}
|
||||||
|
|
||||||
<div style="margin: var(--cds-layout-01) 0">
|
<div style="margin: var(--cds-layout-01) 0">
|
||||||
<Button on:click={() => (group = ["Banana"])}>Set to ["Banana"]</Button>
|
<Button on:click="{() => (group = ['Banana'])}">Set to ["Banana"]</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<strong>Selected:</strong>
|
<strong>Selected:</strong>
|
||||||
|
|
|
||||||
|
|
@ -5,5 +5,5 @@
|
||||||
|
|
||||||
<CodeSnippet
|
<CodeSnippet
|
||||||
code="npm i carbon-components-svelte"
|
code="npm i carbon-components-svelte"
|
||||||
copy={(text) => copy(text)}
|
copy="{(text) => copy(text)}"
|
||||||
/>
|
/>
|
||||||
|
|
|
||||||
|
|
@ -4,16 +4,16 @@
|
||||||
let expanded = false;
|
let expanded = false;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Button on:click={() => (expanded = !expanded)}>Toggle expansion</Button>
|
<Button on:click="{() => (expanded = !expanded)}">Toggle expansion</Button>
|
||||||
|
|
||||||
<CodeSnippet
|
<CodeSnippet
|
||||||
type="multi"
|
type="multi"
|
||||||
code={Array.from({ length: 30 }, (_, i) => i + 1).join("\n")}
|
code="{Array.from({ length: 30 }, (_, i) => i + 1).join('\n')}"
|
||||||
bind:expanded
|
bind:expanded
|
||||||
on:expand={() => {
|
on:expand="{() => {
|
||||||
console.log("on:expand");
|
console.log('on:expand');
|
||||||
}}
|
}}"
|
||||||
on:collapse={() => {
|
on:collapse="{() => {
|
||||||
console.log("on:collapse");
|
console.log('on:collapse');
|
||||||
}}
|
}}"
|
||||||
/>
|
/>
|
||||||
|
|
|
||||||
|
|
@ -13,4 +13,4 @@
|
||||||
labelText="Trigger snippet overflow"
|
labelText="Trigger snippet overflow"
|
||||||
style="margin-bottom: var(--cds-spacing-05)"
|
style="margin-bottom: var(--cds-spacing-05)"
|
||||||
/>
|
/>
|
||||||
<CodeSnippet type="multi" {code} />
|
<CodeSnippet type="multi" code="{code}" />
|
||||||
|
|
|
||||||
|
|
@ -17,16 +17,16 @@
|
||||||
<h5>"Show more" will not render</h5>
|
<h5>"Show more" will not render</h5>
|
||||||
<br />
|
<br />
|
||||||
{/if}
|
{/if}
|
||||||
<div class:hidden={!toggled}>
|
<div class:hidden="{!toggled}">
|
||||||
<CodeSnippet type="multi" {code} />
|
<CodeSnippet type="multi" code="{code}" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{#if toggled}
|
{#if toggled}
|
||||||
<br /><br />
|
<br /><br />
|
||||||
<h5>"Show more" will render</h5>
|
<h5>"Show more" will render</h5>
|
||||||
<br />
|
<br />
|
||||||
<div class:hidden={!toggled}>
|
<div class:hidden="{!toggled}">
|
||||||
<CodeSnippet type="multi" {code} />
|
<CodeSnippet type="multi" code="{code}" />
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -8,13 +8,13 @@
|
||||||
titleText="Contact"
|
titleText="Contact"
|
||||||
placeholder="Select contact method"
|
placeholder="Select contact method"
|
||||||
selectedId="1"
|
selectedId="1"
|
||||||
bind:this={ref}
|
bind:this="{ref}"
|
||||||
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' },
|
||||||
]}
|
]}"
|
||||||
/>
|
/>
|
||||||
<br />
|
<br />
|
||||||
<Button on:click={ref.clear}>Clear</Button>
|
<Button on:click="{ref.clear}">Clear</Button>
|
||||||
<Button on:click={() => ref.clear({ focus: false })}>Clear (no focus)</Button>
|
<Button on:click="{() => ref.clear({ focus: false })}">Clear (no focus)</Button>
|
||||||
|
|
|
||||||
|
|
@ -5,11 +5,11 @@
|
||||||
<ComboBox
|
<ComboBox
|
||||||
titleText="Contact"
|
titleText="Contact"
|
||||||
placeholder="Select contact method"
|
placeholder="Select contact method"
|
||||||
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' },
|
||||||
]}
|
]}"
|
||||||
let:item
|
let:item
|
||||||
let:index
|
let:index
|
||||||
>
|
>
|
||||||
|
|
|
||||||
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