@spectrum-web-components/divider 0.4.1 → 0.4.2-express.41
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 +45 -15
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -26,9 +26,11 @@ import { Divider } from '@spectrum-web-components/divider';
|
|
|
26
26
|
|
|
27
27
|
## Horizontal
|
|
28
28
|
|
|
29
|
-
|
|
29
|
+
<sp-tabs selected="m" auto label="Horizontal Size Attribute Options">
|
|
30
|
+
<sp-tab value="s">Small</sp-tab>
|
|
31
|
+
<sp-tab-panel value="s">
|
|
30
32
|
|
|
31
|
-
```html-live
|
|
33
|
+
```html-live demo
|
|
32
34
|
<h2 class="spectrum-Heading spectrum-Heading--sizeXS">Small</h2>
|
|
33
35
|
<sp-divider size="s"></sp-divider>
|
|
34
36
|
<p class="spectrum-Body">
|
|
@@ -36,9 +38,11 @@ import { Divider } from '@spectrum-web-components/divider';
|
|
|
36
38
|
</p>
|
|
37
39
|
```
|
|
38
40
|
|
|
39
|
-
|
|
41
|
+
</sp-tab-panel>
|
|
42
|
+
<sp-tab value="m">Medium</sp-tab>
|
|
43
|
+
<sp-tab-panel value="m">
|
|
40
44
|
|
|
41
|
-
```html-live
|
|
45
|
+
```html-live demo
|
|
42
46
|
<h2 class="spectrum-Heading spectrum-Heading--sizeS">Medium</h2>
|
|
43
47
|
<sp-divider size="m"></sp-divider>
|
|
44
48
|
<p class="spectrum-Body">
|
|
@@ -47,56 +51,82 @@ import { Divider } from '@spectrum-web-components/divider';
|
|
|
47
51
|
</p>
|
|
48
52
|
```
|
|
49
53
|
|
|
50
|
-
|
|
54
|
+
</sp-tab-panel>
|
|
55
|
+
<sp-tab value="l">Large</sp-tab>
|
|
56
|
+
<sp-tab-panel value="l">
|
|
51
57
|
|
|
52
|
-
```html-live
|
|
58
|
+
```html-live demo
|
|
53
59
|
<h2 class="spectrum-Heading spectrum-Heading--sizeM">Large</h2>
|
|
54
60
|
<sp-divider size="l"></sp-divider>
|
|
55
61
|
<p class="spectrum-Body">Page or Section Titles.</p>
|
|
56
62
|
```
|
|
57
63
|
|
|
64
|
+
</sp-tab-panel>
|
|
65
|
+
</sp-tabs>
|
|
66
|
+
|
|
58
67
|
## Vertical
|
|
59
68
|
|
|
60
69
|
When a vertical Divider is used inside of a flex container, use `align-self: stretch; height: auto;` on the Divider.
|
|
61
70
|
|
|
62
|
-
|
|
71
|
+
<sp-tabs selected="m" auto label="Vertical Size Attribute Options">
|
|
72
|
+
<sp-tab value="s">Small</sp-tab>
|
|
73
|
+
<sp-tab-panel value="s">
|
|
63
74
|
|
|
64
|
-
```html-live
|
|
75
|
+
```html-live demo
|
|
65
76
|
<div style="height: 32px; display: flex;">
|
|
66
77
|
<sp-action-button quiet label="Zoom in">
|
|
67
78
|
<sp-icon-magnify slot="icon"></sp-icon-magnify>
|
|
68
79
|
</sp-action-button>
|
|
69
|
-
<sp-divider
|
|
80
|
+
<sp-divider
|
|
81
|
+
size="s"
|
|
82
|
+
style="align-self: stretch; height: auto;"
|
|
83
|
+
vertical
|
|
84
|
+
></sp-divider>
|
|
70
85
|
<sp-action-button quiet label="Zoom in">
|
|
71
86
|
<sp-icon-magnify slot="icon"></sp-icon-magnify>
|
|
72
87
|
</sp-action-button>
|
|
73
88
|
</div>
|
|
74
89
|
```
|
|
75
90
|
|
|
76
|
-
|
|
91
|
+
</sp-tab-panel>
|
|
92
|
+
<sp-tab value="m">Medium</sp-tab>
|
|
93
|
+
<sp-tab-panel value="m">
|
|
77
94
|
|
|
78
|
-
```html-live
|
|
95
|
+
```html-live demo
|
|
79
96
|
<div style="height: 32px; display: flex;">
|
|
80
97
|
<sp-action-button quiet label="Zoom in">
|
|
81
98
|
<sp-icon-magnify slot="icon"></sp-icon-magnify>
|
|
82
99
|
</sp-action-button>
|
|
83
|
-
<sp-divider
|
|
100
|
+
<sp-divider
|
|
101
|
+
size="m"
|
|
102
|
+
style="align-self: stretch; height: auto;"
|
|
103
|
+
vertical
|
|
104
|
+
></sp-divider>
|
|
84
105
|
<sp-action-button quiet label="Zoom in">
|
|
85
106
|
<sp-icon-magnify slot="icon"></sp-icon-magnify>
|
|
86
107
|
</sp-action-button>
|
|
87
108
|
</div>
|
|
88
109
|
```
|
|
89
110
|
|
|
90
|
-
|
|
111
|
+
</sp-tab-panel>
|
|
112
|
+
<sp-tab value="l">Large</sp-tab>
|
|
113
|
+
<sp-tab-panel value="l">
|
|
91
114
|
|
|
92
|
-
```html-live
|
|
115
|
+
```html-live demo
|
|
93
116
|
<div style="height: 32px; display: flex;">
|
|
94
117
|
<sp-action-button quiet label="Zoom in">
|
|
95
118
|
<sp-icon-magnify slot="icon"></sp-icon-magnify>
|
|
96
119
|
</sp-action-button>
|
|
97
|
-
<sp-divider
|
|
120
|
+
<sp-divider
|
|
121
|
+
size="l"
|
|
122
|
+
style="align-self: stretch; height: auto;"
|
|
123
|
+
vertical
|
|
124
|
+
></sp-divider>
|
|
98
125
|
<sp-action-button quiet label="Zoom in">
|
|
99
126
|
<sp-icon-magnify slot="icon"></sp-icon-magnify>
|
|
100
127
|
</sp-action-button>
|
|
101
128
|
</div>
|
|
102
129
|
```
|
|
130
|
+
|
|
131
|
+
</sp-tab-panel>
|
|
132
|
+
</sp-tabs>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/divider",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.2-express.41+5d9e2a2ca",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -44,11 +44,11 @@
|
|
|
44
44
|
"lit-html"
|
|
45
45
|
],
|
|
46
46
|
"dependencies": {
|
|
47
|
-
"@spectrum-web-components/base": "^0.5.
|
|
47
|
+
"@spectrum-web-components/base": "^0.5.2-express.41+5d9e2a2ca",
|
|
48
48
|
"tslib": "^2.0.0"
|
|
49
49
|
},
|
|
50
50
|
"devDependencies": {
|
|
51
|
-
"@spectrum-css/divider": "
|
|
51
|
+
"@spectrum-css/divider": "latest"
|
|
52
52
|
},
|
|
53
53
|
"types": "./src/index.d.ts",
|
|
54
54
|
"customElements": "custom-elements.json",
|
|
@@ -56,5 +56,5 @@
|
|
|
56
56
|
"./sp-*.js",
|
|
57
57
|
"./stories/typography-decorator.js"
|
|
58
58
|
],
|
|
59
|
-
"gitHead": "
|
|
59
|
+
"gitHead": "5d9e2a2ca93deff51e4b2c7b8354f1127009a4e3"
|
|
60
60
|
}
|