Eduzz UI: 蚂蚁主题
(原始内容存档于2018-10-21) (英语). Tema de antd ajustado aos padrêes de UI da Eduz.
英斯特拉桑
面条:
pnpm add @eduzz/ui-antd-theme
利用
import { ThemeProvider } from '@eduzz/ui-antd-theme';
function App() {
return (
<ThemeProvider>
<section>
<Typography.Title level={1}>H1 - Roboto</Typography.Title>
<Typography.Title level={2}>H2 - Roboto</Typography.Title>
<Typography.Title level={3}>H3 - Roboto</Typography.Title>
<Typography.Title level={4}>H4 - Roboto</Typography.Title>
<Typography.Title level={5}>H5 - Roboto</Typography.Title>
<Typography.Paragraph>Paragraph - Roboto</Typography.Paragraph>
</section>
</ThemeProvider>
);
}
export default App;
帕拉米特罗斯
Aceita 托达作为道具 配置 做Antd e mais: (英语)
| 赞助 | 提波 | 乌布里加多里奥省 | 帕德罗 | 国家 |
|---|---|---|---|---|
| 模式 | light|dark | false | 'light' | Modo do tema (暗地/浅地), 三角自发体 模式开关@ eduzz/ ui- layout |
| 持续模式 | boolean | false | false | 泉户 true! ! ! 没有饼干 eduzz-theme (memmo饼干做 @eduzz/ui-layout) (中文(简体) ). 坦贝姆·阿西塔 ?eduzzMode=dark|light 纳URL. |
| 启用动画 | boolean | false | false | Habilita 运动标志showInsetEffect 帕多罗 通过道具覆盖 wave。 。 。 . |
使用主题
Hook para ler e cherar o modo do tema (美国英语:light 编号 : dark) (中文(简体) ). {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}我们一起吃吧 ThemeProvider。 。 。 .
使用“Theme do@eduzz/ui-layout”.
import { useTheme } from '@eduzz/ui-antd-theme';
function ThemeToggle() {
const { theme, toggle, setTheme } = useTheme();
return (
<>
<button onClick={toggle}>Tema atual: {theme}</button>
<button onClick={() => setTheme('dark')}>Dark</button>
</>
);
}
图标
(原始内容存档于2013-10-12) (英语). Proxy sobre os icones do 清晰的反应,一个接合点Icon.Home) (中文(简体) ). Já inclui 包装相通 anticon 把 And 当作 Aceita 托达 LucideProps (单位:千美元)size, (中文(简体) ), color, (中文(简体) ), strokeWidth(见a/c.5/49/70,附件). className, (中文(简体) ), style, (中文(简体) ), ref 电子 aria-label 包装纸span.anticon;道具为"Lucide ficam"没有"SVG".
import { Icon } from '@eduzz/ui-antd-theme';
import { Button } from 'antd';
function Example() {
return (
<Button icon={<Icon.Rocket />}>
Launch
</Button>
);
}
机器人系统
科姆语 enableAnimation,则 ThemeProvider 澳大利亚 showInsetEffect 全应用无 ConfigProvider. para trocar o efeito, passe (英语) wave 使用 showShakeEffect数字 :
import { ThemeProvider, showShakeEffect } from '@eduzz/ui-antd-theme';
import { Button } from 'antd';
function App() {
return (
<ThemeProvider enableAnimation wave={{ showEffect: showShakeEffect }}>
<Button type="primary">Click me</Button>
</ThemeProvider>
);
}