@ni/nimble-components 7.3.0 → 7.4.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +24 -1
- package/dist/all-components-bundle.js +18611 -0
- package/dist/all-components-bundle.js.map +1 -0
- package/dist/all-components-bundle.min.js +1345 -0
- package/dist/all-components-bundle.min.js.map +1 -0
- package/dist/esm/all-components.d.ts +27 -0
- package/dist/esm/all-components.js +28 -0
- package/dist/esm/all-components.js.map +1 -0
- package/dist/esm/icon-base/icon-metadata.d.ts +1 -1
- package/dist/esm/icon-base/icon-metadata.js +423 -141
- package/dist/esm/icon-base/icon-metadata.js.map +1 -1
- package/dist/esm/nimble-components/src/all-components.d.ts +27 -0
- package/dist/esm/nimble-components/src/icon-base/icon-metadata.d.ts +1 -1
- package/dist/esm/nimble-components/src/select/index.d.ts +1 -2
- package/dist/esm/select/index.d.ts +1 -2
- package/dist/esm/select/index.js +8 -18
- package/dist/esm/select/index.js.map +1 -1
- package/package.json +6 -2
package/README.md
CHANGED
|
@@ -17,7 +17,7 @@ If you are using one of the following frameworks see associated wrapper document
|
|
|
17
17
|
1. Angular: See the [nimble-angular](/angular-workspace/projects/ni/nimble-angular) documentation.
|
|
18
18
|
2. Blazor WebAssembly or Blazor Server: See the [nimble-blazor](/packages/nimble-blazor) documentation.
|
|
19
19
|
|
|
20
|
-
### Using
|
|
20
|
+
### Using in a Webpack Application
|
|
21
21
|
|
|
22
22
|
If you have an existing application that incorporates a module bundler like [Webpack](https://webpack.js.org/) but doesn't include one of the above frameworks, you can use `@ni/nimble-components` directly. Exact instructions will depend on your application, but here are some common steps:
|
|
23
23
|
|
|
@@ -26,6 +26,29 @@ If you have an existing application that incorporates a module bundler like [Web
|
|
|
26
26
|
3. Add the HTML for the component to your page. You can see sample code for each component in the [Nimble Storybook](https://ni.github.io/nimble/storybook/) by going to the **Docs** tab for the component and clicking **Show code**. For example: `<nimble-succeeded-icon></nimble-succeeded-icon>`.
|
|
27
27
|
4. Nimble components are [standard web components (custom elements)](https://developer.mozilla.org/en-US/docs/Web/Web_Components) so you can configure them via normal DOM APIs like attributes, properties, events, and methods. The [Storybook documentation](https://ni.github.io/nimble/storybook/) for each component describes its custom API.
|
|
28
28
|
|
|
29
|
+
### Prototyping in a static webpage
|
|
30
|
+
|
|
31
|
+
If you have a static webpage without a bundler, you can use `@ni/nimble-components` by including one of the bundled distribution files. For example:
|
|
32
|
+
|
|
33
|
+
```html
|
|
34
|
+
<html>
|
|
35
|
+
<head>
|
|
36
|
+
<script src="https://unpkg.com/@ni/nimble-components/dist/all-components-bundle.js"></script>
|
|
37
|
+
</head>
|
|
38
|
+
<body>
|
|
39
|
+
<nimble-theme-provider theme="light">
|
|
40
|
+
<nimble-button>Hello</nimble-button>
|
|
41
|
+
</nimble-theme-provider>
|
|
42
|
+
</body>
|
|
43
|
+
</html>
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
Alternatively, to use the minified bundle: `https://unpkg.com/@ni/nimble-components/dist/all-components-bundle.min.js`. To specify a specific version see the instructions on [unpkg.com](https://unpkg.com/).
|
|
47
|
+
|
|
48
|
+
Note: Production applications **must not** rely on the `unpkg.com` service. The service is a useful tool for prototyping or reporting issues.
|
|
49
|
+
|
|
50
|
+
Note: It is recommended that production applications use build tooling to create optimized builds using only required components instead of importing all components via the `all-components-bundle` files.
|
|
51
|
+
|
|
29
52
|
## Theming
|
|
30
53
|
|
|
31
54
|
This package contains a theming system which enables changing the appearance of controls based on user preferences or application designs.
|