Tufte-css: 버튼 요소 지원

아이디어가 궁금합니다. 사용 사례(특히 앵커가 충분하지 않은 경우)와 아이디어 및 기여에 대해 더 듣고 싶습니다.

ImageQuilt의 빨간색 "Download Quilt" 버튼(http://imagequilts.com, 하단 근처)은 적절한 출발점일 수 있습니다.

링크는 다른 콘텐츠에 대한 연결 및 점프 지점을 나타냅니다(인페이지, 앵커 또는 href 속성을 통해 해제). 버튼은 현재 콘텐츠에 영향을 미치는 작업에 대한 트리거입니다. 이러한 규칙을 고수하는 IMO는 모든 것을 명확하게 유지합니다. IOW 버튼이 필요하다고 생각합니다.

특정 방식으로 데이터를 필터링하는 옵션과 함께 차트를 ​​표시하고 싶다고 가정해 보겠습니다. 버튼을 클릭하면 필터가 토글되고 대화형 차트의 콘텐츠가 새로 변경된(및 바인딩된) 데이터에 따라 업데이트됩니다.

이 질문이 해결되기까지는 시간 문제라고 생각합니다. 열어둘 필요가 없습니다. 나는 잠시 동안 내 사이트에 tufte-css를 사용해 왔으며 결과에 매우 만족합니다. 나는 곧 내가 작업하고 있는 프로젝트의 버튼 스타일을 다룰 것이고 링크를 사용하거나 다른 것을 제안(풀 리퀘스트)할 것입니다.

👍
어떤 종류의 버튼이 있는지 듣고 싶습니다. 일반 솔루션을 개발할 때의 문제 중 일부는 각 시각화/테이블/차트에 _선험적으로_ 할당하기 어려운 고유한 사용자 지정 스타일이 있다는 것입니다.

기존 프레임워크 스타일과 의도의 명확성과 조화를 위해 노력하면서 작성 중인 앱의 라디오 및 일반 버튼에 대해 다음과 같은 스타일을 생각해 냈습니다.

아래 스크린샷 참조:

• PLAY 버튼과 같은 일반 버튼에는 진한 색(#111) 테두리가 있습니다.
• 라디오(옵션) 버튼은 선택되지 않은 경우(9x9 버튼) 대시로 윤곽이 표시되고 선택되는 경우(5x5 버튼) 반전된(#111 배경 및 #FFFFF8 컬러 텍스트) 윤곽이 나타납니다.

@gamecubate 나는 내 구현에서 버튼으로 같은 일을 하게 되었습니다. 그것은 나를 위해 작동하지만 일반적인 구현으로 스타일은 선의 변형(점선, 점선, 실선 등)으로 참가자를 지정하는 그래프와 충돌할 수 있습니다. 특정 참가자의 참여를 유도하는 버튼이 있는 경우 그에 맞게 스타일을 지정하는 것이 좋습니다.

@frostbitten 맞습니다 . 참가자를 위해 색상을 사용할 수도 있습니다. 나는 @daveliepmann 이 버튼의 표준 스타일을 하드 코딩하는 것을 주저한다는 것을 이해합니다. 사용 사례가 너무 많습니다.

이 문제를 다시 일으켜 죄송하지만 이 문제도 궁금했습니다.

나는 이것을 사용하는 프로젝트를 가지고 있으며 버튼은 대부분 표준 CSS로 처음에는 완전히 스타일 이 지정되지 않았습니다. 적용된 스타일은 "사용자 에이전트 스타일시트"에서 가져온 것 같습니다. (이것은 내가 실행하는 Chrome 버전의 기발한 것일 수 있습니다.)

이 CSS를 추가하면 잘 작동합니다.

button {
  font-family: inherit;
  font-size:   inherit;
  padding:     0.5em;
}

예시:

버튼은 버튼처럼 보이지만 (Arial보다) 더 멋진 글꼴을 가지고 있으며 이제 나머지 스타일 콘텐츠와 잘 맞습니다.

언급된 ImageQuilts 페이지에서 "Download Quilt" 버튼을 찾을 수 없습니다. Google 크롬 확장 프로그램의 일부인 것 같습니다. 그러나 나는 일반적으로 모양을 좋아합니다. 이 프로젝트에서 표준 글꼴 CSS와 작업할 굵은 기울임꼴 글꼴을 얻을 수 없었습니다.

나는 또한 @gamecubate 의 예 를 좋아합니다. @gamecubate – CSS를 공유하시겠습니까?

@kenny-evitt 물론이죠. 여기, 모든 화려함이 있습니다. :)

.btn {
  border: 2.5px solid #111;
  color: #111;
  display: inline-block;
  font-size: 1.1rem;
  text-transform: uppercase;
  padding: 15px 10px;
  margin: 5px;
  min-width: 60px;
  text-align: center;
  cursor: pointer;
}

.btn.large {
  border: 3px solid #111;
  font-size: 1.5rem;
  font-weight: 800;
  margin: 10px 5px;
  padding: 15px;
}

.btn.mini {
  border: 1px solid #111;
  color: #111;
  min-width: 40px;
  line-height: 40px;
  padding: 0 10px;
}

.btn.radio {
  border-style: dashed;
}

.btn.selected {
  background: #111;
  color: #FFFFF8;
}

.btn.white {
  background: #FFFFF8;
  color: #111;
}

.btn.flash {
  background: #EEE!important;
}

.btns {
  margin: 3px 0;
}

.btns .btn:first-child {
  margin-left: 0;
}

.btns .btn:last-child {
  margin-right: 0;
}

.btns.stack {
  margin: 15px 0 20px 0;
}

.btns.stack > .btn {
  display: block;
  margin: 5px 0;
}

a {
  font-size: 1.5rem;
  color: #111;
  text-decoration: none;
  padding-bottom: 1px;
  border-bottom: 2px solid #111;
}