@xsolla/xui-divider 0.150.0 → 0.152.0
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 +77 -23
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -1,63 +1,117 @@
|
|
|
1
1
|
# Divider
|
|
2
2
|
|
|
3
|
-
A cross-platform React divider
|
|
3
|
+
A cross-platform React divider for separating content. Renders a horizontal line with an optional inline title and a dashed-stroke variant.
|
|
4
4
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
7
7
|
```bash
|
|
8
8
|
npm install @xsolla/xui-divider
|
|
9
|
-
# or
|
|
10
|
-
yarn add @xsolla/xui-divider
|
|
11
9
|
```
|
|
12
10
|
|
|
13
|
-
##
|
|
11
|
+
## Imports
|
|
14
12
|
|
|
15
|
-
|
|
13
|
+
```tsx
|
|
14
|
+
import { Divider } from '@xsolla/xui-divider';
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## Quick start
|
|
16
18
|
|
|
17
19
|
```tsx
|
|
18
20
|
import * as React from 'react';
|
|
19
21
|
import { Divider } from '@xsolla/xui-divider';
|
|
20
22
|
|
|
21
|
-
export default function
|
|
23
|
+
export default function QuickStart() {
|
|
22
24
|
return (
|
|
23
25
|
<div>
|
|
24
|
-
<p>
|
|
26
|
+
<p>Section A</p>
|
|
25
27
|
<Divider />
|
|
26
|
-
<p>
|
|
28
|
+
<p>Section B</p>
|
|
27
29
|
</div>
|
|
28
30
|
);
|
|
29
31
|
}
|
|
30
32
|
```
|
|
31
33
|
|
|
32
|
-
|
|
34
|
+
## API Reference
|
|
35
|
+
|
|
36
|
+
### `<Divider>`
|
|
37
|
+
|
|
38
|
+
| Prop | Type | Default | Description |
|
|
39
|
+
| --- | --- | --- | --- |
|
|
40
|
+
| `size` | `"lg" \| "md" \| "sm"` | `"md"` | Controls overall height, line weight, and title font size. |
|
|
41
|
+
| `title` | `string` | — | Optional inline label. Rendered uppercase. |
|
|
42
|
+
| `titlePosition` | `"left" \| "center" \| "right"` | `"left"` | Where the title sits relative to the line(s). |
|
|
43
|
+
| `dashStroke` | `boolean` | `false` | Render a dashed line instead of solid. |
|
|
44
|
+
| `decorative` | `boolean` | `false` | When `true`, the divider is hidden from assistive technology (`aria-hidden`) and omits `role="separator"`. |
|
|
45
|
+
|
|
46
|
+
Inherits `ThemeOverrideProps` (`themeMode`, `themeProductContext`).
|
|
47
|
+
|
|
48
|
+
## Examples
|
|
49
|
+
|
|
50
|
+
### Sizes
|
|
33
51
|
|
|
34
52
|
```tsx
|
|
35
53
|
import * as React from 'react';
|
|
36
54
|
import { Divider } from '@xsolla/xui-divider';
|
|
37
55
|
|
|
38
|
-
export default function
|
|
56
|
+
export default function DividerSizes() {
|
|
39
57
|
return (
|
|
40
|
-
<div style={{ display: 'flex',
|
|
41
|
-
<
|
|
42
|
-
<Divider
|
|
43
|
-
<
|
|
58
|
+
<div style={{ display: 'flex', flexDirection: 'column', gap: 24, width: 320 }}>
|
|
59
|
+
<Divider size="sm" />
|
|
60
|
+
<Divider size="md" />
|
|
61
|
+
<Divider size="lg" />
|
|
44
62
|
</div>
|
|
45
63
|
);
|
|
46
64
|
}
|
|
47
65
|
```
|
|
48
66
|
|
|
49
|
-
|
|
67
|
+
### With title
|
|
50
68
|
|
|
51
|
-
|
|
69
|
+
```tsx
|
|
70
|
+
import * as React from 'react';
|
|
71
|
+
import { Divider } from '@xsolla/xui-divider';
|
|
52
72
|
|
|
53
|
-
|
|
73
|
+
export default function DividerWithTitle() {
|
|
74
|
+
return (
|
|
75
|
+
<div style={{ display: 'flex', flexDirection: 'column', gap: 24, width: 320 }}>
|
|
76
|
+
<Divider title="Section" titlePosition="left" />
|
|
77
|
+
<Divider title="Or" titlePosition="center" />
|
|
78
|
+
<Divider title="More" titlePosition="right" />
|
|
79
|
+
</div>
|
|
80
|
+
);
|
|
81
|
+
}
|
|
82
|
+
```
|
|
54
83
|
|
|
55
|
-
|
|
56
|
-
| :--- | :--- | :------ | :---------- |
|
|
57
|
-
| orientation | `"horizontal" \| "vertical"` | `"horizontal"` | Direction of the divider. |
|
|
84
|
+
### Dashed
|
|
58
85
|
|
|
59
|
-
|
|
86
|
+
```tsx
|
|
87
|
+
import * as React from 'react';
|
|
88
|
+
import { Divider } from '@xsolla/xui-divider';
|
|
89
|
+
|
|
90
|
+
export default function DashedDivider() {
|
|
91
|
+
return (
|
|
92
|
+
<div style={{ width: 320 }}>
|
|
93
|
+
<Divider dashStroke />
|
|
94
|
+
</div>
|
|
95
|
+
);
|
|
96
|
+
}
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
### Decorative
|
|
60
100
|
|
|
61
|
-
```
|
|
62
|
-
|
|
101
|
+
```tsx
|
|
102
|
+
import * as React from 'react';
|
|
103
|
+
import { Divider } from '@xsolla/xui-divider';
|
|
104
|
+
|
|
105
|
+
export default function DecorativeDivider() {
|
|
106
|
+
return (
|
|
107
|
+
<div style={{ width: 320 }}>
|
|
108
|
+
<Divider decorative />
|
|
109
|
+
</div>
|
|
110
|
+
);
|
|
111
|
+
}
|
|
63
112
|
```
|
|
113
|
+
|
|
114
|
+
## Accessibility
|
|
115
|
+
|
|
116
|
+
- The non-decorative divider has `role="separator"` so assistive tech announces a section break.
|
|
117
|
+
- Set `decorative` for purely visual lines; the divider then sets `aria-hidden="true"` and skips the separator role.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xsolla/xui-divider",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.152.0",
|
|
4
4
|
"main": "./web/index.js",
|
|
5
5
|
"module": "./web/index.mjs",
|
|
6
6
|
"types": "./web/index.d.ts",
|
|
@@ -10,8 +10,8 @@
|
|
|
10
10
|
"build:native": "PLATFORM=native tsup"
|
|
11
11
|
},
|
|
12
12
|
"dependencies": {
|
|
13
|
-
"@xsolla/xui-core": "0.
|
|
14
|
-
"@xsolla/xui-primitives-core": "0.
|
|
13
|
+
"@xsolla/xui-core": "0.152.0",
|
|
14
|
+
"@xsolla/xui-primitives-core": "0.152.0"
|
|
15
15
|
},
|
|
16
16
|
"peerDependencies": {
|
|
17
17
|
"react": ">=16.8.0",
|