Rio v4에서 CSS 프레임워크를 사용하는 경우 Semantic UI Rio는 어떻습니까?

14916 단어 riotriot.jsSemanticUIJavaScript
Rio tv4가 출시된 지 꽤 됐는데, 드디어 Semantic UI Rio도 대응v4할 수 있게 되었다
Riot.js Advent Calendar 2019 첫날 죄송한데 홍보 좀 해주세요!

Semantic UI Rio는 무엇입니까?


CSS 프레임워크Semantic UI를 위한 Rio의 어셈블리 세트입니다.
Modules는 Semantic UI의 JavaScript와 jQuery에 의존하지 않고 사용할 수 있습니다.1
https://semantic-ui-riot.web.app

Semantic UI Rio가 의존하는 Rio 및 Semantic UI 버전


리우 버전에 맞춰서.x와 2.x 중 하나를 사용하세요.2
Semantic UI Riot
Riot
Semantic UI
1.x.x
3.0.0
2.3.0
2.x.x
4.0.0
2.3.0

준비된 구성 요소 목록


Modules


Semantic UI 의 Modules 에서 개인이 자주 사용하는 구성 요소를 구성합니다.
  • Accordion
  • Checkbox
  • Dropdown
  • Modal
  • Popup
  • Progress
  • Rating
  • Tab

    • Addons


    이것은 Semanti UI의 Modules에 없는 것으로 있으면 매우 편리할 것이다.
  • Alert
  • 는 브라우저 표준의alert()를 대체할 수 있습니다.
  • Confirm
  • 는 브라우저 표준의 confirm () 을 대체할 수 있습니다.
  • Datepicker
  • Pagination
  • Radio
  • Semantic UI는 체크박스에 포함된 내용을 독립적으로 구성합니다.
  • Table
  • 는 열에서 정렬할 수 있습니다.
  • Toast
  • 일정 시간이 지나면 사라질 정보.
  • Validation Error

    • 구성 요소에 대한 간단한 설명


    Checkbox

    <su-checkbox name="checkbox1">
  Make my profile visible
</su-checkbox>
    값의 교환 사용checked 속성.
    this.$("[name='checkbox1']").checked = true

    Dropdown

    <su-dropdown name="dropdown1" items="{ dropdownItems }"></su-dropdown>

<script>
  export default {
    dropdownItems: [
      {
        label: 'Gender',
        value: null,
        default: true
      },
      {
        label: 'Male',
        value: 1
      },
      {
        label: 'Female',
        value: 2
      },
    ]
  }
</script>
    items 속성 드롭다운을 설정할 때 표시되는 항목입니다.
    값의 교환은 value 속성을 사용하지만, value 속성의 경우 getAttribute가 아니면setAttribute 교환할 수 없습니다.
    (Riot.js에서 예약어로 사용되기 때문인 것 같은데요? 그런데 잘 모르겠어요. 자세한 상황을 알려주세요.)
    this.$("[name='dropdown1']").getAttribute('value')
this.$("[name='dropdown1']").setAttribute('value', value)

    Modal

    <su-modal modal="{ modal }" show="{ state.show }" onhide="{ onHide }">
    <p>Modal Content</p>
</su-modal>
<button class="ui button" onclick="{ showModal }">Show modal</button>

<script>
  export default {
    state: {
      show: false
    },
    modal: {
      header: 'Select a Photo',
      buttons: [{
        text: 'Ok',
        type: 'primary',
        icon: 'checkmark'
      }, {
        text: 'Cancel'
      }]
    },

    showModal() {
      this.update({ show: true })
    },
    onHide() {
      this.update({ show: false })
    }
  }
</script>
    모드의 내용은 탭의 텍스트에 있고 다른 페이지의 눈썹과 단추의 정보는 modal 속성으로 설정되며 show 속성이 true로 설정되었을 때 모드를 표시합니다.
    모드가 닫혔을 때 onhide 호출을 호출하기 때문에 show 속성 변수 (여기 state.show 를 false 로 설정하는 것을 잊지 마십시오.

    Other


    여러가지 구성품도 준비했으니, 관심 있으면 가보세요.
    https://semantic-ui-riot.web.app

    설치하다.


    여기까지 읽어보고 싶으신 분들은 꼭 설치해 보세요!

    CDN에서 간단하게 모두 가져오는 방법


    index.html
    <!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css" />
  <script src="https://unpkg.com/[email protected]/riot+compiler.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic-ui-riot.js"></script>
</head>

<body>
  <sample></sample>

  <script type="riot" data-src="./sample.riot"></script>
  <script>
    riot.compile().then(() => {
      riot.mount("sample");
    });
  </script>
</body>
</html>
    sample.riot
    <sample>
  <su-checkbox>Make my profile visible</su-checkbox>
</sample>

    Webpack 사용 방법

    npm i -S semantic-ui-riot
    index.js
    import {component} from 'riot'
import 'semantic-ui-riot'
import Sample from './sample.riot'

component(Sample)(document.getElementById('app'))
    webpack.config.js
    module.exports = {
  module: {
    rules: [
      {
        test: /\.riot$/,
        exclude: /node_modules/,
        use: [{
          loader: '@riotjs/webpack-loader'
        }]
      }
    ]
  }
};
    index.html
    <!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css">
</head>
<body>
  <div id="app"></div>
  <script src="main.js"></script>
</body>
</html>
    sample.riot
    <sample>
  <su-checkbox>Make my profile visible</su-checkbox>
</sample>

    Thanks!


    Semantic UI Rio의 아이콘은 Rio 사용자와 디자이너@nibushibu가 만들었습니다!
    감사합니다!
    Modules를 사용하기 쉬운 어셈블리 세트가 설정되어 있으므로 이외의 Elements, Collections, Views는 Semantic UI를 직접 사용하십시오.  ↩
    Riotv4 대응 버전을 발행할 때 v3 대응 버전0.24.1은 1.0.0으로 업그레이드됩니다.파괴적인 변경 없이 마음만 가다듬으면 완성되니 Riotv3를 사용할 때는 꼭 사용하세요1.x.x.  ↩
    성능 드로잉: 캔버스 렌더링 엔진 구축
    큰 틀의 유동을 한데 모으다

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage