หน้าแรก>แหล่งข้อมูลการสร้างเว็บไซต์>ดาวน์โหลดแบบอักษร
ดาวน์โหลด

จังหวะแนวตั้ง 12px ที่มีเส้นเขตแดนจัดเรียงอย่างถูกต้อง

ส่วนประกอบสไตล์จังหวะ

ประเภทที่จัดเรียงอย่างสวยงามพร้อมส่วนประกอบสไตล์

การติดตั้ง 

 npm i @ceteio/styled-components-rhythm

หรือด้วยเส้นด้าย: 

 yarn add @ceteio/styled-components-rhythm

การใช้งาน 

 import { ThemeProvider , injectGLobal } , styled from 'styled-components' ;
import styledComponentsRhythm from '@ceteio/styled-components-rhythm' ;

const rhythm = styledComponentsRhythm ( {
  baseFontSize : 1 , // 1rem. Browser default makes this 16px
  baseLineHeight : 1.2 , // unitless line-height, see: https://css-tricks.com/almanac/properties/l/line-height/#comment-1587658
  rhythmHeight : 0.75 , // rem units. With browser default, this is 16px * 0.75rem == 12px
  capHeights : {
    // Calculated with https://codepen.io/sebdesign/pen/EKmbGL?editors=0011
    Lato : 0.72 ,
  } ,
  debug : true ,
} ) ;

injectGLobal `
  /* Reset global margins and padding */
  h1, p {
    margin: 0;
    padding: 0;
  }

  /* Using Lato font https://fonts.google.com/specimen/Lato */
  @import url('https://fonts.googleapis.com/css?family=Lato')

  ${ rhythm . global ( ) }
` ;

const H1 = styled . h1 `
  ${ props => props . theme . setFontWithRhythm ( 'Lato' , 3 ) }
  margin-top: ${ props => props . theme . rhythmSizing ( 3 ) } rem;
` ;

const Paragraph = styled . p `
  ${ props => props . theme . setFontWithRhythm ( 'Lato' , 1 ) }
  margin-top: ${ props => props . theme . rhythmSizing ( 2 ) } rem;
` ;

export default ( ) => (
  < ThemeProvider theme = { rhythm . theme } >
    < H1 > Hello world </ H1 >
    < Paragraph > How are you today? </ Paragraph >
    < Paragraph > Feeling quite < em > aligned </ em > ! </ Paragraph >
  </ ThemeProvider >
) ;

API

การสร้างจังหวะ

การส่งออกหลักคือฟังก์ชั่นที่ส่งคืนวัตถุจังหวะที่เหมาะสมสำหรับการเพิ่มส่วนประกอบที่มีสไตล์ <ThemeProvider> :: 

 import styledComponentsRhythm from '@ceteio/styled-components-rhythm' ;

const rhythm = styledComponentsRhythm ( options ) ;
// { theme: ..., global: ... }

options ( Object )

  • baseFontSize ( Number ): ขนาดตัวอักษร rem ขององค์ประกอบรูทของคุณ (เช่น; <body> )
  • rhythmHeight ( Number ): ขนาดกริดแนวตั้ง rem ซึ่งข้อความจะมีการจัดตำแหน่งพื้นฐาน ทำงานได้ดีที่สุดเมื่อแบ่งออกเป็น ( baseFontSize * defaultLineHeight )
  • capHeights ( Object ): แผนที่ชื่อตัวอักษร font-family -> ความสูงตามสัดส่วนของตัวอักษรตัวใหญ่ ความสูงสามารถคำนวณได้ด้วยเครื่องมือนี้ ตัวอย่างเช่น: 
     {
  Lato : 0.72 ,
}
  • defaultLineHeight ( Number ): ค่าเริ่มต้นสำหรับ setFontWithRhythm() ด้านล่าง จะต้องเป็นค่าที่ไม่มีหน่วยซึ่งจะสัมพันธ์กับขนาดตัวอักษรขององค์ประกอบ
  • debug ( Boolean ): จะฉีดเส้นแนวนอนสีแดงเข้าสู่ร่างกายเพื่อการแก้ไขข้อบกพร่องทางสายตา
  • defaultOutputType ( String ): ตั้งค่าประเภทเอาต์พุตของ setFontWithRhythm() & global() 'string' : ส่งคืนสตริง CSS 'object' : ส่งคืนวัตถุสไตล์ CSS ค่าเริ่มต้น: 'string'

การตั้งค่าธีม

มีสองชิ้นในปริศนาซึ่งทั้งสองอย่างจะต้องใช้เพื่อให้มีจังหวะแนวตั้งที่มีประสิทธิภาพ rhythm.theme และ rhythm.global : 

 import styledComponentsRhythm from '@ceteio/styled-components-rhythm' ;
import { injectGlobal , ThemeProvider } from 'styled-components' ;

const rhythm = styledComponentsRhythm ( options ) ;

injectGlobal ` ${ rhythm . global ( ) } ` ;
return < ThemeProvider theme = { rhythm . theme } > ... </ ThemeProvider > ;

theme ( Object )

ส่งวัตถุนี้ไปยังส่วนประกอบที่มีสไตล์ ThemeProvider เป็นธีม: 

 const rhythm = styledComponentsRhythm ( options ) ;

return < ThemeProvider theme = { rhythm . theme } > ... </ ThemeProvider > ;

global([outputType]) => String

สตริงที่มี CSS ทั่วโลกที่ต้องใช้ ทำได้ดีที่สุดโดยใช้ injectGlobal ของ Component ของ Component: 

 const rhythm = styledComponentsRhythm ( options ) ;

injectGlobal ` ${ rhythm . global ( ) } ` ;

หรือองค์ประกอบ <Global> ของอารมณ์: 

 < Global styles = { rhythm . global ( 'object' ) } />

พารามิเตอร์

  • outputType ( String ): 'string' : ส่งคืนสตริง CSS 'object' : ส่งคืนวัตถุสไตล์ CSS ค่าเริ่มต้น: ค่าของ defaultOutputType

ใช้ค่าธีม

ตอนนี้คุณสามารถเข้าถึงสิ่งต่อไปนี้ผ่านชุด theme ภายในองค์ประกอบสไตล์:

rhythmHeight

ค่าที่ผ่านเมื่อสร้างวัตถุธีม

setFontWithRhythm(fontName, fontSizeRem[, desiredLineHeight[, outputType]]) => String

ฟังก์ชั่นหลักที่จะสร้าง CSS ที่จำเป็นในการจัดเรียงตัวอักษรให้เป็นพื้นฐานของจังหวะอย่างถูกต้อง

ฟังก์ชั่นนี้ทำให้ 2 สมมติฐาน:

  1. องค์ประกอบก่อนหน้าทั้งหมดในหน้านั้นสอดคล้องกับจังหวะแนวตั้งของคุณอย่างถูกต้อง
  2. คุณจะไม่ตั้ง padding-top หรือ margin-bottom ด้วยตนเองในองค์ประกอบนี้

พารามิเตอร์

  • fontName ( String ): ควรตรงกับชื่อตัวอักษรตามที่คุณจะประกาศใน font-family คุณสมบัติ CSS
  • fontSizeRem ( Number ): baseFontSize หลายตัว
  • desiredLineHeight ( Number ): จะถูกปัดเศษเป็นเส้นจังหวะที่ใกล้ที่สุดดังนั้นคุณไม่ต้องกังวล
  • outputType ( String ): 'string' : ส่งคืนสตริง CSS 'object' : ส่งคืนวัตถุสไตล์ CSS ค่าเริ่มต้น: ค่าของ defaultOutputType

เอาต์พุตคือสตริง CSS เพื่อเพิ่มลงในส่วนประกอบ: 

 const H1 = styled . h1 `
  ${ props => props . theme . setFontWithRhythm ( 'Lato' , 3 ) }
` ;

หรือเป็นวัตถุที่ใช้ CSS Prop (ทั้งในองค์ประกอบและอารมณ์ทั้งสอง): 

 const H1 = props => (
  < h1 css = { theme => theme . setFontWithRhythm ( 'Lato' , 3 , 1 , 'object' ) } />
) ;

rhythmSizing(multiple) => Number

ผู้ช่วยง่าย ๆ ในการคำนวณ multiple * rhythmHeight

ใช้งานได้ดีสำหรับการตั้งค่าระยะขอบหรือช่องว่าง: 

 const H1 = styled . h1 `
  margin-top: ${ props => props . theme . rhythmSizing ( 3 ) } rem;
` ;

โครงการที่เกี่ยวข้อง

  • capsize โดย Seek: "การใช้เมตาดาต้าแบบอักษรตอนนี้ข้อความสามารถปรับขนาดได้ตามความสูงของตัวอักษรตัวใหญ่ในขณะที่ตัดแต่งพื้นที่เหนือตัวพิมพ์ใหญ่และต่ำกว่าพื้นฐาน"
  • basekick โดย Michael Taranto เป็นอีกการดำเนินการในสิ่งเดียวกันโดยมีเป้าหมายน้อยกว่า
  • https://www.w3.org/tr/css-rhythm-1/ เป็นข้อเสนอที่สนับสนุนจังหวะแนวตั้งโดยตรงใน CSS
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด