즉시 사용할 수 있는 UI 라이브러리가 없는 웹 개발은 빠르고 효율적이지 않습니다. 당신은 HTML/CSS 닌자라고 주장할 수도 있고, 나도 그렇기 때문에 당신을 믿습니다. 그럼에도 불구하고 미리 정의된 스타일리시한 구성 요소를 사용하는 것은 여전히 멋진 일입니다. 이것이 바로 우리가 아름다운 UI 라이브러리를 찾는 이유입니다. 제 이름은 Mikhail Isaev이고 프레임워크의 작성자입니다. 오늘은 프레임워크와 이를 SwifWeb과 함께 사용하는 방법에 대해 말씀드리겠습니다. 의 시작하자! SwifWeb MaterializeCSS 그것은 무엇입니까? MaterializeCSS는 성공적인 디자인의 고전적인 원칙과 혁신 및 기술을 결합하기 위해 Google이 만든 을 기반으로 하는 현대적인 반응형 엔드 프레임워크입니다. 이 프레임워크는 사용하기 매우 쉽기 때문에 이 프레임워크에 대한 래퍼를 작성하는 것이 즐거웠습니다! Material Design 오픈 소스 프런트 설치하는 방법? SwifWeb을 처음 사용하는 경우 Webber CLI 도구를 사용하여 새 프로젝트를 생성해야 합니다. 프로젝트에서 Package.swift를 열고 섹션을 편집하여 다음과 같이 만드세요: dependencies dependencies: [ // the rest of the other dependencies incuding swifweb/web .package(url: "https://github.com/swifweb/materialize", from: "1.0.0"), ] 다음으로 편집하여 다음과 같이 만듭니다. executableTarget .executableTarget(name: "App", dependencies: [ .product(name: "Web", package: "web"), .product(name: "Materialize", package: "materialize") ]), 그런 다음 열고 다음과 같이 메소드에서 구성하십시오. App.swift didFinishLaunching Materialize를 Lifecycle.didFinishLaunching { Materialize.configure() } 구성하는 것을 잊어버리면 스타일이 누락될 수 있습니다 🙃 맞춤 테마: SCSS에서 사용자 정의 Materialize 스타일을 생성한 경우 다음과 같이 구성하십시오. Lifecycle.didFinishLaunching { app in Materialize.configure(avoidStyles: true) app.addStylesheet("/css/custom-materialize.min.css") } 에 사용자 정의 스타일을 추가하세요. /Sources/App/css/custom-materialize.min.css 열고 다음과 같이 에 리소스를 선언하세요: Package.swift executableTarget .executableTarget(name: "App", dependencies: [ .product(name: "Web", package: "web"), .product(name: "Materialize", package: "materialize") ], resources: [ .copy("css/custom-materialize.min.css"), .copy("css") ]), 이제 UI 구축을 시작할 준비가 되었습니다! 구성요소 모든 구성 요소를 Swift로 아름답게 포장했지만, 모두 설명하려면 기사가 너무 길어질 것입니다. 여기에서 그 중 몇 가지를 살펴보고 나머지 참조할 수 있습니다. 내용은 GitHub의 추가 정보를 버튼 메서드를 호출하면 어떤 요소든 머티리얼 버튼으로 만들 수 있습니다. .materialButton(...) 링크에는 를 사용할 수 있으며, 핸들러와 함께 또는 기타 요소를 사용할 수 있습니다. 요소 onClick Div Div("My Button") .materialButton(type: .raised) .onClick {} A("My Link") .href("https://google.com") .materialButton(type: .raised) 두 요소 모두 동일하게 보이지만 유일한 차이점은 가 링크이고 링크처럼 작동한다는 것입니다. A 메소드에는 몇 가지 옵션이 있습니다. .materialButton type raised, floating, floatingHalfWay, flat 수도 있습니다 size small, large 또는 사용자 정의일 수 있으며 기본적으로 . waves light, red, yellow, orange, purple, green, teal light 버튼이 비활성화되었음을 표시하는 플래그일 뿐입니다. 여기에 @State 값을 전달하여 즉시 변경하세요. disabled 또한 호출하여 머티리얼 아이콘을 추가할 수도 있습니다. .addMaterialIcon(...) .addMaterialIcon("announcement") // or optionally .addMaterialIcon("announcement".size(.tiny).side(.right)) 아래에서 머티리얼 아이콘에 대해 자세히 알아보세요. 플로팅 작업 버튼 여러 동작이 포함된 고정된 부동 동작 버튼입니다. 자세한 내용을 읽어보세요. 공식 문서에서 FloatingActionButton(icon: "add", color: .pink) .item(icon: "public", color: .red) .item(icon: "adb", color: .purple) .item(icon: "announcement", color: .blue) { Toast.show("Announcement!") } 선택적 인수 수 있으며 기본적으로 . size large small large 또는 사용자 정의일 수 있으며 기본적으로 . waves light, red, yellow, orange, purple, green, teal light 이 될 수 있으며 기본적으로 입니다. direction top, right, bottom, left top 일 수 있으며 기본적으로 입니다. mode hover, click, toolbar hover 프로그래밍 방식으로 제어합니다. lazy var fab = FloatingActionButton(...) fab.open() // to show the menu/toolbar fab.close() // to show the menu/toolbar fab.isOpen // the check if it is open 아이콘 객체를 초기화하면 어디에나 아이콘을 추가할 수 있습니다. MaterialIcon 이 객체는 아이콘 초기화 인수로 받아들입니다. 아이콘 유형 목록은 확인할 수 있습니다. 유형을 여기에서 MaterialIcon("announcement") 나중에 메소드를 호출하여 아이콘 유형을 즉시 변경할 수 있습니다. .type(...) 선택적 방법 허용합니다. .size(...) tiny, small, medium, large 허용 .side(...) left, right 모든 메소드는 반응형 @State 값을 허용하므로 아이콘과 해당 속성을 즉시 변경할 수 있습니다. 그림 물감 나열된 모든 색상은 해당 수정자를 포함하여 사용할 수 있습니다. 공식 문서에 텍스트 색상 Span("Hello").textColor(.red) // just red color Span("Hello").textColor(.red.lighten3) // red color with lighten-3 modifier Span("Hello").textColor(.red.darken4) // red color with darken-4 modifier 배경색 Div().materialBackground(.red) // just red color Div().textColor(.red.lighten3) // red color with lighten-3 modifier Div().textColor(.red.darken4) // red color with darken-4 modifier // or Div().red() Div().red(.lighten3) Div().red(.darken4) 그리드 그리드에서 가장 중요한 것은 와 선택적 수정자가 있는 열입니다. 너비 offest, push, pull Container { Row { Column(.small(.one)) { "1" } // <div class="col s1">1</div> Column(.small(.one)) { "2" } // <div class="col s1">2</div> Column(.small(.one)) { "3" } // <div class="col s1">3</div> Column(.small(.one)) { "4" } // <div class="col s1">4</div> Column(.small(.one)) { "5" } // <div class="col s1">5</div> Column(.small(.one)) { "6" } // <div class="col s1">6</div> Column(.small(.one)) { "7" } // <div class="col s1">7</div> Column(.small(.one)) { "8" } // <div class="col s1">8</div> Column(.small(.one)) { "9" } // <div class="col s1">9</div> Column(.small(.one)) { "10" } // <div class="col s1">10</div> Column(.small(.one)) { "11" } // <div class="col s1">11</div> Column(.small(.one)) { "12" } // <div class="col s1">12</div> } Divider() Row { Column(.small(.twelve)) { "screen-wide" } Column(.small(.six)) { "one-half" } Column(.small(.six)) { "one-half" } } Divider() Row { Column(.small(.twelve)) { "12-columns" } Column(.small(.six, offset: .six)) { "6-columns at the right" } } Divider() Row { Column(.small(.seven, push: .five)) { "7-columns pushed to the right" } Column(.small(.five, pull: .seven)) { "5-columns pulled to the left" } } } 위의 예시는 공식문서와 같이 1:1로 비교가 가능하기 때문에 간단히 비교하시면 됩니다. 열에 두 개 이상의 크기 클래스를 설정할 수 있습니다. Column(.extraLarge(.twelve), .large(.ten), .medium(.eight), .small(.six)) 조정 수직 정렬 VAlignWrapper { H5("This should be vertically aligned") } 텍스트 정렬 H5("This should be left aligned").leftAlign() H5("This should be right aligned").rightAlign() H5("This should be center aligned").centerAlign() 퀵 플로트 Div().floatLeft() // Quickly float things to left Div().floatRight() // Quickly float things to right Div().floatCenter() // Quickly float things to center 콘텐츠 숨기기/표시 Div().hideOnSmallOnly() // Hidden for Mobile Only Div().hideOnMedOnly() // Hidden for Tablet Only Div().hideOnMedAndDown() // Hidden for Tablet and Below Div().hideOnMedAndUp() // Hidden for Tablet and Above Div().hideOnLargeOnly() // Hidden for Desktop Only Div().showOnSmall() // Show for Mobile Only Div().showOnMedium() // Show for Tablet Only Div().showOnLarge() // Show for Desktop Only Div().showOnMediumAndUp() // Show for Tablet and Above Div().showOnMediumAndDown() // Show for Tablet and Below Div().pinned() // Pins element 서식 지정 잘림 H4("This is an extremely long title").truncate() // also with @State 호버 이 기능은 마우스를 올리면 상자 그림자에 대한 애니메이션을 추가합니다. Card().hoverable() // also with @State 브라우저 기본값 요소 스타일을 원래 상태로 되돌릴 수 있습니다. Ul().browserDefault() 이미지 반응형 이미지 Img().src("cool_pic.jpg").responsive() // resizes responsively to page width 원형 이미지 Img().src("images/yuna.jpg").circle() // square image that appears circular 비디오 반응형 임베드 Div { IFrame(...) }.videoContainer() 반응형 비디오 Video { Source().src("movie.mp4").type("video/mp4") }.responsive() Navbar Navbar { A("Logo") .floatLeft() // align left .floatRight() // align right .floatCenter() // align center } .deepPurple(.lighten4) // background .left() // left aligned links .right() // right aligned links .item("Sass", href: "/sass") .item("Components", href: "/badges") .item("JavaScript", active: true, href: "/collapsible") // as active // dropdown menu .dropdownItem("More", background: .white, hover: false) { DropdownItem("Dropdown 1", color: .red) { Toast.show("Hi") } DropdownItem("Dropdown 2", href: "") } 카드 Card("Card Title") .blueGrey(.darken1) .textColor(.white) .message("""I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively. """) .action("THIS IS A BUTTON") {} .action("THIS IS A LINK", href: "#") 프리로더 회보 PreloaderCircular(colors: .blue, .red, .green, .yellow).active() 불확정 PreloaderLinearIndeterminate() 한정된 @State var value: Double = 20 // change it to update the progress PreloaderLinearDeterminate($value) 쪽수 매기기 Pagination() .back(disabled: true, icon: "chevron_left") {} .item(1, href: "#1") .item(2, href: "#2") .item(3) { Toast.show("Going to 3!") } .forward() { Toast.show("Going forward!", rounded: true) } 그게 다야 좋습니다. 프레임워크의 약 20% 정도를 설명했습니다. Materialise CSS에 익숙하다면 표현이 사용하기 훨씬 쉽다는 것을 알 수 있을 것입니다! Swift 더 자세히 알아보고 싶으신가요? 앞으로 나올 기사를 계속 지켜봐주세요! 주저하지 말고 질문하고 자유롭게 기여해 주세요! Discord에

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

This story contains new, firsthand information uncovered by the writer.

The writer is smart, but don't just like, take their word for it. #DoYourOwnResearch

이 오디오는 이야기의 원래 언어로 제작되었습니다!

너무 오래; 읽다

Making security fun one episode at a time

SwifWeb 라이브러리: CSS 구체화

너무 오래; 읽다

Mikhail Isaev

STORY’S CREDIBILITY

Code License

Original Reporting

DYOR

About Author

태그 걸기

Languages

이 기사는 다음에서 발표되었습니다....

SwifWeb 라이브러리: CSS 구체화

너무 오래; 읽다

Mikhail Isaev

STORY’S CREDIBILITY

Code License

Original Reporting

DYOR

About Author

태그 걸기

Languages

이 기사는 다음에서 발표되었습니다....

관련 기사