@veniceswap/uikit 0.65.13 → 0.65.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.
package/README.md
CHANGED
@@ -1,40 +1 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
[](https://www.npmjs.com/package/@pancakeswap-libs/uikit) [](https://www.npmjs.com/package/@pancakeswap-libs/uikit)
|
4
|
-
|
5
|
-
Pancake UIkit is a set of React components and hooks used to build pages on Pancake's apps. It also contains a theme file for dark and light mode.
|
6
|
-
|
7
|
-
## Install
|
8
|
-
|
9
|
-
`yarn add @pancakeswap-libs/uikit`
|
10
|
-
|
11
|
-
## Setup
|
12
|
-
|
13
|
-
### Theme
|
14
|
-
|
15
|
-
Before using Pancake UIkit, you need to provide the theme file to styled-component.
|
16
|
-
|
17
|
-
```
|
18
|
-
import { ThemeProvider } from 'styled-components'
|
19
|
-
import { light, dark } from '@pancakeswap-libs/uikit'
|
20
|
-
...
|
21
|
-
<ThemeProvider theme={isDark}>...</ThemeProvider>
|
22
|
-
```
|
23
|
-
|
24
|
-
### Reset
|
25
|
-
|
26
|
-
A reset CSS is available as a global styled component.
|
27
|
-
|
28
|
-
```
|
29
|
-
import { ResetCSS } from '@pancakeswap-libs/uikit'
|
30
|
-
...
|
31
|
-
<ResetCSS />
|
32
|
-
```
|
33
|
-
|
34
|
-
### Types
|
35
|
-
|
36
|
-
This project is built with Typescript and export all the relevant types.
|
37
|
-
|
38
|
-
## How to use the UIkit
|
39
|
-
|
40
|
-
If you want to use components from the UIkit, check the [Storybook documentation](https://pancakeswap.github.io/pancake-uikit/)
|
1
|
+
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
|
package/dist/index.cjs.js
CHANGED
@@ -4435,7 +4435,7 @@ var BottomNavItem = function (_a) {
|
|
4435
4435
|
var bottomNavItemContent = (React__default["default"].createElement(Flex, { flexDirection: "column", justifyContent: "center", alignItems: "center", height: "100%" },
|
4436
4436
|
iconName && (React__default["default"].createElement(AnimatedIconComponent, { iconName: iconName, height: "22px", width: "21px", color: isActive ? "secondary" : "textSubtle", isActive: isActive, activeBackgroundColor: "backgroundAlt" })),
|
4437
4437
|
React__default["default"].createElement(StyledBottomNavText, { color: isActive ? "text" : "textSubtle", fontWeight: isActive ? "600" : "400", fontSize: "10px" }, label)));
|
4438
|
-
return showItemsOnMobile ? (React__default["default"].createElement(StyledBottomNavItem, __assign({ type: "button" }, props), bottomNavItemContent)) : (React__default["default"].createElement(StyledBottomNavItem, __assign({ as: reactRouterDom.Link, to: href }, props), bottomNavItemContent));
|
4438
|
+
return showItemsOnMobile ? (React__default["default"].createElement(StyledBottomNavItem, __assign({ type: "button" }, props), bottomNavItemContent)) : (href ? (React__default["default"].createElement(StyledBottomNavItem, __assign({ as: reactRouterDom.Link, to: href }, props), bottomNavItemContent)) : (React__default["default"].createElement(StyledBottomNavItem, __assign({ as: 'div' }, props), bottomNavItemContent)));
|
4439
4439
|
};
|
4440
4440
|
|
4441
4441
|
var StyledBottomNav = styled__default["default"](Flex)(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n position: fixed;\n bottom: 0px;\n width: 100%;\n padding: 5px 8px;\n background: ", ";\n border-top: 1px solid ", ";\n padding-bottom: env(safe-area-inset-bottom);\n html[data-useragent*=\"TokenPocket_iOS\"] & {\n padding-bottom: 45px;\n }\n"], ["\n position: fixed;\n bottom: 0px;\n width: 100%;\n padding: 5px 8px;\n background: ", ";\n border-top: 1px solid ", ";\n padding-bottom: env(safe-area-inset-bottom);\n html[data-useragent*=\"TokenPocket_iOS\"] & {\n padding-bottom: 45px;\n }\n"])), function (_a) {
|
package/dist/index.esm.js
CHANGED
@@ -4403,7 +4403,7 @@ var BottomNavItem = function (_a) {
|
|
4403
4403
|
var bottomNavItemContent = (React__default.createElement(Flex, { flexDirection: "column", justifyContent: "center", alignItems: "center", height: "100%" },
|
4404
4404
|
iconName && (React__default.createElement(AnimatedIconComponent, { iconName: iconName, height: "22px", width: "21px", color: isActive ? "secondary" : "textSubtle", isActive: isActive, activeBackgroundColor: "backgroundAlt" })),
|
4405
4405
|
React__default.createElement(StyledBottomNavText, { color: isActive ? "text" : "textSubtle", fontWeight: isActive ? "600" : "400", fontSize: "10px" }, label)));
|
4406
|
-
return showItemsOnMobile ? (React__default.createElement(StyledBottomNavItem, __assign({ type: "button" }, props), bottomNavItemContent)) : (React__default.createElement(StyledBottomNavItem, __assign({ as: Link$1, to: href }, props), bottomNavItemContent));
|
4406
|
+
return showItemsOnMobile ? (React__default.createElement(StyledBottomNavItem, __assign({ type: "button" }, props), bottomNavItemContent)) : (href ? (React__default.createElement(StyledBottomNavItem, __assign({ as: Link$1, to: href }, props), bottomNavItemContent)) : (React__default.createElement(StyledBottomNavItem, __assign({ as: 'div' }, props), bottomNavItemContent)));
|
4407
4407
|
};
|
4408
4408
|
|
4409
4409
|
var StyledBottomNav = styled(Flex)(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n position: fixed;\n bottom: 0px;\n width: 100%;\n padding: 5px 8px;\n background: ", ";\n border-top: 1px solid ", ";\n padding-bottom: env(safe-area-inset-bottom);\n html[data-useragent*=\"TokenPocket_iOS\"] & {\n padding-bottom: 45px;\n }\n"], ["\n position: fixed;\n bottom: 0px;\n width: 100%;\n padding: 5px 8px;\n background: ", ";\n border-top: 1px solid ", ";\n padding-bottom: env(safe-area-inset-bottom);\n html[data-useragent*=\"TokenPocket_iOS\"] & {\n padding-bottom: 45px;\n }\n"])), function (_a) {
|