最近開發中,需要用到勾選框,類似下面這種選中樣式:
選中如下:
因為是移動端開發專案,所以需要根據螢幕大小進行縮放
使用antd的也可以,只需要覆蓋原有樣式即可,但是當螢幕變大的時候,勾選框的大小是固定的,同時,阿里的勾選框樣式有用到js函式,還是比較麻煩的,所以思來想去還是決定自己手寫
react開發環境下,使用的是scss
name=
"checkbox"
value=
"item 1"
type=
"checkbox"
classname=
onchange=
/>
>
使用服務須同意
<
/span>
這個html片段外面還有乙個div我省略了,可以自己寫乙個div,再在下面的css外面套乙個page-protocol的css就可以看見實際樣式了
$vw_base
: 375;
@function
vw($px)
&__tui-checkbox:checked
&__tui-checkbox:focus
&__tui-checkbox
&__tui-checkbox:checked::after
參考文章: react專案中整合redux
npm install redux npm install react redux npm install redux thunk 生成store 在專案初始化預設index檔案中設定.index.js import from redux const store createstore fn 匯入r...
react專案中的注意點
一 es6 的編譯方法 目前主流的瀏覽器還不支援es6。現在一般採用webpack 和 text babel 對jsx 語法進行編譯,編譯成正常的js語言。type text babel 這個是引用babel.js庫。二 react 中有個proptypes 在react中元件的屬性可以接受任意值,...
在專案中使用react
1.執行 cnpm install react react dom s react安裝包 專門用於建立元件和虛擬dom的,同時元件的生命週期都在這個包中 react dom安裝包 專門進行dom操作的,最主要的應用場景就是reactdom.render 2.在index.html頁面中建立容器 di...