資訊專欄INFORMATION COLUMN
摘要：移動端樣式不統一問題如何解決用不過彈出層是不可以的但是展示的地方可以就像如圖我們找個設計然后你就可以開始做了首先會導致一些不對的地方不可以多帶帶使用其實我們發現我們需要這樣一個
移動端 select 樣式不統一問題如何解決 用css
不過彈出層是不可以的
但是展示的地方可以 就像如圖
我們找個設計
然后你就可以開始做了
首先 appearance:none 會導致一些不對的地方 不可以多帶帶使用
其實我們發現我們需要這樣一個layout
html
111
scss
@mixin use-layout-left-pos-and-right-pos() {
.layout[role="group"] {
&.left-pos-and-right-pos {
@extend .utility-pos-relative;
}
> .layout__item {
@include modifiy("prefix") {
@extend .utility-pos-absolute;
left: 0;
top: 0;
}
@include modifiy("content") {
@extend .full-width;
}
@include modifiy("suffix") {
@extend .utility-pos-absolute;
right: 0;
top: 0;
}
}
}
}
我們寫寫樣式
scss
@mixin interface-form-select() {
.form-select {
@content;
}
}
@mixin use-form-select() {
$defaults: (
".form-select": (
)
);
@include interface-form-select() {
display: block;
@include register-hook("form");
@content;
}
}
@mixin use-form-select--basic() {
$defaults: (
".form-select--basic": (
"padding": 0,
"border": 1px solid transparent
)
);
.form-select--basic {
&.grey {
border-color: get-custom-color("grey", "500");
}
select {
appearance: none;
border-color: transparent;
background-color: transparent;
}
@include sim-querySelector($defaults, ("padding", "border"));
@include register-hook("form-select--basic");
@content;
}
}
這時候我慌了 這個小三角怎么辦
html
scss
@import "../utils/size";
@import "../utils/opposite-direction";
// Arrow helper mixin
// ---
// @param [string] $direction: arrow direction
// @param [color] $color (inherit): arrow color
// @param [number] $size (1em): arrow size
// ---
@mixin triangle($direction, $color: currentColor, $size: 1em) {
// Make sure the direction is valid
@if not index(top right bottom left, $direction) {
@warn "Direction must be one of top, right, bottom or left.";
}
@else {
@include size(0, 0); // Size
content: "";
z-index: 2;
border-#{opposite-direction($direction)}: $size * 1.5 solid $color;
$perpendicular-borders: $size solid transparent;
@if $direction == top or $direction == bottom {
border-left: $perpendicular-borders;
border-right: $perpendicular-borders;
}
@else if $direction == right or $direction == left {
border-bottom: $perpendicular-borders;
border-top: $perpendicular-borders;
}
}
}
.icon.css-shape.shape--arrow-down {
@include triangle(
$direction : bottom,
$color : get-custom-color("grey", "500"),
$size : 5px
);
}
不過arrow點擊的時候 好像點不動啊
沒事
加個pointer-events:none; 可以啦
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111245.html
摘要：使用，開發者用來表示異步數據流，通過操作符來查詢異步數據量，并使用來參數化異步數據流中的并發。在中，你可以表述多個異步數據流，并且使用對象訂閱事件流。因為序列是數據流，你可以使用由擴展方法實現的標準查詢操作符來查詢它們。 對 我又挖坑了 不過其實也不算挖坑 因為ui構建中就會有填坑的文章 之前一直在寫《編寫大型web頁面 結合現有前端形勢思考未來前端》這是一篇巨難寫的文章 估計要到年中...
摘要：見圖確定設計稿大小使用我的中就可以生成一個兼容數值為了加速解析最好把要解析的文本放到頁面中如果你想使用在手機端那么就要使用配套的當然不需要自己把提取出來方法已經提取好不需要多慮版本號低于只需要支持一下然后在回調函數里就是正確的布局 content# 指代html content 就是你插入的html內容 效果圖 showImg(https://segmentfault.com/img/...
摘要：每天發垃圾文我也是蠻拼的沒有有有前面所說的是什么設計設計要求點擊切換滑動切換從圖片中我們可以看出上下不定自動填充布局這個我以前講過了就不寫了如果用表述下就是這樣的很顯然我們需要一個一個 每天發垃圾文 我也是蠻拼的 web 沒有tabview android 有tabviewios 有tabcontrol web 前面所說的是什么 設計 showImg(https://segmentfa...
摘要：頁面搭建需要準備什么工具首先我們會和設計師溝通我們需要一些檢驗設計的工具自動裁圖自動測量工具我這里安利一下一個工具我用的可以使用阿里的工具拿到界面不要急著做看看有什么問題有些我都會問端問題如果要兼容我要考慮成本如果是一個人辦可能會出現時間的 web頁面搭建需要準備什么工具 首先我們會和設計師溝通 我們需要一些檢驗設計的工具 ps 自動裁圖 自動測量工具 （我這里安利一下一個工具 我用...
閱讀 3383·2023-04-25 20:37
閱讀 3142·2021-09-07 09:59
閱讀 1665·2019-08-29 12:43
閱讀 1185·2019-08-28 18:27
閱讀 479·2019-08-26 13:50
閱讀 2024·2019-08-26 10:33
閱讀 3591·2019-08-23 18:39
閱讀 2390·2019-08-23 18:09
