This is a BETA module and is exclusive to ReactJS.
npm i sme-theme
The sme-theme has over 30 components, but you can only import as many as you need into your page, as follows:
import { Text, Title, Button, etc } from "sme-theme"
.
The list of available components is below.
After importing a component, use it as follows:
<Component attribute={value}>{content}</Component>
Each component has its own characteristics, such as specific attributes and some has no child content.
-
Component example with content:
<Text className="my-text" tag="span">{content}</Text>
-
Component example without content:
<Image className="my-image" src="logo.svg"/>
The components were developed with minimal changes to the html tags and the tags proposed by ReactJS.
To import scss into your project, use in your scss:
@import "../node_modules/sme-theme/src/theme.scss";
You can import the default theme or create your own in your application. Just follow the steps:
- Check which variables will be modified in: node_modules/sme-theme/src/vatiables.scss
- In the default application scss reset the variables, example:
$ font-family: Montserrat! default;
- Immediately after that, import the main theme scss: node_modules/sme-theme/src/theme.scss
Attributes are listed in square brackets: []
- Bg [className, image, color, overlayerImage, overlayerColor]
- Breadcrumb [children, className, tag]
- Button [children, to, href, className, target, active, disabled, plugin, ga, loading, type, onClick, behaviour]
- Card [children, className]
- Counter [step, interval, max, activ, endValue, onComplete]
- Divider [children, className]
- Form [children, onSubmit, className]
- Icon [name, className]
- Image [src, className, alt]
- Input [id, children, type, mask, options, className, name, imageSrc, imageClass, buttonClass, buttonText, helpText, errorText, focus, after, plugin, disabled]
- Progress [className, progress]
- Slide [children, className]
- Slider [children, className]
- Spinner [children, className]
- Status [children, className, success, error]
- Tab [children, render, className]
- Tabs [children, className]
- Text [children, className, tag]
- Title [children, className, tag]
- Video [className, url]
- Cell [children, size, className]
- Collapse [children, className, show]
- Container [children, className]
- Grid [children, className]
- Page [children, name, className, loading, footer, title, header]
- Table [children, className]
- Template [children, condition]
- Wrap [children, className]
- Alert [children, className, title, type, iconName]
- Menubar [children, className, collapse, header]
- Modal [children, className]
- Navbar [children, className]
- Pagination [className, size, page, step]
- Titlebar [children, className]