I am using Semantic UI lib for react
https://react.semantic-ui.com/introduction.
and create-react-app boilerplate
https://github.com/facebook/create-react-app.
My app requires RTL support especially for the Step component.
while researching for a solution i found that semantic ui have a config file semantic.json where i can define RTL but i can't warp the whole thing together.
does anyone have any recommendation or best practice for that?
you can use this
.ui * {
direction: rtl;
text-align: right;
}
The RTL support is a function of the semantic-ui CSS styles and should not have anything to do with semantic-ui-react. If you compile your own styles using the build tools in semantic-ui then use those styles in your project, they will work.
If you don't want to compile your own RTL styles, I believe this CDN is hosting a compiled RTL version of the CSS:
http://rtlcss.com/cdn/css-frameworks/semantic-ui/
If you want to use semantic-ui in reactjs in RTL language such (Persian/Arabic), you can follow below steps.
With cdn
First install semantic-ui for reactjs:
npm i semantic-ui-react
Then install semantic-ui css:
npm i semantic-ui-css
Now include semantic-ui rtl in index.html (just css)
Semantic UI RTL
<link
rel="stylesheet"
href="https://cdn.rtlcss.com/semantic-ui/2.4.1/semantic.rtl.min.css"
integrity="sha384-yXUIpeQfH3cuk6u6Mwu8uyJXB2R3UOLvcha1343UCMA2TA7lQ14BFmrudI6LAP8A"
crossorigin="anonymous">
Without cdn (Recommended)
If you don't want use cdn, just download css file go to this path:
node_modules/semanti-ui-css/
Put this css here, where semantic.css is, then include this:
import 'semantic-ui-css/semantic.rtl.min.css';
This method tested and already work fine, if anyone had issue, feel free to comment and I'll respond.
Related
I can't seem to find a way on how to use bootstrap locally in react without npm or yarn bootstrap installation or even without CDN, every tutorial I find on how to use bootstrap they don't explain using bootstrap locally.
Please I need steps on how I can achieve this thanks
So I don't know this for sure, so please correct me if I am wrong. I am just trying to help you to the best of my knowledge.
There are multiple ways.
The first way is to import the CSS in the app.js (or the start of the React app). For the CSS you should have a file called bootstrap.css that contains all the CSS for Bootstrap. import './bootstrap.css'.
The second way is to import it in the html file. If you add the the <link rel="stylesheet" type="text/css" href="bootstrap.css">.
I don't know if this is the way it should be done!
I am trying to customize the theme when using Semantic-UI-React, there are detailed instructions on how to customize themes in Semantic-UI, like we can override variables to change their styles.
But I didn't find any way to customize themes with Semantic-UI-React, since there is no semantic/src/themes and semantic/src/site folders for us to make changes, what comes with Semantic-UI-React is just the default CSS file (the file we import in our index.js file "semantic-ui-css/semantic.min.css").
Is there any way we can customize the theme in Semantic-UI-React? Thanks in advance!
This link may also help in addition to the theming page on the docs site.
https://jsramblings.com/how-to-use-semantic-ui-with-a-custom-theme-in-your-cra-app/
It has a setup script after you run
npm install --save-dev semantic-ui
Yes there is a way to customize themes and create your own
https://react.semantic-ui.com/theming/
Basically just follow instructions from the docs link, install semantic-ui-less, which are not compiled Less files for the Semantic-ui CSS, craco-less which is just a path plugin for CRA configured Webpack so your Less compiler can find files properly without ejecting your CRA, move the files to created folder, modify theme.config, start app and you are ready to customize your own theme, although I didn't find some kind of API for variables on Semantic-ui docs, so I had to browse semantic-ui-less package files for them.
One problem I encountered was that I tried changing the theme for all components in theme.config and it was throwing errors about missing fonts and variables. Don't do this, it's not gonna work, check the Semantic-ui docs about theming, there is a note about it
Themes are per component, so although, for example, material themes are available for menu, button, and site, changing all values to "material" will produce an error for components which are not included in that theme.
https://semantic-ui.com/usage/theming.html#browsing-for-themes
I am trying to use material UI with react.
On this website: https://jamesmfriedman.github.io/rmwc/installation
It says
material-components-web should be installed automatically as a peer dependency. Include node_modules/material-components-web/dist/material-components-web.min.css in your project via your method of choice (using a link tag, a css-loader, etc.).
But I am not sure what this actually means. How and where do I have to import that file to use this library?
At first, you should add the library to your project by running:
npm install --save rmwc or yarn add rmwc
Secondly, you should understand the following:
Generally speaking, Material Components Web library is actually a bunch of prebuilt design styles that you can link to your project to make it look Material.
The library that you are using, React Material Web Components [RMWC], is a React wrapper for the previous library. It means that it gives you a set of flexible React Components like <Button />, <TextField />, etc that are built in React and act in a virtual DOM.
It doesn't give any specific styling to the elements. Moreover, it is designed not to provide you any extra styling. To make your imported React components look Material, you should add the styling from the parent library [Material Components Web].
To add styling from that library, use the following:
Add it to your project:
npm install material-components-web or yarn add material-components-web
And then use the following line (use it once in your project):
import 'node_modules/material-components-web/dist/material-components-web.min.css';
RMWC does the ReactJS wrapping. The styling is still all done by MDC.
You can add the minified mdc css file to your project, but that will not give you much customization. I'd advise using sass for your project and importing that mdc modules there. This way you can change variables e.g. from primary color as explained here: https://github.com/material-components/material-components-web/tree/master/packages/mdc-theme
$mdc-theme-primary: #fcb8ab;
$mdc-theme-secondary: #feeae6;
$mdc-theme-on-primary: #442b2d;
$mdc-theme-on-secondary: #442b2d;
#import "#material/button/mdc-button";
A more in depth documentation on how to use styling specifically with RMWC can be found in the docu: https://jamesmfriedman.github.io/rmwc/styling
But overall you can either create your own classes you then apply to your elements such as buttons. E.g.
.my-button-style {
border-radius: 10px;
}
Or you override the mdc classes directly.
.mdc-button {
border-radius: 10px;
}
The mdc classes can be found in each of the package sites on GitHub. (e.g. for button: https://github.com/material-components/material-components-web/tree/master/packages/mdc-button)
Creating an app with the angular-cli, if I link the Material theme from my index.html (following instructions from https://getmdl.io/started/):
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.deep_purple-amber.min.css">
The complete code is in a github repo on linked-theme-bad branch where the components are not correctly styled with the theme:
However, if I follow the exact instructions in the angular-cli doc to include Angular Material and import the style in styles.scss:
#import '~#angular/material/prebuilt-themes/deeppurple-amber.css';
The complete code on basic-theme-works branch) where the components appear correctly:
My understanding is that the import merges into a single stylesheet and the link in the HTML page will make a separate request for the style theme. The question is why doesn't the linked style sheet approach work.
By the way, I'm running the app with ng serve but this is an isolated example from another app which also seemed to fail in the same way with files that were built with ng build.
You're importing the CSS file from the wrong source (material-design-lite). (and by the way, you're also looking at the wrong documentation. See the link below for the correct docs)
From material.angular.io:
Alternatively, you can just reference the file directly. This would look something like:
<link href="node_modules/#angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">
More Information on using a prebuilt theme
I am using angular material design for giving responsive design to my AngularJS app. I am using material design icons which I install using:
bower install material-design-icons
Then I declare the css as CDN link which is:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
I am using the icons by:
<i class="material-icons md-36 md-dark">person</i>
My problem is that there is no way to include css from bower_components. I want to replace CDN source to css with local source from bower_components. But I don't see any css file downloaded in my bower_components.
This is how my bower_components/material-design-icons directory look like:
I followed instructions given in Material icons guide, but couldn't figure out about including CSS from bower_components.
In your materil-design-icons folder you have the iconfont folder, which contains your required CSS files.
There are 2 types of material design icons .... font icons and svg icons
The markup you have shown is for font icons
The bower package for the icon fonts is material-design-iconfont
Try bower install material-design-iconfont ---save
If I understood your question, you're trying to use material design on your web app. the package material-design-icons is just the icons info.
I believe that, to achieve what you're looking for, you should get the bower google package material design lite info, they also provide a set of templates
There's also a bootstrap material design.