CSSはリモコンのボタンを模倣する

注: このデモはミニプログラム環境でテストされており、他の h5 および pc Web ページにも適用できます。ミニプログラムの単位とタグ名を汎用のものに変更し、必要に応じて調整するだけです。

基本的な考え方は、4 つの同一の正方形を T 字型のパターンでレイアウトし、回転属性と組み合わせて組み合わせることです。

HTML構造

<view class="button-group">
  <view class="outter-circle">
    <view class="inner-parts brown" bindtap="button" data-type="volAdd">
      <text class="rotate">+</text>
    </ビュー>
    <view class="inner-parts silver" bindtap="button" data-type="chaAdd">
      <text class="rotate">+</text>
    </ビュー>
    <view class="inner-parts blue" bindtap="button" data-type="chaDes">
      <text class="rotate">-</text>
    </ビュー>
    <view class="inner-parts gold" bindtap="button" data-type="volDes">
      <text class="rotate">-</text>
    </ビュー>

    <view class="inner-circle" bindtap="button" data-type="ok">
      <text class="ok rotate">OK</text>
    </ビュー>
  </ビュー>
</ビュー>

CSS スタイル

.ボタングループ{
  パディングトップ: 20rpx;
  幅: 300rpx;
  高さ: 300rpx;
  背景色: ピンク;
}
.外側の円 {
  位置: 相対的;
  左マージン: 10rpx;
  幅: 280rpx;
  高さ: 280rpx;
  背景色: ライトシアン;
  境界線の半径: 100%;
  オーバーフロー: 非表示;
  変換の原点: 中心;
  変換: 回転(45度);
}
.インナーパーツ{
  フロート: 左;
  幅: 140rpx;
  高さ: 140rpx;
  行の高さ: 140rpx;
  テキスト配置: 中央;
}
.シルバー{
  背景色: シルバー;
}
。金 {
  背景色: ゴールド;
}
。青 {
  背景色: 青;
}
。茶色 {
  背景色: 茶色;
}
.インナーサークル{
  位置: 絶対;
  上マージン: 70rpx;
  左マージン: 70rpx;
  幅: 140rpx;
  高さ: 140rpx;
  行の高さ: 140rpx;
  テキスト配置: 中央;
  境界線の半径: 100%;
  背景色: 水色;
}
.回転{
  表示: インラインブロック;
  変換: 回転(-45度);
}

注意: テキスト領域がインラインブロックでない場合、回転プロパティは有効になりません。

ボタンクリックイベント

ボタン: 関数(e) {
    var ボタンタイプ = e.currentTarget.dataset.type
    console.log(ボタンタイプ)
    スイッチ (ボタンタイプ) {
      ケース 'chaAdd':
        console.log('チャンネルを後戻り')
      壊す
      ケース 'chaDes':
        console.log('チャンネルを転送する')
      壊す
      ケース 'volAdd':
        console.log('音量を強くする')
      壊す
      ケース 'volDes':
        console.log('音量を弱める')
      壊す
      デフォルト：
        コンソールログ('ok')
    }
  }

操作効果