The latest articles on DEV Community by jeekwar (@jeekwar). https://dev.to/jeekwar https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F993876%2Ff1840974-ebfe-4de7-9c92-4d89059f85a5.jpg https://dev.to/jeekwar en jeekwar Thu, 29 Jun 2023 07:47:40 +0000 https://dev.to/jeekwar/mantine-simple-responsive-component-attribute-2pgg https://dev.to/jeekwar/mantine-simple-responsive-component-attribute-2pgg <p>Hello there, i want to share how to write an attribute with simple responsive using mantine. </p> <p><strong>simple responsive attribute component</strong> support breakpoint property (<strong>xs, sm, md, lg, xl</strong>), using <strong>simple responsive attribute component</strong> is by creating an object.</p> <p>here's the example:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>&lt;Text fz={{ base: 32, lg: 48 }} weight={600}&gt; Lorem ipsum dolor &lt;/Text&gt; </code></pre> </div> <p>Following the above there is an attribute called fz that represent font size, each of the breakpoint property active when the width of the viewport is met, property <strong>base</strong> is use when another property breakpoints (<strong>xs, sm, md, lg, xl</strong>) are not met.</p> <p>Now, you can easily set responsive component in mantine.</p> frontend ui mantine react