@3dsource/source-ui-native 1.0.18 → 1.0.19

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.
Files changed (6) hide show
  1. package/README.md +31 -19
  2. package/fesm2022/3dsource-source-ui-native.mjs +120 -120
  3. package/fesm2022/3dsource-source-ui-native.mjs.map +1 -1
  4. package/package.json +2 -2
  5. package/styles/elements/_src-icon-button.scss +82 -0
  6. package/styles/elements/elements.scss +1 -0
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # @3dsource/source-ui-native
2
2
 
3
- A collection of native UI components for web applications, designed to be used with or without Angular. These components provide a consistent design system for 3dsource applications.
3
+ A collection of native UI components for web applications, designed to be used with or without Angular. These components provide a consistent design system for 3D Source applications.
4
4
 
5
5
  ## Overview
6
6
 
@@ -27,56 +27,68 @@ Add the following import to your main styles file:
27
27
  The components can be used directly in your HTML:
28
28
 
29
29
  ```html
30
- <source-button>Click Me</source-button>
30
+ <src-button>Click Me</src-button>
31
31
  ```
32
32
 
33
33
  ## Available Components
34
34
 
35
35
  ### UI Elements
36
36
 
37
- - **[source-badge](src/lib/components/source-badge)** - Display badges and tags
38
- - **[source-banner](src/lib/components/source-banner)** - Show notification banners
39
- - **[source-button](src/lib/components/source-button)** - Customizable button component
40
- - **[source-copyright](src/lib/components/source-copyright)** - Display copyright information
41
- - **[source-divider](src/lib/components/source-divider)** - Horizontal or vertical dividers
42
- - **[source-hint](src/lib/components/source-hint)** - Show tooltips and hints
43
- - **[source-icon-button](src/lib/components/source-icon-button)** - Button with icon
44
- - **[source-loading](src/lib/components/source-loading)** - Loading indicator
45
- - **[source-logo-loading](src/lib/components/source-logo-loading)** - Loading indicator with logo
46
- - **[source-slider](src/lib/components/source-slider)** - Range slider component
37
+ - **[src-badge](https://preview.3dsource.com/front-libraries/master/#/components/SourceBadgeComponent)** - Display badges and tags
38
+ - **[src-banner](https://preview.3dsource.com/front-libraries/master/#/components/SourceBannerComponent)** - Show notification banners
39
+ - **[src-button](https://preview.3dsource.com/front-libraries/master/#/components/SourceButtonComponent)** - Customizable button component
40
+ - **[src-copyright](https://preview.3dsource.com/front-libraries/master/#/components/SourceCopyrightComponent)** - Display copyright information
41
+ - **[src-divider](https://preview.3dsource.com/front-libraries/master/#/components/SourceDividerComponent)** - Horizontal divider for lists
42
+ - **[src-hint](https://preview.3dsource.com/front-libraries/master/#/components/SourceHintComponent)** - Show hints or error messages
43
+ - **[src-icon-button](https://preview.3dsource.com/front-libraries/master/#/components/SourceIconButtonComponent)** - Display icon button
44
+ - **[src-loading](https://preview.3dsource.com/front-libraries/master/#/components/SourceLoadingComponent)** - Loading indicator
45
+ - **[src-logo-loading](https://preview.3dsource.com/front-libraries/master/#/components/SourceLogoLoadingComponent)** - Loading indicator with logo
46
+ - **[src-modal](https://preview.3dsource.com/front-libraries/master/#/components/SourceModalElement)** - Modal element for simple modals
47
+ - **[src-slider](https://preview.3dsource.com/front-libraries/master/#/components/SourceSliderComponent)** - Simple slider component
48
+ - Basic styles for lists, form elements, overlays
47
49
 
48
50
  ## Component Examples
49
51
 
50
52
  ### Button Component
51
53
 
52
54
  ```html
53
- <source-button variant="primary" size="medium"> Click Me </source-button>
55
+ <src-button colorScheme="primary" size="medium"> Click Me </src-button>
54
56
  ```
55
57
 
56
58
  ### Badge Component
57
59
 
58
60
  ```html
59
- <source-badge value="New" color="accent"></source-badge>
61
+ <src-badge type="informational">Info</src-badge>
60
62
  ```
61
63
 
62
64
  ### Loading Component
63
65
 
64
66
  ```html
65
- <source-loading size="large" color="primary"></source-loading>
67
+ <src-loading [size]="64" backgroundStrokeColor="#e0f8ee" progressStrokeColor="#007a5c"></src-loading>
66
68
  ```
67
69
 
68
70
  ## Customization
69
71
 
70
- Components can be customized using CSS variables:
72
+ Components can be customized by overriding global CSS variables or by setting values for particular components variables. Whole table of CSS custom properties is available in the **[documentation site](https://preview.3dsource.com/front-libraries/master/#/components/design-tokens)**
71
73
 
72
74
  ```css
73
75
  :root {
74
- --source-primary-color: #3f51b5;
75
- --source-accent-color: #ff4081;
76
- --source-warn-color: #f44336;
76
+ --src-color-brand-500: #3f51b5;
77
+ --src-color-text-default: #fff;
77
78
  }
78
79
  ```
79
80
 
81
+ ```css
82
+ .src-button {
83
+ --srcButtonBgColor: #3f51b5;
84
+ --srcButtonBorderRadius: 6px;
85
+ --srcButtonFontColor: #fff;
86
+ --srcButtonPaddings: 8px 16px;
87
+ }
88
+ ```
89
+
90
+ You can see all available options and examples in **[documentation](https://preview.3dsource.com/front-libraries/master/#/components/getting-started)**
91
+
80
92
  ## Browser Support
81
93
 
82
94
  - Chrome (latest)