press-pix/common/styles/pubgm/direction-base-example.less

基于 PixUI 的 Press 组件库

/**
 * 示例组件样式 - 展示如何手动导入 direction-base.less
 * 
 * 使用步骤：
 * 1. 在文件顶部导入 direction-base.less
 * 2. 使用混合宏定义方向敏感的样式
 * 3. JavaScript 中通过添加 .rtl-map 类切换 RTL 模式
 */

// ============================================
// 📦 导入 RTL 混合宏
// ============================================
@import './direction-base.less';

// ============================================
// 🎨 组件样式定义
// ============================================

.example-card {
  display: flex;
  .flex-direction-row();
  .padding-inline-start(0.4rem);
  .padding-inline-end(0.2rem);
  border: 1px solid #e0e0e0;
  border-radius: 0.16rem;
  background: #fff;
  
  // 卡片图标
  .card-icon {
    width: 0.8rem;
    height: 0.8rem;
    .margin-inline-end(0.24rem);
    border-radius: 50%;
    background: #f0f0f0;
  }
  
  // 卡片内容
  .card-content {
    flex: 1;
    
    .card-title {
      font-size: 0.32rem;
      font-weight: 600;
      .text-align-start();
      .margin-inline-start(0);
    }
    
    .card-description {
      font-size: 0.28rem;
      color: #666;
      .text-align-start();
      margin-top: 0.08rem;
    }
  }
  
  // 卡片操作按钮
  .card-action {
    position: absolute;
    top: 0.2rem;
    .inset-inline-end(0.2rem);
    
    button {
      .padding-inline-start(0.24rem);
      .padding-inline-end(0.24rem);
      .border-inline-start(0.04rem solid #1890ff);
    }
  }
}

// ============================================
// 📋 列表布局示例
// ============================================

.example-list {
  .list-item {
    display: flex;
    .justify-content-start();
    .padding-inline-start(0.32rem);
    .padding-inline-end(0.32rem);
    .border-inline-start(0.06rem solid #1890ff);
    
    &:hover {
      .border-inline-start-color(#40a9ff);
    }
    
    .item-badge {
      .margin-inline-end(0.16rem);
    }
    
    .item-text {
      .text-align-start();
    }
  }
}

// ============================================
// 🎯 导航栏示例
// ============================================

.example-navbar {
  display: flex;
  .justify-content-start();
  
  .nav-logo {
    .margin-inline-end(auto);
  }
  
  .nav-menu {
    display: flex;
    .flex-direction-row();
    
    .nav-item {
      .margin-inline-start(0.4rem);
      
      &:first-child {
        .margin-inline-start(0);
      }
    }
  }
  
  .nav-actions {
    .margin-inline-start(0.4rem);
  }
}