-
Notifications
You must be signed in to change notification settings - Fork 92
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
32 changed files
with
1,226 additions
and
415 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,117 @@ | ||
| --- | ||
| title: CSS | ||
| icon: css3-alt | ||
| description: "Allows adding CSS to the document while securely parsing and escaping it. | ||
| NB: While you can add regular CSS with the `<style>` tag, it's recommended to use the `CSS` component to ensure that the CSS is properly escaped, most notably when using URLs or other potentially unsafe content." | ||
| --- | ||
|
|
||
| ## CSS | ||
|
|
||
| Support | ||
|
|
||
| <div style={{ | ||
| display: "grid", | ||
| gridTemplateColumns: "repeat(2, 1fr)", | ||
| gap: "0.5rem", | ||
| }}><div className="flex items-center p-3 border rounded-md border-gray-700" style={{borderColor: '#374151'}}><svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2" viewBox="0 0 512 512"><path fill="#22c55e" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"/></svg><span>Client-side</span></div><div className="flex items-center p-3 border rounded-md" style={{borderColor: '#374151'}}><svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2" viewBox="0 0 512 512"><path fill="#22c55e" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"/></svg><span>Server-side</span></div></div> | ||
|
|
||
| ### Examples | ||
|
|
||
| #### Preview | ||
|
|
||
| Use a simple CSS print property to set the page size. | ||
|
|
||
| <Frame type="glass"><img src="../images/previews/css-b26814a3/document.1.jpg" style={{ maxHeight: '400px', borderRadius: "0.25rem", overflow: "hidden" }} /></Frame> | ||
|
|
||
| <div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeGroup> | ||
| ```jsx template.tsx | ||
| import { CSS } from "@fileforge/react-print"; | ||
|
|
||
| <CSS>{`@page { size: a4 landscape; }`}</CSS>; | ||
|
|
||
| ``` | ||
| ```css base.css | ||
| @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap"); | ||
|
|
||
| html, | ||
| body { | ||
| font-size: 28px; | ||
| font-family: "Inter", sans-serif; | ||
| } | ||
|
|
||
| @page { | ||
| size: A4; | ||
| } | ||
|
|
||
| ``` | ||
| </CodeGroup></div> | ||
|
|
||
| #### Load a Google Font | ||
|
|
||
| Load a Google Font using the `@import` rule. | ||
|
|
||
| <Frame type="glass"><img src="../images/previews/css-393a92da/document.1.jpg" style={{ maxHeight: '400px', borderRadius: "0.25rem", overflow: "hidden" }} /></Frame> | ||
|
|
||
| <div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeGroup> | ||
| ```jsx template.tsx | ||
| import { CSS } from "@fileforge/react-print"; | ||
|
|
||
| <React.Fragment> | ||
| <CSS> | ||
| {`@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');`} | ||
| </CSS> | ||
| <p style={{ fontFamily: "Roboto, sans-serif" }}> | ||
| This text uses the Roboto Light font. | ||
| </p> | ||
| </React.Fragment>; | ||
|
|
||
| ``` | ||
| ```css base.css | ||
| @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap"); | ||
|
|
||
| html, | ||
| body { | ||
| font-size: 28px; | ||
| font-family: "Inter", sans-serif; | ||
| } | ||
|
|
||
| @page { | ||
| size: A4; | ||
| } | ||
|
|
||
| ``` | ||
| </CodeGroup></div> | ||
|
|
||
| #### Layout | ||
|
|
||
| You can use the `@page` at-rule in CSS to manage all aspects of printed pages. More on this [here](https://developer.mozilla.org/en-US/docs/Web/CSS/@page). | ||
|
|
||
| <Frame type="glass"><img src="../images/previews/css-83e5c15a/document.1.jpg" style={{ maxHeight: '400px', borderRadius: "0.25rem", overflow: "hidden" }} /></Frame> | ||
|
|
||
| <div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeGroup> | ||
| ```jsx template.tsx | ||
| import { CSS } from "@fileforge/react-print"; | ||
|
|
||
| <React.Fragment> | ||
| <CSS>{`@page {size: A4;margin-top:1cm;margin-right:1cm;margin-left:1cm;margin-bottom:1cm;`}</CSS> | ||
| <div>Hello world!</div> | ||
| </React.Fragment>; | ||
|
|
||
| ``` | ||
| ```css base.css | ||
| @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap"); | ||
|
|
||
| html, | ||
| body { | ||
| font-size: 28px; | ||
| font-family: "Inter", sans-serif; | ||
| } | ||
|
|
||
| @page { | ||
| size: A4; | ||
| } | ||
|
|
||
| ``` | ||
| </CodeGroup></div> | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.